123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
-
- <div id="TankDevicesOverview">
- <div class="tank-subcontent" ref="subcontentdiv">
- <div class="tank_filter_div" :style="btnStyle" @@click="pageUp()">
- </div>
- <div v-for="(item, index) in tankObject.tankArray" :class="classArray[index]" :key="index">
- <div class="left">
- <div class="text">{{item.TankNumber}}号油罐</div>
- <div class="text">{{item.Product.ProductLabel}}</div>
- </div>
- <div class="center" @@click.capture="clickDiv(index)">
- <tankcomp ref="tankcompref"></tankcomp>
- </div>
- <div class="right" v-if="currentPage == pageMenu.tank && tankReadingObject.tankReadingArray[index]">
- <div class="text">实时油量:{{tankReadingObject.tankReadingArray[index].Volume | numFilter}}升</div>
- <div class="text">实时油位:{{tankReadingObject.tankReadingArray[index].Height | numFilter}}mm</div>
- <div class="text">剩余空间:{{tankReadingObject.tankReadingArray[index].Ullage | numFilter}}升</div>
- <div class="text">实时油温:{{tankReadingObject.tankReadingArray[index].Temperature | numFilter}}℃</div>
- <div class="text">实时水位:{{tankReadingObject.tankReadingArray[index].Water | numFilter}}mm</div>
- </div>
- <div class="right" v-if="currentPage == pageMenu.delivery && tankReadingObject.tankReadingArray[index]">
- <div class="text">起始油量:{{startVolume[index] | numFilter}}升</div>
- <div class="text">当前油量:{{tankReadingObject.tankReadingArray[index].Volume | numFilter}}升</div>
- <div class="text">进油状态:{{deliveryStatus[index]}}</div>
- <button class="delivery_button" :style="startStyle[index]" type="button" @@click="start(index)">开始</button>
- <button class="delivery_button" :style="endStyle[index]" type="button" @@click="end(index)">结束</button>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- Vue.component("tankcomp", {
- data () {
- return {
- canvasWidth: 8,
- canvasData: {
- 'offset': 3,
- 'canvas': null,
- 'context': null,
- circle: { 'centerDot': 0, 'radius': 0, 'diameter': 0 }
- }
- }
- },
- methods: {
- getTankData(tankWidth, tankReading, limitData) {
- try {
- this.canvasWidth = tankWidth
- this.initCanvas()
- let productHeight = tankReading.Height * limitData.heightRatio
- let waterHeight = tankReading.Water * limitData.heightRatio
- if (productHeight >= 0 || productHeight <= this.canvasData.circle.diameter) {
- this.drawTank(productHeight, waterHeight)
- }
- } catch (err) {
- console.log(err)
- }
- },
- initCanvas() {
- this.canvasData.canvas = this.$refs.canvasRef
- this.canvasData.circle.centerDot = this.canvasWidth / 2
- this.canvasData.circle.radius = this.canvasData.circle.centerDot - this.canvasData.offset
- this.canvasData.circle.diameter = this.canvasData.circle.radius + this.canvasData.circle.radius
- this.canvasData.context = this.canvasData.canvas.getContext('2d')
- },
- drawTank(productHeight, waterHeight) {
- this.canvasData.canvas.width = this.canvasWidth
- this.canvasData.canvas.height = this.canvasWidth
- this.canvasData.context.fillStyle = '#DEB887'
- this.canvasData.context.fillRect(this.canvasData.offset, this.canvasWidth - productHeight - this.canvasData.offset, this.canvasData.circle.diameter, productHeight - waterHeight)
- this.canvasData.context.fillStyle = '#6495ED'
- this.canvasData.context.fillRect(this.canvasData.offset, this.canvasWidth - waterHeight - this.canvasData.offset, this.canvasData.circle.diameter, waterHeight)
- this.canvasData.context.beginPath()
- this.canvasData.context.lineWidth = 6
- this.canvasData.context.setLineDash([])
- this.canvasData.context.strokeStyle = '#505455'
- this.canvasData.context.arc(this.canvasData.circle.centerDot, this.canvasData.circle.centerDot, this.canvasData.circle.radius, 0, Math.PI * 2, false)
- this.canvasData.context.stroke()
- this.canvasData.context.globalCompositeOperation = 'destination-in'
- this.canvasData.context.arc(this.canvasData.circle.centerDot, this.canvasData.circle.centerDot, this.canvasData.circle.radius, 0, Math.PI * 2, false)
- this.canvasData.context.fill()
- }
- },
- template: '<canvas ref="canvasRef"/>'
- })
- var vm = new Vue({
- el: '#TankDevicesOverview',
- data: {
- pageNumber: 0,
- currentIndex: -1,
- receiveReading: true,
- tankObject: { change: false, tankArray: [] },
- tankReadingObject: { change: false, tankReadingArray: [] },
- classArray: ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
- limitDataArray: [],
- tankWidth: 0,
- tankIndex: 0,
- path: '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/',
- pageMenu: { tank: 'tank', delivery: 'delivery' },
- currentPage: '',
- btnStyle: '',
- deliveryMode: ['Manual', 'Automatic', 'Automatic', 'Manual'],
- startVolume: [],
- deliveryStatus: [],
- startStyle: [],
- endStyle: []
- },
- mounted() {
- this.tankWidth = this.$refs.subcontentdiv.clientWidth * 0.16
- this.currentPage = this.pageMenu.tank
- this.btnStyle = 'background-image: url(/images/device/' + this.currentPage + '.png);'
- },
- watch: {
- tankObject: {
- handler(newValue, oldValue) {
- for (let index = 0; index < this.tankObject.tankArray.length; index++) {
- this.limitDataArray[index] = { heightRatio: this.tankWidth / this.tankObject.tankArray[index].Diameter }
- }
- if (this.currentIndex < this.tankObject.tankArray.length - 1) {
- if (this.receiveReading) {
- this.receiveReading = false
- this.currentIndex += 1
- Publish2('[' + this.tankObject.tankArray[this.currentIndex].TankNumber + ']', this.path + 'GetTankReadingAsync')
- }
- } else if (this.receiveReading) {
- this.currentIndex = -1
- }
- },
- deep: true
- },
- tankReadingObject: {
- handler(newValue, oldValue) {
- this.$forceUpdate()
- for (let index = 0; index < this.tankReadingObject.tankReadingArray.length; index++) {
- let tankcom = this.$refs.tankcompref[index]
- tankcom.getTankData(this.tankWidth, this.tankReadingObject.tankReadingArray[index], this.limitDataArray[index])
- }
- },
- deep: true
- }
- },
- filters: {
- numFilter(value) {
- let realVal = ''
- if (!isNaN(value) && value !== '') {
- realVal = parseFloat(value).toFixed(2)
- } else {
- realVal = 'N/A'
- }
- return realVal
- }
- },
- methods: {
- pageUp() {
- if (this.btnStyle === 'background-image: url(/images/device/' + this.pageMenu.tank + '.png);') {
- this.currentPage = this.pageMenu.delivery
- for (let index = 0; index < this.tankObject.tankArray.length; index++) {
- // this.deliveryMode[index] = 'Manual' // Automatic, Manual
- if (this.deliveryMode[index] === 'Manual') {
- this.startStyle[index] = 'background-image: url(/images/device/blue.png);'
- } else {
- this.startStyle[index] = 'background-image: url(/images/device/gray.png);'
- }
- this.endStyle[index] = 'background-image: url(/images/device/gray.png);'
- this.deliveryStatus[index] = '无'
- this.startVolume[index] = 0
- }
- } else {
- this.currentPage = this.pageMenu.tank
- }
- this.btnStyle = 'background-image: url(/images/device/' + this.currentPage + '.png);'
- },
- start(index) {
- if (this.startStyle[index] === 'background-image: url(/images/device/blue.png);') {
- this.startStyle[index] = 'background-image: url(/images/device/gray.png);'
- this.endStyle[index] = 'background-image: url(/images/device/blue.png);'
- this.startVolume[index] = this.tankReadingObject.tankReadingArray[index].Volume
- this.deliveryStatus[index] = '进行中'
- this.$forceUpdate()
- } else {
- alert('请先开启手动进油功能')
- }
- },
- end(index) {
- if (this.endStyle[index] === 'background-image: url(/images/device/blue.png);') {
- this.startStyle[index] = 'background-image: url(/images/device/blue.png);'
- this.endStyle[index] = 'background-image: url(/images/device/gray.png);'
- this.deliveryStatus[index] = '无'
- this.$forceUpdate()
- }
- },
- clickDiv(tankIndex) {
- RenderIndexContainer('TankDetailFnav', $('fnav'), tankIndex)
- }
- }
- })
- function OnReply(topic, jsonObj) {
- let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
- if (topic === path + 'GetTanksAsync_reply') {
- let tankCount = 4
- let index = vm.pageNumber * tankCount
- let len = (index + tankCount) < jsonObj.length ? (index + tankCount) : jsonObj.length
- if (len !== vm.tankObject.tankArray.length) vm.tankObject.tankArray = []
- for (let i = 0; index < len; index++) {
- vm.tankObject.tankArray[i++] = jsonObj[index]
- }
- vm.tankObject.change = !vm.tankObject.change
- } else if (topic === path + 'GetTankReadingAsync_reply') {
- vm.tankReadingObject.tankReadingArray[vm.currentIndex] = jsonObj
- vm.receiveReading = true
- vm.tankReadingObject.change = !vm.tankReadingObject.change
- }
- }
- </script>
- <style scoped>
- .topLeft {
- position: absolute;
- top: 2%;
- left: 3%;
- width: 43%;
- height: 39%;
- background-color: transparent;
- }
- .topRight {
- position: absolute;
- top: 2%;
- right: 3%;
- width: 43%;
- height: 39%;
- background-color: transparent;
- }
- .bottomLeft {
- position: absolute;
- bottom: 8%;
- left: 3%;
- width: 43%;
- height: 39%;
- background-color: transparent;
- }
- .bottomRight {
- position: absolute;
- bottom: 8%;
- right: 3%;
- width: 43%;
- height: 39%;
- background-color: transparent;
- }
- .left {
- position: absolute;
- top: 15%;
- left: 0;
- width: 19%;
- background-color: transparent;
- }
- .center {
- position: absolute;
- top: 15%;
- left: 19%;
- width: 42%;
- background-color: transparent;
- }
- .right {
- position: absolute;
- top: 15%;
- right: 0;
- width: 38.8%;
- background-color: transparent;
- }
- .text {
- margin: 6% 0;
- font-size: 1.1rem;
- }
- </style>
|