<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(apis, topic, jsonObj) {
let tankIndex = "@ViewBag.tankIndex"
let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
let tankspath = apis.has("GetTanksAsync_Reply") ? apis.get("GetTanksAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_Reply'
let readingpath = apis.has("GetTankReadingAsync_Reply") ? apis.get("GetTankReadingAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingAsync_Reply'
if (topic === tankspath) {
vm.currentTank = jsonObj[tankIndex]
Publish2('[' + vm.currentTank.TankNumber + ']', path, 'GetTankReadingAsync')
} else if (topic === readingpath) {
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>