FCC/Applications/UniversalApi_WebConsole_App/Views/TankDetails/TankDevicesOverview.cshtml


<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>