123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
-
- <div id="TankDeviceDetails">
- <div class="tank-subcontent">
- <div class="title" v-if="currentTank!=null">{{currentTank.TankNumber}}号油罐 {{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>
|