TankDevicesOverview.cshtml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. 
  2. <div id="TankDevicesOverview">
  3. <div class="tank-subcontent" ref="subcontentdiv">
  4. <div class="tank_filter_div" :style="btnStyle" @@click="pageUp()">
  5. </div>
  6. <div v-for="(item, index) in tankObject.tankArray" :class="classArray[index]" :key="index">
  7. <div class="left">
  8. <div class="text">{{item.TankNumber}}号油罐</div>
  9. <div class="text">{{item.Product.ProductLabel}}</div>
  10. </div>
  11. <div class="center" @@click.capture="clickDiv(index)">
  12. <tankcomp ref="tankcompref"></tankcomp>
  13. </div>
  14. <div class="right" v-if="currentPage == pageMenu.tank && tankReadingObject.tankReadingArray[index]">
  15. <div class="text">实时油量:{{tankReadingObject.tankReadingArray[index].Volume | numFilter}}升</div>
  16. <div class="text">实时油位:{{tankReadingObject.tankReadingArray[index].Height | numFilter}}mm</div>
  17. <div class="text">剩余空间:{{tankReadingObject.tankReadingArray[index].Ullage | numFilter}}升</div>
  18. <div class="text">实时油温:{{tankReadingObject.tankReadingArray[index].Temperature | numFilter}}℃</div>
  19. <div class="text">实时水位:{{tankReadingObject.tankReadingArray[index].Water | numFilter}}mm</div>
  20. </div>
  21. <div class="right" v-if="currentPage == pageMenu.delivery && tankReadingObject.tankReadingArray[index]">
  22. <div class="text">起始油量:{{startVolume[index] | numFilter}}升</div>
  23. <div class="text">当前油量:{{tankReadingObject.tankReadingArray[index].Volume | numFilter}}升</div>
  24. <div class="text">进油状态:{{deliveryStatus[index]}}</div>
  25. <button class="delivery_button" :style="startStyle[index]" type="button" @@click="start(index)">开始</button>
  26. <button class="delivery_button" :style="endStyle[index]" type="button" @@click="end(index)">结束</button>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <script type="text/javascript">
  32. Vue.component("tankcomp", {
  33. data () {
  34. return {
  35. canvasWidth: 8,
  36. canvasData: {
  37. 'offset': 3,
  38. 'canvas': null,
  39. 'context': null,
  40. circle: { 'centerDot': 0, 'radius': 0, 'diameter': 0 }
  41. }
  42. }
  43. },
  44. methods: {
  45. getTankData(tankWidth, tankReading, limitData) {
  46. try {
  47. this.canvasWidth = tankWidth
  48. this.initCanvas()
  49. let productHeight = tankReading.Height * limitData.heightRatio
  50. let waterHeight = tankReading.Water * limitData.heightRatio
  51. if (productHeight >= 0 || productHeight <= this.canvasData.circle.diameter) {
  52. this.drawTank(productHeight, waterHeight)
  53. }
  54. } catch (err) {
  55. console.log(err)
  56. }
  57. },
  58. initCanvas() {
  59. this.canvasData.canvas = this.$refs.canvasRef
  60. this.canvasData.circle.centerDot = this.canvasWidth / 2
  61. this.canvasData.circle.radius = this.canvasData.circle.centerDot - this.canvasData.offset
  62. this.canvasData.circle.diameter = this.canvasData.circle.radius + this.canvasData.circle.radius
  63. this.canvasData.context = this.canvasData.canvas.getContext('2d')
  64. },
  65. drawTank(productHeight, waterHeight) {
  66. this.canvasData.canvas.width = this.canvasWidth
  67. this.canvasData.canvas.height = this.canvasWidth
  68. this.canvasData.context.fillStyle = '#DEB887'
  69. this.canvasData.context.fillRect(this.canvasData.offset, this.canvasWidth - productHeight - this.canvasData.offset, this.canvasData.circle.diameter, productHeight - waterHeight)
  70. this.canvasData.context.fillStyle = '#6495ED'
  71. this.canvasData.context.fillRect(this.canvasData.offset, this.canvasWidth - waterHeight - this.canvasData.offset, this.canvasData.circle.diameter, waterHeight)
  72. this.canvasData.context.beginPath()
  73. this.canvasData.context.lineWidth = 6
  74. this.canvasData.context.setLineDash([])
  75. this.canvasData.context.strokeStyle = '#505455'
  76. this.canvasData.context.arc(this.canvasData.circle.centerDot, this.canvasData.circle.centerDot, this.canvasData.circle.radius, 0, Math.PI * 2, false)
  77. this.canvasData.context.stroke()
  78. this.canvasData.context.globalCompositeOperation = 'destination-in'
  79. this.canvasData.context.arc(this.canvasData.circle.centerDot, this.canvasData.circle.centerDot, this.canvasData.circle.radius, 0, Math.PI * 2, false)
  80. this.canvasData.context.fill()
  81. }
  82. },
  83. template: '<canvas ref="canvasRef"/>'
  84. })
  85. var vm = new Vue({
  86. el: '#TankDevicesOverview',
  87. data: {
  88. pageNumber: 0,
  89. currentIndex: -1,
  90. receiveReading: true,
  91. tankObject: { change: false, tankArray: [] },
  92. tankReadingObject: { change: false, tankReadingArray: [] },
  93. classArray: ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'],
  94. limitDataArray: [],
  95. tankWidth: 0,
  96. tankIndex: 0,
  97. path: '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/',
  98. pageMenu: { tank: 'tank', delivery: 'delivery' },
  99. currentPage: '',
  100. btnStyle: '',
  101. deliveryMode: ['Manual', 'Automatic', 'Automatic', 'Manual'],
  102. startVolume: [],
  103. deliveryStatus: [],
  104. startStyle: [],
  105. endStyle: []
  106. },
  107. mounted() {
  108. this.tankWidth = this.$refs.subcontentdiv.clientWidth * 0.16
  109. this.currentPage = this.pageMenu.tank
  110. this.btnStyle = 'background-image: url(/images/device/' + this.currentPage + '.png);'
  111. },
  112. watch: {
  113. tankObject: {
  114. handler(newValue, oldValue) {
  115. for (let index = 0; index < this.tankObject.tankArray.length; index++) {
  116. this.limitDataArray[index] = { heightRatio: this.tankWidth / this.tankObject.tankArray[index].Diameter }
  117. }
  118. if (this.currentIndex < this.tankObject.tankArray.length - 1) {
  119. if (this.receiveReading) {
  120. this.receiveReading = false
  121. this.currentIndex += 1
  122. Publish2('[' + this.tankObject.tankArray[this.currentIndex].TankNumber + ']', this.path + 'GetTankReadingAsync')
  123. }
  124. } else if (this.receiveReading) {
  125. this.currentIndex = -1
  126. }
  127. },
  128. deep: true
  129. },
  130. tankReadingObject: {
  131. handler(newValue, oldValue) {
  132. this.$forceUpdate()
  133. for (let index = 0; index < this.tankReadingObject.tankReadingArray.length; index++) {
  134. let tankcom = this.$refs.tankcompref[index]
  135. tankcom.getTankData(this.tankWidth, this.tankReadingObject.tankReadingArray[index], this.limitDataArray[index])
  136. }
  137. },
  138. deep: true
  139. }
  140. },
  141. filters: {
  142. numFilter(value) {
  143. let realVal = ''
  144. if (!isNaN(value) && value !== '') {
  145. realVal = parseFloat(value).toFixed(2)
  146. } else {
  147. realVal = 'N/A'
  148. }
  149. return realVal
  150. }
  151. },
  152. methods: {
  153. pageUp() {
  154. if (this.btnStyle === 'background-image: url(/images/device/' + this.pageMenu.tank + '.png);') {
  155. this.currentPage = this.pageMenu.delivery
  156. for (let index = 0; index < this.tankObject.tankArray.length; index++) {
  157. // this.deliveryMode[index] = 'Manual' // Automatic, Manual
  158. if (this.deliveryMode[index] === 'Manual') {
  159. this.startStyle[index] = 'background-image: url(/images/device/blue.png);'
  160. } else {
  161. this.startStyle[index] = 'background-image: url(/images/device/gray.png);'
  162. }
  163. this.endStyle[index] = 'background-image: url(/images/device/gray.png);'
  164. this.deliveryStatus[index] = '无'
  165. this.startVolume[index] = 0
  166. }
  167. } else {
  168. this.currentPage = this.pageMenu.tank
  169. }
  170. this.btnStyle = 'background-image: url(/images/device/' + this.currentPage + '.png);'
  171. },
  172. start(index) {
  173. if (this.startStyle[index] === 'background-image: url(/images/device/blue.png);') {
  174. this.startStyle[index] = 'background-image: url(/images/device/gray.png);'
  175. this.endStyle[index] = 'background-image: url(/images/device/blue.png);'
  176. this.startVolume[index] = this.tankReadingObject.tankReadingArray[index].Volume
  177. this.deliveryStatus[index] = '进行中'
  178. this.$forceUpdate()
  179. } else {
  180. alert('请先开启手动进油功能')
  181. }
  182. },
  183. end(index) {
  184. if (this.endStyle[index] === 'background-image: url(/images/device/blue.png);') {
  185. this.startStyle[index] = 'background-image: url(/images/device/blue.png);'
  186. this.endStyle[index] = 'background-image: url(/images/device/gray.png);'
  187. this.deliveryStatus[index] = '无'
  188. this.$forceUpdate()
  189. }
  190. },
  191. clickDiv(tankIndex) {
  192. RenderIndexContainer('TankDetailFnav', $('fnav'), tankIndex)
  193. }
  194. }
  195. })
  196. function OnReply(topic, jsonObj) {
  197. let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
  198. if (topic === path + 'GetTanksAsync_reply') {
  199. let tankCount = 4
  200. let index = vm.pageNumber * tankCount
  201. let len = (index + tankCount) < jsonObj.length ? (index + tankCount) : jsonObj.length
  202. if (len !== vm.tankObject.tankArray.length) vm.tankObject.tankArray = []
  203. for (let i = 0; index < len; index++) {
  204. vm.tankObject.tankArray[i++] = jsonObj[index]
  205. }
  206. vm.tankObject.change = !vm.tankObject.change
  207. } else if (topic === path + 'GetTankReadingAsync_reply') {
  208. vm.tankReadingObject.tankReadingArray[vm.currentIndex] = jsonObj
  209. vm.receiveReading = true
  210. vm.tankReadingObject.change = !vm.tankReadingObject.change
  211. }
  212. }
  213. </script>
  214. <style scoped>
  215. .topLeft {
  216. position: absolute;
  217. top: 2%;
  218. left: 3%;
  219. width: 43%;
  220. height: 39%;
  221. background-color: transparent;
  222. }
  223. .topRight {
  224. position: absolute;
  225. top: 2%;
  226. right: 3%;
  227. width: 43%;
  228. height: 39%;
  229. background-color: transparent;
  230. }
  231. .bottomLeft {
  232. position: absolute;
  233. bottom: 8%;
  234. left: 3%;
  235. width: 43%;
  236. height: 39%;
  237. background-color: transparent;
  238. }
  239. .bottomRight {
  240. position: absolute;
  241. bottom: 8%;
  242. right: 3%;
  243. width: 43%;
  244. height: 39%;
  245. background-color: transparent;
  246. }
  247. .left {
  248. position: absolute;
  249. top: 15%;
  250. left: 0;
  251. width: 19%;
  252. background-color: transparent;
  253. }
  254. .center {
  255. position: absolute;
  256. top: 15%;
  257. left: 19%;
  258. width: 42%;
  259. background-color: transparent;
  260. }
  261. .right {
  262. position: absolute;
  263. top: 15%;
  264. right: 0;
  265. width: 38.8%;
  266. background-color: transparent;
  267. }
  268. .text {
  269. margin: 6% 0;
  270. font-size: 1.1rem;
  271. }
  272. </style>