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


<div id="TankDeviceDetails">
    <div class="tank-subcontent">
        <div class="title" v-if="currentTank!=null">{{currentTank.TankNumber}}号油罐 &nbsp; &nbsp; {{currentTank.Product.ProductLabel}}</div>
        <div class="left" v-if="currentTank!=null">
            <div class="text">实时油量：{{tankReading.Volume | numFilter}}升</div>
            <div class="text">剩余空间：{{tankReading.Ullage | numFilter}}升</div>
            <div class="text">实时油温：{{tankReading.Temperature | numFilter}}℃</div>
            <div class="text">温度补偿油量：{{tankReading.TcVolume | numFilter}}升</div>
            <div class="text">实时水量：{{tankReading.WaterVolume | numFilter}}升</div>
            <div class="text">油罐容量：{{currentTank.Limit.FullVolume | numFilter}}升</div>
            <div class="text">油罐直径：{{currentTank.Diameter | numFilter}}mm</div>
            <div class="text">上一次入库量：{{tankReading.LastDelivery | numFilter}}升</div>
        </div>
        <div class="center" ref="centerdiv">
            <div class="tank_text">实时油位：{{tankReading.Height | numFilter}}mm</div>
            <canvas ref="canvasRef" />
            <div class="tank_text">实时水位：{{tankReading.Water | numFilter}}mm</div>
        </div>
        <div class="right">
            <div class="color_text" :style="{'border-left-color': limitData.MaxVolume.color}">容量上限：{{limitData.MaxVolume.height}}升</div>
            <div class="color_text" :style="{'border-left-color': limitData.HighProduct.color}">高油位警报：{{limitData.HighProduct.height}}%</div>
            <div class="color_text" :style="{'border-left-color': limitData.HighWaterWarning.color}">过量装载：{{limitData.HighWaterWarning.height}}%</div>
            <div class="color_text" :style="{'border-left-color': limitData.HighWaterAlarm.color}">高水位警报：{{limitData.HighWaterAlarm.height}}mm</div>
            <div class="color_text" :style="{'border-left-color': limitData.FullVolume.color}">高水位预警：{{limitData.FullVolume.height}}mm</div>
            <div class="color_text" :style="{'border-left-color': limitData.FuelTemperatureLowLimit.color}">低容量预警：{{limitData.FuelTemperatureLowLimit.height}}升</div>
            <div class="color_text" :style="{'border-left-color': limitData.FuelTemperatureHighLimit.color}">入油报警：{{limitData.FuelTemperatureHighLimit.height}}%</div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#TankDeviceDetails',
        data: {
            currentTank: null,
            tankReading: {},
            limitData: {
                MaxVolume: { height: 360, color: '#891818' },
                HighProduct: { height: 330, color: '#f06939' },
                HighWaterWarning: { height: 300, color: '#e71828' },
                HighWaterAlarm: { height: 270, color: '#1959a7' },
                FullVolume: { height: 158, color: '#29bbb7' },
                FuelTemperatureLowLimit: { height: 60, color: '#fe18fe' },
                FuelTemperatureHighLimit: { height: 30, color: '#e3d718' },
                heightRatio: 0.1
            },
            canvasData: {
                'offset': 3,
                'canvas': null,
                'context': null,
                circle: { 'centerDot': 0, 'radius': 0, 'diameter': 0 }
            },
            canvasWidth: 0
        },
        mounted() {
            this.canvasWidth = this.$refs.centerdiv.clientWidth
            this.initCanvas()
        },
        watch: {
            canvasWidth(newValue) {
                this.initCanvas()
            },
            tankReading: {
                handler(newValue, oldValue) {
                    if (this.currentTank) {
                        this.limitData.heightRatio = this.canvasWidth / this.currentTank.Diameter
                        this.drawTank()
                    }
                },
                deep: true
            }
        },
        filters: {
            numFilter(value) {
                let realVal = ''
                if (!isNaN(value) && value !== '') {
                    realVal = parseFloat(value).toFixed(2)
                } else {
                    realVal = 'N/A'
                }
                return realVal
            }
        },
        methods: {
            initCanvas() {
                this.canvasData.canvas = this.$refs.canvasRef
                this.canvasData.canvas.width = this.canvasWidth
                this.canvasData.canvas.height = this.canvasWidth
                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() {
                let productHeight = this.tankReading.Height * this.limitData.heightRatio
                let waterHeight = this.tankReading.Water * this.limitData.heightRatio

                this.canvasData.canvas.width = 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)

                if (this.limitData.MaxVolume) {
                    this.drawLine()
                }

                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()
            },
            drawLine() {
                for (let key in this.limitData) {
                    let height = this.limitData[key].height
                    let color = this.limitData[key].color
                    let line = Math.sqrt(Math.pow(this.canvasData.circle.radius, 2) - Math.pow(this.canvasData.circle.radius - height, 2))
                    this.canvasData.context.beginPath()
                    this.canvasData.context.lineWidth = 2
                    this.canvasData.context.setLineDash([15, 10])
                    this.canvasData.context.strokeStyle = color
                    this.canvasData.context.moveTo(this.canvasData.circle.centerDot - line, this.canvasWidth - height - this.canvasData.offset)
                    this.canvasData.context.lineTo(this.canvasData.circle.centerDot + line, this.canvasWidth - height - this.canvasData.offset)
                    this.canvasData.context.stroke()
                }
            }
        }
    })

    function OnReply(topic, jsonObj) {
        let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
        let tankIndex = "@ViewBag.tankIndex"
        if (topic === path + 'GetTanksAsync_reply') {
            vm.currentTank = jsonObj[tankIndex]
            Publish2('[' + vm.currentTank.TankNumber + ']', path + 'GetTankReadingAsync')
        } else if (topic === path + 'GetTankReadingAsync_reply') {
            vm.tankReading = jsonObj
        }
    }
</script>

<style scoped>

    .title {
        position: absolute;
        top: 3.9%;
        width: 100%;
        font-size: 1.4rem;
        text-align: center;
        background-color: transparent;
    }

    .left {
        position: absolute;
        top: 15%;
        left: 6%;
        width: 23%;
        background-color: transparent;
    }

    .center {
        position: absolute;
        top: 15%;
        left: 36%;
        width: 30%;
        text-align: center;
        background-color: transparent;
    }

    .right {
        position: absolute;
        top: 15%;
        right: 6%;
        width: 23%;
        background-color: transparent;
    }

    .text {
        margin: 6% 0;
        font-size: 1.1rem;
    }

    .tank_text {
        margin: 0.8% 0;
        font-size: 1.1rem;
    }

    .color_text {
        margin: 8% 0;
        padding-left: 2%;
        font-size: 1.1rem;
        border-style: none none none solid;
        border-left: thick solid black;
    }

</style>