Compare commits
No commits in common. "ce4aabaaf3a40a0af2203d6662e073417b31ce81" and "60a6e86a6b711cd2758c5dd258c7acac32c4d6c3" have entirely different histories.
ce4aabaaf3
...
60a6e86a6b
16
.env.dev
@ -1,36 +1,30 @@
|
|||||||
###
|
###
|
||||||
# @Author: Do not edit
|
# @Author: Do not edit
|
||||||
# @Date: 2023-08-29 09:40:39
|
# @Date: 2023-08-29 09:40:39
|
||||||
# @LastEditTime: 2024-01-08 16:23:54
|
# @LastEditTime: 2023-12-18 13:35:00
|
||||||
# @LastEditors: DY
|
# @LastEditors: zhp
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = MES系统
|
VUE_APP_TITLE = MES系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
||||||
|
|
||||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.101:8080'
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.56:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||||
# socket地址
|
|
||||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
|
||||||
|
|
||||||
|
|
||||||
# VUE_APP_BASE_API = 'http://100.64.0.23:48082'
|
|
||||||
# 积木报表指向地址
|
# 积木报表指向地址
|
||||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
@ -15,11 +15,11 @@ VUE_APP_TITLE = MES系统
|
|||||||
VUE_APP_BASE_API = '/prod-api'
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
# 积木报表指向地址
|
# 积木报表指向地址
|
||||||
VUE_APP_JIMU_API = 'http://10.70.2.2:8080'
|
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
||||||
|
|
||||||
|
|
||||||
# 根据服务器或域名修改
|
# 根据服务器或域名修改
|
||||||
PUBLIC_PATH = ''
|
PUBLIC_PATH = 'http://10.70.2.32'
|
||||||
|
|
||||||
# 二级部署路径
|
# 二级部署路径
|
||||||
# VUE_APP_APP_NAME ='yudao-admin'
|
# VUE_APP_APP_NAME ='yudao-admin'
|
||||||
|
@ -12,7 +12,7 @@ VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
|||||||
|
|
||||||
|
|
||||||
# 根据服务器或域名修改
|
# 根据服务器或域名修改
|
||||||
PUBLIC_PATH = ''
|
PUBLIC_PATH = 'http://192.168.0.33:8889/'
|
||||||
|
|
||||||
# 二级部署路径
|
# 二级部署路径
|
||||||
# VUE_APP_APP_NAME ='yudao-admin'
|
# VUE_APP_APP_NAME ='yudao-admin'
|
||||||
|
@ -43,7 +43,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/x6": "^2.15.3",
|
"@antv/x6": "^2.15.3",
|
||||||
"@babel/parser": "7.18.4",
|
"@babel/parser": "7.18.4",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
"benz-amr-recorder": "^1.1.5",
|
"benz-amr-recorder": "^1.1.5",
|
||||||
@ -81,7 +80,6 @@
|
|||||||
"vue-plugin-hiprint": "0.0.54-fix",
|
"vue-plugin-hiprint": "0.0.54-fix",
|
||||||
"vue-quill-editor": "^3.0.6",
|
"vue-quill-editor": "^3.0.6",
|
||||||
"vue-router": "3.4.9",
|
"vue-router": "3.4.9",
|
||||||
"vue-seamless-scroll": "^1.1.23",
|
|
||||||
"vue-video-player": "^5.0.2",
|
"vue-video-player": "^5.0.2",
|
||||||
"vuedraggable": "2.24.3",
|
"vuedraggable": "2.24.3",
|
||||||
"vuex": "3.6.2",
|
"vuex": "3.6.2",
|
||||||
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 4.2 KiB |
@ -1,14 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>能源监控</title>
|
|
||||||
<g id="mes-看板/驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="冷端看板" transform="translate(-685.000000, -149.000000)" fill-rule="nonzero">
|
|
||||||
<g id="编组-26备份-4" transform="translate(661.000000, 127.000000)">
|
|
||||||
<g id="能源监控" transform="translate(24.000000, 22.000000)">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
|
||||||
<path d="M5.56606392,22 L5.56606392,8.69394435 C5.56606392,8.16339333 5.15113542,7.75513729 4.65294365,7.75513729 L1.91312026,7.75513729 C1.41539106,7.75513729 1,8.20385524 1,8.69394435 L1,22 L5.56606392,22 L5.56606392,22 Z M11.3773759,22 L11.3773759,2.97972358 C11.3773759,2.44871795 10.9624474,2 10.4642557,2 L7.72443229,2 C7.22624054,2 6.81131201,2.44871795 6.81131201,2.97972358 L6.81131201,22 L11.3773759,22 Z M17.188688,22 L17.188688,13.591653 C17.188688,13.061102 16.7737595,12.6123841 16.2755677,12.6123841 L13.5362069,12.6123841 C13.0380151,12.6123841 12.622624,13.061102 12.622624,13.591653 L12.622624,22 L17.188688,22 Z M23,22 L23,8.69394435 C23,8.16339333 22.5850715,7.75513729 22.0868797,7.75513729 L19.3470564,7.75513729 C18.8493272,7.75513729 18.4339361,8.20385524 18.4339361,8.69394435 L18.4339361,22 L23,22 L23,22 Z" id="形状" fill="#59D0E2"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,14 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>报警</title>
|
|
||||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="深加工看板" transform="translate(-64.000000, -149.000000)" fill-rule="nonzero">
|
|
||||||
<g id="编组-26" transform="translate(40.000000, 127.000000)">
|
|
||||||
<g id="报警" transform="translate(24.000000, 22.000000)">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
|
||||||
<path d="M20.7657338,18.1387399 L13.9284614,22.3462921 C13.4025174,22.6969215 12.8765734,22.3462921 12.8765734,21.6450334 L12.8765734,11.8274116 C12.8765734,11.6520969 13.0518881,11.3014676 13.2272027,11.1261529 L20.0644751,6.91860067 C20.5904191,6.56797132 21.1163631,6.91860067 21.1163631,7.61985938 L21.1163631,17.6127959 C21.1163631,17.7881106 20.9410485,18.1387399 20.7657338,18.1387399 Z M3.23426622,18.1387399 L10.0715386,22.3462921 C10.5974826,22.6969215 11.1234266,22.3462921 11.1234266,21.6450334 L11.1234266,11.8274116 C11.1234266,11.6520969 10.9481119,11.3014676 10.7727973,11.1261529 L3.93552492,6.91860067 C3.58489557,6.743286 2.88363686,7.09391535 2.88363686,7.61985938 L2.88363686,17.6127959 C2.88363686,17.7881106 3.05895154,18.1387399 3.23426622,18.1387399 Z M11.8246853,1.48384573 L3.93552492,4.46419521 C3.58489557,4.63950989 3.58489557,5.16545392 3.93552492,5.34076859 L11.8246853,10.2495795 C12,10.2495795 12.1753147,10.2495795 12.1753147,10.2495795 L20.2397898,5.34076859 C20.5904191,5.16545392 20.5904191,4.63950989 20.2397898,4.46419521 L12.1753147,1.48384573 C12,1.48384573 12,1.48384573 11.8246853,1.48384573 Z" id="形状" fill="#59D0E2"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="19.7127155px" height="19.7127155px" viewBox="0 0 19.7127155 19.7127155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>设备监控</title>
|
|
||||||
<g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="深加工看板" transform="translate(-1309.143642, -151.143642)">
|
|
||||||
<g id="编组-26备份-4" transform="translate(1283.000000, 127.000000)">
|
|
||||||
<g id="设备监控" transform="translate(24.000000, 22.000000)">
|
|
||||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
|
||||||
<g id="异常" transform="translate(2.143642, 2.143642)" fill-rule="nonzero">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0.856357767" y="0.856357767" width="17" height="17"></rect>
|
|
||||||
<path d="M9.85640228,0.000116285784 C7.94997171,-0.0106702658 6.11587607,0.729338602 4.75082135,2.0602014 C3.41793975,3.37801839 2.66584368,5.173105 2.66128994,7.04744966 L2.66128994,16.6671387 L16.9726637,16.6671387 L16.9726637,7.04743041 C16.9710126,5.1705386 16.2144177,3.37320892 14.8732566,2.06018215 C13.5319151,0.748116476 11.7327241,0.00936885323 9.85638303,0.000116285784 L9.85640228,0.000116285784 Z M9.26502002,14.3607842 L9.05803623,9.69875531 L5.52947465,9.69875531 L10.1619113,3.85402838 L10.5561661,7.61911494 L13.9073323,7.73739052 L9.22555602,14.3607842 L9.26502002,14.3607842 Z M4.37471863e-05,18.6383791 C-0.00254075641,18.3517467 0.109484124,18.0759491 0.311244358,17.8723357 C0.513004592,17.6687223 0.787767718,17.5541863 1.07441422,17.5541863 L18.6383903,17.5541863 C18.9225391,17.5577245 19.1943787,17.6707029 19.3973309,17.8696071 C19.5968337,18.0761491 19.7096866,18.3512359 19.7127155,18.6383791 C19.7127155,19.2317112 19.2317269,19.7127155 18.6383903,19.7127155 L1.07441422,19.7127155 C0.481077682,19.7127155 4.37471863e-05,19.2317112 4.37471863e-05,18.6383791 L4.37471863e-05,18.6383791 Z" id="形状" fill="#59D0E2"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.1 KiB |
@ -1,12 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>编组 54</title>
|
|
||||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
|
|
||||||
<g id="编组-54" transform="translate(1866.000000, 36.000000)">
|
|
||||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
|
|
||||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 4.1 KiB |
1
src/assets/icons/svg/fullscreen.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
|
After Width: | Height: | Size: 421 B |
@ -1,14 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>库存管理</title>
|
|
||||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="周转看板" transform="translate(-64.000000, -618.000000)" fill-rule="nonzero">
|
|
||||||
<g id="编组-26备份" transform="translate(40.000000, 596.000000)">
|
|
||||||
<g id="库存管理" transform="translate(24.000000, 22.000000)">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
|
||||||
<path d="M17.5599807,5.95300863 L17.5599807,7.05052701 L6.39641163,7.05052701 L6.39641163,5.95300863 L5.15061552,5.95300863 C4.59833077,5.95300863 4.15061552,6.40072388 4.15061552,6.95300863 L4.15061552,21.465846 C4.15061552,22.0181307 4.59833077,22.465846 5.15061552,22.465846 L18.8493845,22.465846 C19.4016692,22.465846 19.8493845,22.0181307 19.8493845,21.465846 L19.8493845,6.95300863 C19.8493845,6.40072388 19.4016692,5.95300863 18.8493845,5.95300863 L17.5599807,5.95300863 L17.5599807,5.95300863 Z M6.35280394,9.22062017 L17.516373,9.22062017 L17.516373,11.3240808 L6.35280394,11.3240808 L6.35280394,9.22062017 Z M14.2456217,20.2200499 L6.3962372,20.2200499 L6.3962372,18.0396653 L14.2456217,18.0396653 L14.2456217,20.2200499 Z M17.5709698,15.8758516 L6.40740077,15.8758516 L6.40740077,13.6570923 L17.5709698,13.6570923 L17.5709698,15.8758516 Z M10.7650186,1.53415402 L13.234807,1.53415402 C13.7870917,1.53415402 14.234807,1.98186927 14.234807,2.53415402 L14.234807,4.82653474 L14.234807,4.82653474 L9.76501859,4.82653474 L9.76501859,2.53415402 C9.76501859,1.98186927 10.2127338,1.53415402 10.7650186,1.53415402 Z M16.4807775,4.75814629 L16.4807775,5.95300863 L16.4807775,5.95300863 L7.51922248,5.95300863 L7.51922248,4.75814629 C7.51922248,4.20586154 7.96693773,3.75814629 8.51922248,3.75814629 L15.4807775,3.75814629 C16.0330623,3.75814629 16.4807775,4.20586154 16.4807775,4.75814629 Z" id="形状" fill="#59D0E2"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.1 KiB |
@ -1,16 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="23.9999981px" height="23.9999981px" viewBox="0 0 23.9999981 23.9999981" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>缺陷</title>
|
|
||||||
<g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="深加工看板" transform="translate(-686.000000, -149.000000)" fill-rule="nonzero">
|
|
||||||
<g id="编组-26备份-2" transform="translate(662.000000, 127.000000)">
|
|
||||||
<g id="编组-24" transform="translate(24.000000, 22.000000)">
|
|
||||||
<g id="缺陷" transform="translate(0.000000, 0.000000)">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="23.9999981" height="23.9999981"></rect>
|
|
||||||
<path d="M20.2321175,10.4550863 L18.9032068,10.4550863 L18.9032068,6.47221732 C18.9010796,5.9702116 18.4935224,5.56438134 17.9915122,5.56438585 L13.108538,5.56438585 L13.108538,3.98437284 C13.1108007,3.21607553 12.8028771,2.47938539 12.2545397,1.94122931 C11.7062023,1.40307324 10.9638711,1.1090093 10.1957511,1.12566955 C8.60430329,1.19855778 7.3587693,2.52279309 7.38340516,4.11571867 L7.38340516,5.56438585 L2.5004309,5.56438585 C1.99842068,5.56438134 1.59086349,5.9702116 1.58870356,6.47221732 L1.58870356,9.53566556 C1.58667583,9.77879788 1.68181868,10.0126808 1.85301841,10.1853314 C2.02421815,10.3579819 2.25728984,10.4550951 2.5004309,10.4550863 L3.01036175,10.4550863 C4.60185595,10.4303757 5.92550348,11.6736467 6.00041086,13.2635692 C6.0149973,14.0317095 5.71894789,14.773225 5.17934105,15.3201042 C4.63973421,15.8669834 3.90224815,16.1729324 3.13398136,16.1686298 L2.5004309,16.1686298 C1.9969159,16.1686298 1.58870356,16.5768093 1.58870356,17.0803243 L1.58870356,21.9632986 C1.58870356,22.4668136 1.9969159,22.8750014 2.5004309,22.8750014 L6.47171061,22.8750014 C6.71382208,22.8760256 6.94631552,22.780304 7.11751574,22.6091037 C7.28871596,22.4379035 7.38443764,22.2054101 7.38340516,21.9632986 L7.38340516,21.5113144 C7.3587693,19.9183889 8.60430329,18.5941536 10.1957511,18.5212653 C10.9638711,18.5046051 11.7062023,18.798669 12.2545397,19.3368251 C12.8028771,19.8749812 13.1108007,20.6116713 13.108538,21.3799686 L13.108538,21.9632986 C13.1075105,22.2047391 13.202703,22.4366433 13.3730659,22.6077311 C13.5434288,22.778819 13.7749267,22.8750014 14.0163694,22.8750014 L17.9915122,22.8750014 C18.4950272,22.8750014 18.9032068,22.4668136 18.9032068,21.9632986 L18.9032068,16.1686298 L20.3596002,16.1686298 C21.127882,16.1719118 21.8649697,15.8649752 22.403851,15.3173671 C22.9427323,14.769759 23.2377892,14.027836 23.2221666,13.259706 C23.1452437,11.6713093 21.8221825,10.4302984 20.2321175,10.4550863 Z" id="路径" fill="#59D0E2"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.8 KiB |
@ -1,10 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>编组 54备份</title>
|
|
||||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="编组-54备份">
|
|
||||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
|
|
||||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 2.3 KiB |
@ -48,7 +48,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import ScrollPane from './ScrollPane';
|
import ScrollPane from './ScrollPane';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ScrollPane },
|
components: { ScrollPane },
|
||||||
@ -59,7 +58,6 @@ export default {
|
|||||||
left: 0,
|
left: 0,
|
||||||
selectedTag: {},
|
selectedTag: {},
|
||||||
affixTags: [],
|
affixTags: [],
|
||||||
wsIsOpen: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -85,27 +83,6 @@ export default {
|
|||||||
document.body.removeEventListener('click', this.closeMenu);
|
document.body.removeEventListener('click', this.closeMenu);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
visitedViews(newVal, oldVal){
|
|
||||||
let num = 0
|
|
||||||
newVal && newVal.map(item => {
|
|
||||||
if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
|
|
||||||
num++
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (num > 0) {
|
|
||||||
if(!this.wsIsOpen) {
|
|
||||||
getDcsMsg()
|
|
||||||
this.wsIsOpen = true
|
|
||||||
console.log('开启websocket==========')
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
if (this.wsIsOpen) {
|
|
||||||
closeDcsMsg()
|
|
||||||
this.wsIsOpen = false
|
|
||||||
console.log('关闭============')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initTags();
|
this.initTags();
|
||||||
|
@ -9,7 +9,6 @@ import store from './store';
|
|||||||
import router from './router';
|
import router from './router';
|
||||||
import directive from './directive'; // directive
|
import directive from './directive'; // directive
|
||||||
import plugins from './plugins'; // plugins
|
import plugins from './plugins'; // plugins
|
||||||
import { scrollBoard } from '@jiaminghi/data-view'
|
|
||||||
|
|
||||||
import './assets/icons'; // icon
|
import './assets/icons'; // icon
|
||||||
import './permission'; // permission control
|
import './permission'; // permission control
|
||||||
@ -79,10 +78,8 @@ Vue.use(CodeBrickZj)
|
|||||||
Vue.use(directive);
|
Vue.use(directive);
|
||||||
Vue.use(plugins);
|
Vue.use(plugins);
|
||||||
Vue.use(VueMeta);
|
Vue.use(VueMeta);
|
||||||
Vue.use(scrollBoard)
|
|
||||||
// Vue.use(hljs.vuePlugin);
|
// Vue.use(hljs.vuePlugin);
|
||||||
import scroll from 'vue-seamless-scroll'
|
|
||||||
Vue.use(scroll)
|
|
||||||
// bpmnProcessDesigner 需要引入
|
// bpmnProcessDesigner 需要引入
|
||||||
import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
|
import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
|
||||||
Vue.use(MyPD);
|
Vue.use(MyPD);
|
||||||
|
@ -19,9 +19,6 @@ const getters = {
|
|||||||
sidebarRouters:state => state.permission.sidebarRouters,
|
sidebarRouters:state => state.permission.sidebarRouters,
|
||||||
choicepart: state => state.app.choicepart,
|
choicepart: state => state.app.choicepart,
|
||||||
// 数据字典
|
// 数据字典
|
||||||
dict_datas: state => state.dict.dictDatas,
|
dict_datas: state => state.dict.dictDatas
|
||||||
//ws
|
|
||||||
fanFrequencyInfo: state => state.websocket.FanFrequencyInfo,
|
|
||||||
kilnInfo: state => state.websocket.kilnInfo,
|
|
||||||
}
|
}
|
||||||
export default getters
|
export default getters
|
||||||
|
@ -6,7 +6,6 @@ import tagsView from './modules/tagsView'
|
|||||||
import permission from './modules/permission'
|
import permission from './modules/permission'
|
||||||
import settings from './modules/settings'
|
import settings from './modules/settings'
|
||||||
import dict from './modules/dict'
|
import dict from './modules/dict'
|
||||||
import websocket from './modules/websocket'
|
|
||||||
import getters from './getters'
|
import getters from './getters'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
@ -18,8 +17,7 @@ const store = new Vuex.Store({
|
|||||||
tagsView,
|
tagsView,
|
||||||
permission,
|
permission,
|
||||||
settings,
|
settings,
|
||||||
dict,
|
dict
|
||||||
websocket
|
|
||||||
},
|
},
|
||||||
getters
|
getters
|
||||||
})
|
})
|
||||||
|
@ -1,189 +0,0 @@
|
|||||||
const state = {
|
|
||||||
fanFrequencyInfo:{},// 分机运行频率
|
|
||||||
kilnInfo:{},// 窑炉信息
|
|
||||||
gasInfo:{},// 天然气流量图
|
|
||||||
sumGasInfo: {},// 天然气总量
|
|
||||||
|
|
||||||
israKiln:[],// ISRA窑炉缺陷检测
|
|
||||||
material:[],// 原料
|
|
||||||
energyInfo: {
|
|
||||||
elecQty1: '',
|
|
||||||
elecQty2: '',
|
|
||||||
waterQty: ''
|
|
||||||
}, // 能耗
|
|
||||||
energyWeekTrend:[],
|
|
||||||
energyMonthTrend:[],
|
|
||||||
energyYearTrend:[],// 能耗图
|
|
||||||
energyMonitoring: [], // 能源监控
|
|
||||||
exhaustGasInfo:{}, // 烟气
|
|
||||||
gasChartDayTrend:{}, // 烟气
|
|
||||||
gasChartWeekTrend:{}, // 烟气
|
|
||||||
gasChartMonthTrend:{}, // 烟气
|
|
||||||
gasChartYearTrend:{}, // 烟气
|
|
||||||
israDayStatistic: [],//缺陷统计
|
|
||||||
israWeekStatistic: [],//缺陷统计
|
|
||||||
israMonthStatistic: [],//缺陷统计
|
|
||||||
israYearStatistic: [],//缺陷统计
|
|
||||||
productline: [{
|
|
||||||
"creator": "1",
|
|
||||||
"sumOutputNum": 15,
|
|
||||||
"outputNum": 15,
|
|
||||||
"passRate": 0.6,
|
|
||||||
"lineName": "3#深加工",
|
|
||||||
"updateTime": "2024-01-04T16:00:19",
|
|
||||||
"updater": "1",
|
|
||||||
"inputNum": 15,
|
|
||||||
"deleted": false,
|
|
||||||
"recordTime": "2023-12-25T20:00:00",
|
|
||||||
"createTime": "2023-10-13T10:44:27",
|
|
||||||
"tenantId": 1,
|
|
||||||
"id": 1712660539187441666,
|
|
||||||
"productionLineId": 1737313260027285506,
|
|
||||||
"sumInputNum": 15
|
|
||||||
}, {
|
|
||||||
"creator": "1",
|
|
||||||
"sumOutputNum": 49,
|
|
||||||
"outputNum": 16,
|
|
||||||
"passRate": 0.3,
|
|
||||||
"lineName": "2#深加工",
|
|
||||||
"updateTime": "2024-01-04T16:00:19",
|
|
||||||
"updater": "1",
|
|
||||||
"inputNum": 17,
|
|
||||||
"deleted": false,
|
|
||||||
"recordTime": "2023-12-25T20:00:00",
|
|
||||||
"createTime": "2023-10-13T10:44:27",
|
|
||||||
"tenantId": 1,
|
|
||||||
"id": 1712660539187441665,
|
|
||||||
"productionLineId": 1737313119178362881,
|
|
||||||
"sumInputNum": 47
|
|
||||||
}, {
|
|
||||||
"creator": "1",
|
|
||||||
"sumOutputNum": 29,
|
|
||||||
"outputNum": 18,
|
|
||||||
"passRate": 0.5,
|
|
||||||
"lineName": "1#深加工",
|
|
||||||
"updateTime": "2024-01-04T16:00:19",
|
|
||||||
"updater": "1",
|
|
||||||
"inputNum": 20,
|
|
||||||
"deleted": false,
|
|
||||||
"recordTime": "2023-12-25T20:00:00",
|
|
||||||
"createTime": "2023-10-13T10:43:17",
|
|
||||||
"tenantId": 1,
|
|
||||||
"id": 1712660244285927426,
|
|
||||||
"productionLineId": 1737312466842456065,
|
|
||||||
"sumInputNum": 27
|
|
||||||
}], // SJG产线产量及良品率
|
|
||||||
sjgEquipment:[],// SJG设备报警
|
|
||||||
|
|
||||||
};
|
|
||||||
const mutations = {
|
|
||||||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
|
||||||
state.fanFrequencyInfo = fanFrequencyInfo
|
|
||||||
},
|
|
||||||
SET_KILNINFO: (state, kilnInfo) => {
|
|
||||||
state.kilnInfo = kilnInfo
|
|
||||||
},
|
|
||||||
SET_GASINFO: (state, gasInfo) => {
|
|
||||||
state.gasInfo = gasInfo
|
|
||||||
},
|
|
||||||
SET_SUMGASINFO: (state, sumGasInfo) => {
|
|
||||||
state.sumGasInfo = sumGasInfo
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
SET_ISRAKILN: (state, israKiln) => {
|
|
||||||
state.israKiln = israKiln
|
|
||||||
},
|
|
||||||
SET_MATERIAL: (state, material) => {
|
|
||||||
state.material = material
|
|
||||||
},
|
|
||||||
SET_ENERGYINFO: (state, energyInfo) => {
|
|
||||||
if (Object.keys(energyInfo).length > 1) {
|
|
||||||
state.energyInfo.elecQty1 = energyInfo.elecQty1
|
|
||||||
state.energyInfo.elecQty2 = energyInfo.elecQty2
|
|
||||||
} else {
|
|
||||||
state.energyInfo.waterQty = energyInfo.waterQty
|
|
||||||
}
|
|
||||||
},
|
|
||||||
SET_ENERGYTREND: (state, energyTrend) => {
|
|
||||||
if (energyTrend.week.length > 0) {
|
|
||||||
state.energyWeekTrend = energyTrend.week
|
|
||||||
}
|
|
||||||
if (energyTrend.month.length > 0) {
|
|
||||||
state.energyMonthTrend = energyTrend.month
|
|
||||||
}
|
|
||||||
if (energyTrend.year.length > 0) {
|
|
||||||
state.energyYearTrend = energyTrend.year
|
|
||||||
}
|
|
||||||
},
|
|
||||||
SET_ENERGY_MONITORING: (state, energyMonitoring) => {
|
|
||||||
state.energyMonitoring = energyMonitoring
|
|
||||||
},
|
|
||||||
SET_EXHAUSTGASINFO: (state, exhaustGasInfo) => {
|
|
||||||
state.exhaustGasInfo = exhaustGasInfo
|
|
||||||
},
|
|
||||||
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
|
|
||||||
state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend
|
|
||||||
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
|
|
||||||
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
|
|
||||||
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
|
|
||||||
},
|
|
||||||
SET_DEFECTCHART: (state, israStatistic) => {
|
|
||||||
state.israDayStatistic = israStatistic.dayStatistic
|
|
||||||
state.israWeekStatistic = israStatistic.weekStatistic
|
|
||||||
state.israMonthStatistic = israStatistic.monthStatistic
|
|
||||||
state.israYearStatistic = israStatistic.yearStatistic
|
|
||||||
},
|
|
||||||
SET_PRODUCTLINE: (state, productline) => {
|
|
||||||
state.productline = productline
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const actions = {
|
|
||||||
setFanFrequencyInfo({ commit }, fanFrequencyInfo) {
|
|
||||||
commit('SET_FANFREQUENCYINFO', fanFrequencyInfo.payload)
|
|
||||||
},
|
|
||||||
setKilnInfo({ commit }, kilnInfo) {
|
|
||||||
commit('SET_KILNINFO', kilnInfo.payload)
|
|
||||||
},
|
|
||||||
setGasInfo({ commit }, gasInfo) {
|
|
||||||
commit('SET_GASINFO', gasInfo.payload)
|
|
||||||
},
|
|
||||||
setSumGasInfo({ commit }, sumGasInfo) {
|
|
||||||
commit('SET_SUMGASINFO', sumGasInfo.payload)
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
setIsraKiln({ commit }, israKiln) {
|
|
||||||
commit('SET_ISRAKILN', israKiln.payload)
|
|
||||||
},
|
|
||||||
setMaterial({ commit }, material) {
|
|
||||||
commit('SET_MATERIAL', material.payload)
|
|
||||||
},
|
|
||||||
setEnergyInfo({ commit }, energyInfo) {
|
|
||||||
commit('SET_ENERGYINFO', energyInfo.payload)
|
|
||||||
},
|
|
||||||
setEnergyTrend({ commit }, energyTrend) {
|
|
||||||
commit('SET_ENERGYTREND', energyTrend.payload)
|
|
||||||
},
|
|
||||||
setEnergyMonitoring({ commit }, energyMonitoring) {
|
|
||||||
commit('SET_ENERGY_MONITORING', energyMonitoring.payload)
|
|
||||||
},
|
|
||||||
setExhaustGasInfo({ commit }, exhaustGasInfo) {
|
|
||||||
commit('SET_EXHAUSTGASINFO', exhaustGasInfo.payload)
|
|
||||||
},
|
|
||||||
setExhaustGasChart({ commit }, exhaustGasChart) {
|
|
||||||
commit('SET_EXHAUSTGASCHART', exhaustGasChart.payload)
|
|
||||||
},
|
|
||||||
setDefectChart({ commit }, israStatistic) {
|
|
||||||
commit('SET_DEFECTCHART', israStatistic.payload)
|
|
||||||
},
|
|
||||||
setProductline({ commit }, productline) {
|
|
||||||
commit('SET_PRODUCTLINE', productline.payload)
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default {
|
|
||||||
namespaced: true,
|
|
||||||
state,
|
|
||||||
mutations,
|
|
||||||
actions,
|
|
||||||
}
|
|
@ -12,7 +12,7 @@
|
|||||||
lineHeight: 88 + 'px',
|
lineHeight: 88 + 'px',
|
||||||
fontSize: 31 + 'px'
|
fontSize: 31 + 'px'
|
||||||
}">
|
}">
|
||||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||||
许昌安彩AGV原片周转看板
|
许昌安彩AGV原片周转看板
|
||||||
<h3 class="unit">单位:河南汇融科技服务有限公司</h3>
|
<h3 class="unit">单位:河南汇融科技服务有限公司</h3>
|
||||||
<h3 class="time">{{ times }}</h3>
|
<h3 class="time">{{ times }}</h3>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: gtz
|
* @Author: gtz
|
||||||
* @Date: 2022-01-19 15:58:17
|
* @Date: 2022-01-19 15:58:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-01-04 16:16:22
|
* @LastEditTime: 2023-11-14 13:28:27
|
||||||
* @Description: file content
|
* @Description: file content
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||||
-->
|
-->
|
||||||
|
@ -1,51 +1,48 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Date: 2020-12-14 09:07:03
|
* @Date: 2020-12-14 09:07:03
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-01-04 16:16:00
|
* @LastEditTime: 2023-11-14 10:11:09
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
|
<div class="visual-base-table-container">
|
||||||
|
<el-table
|
||||||
|
v-loading="isLoading"
|
||||||
|
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
|
||||||
|
:row-style="setRowStyle"
|
||||||
|
:data="renderData"
|
||||||
|
border
|
||||||
|
style="width: 100%; background: transparent"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-if="page && limit && showIndex"
|
||||||
|
prop="_pageIndex"
|
||||||
|
:label="'tableHeader.index' | i18nFilter"
|
||||||
|
:width="70"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in renderTableHeadList"
|
||||||
|
:key="item.prop"
|
||||||
|
:show-overflow-tooltip="showOverflow"
|
||||||
|
v-bind="item"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
|
||||||
<div class="visual-base-table-container scroll_table">
|
<component
|
||||||
<div style="display: inline-block; width: 100%">
|
:is="item.subcomponent"
|
||||||
<el-table class="top" v-loading="isLoading"
|
v-if="item.subcomponent"
|
||||||
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
|
:inject-data="{...scope.row, ...item}"
|
||||||
:data="renderData" border style="width: 100%; background: transparent">
|
@emitData="emitData"
|
||||||
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
|
/>
|
||||||
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
|
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||||
v-bind="item">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
|
|
||||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
|
</template>
|
||||||
@emitData="emitData" />
|
</el-table-column>
|
||||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
<slot name="content" />
|
||||||
|
</el-table>
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<slot name="content" />
|
|
||||||
</el-table>
|
|
||||||
<vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
|
|
||||||
<el-table class="bottom" v-loading="isLoading"
|
|
||||||
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
|
|
||||||
:data="renderData" border style="width: 100%; background: transparent">
|
|
||||||
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
|
|
||||||
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
|
|
||||||
v-bind="item">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
|
|
||||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
|
|
||||||
@emitData="emitData" />
|
|
||||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<slot name="content" />
|
|
||||||
</el-table>
|
|
||||||
</vue-seamless-scroll>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { isObject, isString } from 'lodash'
|
import { isObject, isString } from 'lodash'
|
||||||
@ -113,19 +110,7 @@ export default {
|
|||||||
return this.tableConfig.filter((item, index) => {
|
return this.tableConfig.filter((item, index) => {
|
||||||
return this.selectedBox[index]
|
return this.selectedBox[index]
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
classOption() {
|
|
||||||
return {
|
|
||||||
step: 0.3, // 数值越大速度滚动越快
|
|
||||||
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
|
|
||||||
hoverStop: true, // 是否开启鼠标悬停stop
|
|
||||||
direction: 1, // 0向下 1向上 2向左 3向右
|
|
||||||
openWatch: true, // 开启数据实时监控刷新dom
|
|
||||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
||||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
||||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.selectedBox = new Array(100).fill(true)
|
this.selectedBox = new Array(100).fill(true)
|
||||||
@ -187,23 +172,16 @@ export default {
|
|||||||
background-color: rgba(79,114,136,0.29) !important;
|
background-color: rgba(79,114,136,0.29) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
// .setting {
|
||||||
|
// text-align: right;
|
||||||
<style lang="scss">
|
// padding: 15px;
|
||||||
.seamless-warp {
|
// .setting-box {
|
||||||
height: 308px;
|
// width: 100px;
|
||||||
overflow: hidden;
|
// }
|
||||||
}
|
// i {
|
||||||
.min {
|
// color: #aaa;
|
||||||
display: flex;
|
// @extend .pointer;
|
||||||
width: 100%;
|
// }
|
||||||
}
|
// }
|
||||||
.top .el-table__body-wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.bottom .el-table__header-wrapper {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2023-12-29 16:18:17
|
* @LastEditTime: 2023-10-16 14:20:45
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -60,16 +60,98 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
series: [{
|
series: []
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
barWidth: 6
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('mounted')
|
console.log('mounted')
|
||||||
console.log('borderRadius: ', this.borderRadius)
|
console.log('borderRadius: ', this.borderRadius)
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: this.dataList[0].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[0].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||||
|
]),
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[0].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[1].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[1].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||||
|
]),
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[1].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[2].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[2].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[2].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[2].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[3].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[3].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[3].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[3].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[4].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[4].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[4].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[4].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[5].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[5].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[5].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[5].data,
|
||||||
|
barWidth: 6
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
})
|
})
|
||||||
@ -82,50 +164,8 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart(nameList, passRateList, outputNumList) {
|
initChart() {
|
||||||
let series= [
|
console.log(1)
|
||||||
{
|
|
||||||
name: '产线产量',
|
|
||||||
type: 'bar',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#9DD5FF' },
|
|
||||||
{ offset: 1, color: '#1295FF' }
|
|
||||||
])
|
|
||||||
// barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
barWidth: 12,
|
|
||||||
data: outputNumList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '产线良品率',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 0,
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.8,
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(255, 209, 96, 0.18)'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(255, 234, 153, 0)'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: passRateList
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
@ -137,12 +177,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "4%",
|
right: '20%'
|
||||||
right: "4%",
|
|
||||||
bottom: "3%",
|
|
||||||
width: 'auto',
|
|
||||||
height: "auto",
|
|
||||||
containLabel: true
|
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['产线产量', '产线良品率'],
|
data: ['产线产量', '产线良品率'],
|
||||||
@ -170,7 +205,7 @@ export default {
|
|||||||
color: '#213259'
|
color: '#213259'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: nameList
|
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
|
||||||
},
|
},
|
||||||
// yAxis: {
|
// yAxis: {
|
||||||
|
|
||||||
@ -201,7 +236,8 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#ced1d5', // 坐标值得具体的颜色
|
color: '#ced1d5', // 坐标值得具体的颜色
|
||||||
formatter: '{value}%'
|
formatter: '{value} 片'
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@ -226,7 +262,7 @@ export default {
|
|||||||
},
|
},
|
||||||
scale: true,
|
scale: true,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量/㎡', // y轴上方的单位
|
name: '产量/片', // y轴上方的单位
|
||||||
nameTextStyle: {// y轴上方单位的颜色
|
nameTextStyle: {// y轴上方单位的颜色
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
@ -259,7 +295,29 @@ export default {
|
|||||||
// },
|
// },
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: series
|
series: [
|
||||||
|
{
|
||||||
|
name: '产线产量',
|
||||||
|
type: 'bar',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#9DD5FF' },
|
||||||
|
{ offset: 1, color: '#1295FF' }
|
||||||
|
])
|
||||||
|
// barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线良品率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
|
||||||
|
}
|
||||||
|
]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,39 +41,113 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
// nameList: {
|
nameList: {
|
||||||
// type: Array,
|
type: Array,
|
||||||
// default: () => []
|
default: () => []
|
||||||
// },
|
},
|
||||||
// dataList: {
|
dataList: {
|
||||||
// type: Array,
|
type: Array,
|
||||||
// default: () => []
|
default: () => []
|
||||||
// }
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
nameList: [],
|
series: []
|
||||||
series: [{
|
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
barWidth: 6
|
|
||||||
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('mounted')
|
console.log('mounted')
|
||||||
console.log('borderRadius: ', this.borderRadius)
|
console.log('borderRadius: ', this.borderRadius)
|
||||||
// console.log('33333', this.dataList)
|
|
||||||
// let arr = []
|
this.series = [
|
||||||
// this.dataList.forEach(ele => {
|
{
|
||||||
// console.log(ele);
|
name: this.dataList[0].name,
|
||||||
// this.series = []
|
type: 'bar',
|
||||||
this.initChart()
|
itemStyle: {
|
||||||
// this.$nextTick(() => {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
// // this.initChart()
|
{ offset: 0, color: this.dataList[0].topColor },
|
||||||
// })
|
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||||
|
]),
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[0].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[1].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[1].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||||
|
]),
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[1].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[2].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[2].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[2].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[2].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[3].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[3].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[3].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[3].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[4].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[4].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[4].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[4].data,
|
||||||
|
barWidth: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.dataList[5].name,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.dataList[5].topColor },
|
||||||
|
{ offset: 1, color: this.dataList[5].bottomColor }
|
||||||
|
]),
|
||||||
|
// borderRadius: [5, 5, 0, 0]
|
||||||
|
barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
data: this.dataList[5].data,
|
||||||
|
barWidth: 6
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
@ -83,20 +157,9 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart(nameList,dataList) {
|
initChart() {
|
||||||
// console.log(1)
|
console.log(1)
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
if (dataList.length !== 0) {
|
|
||||||
// this.$set(this.series, "data", dataList);
|
|
||||||
this.series = [{
|
|
||||||
type: 'bar',
|
|
||||||
data: dataList,
|
|
||||||
barWidth: 6
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
if (nameList.length !== 0) {
|
|
||||||
this.nameList = nameList
|
|
||||||
}
|
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -153,19 +216,19 @@ export default {
|
|||||||
},
|
},
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
// legend: {
|
legend: {
|
||||||
// itemHeight: 10,
|
itemHeight: 10,
|
||||||
// itemWidth: 10,
|
itemWidth: 10,
|
||||||
// x: 'center', // 可设定图例在左、右、居中
|
x: 'center', // 可设定图例在左、右、居中
|
||||||
// y: 'top', // 可设定图例在上、下、居中
|
y: 'top', // 可设定图例在上、下、居中
|
||||||
// show: this.showLegend,
|
show: this.showLegend,
|
||||||
// data: this.dataList,
|
data: this.dataList,
|
||||||
// right: '1%',
|
right: '1%',
|
||||||
// textStyle: {
|
textStyle: {
|
||||||
// fontSize: 12 * this.beilv,
|
fontSize: 12 * this.beilv,
|
||||||
// color: '#ced1d5'
|
color: '#ced1d5'
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
series: this.series
|
series: this.series
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -1,215 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2023-12-27 13:54:52
|
|
||||||
* @LastEditTime: 2023-12-29 16:28:26
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'linearBarChart'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [9, 9, 0, 0]
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// nameList: {
|
|
||||||
// type: Array,
|
|
||||||
// default: () => []
|
|
||||||
// },
|
|
||||||
// dataList: {
|
|
||||||
// type: Array,
|
|
||||||
// default: () => []
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
nameList: [],
|
|
||||||
series: [{
|
|
||||||
type: 'bar',
|
|
||||||
data: [],
|
|
||||||
barWidth: 6
|
|
||||||
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('mounted')
|
|
||||||
// console.log('borderRadius: ', this.borderRadius)
|
|
||||||
// console.log('33333', this.dataList)
|
|
||||||
// let arr = []
|
|
||||||
// this.dataList.forEach(ele => {
|
|
||||||
// console.log(ele);
|
|
||||||
// this.series = []
|
|
||||||
this.initChart()
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
// // this.initChart()
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
|
||||||
// console.log(1)
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
let series = [
|
|
||||||
{
|
|
||||||
// 辅助系列
|
|
||||||
name: '良品',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
// silent: true,
|
|
||||||
// itemStyle: {
|
|
||||||
color: '#0fdedb',
|
|
||||||
// },
|
|
||||||
barWidth: 10,
|
|
||||||
data: passRateList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
name: '废品',
|
|
||||||
data: wasteList,
|
|
||||||
barWidth: 10,
|
|
||||||
// barWidth: 15,
|
|
||||||
// label: {
|
|
||||||
// position: [10, 10],
|
|
||||||
// normal: {
|
|
||||||
// position: [800, -24],
|
|
||||||
// show: true,
|
|
||||||
// textStyle: {
|
|
||||||
// color: '#2359ec',
|
|
||||||
// fontSize: 16,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
}
|
|
||||||
]
|
|
||||||
// for (i = 0; i < 5; i++) {
|
|
||||||
// series.push({
|
|
||||||
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
this.chart.setOption({
|
|
||||||
legend: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#ffffff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
width: 'auto',
|
|
||||||
height: 'auto',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
inverse: true,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
inside: true,
|
|
||||||
interval: 0, //横轴信息全部显
|
|
||||||
splitNumber: 50,
|
|
||||||
// boundaryGap: [20, 20],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ffffff',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 12,
|
|
||||||
align: 'left',
|
|
||||||
padding: [0, 0, 15, -5]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: topNameList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
inverse: true,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
inside: true,
|
|
||||||
interval: 0, //横轴信息全部显
|
|
||||||
splitNumber: 50,
|
|
||||||
// boundaryGap: [20, 20],
|
|
||||||
textStyle: {
|
|
||||||
color: '#ffffff',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 12,
|
|
||||||
align: 'right',
|
|
||||||
padding: [0, 0, 15, -5]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: nameWasteList
|
|
||||||
}
|
|
||||||
],
|
|
||||||
xAxis: {
|
|
||||||
// max: 120,
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
series:series
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -2,17 +2,17 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2024-01-04 15:52:52
|
* @LastEditTime: 2023-12-19 14:25:07
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="container" ref="container" class="visual-container" :style="styles">
|
<div id="container" ref="container" class="visual-container" :style="styles">
|
||||||
<el-row class="container-title" :style="{
|
<el-row class="container-title" :style="{
|
||||||
height: 88 + 'px',
|
height: 88 + 'px',
|
||||||
lineHeight: 88 + 'px',
|
lineHeight: 88 + 'px',
|
||||||
fontSize: 31 + 'px'
|
fontSize: 31 + 'px'
|
||||||
}">
|
}">
|
||||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||||
许昌安彩深加工看板
|
许昌安彩深加工看板
|
||||||
<h3 class="unit">单位:河南汇融科技服务有限公司</h3>
|
<h3 class="unit">单位:河南汇融科技服务有限公司</h3>
|
||||||
<h3 class="time">{{ times }}</h3>
|
<h3 class="time">{{ times }}</h3>
|
||||||
@ -27,23 +27,28 @@
|
|||||||
</el-button> -->
|
</el-button> -->
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row class="container-main flex-col" type="flex">
|
<el-row class="container-main flex-col" type="flex">
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :title="'设备报警'" :height="318" :title-icon="'eqAlarm'">
|
<base-container :title="'设备报警'" :title-icon="'5_1'">
|
||||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
|
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
|
||||||
:table-data="equipmentList" />
|
:table-data="qualityYearList" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
|
<base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
|
||||||
|
<div class="visual-select">
|
||||||
|
<el-select class="coldSelect" v-model="modelMonth" size="mini" placeholder="">
|
||||||
|
<el-option key="1" value="钢1线" label="钢1线" default />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
||||||
:table-data="qualityMonthList" />
|
:table-data="qualityMonthList" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :height="318" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
<base-container :title="'设备监控'" :title-icon="'5_3'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div> -->
|
||||||
@ -54,15 +59,13 @@
|
|||||||
<!-- <el-row style="margin-bottom: 1em">
|
<!-- <el-row style="margin-bottom: 1em">
|
||||||
<p class="now-team-title">加工工单进度</p>
|
<p class="now-team-title">加工工单进度</p>
|
||||||
</el-row> -->
|
</el-row> -->
|
||||||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
|
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
||||||
<!-- <el-col :span="12"> -->
|
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||||||
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
|
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||||
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
|
|
||||||
<i class="el-icon-check" />
|
<i class="el-icon-check" />
|
||||||
{{ op.name }}
|
{{ op.name }}
|
||||||
</p> -->
|
</p>
|
||||||
<p class="now-secondary-title">{{ op.name }}</p>
|
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
||||||
<!-- </el-col> -->
|
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- <el-row>
|
<!-- <el-row>
|
||||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||||
@ -95,14 +98,13 @@
|
|||||||
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
<base-container :height="256" :title="'能源监控'" :title-icon="'5_5'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div>
|
||||||
<el-row :gutter="9">
|
<el-row :gutter="9">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||||||
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
<linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="359" :show-legend="true" />
|
||||||
:data-list="EnergyMonitoringList" :height="359" />
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-table3
|
<base-table3
|
||||||
@ -117,13 +119,13 @@
|
|||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'">
|
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div>
|
||||||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 -->
|
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 -->
|
||||||
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
|
<double-y-chart :id=" 'doubleYChart' " :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||||||
:data-list="cxDataList" :height="359" :show-legend="true" />
|
:show-legend="true" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -398,22 +400,22 @@ const legendData3 = [
|
|||||||
]
|
]
|
||||||
const qualityYearTableProps = [
|
const qualityYearTableProps = [
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'eqName',
|
||||||
label: '设备名称'
|
label: '设备名称'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'eqCode',
|
||||||
label: '设备编码'
|
label: '设备编码'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'status',
|
prop: 'level',
|
||||||
label: '设备状态',
|
label: '报警级别',
|
||||||
// subcomponent: alarmLevel,
|
subcomponent: alarmLevel,
|
||||||
align: 'center'
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'error',
|
prop: 'content',
|
||||||
label: '是否故障'
|
label: '报警内容'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -437,39 +439,206 @@ const qualityYearList = [
|
|||||||
]
|
]
|
||||||
const qualityMonthTableProps = [
|
const qualityMonthTableProps = [
|
||||||
{
|
{
|
||||||
prop: 'productionLineName',
|
prop: 'lineName',
|
||||||
label: '产线名'
|
label: '产线名'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'sectionName',
|
prop: 'process',
|
||||||
label: '工序'
|
label: '工序'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'count',
|
prop: 'eqName',
|
||||||
label: '损耗片数'
|
label: '设备名'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'inspectionTypeName',
|
prop: 'eqCode',
|
||||||
label: '缺陷类型'
|
label: '设备编码'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
prop: 'long',
|
||||||
|
label: '总运行时长(h)'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// prop: 'createTime',
|
||||||
|
// label: '保养时间'
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
prop: 'status',
|
||||||
|
label: '设备状态'
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// prop: 'nextCreateTime',
|
||||||
|
// label: '下次保养时间'
|
||||||
|
// }
|
||||||
|
// {
|
||||||
|
// prop: 'nextLong',
|
||||||
|
// label: '距离保养时间(天)',
|
||||||
|
// // subcomponent: nextDay,
|
||||||
|
// align: 'center'
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const qualityMonthList = [
|
||||||
|
{
|
||||||
|
lineName: '钢一线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '二次清洗机',
|
||||||
|
eqCode: '2312312',
|
||||||
|
long: '200',
|
||||||
|
// createTime: '2021-02-25 12:00:01',
|
||||||
|
status: '报警'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 365
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢二线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '锻造机',
|
||||||
|
eqCode: '43434',
|
||||||
|
long: '252',
|
||||||
|
// createTime: '2021-11-25 12:00:01',
|
||||||
|
status: '正常'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢三线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '设备3',
|
||||||
|
eqCode: '23213212',
|
||||||
|
long: '100',
|
||||||
|
// createTime: '2021-10-25 12:00:01',
|
||||||
|
status: '故障停机'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 24
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢四线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '设备4',
|
||||||
|
eqCode: '23213',
|
||||||
|
long: '322',
|
||||||
|
// createTime: '2021-02-25 12:00:01',
|
||||||
|
status: '故障停机'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: -36
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '设备5',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: '待机'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '设备5',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '212',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: '待机'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '设备5',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '123',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: '镀膜机'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '清洗机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '322',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Remote'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '磨边机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Non-scheduled'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '磨边机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Non-scheduled'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '磨边机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Non-scheduled'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '磨边机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Non-scheduled'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lineName: '钢五线',
|
||||||
|
process: '41',
|
||||||
|
eqName: '磨边机',
|
||||||
|
eqCode: '23121312',
|
||||||
|
long: '232',
|
||||||
|
// createTime: '2021-06-25 12:00:01',
|
||||||
|
status: 'Non-scheduled'
|
||||||
|
// nextCreateTime: '2022-12-25 12:00:01',
|
||||||
|
// nextLong: 111
|
||||||
|
}
|
||||||
|
]
|
||||||
const orderProcessList = [
|
const orderProcessList = [
|
||||||
{
|
{
|
||||||
id: '1', outRate: '.8', name: '凯盛0322'
|
id: '1', outRate: '.8', name: '凯盛0322'
|
||||||
}, {
|
}, {
|
||||||
id: '2', outRate: '.4', name: '光伏玻璃4.0'
|
id: '1', outRate: '.4', name: '光伏玻璃4.0'
|
||||||
}, {
|
}, {
|
||||||
id: '3', outRate: '.5', name: '光伏玻璃3.0'
|
id: '1', outRate: '.5', name: '光伏玻璃3.0'
|
||||||
}, {
|
}, {
|
||||||
id: '4', outRate: '.3', name: '光伏玻璃2.0'
|
id: '1', outRate: '.3', name: '光伏玻璃2.0'
|
||||||
}, {
|
}, {
|
||||||
id: '5', outRate: '.5', name: '光伏玻璃1.0'
|
id: '1', outRate: '.5', name: '光伏玻璃1.0'
|
||||||
}, {
|
}, {
|
||||||
id: '6', outRate: '.8', name: '光伏玻璃'
|
id: '1', outRate: '.8', name: '光伏玻璃'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '7', outRate: '.8', name: '统计订单'
|
id: '1', outRate: '.8', name: '统计订单'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
@ -492,16 +661,11 @@ export default {
|
|||||||
beilv2: 1,
|
beilv2: 1,
|
||||||
beilv: 1,
|
beilv: 1,
|
||||||
value: 100,
|
value: 100,
|
||||||
orderList:[],
|
times:'',
|
||||||
times: '',
|
|
||||||
EnergyMonitoringNameList: [],
|
|
||||||
equipmentList:[],
|
|
||||||
EnergyMonitoringList: [],
|
|
||||||
// offsetWidth: null,
|
// offsetWidth: null,
|
||||||
qualityYearTableProps,
|
qualityYearTableProps,
|
||||||
cxNameList,
|
cxNameList,
|
||||||
cxDataList,
|
cxDataList,
|
||||||
productLineList:[],
|
|
||||||
qualityYearList,
|
qualityYearList,
|
||||||
clientWidth: 0,
|
clientWidth: 0,
|
||||||
containerWidth: 111111,
|
containerWidth: 111111,
|
||||||
@ -509,7 +673,7 @@ export default {
|
|||||||
// orderProcessList: [],
|
// orderProcessList: [],
|
||||||
orderProcessList,
|
orderProcessList,
|
||||||
qualityTableProps1,
|
qualityTableProps1,
|
||||||
qualityMonthList:[],
|
qualityMonthList,
|
||||||
qualityMonthTableProps,
|
qualityMonthTableProps,
|
||||||
modelMonth: '',
|
modelMonth: '',
|
||||||
qualityList1,
|
qualityList1,
|
||||||
@ -555,18 +719,8 @@ export default {
|
|||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getList()
|
|
||||||
this.initWebSocket()
|
|
||||||
this.SJGInitWebSocket()
|
|
||||||
this.getTimes()
|
this.getTimes()
|
||||||
const _this = this;
|
this.windowWidth(document.documentElement.clientWidth)
|
||||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
|
||||||
window.onresize = () => {
|
|
||||||
return (() => {
|
|
||||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
|
||||||
this.beilv2 = _this.clientWidth / 1920
|
|
||||||
})()
|
|
||||||
}
|
|
||||||
// const _this = this;
|
// const _this = this;
|
||||||
// window.onresize = () => {
|
// window.onresize = () => {
|
||||||
// return (() => {
|
// return (() => {
|
||||||
@ -592,23 +746,6 @@ export default {
|
|||||||
// removeEventListener('resize', resizeFun)
|
// removeEventListener('resize', resizeFun)
|
||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
getList() {
|
|
||||||
this.$axios.get(
|
|
||||||
'base/core-production-line/listAll',
|
|
||||||
'get',
|
|
||||||
this.queryParams
|
|
||||||
).then((res) => {
|
|
||||||
// console.log('11111', res);
|
|
||||||
this.productLineList = res.data
|
|
||||||
})
|
|
||||||
this.$axios.get(
|
|
||||||
'base/quality-inspection-record/dayStatistics',
|
|
||||||
'get',
|
|
||||||
).then((res) => {
|
|
||||||
// console.log('11111', res);
|
|
||||||
this.qualityMonthList = res.data ? res.data : []
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getTimes() {
|
getTimes() {
|
||||||
setInterval(this.getTimesInterval, 1000);
|
setInterval(this.getTimesInterval, 1000);
|
||||||
},
|
},
|
||||||
@ -633,174 +770,6 @@ export default {
|
|||||||
//拼接格式化当前时间
|
//拼接格式化当前时间
|
||||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||||
},
|
},
|
||||||
initWebSocket() {
|
|
||||||
if (typeof (WebSocket) === 'undefined') {
|
|
||||||
alert('您的浏览器不支持WebSocket')
|
|
||||||
} else {
|
|
||||||
let date = new Date().valueOf()
|
|
||||||
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
|
|
||||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
|
||||||
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
|
|
||||||
// 实例化 WebSocket
|
|
||||||
this.websocket = new WebSocket(wsUrl)
|
|
||||||
// 监听 WebSocket 连接
|
|
||||||
this.websocket.onopen = this.websocketOnOpen
|
|
||||||
// 监听 WebSocket 错误信息
|
|
||||||
this.websocket.onerror = this.websocketOnError
|
|
||||||
// 监听 WebSocket 消息
|
|
||||||
this.websocket.onmessage = this.websocketOnMessage
|
|
||||||
// 监听 webSocket 断开信息
|
|
||||||
this.websocket.onclose = this.websocketClose
|
|
||||||
}
|
|
||||||
},
|
|
||||||
SJGInitWebSocket() {
|
|
||||||
if (typeof (WebSocket) === 'undefined') {
|
|
||||||
alert('您的浏览器不支持WebSocket')
|
|
||||||
} else {
|
|
||||||
// const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
|
|
||||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
|
||||||
let date = new Date().valueOf()
|
|
||||||
// console.log(date);
|
|
||||||
console.log(process.env);
|
|
||||||
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
|
|
||||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
|
||||||
// 监听 WebSocket 连接
|
|
||||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
|
||||||
// 监听 WebSocket 错误信息
|
|
||||||
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
|
||||||
// 监听 WebSocket 消息
|
|
||||||
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
|
||||||
// 监听 webSocket 断开信息
|
|
||||||
this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
|
||||||
}
|
|
||||||
},
|
|
||||||
SJGWebsocketOnOpen() {
|
|
||||||
console.log('socket连接成功')
|
|
||||||
// console.log(this.SJGWebsocket.onmessage);
|
|
||||||
this.SJGWebsocket.onmessage()
|
|
||||||
},
|
|
||||||
// 连接建立失败重连
|
|
||||||
SJGWebsocketOnError(e) {
|
|
||||||
// console.log('11111', e)
|
|
||||||
this.SJGInitWebSocket()
|
|
||||||
},
|
|
||||||
// 数据接收
|
|
||||||
SJGWebsocketOnMessage(e) {
|
|
||||||
// console.log(1111, e)
|
|
||||||
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
|
|
||||||
// console.log(this.wsData.detData);
|
|
||||||
// console.log('22222', this.wsData.data)
|
|
||||||
if (this.SJGWsData.type === 'order') {
|
|
||||||
this.orderList = this.SJGWsData.detData.map((ele, index) => {
|
|
||||||
if (ele.progressRate != 1) {
|
|
||||||
return {
|
|
||||||
id: ele.id,
|
|
||||||
name: ele.name,
|
|
||||||
progressRate: ele.progressRate.toFixed(3)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log(this.orderList)
|
|
||||||
} else if (this.SJGWsData.type === 'equipment') {
|
|
||||||
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
|
|
||||||
// if (ele.progressRate != 1) {
|
|
||||||
return {
|
|
||||||
id: ele.id,
|
|
||||||
name: ele.name,
|
|
||||||
code: ele.code,
|
|
||||||
status: ele.status,
|
|
||||||
error: ele.error=== true ? '是' : '否'
|
|
||||||
}
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
// console.log(SJGWsData.orderList)
|
|
||||||
} else if (this.SJGWsData.type === 'productline') {
|
|
||||||
// console.log(this.wsData.detData);
|
|
||||||
let nameList = []
|
|
||||||
let passRateList = []
|
|
||||||
let outputNumList = []
|
|
||||||
|
|
||||||
// console.log('2222222222', this.productLineList);
|
|
||||||
this.productLineList.forEach((item) => {
|
|
||||||
this.SJGWsData.detData.forEach((ele) => {
|
|
||||||
if (item.id == ele.productionLineId) {
|
|
||||||
nameList.push(item.name)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// progressRateList = EnergyNameList
|
|
||||||
// let EnergyDataList = []
|
|
||||||
this.SJGWsData.detData.forEach((ele) => {
|
|
||||||
passRateList.push(ele.passRate *100
|
|
||||||
)
|
|
||||||
})
|
|
||||||
this.SJGWsData.detData.forEach((ele) => {
|
|
||||||
outputNumList.push(ele.outputNum
|
|
||||||
)
|
|
||||||
})
|
|
||||||
// console.log(this.EnergyMonitoringNameList)
|
|
||||||
// console.log(this.EnergyMonitoringList)
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 数据发送
|
|
||||||
// SJGWebsocketSend() {
|
|
||||||
// this.websocket.send('11111')
|
|
||||||
// },
|
|
||||||
// // 关闭
|
|
||||||
// SJGWebsocketClose(e) {
|
|
||||||
// console.log('WebSocket 断开连接', e)
|
|
||||||
// },
|
|
||||||
// // 连接建立之后执行send方法发送数据
|
|
||||||
websocketOnOpen() {
|
|
||||||
console.log('socket连接成功')
|
|
||||||
this.websocket.onmessage()
|
|
||||||
},
|
|
||||||
// 连接建立失败重连
|
|
||||||
websocketOnError(e) {
|
|
||||||
console.log('11111', e)
|
|
||||||
this.initWebSocket()
|
|
||||||
},
|
|
||||||
// 数据接收
|
|
||||||
websocketOnMessage(e) {
|
|
||||||
// console.log(1111, e)
|
|
||||||
this.wsData = e?.data ? JSON.parse(e?.data) : {}
|
|
||||||
// console.log('22222', this.wsData.data)
|
|
||||||
if (this.wsData.type === 'EnergyMonitoring') {
|
|
||||||
let EnergyNameList = []
|
|
||||||
this.wsData.data.forEach((ele) => {
|
|
||||||
EnergyNameList.push(ele.lineName)
|
|
||||||
})
|
|
||||||
this.EnergyMonitoringNameList = EnergyNameList
|
|
||||||
let EnergyDataList = []
|
|
||||||
this.wsData.data.forEach((ele) => {
|
|
||||||
EnergyDataList.push(ele.useQuantity
|
|
||||||
// {
|
|
||||||
// type: 'bar',
|
|
||||||
// data: ele.useQuantity,
|
|
||||||
// barWidth: 6
|
|
||||||
|
|
||||||
// }
|
|
||||||
)
|
|
||||||
})
|
|
||||||
this.EnergyMonitoringList = EnergyDataList
|
|
||||||
console.log(EnergyDataList)
|
|
||||||
// console.log(this.EnergyMonitoringNameList)
|
|
||||||
// console.log(this.EnergyMonitoringList)
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 数据发送
|
|
||||||
websocketSend() {
|
|
||||||
this.websocket.send('11111')
|
|
||||||
},
|
|
||||||
// 关闭
|
|
||||||
websocketClose(e) {
|
|
||||||
// console.log('WebSocket 断开连接', e)
|
|
||||||
},
|
|
||||||
windowWidth(value) {
|
windowWidth(value) {
|
||||||
this.clientWidth = value
|
this.clientWidth = value
|
||||||
this.beilv2 = this.clientWidth / 1920
|
this.beilv2 = this.clientWidth / 1920
|
||||||
@ -926,19 +895,17 @@ export default {
|
|||||||
background-color: unset;
|
background-color: unset;
|
||||||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||||
}
|
}
|
||||||
// ::v-deep .el-progress-bar__outer {
|
|
||||||
// background-color:rgba(71, 248, 220, 1);
|
|
||||||
// // background-image: rgba(71, 248, 220, 1))
|
|
||||||
// }
|
|
||||||
.visual-select {
|
.visual-select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
top: 2em;
|
top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .container-main {
|
// .container-main {
|
||||||
// padding: 5px;
|
// padding: 0px;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-01-08 16:11:03
|
* @LastEditTime: 2023-12-06 10:36:56
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -253,7 +253,6 @@ export default {
|
|||||||
dataRule: {
|
dataRule: {
|
||||||
code: [{ required: true, message: "产品编码不能为空", trigger: "blur" }],
|
code: [{ required: true, message: "产品编码不能为空", trigger: "blur" }],
|
||||||
name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
|
name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
|
||||||
specifications: [{ required: true, message: "规格不能为空", trigger: "blur" }],
|
|
||||||
materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
|
materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
|
||||||
productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }],
|
productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }],
|
||||||
processTime: [{ required: true, message: "产线生产单位用时不能为空", trigger: "blur" }]
|
processTime: [{ required: true, message: "产线生产单位用时不能为空", trigger: "blur" }]
|
||||||
|
Before Width: | Height: | Size: 492 B |
Before Width: | Height: | Size: 558 B |
Before Width: | Height: | Size: 322 B |
Before Width: | Height: | Size: 615 B |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 507 B |
Before Width: | Height: | Size: 789 B |
@ -11,12 +11,12 @@
|
|||||||
<i
|
<i
|
||||||
class=""
|
class=""
|
||||||
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
||||||
<img :src="imgSrc" width="20" height="20" alt="" />
|
<img :src="imgSrc" width="18" height="16" alt="" />
|
||||||
</i>
|
</i>
|
||||||
<span
|
<span
|
||||||
style="
|
style="
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -48,31 +48,13 @@ export default {
|
|||||||
case '风机运行频率':
|
case '风机运行频率':
|
||||||
return require('../assets/flow.png');
|
return require('../assets/flow.png');
|
||||||
case 'ISRA缺陷检测':
|
case 'ISRA缺陷检测':
|
||||||
return require('../assets/check.png');
|
return require('../assets/gas.png');
|
||||||
case '能耗':
|
case '能耗':
|
||||||
return require('../assets/energeCost.png');
|
return require('../assets/gas.png');
|
||||||
case '窑炉信息':
|
case '窑炉信息':
|
||||||
return require('../assets/msg.png');
|
return require('../assets/gas.png');
|
||||||
case '烟气处理':
|
case '烟气处理':
|
||||||
return require('../assets/gas.png');
|
return require('../assets/gas.png');
|
||||||
case '产线缺陷统计':
|
|
||||||
return require('../assets/defectStatistics.png');
|
|
||||||
case '产线当日缺陷分类':
|
|
||||||
return require('../assets/check.png');
|
|
||||||
case '本日生产良品率':
|
|
||||||
return require('../assets/goodRate.png');
|
|
||||||
case '订单完成情况':
|
|
||||||
return require('../assets/order.png');
|
|
||||||
case '设备报警':
|
|
||||||
return require('../assets/goodRate.png');
|
|
||||||
case '各工序缺陷汇总':
|
|
||||||
return require('../assets/check.png');
|
|
||||||
case '能源监控':
|
|
||||||
return require('../assets/defectStatistics.png');
|
|
||||||
case '产线产量及良品率':
|
|
||||||
return require('../assets/order.png');
|
|
||||||
case '工单监控':
|
|
||||||
return require('../assets/eqMonitor.png');
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="defect-chart"></div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import resize from './../mixins/resize'
|
|
||||||
export default {
|
|
||||||
name: 'DefectChart',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
chartTime: ''
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
tempData: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
israDayStatistic() {
|
|
||||||
return this.$store.state.websocket.israDayStatistic
|
|
||||||
},
|
|
||||||
israWeekStatistic() {
|
|
||||||
return this.$store.state.websocket.israWeekStatistic
|
|
||||||
},
|
|
||||||
israMonthStatistic() {
|
|
||||||
return this.$store.state.websocket.israMonthStatistic
|
|
||||||
},
|
|
||||||
israYearStatistic() {
|
|
||||||
return this.$store.state.websocket.israYearStatistic
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
israDayStatistic: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '日') {
|
|
||||||
this.tempData = israDayStatistic
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
israWeekStatistic: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
this.tempData = israWeekStatistic
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
israMonthStatistic: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '月') {
|
|
||||||
this.tempData = israMonthStatistic
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
israYearStatistic: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '年') {
|
|
||||||
this.tempData = israYearStatistic
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose()
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
let legendData = []
|
|
||||||
let xData = []
|
|
||||||
let yData = []
|
|
||||||
this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
|
|
||||||
xData.push(item.name)
|
|
||||||
})
|
|
||||||
var series = [
|
|
||||||
{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'all',
|
|
||||||
name: 'a',
|
|
||||||
barWidth: 12,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [10, 46, 64, '-', 0, '-', 0],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'all',
|
|
||||||
name: 'b',
|
|
||||||
barWidth: 12,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [30, '-', 0, 20, 10, '-', 0],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'all',
|
|
||||||
barWidth: 12,
|
|
||||||
name: 'c'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [30, '-', 0, 20, 10, '-', 0],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'all',
|
|
||||||
barWidth: 12,
|
|
||||||
name: 'd'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [10, 20, 150, 0, '-', 50, 10],
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'all',
|
|
||||||
name: 'e',
|
|
||||||
barWidth: 12,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
var option = {
|
|
||||||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
|
||||||
grid: { top: 40, right: 12, bottom: 20, left: 48 },
|
|
||||||
legend: {
|
|
||||||
top: 10,
|
|
||||||
left: 80,
|
|
||||||
padding: 5,
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 12,
|
|
||||||
itemGap: 12,
|
|
||||||
height: 12,
|
|
||||||
textStyle: {
|
|
||||||
color: "#DFF1FE",
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
data:['a','b','c','d','e'],
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fffc",
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: "单位/个",
|
|
||||||
nameTextStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 10,
|
|
||||||
align: "right",
|
|
||||||
},
|
|
||||||
type: "value",
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: "{value}",
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259a0",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
className: "defect-chart-tooltip"
|
|
||||||
},
|
|
||||||
series: series
|
|
||||||
};
|
|
||||||
option && this.chart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.defect-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.defect-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.defect-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,170 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="defect-class-chart"></div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import resize from './../mixins/resize'
|
|
||||||
export default {
|
|
||||||
name: 'DefectClassChart',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
chartType: ''
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
israDayStatistic() {
|
|
||||||
return this.$store.state.websocket.israDayStatistic
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
israDayStatistic: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (newVal === oldVal) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chartType: {// 监听类型变化,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose()
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
let tempData = []
|
|
||||||
let xData = []
|
|
||||||
let yData = []
|
|
||||||
this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
|
|
||||||
if (this.chartType === item.name) {
|
|
||||||
tempData = item.data
|
|
||||||
return
|
|
||||||
}
|
|
||||||
})
|
|
||||||
tempData.length > 0 && tempData.map(item => {
|
|
||||||
xData.push(item.checkType)
|
|
||||||
yData.push(item.checkNum)
|
|
||||||
})
|
|
||||||
var option = {
|
|
||||||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
|
||||||
grid: { top: 40, right: 12, bottom: 80, left: 60 },
|
|
||||||
// legend: {
|
|
||||||
// top: 10,
|
|
||||||
// left: 80,
|
|
||||||
// padding: 5,
|
|
||||||
// itemWidth: 12,
|
|
||||||
// itemHeight: 12,
|
|
||||||
// itemGap: 12,
|
|
||||||
// height: 12,
|
|
||||||
// textStyle: {
|
|
||||||
// color: "#DFF1FE",
|
|
||||||
// fontSize: 12,
|
|
||||||
// },
|
|
||||||
// data:['a','b','c','d','e'],
|
|
||||||
// },
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fffc",
|
|
||||||
fontSize: 12,
|
|
||||||
rotate: 45
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: "单位/次",
|
|
||||||
nameTextStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 10,
|
|
||||||
align: "right",
|
|
||||||
},
|
|
||||||
type: "value",
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: "{value}",
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259a0",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
className: "defect-chart-tooltip"
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: yData,
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 12,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top'
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#5CB7FF' },
|
|
||||||
{ offset: 1, color: '#364BFE' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && this.chart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.defect-class-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.defect-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.defect-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="energe-monitoring-chart"></div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import resize from './../mixins/resize'
|
|
||||||
export default {
|
|
||||||
name: 'EnergeMonitoringChart',
|
|
||||||
mixins: [resize],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
energyMonitoring() {
|
|
||||||
return this.$store.state.websocket.energyMonitoring
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
energyMonitoring: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (newVal === oldVal) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose()
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
let xData = []
|
|
||||||
let yData = []
|
|
||||||
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
|
|
||||||
xData.push(item.lineName)
|
|
||||||
yData.push(item.useQuantity)
|
|
||||||
})
|
|
||||||
var option = option = {
|
|
||||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
crossStyle: {
|
|
||||||
color: '#999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
className: "energe-monitoring-chart-tooltip"
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['电耗能'],
|
|
||||||
textStyle: {
|
|
||||||
color: "#DFF1FE",
|
|
||||||
fontSize: 12,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '单位',
|
|
||||||
// min: 0,
|
|
||||||
// max: 250,
|
|
||||||
// interval: 50,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{value}'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259a0",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '电耗能',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 20,
|
|
||||||
tooltip: {
|
|
||||||
valueFormatter: function (value) {
|
|
||||||
return value + ' ml';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#5CB7FF' },
|
|
||||||
{ offset: 1, color: '#364BFE' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: yData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
option && this.chart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.energe-monitoring-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.energe-monitoring-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.energe-monitoring-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,234 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="gas-chart"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import resize from './../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'GasChart',
|
|
||||||
mixins: [resize],
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
chartType: '',
|
|
||||||
chartTime: ''
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const colors = [
|
|
||||||
'#12FFF5',
|
|
||||||
'#2760FF',
|
|
||||||
'#FFD160',
|
|
||||||
'#E80091',
|
|
||||||
'#8064ff',
|
|
||||||
'#ff8a3b',
|
|
||||||
'#8cd26d',
|
|
||||||
'#2aa1ff',
|
|
||||||
];
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
gasChartDayTrend() {
|
|
||||||
return this.$store.state.websocket.gasChartDayTrend
|
|
||||||
},
|
|
||||||
gasChartWeekTrend() {
|
|
||||||
return this.$store.state.websocket.gasChartWeekTrend
|
|
||||||
},
|
|
||||||
gasChartMonthTrend() {
|
|
||||||
return this.$store.state.websocket.gasChartMonthTrend
|
|
||||||
},
|
|
||||||
gasChartYearTrend() {
|
|
||||||
return this.$store.state.websocket.gasChartYearTrend
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
gasChartDayTrend: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '日') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
gasChartWeekTrend: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
gasChartMonthTrend: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '月') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
gasChartYearTrend: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '年') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chartType: {// 监听类型变化,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chartTime: {// 监听时间变化,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
let gasName = ''
|
|
||||||
const colors = ['#FFCB59'];
|
|
||||||
let temp1 = []
|
|
||||||
let temp2 = []
|
|
||||||
let seriesData = []
|
|
||||||
let xData = []
|
|
||||||
let yData = []
|
|
||||||
switch (this.chartTime) {
|
|
||||||
case '日':{
|
|
||||||
temp1 = this.gasChartDayTrend
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '周':{
|
|
||||||
temp1 = this.gasChartWeekTrend
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '月':{
|
|
||||||
temp1 = this.gasChartMonthTrend
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '年':{
|
|
||||||
temp1 = this.gasChartYearTrend
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
switch (this.chartType) {
|
|
||||||
case '氧气含量':{
|
|
||||||
temp2 = temp1.O2_float || []
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '二氧化硫':{
|
|
||||||
temp2 = temp1.SO2_float || []
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '一氧化氮':{
|
|
||||||
temp2 = temp1.NOX_float || []
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '颗粒物':{
|
|
||||||
temp2 = temp1.dust_float || []
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
temp2.length > 0 && temp2.map(i => {
|
|
||||||
xData.push(i.time)
|
|
||||||
yData.push(i.value)
|
|
||||||
})
|
|
||||||
if (yData.length == 0) {
|
|
||||||
seriesData = []
|
|
||||||
}else {
|
|
||||||
seriesData = [{
|
|
||||||
name: gasName,
|
|
||||||
data: yData,
|
|
||||||
type: "line",
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#FFCB59' + "40" },
|
|
||||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
|
||||||
{ offset: 1, color: '#FFCB59' + "00" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
symbolSize: 1,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
|
|
||||||
}
|
|
||||||
// 绘图
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
var option = {
|
|
||||||
color: colors,
|
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: '#213259',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: '单位m³/h',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 10,
|
|
||||||
align: 'right',
|
|
||||||
},
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259a0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: seriesData,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
option && this.chart.setOption(option)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.gas-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -11,16 +11,11 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasChart',
|
name: 'GasChart',
|
||||||
mixins: [resize],
|
|
||||||
components: {},
|
components: {},
|
||||||
props: {
|
props: {},
|
||||||
chartType: '', // 能源类型
|
|
||||||
chartTime: ''
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
const colors = [
|
const colors = [
|
||||||
'#12FFF5',
|
'#12FFF5',
|
||||||
@ -33,155 +28,22 @@ export default {
|
|||||||
'#2aa1ff',
|
'#2aa1ff',
|
||||||
];
|
];
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
};
|
option: {
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
gasChartMsg() {
|
|
||||||
return this.$store.state.websocket.sumGasInfo
|
|
||||||
},
|
|
||||||
energyWeekTrend() {
|
|
||||||
return this.$store.state.websocket.energyWeekTrend
|
|
||||||
},
|
|
||||||
energyMonthTrend() {
|
|
||||||
return this.$store.state.websocket.energyMonthTrend
|
|
||||||
},
|
|
||||||
energyYearTrend() {
|
|
||||||
return this.$store.state.websocket.energyYearTrend
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
energyWeekTrend: {// 监听周电能,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
energyMonthTrend: {// 监听月电能,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
energyYearTrend: {// 监听年电能,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
gasChartMsg: {// 监听天然气,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chartTime: {// 监听时间变化,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chartType: {// 监听能源类型变化,更新图
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
let gasName = ''
|
|
||||||
const colors = ['#FFCB59'];
|
|
||||||
let temp = []
|
|
||||||
let seriesData = []
|
|
||||||
let xData = []
|
|
||||||
let yData = []
|
|
||||||
switch (this.chartType) {
|
|
||||||
case '电耗能':{
|
|
||||||
gasName = '电耗能'
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
temp = this.energyWeekTrend || []
|
|
||||||
}else if(this.chartTime === '月') {
|
|
||||||
temp = this.energyMonthTrend || []
|
|
||||||
}else{
|
|
||||||
temp = this.energyYearTrend || []
|
|
||||||
}
|
|
||||||
temp && temp.map(i => {
|
|
||||||
xData.push(i.time)
|
|
||||||
yData.push(i.qty)
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case '天然气I':{
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
yData = this.gasChartMsg.hisSumGas1For7Day || []
|
|
||||||
}else if(this.chartTime === '月') {
|
|
||||||
yData = this.gasChartMsg.sumGas1ForMonth || []
|
|
||||||
}else{
|
|
||||||
yData = this.gasChartMsg.sumGas1ForYear || []
|
|
||||||
}
|
|
||||||
gasName = '天然气I'
|
|
||||||
xData = this.getXdata()
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
gasName = '天然气II'
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
yData = this.gasChartMsg.hisSumGas2For7Day || []
|
|
||||||
}else if(this.chartTime === '月') {
|
|
||||||
yData = this.gasChartMsg.sumGas2ForMonth || []
|
|
||||||
}else{
|
|
||||||
yData = this.gasChartMsg.sumGas2ForYear || []
|
|
||||||
}
|
|
||||||
xData = this.getXdata()
|
|
||||||
}
|
|
||||||
if (yData.length == 0) {
|
|
||||||
seriesData = []
|
|
||||||
}else {
|
|
||||||
seriesData = [{
|
|
||||||
name: gasName,
|
|
||||||
data: yData,
|
|
||||||
type: "line",
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#FFCB59' + "40" },
|
|
||||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
|
||||||
{ offset: 1, color: '#FFCB59' + "00" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
symbolSize: 1,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
|
|
||||||
}
|
|
||||||
// 绘图
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
var option = {
|
|
||||||
color: colors,
|
color: colors,
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData,
|
data: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, index) => {
|
||||||
|
const today = new Date();
|
||||||
|
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||||
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
dtimestamp
|
||||||
|
).getDate()}`;
|
||||||
|
})
|
||||||
|
.reverse(),
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -218,48 +80,65 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: seriesData,
|
series: [
|
||||||
|
Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Math.ceil(Math.random() * 100)),
|
||||||
|
Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Math.ceil(Math.random() * 100)),
|
||||||
|
Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Math.ceil(Math.random() * 100)),
|
||||||
|
].map((v, i) => ({
|
||||||
|
name: ['总量', '白班', '夜班'][i],
|
||||||
|
data: v,
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle',
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// i % 8 避免超过8个数据时无颜色的问题
|
||||||
|
{ offset: 0, color: colors[i % 8] + '40' },
|
||||||
|
{ offset: 0.5, color: colors[i % 8] + '20' },
|
||||||
|
{ offset: 1, color: colors[i % 8] + '00' },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
})),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
option && this.chart.setOption(option)
|
};
|
||||||
},
|
|
||||||
getXdata() {
|
|
||||||
const today = new Date();
|
|
||||||
const currentYear = today.getFullYear();
|
|
||||||
const currentMonth = today.getMonth() + 1;
|
|
||||||
let days = 30;
|
|
||||||
if (this.chartTime === '周') {
|
|
||||||
return Array(7)
|
|
||||||
.fill(1)
|
|
||||||
.map((_, index) => {
|
|
||||||
const today = new Date();
|
|
||||||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
|
||||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
|
||||||
dtimestamp
|
|
||||||
).getDate()}`;}).reverse()
|
|
||||||
}else if (this.chartTime == "月") {
|
|
||||||
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
|
|
||||||
days = 31;
|
|
||||||
} else if (currentMonth == 2) {
|
|
||||||
days = this.isLeapYear(currentYear) ? 29 : 28;
|
|
||||||
}
|
|
||||||
return Array(days)
|
|
||||||
.fill(1)
|
|
||||||
.map((_, index) => {
|
|
||||||
return `${currentMonth}.${days - index}`;}).reverse()
|
|
||||||
} else {
|
|
||||||
return Array(12)
|
|
||||||
.fill(1)
|
|
||||||
.map((_, index) => {
|
|
||||||
return `${currentYear}.${12 - index}`;}).reverse()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isLeapYear(year) {
|
|
||||||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
inject: ['resizeChart'],
|
||||||
|
computed: {
|
||||||
|
sidebarStatus() {
|
||||||
|
return this.$store.state.app.sidebar.opened;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
sidebarStatus(val) {
|
||||||
|
console.log('sidebarStatus', val);
|
||||||
|
this.chart && this.chart.dispose();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
// resizeChart(val) {
|
||||||
|
// console.log('resizeChart', val);
|
||||||
|
// val && this.chart && this.chart.resize();
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$el.addEventListener('resize', () => {
|
||||||
|
console.log('resziing.....');
|
||||||
|
});
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -7,93 +7,69 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="kiln-header">
|
<header class="kiln-header">
|
||||||
<h1>{{topTitle}}</h1>
|
<h1
|
||||||
|
style="
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
color: #0ee8e4;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
">
|
||||||
|
窑炉生产运行驾驶舱
|
||||||
|
</h1>
|
||||||
<!-- left: 312px; -->
|
<!-- left: 312px; -->
|
||||||
<div
|
<div
|
||||||
class="firm">
|
class="firm"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
bottom: 24px;
|
||||||
|
left: 16.5vw;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
">
|
||||||
单位: 河南汇融科技服务有限公司
|
单位: 河南汇融科技服务有限公司
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="datetime">
|
class="datetime"
|
||||||
<!-- <DateBtnGroup /> -->
|
style="
|
||||||
|
position: absolute;
|
||||||
|
bottom: 18px;
|
||||||
|
right: 15.5vw;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
">
|
||||||
|
<DateBtnGroup />
|
||||||
{{ new Date().toLocaleString() }}
|
{{ new Date().toLocaleString() }}
|
||||||
</div>
|
</div>
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
class="screen-btn"
|
|
||||||
@click="changeFullScreen"
|
|
||||||
>
|
|
||||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
|
||||||
<svg-icon v-else icon-class="fullScreenView" />
|
|
||||||
</el-button>
|
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import DateBtnGroup from './DateBtnGroup.vue';
|
import DateBtnGroup from './DateBtnGroup.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'KilnHeader',
|
name: 'KilnHeader',
|
||||||
// components: { DateBtnGroup },
|
components: { DateBtnGroup },
|
||||||
props: {
|
props: {},
|
||||||
isFullScreen:false,
|
|
||||||
topTitle: ''
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {},
|
||||||
changeFullScreen() {
|
|
||||||
this.$emit('screenfullChange')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.kiln-header {
|
.kiln-header {
|
||||||
background: url('../assets/head.png') no-repeat;
|
background: url('../assets/head.png') no-repeat;
|
||||||
height: 96px;
|
height: 88px;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
h1{
|
|
||||||
font-size: 32px;
|
|
||||||
margin-bottom: 36px;
|
|
||||||
color: #0ee8e4;
|
|
||||||
letter-spacing: 8px;
|
|
||||||
}
|
|
||||||
.firm{
|
|
||||||
position: absolute;
|
|
||||||
top: 45px;
|
|
||||||
left: 325px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.datetime {
|
|
||||||
position: absolute;
|
|
||||||
top: 45px;
|
|
||||||
right: 240px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
.screen-btn{
|
|
||||||
color: #00fff0;
|
|
||||||
font-size: 32px;
|
|
||||||
position: absolute;
|
|
||||||
right: 32px;
|
|
||||||
top:28px
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,35 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
filename: ISRAChart.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-12-12 09:05:25
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="isra-chart"></div>
|
<div class="isra-chart"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ISRAChart',
|
name: 'ISRAChart',
|
||||||
mixins: [resize],
|
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
|
||||||
chartData: [],
|
|
||||||
option: {
|
option: {
|
||||||
|
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
legend: {
|
|
||||||
bottom: '3%',
|
|
||||||
left: 'center',
|
|
||||||
icon: 'circle',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
title: {
|
||||||
text: 0,
|
text: 11234,
|
||||||
subtext: '总数',
|
subtext: '总数',
|
||||||
top: '43%',
|
top: '43%',
|
||||||
left: '49%',
|
left: '49%',
|
||||||
@ -41,10 +37,177 @@ export default {
|
|||||||
},
|
},
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: '#fff00',
|
color: '#fff7',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: []
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['60%', '85%'],
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'outside',
|
||||||
|
formatter: ({ dataIndex, percent }) => {
|
||||||
|
// console.log(
|
||||||
|
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
|
||||||
|
// percent
|
||||||
|
// );
|
||||||
|
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
||||||
|
return `{${styleName}|${percent}%}`;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: '#2760ff',
|
||||||
|
fontSize: 18,
|
||||||
|
borderWidth: 0,
|
||||||
|
textBorderWidth: 0,
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
color: '#518eec',
|
||||||
|
fontSize: 18,
|
||||||
|
borderWidth: 0,
|
||||||
|
textBorderWidth: 0,
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
color: '#0ee8e4',
|
||||||
|
fontSize: 18,
|
||||||
|
borderWidth: 0,
|
||||||
|
textBorderWidth: 0,
|
||||||
|
},
|
||||||
|
d: {
|
||||||
|
color: '#ddb523',
|
||||||
|
fontSize: 18,
|
||||||
|
borderWidth: 0,
|
||||||
|
textBorderWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 12,
|
||||||
|
// borderColor: 'transparent',
|
||||||
|
// borderWidth: 20
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1048,
|
||||||
|
name: '缺陷1',
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 1,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#2760ff', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// offset: 0.6,
|
||||||
|
// color: 'transparent', // 80% 处的颜色
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#2760ff33', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 735,
|
||||||
|
name: '缺陷2',
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#518eec', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// offset: 0.6,
|
||||||
|
// color: 'transparent', // 80% 处的颜色
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#518eec33', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 580,
|
||||||
|
name: '缺陷3',
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0ee8e4', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// offset: 0.6,
|
||||||
|
// color: 'transparent', // 80% 处的颜色
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#0ee8e433', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 484,
|
||||||
|
name: '缺陷4',
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#ddb523', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// offset: 0.6,
|
||||||
|
// color: 'transparent', // 70% 处的颜色
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ddb52333', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -52,83 +215,14 @@ export default {
|
|||||||
this.initChart();
|
this.initChart();
|
||||||
},
|
},
|
||||||
activated() {
|
activated() {
|
||||||
|
// this.initChart();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
israChartMsg() {
|
|
||||||
return this.$store.state.websocket.israKiln
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
israChartMsg: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.chartData = newVal
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(this.$el);
|
||||||
this.chart.setOption(this.option);
|
this.chart.setOption(this.option);
|
||||||
},
|
},
|
||||||
updateChart() {
|
|
||||||
console.log('update')
|
|
||||||
let num = 0
|
|
||||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
|
||||||
num+=i.num
|
|
||||||
})
|
|
||||||
this.chart.setOption({
|
|
||||||
title:{
|
|
||||||
text: num,
|
|
||||||
subtext: '总数',
|
|
||||||
top: '43%',
|
|
||||||
left: '49%',
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 32,
|
|
||||||
lineHeight: 16,
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 20,
|
|
||||||
color: '#fff00',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series:[{
|
|
||||||
name: 'ISRA缺陷检测',
|
|
||||||
type: 'pie',
|
|
||||||
center: ['50%', '40%'],
|
|
||||||
radius: ['45%', '70%'],
|
|
||||||
avoidLabelOverlap: true,
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 12
|
|
||||||
},
|
|
||||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
|
||||||
name:item.name,
|
|
||||||
value: item.num,
|
|
||||||
itemStyle:{
|
|
||||||
color:{
|
|
||||||
type: 'linear',
|
|
||||||
x: 1,
|
|
||||||
y: 1,
|
|
||||||
x2: 0,
|
|
||||||
y2: 0,
|
|
||||||
global: false,
|
|
||||||
colorStops:[
|
|
||||||
{offset: 0,color: this.colors[index%4]},
|
|
||||||
{offset: 1,color: this.colors[index%4]+'33'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}))}]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,196 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="num-rate-chart"></div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import resize from './../mixins/resize'
|
|
||||||
export default {
|
|
||||||
name: 'NumRateChart',
|
|
||||||
mixins: [resize],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
productline() {
|
|
||||||
return this.$store.state.websocket.productline
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
productline: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
if (newVal === oldVal) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$el.addEventListener('resize', () => {
|
|
||||||
console.log('resziing.....');
|
|
||||||
});
|
|
||||||
this.updateChart()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateChart() {
|
|
||||||
if (
|
|
||||||
this.chart !== null &&
|
|
||||||
this.chart !== '' &&
|
|
||||||
this.chart !== undefined
|
|
||||||
) {
|
|
||||||
this.chart.dispose()
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
let xData = []
|
|
||||||
let outputNum = []
|
|
||||||
let passRate = []
|
|
||||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
|
||||||
xData.push(item.lineName)
|
|
||||||
outputNum.push(item.outputNum)
|
|
||||||
passRate.push(item.passRate*100)
|
|
||||||
})
|
|
||||||
var option = {
|
|
||||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
className: "num-rate-chart-tooltip"
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['产线产量', '合格率'],
|
|
||||||
textStyle: {
|
|
||||||
color: "#DFF1FE",
|
|
||||||
fontSize: 12,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '产量/片',
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{value}'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259a0",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '良品率',
|
|
||||||
axisLabel: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{value} %'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#213259a0",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '产线产量',
|
|
||||||
type: 'bar',
|
|
||||||
tooltip: {
|
|
||||||
valueFormatter: function (value) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
barWidth: 12,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#5CB7FF' },
|
|
||||||
{ offset: 1, color: '#364BFE' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
data: outputNum
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '合格率',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
tooltip: {
|
|
||||||
valueFormatter: function (value) {
|
|
||||||
return value + '%';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#FFD160'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#FFCB59' + "40" },
|
|
||||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
|
||||||
{ offset: 1, color: '#FFCB59' + "00" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
data: passRate
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
option && this.chart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.num-rate-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.num-rate-chart-tooltip {
|
|
||||||
background: #0a2b4f77 !important;
|
|
||||||
border: none !important;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
}
|
|
||||||
.num-rate-chart-tooltip * {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="scroll-board-container">
|
|
||||||
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ScrollBoard',
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
width:{
|
|
||||||
type: String,
|
|
||||||
default: '600px'
|
|
||||||
},
|
|
||||||
height:{
|
|
||||||
type: String,
|
|
||||||
default: '380px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
.scroll-board-container {
|
|
||||||
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
|
|
||||||
border-right: 1px solid rgba(13, 23, 40, 1);
|
|
||||||
}
|
|
||||||
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -11,7 +11,7 @@
|
|||||||
class="btn"
|
class="btn"
|
||||||
v-for="opt in options"
|
v-for="opt in options"
|
||||||
:key="opt"
|
:key="opt"
|
||||||
@click="clickBtn(opt)"
|
@click="active = opt"
|
||||||
:class="active == opt ? 'btn-active' : ''">
|
:class="active == opt ? 'btn-active' : ''">
|
||||||
{{ opt }}
|
{{ opt }}
|
||||||
</button>
|
</button>
|
||||||
@ -22,19 +22,14 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'SelectorBtnGroup',
|
name: 'SelectorBtnGroup',
|
||||||
components: {},
|
components: {},
|
||||||
props: ['options', 'active'],
|
props: ['options'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// active: this.options[0] || 'default'
|
active: this.options[0] || 'default'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {},
|
||||||
clickBtn(opt) {
|
|
||||||
// this.active = opt
|
|
||||||
this.$emit('emitFun', opt)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ export default {
|
|||||||
.switcher {
|
.switcher {
|
||||||
:deep(.el-switch__core) {
|
:deep(.el-switch__core) {
|
||||||
border: none;
|
border: none;
|
||||||
background-color:rgba(3, 35, 60, 1);
|
background-color: #213d566b;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: #02457e;
|
background-color: #02457e;
|
||||||
@ -46,7 +46,7 @@ export default {
|
|||||||
:deep(.is-checked) {
|
:deep(.is-checked) {
|
||||||
.el-switch__core {
|
.el-switch__core {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: rgba(180, 255, 252, 0.71);
|
background-color: #b4fffc;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: #08d8cd;
|
background-color: #08d8cd;
|
||||||
|
@ -1,41 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="bottom-two"
|
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
|
||||||
<div class="left-side" style="flex: 1">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 462px;
|
|
||||||
">
|
|
||||||
<EnergyMonitoring />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-side" style="flex: 1">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 462px;
|
|
||||||
">
|
|
||||||
<NumRate />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import NumRate from './NumRate';
|
|
||||||
import EnergyMonitoring from './EnergyMonitoring';
|
|
||||||
export default {
|
|
||||||
name: 'BottomTwo',
|
|
||||||
components: { NumRate, EnergyMonitoring },
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="各工序缺陷汇总" size="small" style="">
|
|
||||||
<div style="padding: 5px 10px;">
|
|
||||||
<ScrollBoard :config = "config" width='575px' height='380px'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container.vue';
|
|
||||||
import ScrollBoard from '../components/ScrollBoard'
|
|
||||||
export default {
|
|
||||||
name: 'DefectSum',
|
|
||||||
components: { Container, ScrollBoard },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
||||||
columnWidth: [60],
|
|
||||||
align: ['center'],
|
|
||||||
data: [
|
|
||||||
[1, '产线1', '行1列3', '', ''],
|
|
||||||
[2, '产线2', '行2列3', '', ''],
|
|
||||||
[3, '产线3', '行3列3', '', ''],
|
|
||||||
[4, '产线4', '行4列3', '', ''],
|
|
||||||
[5, '产线5', '行5列3', '', ''],
|
|
||||||
[6, '产线6', '行6列3', '', ''],
|
|
||||||
[7, '产线7', '行7列3', '', ''],
|
|
||||||
[8, '产线8', '行8列3', '', ''],
|
|
||||||
[9, '产线9', '行9列3', '', ''],
|
|
||||||
[10, '产线10', '行10列3', '', '']
|
|
||||||
],
|
|
||||||
rowNum: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="能源监控" size="small" style="">
|
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
|
||||||
<EnergeMonitoringChart/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container.vue';
|
|
||||||
import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
|
|
||||||
export default {
|
|
||||||
name: 'EnergyMonitoring',
|
|
||||||
components: { Container, EnergeMonitoringChart },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.timeToggle {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="设备报警" size="small" style="">
|
|
||||||
<div style="padding: 5px 10px;">
|
|
||||||
<ScrollBoard :config = "config" width='575px' height='380px'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container.vue';
|
|
||||||
import ScrollBoard from '../components/ScrollBoard'
|
|
||||||
export default {
|
|
||||||
name: 'EqAlarm',
|
|
||||||
components: { Container, ScrollBoard },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
||||||
columnWidth: [60],
|
|
||||||
align: ['center'],
|
|
||||||
data: [
|
|
||||||
[1, '设备1', '行1列3', '', ''],
|
|
||||||
[2, '设备2', '行2列3', '', ''],
|
|
||||||
[3, '设备3', '行3列3', '', ''],
|
|
||||||
[4, '设备4', '行4列3', '', ''],
|
|
||||||
[5, '设备5', '行5列3', '', ''],
|
|
||||||
[6, '设备6', '行6列3', '', ''],
|
|
||||||
[7, '设备7', '行7列3', '', ''],
|
|
||||||
[8, '设备8', '行8列3', '', ''],
|
|
||||||
[9, '设备9', '行9列3', '', ''],
|
|
||||||
[10, '设备10', '行10列3', '', '']
|
|
||||||
],
|
|
||||||
rowNum: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="产线产量及良品率" size="small" style="">
|
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
|
||||||
<NumRateChart />
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container';
|
|
||||||
import NumRateChart from '../components/NumRateChart';
|
|
||||||
export default {
|
|
||||||
name: 'NumRate',
|
|
||||||
components: { Container, NumRateChart },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.timeToggle {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="top-three"
|
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
|
|
||||||
<div class="left-side" style="flex: 1;">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 462px;
|
|
||||||
">
|
|
||||||
<EqAlarm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="middle-side" style="flex: 1">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 462px;
|
|
||||||
">
|
|
||||||
<DefectSum />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="righe-side" style="flex: 1">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 462px;
|
|
||||||
">
|
|
||||||
<WorkOrderMonitoring />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
|
||||||
import EqAlarm from './EqAlarm'
|
|
||||||
import DefectSum from './DefectSum'
|
|
||||||
export default {
|
|
||||||
name: 'TopThree',
|
|
||||||
components: { EqAlarm, DefectSum, WorkOrderMonitoring },
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="工单监控" size="small" style="">
|
|
||||||
<div style="padding: 5px 10px;">
|
|
||||||
<ScrollBoard :config = "config" width='575px' height='380px'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container.vue';
|
|
||||||
import ScrollBoard from '../components/ScrollBoard'
|
|
||||||
export default {
|
|
||||||
name: 'WorkOrderMonitoring',
|
|
||||||
components: { Container, ScrollBoard },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
|
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
||||||
columnWidth: [60],
|
|
||||||
align: ['center'],
|
|
||||||
data: [
|
|
||||||
[1, '设备1', '行1列3', '', '','','',''],
|
|
||||||
[2, '设备2', '行2列3', '', '','','',''],
|
|
||||||
[3, '设备3', '行3列3', '', '','','',''],
|
|
||||||
[4, '设备4', '行4列3', '', '','','',''],
|
|
||||||
[5, '设备5', '行5列3', '', '','','',''],
|
|
||||||
[6, '设备6', '行6列3', '', '','','',''],
|
|
||||||
[7, '设备7', '行7列3', '', '','','',''],
|
|
||||||
[8, '设备8', '行8列3', '', '','','',''],
|
|
||||||
[9, '设备9', '行9列3', '', '','','',''],
|
|
||||||
[10, '设备10', '行10列3', '', '','','','']
|
|
||||||
],
|
|
||||||
rowNum: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,156 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
|
|
||||||
<div
|
|
||||||
id='deepProcessingContainer'
|
|
||||||
ref='deepProcessingContainer'
|
|
||||||
class="deepProcessingBoard"
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: left top;
|
|
||||||
font-size: 16px;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
"
|
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
|
|
||||||
<div
|
|
||||||
class="main-body"
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 462px 462px;
|
|
||||||
">
|
|
||||||
<TopThree />
|
|
||||||
<BottomTwo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div
|
|
||||||
class="main-body"
|
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
|
||||||
<div class="left-side" style="flex: 1">
|
|
||||||
<TopThree />
|
|
||||||
</div>
|
|
||||||
<div class="middle-side" style="flex: 1">
|
|
||||||
<BottomTwo />
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import KHeader from '../components/Header';
|
|
||||||
import TopThree from './TopThree';
|
|
||||||
import BottomTwo from './BottomTwo';
|
|
||||||
import screenfull from 'screenfull'
|
|
||||||
import { debounce } from '@/utils/debounce'
|
|
||||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'deepProcessingBoard',
|
|
||||||
components: {
|
|
||||||
KHeader,
|
|
||||||
TopThree,
|
|
||||||
BottomTwo
|
|
||||||
},
|
|
||||||
// provide() {
|
|
||||||
// return {
|
|
||||||
// resizeChart: null,
|
|
||||||
// };
|
|
||||||
// },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isFullScreen: false,
|
|
||||||
scaleNum: 0.8
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
this.destroy()
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.boxReset = debounce(() => {
|
|
||||||
this.resetSize()
|
|
||||||
}, 300)
|
|
||||||
this.boxReset()
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.boxReset()
|
|
||||||
})
|
|
||||||
// closeWebsocket()
|
|
||||||
// getDcsMsg()
|
|
||||||
// getMesMsg()
|
|
||||||
console.log('mounted...........')
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
console.log('destroyed...........')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.on('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.off('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 全屏
|
|
||||||
screenfullChange() {
|
|
||||||
if (!screenfull.isEnabled) {
|
|
||||||
this.$message({
|
|
||||||
message: 'you browser can not work',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
screenfull.toggle(this.$refs.deepProcessingContainerB)
|
|
||||||
},
|
|
||||||
resetSize() {
|
|
||||||
let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
|
|
||||||
let rw = parseFloat(window.innerWidth)
|
|
||||||
let rh = parseFloat(window.innerHeight)
|
|
||||||
let bw = parseFloat(deepProcessingContainer.style.width)
|
|
||||||
let bh = parseFloat(deepProcessingContainer.style.height)
|
|
||||||
let wx = 0
|
|
||||||
let hx = 0
|
|
||||||
if (screenfull.isFullscreen) {
|
|
||||||
console.log('全屏')
|
|
||||||
wx = rw / bw
|
|
||||||
hx = rh / bh
|
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
|
||||||
wx = (rw-264) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}else{
|
|
||||||
wx = (rw-78) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.scaleNum = wx
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.deepProcessingBoard {
|
|
||||||
background: url(../assets/bg.png) no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 0 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -12,13 +12,13 @@
|
|||||||
<div class="" style="flex: 2; padding: 8px">
|
<div class="" style="flex: 2; padding: 8px">
|
||||||
<div
|
<div
|
||||||
class="header-line"
|
class="header-line"
|
||||||
style="margin: 8px 0 16px; display: flex; align-items: center">
|
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||||
能耗趋势图
|
烟气趋势图
|
||||||
</h2>
|
</h2>
|
||||||
<!-- <Switcher /> -->
|
<Switcher />
|
||||||
<div>
|
<div>
|
||||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
<span class="lgd lgd-total">总量</span>
|
||||||
<!-- <span class="lgd lgd-day">白班</span>
|
<!-- <span class="lgd lgd-day">白班</span>
|
||||||
<span class="lgd lgd-night">夜班</span> -->
|
<span class="lgd lgd-night">夜班</span> -->
|
||||||
</div>
|
</div>
|
||||||
@ -31,24 +31,24 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
|
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
|
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
<div class="chart" style="height: 150px; margin-top: 8px;">
|
||||||
<GasChart :chartType='chartType' :chartTime='chartTime'/>
|
<GasChart />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
import SplitLine from '../components/line';
|
import SplitLine from '../components/line';
|
||||||
import Switcher from '../components/Switcher';
|
import Switcher from '../components/Switcher.vue';
|
||||||
import EnergeTop from './EnergeTop';
|
import EnergeTop from './EnergeTop.vue';
|
||||||
import GasChart from '../components/GasChart.vue';
|
import GasChart from '../components/GasChart.vue';
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'EnergeCost',
|
name: 'EnergeCost',
|
||||||
components: {
|
components: {
|
||||||
@ -62,46 +62,10 @@ export default {
|
|||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
chartType:'电耗能',
|
|
||||||
chartTime:'周'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
gasInfoMsg() {
|
|
||||||
return this.$store.state.websocket.gasInfo
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 切换能源
|
|
||||||
toggleType(val) {
|
|
||||||
console.log('能源' + val)
|
|
||||||
this.chartType = val
|
|
||||||
// if (val === '天然气I' || val === '天然气II') {
|
|
||||||
// if (this.chartTime === '周') {
|
|
||||||
// this.chartType = val
|
|
||||||
// } else {
|
|
||||||
// this.$message.warning('暂无数据')
|
|
||||||
// }
|
|
||||||
// }else {
|
|
||||||
// this.chartType = val
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
// 切换时间
|
|
||||||
toggleDate(val) {
|
|
||||||
console.log('时间' + val)
|
|
||||||
this.chartTime = val
|
|
||||||
// if (val === '月' || val === '年') {
|
|
||||||
// if (this.chartType === '电耗能') {
|
|
||||||
// this.chartTime = val
|
|
||||||
// } else {
|
|
||||||
// this.$message.warning('暂无数据')
|
|
||||||
// }
|
|
||||||
// }else{
|
|
||||||
// this.chartTime = val
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -15,7 +15,6 @@
|
|||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin-bottom: 6px;
|
|
||||||
">
|
">
|
||||||
<ShadowRect
|
<ShadowRect
|
||||||
style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
|
style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
|
||||||
@ -23,7 +22,8 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
text-align: center;
|
text-align: right;
|
||||||
|
padding-right: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
">
|
">
|
||||||
余热发电
|
余热发电
|
||||||
@ -32,10 +32,11 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
text-align: center;
|
text-align: right;
|
||||||
|
padding-right: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
">
|
">
|
||||||
{{energyInfo.elecQty1}}kwh
|
1023kWh
|
||||||
</span>
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
@ -44,14 +45,14 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
flex: 1;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">水耗量</p>
|
<p style="margin: 0; line-height: inherit">水耗量</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -59,14 +60,14 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
flex: 1;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">天然气I</p>
|
<p style="margin: 0; line-height: inherit">天然气I</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -74,14 +75,14 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
flex: 1;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">电耗量</p>
|
<p style="margin: 0; line-height: inherit">电耗量</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -89,14 +90,14 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
flex: 1;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">天然气II</p>
|
<p style="margin: 0; line-height: inherit">天然气II</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -111,14 +112,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
sumGasInfo(){
|
|
||||||
return this.$store.state.websocket.sumGasInfo
|
|
||||||
},
|
|
||||||
energyInfo() {
|
|
||||||
return this.$store.state.websocket.energyInfo
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -7,32 +7,32 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="风机运行频率" size="middle" style="">
|
<Container name="风机运行频率" size="middle" style="">
|
||||||
<!-- <div class="" style="position: absolute; top: 26px; left: 220px">
|
<div class="" style="position: absolute; top: 18px; left: 180px">
|
||||||
<Switcher />
|
<Switcher />
|
||||||
</div> -->
|
</div>
|
||||||
<div
|
<div
|
||||||
class="absolute"
|
class="absolute"
|
||||||
style="
|
style="
|
||||||
padding: 5px 12px;
|
padding: 12px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-auto-rows: auto;
|
grid-auto-rows: auto;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
">
|
">
|
||||||
<ShadowRect v-for="(value, key, i) in fanFrequencyInfo" :key="i" :rounded="false">
|
<ShadowRect v-for="n in 14" :key="n" :rounded="false">
|
||||||
<span
|
<span
|
||||||
style="
|
style="
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
line-height: 1.15;
|
line-height: 1.24;
|
||||||
flex: 3.5;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
">
|
">
|
||||||
{{ key }}:
|
{{ n }}#风机
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 20px; line-height: 1.15; flex: 1">
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">
|
||||||
{{ value }}Hz
|
{{ Math.floor(Math.random() * 100) }}Hz
|
||||||
</span>
|
</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
@ -42,24 +42,16 @@
|
|||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
import Switcher from '../components/Switcher';
|
import Switcher from '../components/Switcher.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'FanSequence',
|
name: 'FanSequence',
|
||||||
components: { Container, ShadowRect, Switcher },
|
components: { Container, ShadowRect, Switcher },
|
||||||
computed: {
|
|
||||||
fanFrequencyInfo() {
|
|
||||||
return this.$store.state.websocket.fanFrequencyInfo
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
mounted() {
|
computed: {},
|
||||||
|
methods: {},
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,3 +1,10 @@
|
|||||||
|
<!--
|
||||||
|
filename: GasHandle.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-12-11 09:02:40
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="gas-handle" style="flex: 2">
|
<div class="gas-handle" style="flex: 2">
|
||||||
<Container name="烟气处理" size="large" style="">
|
<Container name="烟气处理" size="large" style="">
|
||||||
@ -14,21 +21,21 @@
|
|||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
<span
|
<span
|
||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
flex: 1.2;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 1px;
|
||||||
">
|
">
|
||||||
氧气含量
|
氧气含量
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
flex: 1.2;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -38,13 +45,13 @@
|
|||||||
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
||||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
flex: 1.2;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -54,37 +61,38 @@
|
|||||||
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
||||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
<span
|
<div
|
||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
line-height: 1.24;
|
line-height: 1.5;
|
||||||
flex: 1.2;
|
flex: 1.2;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
颗粒物浓度
|
<p style="margin: 0; line-height: inherit">二氧化氮</p>
|
||||||
</span>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
|
</div>
|
||||||
|
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
<KilnLine :horizontal="true" />
|
<KilnLine :horizontal="true" />
|
||||||
<div class="" style="flex: 2; padding: 8px">
|
<div class="" style="flex: 2; padding: 8px">
|
||||||
<div
|
<div
|
||||||
class="header-line"
|
class="header-line"
|
||||||
style="margin-bottom: 10px; display: flex; align-items: center">
|
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||||
<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
|
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||||
烟气趋势图
|
烟气趋势图
|
||||||
</h2>
|
</h2>
|
||||||
<!-- <Switcher /> -->
|
<Switcher />
|
||||||
<div>
|
<div>
|
||||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
<span class="lgd lgd-total">总量</span>
|
||||||
<!-- <span class="lgd lgd-day">白班</span>
|
<span class="lgd lgd-day">白班</span>
|
||||||
<span class="lgd lgd-night">夜班</span> -->
|
<span class="lgd lgd-night">夜班</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -95,11 +103,11 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
<div class="chart" style="height: 220px">
|
||||||
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
|
<GasChart />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
@ -107,12 +115,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
import KilnLine from '../components/line';
|
import KilnLine from '../components/line';
|
||||||
import Switcher from '../components/Switcher';
|
import Switcher from '../components/Switcher.vue';
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||||
import FlueGas from '../components/FlueGas';
|
import GasChart from '../components/GasChart.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasHandle',
|
name: 'GasHandle',
|
||||||
@ -122,32 +130,14 @@ export default {
|
|||||||
KilnLine,
|
KilnLine,
|
||||||
Switcher,
|
Switcher,
|
||||||
SelectorBtnGroup,
|
SelectorBtnGroup,
|
||||||
FlueGas,
|
GasChart,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
chartType:'氧气含量',
|
|
||||||
chartTime:'日'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
exhaustGasInfo() {
|
|
||||||
return this.$store.state.websocket.exhaustGasInfo
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 烟气
|
|
||||||
toggleType(val) {
|
|
||||||
console.log('烟气' + val)
|
|
||||||
this.chartType = val
|
|
||||||
},
|
|
||||||
// 切换时间
|
|
||||||
toggleDate(val) {
|
|
||||||
console.log('时间' + val)
|
|
||||||
this.chartTime = val
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -7,10 +7,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="ISRA缺陷检测" size="middle" style="">
|
<Container name="ISRA缺陷检测" size="middle" style="">
|
||||||
<ISRAChart />
|
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||||
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
|
||||||
<div class="f" style="flex: 9;">
|
<div class="f" style="flex: 9;">
|
||||||
|
<ISRAChart />
|
||||||
</div>
|
</div>
|
||||||
<ul
|
<ul
|
||||||
class="legend"
|
class="legend"
|
||||||
@ -28,12 +27,12 @@
|
|||||||
<li class="fault-3">缺陷3</li>
|
<li class="fault-3">缺陷3</li>
|
||||||
<li class="fault-4">缺陷4</li>
|
<li class="fault-4">缺陷4</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div> -->
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
import ISRAChart from '../components/ISRAChart.vue';
|
import ISRAChart from '../components/ISRAChart.vue';
|
||||||
|
|
||||||
|
@ -17,37 +17,22 @@
|
|||||||
grid-auto-rows: auto;
|
grid-auto-rows: auto;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
">
|
">
|
||||||
<ShadowRect :rounded="false">
|
<ShadowRect v-for="info in kilnInfo" :key="info.name" :rounded="false">
|
||||||
<span class="kiln-info-item">窑炉压力:</span>
|
<span
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.kilnPressure }}</span>
|
style="
|
||||||
</ShadowRect>
|
font-size: 16px;
|
||||||
<ShadowRect :rounded="false">
|
line-height: 1.45;
|
||||||
<span class="kiln-info-item">循环水温度:</span>
|
flex: 1.2;
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterTemp }}</span>
|
text-align: right;
|
||||||
</ShadowRect>
|
padding-right: 8px;
|
||||||
<ShadowRect :rounded="false">
|
letter-spacing: 1px;
|
||||||
<span class="kiln-info-item">循环水流量:</span>
|
">
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterFlow }}</span>
|
{{ info.name }}
|
||||||
</ShadowRect>
|
</span>
|
||||||
<ShadowRect :rounded="false">
|
<span style="font-size: 16px; line-height: 1.45; flex: 1">
|
||||||
<span class="kiln-info-item">循环水压力:</span>
|
{{ info.value }}
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterPressure }}</span>
|
<!-- {{ Math.floor(Math.random() * 100) }}Hz -->
|
||||||
</ShadowRect>
|
</span>
|
||||||
<ShadowRect :rounded="false">
|
|
||||||
<span class="kiln-info-item">助燃风压力:</span>
|
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.combustionAirPressure }}</span>
|
|
||||||
</ShadowRect>
|
|
||||||
<ShadowRect :rounded="false">
|
|
||||||
<span class="kiln-info-item">碹顶加权温度:</span>
|
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.topTemp }}</span>
|
|
||||||
</ShadowRect>
|
|
||||||
<ShadowRect :rounded="false">
|
|
||||||
<span class="kiln-info-item">压缩气压力:</span>
|
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.compressedAirPressure }}</span>
|
|
||||||
</ShadowRect>
|
|
||||||
<ShadowRect :rounded="false">
|
|
||||||
<span class="kiln-info-item">熔化加权温度:</span>
|
|
||||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.meltTemp }}</span>
|
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
@ -63,26 +48,24 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
kilnInfo: [
|
||||||
|
{ name: '窑炉压力', value: '83Kpa' },
|
||||||
|
{ name: '循环水温度', value: '53℃' },
|
||||||
|
{ name: '循环水流量', value: '23m³/h' },
|
||||||
|
{ name: '循环水压力', value: '33Kpa' },
|
||||||
|
{ name: '助燃风压力', value: '12Kpa' },
|
||||||
|
{ name: '碹顶加权温度', value: '32℃' },
|
||||||
|
{ name: '压缩气压力', value: '83Kpa' },
|
||||||
|
{ name: '融化加权温度', value: '123℃' },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
kilnInfoMsg() {
|
|
||||||
return this.$store.state.websocket.kilnInfo
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.kiln-info {
|
.kiln-info {
|
||||||
.kiln-info-item {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.7;
|
|
||||||
flex: 1.5;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 8px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-template-rows: 462px 462px;
|
grid-template-rows: 1fr 1fr;
|
||||||
">
|
">
|
||||||
<MaterialCost />
|
<MaterialCost />
|
||||||
<IsraCheck />
|
<IsraCheck />
|
||||||
@ -25,7 +25,7 @@
|
|||||||
import MaterialCost from './MaterialCost.vue';
|
import MaterialCost from './MaterialCost.vue';
|
||||||
import FanSequence from './FanSequence.vue';
|
import FanSequence from './FanSequence.vue';
|
||||||
import IsraCheck from './IsraCheck.vue';
|
import IsraCheck from './IsraCheck.vue';
|
||||||
import EnergeCost from './EnergeCost';
|
import EnergeCost from './EnergeCost.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'LeftFour',
|
name: 'LeftFour',
|
||||||
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
||||||
|
@ -7,71 +7,41 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container name="原料用量统计" size="middle" style="">
|
<Container name="原料用量统计" size="middle" style="">
|
||||||
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
|
<div
|
||||||
<div
|
class="absolute"
|
||||||
class="absolute"
|
style="
|
||||||
style="
|
padding: 12px;
|
||||||
flex:3;
|
display: grid;
|
||||||
padding: 12px 12px 0 12px;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
display: grid;
|
grid-auto-rows: auto;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
gap: 8px;
|
||||||
grid-auto-rows: repeat(4, 1fr);
|
">
|
||||||
gap: 8px;
|
<ShadowRect v-for="n in 9" :key="n" :rounded="false">
|
||||||
">
|
<div
|
||||||
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
|
class="material"
|
||||||
<div
|
style="
|
||||||
class="material"
|
flex: 1;
|
||||||
style="
|
padding: 6px;
|
||||||
flex: 1;
|
display: flex;
|
||||||
padding-bottom: 3px;
|
flex-direction: column;
|
||||||
display: flex;
|
gap: 4px;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 4px;
|
justify-content: center;
|
||||||
align-items: center;
|
">
|
||||||
justify-content: center;
|
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
|
||||||
">
|
234
|
||||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
</span>
|
||||||
{{item.materialUsed}}
|
<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
|
||||||
</span>
|
- 原料1/吨 -
|
||||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
</span>
|
||||||
- {{item.materialName}}/kg-
|
</div>
|
||||||
</span>
|
</ShadowRect>
|
||||||
</div>
|
|
||||||
</ShadowRect>
|
|
||||||
</div>
|
|
||||||
<div style="flex:1;
|
|
||||||
padding: 0 12px 12px 12px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 8px;">
|
|
||||||
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
|
|
||||||
<div
|
|
||||||
class="material"
|
|
||||||
style="
|
|
||||||
flex: 1;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
|
||||||
{{item.materialUsed}}
|
|
||||||
</span>
|
|
||||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
|
||||||
- {{item.materialName}}/kg-
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</ShadowRect>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'MaterialCost',
|
name: 'MaterialCost',
|
||||||
@ -80,14 +50,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
materialMsg1() {
|
|
||||||
return this.$store.state.websocket.material.slice(0,9)
|
|
||||||
},
|
|
||||||
materialMsg2() {
|
|
||||||
return this.$store.state.websocket.material.slice(9)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -8,22 +8,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="right-two"
|
class="right-two"
|
||||||
style="
|
style="display: flex; gap: 16px; flex-direction: column">
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 320px 605px;
|
|
||||||
">
|
|
||||||
<KilnInfo />
|
<KilnInfo />
|
||||||
<GasHandle />
|
<GasHandle />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container.vue';
|
||||||
import ShadowRect from '../components/ShadowRect.vue';
|
import ShadowRect from '../components/ShadowRect.vue';
|
||||||
import KilnLine from '../components/line';
|
import KilnLine from '../components/line';
|
||||||
import Switcher from '../components/Switcher';
|
import Switcher from '../components/Switcher.vue';
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||||
import KilnInfo from './KilnInfo.vue';
|
import KilnInfo from './KilnInfo.vue';
|
||||||
import GasHandle from './GasHandle.vue';
|
import GasHandle from './GasHandle.vue';
|
||||||
export default {
|
export default {
|
||||||
|
@ -1,141 +1,63 @@
|
|||||||
|
<!--
|
||||||
|
filename: KilnDataBoard.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-12-04 16:51:00
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
<div
|
||||||
|
class="KilnDataBoard"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: -16px;
|
||||||
|
width: calc(100% + 28px);
|
||||||
|
height: calc(100% + 38px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
">
|
||||||
|
<KHeader />
|
||||||
<div
|
<div
|
||||||
id='kilnContainer'
|
class="main-body"
|
||||||
ref='kilnContainer'
|
style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
|
||||||
class="KilnDataBoard"
|
<div class="left-side" style="flex: 2">
|
||||||
style="
|
<LeftFour />
|
||||||
position: absolute;
|
</div>
|
||||||
transform-origin: left top;
|
<div class="right-side" style="flex: 1">
|
||||||
font-size: 16px;
|
<RightTwo />
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
"
|
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
|
|
||||||
<div
|
|
||||||
class="main-body"
|
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
|
||||||
<div class="left-side" style="flex: 2">
|
|
||||||
<LeftFour />
|
|
||||||
</div>
|
|
||||||
<div class="right-side" style="flex: 1">
|
|
||||||
<RightTwo />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import KHeader from '../components/Header';
|
import KHeader from '../components/Header.vue';
|
||||||
import LeftFour from './LeftFour';
|
import LeftFour from './LeftFour.vue';
|
||||||
import RightTwo from './RightTwo.vue';
|
import RightTwo from './RightTwo.vue';
|
||||||
import screenfull from 'screenfull'
|
|
||||||
import { debounce } from '@/utils/debounce'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Kiln',
|
name: 'KilnDataBoard',
|
||||||
components: {
|
components: {
|
||||||
KHeader,
|
KHeader,
|
||||||
LeftFour,
|
LeftFour,
|
||||||
RightTwo,
|
RightTwo,
|
||||||
},
|
},
|
||||||
computed:{
|
|
||||||
sidebarStatus() {
|
|
||||||
return this.$store.state.app.sidebar.opened;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// provide() {
|
// provide() {
|
||||||
// return {
|
// return {
|
||||||
// resizeChart: null,
|
// resizeChart: null,
|
||||||
// };
|
// };
|
||||||
// },
|
// },
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isFullScreen: false,
|
|
||||||
scaleNum: 0.8
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
sidebarStatus() {
|
|
||||||
this.boxReset()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
this.destroy()
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.boxReset = debounce(() => {
|
// this.$el.addEventListener('resize', () => {
|
||||||
this.resetSize()
|
// console.log('resizzzze...')
|
||||||
}, 300)
|
// this.resizeChart = Math.random();
|
||||||
this.boxReset()
|
// });
|
||||||
window.addEventListener('resize', () => {
|
},
|
||||||
this.boxReset()
|
data() {
|
||||||
})
|
return {};
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
|
||||||
},
|
|
||||||
|
|
||||||
init() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.on('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.off('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 全屏
|
|
||||||
screenfullChange() {
|
|
||||||
if (!screenfull.isEnabled) {
|
|
||||||
this.$message({
|
|
||||||
message: 'you browser can not work',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
screenfull.toggle(this.$refs.kilnContainerB)
|
|
||||||
},
|
|
||||||
resetSize() {
|
|
||||||
let kilnContainerBox = document.querySelector('#kilnContainer')
|
|
||||||
let rw = parseFloat(window.innerWidth)
|
|
||||||
let rh = parseFloat(window.innerHeight)
|
|
||||||
let bw = parseFloat(kilnContainerBox.style.width)
|
|
||||||
let bh = parseFloat(kilnContainerBox.style.height)
|
|
||||||
let wx = 0
|
|
||||||
let hx = 0
|
|
||||||
if (screenfull.isFullscreen) {
|
|
||||||
console.log('全屏')
|
|
||||||
wx = rw / bw
|
|
||||||
hx = rh / bh
|
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
|
||||||
wx = (rw-264) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}else{
|
|
||||||
wx = (rw-78) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.scaleNum = wx
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -144,6 +66,5 @@ export default {
|
|||||||
background: url(../assets/bg.png) no-repeat;
|
background: url(../assets/bg.png) no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,55 +0,0 @@
|
|||||||
import { debounce } from '@/utils'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
$_sidebarElm: null,
|
|
||||||
$_resizeHandler: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$_resizeHandler = debounce(() => {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.resize()
|
|
||||||
}
|
|
||||||
}, 100)
|
|
||||||
this.$_initResizeEvent()
|
|
||||||
this.$_initSidebarResizeEvent()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.$_destroyResizeEvent()
|
|
||||||
this.$_destroySidebarResizeEvent()
|
|
||||||
},
|
|
||||||
// to fixed bug when cached by keep-alive
|
|
||||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
|
||||||
activated() {
|
|
||||||
this.$_initResizeEvent()
|
|
||||||
this.$_initSidebarResizeEvent()
|
|
||||||
},
|
|
||||||
deactivated() {
|
|
||||||
this.$_destroyResizeEvent()
|
|
||||||
this.$_destroySidebarResizeEvent()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// use $_ for mixins properties
|
|
||||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
|
||||||
$_initResizeEvent() {
|
|
||||||
window.addEventListener('resize', this.$_resizeHandler)
|
|
||||||
},
|
|
||||||
$_destroyResizeEvent() {
|
|
||||||
window.removeEventListener('resize', this.$_resizeHandler)
|
|
||||||
},
|
|
||||||
$_sidebarResizeHandler(e) {
|
|
||||||
if (e.propertyName === 'width') {
|
|
||||||
this.$_resizeHandler()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$_initSidebarResizeEvent() {
|
|
||||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
|
||||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
|
||||||
},
|
|
||||||
$_destroySidebarResizeEvent() {
|
|
||||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,204 +0,0 @@
|
|||||||
// websocket实例
|
|
||||||
let wsObj = null;
|
|
||||||
// ws连接地址
|
|
||||||
let wsUrl = null;
|
|
||||||
// let userId = null;
|
|
||||||
// 是否执行重连 true/不执行 ; false/执行
|
|
||||||
let lockReconnect = false;
|
|
||||||
// 重连定时器
|
|
||||||
let wsCreateHandler = null;
|
|
||||||
// 连接成功,执行回调函数
|
|
||||||
let messageCallback = null;
|
|
||||||
// 连接失败,执行回调函数
|
|
||||||
let errorCallback = null;
|
|
||||||
// 发送给后台的数据
|
|
||||||
let sendDatas = {};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 发起websocket请求函数
|
|
||||||
* @param {string} url ws连接地址
|
|
||||||
* @param {Object} agentData 传给后台的参数
|
|
||||||
* @param {function} successCallback 接收到ws数据,对数据进行处理的回调函数
|
|
||||||
* @param {function} errCallback ws连接错误的回调函数
|
|
||||||
*/
|
|
||||||
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
|
|
||||||
wsUrl = url;
|
|
||||||
createWebSoket();
|
|
||||||
messageCallback = successCallback;
|
|
||||||
errorCallback = errCallback;
|
|
||||||
sendDatas = agentData;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 手动关闭websocket (这里手动关闭会执行onclose事件)
|
|
||||||
export const closeWebsocket = () => {
|
|
||||||
if (wsObj) {
|
|
||||||
writeToScreen('手动关闭websocket');
|
|
||||||
wsObj.close() // 关闭websocket
|
|
||||||
// wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
|
||||||
// 关闭重连
|
|
||||||
lockReconnect = true;
|
|
||||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
|
||||||
// 关闭心跳检查
|
|
||||||
heartCheck.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建ws函数
|
|
||||||
const createWebSoket = () => {
|
|
||||||
if (typeof (WebSocket) === 'undefined') {
|
|
||||||
writeToScreen("您的浏览器不支持WebSocket,无法获取数据");
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
// const host = window.location.host;
|
|
||||||
// userId = GetQueryString("userId");
|
|
||||||
// wsUrl = "ws://" + host + "/websoket" + userId;
|
|
||||||
|
|
||||||
try {
|
|
||||||
wsObj = new WebSocket(wsUrl);
|
|
||||||
initWsEventHandle();
|
|
||||||
} catch (e) {
|
|
||||||
writeToScreen("连接异常,开始重连");
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const initWsEventHandle = () => {
|
|
||||||
try {
|
|
||||||
// 连接成功
|
|
||||||
wsObj.onopen = (event) => {
|
|
||||||
onWsOpen(event);
|
|
||||||
heartCheck.start();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听服务器端返回的信息
|
|
||||||
wsObj.onmessage = (event) => {
|
|
||||||
onWsMessage(event);
|
|
||||||
heartCheck.start();
|
|
||||||
}
|
|
||||||
|
|
||||||
wsObj.onclose = (event) => {
|
|
||||||
writeToScreen('onclose执行关闭事件');
|
|
||||||
onWsClose(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
wsObj.onerror = (event) => {
|
|
||||||
writeToScreen('onerror执行error事件,开始重连');
|
|
||||||
onWsError(event);
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
writeToScreen('绑定事件没有成功,开始重连');
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onWsOpen = (event) => {
|
|
||||||
writeToScreen('CONNECT');
|
|
||||||
// // 客户端与服务器端通信
|
|
||||||
// wsObj.send('我发送消息给服务端');
|
|
||||||
// 添加状态判断,当为OPEN时,发送消息
|
|
||||||
if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
|
|
||||||
// 发给后端的数据需要字符串化
|
|
||||||
wsObj.send(JSON.stringify(sendDatas));
|
|
||||||
}
|
|
||||||
if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
|
|
||||||
writeToScreen('wsObj.readyState=3, ws连接异常,开始重连');
|
|
||||||
reconnect();
|
|
||||||
errorCallback(event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const onWsMessage = (event) => {
|
|
||||||
const jsonStr = event.data;
|
|
||||||
writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr);
|
|
||||||
messageCallback(jsonStr);
|
|
||||||
}
|
|
||||||
const onWsClose = (event) => {
|
|
||||||
writeToScreen('DISCONNECT');
|
|
||||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
|
||||||
// e.code !== 1000 表示非正常关闭。
|
|
||||||
console.log('onclose event: ', event)
|
|
||||||
if (event && event.code !== 1000) {
|
|
||||||
writeToScreen('非正常关闭');
|
|
||||||
errorCallback(event);
|
|
||||||
// 如果不是手动关闭,这里的重连会执行;如果调用了手动关闭函数,这里重连不会执行
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const onWsError = (event) => {
|
|
||||||
writeToScreen('onWsError: ', event.data);
|
|
||||||
errorCallback(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
const writeToScreen = (massage) => {
|
|
||||||
console.log(massage);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重连函数
|
|
||||||
const reconnect = () => {
|
|
||||||
if (lockReconnect) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
writeToScreen('3秒后重连');
|
|
||||||
lockReconnect = true;
|
|
||||||
// 没连接上会一直重连,设置延迟避免请求过多
|
|
||||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
|
||||||
wsCreateHandler = setTimeout(() => {
|
|
||||||
writeToScreen('重连...' + wsUrl);
|
|
||||||
createWebSoket();
|
|
||||||
lockReconnect = false;
|
|
||||||
writeToScreen('重连完成');
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从浏览器地址中获取对应参数
|
|
||||||
const GetQueryString = (name) => {
|
|
||||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
||||||
// 获取url中 ? 符后的字符串并正则匹配
|
|
||||||
let r = window.location.search.substr(1).match(reg);
|
|
||||||
let context = "";
|
|
||||||
r && (context = r[2]);
|
|
||||||
reg = null;
|
|
||||||
r = null;
|
|
||||||
return context;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 心跳检查(看看websocket是否还在正常连接中)
|
|
||||||
let heartCheck = {
|
|
||||||
timeout: 15000,
|
|
||||||
timeoutObj: null,
|
|
||||||
serverTimeoutObj: null,
|
|
||||||
// 重启
|
|
||||||
reset() {
|
|
||||||
clearTimeout(this.timeoutObj);
|
|
||||||
clearTimeout(this.serverTimeoutObj);
|
|
||||||
this.start();
|
|
||||||
},
|
|
||||||
// 停止
|
|
||||||
stop() {
|
|
||||||
clearTimeout(this.timeoutObj);
|
|
||||||
clearTimeout(this.serverTimeoutObj);
|
|
||||||
},
|
|
||||||
// 开启定时器
|
|
||||||
start() {
|
|
||||||
this.timeoutObj && clearTimeout(this.timeoutObj);
|
|
||||||
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
|
||||||
// 15s之内如果没有收到后台的消息,则认为是连接断开了,需要重连
|
|
||||||
this.timeoutObj = setTimeout(() => {
|
|
||||||
writeToScreen("心跳检查,发送ping到后台");
|
|
||||||
try {
|
|
||||||
const datas = { ping: true };
|
|
||||||
wsObj.send(JSON.stringify(datas));
|
|
||||||
} catch (err) {
|
|
||||||
writeToScreen("发送ping异常");
|
|
||||||
}
|
|
||||||
console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
|
|
||||||
// 内嵌定时器
|
|
||||||
this.serverTimeoutObj = setTimeout(() => {
|
|
||||||
writeToScreen("没有收到后台的数据,重新连接");
|
|
||||||
reconnect();
|
|
||||||
}, this.timeout)
|
|
||||||
}, this.timeout)
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,160 +0,0 @@
|
|||||||
import { connectWebsocket, closeWebsocket } from './websocket'
|
|
||||||
import store from "@/store";
|
|
||||||
|
|
||||||
// 创建dcs链接
|
|
||||||
export const getDcsMsg = () => {
|
|
||||||
const userId = 'dcsmsg' + new Date().getTime()
|
|
||||||
connectWebsocket(
|
|
||||||
// 测试地址
|
|
||||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "FanFrequencyInfo": {
|
|
||||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "KilnInfo": {
|
|
||||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "GasInfo": {
|
|
||||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "SumGasInfo": {
|
|
||||||
store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建mes链接
|
|
||||||
export const getMesMsg = () => {
|
|
||||||
const sj = new Date().getTime()
|
|
||||||
// ISRA
|
|
||||||
// connectWebsocket(
|
|
||||||
// // 测试地址
|
|
||||||
// 'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
|
||||||
// // 传递给后台的数据
|
|
||||||
// '',
|
|
||||||
// // 成功拿到后台返回的数据的回调函数
|
|
||||||
// (data) => {
|
|
||||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
// let msgData = JSON.parse(data)
|
|
||||||
// if (msgData == null) return;
|
|
||||||
// switch (msgData?.type) {
|
|
||||||
// case "israKiln": {
|
|
||||||
// store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// // case "KilnInfo": {
|
|
||||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
|
||||||
// // break;
|
|
||||||
// // }
|
|
||||||
// default:
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // websocket连接失败的回调函数
|
|
||||||
// (err) => {
|
|
||||||
// console.log('失败的回调函数', err)
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
// // 原料 MA
|
|
||||||
// connectWebsocket(
|
|
||||||
// // 测试地址
|
|
||||||
// 'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
|
||||||
// // 传递给后台的数据
|
|
||||||
// '',
|
|
||||||
// // 成功拿到后台返回的数据的回调函数
|
|
||||||
// (data) => {
|
|
||||||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
// let msgData = JSON.parse(data)
|
|
||||||
// if (msgData == null) return;
|
|
||||||
// switch (msgData?.type) {
|
|
||||||
// case "material": {
|
|
||||||
// store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// // case "KilnInfo": {
|
|
||||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
|
||||||
// // break;
|
|
||||||
// // }
|
|
||||||
// default:
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // websocket连接失败的回调函数
|
|
||||||
// (err) => {
|
|
||||||
// console.log('失败的回调函数', err)
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
// 能耗 EN
|
|
||||||
// connectWebsocket(
|
|
||||||
// // 测试地址
|
|
||||||
// 'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+sj,
|
|
||||||
// // 传递给后台的数据
|
|
||||||
// '',
|
|
||||||
// // 成功拿到后台返回的数据的回调函数
|
|
||||||
// (data) => {
|
|
||||||
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
// let msgData = JSON.parse(data)
|
|
||||||
// if (msgData == null) return;
|
|
||||||
// switch (msgData?.type) {
|
|
||||||
// case "EnergyInfo": {
|
|
||||||
// store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// default:
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // websocket连接失败的回调函数
|
|
||||||
// (err) => {
|
|
||||||
// console.log('失败的回调函数', err)
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
// 烟气 GAS
|
|
||||||
connectWebsocket(
|
|
||||||
// 测试地址
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+sj,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "exhaustGas": {
|
|
||||||
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
|
|
||||||
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
|
|
||||||
dayTrend: msgData.dayTrend,
|
|
||||||
weekTrend: msgData.weekTrend,
|
|
||||||
monthTrend: msgData.monthTrend,
|
|
||||||
yearTrend: msgData.yearTrend,
|
|
||||||
}})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="产线当日缺陷分类" size="small">
|
|
||||||
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
|
||||||
<DefectClassChart :chartType='chartType'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container';
|
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
|
||||||
import DefectClassChart from '../components/DefectClassChart';
|
|
||||||
export default {
|
|
||||||
name: 'DefectClass',
|
|
||||||
components: { Container, SelectorBtnGroup, DefectClassChart },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartType:'Y61'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 切换产线
|
|
||||||
toggleType(val) {
|
|
||||||
console.log('产线' + val)
|
|
||||||
this.chartType = val
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.typeToggle {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="产线缺陷统计" size="small">
|
|
||||||
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
|
||||||
<div class="chart" style="height: 238px; margin-top: 8px;">
|
|
||||||
<DefectChart :chartTime='chartTime'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container';
|
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
|
||||||
import DefectChart from '../components/DefectChart';
|
|
||||||
export default {
|
|
||||||
name: 'DefectStatistics',
|
|
||||||
components: { Container, SelectorBtnGroup, DefectChart },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartTime:'日'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 切换时间
|
|
||||||
toggleDate(val) {
|
|
||||||
console.log('时间' + val)
|
|
||||||
this.chartTime = val
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.timeToggle {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="left-two"
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 308px 616px;
|
|
||||||
">
|
|
||||||
<OrderStatus />
|
|
||||||
<YieldRate />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import OrderStatus from './OrderStatus.vue';
|
|
||||||
import YieldRate from './YieldRate.vue';
|
|
||||||
export default {
|
|
||||||
name: 'LeftFour',
|
|
||||||
components: { OrderStatus, YieldRate },
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="middle-two"
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 605px 320px;
|
|
||||||
">
|
|
||||||
<GasHandle />
|
|
||||||
<DefectStatistics />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import GasHandle from './../kiln/GasHandle';
|
|
||||||
import DefectStatistics from './DefectStatistics';
|
|
||||||
export default {
|
|
||||||
name: 'MiddleFour',
|
|
||||||
components: { GasHandle, DefectStatistics },
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<Container name="订单完成情况" size="small" style="">
|
|
||||||
<div style="padding: 5px 10px;">
|
|
||||||
<ScrollBoard :config = "config" width='575px' height='230px'/>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container'
|
|
||||||
import ScrollBoard from '../components/ScrollBoard'
|
|
||||||
export default {
|
|
||||||
name: 'OrderStatus',
|
|
||||||
components: { Container, ScrollBoard },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['上线时间', '客户名称', '规格','完成度'],
|
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
||||||
// columnWidth: [60],
|
|
||||||
align: ['center'],
|
|
||||||
data: [
|
|
||||||
['2023-12-01', '客户1', '行1列3', ''],
|
|
||||||
['2023-12-01', '客户2', '行2列3', ''],
|
|
||||||
['2023-12-01', '客户3', '行3列3', ''],
|
|
||||||
['2023-12-01', '客户4', '行4列3', ''],
|
|
||||||
['2023-12-01', '客户5', '行5列3', ''],
|
|
||||||
['2023-12-01', '客户6', '行6列3', ''],
|
|
||||||
['2023-12-01', '客户7', '行7列3', ''],
|
|
||||||
['2023-12-01', '客户8', '行8列3', ''],
|
|
||||||
['2023-12-01', '客户9', '行9列3', ''],
|
|
||||||
['2023-12-01', '客户10', '行10列3', '']
|
|
||||||
],
|
|
||||||
rowNum: 6
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="right-two"
|
|
||||||
style="
|
|
||||||
display: grid;
|
|
||||||
gap: 16px;
|
|
||||||
grid-template-rows: 462px 462px;
|
|
||||||
">
|
|
||||||
<EnergeCost />
|
|
||||||
<DefectClass />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import EnergeCost from './../kiln/EnergeCost.vue';
|
|
||||||
import DefectClass from './DefectClass.vue';
|
|
||||||
export default {
|
|
||||||
name: 'RightFour',
|
|
||||||
components: { EnergeCost, DefectClass },
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
@ -1,45 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="flex: 2;" class="aaa">
|
|
||||||
<Container name="本日生产良品率" size="small" style="">
|
|
||||||
<ScrollBoard :config = "config" width='575px' height='300px'/>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Container from '../components/Container';
|
|
||||||
import ScrollBoard from '../components/ScrollBoard'
|
|
||||||
export default {
|
|
||||||
name: 'YieldRate',
|
|
||||||
components: { Container, ScrollBoard },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
config: {
|
|
||||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
|
||||||
columnWidth: [60],
|
|
||||||
align: ['center'],
|
|
||||||
data: [
|
|
||||||
[1, '设备1', '行1列3', '', ''],
|
|
||||||
[2, '设备2', '行2列3', '', ''],
|
|
||||||
[3, '设备3', '行3列3', '', ''],
|
|
||||||
[4, '设备4', '行4列3', '', ''],
|
|
||||||
[5, '设备5', '行5列3', '', ''],
|
|
||||||
[6, '设备6', '行6列3', '', ''],
|
|
||||||
[7, '设备7', '行7列3', '', ''],
|
|
||||||
[8, '设备8', '行8列3', '', ''],
|
|
||||||
[9, '设备9', '行9列3', '', ''],
|
|
||||||
[10, '设备10', '行10列3', '', '']
|
|
||||||
],
|
|
||||||
rowNum: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
</style>
|
|
@ -1,146 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
|
|
||||||
<div
|
|
||||||
id='wholePlantContainer'
|
|
||||||
ref='wholePlantContainer'
|
|
||||||
class="wholePlantBoard"
|
|
||||||
style="
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: 16px 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
"
|
|
||||||
:style="{transform:'scale('+scaleNum+')'}">
|
|
||||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
|
||||||
<div
|
|
||||||
class="main-body"
|
|
||||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
|
||||||
<div class="left-side" style="flex: 1">
|
|
||||||
<LeftTwo />
|
|
||||||
</div>
|
|
||||||
<div class="middle-side" style="flex: 1">
|
|
||||||
<MiddleTwo />
|
|
||||||
</div>
|
|
||||||
<div class="right-side" style="flex: 1">
|
|
||||||
<RightTwo />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import KHeader from '../components/Header';
|
|
||||||
import LeftTwo from './LeftTwo';
|
|
||||||
import MiddleTwo from './MiddleTwo';
|
|
||||||
import RightTwo from './RightTwo';
|
|
||||||
import screenfull from 'screenfull'
|
|
||||||
import { debounce } from '@/utils/debounce'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'wholePlantBoard',
|
|
||||||
components: {
|
|
||||||
KHeader,
|
|
||||||
LeftTwo,
|
|
||||||
MiddleTwo,
|
|
||||||
RightTwo
|
|
||||||
},
|
|
||||||
// provide() {
|
|
||||||
// return {
|
|
||||||
// resizeChart: null,
|
|
||||||
// };
|
|
||||||
// },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isFullScreen: false,
|
|
||||||
scaleNum: 0.8
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
this.destroy()
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.boxReset = debounce(() => {
|
|
||||||
this.resetSize()
|
|
||||||
}, 300)
|
|
||||||
this.boxReset()
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.boxReset()
|
|
||||||
})
|
|
||||||
console.log('mounted...........')
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
console.log('destroyed...........')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.on('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.off('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 全屏
|
|
||||||
screenfullChange() {
|
|
||||||
if (!screenfull.isEnabled) {
|
|
||||||
this.$message({
|
|
||||||
message: 'you browser can not work',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
|
||||||
},
|
|
||||||
resetSize() {
|
|
||||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
|
||||||
let rw = parseFloat(window.innerWidth)
|
|
||||||
let rh = parseFloat(window.innerHeight)
|
|
||||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
|
||||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
|
||||||
let wx = 0
|
|
||||||
let hx = 0
|
|
||||||
if (screenfull.isFullscreen) {
|
|
||||||
console.log('全屏')
|
|
||||||
wx = rw / bw
|
|
||||||
hx = rh / bh
|
|
||||||
console.log(this.scaleNum)
|
|
||||||
}else{
|
|
||||||
console.log('非全屏')
|
|
||||||
console.log(this.$store.state.app.sidebar.opened)
|
|
||||||
if (this.$store.state.app.sidebar.opened) {
|
|
||||||
wx = (rw-264) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}else{
|
|
||||||
wx = (rw-78) / bw
|
|
||||||
hx = (rh-116) / bh
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.scaleNum = wx
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.wholePlantBoard {
|
|
||||||
background: url(../assets/bg.png) no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 0 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -47,7 +47,7 @@
|
|||||||
向世界先进水平挑战,为人类社会文明做贡献
|
向世界先进水平挑战,为人类社会文明做贡献
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- <video
|
<video
|
||||||
src="/static/videos/login.webm"
|
src="/static/videos/login.webm"
|
||||||
muted
|
muted
|
||||||
autoplay
|
autoplay
|
||||||
@ -58,7 +58,7 @@
|
|||||||
top: 28%;
|
top: 28%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
"></video> -->
|
"></video>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表单 -->
|
<!-- 表单 -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
@ -51,10 +51,10 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
// const now = new Date().getTime();
|
const now = new Date();
|
||||||
// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||||
const today = new Date().getTime();
|
const today = new Date().getTime();
|
||||||
const tenminAgo = new Date(today - (10 * 60 * 1000)).getTime();
|
const tenminAgo = today - (10 * 60 * 1000);
|
||||||
return {
|
return {
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
{
|
{
|
||||||
@ -77,7 +77,7 @@ export default {
|
|||||||
dateType: 'datetimerange', // datetimerange
|
dateType: 'datetimerange', // datetimerange
|
||||||
format: 'yyyy-MM-dd HH:mm:ss',
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'timestamp',
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
@ -94,8 +94,8 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
queryParams: {
|
queryParams: {
|
||||||
equipmentId: null,
|
id: null,
|
||||||
recordTime: [parseTime(tenminAgo), parseTime(today)],
|
time: [tenminAgo, today],
|
||||||
},
|
},
|
||||||
tableList: [
|
tableList: [
|
||||||
// {
|
// {
|
||||||
@ -118,7 +118,7 @@ export default {
|
|||||||
beforeRouteEnter(to, from, next) {
|
beforeRouteEnter(to, from, next) {
|
||||||
if (Object.keys(to.params).length > 0) {
|
if (Object.keys(to.params).length > 0) {
|
||||||
next((vm) => {
|
next((vm) => {
|
||||||
vm.$set(vm.queryParams, 'equipmentId', to.params.equipmentId);
|
vm.$set(vm.queryParams, 'id', to.params.equipmentId);
|
||||||
vm.$set(
|
vm.$set(
|
||||||
vm.searchBarFormConfig[0],
|
vm.searchBarFormConfig[0],
|
||||||
'defaultSelect',
|
'defaultSelect',
|
||||||
@ -132,7 +132,7 @@ export default {
|
|||||||
vm.$set(
|
vm.$set(
|
||||||
vm.searchBarFormConfig[2],
|
vm.searchBarFormConfig[2],
|
||||||
'defaultSelect',
|
'defaultSelect',
|
||||||
vm.queryParams.recordTime
|
vm.queryParams.time
|
||||||
);
|
);
|
||||||
vm.handleQuery();
|
vm.handleQuery();
|
||||||
});
|
});
|
||||||
@ -167,7 +167,7 @@ export default {
|
|||||||
},
|
},
|
||||||
beforeRouteLeave(to, from, next) {
|
beforeRouteLeave(to, from, next) {
|
||||||
// clean job
|
// clean job
|
||||||
this.$set(this.queryParams, 'equipmentId', null);
|
this.$set(this.queryParams, 'id', null);
|
||||||
this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
|
this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
|
||||||
this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
|
this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
|
||||||
this.tableList = [];
|
this.tableList = [];
|
||||||
@ -204,7 +204,7 @@ export default {
|
|||||||
props.push({
|
props.push({
|
||||||
label: item.name,
|
label: item.name,
|
||||||
prop: item.name,
|
prop: item.name,
|
||||||
// width: 128,
|
width: 128,
|
||||||
});
|
});
|
||||||
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
||||||
item.maxValue ?? ''
|
item.maxValue ?? ''
|
||||||
@ -280,15 +280,14 @@ export default {
|
|||||||
|
|
||||||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||||
if (timeVal && timeVal.length > 0) {
|
if (timeVal && timeVal.length > 0) {
|
||||||
console.log('nihc ', timeVal)
|
if (timeVal[1] - timeVal[0] <= 10 * 60 * 1000) {
|
||||||
if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 10 * 60 * 1000) {
|
this.queryParams.time = timeVal;
|
||||||
this.queryParams.recordTime = timeVal;
|
|
||||||
await this.handleQuery();
|
await this.handleQuery();
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning('时间范围最大一小时限制!')
|
this.$message.warning('时间范围最大一小时限制!')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.queryParams.recordTime = [];
|
this.queryParams.time = [];
|
||||||
this.$message.warning('时间段必选!')
|
this.$message.warning('时间段必选!')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -170,12 +170,7 @@ export default {
|
|||||||
{ width: 256, prop: 'code', label: '设备编码' },
|
{ width: 256, prop: 'code', label: '设备编码' },
|
||||||
{ prop: 'location', label: '位置' },
|
{ prop: 'location', label: '位置' },
|
||||||
{ prop: 'responsiblePeopleName', label: '负责人' },
|
{ prop: 'responsiblePeopleName', label: '负责人' },
|
||||||
{
|
{ prop: 'dueTime', label: '有效期至' },
|
||||||
prop: 'dueDate',
|
|
||||||
label: '有效期至',
|
|
||||||
filter: (val) =>
|
|
||||||
val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '--',
|
|
||||||
},
|
|
||||||
{ prop: 'remark', label: '备注' },
|
{ prop: 'remark', label: '备注' },
|
||||||
],
|
],
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
@ -255,8 +250,8 @@ export default {
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
datetime: true,
|
datetime: true,
|
||||||
label: '有效期',
|
label: '有效期至',
|
||||||
prop: 'dueDate',
|
prop: 'dueTime',
|
||||||
bind: { clearable: true },
|
bind: { clearable: true },
|
||||||
},
|
},
|
||||||
{},
|
{},
|
||||||
|
@ -195,21 +195,18 @@ export default {
|
|||||||
{ id: 3, name: '特种设备' },
|
{ id: 3, name: '特种设备' },
|
||||||
],
|
],
|
||||||
filterable: true,
|
filterable: true,
|
||||||
defaultSelect: null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: '设备',
|
label: '设备',
|
||||||
placeholder: '请选择设备',
|
placeholder: '请选择设备',
|
||||||
param: 'equipmentId',
|
param: 'equipmentId',
|
||||||
defaultSelect: null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: '计划名称',
|
label: '计划名称',
|
||||||
placeholder: '请选择计划名称',
|
placeholder: '请选择计划名称',
|
||||||
param: 'maintainPlanId',
|
param: 'maintainPlanId',
|
||||||
defaultSelect: null
|
|
||||||
},
|
},
|
||||||
// 开始结束时间
|
// 开始结束时间
|
||||||
{
|
{
|
||||||
@ -223,7 +220,6 @@ export default {
|
|||||||
endPlaceholder: '结束日期',
|
endPlaceholder: '结束日期',
|
||||||
defaultTime: ['00:00:00', '23:59:59'],
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
param: 'startTime',
|
param: 'startTime',
|
||||||
defaultSelect: null
|
|
||||||
// width: 350,
|
// width: 350,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -233,7 +229,6 @@ export default {
|
|||||||
{ name: '是', id: 1 },
|
{ name: '是', id: 1 },
|
||||||
{ name: '否', id: 2 },
|
{ name: '否', id: 2 },
|
||||||
],
|
],
|
||||||
defaultSelect: null,
|
|
||||||
param: 'relatePlan',
|
param: 'relatePlan',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -439,16 +434,12 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
this.initSearchBar();
|
this.initSearchBar();
|
||||||
if (this.$route.query) {
|
if (this.$route.query) {
|
||||||
this.queryParams.specialType =
|
|
||||||
this.$route.query?.specialType ?? undefined;
|
|
||||||
this.queryParams.equipmentId =
|
this.queryParams.equipmentId =
|
||||||
this.$route.query?.equipmentId ?? undefined;
|
this.$route.query?.equipmentId ?? undefined;
|
||||||
this.queryParams.maintainPlanId =
|
this.queryParams.maintainPlanId =
|
||||||
this.$route.query?.maintainPlanId ?? undefined;
|
this.$route.query?.maintainPlanId ?? undefined;
|
||||||
this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
|
this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
|
||||||
this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
|
this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
|
||||||
this.searchBarFormConfig[0].defaultSelect =
|
|
||||||
this.$route.query.specialType ?? undefined;
|
|
||||||
this.searchBarFormConfig[1].defaultSelect =
|
this.searchBarFormConfig[1].defaultSelect =
|
||||||
this.$route.query.equipmentId ?? undefined;
|
this.$route.query.equipmentId ?? undefined;
|
||||||
this.searchBarFormConfig[2].defaultSelect =
|
this.searchBarFormConfig[2].defaultSelect =
|
||||||
|
@ -1,176 +0,0 @@
|
|||||||
/**
|
|
||||||
* 发起websocket请求函数
|
|
||||||
* @param {string} url ws连接地址
|
|
||||||
* @param {Object} agentData 传给后台的参数
|
|
||||||
* @param {function} successCallback 接收到ws数据,对数据进行处理的回调函数
|
|
||||||
* @param {function} errCallback ws连接错误的回调函数
|
|
||||||
*/
|
|
||||||
export function WsConnect(url, agentData, successCallback, errCallback) {
|
|
||||||
this.wsUrl = url;
|
|
||||||
this.wsObj = null;
|
|
||||||
// 是否执行重连 true/不执行 ; false/执行
|
|
||||||
this.lockReconnect = false;
|
|
||||||
// 重连定时器
|
|
||||||
this.wsCreateHandler = null;
|
|
||||||
// 连接成功,执行回调函数
|
|
||||||
this.messageCallback = successCallback;
|
|
||||||
// 连接失败,执行回调函数
|
|
||||||
this.errorCallback = errCallback;
|
|
||||||
// 发送给后台的数据
|
|
||||||
this.sendDatas = agentData;
|
|
||||||
// 创建ws函数
|
|
||||||
this.createWebSoket = () => {
|
|
||||||
if (typeof WebSocket === "undefined") {
|
|
||||||
writeToScreen("您的浏览器不支持WebSocket,无法获取数据");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
this.wsObj = new WebSocket(url);
|
|
||||||
initWsEventHandle();
|
|
||||||
} catch (e) {
|
|
||||||
writeToScreen("连接异常,开始重连");
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 手动关闭websocket (这里手动关闭会执行onclose事件)
|
|
||||||
this.closeWebsocket = () => {
|
|
||||||
if (this.wsObj) {
|
|
||||||
writeToScreen("手动关闭websocket");
|
|
||||||
this.wsObj.close(); // 关闭websocket
|
|
||||||
// this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
|
||||||
// 关闭重连
|
|
||||||
this.lockReconnect = true;
|
|
||||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
|
||||||
// 关闭心跳检查
|
|
||||||
// heartCheck.stop();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const initWsEventHandle = () => {
|
|
||||||
try {
|
|
||||||
// 连接成功
|
|
||||||
this.wsObj.onopen = (event) => {
|
|
||||||
onWsOpen(event);
|
|
||||||
// heartCheck.start();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听服务器端返回的信息
|
|
||||||
this.wsObj.onmessage = (event) => {
|
|
||||||
onWsMessage(event);
|
|
||||||
// heartCheck.start();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.wsObj.onclose = (event) => {
|
|
||||||
writeToScreen("onclose执行关闭事件");
|
|
||||||
onWsClose(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.wsObj.onerror = (event) => {
|
|
||||||
writeToScreen("onerror执行error事件,开始重连");
|
|
||||||
onWsError(event);
|
|
||||||
reconnect();
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
writeToScreen("绑定事件没有成功,开始重连");
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onWsOpen = (event) => {
|
|
||||||
writeToScreen("CONNECT");
|
|
||||||
// // 客户端与服务器端通信
|
|
||||||
// wsObj.send('我发送消息给服务端');
|
|
||||||
// 添加状态判断,当为OPEN时,发送消息
|
|
||||||
if (this.wsObj.readyState === this.wsObj.OPEN) {
|
|
||||||
// wsObj.OPEN = 1
|
|
||||||
// 发给后端的数据需要字符串化
|
|
||||||
this.wsObj.send(JSON.stringify(this.sendDatas));
|
|
||||||
}
|
|
||||||
if (this.wsObj.readyState === this.wsObj.CLOSED) {
|
|
||||||
// wsObj.CLOSED = 3
|
|
||||||
writeToScreen("wsObj.readyState=3, ws连接异常,开始重连");
|
|
||||||
reconnect();
|
|
||||||
this.errorCallback(event);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onWsMessage = (event) => {
|
|
||||||
const jsonStr = event.data;
|
|
||||||
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
|
||||||
this.messageCallback(jsonStr);
|
|
||||||
};
|
|
||||||
const onWsClose = (event) => {
|
|
||||||
writeToScreen("DISCONNECT");
|
|
||||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
|
||||||
// e.code !== 1000 表示非正常关闭。
|
|
||||||
console.log("onclose event: ", event);
|
|
||||||
if (event && event.code !== 1000) {
|
|
||||||
writeToScreen("非正常关闭");
|
|
||||||
this.errorCallback(event);
|
|
||||||
// 如果不是手动关闭,这里的重连会执行;如果调用了手动关闭函数,这里重连不会执行
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onWsError = (event) => {
|
|
||||||
writeToScreen("onWsError: ", event.data);
|
|
||||||
this.errorCallback(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const writeToScreen = (massage) => {
|
|
||||||
console.log(massage);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 重连函数
|
|
||||||
const reconnect = () => {
|
|
||||||
if (this.lockReconnect) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
writeToScreen("3秒后重连");
|
|
||||||
this.lockReconnect = true;
|
|
||||||
// 没连接上会一直重连,设置延迟避免请求过多
|
|
||||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
|
||||||
this.wsCreateHandler = setTimeout(() => {
|
|
||||||
writeToScreen("重连..." + this.wsUrl);
|
|
||||||
this.createWebSoket();
|
|
||||||
this.lockReconnect = false;
|
|
||||||
writeToScreen("重连完成");
|
|
||||||
}, 3000);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 心跳检查(看看websocket是否还在正常连接中)
|
|
||||||
// let heartCheck = {
|
|
||||||
// timeout: 15000,
|
|
||||||
// timeoutObj: null,
|
|
||||||
// serverTimeoutObj: null,
|
|
||||||
// // 重启
|
|
||||||
// reset() {
|
|
||||||
// clearTimeout(this.timeoutObj);
|
|
||||||
// clearTimeout(this.serverTimeoutObj);
|
|
||||||
// this.start();
|
|
||||||
// },
|
|
||||||
// // 停止
|
|
||||||
// stop() {
|
|
||||||
// clearTimeout(this.timeoutObj);
|
|
||||||
// clearTimeout(this.serverTimeoutObj);
|
|
||||||
// },
|
|
||||||
// // 开启定时器
|
|
||||||
// start() {
|
|
||||||
// this.timeoutObj && clearTimeout(this.timeoutObj);
|
|
||||||
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
|
||||||
// // 15s之内如果没有收到后台的消息,则认为是连接断开了,需要重连
|
|
||||||
// this.timeoutObj = setTimeout(() => {
|
|
||||||
// writeToScreen("心跳检查,发送ping到后台");
|
|
||||||
// try {
|
|
||||||
// const datas = { ping: true };
|
|
||||||
// this.wsObj.send(JSON.stringify(datas));
|
|
||||||
// } catch (err) {
|
|
||||||
// writeToScreen("发送ping异常");
|
|
||||||
// }
|
|
||||||
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
|
|
||||||
// // 内嵌定时器
|
|
||||||
// this.serverTimeoutObj = setTimeout(() => {
|
|
||||||
// writeToScreen("没有收到后台的数据,重新连接");
|
|
||||||
// reconnect();
|
|
||||||
// }, this.timeout);
|
|
||||||
// }, this.timeout);
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
}
|
|
@ -1,232 +0,0 @@
|
|||||||
import { WsConnect } from './websocket'
|
|
||||||
import store from "@/store";
|
|
||||||
|
|
||||||
// 创建websocket链接
|
|
||||||
|
|
||||||
const timestr = new Date().getTime()
|
|
||||||
const dcsConn = new WsConnect(
|
|
||||||
// websocket地址
|
|
||||||
'ws://10.70.180.10:8081/xc-screen/websocket/dcsmsg'+timestr,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
(data) => {
|
|
||||||
// console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "FanFrequencyInfo": {
|
|
||||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "KilnInfo": {
|
|
||||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "GasInfo": {
|
|
||||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "SumGasInfo": {
|
|
||||||
store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
// ISRA
|
|
||||||
const mesIsra = new WsConnect(
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr,
|
|
||||||
'',
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
// console.log(msgData)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "israKiln": {
|
|
||||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// case "KilnInfo": {
|
|
||||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 原料 MA
|
|
||||||
const mesMA = new WsConnect(
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+timestr,
|
|
||||||
'',
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "material": {
|
|
||||||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// case "KilnInfo": {
|
|
||||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
// 能耗 EN
|
|
||||||
const mesEN = new WsConnect(
|
|
||||||
// websocket地址
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+timestr,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "EnergyInfo": {
|
|
||||||
store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "EnergyTrend": {
|
|
||||||
store.dispatch({type: "websocket/setEnergyTrend", payload:msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "EnergyMonitoring": {
|
|
||||||
store.dispatch({type: "websocket/setEnergyMonitoring", payload:msgData.data})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
// 烟气 GAS
|
|
||||||
const mesGAS = new WsConnect(
|
|
||||||
// websocket地址
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+timestr,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "exhaustGas": {
|
|
||||||
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
|
|
||||||
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
|
|
||||||
dayTrend: msgData.dayTrend,
|
|
||||||
weekTrend: msgData.weekTrend,
|
|
||||||
monthTrend: msgData.monthTrend,
|
|
||||||
yearTrend: msgData.yearTrend,
|
|
||||||
}})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 缺陷分类/统计 IS
|
|
||||||
const mesIS = new WsConnect(
|
|
||||||
// websocket地址
|
|
||||||
'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "isra": {
|
|
||||||
store.dispatch({type: "websocket/setDefectChart", payload:{
|
|
||||||
dayStatistic: msgData.detData.dayStatistic,
|
|
||||||
weekStatistic: msgData.detData.weekStatistic,
|
|
||||||
monthStatistic: msgData.detData.monthStatistic,
|
|
||||||
yearStatistic: msgData.detData.yearStatistic,
|
|
||||||
}})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 深加工生产运行驾驶舱(除能源) SJG
|
|
||||||
const mesSJG = new WsConnect(
|
|
||||||
// websocket地址
|
|
||||||
// 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr,
|
|
||||||
// 'ws://192.168.0.33:48082/websocket/message?userId=SJG'+timestr,
|
|
||||||
'ws://192.168.1.62:48082/websocket/message?userId=SJG'+timestr,
|
|
||||||
// 传递给后台的数据
|
|
||||||
'',
|
|
||||||
// 成功拿到后台返回的数据的回调函数
|
|
||||||
(data) => {
|
|
||||||
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
|
|
||||||
let msgData = JSON.parse(data)
|
|
||||||
if (msgData == null) return;
|
|
||||||
switch (msgData?.type) {
|
|
||||||
case "productline": {
|
|
||||||
store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "equipment": {
|
|
||||||
store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// websocket连接失败的回调函数
|
|
||||||
(err) => {
|
|
||||||
console.log('失败的回调函数', err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
export const getDcsMsg = () => {
|
|
||||||
dcsConn.createWebSoket()
|
|
||||||
mesIsra.createWebSoket()
|
|
||||||
mesMA.createWebSoket()
|
|
||||||
mesEN.createWebSoket()
|
|
||||||
mesGAS.createWebSoket()
|
|
||||||
mesIS.createWebSoket()
|
|
||||||
mesSJG.createWebSoket()
|
|
||||||
}
|
|
||||||
export const closeDcsMsg = () => {
|
|
||||||
dcsConn.closeWebsocket()
|
|
||||||
mesIsra.closeWebsocket()
|
|
||||||
mesMA.closeWebsocket()
|
|
||||||
mesEN.closeWebsocket()
|
|
||||||
mesGAS.closeWebsocket()
|
|
||||||
mesIS.closeWebsocket()
|
|
||||||
mesSJG.closeWebsocket()
|
|
||||||
}
|
|
57
yarn.lock
@ -1119,51 +1119,6 @@
|
|||||||
"cssnano-preset-default" "^4.0.0"
|
"cssnano-preset-default" "^4.0.0"
|
||||||
"postcss" "^7.0.0"
|
"postcss" "^7.0.0"
|
||||||
|
|
||||||
"@jiaminghi/bezier-curve@*":
|
|
||||||
"integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
|
|
||||||
"version" "0.0.9"
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
|
|
||||||
"@jiaminghi/c-render@^0.4.3":
|
|
||||||
"integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
|
|
||||||
"version" "0.4.3"
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
"@jiaminghi/bezier-curve" "*"
|
|
||||||
"@jiaminghi/color" "*"
|
|
||||||
"@jiaminghi/transition" "*"
|
|
||||||
|
|
||||||
"@jiaminghi/charts@*":
|
|
||||||
"integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
|
|
||||||
"version" "0.2.18"
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
"@jiaminghi/c-render" "^0.4.3"
|
|
||||||
|
|
||||||
"@jiaminghi/color@*":
|
|
||||||
"integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
|
|
||||||
"version" "1.1.3"
|
|
||||||
|
|
||||||
"@jiaminghi/data-view@^2.10.0":
|
|
||||||
"integrity" "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz"
|
|
||||||
"version" "2.10.0"
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
"@jiaminghi/charts" "*"
|
|
||||||
|
|
||||||
"@jiaminghi/transition@*":
|
|
||||||
"integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
|
|
||||||
"version" "1.1.11"
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.5.5"
|
|
||||||
|
|
||||||
"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
|
"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
|
||||||
"integrity" "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ=="
|
"integrity" "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ=="
|
||||||
"resolved" "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
|
"resolved" "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
|
||||||
@ -3552,11 +3507,6 @@
|
|||||||
"safe-buffer" "5.1.2"
|
"safe-buffer" "5.1.2"
|
||||||
"vary" "~1.1.2"
|
"vary" "~1.1.2"
|
||||||
|
|
||||||
"comutils@^1.1.9":
|
|
||||||
"integrity" "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz"
|
|
||||||
"version" "1.1.19"
|
|
||||||
|
|
||||||
"concat-map@0.0.1":
|
"concat-map@0.0.1":
|
||||||
"integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
"integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
||||||
"resolved" "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
|
"resolved" "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
|
||||||
@ -11428,13 +11378,6 @@
|
|||||||
"resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.4.9.tgz"
|
"resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.4.9.tgz"
|
||||||
"version" "3.4.9"
|
"version" "3.4.9"
|
||||||
|
|
||||||
"vue-seamless-scroll@^1.1.23":
|
|
||||||
"integrity" "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA=="
|
|
||||||
"resolved" "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz"
|
|
||||||
"version" "1.1.23"
|
|
||||||
dependencies:
|
|
||||||
"comutils" "^1.1.9"
|
|
||||||
|
|
||||||
"vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
|
"vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
|
||||||
"integrity" "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg=="
|
"integrity" "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg=="
|
||||||
"resolved" "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
|
"resolved" "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
|
||||||
|