Compare commits

..

47 Commits

Author SHA1 Message Date
gtz
3f8e059f53 'align-left' 2022-11-11 16:10:45 +08:00
gtz
bd640ee0dc Merge branch 'master' of git.picaiba.com:mt-fe-group/11-mes-new 2022-11-10 16:47:18 +08:00
gtz
1da845e9b4 '1' 2022-11-10 16:47:04 +08:00
dd24092830 Merge pull request 'lb' (#6) from lb into master
Reviewed-on: #6
2022-11-10 15:52:33 +08:00
lb
df3427f4d6 merge from master 2022-11-10 15:50:02 +08:00
lb
1e4bc79ed3 update 系统设置 2022-11-10 15:46:58 +08:00
lb
14ef064e21 update 基本完成质量管理 2022-11-10 15:01:03 +08:00
lb
e71855fee4 update 质量管理布局 2022-11-10 14:49:28 +08:00
lb
05e2562da3 update 质量图标 2022-11-10 14:24:16 +08:00
lb
c943c1ab7a update 设备管理的滚动条 2022-11-10 13:54:12 +08:00
lb
affc23fbc2 update techytable滚动条 2022-11-10 13:41:57 +08:00
lb
8a9df0fd17 update techy-table 2022-11-10 11:33:18 +08:00
lb
f19f50623d update 设备分析 2022-11-10 10:39:46 +08:00
lb
3c29decb72 update techy-container icons 2022-11-10 09:48:49 +08:00
lb
3567838049 update 设备管理的techytable样式 2022-11-09 17:03:20 +08:00
lb
472ac0a19f update 设备管理布局 2022-11-09 16:49:56 +08:00
lb
96e407d531 update 2022-11-09 15:59:33 +08:00
lb
031f0f18ed update Navbar & beilv 2022-11-09 15:30:00 +08:00
lb
66ce0d76f2 udpate navbar 2022-11-09 11:59:58 +08:00
lb
2d92443a89 update 数据分析 2022-11-09 10:28:07 +08:00
lb
ed90ce520c update 现场实时 2022-11-09 10:20:48 +08:00
lb
7bca6b14e4 update 公用工程 2022-11-09 10:14:56 +08:00
lb
25e5150e35 update table 等级 2022-11-09 09:51:14 +08:00
lb
073478f34f update 实时产量 2022-11-09 09:30:18 +08:00
lb
ad01e2f5fb update 缺陷分类分析 2022-11-09 09:20:14 +08:00
lb
24fb7e473c update line stack color 2022-11-09 09:16:03 +08:00
lb
817c62a880 udpate icon 2022-11-09 09:08:30 +08:00
0778f473d6 Merge pull request '改表格颜色' (#5) from zjl into master
Reviewed-on: #5
2022-11-08 17:06:17 +08:00
lb
387bbcb45a subtle adjust 2022-11-08 17:01:12 +08:00
356f58f4a4 改表格颜色 2022-11-08 16:57:00 +08:00
95a2f6c1a6 Merge pull request 'zjl' (#4) from zjl into master
Reviewed-on: #4
2022-11-08 16:48:09 +08:00
lb
0db0f98791 update homepage 2022-11-08 16:43:08 +08:00
cdb93d2b8c merge master 2022-11-08 16:36:58 +08:00
3b17b75f85 1 2022-11-08 16:33:46 +08:00
lb
79e9110f1d update 3d homepage middlebox 2022-11-08 16:09:34 +08:00
2035643ed9 Merge pull request 'lb' (#3) from lb into master
Reviewed-on: #3
2022-11-08 15:05:41 +08:00
76e198124e merge master 2022-11-08 14:54:20 +08:00
5f4f9ca5fc 修改 2022-11-08 14:52:35 +08:00
lb
4b70e4956c update 2022-11-08 14:42:30 +08:00
lb
9b91d86f40 update table 的距离问题 2022-11-08 14:40:04 +08:00
lb
567aa98452 update 公用工程消耗 2022-11-08 13:36:18 +08:00
lb
d4986ba2db update 滑动条 2022-11-08 09:19:40 +08:00
lb
49171d240c merge 2022-11-08 08:46:29 +08:00
lb
60077b538a update 2022-11-07 17:08:05 +08:00
8e4a169f3e Merge pull request 'zjl' (#2) from zjl into master
Reviewed-on: #2
2022-11-07 15:15:53 +08:00
5a0db19da7 merge master 2022-11-07 15:11:49 +08:00
8cfe73aaef init 2022-11-07 14:54:47 +08:00
76 changed files with 3880 additions and 1311 deletions

BIN
public.rar Normal file

Binary file not shown.

View File

@ -8,6 +8,15 @@
export default {
name: 'App',
mounted() {
this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
window.addEventListener('resize', () => {
this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
})
},
data() {
beilv: 1
}
}
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
src/assets/video/3d.mkv Normal file

Binary file not shown.

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611908177855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6794" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M577.463954 946.834286c20.114286 0 36.425143 16.237714 36.425143 36.352v4.388571a36.352 36.352 0 0 1-36.425143 36.425143h-130.925714a36.352 36.352 0 0 1-36.425143-36.352v-4.388571c0-20.187429 16.310857-36.425143 36.425143-36.425143h130.925714zM512.001097 0c75.044571 0 135.826286 57.344 135.826286 128l0.073143 23.990857c139.117714 51.2 237.714286 178.761143 237.714285 328.045714l-0.073142 334.482286h63.488c21.211429 0 38.4 17.188571 38.4 38.4v4.681143c0 21.211429-17.188571 38.4-38.4 38.4H74.972526A38.4 38.4 0 0 1 36.572526 857.6v-4.681143c0-21.211429 17.188571-38.4 38.4-38.4h63.414857V480.036571c0-149.211429 98.596571-276.772571 237.714286-328.045714V128C376.174811 57.344 437.029669 0 512.001097 0z m0 211.602286c-151.990857 0-284.086857 120.32-284.086857 268.8l-0.073143 334.116571h571.026286V480.402286c0-148.48-134.875429-268.8-286.866286-268.8z m0-140.8c-37.522286 0-61.586286 21.869714-61.586286 57.197714h0.073143v4.754286a398.628571 398.628571 0 0 1 123.684572 0.073143l-0.073143-4.827429c0-35.328-24.576-57.197714-62.098286-57.197714z" p-id="6795"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1611908177855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6794" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M577.463954 946.834286c20.114286 0 36.425143 16.237714 36.425143 36.352v4.388571a36.352 36.352 0 0 1-36.425143 36.425143h-130.925714a36.352 36.352 0 0 1-36.425143-36.352v-4.388571c0-20.187429 16.310857-36.425143 36.425143-36.425143h130.925714zM512.001097 0c75.044571 0 135.826286 57.344 135.826286 128l0.073143 23.990857c139.117714 51.2 237.714286 178.761143 237.714285 328.045714l-0.073142 334.482286h63.488c21.211429 0 38.4 17.188571 38.4 38.4v4.681143c0 21.211429-17.188571 38.4-38.4 38.4H74.972526A38.4 38.4 0 0 1 36.572526 857.6v-4.681143c0-21.211429 17.188571-38.4 38.4-38.4h63.414857V480.036571c0-149.211429 98.596571-276.772571 237.714286-328.045714V128C376.174811 57.344 437.029669 0 512.001097 0z m0 211.602286c-151.990857 0-284.086857 120.32-284.086857 268.8l-0.073143 334.116571h571.026286V480.402286c0-148.48-134.875429-268.8-286.866286-268.8z m0-140.8c-37.522286 0-61.586286 21.869714-61.586286 57.197714h0.073143v4.754286a398.628571 398.628571 0 0 1 123.684572 0.073143l-0.073143-4.827429c0-35.328-24.576-57.197714-62.098286-57.197714z" p-id="6795"></path></svg>
<?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>2</title>
<g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="消息" transform="translate(1.500000, 0.330627)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="21" height="21"></rect>
<path d="M12.375,20.8465581 L12.481439,20.8533125 C12.8247806,20.8979809 13.05,21.1605815 13.05,21.5329218 C13.05,21.9061929 12.8231926,22.1712138 12.4745438,22.2133994 L12.4745438,22.2133994 L12.369085,22.2194605 L8.625,22.2192854 L8.51856095,22.2125311 C8.17521937,22.1678627 7.95,21.905262 7.95,21.5329218 C7.95,21.1596507 8.17680737,20.8946298 8.52545616,20.8524442 L8.52545616,20.8524442 L8.63091503,20.8463831 L12.375,20.8465581 Z M10.5,1.11928542 L10.518,1.12028542 L10.6067486,1.12608537 C10.8823216,1.16207049 11.0827652,1.33862074 11.1502336,1.60173001 L11.1691881,1.70434797 L11.1751648,1.81138832 L11.174,2.96819941 L11.2623551,3.06760509 L11.4699366,3.09194324 L11.7169493,3.12873834 C15.1566001,3.70083281 17.8052189,6.65135102 18.0339536,10.2136799 L18.0339536,10.2136799 L18.0460319,10.4648785 L18.0500129,10.7163433 L18.05,18.2002854 L18.1499256,18.3002854 L19.2499256,18.3011036 L19.3566944,18.3079035 C19.6667682,18.3483868 19.8817022,18.5667728 19.9191881,18.8861662 L19.9191881,18.8861662 L19.9251648,18.9932065 L19.9184209,19.1002704 C19.8784201,19.4115142 19.6633278,19.6299778 19.3495438,19.6679448 L19.3495438,19.6679448 L19.244085,19.674006 L1.75,19.674006 L1.64356095,19.6670765 C1.30021937,19.6224081 1.075,19.3598075 1.075,18.9874672 C1.075,18.6142067 1.30179797,18.3491752 1.65038278,18.3069894 L1.648,18.3062854 L1.691,18.3042854 L1.75581803,18.3009285 L2.85007438,18.3002854 L2.95,18.2002854 L2.95,10.71474 L2.95401023,10.4643007 C3.0740175,6.72062696 5.87395857,3.57344707 9.53315802,3.09161275 L9.53315802,3.09161275 L9.73577793,3.0675894 L9.82399996,2.96837143 L9.82499996,1.80573506 L9.83178712,1.69643473 C9.8677099,1.41423605 10.0440196,1.20878035 10.3078503,1.14227473 L10.3078503,1.14227473 L10.398,1.12428542 L10.495,1.11928542 L10.5,1.11928542 Z M16.599,18.3002854 L16.699,18.2002988 L16.7,10.7147533 L16.6958906,10.484234 C16.5756984,7.11769965 13.8343245,4.4011036 10.5,4.4011036 C7.17435962,4.4011036 4.42460885,7.10883932 4.30410828,10.484267 L4.30410828,10.484267 L4.30001588,10.7129577 L4.299,18.2002721 L4.399,18.3002854 L16.599,18.3002854 Z" id="形状结合" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

14
src/icons/svg/alarmb.svg Normal file
View File

@ -0,0 +1,14 @@
<?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>2</title>
<g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon/banner/消息">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="消息" transform="translate(1.500000, 0.330627)" fill="#000000" fill-rule="nonzero">
<rect id="矩形" opacity="0" x="0" y="0" width="21" height="21"></rect>
<path d="M12.375,20.8465581 L12.481439,20.8533125 C12.8247806,20.8979809 13.05,21.1605815 13.05,21.5329218 C13.05,21.9061929 12.8231926,22.1712138 12.4745438,22.2133994 L12.4745438,22.2133994 L12.369085,22.2194605 L8.625,22.2192854 L8.51856095,22.2125311 C8.17521937,22.1678627 7.95,21.905262 7.95,21.5329218 C7.95,21.1596507 8.17680737,20.8946298 8.52545616,20.8524442 L8.52545616,20.8524442 L8.63091503,20.8463831 L12.375,20.8465581 Z M10.5,1.11928542 L10.518,1.12028542 L10.6067486,1.12608537 C10.8823216,1.16207049 11.0827652,1.33862074 11.1502336,1.60173001 L11.1691881,1.70434797 L11.1751648,1.81138832 L11.174,2.96819941 L11.2623551,3.06760509 L11.4699366,3.09194324 L11.7169493,3.12873834 C15.1566001,3.70083281 17.8052189,6.65135102 18.0339536,10.2136799 L18.0339536,10.2136799 L18.0460319,10.4648785 L18.0500129,10.7163433 L18.05,18.2002854 L18.1499256,18.3002854 L19.2499256,18.3011036 L19.3566944,18.3079035 C19.6667682,18.3483868 19.8817022,18.5667728 19.9191881,18.8861662 L19.9191881,18.8861662 L19.9251648,18.9932065 L19.9184209,19.1002704 C19.8784201,19.4115142 19.6633278,19.6299778 19.3495438,19.6679448 L19.3495438,19.6679448 L19.244085,19.674006 L1.75,19.674006 L1.64356095,19.6670765 C1.30021937,19.6224081 1.075,19.3598075 1.075,18.9874672 C1.075,18.6142067 1.30179797,18.3491752 1.65038278,18.3069894 L1.648,18.3062854 L1.691,18.3042854 L1.75581803,18.3009285 L2.85007438,18.3002854 L2.95,18.2002854 L2.95,10.71474 L2.95401023,10.4643007 C3.0740175,6.72062696 5.87395857,3.57344707 9.53315802,3.09161275 L9.53315802,3.09161275 L9.73577793,3.0675894 L9.82399996,2.96837143 L9.82499996,1.80573506 L9.83178712,1.69643473 C9.8677099,1.41423605 10.0440196,1.20878035 10.3078503,1.14227473 L10.3078503,1.14227473 L10.398,1.12428542 L10.495,1.11928542 L10.5,1.11928542 Z M16.599,18.3002854 L16.699,18.2002988 L16.7,10.7147533 L16.6958906,10.484234 C16.5756984,7.11769965 13.8343245,4.4011036 10.5,4.4011036 C7.17435962,4.4011036 4.42460885,7.10883932 4.30410828,10.484267 L4.30410828,10.484267 L4.30001588,10.7129577 L4.299,18.2002721 L4.399,18.3002854 L16.599,18.3002854 Z" id="形状结合"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660620397071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="964" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M87.788 227.913c17.049 29.189 34.039 58.291 51.043 87.383 51.784 88.596 103.585 177.181 155.325 265.804 2.62 4.485 5.062 9.143 7 13.955C349.786 715.89 484.618 771.244 604.34 719.47c2.398-1.037 4.887-1.861 9.302-3.526-2.588 4.897-4.038 7.89-5.7 10.755-54.798 94.487-109.707 188.908-164.246 283.545-4.133 7.171-8.493 8.259-15.899 6.935-206.01-36.867-364.332-183.492-412.98-387.026-33.681-140.916-9.465-273.513 67.799-396.221a55.282 55.282 0 0 1 2.993-4.263c0.41-0.532 1.065-0.875 2.179-1.756zM637.574 322.251c4.879-0.232 7.832-0.494 10.785-0.495 109.636-0.021 219.273 0.08 328.908-0.221 8.034-0.021 11.143 2.592 13.896 9.949 77.165 206.263 15.492 437.682-155.167 576.728-99.718 81.243-214.648 119.245-343.254 115.541-4.101-0.116-8.19-0.579-13.782-0.991 2.282-4.327 3.863-7.594 5.678-10.723 73.799-127.297 147.568-254.609 221.459-381.853 61.326-105.603 35.165-231.359-63.311-303.663-1.275-0.936-2.452-2.003-5.212-4.272zM970.66 284.978h-15.17c-145.492 0-290.984-0.444-436.474 0.156-97.432 0.401-169.373 44.268-212.233 132.11-11.095 22.739-15.798 48.603-23.28 72.528-0.437-0.663-2.509-3.517-4.279-6.546-54.593-93.406-109.079-186.878-163.896-280.152-3.852-6.555-3.331-10.476 1.434-16.115C205.093 82.393 316.58 20.463 452.687 3.72c207.799-25.561 413.84 82.445 511.367 267.993 1.915 3.643 3.675 7.368 6.606 13.265zM702.425 512.551c-0.178 106.027-85.601 189.996-193.057 189.771-103.007-0.212-187.656-86.695-187.287-191.343 0.373-106.007 85.766-189.459 193.555-189.154 102.551 0.287 186.962 86.481 186.789 190.726z" p-id="965"></path></svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,2 +1,10 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660620397071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="964" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M87.788 227.913c17.049 29.189 34.039 58.291 51.043 87.383 51.784 88.596 103.585 177.181 155.325 265.804 2.62 4.485 5.062 9.143 7 13.955C349.786 715.89 484.618 771.244 604.34 719.47c2.398-1.037 4.887-1.861 9.302-3.526-2.588 4.897-4.038 7.89-5.7 10.755-54.798 94.487-109.707 188.908-164.246 283.545-4.133 7.171-8.493 8.259-15.899 6.935-206.01-36.867-364.332-183.492-412.98-387.026-33.681-140.916-9.465-273.513 67.799-396.221a55.282 55.282 0 0 1 2.993-4.263c0.41-0.532 1.065-0.875 2.179-1.756zM637.574 322.251c4.879-0.232 7.832-0.494 10.785-0.495 109.636-0.021 219.273 0.08 328.908-0.221 8.034-0.021 11.143 2.592 13.896 9.949 77.165 206.263 15.492 437.682-155.167 576.728-99.718 81.243-214.648 119.245-343.254 115.541-4.101-0.116-8.19-0.579-13.782-0.991 2.282-4.327 3.863-7.594 5.678-10.723 73.799-127.297 147.568-254.609 221.459-381.853 61.326-105.603 35.165-231.359-63.311-303.663-1.275-0.936-2.452-2.003-5.212-4.272zM970.66 284.978h-15.17c-145.492 0-290.984-0.444-436.474 0.156-97.432 0.401-169.373 44.268-212.233 132.11-11.095 22.739-15.798 48.603-23.28 72.528-0.437-0.663-2.509-3.517-4.279-6.546-54.593-93.406-109.079-186.878-163.896-280.152-3.852-6.555-3.331-10.476 1.434-16.115C205.093 82.393 316.58 20.463 452.687 3.72c207.799-25.561 413.84 82.445 511.367 267.993 1.915 3.643 3.675 7.368 6.606 13.265zM702.425 512.551c-0.178 106.027-85.601 189.996-193.057 189.771-103.007-0.212-187.656-86.695-187.287-191.343 0.373-106.007 85.766-189.459 193.555-189.154 102.551 0.287 186.962 86.481 186.789 190.726z" p-id="965"></path></svg>
<?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>3</title>
<g id="3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="chrome-o备份" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M12.7426068,2.2146521 L12.7969308,2.21934763 L13.710624,2.37852186 L13.8758691,2.41111672 L14.1788117,2.47990569 C17.8083772,3.38984553 20.2183126,5.64775183 21.3576595,9.20681554 L21.4312071,9.45312684 C21.4424894,9.49407858 21.4533873,9.53539607 21.4640561,9.57770303 L21.5265612,9.84840829 L21.5910183,10.1727998 L21.7853479,11.2573932 L21.7800356,12.8004541 L21.6434884,13.5893768 L21.5856223,13.8887435 L21.5250256,14.1499693 C20.5620362,17.9780786 18.1617207,20.4349532 14.3625096,21.4705433 L14.1437836,21.5265071 L13.9137133,21.5771902 L13.4740829,21.6596966 L12.7426068,21.7854416 L11.1996505,21.7801487 L10.2834751,21.620599 L9.93360929,21.5474416 L9.82240675,21.5204237 C6.19289431,20.6111829 3.7827631,18.3541523 2.64317987,14.7958381 L2.56952614,14.5492643 L2.5050898,14.2938921 L2.44241633,13.9997935 L2.21455835,12.7427006 L2.21984617,11.199772 L2.37862691,10.2827451 L2.42714858,10.0429186 L2.47993468,9.82132437 C3.42439347,6.12371072 5.70744352,3.70983475 9.29593923,2.62735404 L9.7463242,2.50065857 L9.96673544,2.44825109 L10.3605303,2.37014553 L11.2572994,2.2146521 L12.7426068,2.2146521 Z M19.8184835,8.98242758 L17.8452559,8.98928786 L14.9675268,8.98709499 L15.0797892,9.10063515 C16.3213259,10.415573 16.6057788,12.2971205 15.7650723,13.9357578 L15.6541116,14.1392638 L11.9599009,20.4508985 L12.7565222,20.3999419 L13.0688801,20.3744215 L13.3296995,20.3453964 L13.5654615,20.3094959 C13.6041382,20.3027523 13.6428743,20.2955818 13.6822213,20.2879141 C18.6345664,19.3229989 21.6280381,14.1355163 20.0588392,9.36859749 L19.9720227,9.11812043 C19.9372981,9.02280001 19.9245375,8.99376084 19.8623201,8.98535805 L19.8184835,8.98242758 Z M4.65084236,7.78932117 L4.56424406,7.94798435 C3.4213887,10.0886924 3.19931203,12.295053 3.93454334,14.5371697 C4.93640021,17.5925026 7.03373243,19.4969892 10.189811,20.2723941 L10.5200771,20.3485817 C10.5838015,20.3623556 10.5888302,20.3684026 10.6099764,20.332771 L13.0943563,16.0777049 L12.9989912,16.1054787 C12.7989622,16.1602618 12.6660608,16.1894579 12.5271855,16.2051494 L12.4207667,16.2145748 C10.6168415,16.334373 9.21591352,15.605623 8.30414882,14.0584009 L6.61262152,11.158299 L4.65084236,7.78932117 Z M11.9929638,9.04613534 C10.3500684,9.04928839 9.04106198,10.3706195 9.04596815,12.0223123 C9.05081988,13.6444119 10.3772255,14.9584659 12.0068362,14.9543922 C13.6471232,14.95028 14.9674971,13.6178126 14.9549525,11.9796354 C14.9424363,10.3478671 13.6248992,9.04298847 11.9929638,9.04613534 Z M5.69719098,6.35076885 L5.46938856,6.60325105 C5.43203838,6.64588868 5.41753959,6.65640287 5.42320237,6.67714133 L7.90118893,10.9183074 L7.91414513,10.8757045 C8.46343996,9.03359313 9.95509795,7.86190859 11.8474474,7.76979085 L12.076418,7.76394483 L19.3270014,7.7650491 L19.2765877,7.67851428 C17.931894,5.47764056 16.0374498,4.13772493 13.5902231,3.69821656 L13.2678845,3.6459989 C10.288211,3.21475838 7.76432959,4.12699021 5.69719098,6.35076885 Z" id="形状结合" fill="#FFFFFF"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

10
src/icons/svg/chromeb.svg Normal file
View File

@ -0,0 +1,10 @@
<?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>3</title>
<g id="3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="chrome-o备份" fill-rule="nonzero">
<rect id="矩形" fill="#404040" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M12.7426068,2.2146521 L12.7969308,2.21934763 L13.710624,2.37852186 L13.8758691,2.41111672 L14.1788117,2.47990569 C17.8083772,3.38984553 20.2183126,5.64775183 21.3576595,9.20681554 L21.4312071,9.45312684 C21.4424894,9.49407858 21.4533873,9.53539607 21.4640561,9.57770303 L21.5265612,9.84840829 L21.5910183,10.1727998 L21.7853479,11.2573932 L21.7800356,12.8004541 L21.6434884,13.5893768 L21.5856223,13.8887435 L21.5250256,14.1499693 C20.5620362,17.9780786 18.1617207,20.4349532 14.3625096,21.4705433 L14.1437836,21.5265071 L13.9137133,21.5771902 L13.4740829,21.6596966 L12.7426068,21.7854416 L11.1996505,21.7801487 L10.2834751,21.620599 L9.93360929,21.5474416 L9.82240675,21.5204237 C6.19289431,20.6111829 3.7827631,18.3541523 2.64317987,14.7958381 L2.56952614,14.5492643 L2.5050898,14.2938921 L2.44241633,13.9997935 L2.21455835,12.7427006 L2.21984617,11.199772 L2.37862691,10.2827451 L2.42714858,10.0429186 L2.47993468,9.82132437 C3.42439347,6.12371072 5.70744352,3.70983475 9.29593923,2.62735404 L9.7463242,2.50065857 L9.96673544,2.44825109 L10.3605303,2.37014553 L11.2572994,2.2146521 L12.7426068,2.2146521 Z M19.8184835,8.98242758 L17.8452559,8.98928786 L14.9675268,8.98709499 L15.0797892,9.10063515 C16.3213259,10.415573 16.6057788,12.2971205 15.7650723,13.9357578 L15.6541116,14.1392638 L11.9599009,20.4508985 L12.7565222,20.3999419 L13.0688801,20.3744215 L13.3296995,20.3453964 L13.5654615,20.3094959 C13.6041382,20.3027523 13.6428743,20.2955818 13.6822213,20.2879141 C18.6345664,19.3229989 21.6280381,14.1355163 20.0588392,9.36859749 L19.9720227,9.11812043 C19.9372981,9.02280001 19.9245375,8.99376084 19.8623201,8.98535805 L19.8184835,8.98242758 Z M4.65084236,7.78932117 L4.56424406,7.94798435 C3.4213887,10.0886924 3.19931203,12.295053 3.93454334,14.5371697 C4.93640021,17.5925026 7.03373243,19.4969892 10.189811,20.2723941 L10.5200771,20.3485817 C10.5838015,20.3623556 10.5888302,20.3684026 10.6099764,20.332771 L13.0943563,16.0777049 L12.9989912,16.1054787 C12.7989622,16.1602618 12.6660608,16.1894579 12.5271855,16.2051494 L12.4207667,16.2145748 C10.6168415,16.334373 9.21591352,15.605623 8.30414882,14.0584009 L6.61262152,11.158299 L4.65084236,7.78932117 Z M11.9929638,9.04613534 C10.3500684,9.04928839 9.04106198,10.3706195 9.04596815,12.0223123 C9.05081988,13.6444119 10.3772255,14.9584659 12.0068362,14.9543922 C13.6471232,14.95028 14.9674971,13.6178126 14.9549525,11.9796354 C14.9424363,10.3478671 13.6248992,9.04298847 11.9929638,9.04613534 Z M5.69719098,6.35076885 L5.46938856,6.60325105 C5.43203838,6.64588868 5.41753959,6.65640287 5.42320237,6.67714133 L7.90118893,10.9183074 L7.91414513,10.8757045 C8.46343996,9.03359313 9.95509795,7.86190859 11.8474474,7.76979085 L12.076418,7.76394483 L19.3270014,7.7650491 L19.2765877,7.67851428 C17.931894,5.47764056 16.0374498,4.13772493 13.5902231,3.69821656 L13.2678845,3.6459989 C10.288211,3.21475838 7.76432959,4.12699021 5.69719098,6.35076885 Z" id="形状结合" fill="#000000"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615188284589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2221" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M998.428444 381.112889l-469.333333-353.180445c-0.469333-0.355556-0.981333-0.568889-1.479111-0.896a28.017778 28.017778 0 0 0-2.417778-1.464888 29.909333 29.909333 0 0 0-10.453333-3.128889 30.705778 30.705778 0 0 0-5.475556-0.014223 28.771556 28.771556 0 0 0-13.112889 4.707556c-0.412444 0.284444-0.867556 0.469333-1.28 0.782222l-469.333333 353.180445a28.458667 28.458667 0 0 0 34.204445 45.468444l73.656888-55.424V854.186667c0 111.701333 29.141333 147.555556 136.803556 147.555555h483.555556c107.662222 0 147.640889-35.854222 147.640888-147.555555V379.320889l62.805334 47.260444c5.12 3.854222 11.121778 5.717333 17.080889 5.717334a28.444444 28.444444 0 0 0 17.137777-51.185778zM443.747556 674.673778H580.266667c31.288889 0 36.707556 0.554667 36.707555 28.8v241.422222H417.877333V703.473778c0-28.245333-5.418667-28.8 25.870223-28.8z m400.782222-327.111111v506.666666c0 81.365333-14.193778 90.666667-90.752 90.666667h-108.359111V703.473778c0-48.967111-23.850667-57.244444-65.152-57.244445h-136.519111c-41.301333 0-54.314667 8.277333-54.314667 57.244445v241.422222H270.222222c-76.572444 0-79.914667-9.301333-79.914666-90.666667V347.562667c0-5.788444-1.749333-11.150222-4.721778-15.644445L512 86.272l334.336 251.591111a28.231111 28.231111 0 0 0-1.806222 9.699556z" fill="" p-id="2222"></path><path d="M435.370667 230.499556L250.055111 373.617778c-3.512889 2.688-2.858667 6.855111-2.858667 11.278222v161.777778a14.222222 14.222222 0 1 0 28.444445 0V391.907556l178.730667-138.837334c6.243556-4.778667 5.034667-13.710222 0.256-19.939555a13.425778 13.425778 0 0 0-19.256889-2.631111zM261.418667 589.340444a14.222222 14.222222 0 0 0-14.222223 14.222223v14.222222a14.222222 14.222222 0 1 0 28.444445 0v-14.222222a14.222222 14.222222 0 0 0-14.222222-14.222223z" fill="" p-id="2223"></path></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1 +1,10 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1615188284589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2221" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M998.428444 381.112889l-469.333333-353.180445c-0.469333-0.355556-0.981333-0.568889-1.479111-0.896a28.017778 28.017778 0 0 0-2.417778-1.464888 29.909333 29.909333 0 0 0-10.453333-3.128889 30.705778 30.705778 0 0 0-5.475556-0.014223 28.771556 28.771556 0 0 0-13.112889 4.707556c-0.412444 0.284444-0.867556 0.469333-1.28 0.782222l-469.333333 353.180445a28.458667 28.458667 0 0 0 34.204445 45.468444l73.656888-55.424V854.186667c0 111.701333 29.141333 147.555556 136.803556 147.555555h483.555556c107.662222 0 147.640889-35.854222 147.640888-147.555555V379.320889l62.805334 47.260444c5.12 3.854222 11.121778 5.717333 17.080889 5.717334a28.444444 28.444444 0 0 0 17.137777-51.185778zM443.747556 674.673778H580.266667c31.288889 0 36.707556 0.554667 36.707555 28.8v241.422222H417.877333V703.473778c0-28.245333-5.418667-28.8 25.870223-28.8z m400.782222-327.111111v506.666666c0 81.365333-14.193778 90.666667-90.752 90.666667h-108.359111V703.473778c0-48.967111-23.850667-57.244444-65.152-57.244445h-136.519111c-41.301333 0-54.314667 8.277333-54.314667 57.244445v241.422222H270.222222c-76.572444 0-79.914667-9.301333-79.914666-90.666667V347.562667c0-5.788444-1.749333-11.150222-4.721778-15.644445L512 86.272l334.336 251.591111a28.231111 28.231111 0 0 0-1.806222 9.699556z" fill="" p-id="2222"></path><path d="M435.370667 230.499556L250.055111 373.617778c-3.512889 2.688-2.858667 6.855111-2.858667 11.278222v161.777778a14.222222 14.222222 0 1 0 28.444445 0V391.907556l178.730667-138.837334c6.243556-4.778667 5.034667-13.710222 0.256-19.939555a13.425778 13.425778 0 0 0-19.256889-2.631111zM261.418667 589.340444a14.222222 14.222222 0 0 0-14.222223 14.222223v14.222222a14.222222 14.222222 0 1 0 28.444445 0v-14.222222a14.222222 14.222222 0 0 0-14.222222-14.222223z" fill="" p-id="2223"></path></svg>
<?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>1</title>
<g id="1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" fill="#FFFFFF"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

10
src/icons/svg/homeb.svg Normal file
View File

@ -0,0 +1,10 @@
<?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>1</title>
<g id="1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页" fill-rule="nonzero">
<rect id="矩形" fill="#404040" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" fill="#000000"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,36 +1,33 @@
<template>
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
<div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
<img src="../../assets/img/cnbm.png" alt="" />
<span>
{{ 'title' | i18nFilter }}
</span>
</div>
<div v-if="showhome" style="display:flex; align-items: center;">
<hamburger
v-if="showhome"
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<div
v-if="showTitle"
style="cursor: pointer; color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px"
@click="goToRootPage"
>
<img
src="../../assets/img/cnbm.png"
style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px"
alt=""
>
{{ 'title' | i18nFilter }}
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
</div>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<div v-if="showhome" class="right-menu-back" @click="toHome">
<div class="right-menu-back" @click="toHome">
<svg-icon
class="item-icon"
icon-class="home"
:icon-class="showTitle ? 'home' : 'homeb'"
style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;"
/>
<span v-if="showhome">
{{ 'navbar.homepage' | i18nFilter }}
</span>
</div>
<el-dropdown
:style="showTitle ? 'color: #fff' : '#000'"
@ -44,7 +41,7 @@
style="line-height: 0; margin: 0 10px; vertical-align: -3px"
@click.native="handleAlarm"
>
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
<svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarm' : 'alarmb'" />
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>暂无数据</el-dropdown-item>
@ -78,7 +75,7 @@
<svg-icon
:style="showTitle ? 'color: #fff' : ''"
style="width: 24px; height: 24px; vertical-align: -7px"
icon-class="chrome"
:icon-class="showTitle ? 'chrome' : 'chromeb'"
/>
</a>
</div>
@ -96,7 +93,7 @@
trigger="click"
>
<div class="avatar-wrapper">
<img :src="require('@/assets/img/head.png')" class="user-avatar">
<img :src="require('@/assets/img/head.png')" class="user-avatar" />
<div class="avatar-username" :title="username">{{ username }}</div>
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
<!-- <i class="el-icon-caret-bottom" /> -->
@ -143,7 +140,7 @@
<el-tooltip class="item" effect="dark" placement="bottom-end">
<div slot="content">
{{ 'copyright.copyright' | i18nFilter }}{{ 'copyright.company' | i18nFilter }}
<br>
<br />
{{ 'copyright.version' | i18nFilter }}3.0
</div>
<svg-icon
@ -296,8 +293,12 @@ export default {
clearInterval(logoutInterval)
},
async toHome() {
if (this.showhome) {
this.$store.dispatch('app/setChoicepart')
this.$router.push('/')
} else {
this.goToRootPage()
}
},
handleAlarm() {},
getAlarm() {
@ -328,18 +329,49 @@ export default {
</script>
<style lang="scss" scoped>
.time-menu {
display: inline-block;
}
.navbar {
height: 48px;
height: calc(48px * var(--beilv));
// height: calc(100vh / 1600 * 80);
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// padding-right: calc(100vw / 2560 * 32);
padding-right: calc(24px * var(--beilv));
display: flex;
justify-content: space-between;
align-items: center;
.homeNavIcon {
cursor: pointer;
color: #fff;
line-height: 1;
font-weight: 500;
display: flex;
align-items: center;
// font-size: calc(100vw / 2560 * 28);
// letter-spacing: calc(100vw / 2560 * 2);
// padding-left: calc(100vw / 2560 * 32);
font-size: calc(24px * var(--beilv));
letter-spacing: calc(1px * var(--beilv));
padding-left: calc(24px * var(--beilv));
img {
width: calc(24px * var(--beilv));
height: calc(24px * var(--beilv));
margin-right: calc(12px * var(--beilv));
// width: calc(100vw / 2560 * 32);
// height: calc(100vw / 2560 * 32);
// margin-right: calc(100vw / 2560 * 16);
// width: 26px;
// height: 26px;
// marginright: 14px;
}
}
.hamburger-container {
line-height: 48px;
line-height: calc(48px * var(--beilv));
height: 100%;
float: left;
cursor: pointer;
@ -363,7 +395,7 @@ export default {
.right-menu {
float: right;
height: 100%;
line-height: 48px;
line-height: calc(48px * var(--beilv));
position: relative;
&:focus {
outline: none;
@ -372,17 +404,17 @@ export default {
.right-menu-back {
display: inline-block;
vertical-align: text-bottom;
font-size: 14px;
padding: 0 8px;
font-size: calc(14px * var(--beilv));
padding: 0 calc(8px * var(--beilv));
text-align: center;
cursor: pointer;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
padding: 0 calc(8px * var(--beilv));
height: 100%;
font-size: 18px;
font-size: calc(18px * var(--beilv));
color: #5a5e66;
vertical-align: text-bottom;
@ -396,46 +428,46 @@ export default {
}
}
.verticalBar {
height: 32px;
height: calc(32px * var(--beilv));
width: 0;
opacity: 0.49;
padding: 0;
border-right: 1px solid #fff;
position: relative;
top: -8px;
top: calc(-1 * 8px * var(--beilv));
}
.avatar-container {
.avatar-wrapper {
padding-top: 9px;
padding-top: calc(9px * var(--beilv));
position: relative;
width: 140px;
height: 48px;
width: calc(140px * var(--beilv));
height: calc(48px * var(--beilv));
.user-avatar {
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 16px;
width: calc(32px * var(--beilv));
height: calc(32px * var(--beilv));
border-radius: calc(16px * var(--beilv));
}
.avatar-username {
width: 80px;
width: calc(80px * var(--beilv));
text-align: center;
position: absolute;
font-size: 14px;
right: 13px;
top: 3px;
line-height: 25px;
font-size: calc(14px * var(--beilv));
right: calc(13px * var(--beilv));
top: calc(3px * var(--beilv));
line-height: calc(25px * var(--beilv));
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.avatar-roles {
width: 80px;
width: calc(80px * var(--beilv));
text-align: center;
position: absolute;
font-size: 14px;
top: 20px;
right: 13px;
line-height: 25px;
font-size: calc(14px * var(--beilv));
top: calc(20px * var(--beilv));
right: calc(13px * var(--beilv));
line-height: calc(25px * var(--beilv));
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -444,9 +476,9 @@ export default {
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
right: calc(-1 * 20px * var(--beilv));
top: calc(25px * var(--beilv));
font-size: calc(12px * var(--beilv));
}
}
}
@ -455,13 +487,13 @@ export default {
.dropdown-badge {
background: #ff4949;
color: #fff;
line-height: 16px;
border-radius: 8px;
padding: 0 8px;
line-height: calc(16px * var(--beilv));
border-radius: calc(8px * var(--beilv));
padding: 0 calc(8px * var(--beilv));
float: right;
margin-left: 5px;
margin-left: calc(5px * var(--beilv));
position: relative;
top: 7px;
top: calc(7px * var(--beilv));
}
.navbar-alarmbox {
text-align: center;

View File

@ -13,7 +13,6 @@ Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
{
path: '/3d-overview',
@ -2298,7 +2297,6 @@ export const dynamicRoutes = [
// },
]
},
{
path: '/basic',
component: Layout,

View File

@ -0,0 +1,235 @@
<template>
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'DianLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 应该在每个父组件为flex:1的echarts组件里都加上以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-dian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
const colors = ['#5470C6', '#EE6666', '#339888']
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
let data = [
//
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
//
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
//
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
]
let wendu = data[0]
let dianliu = data[1]
let dianya = data[2]
return {
chart: null,
option: {
color: colors,
legend: {
top: 4,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff9',
fontSize: 8
}
// data: ['ABC/v', 'ABC/a', '']
},
grid: {
top: 32,
left: 64,
bottom: 28
},
xAxis: [
{
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false },
axisLabel: {
color: '#fff9'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
yAxis: [
{
name: '电流/A',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 42,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: false
// lineStyle: {
// color: '#fff3'
// }
}
},
{
name: '电压/V',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 4,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 0,
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: false
// lineStyle: {
// color: '#fff3'
// }
}
},
{
name: '温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: '#fff9',
width: 1
}
},
type: 'value',
splitNumber: 4,
splitLine: {
lineStyle: {
color: '#fff3'
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
}
}
],
series: [
{
name: 'ABC三相电压/v',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliu,
symbol: 'none'
},
{
name: 'ABC三相电流/a',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianya,
symbol: 'none'
},
{
name: '电缆温度',
type: 'line',
yAxisIndex: 2,
// smooth: true,
emphasis: {
focus: 'series'
},
data: wendu,
symbol: 'none'
}
]
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
height: 100% !important;
}
</style>

View File

@ -0,0 +1,161 @@
<template>
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'FadianLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 应该在每个父组件为flex:1的echarts组件里都加上以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-fadian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
option: {
legend: {
itemGap: 8,
itemWidth: 10,
itemHeight: 10,
right: '5%',
textStyle: {
color: '#fff9'
}
},
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
grid: {
top: '30%',
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(12)
.fill(0)
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
axisTick: {
show: false
},
axisLabel: {
fontSize: 8,
color: '#fffa'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'value',
name: '压力/MPa',
nameTextStyle: {
fontSize: 10,
color: '#fff9',
align: 'right'
},
axisLine: {
show: false
},
axisLabel: {
fontSize: 8,
color: '#fffa'
// formatter: '{value} %'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
series: [
{
name: '天然气',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '氧气',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: 'CDA',
type: 'line',
symbol: 'none',
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
}
]
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
height: 100% !important;
}
</style>

View File

@ -2,7 +2,7 @@
<div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper">
<div class="el-table-wrapper fix-table">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table
key="LeftContentEquipmentCheck1"
@ -10,10 +10,15 @@
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" />
<el-table-column label="所属产线" prop="pl" />
<el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" />
<el-table-column label="设备名称" prop="eqName" align="center" />
<el-table-column label="所属产线" prop="pl" align="center" />
<el-table-column label="提示等级" prop="warningLevel" align="center">
<template slot-scope="scope">
<!-- <component :is="PriorityComponent"></component> -->
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="巡检内容" prop="checkContent" align="center" />
</el-table>
</div>
<!-- <div class="el-table-wrapper">
@ -35,31 +40,70 @@
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const PriorityComponent = {
name: 'PriorityComponent',
props: {
injectData: Object
},
computed: {
bgColor() {
const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
return colors[this.injectData.priority - 1]
},
priorityText() {
return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
}
},
methods: {},
render: function(h) {
return h(
'span',
{
style: {
display: 'inline-block',
borderRadius: '2px',
padding: '2px 6px',
color: '#fff',
opacity: '0.6',
fontSize: '12px',
lineHeight: 1,
backgroundColor: this.bgColor
}
},
this.priorityText
)
}
}
const tableProps = [
{ prop: 'eqName', label: '设备名称', width: 120, resizable: false },
{ prop: 'pl', label: '所属产线', width: 120, resizable: false },
{ prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
{ prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
]
// const tableProps = [
// { prop: 'eqName', label: '', width: 120, resizable: false },
// { prop: 'pl', label: '线', width: 120, resizable: false },
// { prop: 'warningLevel', label: '', width: 120, resizable: false },
// { prop: 'checkContent', label: '', width: 120, resizable: false }
// ]
const tableData = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
{ eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
// { eqName: '', pl: '线3', warningLevel: 3, checkContent: '' },
// { eqName: '', pl: '线2', warningLevel: 2, checkContent: '' }
]
const tableData2 = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
// const tableData2 = [
// { eqName: 'A', pl: '线1', warningLevel: 1, checkContent: '' },
// { eqName: 'B', pl: '线1', warningLevel: 1, checkContent: '' }
// { eqName: '', pl: '线3', warningLevel: 3, checkContent: '' },
// { eqName: '', pl: '线2', warningLevel: 2, checkContent: '' }
]
// ]
export default {
name: 'LeftContentEquipmentCheck',
components: {},
components: { PriorityComponent },
data() {
return { tableProps, tableData, tableData2 }
return { tableData }
},
created() {},
mounted() {},
@ -68,9 +112,17 @@ export default {
</script>
<style scoped>
.fix-table >>> .el-table td .cell {
width: 60% !important;
margin: auto;
text-align: left;
}
.left-content-equipment-check {
height: calc(100% - 32px);
display: flex;
gap: calc(100vmin / 1920 * 36);
overflow: hidden;
}
.el-table-wrapper {
@ -79,7 +131,7 @@ export default {
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
/* overflow-x: scroll; */
}
.el-table-wrapper >>> * {
@ -96,6 +148,8 @@ export default {
background-color: transparent;
color: #fff9;
border: 0;
height: 100%;
overflow-y: auto;
}
.el-table-wrapper >>> .el-table th.is-leaf,

View File

@ -7,14 +7,14 @@
<script>
import { default as pic1 } from './assets/monitor/1.png'
import { default as pic2 } from './assets/monitor/2.png'
import { default as pic3 } from './assets/monitor/3.png'
// import { default as pic3 } from './assets/monitor/3.png'
export default {
name: '',
data() {
return {
images: [pic1, pic2, pic3]
images: [pic1, pic2]
}
},
created() {},
@ -26,15 +26,15 @@ export default {
<style scoped>
.left-content-monitoring {
width: 100%;
/* height: calc(100% - 48px); */
height: calc(100% - 32px);
display: flex;
gap: calc(100vw / 1920 * 16);
}
.monitor-pic {
height: 100%;
flex: 1;
height: 128px;
background-position: 100% 100%;
background-position: 100% 50%;
background-size: cover;
background-repeat: no-repeat;
}

View File

@ -2,7 +2,7 @@
<div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper">
<div class="el-table-wrapper fix-table">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table
key="LeftContentOrder1"
@ -10,10 +10,33 @@
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="规格" prop="specs" :resizable="true" />
<el-table-column label="完成度" prop="finished" :resizable="true" />
<el-table-column
label="订单编号"
prop="orderCode"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column
label="客户名称"
prop="clientName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column label="规格" prop="specs" :resizable="true" align="center" :width="100" />
<el-table-column label="完成度" prop="finished" :resizable="true" align="center" :width="100">
<template slot-scope="scope">
<el-progress
class="lb-progress-bar"
type="circle"
:percentage="scope.row.finished"
:width="14"
:stroke-width="2"
color="#47FF27"
/>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div class="el-table-wrapper">
@ -41,8 +64,8 @@ const tableData = [
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
// { orderCode: 'DD202200915', clientName: '', specs: '50cm', finished: 77 }
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
]
const tableData2 = [
@ -68,6 +91,12 @@ export default {
</script>
<style scoped>
.fix-table >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.left-content-equipment-check {
display: flex;
gap: calc(100vw / 1920 * 16);
@ -79,7 +108,7 @@ export default {
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
overflow-x: auto;
}
.el-table-wrapper >>> * {
@ -131,4 +160,13 @@ export default {
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
.lb-progress-bar {
left: 30px;
display: flex;
}
.lb-progress-bar >>> .el-progress__text {
color: #fff9;
left: -85%;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div class="public-consume__inner">
<div class="water-area">
<!-- <div class="water-area">
<TechyBarChart
:id="'water-chart'"
key="waterchart"
@ -23,6 +23,97 @@
:x-data="['天然气', '氧气', 'CDA']"
:series-data="[8.2, 10, 6.1]"
/>
</div> -->
<div>
<TechyBox class="water-consume">
<div class="header-part ">
<img src="./assets/consume/s.png" width="32" height="32" alt="water" />
<span></span>
</div>
<div class="content-part">
<div class="row">
<span class="name"> &nbsp;&nbsp;&nbsp;</span>
<span class="diy-process-bar color-1" />
<span class="amount">
39m
<sup>3</sup>
</span>
</div>
<div class="row">
<span class="name">循环水</span>
<span class="diy-process-bar color-2" />
<span class="amount">
239m
<sup>3</sup>
</span>
</div>
<div class="row">
<span class="name">自来水</span>
<span class="diy-process-bar color-3" />
<span class="amount">
23m
<sup>3</sup>
</span>
</div>
</div>
</TechyBox>
</div>
<div>
<TechyBox class="gas-consume">
<div class="header-part ">
<img src="./assets/consume/gas.png" width="32" height="32" alt="qi" />
<span></span>
</div>
<div class="content-part">
<div class="row">
<span class="name">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="diy-process-bar color-1" />
<span class="amount">
39Pa
</span>
</div>
<div class="row">
<span class="name">CDA</span>
<span class="diy-process-bar color-2" />
<span class="amount">
239pa
</span>
</div>
<div class="row">
<span class="name">天然气</span>
<span class="diy-process-bar color-3" />
<span class="amount">
23Pa
</span>
</div>
</div>
</TechyBox>
</div>
<div style="flex: 1;">
<TechyBox class="dian-consume">
<div class="header-part">
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
<span></span>
</div>
<div class="content-part">
<DianChart />
</div>
</TechyBox>
</div>
<div style="flex: 1;">
<TechyBox class="elec-consume">
<div class="header-part">
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
<span>发电</span>
</div>
<div class="content-part">
<FadianChart />
</div>
</TechyBox>
</div>
</div>
</template>
@ -30,10 +121,12 @@
<script>
import TechyBarChart from './TechyBarChart.vue'
import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue'
import FadianChart from './FadianChart.vue'
import DianChart from './DianChart.vue'
export default {
name: 'LeftContentPublicConsume',
components: { TechyBarChart, TechyLineChart },
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
data() {
return {}
},
@ -47,10 +140,13 @@ export default {
.public-consume__inner {
height: calc(100% - 32px);
width: 100%;
display: grid;
/* display: grid;
grid-template-areas:
'water elec elec gas'
'water elec-gen elec-gen gas';
'water elec-gen elec-gen gas'; */
display: flex;
flex-direction: column;
gap: calc(100vmin / 1920 * 16);
}
.water-area {
@ -69,4 +165,93 @@ export default {
/* .elec-area,.elec-gen-area {
max-height: calc((100% - 32px) / 2 - 16px);
} */
.techy-box {
padding: calc(100vmin / 1920 * 16);
display: flex;
}
.header-part {
height: 100%;
width: calc(100vmin / 1920 * 96);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* overflow: hidden; */
margin-right: 16px;
position: relative;
}
.header-part.has-border::after {
content: '';
position: absolute;
top: 0;
right: -8px;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, #fff9, transparent);
}
.header-part > span {
color: #fffc;
font-size: 0.8em;
}
.content-part {
display: flex;
flex-direction: column;
font-size: calc(100vmin / 1920 * 18);
color: #fff9;
flex: 1 1;
gap: calc(100vmin / 1920 * 8);
}
.row {
display: flex;
align-items: center;
width: 100%;
height: calc(100vmin / 1920 * 28);
}
.row > .name,
.row > .amount {
white-space: nowrap;
width: 12%;
}
.row > .amount {
text-align: right;
}
.diy-process-bar {
margin: 0 8px;
border-radius: 7px;
height: calc(100vmin / 1920 * 14);
/* margin: 0 8px;
border-radius: 7px; */
/* height: 8px; */
flex: 1 1;
background-color: #fff3;
overflow: hidden;
position: relative;
}
.diy-process-bar::after {
content: '';
position: absolute;
border-radius: 7px;
width: 30%;
height: 100%;
}
.diy-process-bar.color-1::after {
background: linear-gradient(to right, #178be9, #67b3f2);
}
.diy-process-bar.color-2::after {
background: linear-gradient(to right, #2ec6b4, #85f6e9);
}
.diy-process-bar.color-3::after {
background: linear-gradient(to right, #ff8bc3, #eb46a1);
}
</style>

View File

@ -1,17 +1,34 @@
<template>
<div class="right-content-alert">
<div class="el-table-wrapper">
<div class="el-table-wrapper fix-table">
<el-table
key="RightContentAlertTable"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="故障等级" prop="level" :resizable="true" />
<el-table-column label="故障内容" prop="content" :resizable="true" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
<el-table-column
label="设备名称"
prop="eqName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column
label="所属产线"
prop="plName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
<template slot-scope="scope">
<!-- <component :is="PriorityComponent"></component> -->
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
</el-table>
</div>
</div>
@ -20,18 +37,52 @@
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const PriorityComponent = {
name: 'PriorityComponent',
props: {
injectData: Object
},
computed: {
bgColor() {
const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
return colors[this.injectData.priority - 1]
},
priorityText() {
return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
}
},
methods: {},
render: function(h) {
return h(
'span',
{
style: {
display: 'inline-block',
borderRadius: '2px',
padding: '2px 6px',
color: '#fff',
opacity: '0.6',
fontSize: '12px',
lineHeight: 1,
backgroundColor: this.bgColor
}
},
this.priorityText
)
}
}
const tableData = [
{ eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 },
{ eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 },
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 },
{ eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 },
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 }
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
]
export default {
name: 'RightContentAlert',
components: {},
components: { PriorityComponent },
data() {
return { tableData }
},
@ -42,18 +93,26 @@ export default {
</script>
<style scoped>
.left-content-equipment-check {
.fix-table >>> .el-table td .cell {
width: 80% !important;
margin: auto;
text-align: left;
}
.right-content-alert {
height: calc(100% - 32px);
display: flex;
gap: calc(100vw / 1920 * 16);
overflow: hidden;
}
.el-table-wrapper {
flex: 1;
}
.left-content-equipment-check > div {
.right-content-alert > div {
overflow: hidden;
overflow-x: scroll;
/* overflow-x: scroll; */
}
.el-table-wrapper >>> * {
@ -70,6 +129,8 @@ export default {
background-color: transparent;
color: #fff9;
border: 0;
height: 100%;
overflow-y: auto;
}
.el-table-wrapper >>> .el-table th.is-leaf,

View File

@ -14,74 +14,269 @@ export default {
props: {
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
default: 'default-fault-analysis-id'
}
},
data() {
let totalRate = 0
const colors = [
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#FB418C00', offset: 0.1 },
{ color: '#FB418C', offset: 1 } //
],
global: false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#DDB11200', offset: 0.1 },
{ color: '#DDB112', offset: 1 } //
],
global: false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#1A99FF00', offset: 0.1 },
{ color: '#1A99FF', offset: 1 } //
],
global: false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#A691FF00', offset: 0.1 },
{ color: '#A691FF', offset: 1 } // 3
],
global: false
},
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#49FBD600', offset: 0.1 },
{ color: '#49FBD6', offset: 1 } // 绿
],
global: false
}
]
return {
chart: null,
option: {
// default configs
configs: {
title: {
left: 'center',
top: '30%',
text: '总共',
textAlign: 'center',
left: '64%',
top: '35%',
text: '33039',
textStyle: {
color: '#888',
fontSize: 10
color: '#fff',
fontSize: 14,
fontWeight: 'normal'
},
subtext: 880,
subtext: '总数',
subtextStyle: {
color: '#fff',
fontSize: 24
fontSize: 10,
fontWeight: 'lighter'
}
},
legend: {
top: '5%',
bottom: '0%',
left: '-5%',
orient: 'vertical',
icon: 'none',
itemGap: 5,
itemWidth: 10,
formatter: function(name) {
// test data - dynamic
const testData = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 },
{ name: 'D', value: 400 },
{ name: 'E', value: 500 }
]
let pieLegendVale = {}
testData.filter((item, index) => {
if (item.name === name) {
pieLegendVale = item
}
})
const color = ['c', 'd', 'e', 'f', 'g']
const arr = [
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
'{b|' + pieLegendVale.name + '}',
'{a|' + pieLegendVale.value + '}'
]
return arr.join(' ')
},
textStyle: {
rich: {
a: {
// align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255, 0.7)',
lineHeight: 16
},
b: {
// verticalAlign: 'top',
// align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255)'
},
c: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#FB418C'
// backgroundColor: '#1A99FF'
},
d: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#DDB112'
// backgroundColor: '#A691FF'
},
e: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#1A99FF'
// backgroundColor: '#FB418C'
},
f: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#A691FF'
// backgroundColor: '#49FBD6'
},
g: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#49FBD6'
// backgroundColor: '#DDB112'
}
}
}
},
series: [
{
name: 'Fault Analysis Chart',
name: 'PieForm',
type: 'pie',
center: ['65%', '50%'],
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {},
emphasis: {
avoidLabelOverlap: true,
label: {
show: true,
fontSize: '12'
formatter: params => {
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
first: { color: '#FB418C', fontSize: 8 },
second: { color: '#DDB112', fontSize: 8 },
third: { color: '#1A99FF', fontSize: 8 },
fourth: { color: '#A691FF', fontSize: 8 },
fifth: { color: '#49FBD6', fontSize: 8 }
}
},
data: Array(7)
.fill(0)
.map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
itemStyle: {
color: params => {
/** 计算渐变方向的过程,只靠 dataIndex 不太行 */
const { dataIndex, percent } = params
const colorGradient = colors[dataIndex]
if (totalRate + percent < 25) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
} else if (totalRate + percent < 50) {
colorGradient.x = 0
colorGradient.y = 0
colorGradient.x2 = 1
colorGradient.y2 = 1
} else if (totalRate + percent < 100) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
}
totalRate += percent
return colorGradient
}
},
data: [
{ value: 100, name: 'A' },
{ value: 200, name: 'B' },
{ value: 300, name: 'C' },
{ value: 400, name: 'D' },
{ value: 500, name: 'E' }
]
}
]
}
}
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
console.log('here...')
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
this.chart.setOption(this.option)
this.chart.setOption(this.configs)
this.chart.resize()
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.right-content-quality-analysis {
height: calc(100% - 32px);

View File

@ -1,5 +1,5 @@
<template>
<div style="height: 10vh; width: 100%; ">
<div style="height: calc(100% - 36px); width: 100%;">
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</div>
</template>
@ -33,14 +33,23 @@ export default {
return {
chart: null,
option: {
color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
grid: {
top: '5%',
top: '20%',
left: 0,
right: '5%',
right: 12,
bottom: 0,
containLabel: true
},
legend: {
width: '72%',
right: 12,
itemWidth: 12,
itemHeight: 8,
textStyle: {
color: '#fffc'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
@ -63,6 +72,12 @@ export default {
},
yAxis: {
type: 'value',
name: '成品率',
nameTextStyle: {
color: '#fffc',
align: 'right',
fontSize: 8
},
axisLine: {
show: false
},
@ -83,6 +98,27 @@ export default {
name: '产线1',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#59CBE866' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
@ -91,6 +127,27 @@ export default {
name: '产线2',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#E93CAC66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
@ -99,6 +156,27 @@ export default {
name: '产线3',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF734566' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
@ -107,6 +185,27 @@ export default {
name: '产线4',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9452FF66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
@ -115,6 +214,27 @@ export default {
name: '产线5',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6A6E8766' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))

View File

@ -1,28 +1,39 @@
<template>
<div class="right-content-quality-analysis">
<div v-for="item in datalist" :key="item.name" class="analysis-item">
<techy-analysis-bar
v-for="(item, index) in datalist"
:key="index"
:name="item.name"
:amount="item.value"
color="green"
/>
<!-- <div v-for="item in datalist" :key="item.name" class="analysis-item">
<span class="absolute" :style="{ backgroundColor: item.color }" />
<span>{{ item.name }}</span>
<span>{{ item.value }}</span>
</div>
</div> -->
</div>
</template>
<script>
import TechyAnalysisBar from './TechyAnalysisBar.vue'
export default {
name: 'RightContentQualityAnalysis',
components: { TechyAnalysisBar },
props: {},
data() {
return {
datalist: [
{ name: '热端', value: 20, color: '#0b88ff' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '热端', value: 2332039120, color: '#0b88ff' },
{ name: '原片上片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边', value: 23, color: '#950bff' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '原片磨边', value: 30, color: '#0bffa6' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边', value: 23, color: '#950bff' },
{ name: '磨边镀膜膜', value: 23, color: '#950bff' },
{ name: '镀膜', value: 10, color: '#ff0bc2' },
{ name: '清晰', value: 66, color: '#ff7d0b' }
]
@ -38,11 +49,11 @@ export default {
.right-content-quality-analysis {
height: calc(100% - 32px);
overflow: hidden;
overflow-y: scroll; /** 右边会有多的padding给滑道 */
overflow-y: auto; /** 右边会有多的padding给滑道 */
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
gap: calc(100vw / 1920 * 8);
gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20);
justify-content: end;
}

View File

@ -1,20 +1,42 @@
<template>
<div style="height: 12vh; width: 100%; ">
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</div>
<techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
<new-bar
chart-name="realtime-cost-production"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
:data-list="[
{
topColor: 'rgba(59, 76, 118, 0.2)',
bottomColor: '#49FBD6',
name: '产量',
data: [64, 91, 55, 65, 37, 77]
},
{
topColor: 'rgba(59, 76, 118, 0.2)',
bottomColor: '#31A2FF',
name: '能耗',
data: [32, 65, 65, 54, 37, 77]
}
]"
/>
</techy-box>
</template>
<script>
import echarts from 'echarts'
import TechyBox from './TechyBox.vue'
import newBar from './newBar.vue'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'RealtimeProductionHorizontalBarChart',
components: { TechyBox, newBar },
mixins: [resize],
props: {
id: {
type: String,
default: 'default-id'
default: 'default-linechart-id'
},
title: {
type: String,
@ -103,7 +125,6 @@ export default {
},
mounted() {
this.$nextTick(() => {
console.log('here...')
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})

View File

@ -0,0 +1,198 @@
<template>
<div class="quality-analysis-bar" :class="`border-${color}`">
<div class="placeholder-block-wrapper">
<div class="justify-end">
<div class="placeholder-block" :class="`block-${color}-1`" />
<div class="placeholder-block" :class="`block-${color}-2`" />
<div class="placeholder-block" :class="`block-${color}-3`" />
<div class="placeholder-block" :class="`block-${color}-4`" />
<div class="placeholder-block" :class="`block-${color}-5`" />
</div>
</div>
<span class="quality-analysis-bar__name">
{{ name }}
</span>
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
</div>
</template>
<script>
export default {
name: 'TechyAnalysisBar',
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
}
},
props: {
name: {
type: String,
default: 'null'
},
amount: {
type: Number,
default: 0
},
color: {
type: String,
default: 'green'
}
},
data() {
return {}
},
methods: {}
}
</script>
<style scoped>
.flex {
display: flex;
}
.justify-end {
justify-content: flex-end;
}
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
display: flex;
}
.border-green {
border: 1px solid #35abad;
}
.border-blue {
border: 1px solid #49b2ff;
}
.border-orange {
border: 1px solid #ffb94d;
}
.border-pink {
border: 1px solid #ed879f;
}
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 200px;
position: absolute;
top: 0;
right: 0;
display: flex;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
/* border-radius: 1px; */
}
.block-green-5 {
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
/* margin-left: 4px; */
}
.block-green-4 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
}
.block-green-3 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
}
.block-green-2 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
}
.block-green-1 {
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
background: transparent;
}
/* ================ blue ================ */
.block-blue-5 {
background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
/* margin-left: 4px; */
}
.block-blue-4 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
}
.block-blue-3 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
}
.block-blue-2 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
}
.block-blue-1 {
/* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
background: transparent;
}
/* ================ orange ================ */
.block-orange-5 {
background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
/* margin-left: 4px; */
}
.block-orange-4 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
}
.block-orange-3 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
}
.block-orange-2 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
}
.block-orange-1 {
/* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
background: transparent;
}
/* ================ pink ================ */
.block-pink-5 {
background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
/* margin-left: 4px; */
}
.block-pink-4 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
}
.block-pink-3 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
}
.block-pink-2 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
}
.block-pink-1 {
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
background: transparent;
}
.quality-analysis-bar__name {
text-align: center;
white-space: nowrap;
overflow-wrap: break-word;
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
}
.quality-analysis-bar__amount {
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 50%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
}
</style>

View File

@ -10,11 +10,12 @@ export default {}
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.0168);
box-shadow: inset 0 0 17px 0 rgba(255, 255, 255, 0.168);
display: inline-block;
height: 100%;
width: 100%;
border-radius: .25rem;
border-radius: 4px;
backdrop-filter: blur(2px);
}
</style>

View File

@ -12,7 +12,7 @@
</template>
<div class="container-title-wrapper">
<span class="container-icon" v-html="icon" />
<span class="container-icon" v-html="computeIcon" />
<span class="container-title">{{ title }}</span>
</div>
@ -45,18 +45,238 @@ const defaultIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version
</g>
</svg>`
const menuIcon = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-2工单管理" transform="translate(-384.000000, -253.000000)">
<g id="编组-16备份-5" transform="translate(360.000000, 229.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#CAE5DD" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M18.0901,3.8098 L16.6101,3.8098 L16.6101,4.7298 L18.0901,4.7298 C18.5481,4.7298 18.9201,5.1018 18.9201,5.5598 L18.9201,19.0898 C18.9201,19.5488 18.5481,19.9198 18.0901,19.9198 L5.9501,19.9198 C5.4911,19.9198 5.1201,19.5488 5.1201,19.0898 L5.1201,5.5598 C5.1201,5.1018 5.4911,4.7298 5.9501,4.7298 L7.6501,4.7298 L7.6501,3.8098 L5.9501,3.8098 C4.9861,3.8158 4.2051,4.5958 4.2001,5.5598 L4.2001,19.0898 C4.2051,20.0538 4.9861,20.8348 5.9501,20.8398 L18.1001,20.8398 C19.0641,20.8348 19.8441,20.0538 19.8501,19.0898 L19.8501,5.5598 C19.8441,4.5918 19.0581,3.8098 18.0901,3.8098" id="Fill-3" fill="#6EF9DE"></path>
<path d="M5.95,4.1702 C5.182,4.1702 4.56,4.7922 4.56,5.5602 L4.56,19.0902 C4.56,19.8582 5.182,20.4802 5.95,20.4802 L18.1,20.4802 C18.867,20.4802 19.49,19.8582 19.49,19.0902 L19.49,5.5602 C19.49,4.7922 18.867,4.1702 18.1,4.1702 L16.95,4.1702 L16.95,4.3402 L18.07,4.3402 C18.721,4.3402 19.25,4.8682 19.25,5.5202 L19.25,19.0502 C19.25,19.7012 18.721,20.2302 18.07,20.2302 L5.95,20.2302 C5.298,20.2302 4.77,19.7012 4.77,19.0502 L4.77,5.5602 C4.748,4.9082 5.258,4.3622 5.909,4.3402 C5.923,4.3402 5.936,4.3402 5.95,4.3402 L7.3,4.3402 L7.3,4.1302 L5.95,4.1702 Z M18.62,21.1902 L5.41,21.1902 C4.543,21.1902 3.84,20.4872 3.84,19.6202 L3.84,5.0302 C3.84,4.1632 4.543,3.4602 5.41,3.4602 L8,3.4602 L8,5.0902 L6.61,5.0902 C5.98,5.0902 5.47,5.6002 5.47,6.2302 L5.47,18.4202 C5.47,19.0492 5.98,19.5602 6.61,19.5602 L17.42,19.5602 C18.05,19.5602 18.56,19.0492 18.56,18.4202 L18.56,6.2302 C18.56,5.6002 18.05,5.0902 17.42,5.0902 L16.26,5.0902 L16.26,3.4602 L18.62,3.4602 C19.487,3.4602 20.19,4.1632 20.19,5.0302 L20.19,19.6202 C20.19,20.4872 19.487,21.1902 18.62,21.1902 L18.62,21.1902 Z" id="Fill-5" fill="#6EF9DE"></path>
<path d="M8.5101,2.5398 L15.6801,2.5398 C16.3151,2.5398 16.8301,3.0548 16.8301,3.6898 L16.8301,4.6398 C16.8301,5.2748 16.3151,5.7898 15.6801,5.7898 L8.5101,5.7898 C7.8751,5.7898 7.3601,5.2748 7.3601,4.6398 L7.3601,3.6898 C7.3601,3.0548 7.8751,2.5398 8.5101,2.5398" id="Fill-7" fill="#6EF9DE"></path>
<path d="M16.3299,8.5398 C16.3299,9.0398 16.1299,9.2898 15.7199,9.2898 L9.8299,9.2898 C9.4299,9.2898 9.2199,9.0398 9.2199,8.5398 C9.2199,8.0398 9.4299,7.7998 9.8299,7.7998 L15.7199,7.7998 C16.1299,7.7998 16.3299,8.0498 16.3299,8.5398" id="Fill-9" fill="#6EF9E1"></path>
<path d="M7.7,7.8098 L7.71,7.8098 C8.118,7.8098 8.45,8.1418 8.45,8.5498 L8.45,8.5598 C8.45,8.9688 8.118,9.2998 7.71,9.2998 L7.7,9.2998 C7.291,9.2998 6.96,8.9688 6.96,8.5598 L6.96,8.5498 C6.96,8.1418 7.291,7.8098 7.7,7.8098" id="Fill-11" fill="#6DF8E1"></path>
<path d="M16.3299,12.2698 C16.3299,12.7698 16.0499,13.0198 15.4799,13.0198 L10.0799,13.0198 C9.5099,13.0198 9.2199,12.7698 9.2199,12.2698 C9.2199,11.7698 9.5099,11.5198 10.0799,11.5198 L15.4799,11.5198 C16.0499,11.5198 16.3299,11.7698 16.3299,12.2698" id="Fill-13" fill="#6EF9E1"></path>
<path d="M7.7,11.5598 L7.71,11.5598 C8.118,11.5598 8.45,11.8918 8.45,12.2998 L8.45,12.3098 C8.45,12.7188 8.118,13.0498 7.71,13.0498 L7.7,13.0498 C7.291,13.0498 6.96,12.7188 6.96,12.3098 L6.96,12.2998 C6.96,11.8918 7.291,11.5598 7.7,11.5598" id="Fill-15" fill="#6DF8E1"></path>
<path d="M16.3299,16.0198 C16.3299,16.5198 16.1299,16.7698 15.7199,16.7698 L9.8299,16.7698 C9.4299,16.7698 9.2199,16.5198 9.2199,16.0198 C9.2199,15.5198 9.4299,15.2698 9.8299,15.2698 L15.7199,15.2698 C16.1299,15.2698 16.3299,15.5198 16.3299,16.0198" id="Fill-17" fill="#6EF9E1"></path>
<path d="M7.7,15.2898 L7.71,15.2898 C8.118,15.2898 8.45,15.6218 8.45,16.0298 L8.45,16.0398 C8.45,16.4488 8.118,16.7798 7.71,16.7798 L7.7,16.7798 C7.291,16.7798 6.96,16.4488 6.96,16.0398 L6.96,16.0298 C6.96,15.6218 7.291,15.2898 7.7,15.2898" id="Fill-19" fill="#6DF8E1"></path>
</g>
</g>
</g>
</g>
</svg>`
const lightHatIcon = `<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>hatplus</title>
<defs>
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
<stop stop-color="#4BFFC8" offset="0%"></stop>
<stop stop-color="#45F2EC" offset="100%"></stop>
</linearGradient>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-998.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(974.000000, 230.000000)">
<g id="编组-6" transform="translate(24.000000, 24.000000)">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="异常" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M9.00003613,1.00009438 C7.45266489,0.991339384 5.96400493,1.59197413 4.85604619,2.6721807 C3.77420104,3.74179852 3.16375561,5.19879645 3.16005953,6.72012488 L3.16005953,14.5280306 L14.7760126,14.5280306 L14.7760126,6.72010926 C14.7746725,5.19671341 14.1605756,3.73789487 13.0720104,2.67216507 C11.9832986,1.60721536 10.5229694,1.00760431 9.0000205,1.00009438 L9.00003613,1.00009438 Z M8.52003548,12.6560576 L8.35203526,8.87208057 L5.48804703,8.87208057 L9.24800521,4.12815624 L9.56800564,7.18412206 L12.2880093,7.28012148 L8.48800418,12.6560576 L8.52003548,12.6560576 Z M1.00003551,16.1280053 C0.997937773,15.8953576 1.08886376,15.671504 1.25262424,15.5062394 C1.41638472,15.3409748 1.63939864,15.2480106 1.87205781,15.2480106 L16.1280144,15.2480106 C16.3586463,15.2508825 16.5792874,15.3425823 16.7440153,15.5040247 C16.9059435,15.6716664 16.9975415,15.894943 17,16.1280053 C17,16.6095886 16.6096013,17 16.1280144,17 L1.87205781,17 C1.39047096,17 1.00003551,16.6095886 1.00003551,16.1280053 L1.00003551,16.1280053 Z" id="形状" fill="url(#linearGradient-1)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
//
const zhejiaoMenuListIcon = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-2工单管理" transform="translate(-1040.000000, -253.000000)">
<g id="编组-16备份-6" transform="translate(1016.000000, 229.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M16.3899,8.0902 C16.3899,8.5802 16.1899,8.8202 15.7999,8.8202 L10.0999,8.8202 C9.6999,8.8202 9.5099,8.5802 9.5099,8.0902 C9.5099,7.6002 9.6999,7.3702 10.0999,7.3702 L15.7999,7.3702 C16.1899,7.3702 16.3899,7.6102 16.3899,8.0902" id="Fill-3" fill="#6EF9E1"></path>
<path d="M14.51,11.95 C14.51,12.43 14.31,12.68 13.91,12.68 L10.11,12.68 C9.71,12.68 9.51,12.43 9.51,11.95 C9.51,11.47 9.71,11.23 10.11,11.23 L13.91,11.23 C14.31,11.23 14.51,11.47 14.51,11.95" id="Fill-5" fill="#6EF9E1"></path>
<path d="M12.5701,15.7801 C12.5701,16.2601 12.3701,16.5001 11.9601,16.5001 L10.1201,16.5001 C9.7101,16.5001 9.5101,16.2601 9.5101,15.7801 C9.5101,15.3001 9.7101,15.0601 10.1201,15.0601 L11.9601,15.0601 C12.3701,15.0601 12.5701,15.3001 12.5701,15.7801" id="Fill-7" fill="#6EF9E1"></path>
<path d="M8.0398,7.39 L8.0398,7.39 C8.4378,7.39 8.7598,7.712 8.7598,8.11 C8.7598,8.508 8.4378,8.83 8.0398,8.83 C7.6428,8.83 7.3198,8.508 7.3198,8.11 C7.3198,7.712 7.6428,7.39 8.0398,7.39" id="Fill-9" fill="#6DF8E1"></path>
<path d="M8.0398,11.2699 L8.0398,11.2699 C8.4378,11.2699 8.7598,11.5919 8.7598,11.9899 C8.7598,12.3879 8.4378,12.7099 8.0398,12.7099 C7.6428,12.7099 7.3198,12.3879 7.3198,11.9899 C7.3198,11.5919 7.6428,11.2699 8.0398,11.2699" id="Fill-11" fill="#6DF8E1"></path>
<path d="M8.0398,15.1502 L8.0398,15.1502 C8.4378,15.1502 8.7598,15.4722 8.7598,15.8702 C8.7598,16.2672 8.4378,16.5902 8.0398,16.5902 C7.6428,16.5902 7.3198,16.2672 7.3198,15.8702 C7.3198,15.4722 7.6428,15.1502 8.0398,15.1502" id="Fill-13" fill="#6DF8E1"></path>
<path d="M15.5501,19.7801 L15.5501,16.7801 L18.3401,16.7801 L15.5501,19.7801 Z M19.2201,9.6501 C18.7891,9.6501 18.4401,9.9991 18.4401,10.4301 C18.4401,10.4331 18.4401,10.4371 18.4401,10.4401 L18.4401,15.1501 L14.3801,15.1501 C14.1571,15.1551 13.9801,15.3371 13.9801,15.5601 L13.9801,20.0301 L6.6901,19.9601 C6.0901,19.9601 5.5901,19.1201 5.5901,18.5001 L5.5901,5.7801 C5.5901,5.1711 6.0811,4.6761 6.6901,4.6701 L17.3401,4.6701 C17.9491,4.6761 18.4401,5.1711 18.4401,5.7801 L18.4401,7.7801 C18.4411,8.2111 18.7911,8.5591 19.2211,8.5581 C19.6511,8.5581 19.9991,8.2101 20.0001,7.7801 L20.0001,4.7801 C19.9731,3.9181 19.2721,3.2301 18.4101,3.2201 L5.5001,3.2201 C4.6551,3.2251 3.9741,3.9151 3.98006066,4.7601 L4.0501,20.0901 C4.0441,20.9351 4.7251,21.6241 5.5701,21.6301 L14.8101,21.6301 L14.8701,21.6301 L14.9301,21.6301 L19.7401,17.0401 C19.8511,16.9251 19.9121,16.7701 19.9101,16.6101 L19.9101,10.6601 C20.0331,10.2411 19.7941,9.8021 19.3751,9.6791 C19.3241,9.6641 19.2731,9.6551 19.2201,9.6501 L19.2201,9.6501 Z" id="Fill-15" fill="#6DF8E1"></path>
</g>
</g>
</g>
</g>
</svg>`
//
const trendAnalysisIcon = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -533.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 509.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-5" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-7" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-9" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-11" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-15" fill="#6FFADE"></path>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-19" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-21" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-23" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-25" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-27" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-29" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
//
const menuAnalysisIcon = `<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>
<defs>
<polygon id="path-1" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
<polygon id="path-3" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -529.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组" transform="translate(24.000000, 16.000000)">
<g>
<polygon id="Fill-1" fill="#6CC1B0" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M16.4896,19.530219 C15.2696,19.5352 14.2756,18.5512 14.2695728,17.3302 C14.2636,16.1092 15.2496,15.1152 16.4696,15.1101728 C17.6906,15.1042 18.6836,16.0902 18.6896,17.3092 L18.6896,17.3202 C18.6896,18.5372 17.7066,19.5242 16.4896,19.530219 M21.0696,20.9602 L19.5106,19.4002 C20.6666,17.7222 20.2446,15.4252 18.5666,14.2672 C16.8886,13.1102 14.5916,13.5332 13.4336,15.2112 C12.2776,16.8882 12.6996,19.1862 14.3776,20.3422 C15.6506,21.2202 17.3366,21.2122 18.5996,20.3202 L20.1496,21.8802 C20.2386,21.9672 20.3816,21.9672 20.4696,21.8802 L21.0696,21.2802 C21.1566,21.1902 21.1566,21.0492 21.0696,20.9602" id="Fill-3" fill="#6EF9E1"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-5" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-7" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-10"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-9" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(8.839800, 6.600000)" fill="#6EF9E1">
<path d="M7.1,0.73 C7.1,1.22 6.9,1.47 6.491,1.47 L0.61,1.47 C0.201,1.47 0,1.22 0,0.73 C0,0.24 0.201,0 0.61,0 L6.491,0 C6.9,0 7.1,0.24 7.1,0.73" id="Fill-11"></path>
<path d="M5.1703,4.6597 C5.1703,5.1497 4.9603,5.3997 4.5503,5.3997 L0.6203,5.3997 C0.2103,5.3997 0.0003,5.1497 0.0003,4.6597 C0.0003,4.1707 0.2103,3.9207 0.6203,3.9207 L4.5503,3.9207 C4.9603,3.9207 5.1703,4.1707 5.1703,4.6597" id="Fill-13"></path>
<path d="M3.1606,8.5904 C3.1606,9.0794 2.9506,9.3294 2.5296,9.3294 L0.6306,9.3294 C0.2106,9.3294 0.0006,9.0794 0.0006,8.5904 C0.0006,8.1004 0.2106,7.8504 0.6306,7.8504 L2.5296,7.8504 C2.9506,7.8504 3.1606,8.1004 3.1606,8.5904" id="Fill-15"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-17" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-19" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-22"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-21" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.609800, 6.600000)" fill="#6EF9E1">
<path d="M9.33,0.73 C9.33,1.22 9.07,1.47 8.53,1.47 L0.801,1.47 C0.27,1.47 0,1.22 0,0.73 C0,0.24 0.27,0 0.801,0 L8.53,0 C9.07,0 9.33,0.24 9.33,0.73" id="Fill-23"></path>
<path d="M6.79,4.6597 C6.79,5.1497 6.52,5.3997 5.971,5.3997 L0.811,5.3997 C0.27,5.3997 8.8817842e-16,5.1497 8.8817842e-16,4.6597 C8.8817842e-16,4.1707 0.27,3.9207 0.811,3.9207 L5.971,3.9207 C6.52,3.9207 6.79,4.1707 6.79,4.6597" id="Fill-25"></path>
<path d="M4.1601,8.5904 C4.1601,9.0794 3.8801,9.3294 3.3301,9.3294 L0.8301,9.3294 C0.2801,9.3294 0.0001,9.0794 0.0001,8.5904 C0.0001,8.1004 0.2801,7.8504 0.8301,7.8504 L3.3301,7.8504 C3.8801,7.8504 4.1601,8.1004 4.1601,8.5904" id="Fill-27"></path>
<path d="M13.9501,14.1197 C14.3091,14.1197 14.6001,14.4107 14.6001,14.7697 C14.6001,15.1297 14.3091,15.4207 13.9501,15.4207 C13.5911,15.4207 13.3001,15.1297 13.3001,14.7697 C13.3001,14.4107 13.5911,14.1197 13.9501,14.1197" id="Fill-29"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
//
const alertWarningIcon = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-1104.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(1080.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-15" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Stroke-17" stroke="#6EF9E1" stroke-width="0.5"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-19" fill="#6FFADE"></path>
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
//
const alertMenuIcon = `<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="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-48.000000, -872.000000)">
<g id="编组-17备份" transform="translate(24.000000, 856.000000)">
<g id="编组" transform="translate(24.000000, 16.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
<path d="M21.3174,18.5158014 L16.0874,18.5158014 C16.0584,18.5008014 16.0254,18.5008014 15.9974,18.5158014 C15.7554,18.6438014 15.6104,18.9018014 15.6274,19.1748014 C15.6274,19.5658014 15.8574,19.8748014 16.1364,19.8748014 L21.3174,19.8748014 C21.6074,19.8748014 21.8274,19.5658014 21.8274,19.1748014 C21.8274,18.7858014 21.6274,18.5158014 21.3174,18.5158014" id="Fill-19" fill="#6FFADE"></path>
<path d="M21.3174,15.9564014 L16.0874,15.9564014 C16.0584,15.9414014 16.0254,15.9414014 15.9974,15.9564014 C15.7554,16.0844014 15.6104,16.3424014 15.6274,16.6154014 C15.6274,17.0064014 15.8574,17.3154014 16.1364,17.3154014 L21.3174,17.3154014 C21.6074,17.3154014 21.8274,17.0064014 21.8274,16.6154014 C21.8274,16.2264014 21.6274,15.9564014 21.3174,15.9564014" id="Fill-19备份" fill="#6FFADE"></path>
<path d="M21.3174,13.3970014 L16.0874,13.3970014 C16.0584,13.3820014 16.0254,13.3820014 15.9974,13.3970014 C15.7554,13.5250014 15.6104,13.7830014 15.6274,14.0560014 C15.6274,14.4470014 15.8574,14.7560014 16.1364,14.7560014 L21.3174,14.7560014 C21.6074,14.7560014 21.8274,14.4470014 21.8274,14.0560014 C21.8274,13.6670014 21.6274,13.3970014 21.3174,13.3970014" id="Fill-19备份-2" fill="#6FFADE"></path>
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
//
const stackIcon = `<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="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-48.000000, -392.000000)" fill-rule="nonzero">
<g id="物料信息-" transform="translate(48.000000, 392.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M20.3505422,14.9151538 L20.458789,14.9215423 C20.8283324,15.1756033 20.9365283,16.0632505 20.5345696,16.3962497 L20.4405365,16.4586841 L12.3478497,20.7032297 C12.2016803,20.79009 11.8833705,20.8006382 11.6976954,20.7375186 L11.6173217,20.699832 L3.53524588,16.5181762 C3.13421554,16.2396631 3.13620989,15.4741677 3.38080569,15.0736815 L3.44148439,14.9881289 L3.57039169,14.9618461 L11.9916374,19.3126195 L20.3505422,14.9151538 Z M20.3505455,11.1907368 L20.4587026,11.1970677 C20.8283142,11.4506321 20.936545,12.3384142 20.5345732,12.6714428 L20.4405365,12.7338816 L12.3478497,16.9784271 C12.2016803,17.0652875 11.8833705,17.0758357 11.6976954,17.012716 L11.6173217,16.9750295 L3.53524588,12.7933736 C3.13421554,12.5148606 3.13620989,11.7493651 3.38080569,11.348879 L3.44148439,11.2633264 L3.57039169,11.2370435 L11.9916374,15.5876251 L20.3505455,11.1907368 Z M12.4463389,3.3309719 L12.5600247,3.40332636 L20.3179067,7.46797471 C20.3828378,7.50198626 20.4422319,7.54565391 20.4941486,7.59757438 C20.8671243,7.97146203 20.8671243,8.57668705 20.4940313,8.95069207 L20.4111763,9.02185105 L20.3185938,9.07973137 L12.5536247,13.1569789 C12.2525083,13.3810327 11.8526139,13.4065554 11.5389056,13.2394459 L11.4256662,13.1677617 L3.66901765,9.16124436 C3.60269972,9.12706228 3.54205927,9.0828421 3.48915918,9.0300661 C3.30967167,8.85060515 3.20883441,8.60718793 3.20883441,8.35337304 C3.20883441,8.09955815 3.30967167,7.85614093 3.48911133,7.67672785 L3.57020807,7.60674321 L3.66079174,7.54945114 L11.4274137,3.41400371 C11.7293235,3.18803429 12.1313281,3.16229769 12.4463389,3.3309719 Z M12.0031732,4.74717805 L5.24637717,8.34632811 L11.9321821,11.8491065 L18.7348003,8.27501628 L12.0031732,4.74717805 Z" id="形状结合" stroke="#6EF9E1" stroke-width="0.2" fill="#77FFF2"></path>
</g>
</g>
</g>
</svg>`
export default {
name: 'TechyContainer',
props: {
title: { type: String, default: '默认标题' },
icon: { type: String, default: defaultIcon },
icon: { type: String, default: 'defaultIcon' },
showCorner: {
type: Boolean,
default: true
}
},
computed: {
computeIcon() {
return this[this.icon] || this['defaultIcon']
}
},
data() {
return {}
return {
defaultIcon,
menuIcon,
lightHatIcon,
zhejiaoMenuListIcon,
trendAnalysisIcon,
menuAnalysisIcon,
alertWarningIcon,
alertMenuIcon,
stackIcon
}
},
mounted() {}
}
@ -75,7 +295,7 @@ export default {
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
/* background: rgba(20, 69, 100, 0.425); */
background: rgba(6, 16, 39, 0.3);
backdrop-filter: blur(1px);
backdrop-filter: blur(2px);
}
.line {

View File

@ -52,7 +52,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
@ -78,6 +77,16 @@ export default {
</script>
<style scoped>
@font-face {
font-family: 'zcoolqingkehuangyouti';
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.techy-header {
background: transparent;
display: flex;
@ -115,6 +124,7 @@ export default {
.date,
.time {
font-family: zcoolqingkehuangyouti, sans-serif;
font-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
@ -152,5 +162,4 @@ export default {
width: calc(100vmin / 1920 * 52);
height: calc(100vmin / 1920 * 52);
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,364 @@
<template>
<div
ref="chartContainer"
class="chartContainer"
:class="bindClass"
style="position: relative; width: 100%; height:100%"
/>
</template>
<script>
import echarts from 'echarts' // echarts theme
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
chartName: {
type: String,
default: ''
},
xlabelFontSize: {
type: Number,
default: 12
},
xlabelRotate: {
type: Number,
default: 0
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: []
}
},
computed: {
bindClass() {
return {
'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault',
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
}
}
},
mounted() {
if (this.dataList.length > 1) {
this.series = [
{
//
name: this.dataList[0].name,
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
},
data: this.dataList[0].data
},
{
//
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: ['-70%', '-50%'],
symbolSize: [20, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
data: this.dataList[0].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [-12, 10],
position: 'top',
vertialAlign: 'bottom'
}
},
{
//
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
symbolOffset: ['-62%', '50%'],
symbolSize: [20, 6],
itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data
},
{
//
name: this.dataList[1].name,
type: 'bar',
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data
},
{
//
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: ['66%', '-50%'],
symbolSize: [20, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [12, 10],
position: 'top',
vertialAlign: 'bottom'
}
},
{
//
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
symbolOffset: ['66%', '50%'],
symbolSize: [20, 6],
itemStyle: { color: this.dataList[1].bottomColor },
data: this.dataList[1].data
}
]
} else {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [
{
//
name: this.dataList[0].name,
type: 'bar',
// barWidth: 26,
barWidth: barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
// borderWidth: 1,
// borderColor: this.dataList[0].bottomColor + '66' // +
},
data: this.dataList[0].data
// backgroundStyle: {
// // borderColor: this.dataList[0].bottomColor,
// borderColor: '#ff0000',
// borderWidth: 1
// }
},
{
//
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [0, 10],
position: 'top',
vertialAlign: 'bottom'
},
data: this.dataList[0].data
},
{
//
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6],
itemStyle: { color: '#2c6e7d' },
data: this.dataList[0].data
}
]
}
this.$nextTick(() => {
console.log('on Mounted(): ')
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({
grid: {
top: '16%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
itemWidth: 8,
itemHeight: 8,
right: '2%',
textStyle: {
color: '#fff9'
}
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 12,
textStyle: {
fontSize: this.xlabelFontSize,
color: 'rgba(255,255,255,0.5)' //
},
rotate: this.xlabelRotate
},
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: this.dataList[0].bottomColor,
// color: 'rgba(119, 255, 242, 0.6)', // 线
width: '1' // 线
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' //
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
},
type: 'value'
},
series: this.series
})
}
}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
height: 100% !important;
/* position: relative !important; */
}
.fault-category-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
/* bottom: calc(100vh/1920 * 80);
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
left: 9%;
height: 52px;
width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-45deg);
z-index: 0;
}
.process-fault-chart >>> div::before {
/* .process-fault-chart::before { */
content: '';
position: absolute;
bottom: 26px;
left: 10%;
height: 48px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
.realtime-production-cost-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
/* bottom: calc(100vh/1920 * 80);
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 20px;
left: 9%;
height: 30px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-35deg);
z-index: 0;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
<V3DApp @3d-loaded="handle3DLoaded" />
<!-- 正式内容: -->
<!-- <div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
@ -9,17 +9,17 @@
<section id="techy-body-part">
<div class="upper-part">
<div class="techy-body-part__left">
<techy-container title="订单完成情况" style="flex: 0;">
<techy-container title="订单完成情况" icon="menuIcon" style="flex: 0;">
<LeftContentOrder />
</techy-container>
<techy-container title="公用工程消耗" style="flex:1;">
<techy-container title="公用工程消耗" icon="stackIcon" style="flex:1;">
<LeftContentPublicConsume />
</techy-container>
</div>
<div class="techy-body-part__middle">
<TechyBox>
<div class="flex">
<div class="techy-body-part__middle__inner">
<p>
<b>产线名称 :</b>
<span>A产线</span>
@ -29,7 +29,7 @@
<span>清洗机</span>
</p>
<p>
<b>累计加工数量 :</b>
<b>累计加工 :</b>
<span>20</span>
</p>
<p>
@ -41,15 +41,15 @@
</div>
<div class="techy-body-part__right">
<techy-container title="实时产量和能耗" style="flex: 0">
<techy-container title="实时产量和能耗" icon="zhejiaoMenuListIcon" style="height: 22vh">
<RightContentRealtimeProduction />
</techy-container>
<div class="techy-body-part__right-col-2">
<techy-container title="工序质量分析">
<techy-container title="工序质量分析" icon="trendAnalysisIcon" style="flex: 0">
<RightContentQualityAnalysis />
</techy-container>
</div>
<techy-container title="产线成品率" style="flex: 0;">
<techy-container title="产线成品率" icon="menuIcon" style="flex: 1">
<RightContentProductRate />
</techy-container>
</div>
@ -57,23 +57,23 @@
<!-- 底部 -->
<div class="bottom-part">
<div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;">
<techy-container title="设备巡检提示" style="flex: 0;">
<div style="width: 25%; min-width: 480px; height: 100%;">
<techy-container title="设备巡检提示" icon="alertMenuIcon" style="flex: 0; align-self: stretch;">
<LeftContentEquipmentCheck />
</techy-container>
</div>
<div style="flex: 1;">
<techy-container title="现场实时监控">
<techy-container title="现场实时监控" icon="lightHatIcon">
<LeftContentMonitor />
</techy-container>
</div>
<div>
<techy-container title="缺陷分类分析">
<div style="flex: 1;max-width: 320px;">
<techy-container title="缺陷分类分析" icon="menuAnalysisIcon">
<RightContentFaultAnalysis />
</techy-container>
</div>
<div style="width: 25%; min-width: 480px;">
<techy-container title="设备报警提示" style="flex: 0;">
<techy-container title="设备报警提示" icon="alertWarningIcon">
<RightContentAlert />
</techy-container>
</div>
@ -162,6 +162,28 @@ export default {
position: relative;
}
#v3d-outter *::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
#v3d-outter *::-webkit-scrollbar-track {
background-color: #14243f;
/* background-color: white; */
border-radius: 0;
}
#v3d-outter *::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
#v3d-outter *::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
#v3d-main-content {
width: 100%;
height: 100%;
@ -185,10 +207,12 @@ export default {
padding: calc(100vmin / 1920 * 36);
padding-bottom: 0;
display: flex;
justify-content: space-between;
/* justify-content: space-between; */
gap: calc(100vmin / 1920 * 36);
}
.bottom-part {
height: 22vh;
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
display: flex;
/* gap: 16px; */
@ -220,20 +244,27 @@ export default {
}
.techy-body-part__middle {
position: absolute;
top: 12%;
left: 36%;
height: 96px;
width: 128px;
flex: 1;
position: relative;
}
.flex {
padding: 12px;
.techy-body-part__middle .techy-box {
position: absolute;
top: 0;
left: 0;
height: 136px;
width: 176px;
}
.techy-body-part__middle__inner {
height: 100%;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex p {
.techy-body-part__middle__inner p {
margin: 0;
padding: 0;
font-size: 12px;
@ -241,15 +272,20 @@ export default {
color: #fff;
}
.flex p > span {
.techy-body-part__middle__inner p > span {
position: relative;
padding-left: 6px;
padding-left: 16px;
}
.techy-body-part__middle__inner p > span.round-dot {
padding-left: 28px;
}
.round-dot::before {
content: '';
position: absolute;
top: 5px;
left: -3px;
top: 4px;
left: 16px;
width: 8px;
height: 8px;
background-color: rgb(82, 231, 82);

View File

@ -12,7 +12,7 @@
>
<!-- :style="{ background: colorArr.colorList[index % 9] }" -->
<div class="choicepart-item-border">
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="">
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="" />
</div>
<div class="choicepart-item-title" :title="item.meta.title">{{ item.meta.title }}</div>
</div>
@ -147,55 +147,57 @@ export default {
background: url('../../assets/img/choicepart/choicepart-back.jpg') repeat;
background-size: 100% 100%;
overflow-x: scroll;
display: flex;
justify-content: center;
align-items: center;
.choicepart-box {
width: 1440px;
margin: 0 auto;
margin: 0 auto;
padding-top: 16vh;
min-height: 100vh;
width: calc(1440px * var(--beilv));
.choicepart-item {
display: inline-block;
width: 208px;
height: 258px;
margin: 40px;
width: calc(208px * var(--beilv));
height: calc(258px * var(--beilv));
margin: calc(40px * var(--beilv));
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
background-size: 100% 100%;
// border: 1px dashed #fff;
// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
top: 0;
border-radius: 5px;
border-radius: calc(5px * var(--beilv));
overflow: hidden;
cursor: pointer;
position: relative;
img {
width: 208px;
height: 258px;
width: calc(208px * var(--beilv));
height: calc(258px * var(--beilv));
}
.choicepart-item-border {
height: 100%;
border-radius: 5px;
border-radius: calc(5px * var(--beilv));
// padding: 0 5px;
line-height: 32px;
font-size: 28px;
line-height: calc(32px * var(--beilv));
font-size: calc(28px * var(--beilv));
font-weight: lighter;
color: #2c6bd8;
overflow: hidden;
}
.choicepart-item-title {
overflow: hidden;
padding: 0 10px;
padding: 0 calc(10px * var(--beilv));
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
bottom: 0;
left: 2px;
right: 2px;
left: calc(2px * var(--beilv));
right: calc(2px * var(--beilv));
text-align: center;
color: #fff;
font-size: 16px;
line-height: 48px;
height: 48px;
letter-spacing: 2px;
font-size: calc(16px * var(--beilv));
line-height: calc(48px * var(--beilv));
height: calc(48px * var(--beilv));
letter-spacing: calc(2px * var(--beilv));
background-color: rgba($color: #0b58ff, $alpha: 0.45);
}
}
@ -219,15 +221,15 @@ export default {
}
::-webkit-scrollbar {
//
width: 9px;
height: 9px;
width: calc(9px * var(--beilv));
height: calc(9px * var(--beilv));
}
::-webkit-scrollbar-thumb {
//
background-color: #dddddd;
background-clip: padding-box;
min-height: 28px;
border-radius: 9px;
min-height: calc(28px * var(--beilv));
border-radius: calc(9px * var(--beilv));
}
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;

View File

@ -312,6 +312,7 @@ export default {
font-size: 18px;
line-height: 25px;
letter-spacing: 6px;
transform: translateX(-2px);
}
.icon {

View File

@ -7,8 +7,8 @@
<div class="row-1">
<div class="equipment-exception">
<!-- 设备报修/异常上报 -->
<techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
<div class="table-wrapper">
<techy-container :title="'设备报修/异常上报'" icon="扳手螺丝刀">
<div class="table-wrapper fix-table-exception-report">
<techy-table
:page="1"
:limit="7"
@ -21,8 +21,8 @@
</div>
<div class="equipment-alarm">
<!-- 设备异常报警 -->
<techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
<div class="table-wrapper">
<techy-container :title="'设备异常报警'" icon="安全帽">
<div class="table-wrapper fix-table-eq-exception">
<techy-table
:page="1"
:limit="7"
@ -36,16 +36,16 @@
</div>
<div class="row-2">
<!-- 设备分析 -->
<techy-container :title="'设备分析'" :icon="equipmentAnalysisSVG">
<techy-container :title="'设备分析'" icon="趋势搜索">
<select id="productLine" name="productLine" class="product-line-selection">
<option value="1">产线一</option>
<option value="2">产线二</option>
<option value="3">产线三</option>
</select>
<div class="grid columns-2" style="height: calc(100% - 32px)">
<div class="pl-jdl">
<TechyBox style="padding: calc(100vh / 1920 * 24)">
<h2
<div class="equipment-analysis__inner">
<div>
<TechyBox class="pl-jdl">
<!-- <h2
:style="{
margin: 0,
padding: 0,
@ -55,9 +55,9 @@
fontSize: '0.85vw'
}"
>
<!-- fontSize: '15px', -->
各产线稼动率
</h2>
</h2> -->
<span class="pl-jdl__title">各产线稼动率</span>
<pl-jdl-chart />
</TechyBox>
</div>
@ -76,7 +76,8 @@
</div>
<div class="row-3">
<!-- 设备备件管理 -->
<techy-container :title="'设备备件管理'" :icon="equipmentOrderSVG">
<techy-container :title="'设备备件管理'" icon="清单齿轮">
<div class="table-wrapper">
<techy-table
:page="1"
:limit="7"
@ -84,12 +85,13 @@
:table-config="sparepartsProps"
:table-data="sparepartsDatalist"
/>
</div>
</techy-container>
</div>
</div>
<div class="tech-body__col-2">
<techy-container :title="'设备工单管理'" :icon="equipmentOrderSVG">
<techy-container :title="'设备工单管理'" icon="清单齿轮">
<!-- 设备工单管理 -->
<div class="techy-container__inner">
<div>
@ -141,124 +143,6 @@ import {
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
const equipmentExceptionSVG = `<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>setting tools</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M5.8599,18.0898 C6.4089,18.6418 7.3019,18.6448 7.8539,18.0958 C7.8559,18.0938 7.8579,18.0918 7.8599,18.0898 L14.5199,11.4298 L14.8899,11.4998 L15.0599,11.4998 C16.6169,11.7418 18.1089,10.7848 18.5399,9.2698 L18.2299,9.6198 C17.1349,10.6718 15.4049,10.6718 14.3099,9.6198 C13.2319,8.5358 13.2319,6.7838 14.3099,5.6998 L14.5999,5.4098 C13.0609,5.8908 12.1389,7.4618 12.4699,9.0398 L12.5499,9.4098 L5.8809,16.0798 C5.6139,16.3438 5.4659,16.7048 5.46982098,17.0798 C5.4729,17.4538 5.6199,17.8118 5.8809,18.0798 L5.8599,18.0898 Z M6.8599,19.8698 C6.1109,19.8828 5.3889,19.5898 4.8599,19.0598 C3.7809,17.9838 3.7769,16.2358 4.8529,15.1568 C4.8559,15.1538 4.8579,15.1518 4.8599,15.1498 L11.0099,8.9898 C10.7039,6.6548 12.2459,4.4768 14.5499,3.9898 L14.7799,3.9398 L15.0899,3.9398 C15.6049,3.8968 16.0939,4.1748 16.3199,4.6398 C16.4859,5.0968 16.3549,5.6088 15.9899,5.9298 L15.2299,6.6898 C14.6769,7.2388 14.6749,8.1318 15.2239,8.6838 L15.2299,8.6898 C15.7859,9.2338 16.6739,9.2338 17.2299,8.6898 L17.9899,7.9198 C18.2099,7.6868 18.5099,7.5478 18.8299,7.5298 C19.1509,7.5208 19.4599,7.6568 19.6709,7.8998 C19.9429,8.2518 20.0459,8.7058 19.9499,9.1398 C19.5749,11.5408 17.3609,13.2088 14.9499,12.9098 L8.7999,19.0598 C8.2859,19.5748 7.5889,19.8668 6.8599,19.8698 L6.8599,19.8698 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-7" fill="#6FFADE"></path>
<polygon id="Fill-9" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
<path d="M5.3901,18.6099 C4.5621,17.8059 4.5411,16.4829 5.3451,15.6549 C5.3601,15.6399 5.3741,15.6249 5.3901,15.6099 L11.7891,9.2099 C11.3521,7.1479 12.6671,5.1199 14.7301,4.6799 L14.9301,4.6799 L15.1501,4.6799 C15.7401,4.6799 15.9301,5.1099 15.5501,5.4899 L14.7891,6.2499 C13.9611,7.0789 13.9611,8.4219 14.7891,9.2499 C15.6191,10.0789 16.9611,10.0789 17.7891,9.2499 L18.5501,8.4899 C18.6531,8.3769 18.7971,8.3079 18.9501,8.2999 C19.2201,8.2999 19.4301,8.5999 19.3501,9.1099 C19.0271,11.1909 17.0811,12.6169 15.0001,12.2999 L14.7901,12.2999 L8.3901,18.6999 C7.5861,19.5279 6.2631,19.5479 5.4351,18.7449 C5.4191,18.7299 5.4051,18.7149 5.3901,18.6999 L5.3901,18.6099 Z" id="Stroke-13" stroke="#6FFADE" stroke-width="1.5"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-15" fill="#6FFADE"></path>
<polygon id="Fill-17" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
</g>
</g>
</g>
</g>
</svg>`
const equipmentAlarmSVG = `<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>hatplus</title>
<defs>
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
<stop stop-color="#4BFFC8" offset="0%"></stop>
<stop stop-color="#45F2EC" offset="100%"></stop>
</linearGradient>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-998.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(974.000000, 230.000000)">
<g id="编组-6" transform="translate(24.000000, 24.000000)">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="异常" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M9.00003613,1.00009438 C7.45266489,0.991339384 5.96400493,1.59197413 4.85604619,2.6721807 C3.77420104,3.74179852 3.16375561,5.19879645 3.16005953,6.72012488 L3.16005953,14.5280306 L14.7760126,14.5280306 L14.7760126,6.72010926 C14.7746725,5.19671341 14.1605756,3.73789487 13.0720104,2.67216507 C11.9832986,1.60721536 10.5229694,1.00760431 9.0000205,1.00009438 L9.00003613,1.00009438 Z M8.52003548,12.6560576 L8.35203526,8.87208057 L5.48804703,8.87208057 L9.24800521,4.12815624 L9.56800564,7.18412206 L12.2880093,7.28012148 L8.48800418,12.6560576 L8.52003548,12.6560576 Z M1.00003551,16.1280053 C0.997937773,15.8953576 1.08886376,15.671504 1.25262424,15.5062394 C1.41638472,15.3409748 1.63939864,15.2480106 1.87205781,15.2480106 L16.1280144,15.2480106 C16.3586463,15.2508825 16.5792874,15.3425823 16.7440153,15.5040247 C16.9059435,15.6716664 16.9975415,15.894943 17,16.1280053 C17,16.6095886 16.6096013,17 16.1280144,17 L1.87205781,17 C1.39047096,17 1.00003551,16.6095886 1.00003551,16.1280053 L1.00003551,16.1280053 Z" id="形状" fill="url(#linearGradient-1)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
const equipmentOrderSVG = `<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>
<defs>
<polygon id="path-1" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
<polygon id="path-3" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1532.000000, -254.000000)">
<g id="编组-6" transform="translate(1508.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-3" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-5" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-8"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-7" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-11" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-13" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-15" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-17" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-19" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-21" fill="#6DF8E1"></path>
</g>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-23" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-25" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-28"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-27" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-29" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-31" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-33" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-35" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-37" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-39" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-41" fill="#6DF8E1"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
const equipmentAnalysisSVG = `<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>analysis</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -533.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 509.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-5" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-7" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-9" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-11" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-15" fill="#6FFADE"></path>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-19" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-21" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-23" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-25" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-27" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-29" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
export default {
name: 'EquipmentManageHome',
components: {
@ -279,10 +163,6 @@ export default {
props: {},
data() {
return {
equipmentExceptionSVG,
equipmentAlarmSVG,
equipmentOrderSVG,
equipmentAnalysisSVG,
equipmentExceptionProps,
equipmentExceptionDatalist,
equipmentAlarmProps,
@ -299,15 +179,7 @@ export default {
computed: {
...mapGetters(['sidebar'])
},
mounted() {
// window.addEventListener('resize', () => {
// console.log('resizing....')
// this.refreshSize++
// this.$nextTick(() => {
// this.$forceUpdate()
// })
// }) //
},
mounted() {},
methods: {
changeFullScreen() {
@ -325,10 +197,43 @@ export default {
</script>
<style scoped>
::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
.fix-table-eq-exception >>> .el-table td .cell {
width: 80% !important;
margin: auto;
text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.visual-container {
width: 100%;
min-width: 1280px;
/* height: calc(100vh - 128px); */
height: 100vh;
display: flex;
flex-direction: column;
background: url('./assets/bg.png') no-repeat;
background-size: cover;
overflow: hidden;
@ -336,87 +241,127 @@ export default {
}
.techy-body {
height: calc(100vh - 64px);
flex: 1 0;
height: 65vh;
width: 100%;
/* overflow: hidden; */
/* padding: 24px; */
padding: calc(100vw / 1920 * 24);
/* display: grid;
grid-template-columns: 3fr 1fr; */
padding: calc(24px * var(--beilv));
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.tech-body__col-1 {
height: calc(100% - 28px);
flex: 1 3;
/* height: calc(100% - 28px); */
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
width: 70%;
}
.tech-body__col-2 {
flex: 1 1;
max-width: 25%;
height: calc(100% - 28px);
width: 25%;
flex: 0;
height: 100%;
}
.techy-container__inner {
display: flex;
flex-direction: column;
gap: 0.8vh;
gap: calc(8px * var(--beilv));
height: calc(100% - 4vh);
/* overflow-y: scroll; */
overflow-y: hidden;
overflow-y: auto;
}
.techy-container__inner > div {
flex: 1 1;
}
.row-1,
/* .row-2, */
.row-3 {
height: 30%;
}
.row-1 {
flex: 1;
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.row-2 {
flex: 0;
}
.row-3 {
flex: 1;
}
.equipment-exception {
flex: 3 1;
min-width: 20%;
flex: 3;
}
.equipment-alarm {
flex: 2 1;
min-width: 20%;
flex: 2;
}
.table-wrapper {
height: calc(100% - 3vh);
overflow: auto;
}
.grid {
display: grid;
}
.columns-2 {
grid-template-columns: 1fr 3fr;
/* gap: 8px; */
gap: 0.5vw;
.equipment-analysis__inner {
height: calc(100% - 32px);
display: flex;
gap: calc(8px * var(--beilv));
}
.pl-jdl {
padding: calc(8px * var(--beilv)) calc(16px * var(--beilv));
height: calc(191px * var(--beilv));
width: calc(245px * var(--beilv));
display: flex;
flex-direction: column;
}
.pl-jdl__title {
font-size: calc(15px * var(--beilv));
line-height: calc(18px * var(--beilv));
color: #01cfcc;
}
.eqs-oee-mtbr-btbf {
flex: 1;
height: calc(191px * var(--beilv));
overflow: hidden;
overflow-y: auto;
}
.grid-2-3 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr;
/* gap: 4px; */
gap: 0.6vh 0.3vw;
gap: calc(8px * var(--beilv)) calc(4px * var(--beilv));
}
.product-line-selection {
border: none;
outline: none;
border-radius: 2px 4px 4px 2px;
border-radius: calc(4px * var(--beilv));
background: #31878c45;
/* opacity: 0.29; */
color: white;
position: absolute;
padding: 0.5vh;
width: 5vw;
font-size: 12px;
line-height: 18px;
top: calc(1vh + 8px);
left: calc(5vw + 32px);
padding: calc(4px * var(--beilv));
width: calc(114px * var(--beilv));
font-size: calc(12px * var(--beilv));
line-height: calc(18px * var(--beilv));
top: calc(24px * var(--beilv));
left: calc(140px * var(--beilv));
}
</style>

View File

@ -52,12 +52,11 @@ const ProgreeBar = {
'div',
{
style: {
height: '0.5vh',
height: '100%',
width: '100%',
borderRadius: '8px',
borderRadius: 'calc(8px * var(--beilv))',
position: 'relative',
background: '#1E2D4590',
// background: 'red',
overflow: 'hidden'
}
},
@ -71,7 +70,7 @@ const ProgreeBar = {
top: 0,
width: this.process + '%',
height: '100%',
borderRadius: '8px',
borderRadius: 'calc(8px * var(--beilv))',
background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})`
}
},
@ -114,10 +113,10 @@ export default {
}
.equipment-analysis-box__title {
font-size: 1.25vh;
line-height: 2vh;
letter-spacing: 1px;
width: 3vw;
font-size: calc(14px * var(--beilv));
line-height: calc(18px * var(--beilv));
letter-spacing: calc(1px * var(--beilv));
width: 30%;
overflow-wrap: break-word;
align-self: center;
text-align: center;
@ -130,12 +129,9 @@ export default {
.param-name {
opacity: 70%;
text-align: right;
/* font-size: 12px;
line-height: 14px;
width: 36px; */
font-size: 1vh;
line-height: 1.2;
width: 2vw;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
width: 20%;
}
.param-value {
opacity: 70%;
@ -143,20 +139,22 @@ export default {
/* font-size: 12px;
line-height: 14px;
width: 24px; */
font-size: 1vh;
line-height: 1.2;
width: 1.5vw;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
width: 15%;
}
.param-list::before {
content: '';
position: absolute;
left: -11px;
top: 10%;
width: 1px;
/* height: 100%; */
height: 80%;
background: linear-gradient(to bottom, transparent, #ffffff8c, transparent);
left: calc(-10px * var(--beilv));
width: 2px;
height: 100%;
background: linear-gradient(to bottom, transparent, #455670, transparent);
}
.progress-bar {
height: calc(8px * var(--beilv));
}
.flex {

View File

@ -125,7 +125,7 @@ export default {
.techy-analysis-header__title {
color: #01cfcc;
font-size: 1.25vh;
line-height: 18px;
font-size: calc(15px * var(--beilv));
line-height: calc(18px * var(--beilv));
}
</style>

View File

@ -11,10 +11,10 @@ export default {}
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.2);
display: inline-block;
height: 100%;
width: 100%;
border-radius: .25rem;
border-radius: calc(4px * var(--beilv));
}
</style>

View File

@ -12,7 +12,7 @@
</template>
<div class="container-title-wrapper">
<span class="container-icon" v-html="icon" />
<span class="container-icon" v-html="computeIcon" />
<span class="container-title">{{ title }}</span>
</div>
@ -21,6 +21,8 @@
</template>
<script>
import { IconBanshou, IconTrend, IconMenuChilun, IconSafetyHat } from './icons'
export default {
name: 'TechyContainer',
props: {
@ -34,18 +36,32 @@ export default {
data() {
return {}
},
computed: {
computeIcon() {
switch (this.icon) {
case '扳手螺丝刀':
return IconBanshou
case '趋势搜索':
return IconTrend
case '清单齿轮':
return IconMenuChilun
case '安全帽':
return IconSafetyHat
// more...
}
}
},
mounted() {}
}
</script>
<style scoped>
.techy-container {
border: 2px solid #52fff1;
border: calc(2px * var(--beilv)) solid #52fff1;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
display: inline-block;
position: relative;
/* padding: 24px; */
padding: calc(100vw / 1920 * 22);
padding: calc(24px * var(--beilv));
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
@ -57,58 +73,47 @@ export default {
}
.horizontal {
/* height: 4px;
width: 24px; */
/* height: 0.325vh;
width: 3vh; */
height: calc(100vw / 1920 * 4);
width: calc(100vw / 1920 * 30);
height: calc(4px * var(--beilv));
width: calc(26px * var(--beilv));
}
.vertical {
/* height: 24px;
width: 4px; */
/* height: 3vh;
width: 0.325vh; */
height: calc(100vw / 1920 * 30);
width: calc(100vw / 1920 * 4);
height: calc(26px * var(--beilv));
width: calc(4px * var(--beilv));
}
.top {
top: -3px;
top: calc(-3px * var(--beilv));
}
.left {
left: -3px;
left: calc(-3px * var(--beilv));
}
.right {
right: -3px;
right: calc(-3px * var(--beilv));
}
.bottom {
bottom: -3px;
bottom: calc(-3px * var(--beilv));
}
.container-title-wrapper {
color: #52fff1;
display: flex;
align-items: center;
/* font-size: 18px;
font-size: calc(18px * var(--beilv));
line-height: 1;
height: 24px;
margin-bottom: 8px; */
/* font-size: 1.25vh;
line-height: 1;
height: 1.5vh;
margin-bottom: 1.25vh; */
font-size: calc((100vw / 1920) * 16);
line-height: 1;
height: calc((100vw / 1920) * 20);
margin-bottom: 1.25vh;
margin-bottom: calc(8px * var(--beilv));
}
.container-title {
margin-left: 4px;
margin-left: calc(4px * var(--beilv));
}
.container-icon {
position: relative;
height: calc(24px * var(--beilv)) !important;
width: calc(24px * var(--beilv)) !important;
}
</style>

View File

@ -1,17 +1,36 @@
<template>
<header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm">
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<img class="logo-img" src="./logo.png" alt="cnbm" />
<span class="techy-header__title">{{ headTitle }}</span>
<span class="fullscreen-btn" @click="handleClick('fullscreen')">
<span v-if="isFullScreen" v-html="unfullScreenSvg" />
<span v-else v-html="fullScreenSvg" />
</span>
<!-- <div class="date">2022.10.14</div>
<div class="time">20:12:24</div> -->
<div class="fullscreen-btn">
<!-- <span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" /> -->
<span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" />
<span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" />
</div>
</header>
</template>
<script>
const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>首页</title>
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero">
<g id="首页" transform="translate(1824.000000, 46.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path>
<path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path>
</g>
</g>
</g>
</svg>`
// const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const fullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
@ -23,7 +42,8 @@ const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" versi
</g>
</svg>`
const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
@ -32,13 +52,13 @@ const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" ver
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false
}
@ -48,6 +68,8 @@ export default {
if (source === 'fullscreen') {
this.isFullScreen = !this.isFullScreen
this.$emit('toggle-full-screen', { full: this.isFullScreen })
} else if (source === 'home') {
this.$router.push('/')
}
}
}
@ -55,6 +77,16 @@ export default {
</script>
<style scoped>
/* @font-face {
font-family: 'zcoolqingkehuangyouti';
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
} */
.techy-header {
background: transparent;
display: flex;
@ -63,30 +95,67 @@ export default {
position: relative;
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
padding: calc(24px * var(--beilv)) 0;
line-height: 1;
background: url(./header-new.png) no-repeat;
/** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */
/* background-size: cover; */
background-size: 100% 100%;
background-position: bottom left calc(100vw / 1920 * 40);
height: calc(100vw / 1920 * 80);
/* background-position: bottom left calc(100vw / 1920 * 40); */
background-position: bottom left calc(32px * var(--beilv));
height: calc(96px * var(--beilv));
}
.logo-img {
width: calc(100vw / 1920 * 24);
width: calc(28px * var(--beilv));
}
.techy-header__title {
display: line-block;
margin-left: calc(12px * var(--beilv));
/* font-size: 29px; */
font-size: calc(29px * var(--beilv));
line-height: calc(41px * var(--beilv));
letter-spacing: calc(2.23px * var(--beilv));
text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
}
.date,
.time {
/* font-family: zcoolqingkehuangyouti, sans-serif; */
font-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
line-height: 36px; */
color: #49e1de;
letter-spacing: 0.8px;
position: absolute;
bottom: calc(100vmin / 1920 * 14);
}
.date {
/* left: 72px; */
left: calc(100vmin / 1920 * 72);
}
.time {
/* right: 128px; */
right: calc(100vmin / 1920 * 186);
}
.fullscreen-btn {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24);
right: calc(24px * var(--beilv));
top: calc(44px * var(--beilv));
bottom: 0;
}
.fullscreen-btn > span {
display: inline-block;
width: calc(32px * var(--beilv));
height: calc(32px * var(--beilv));
}
</style>

View File

@ -7,27 +7,7 @@
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{
background: 'rgba(79,114,136,0.29)',
color: '#fff',
height: 'calc(100vh / 1920 * 48)',
lineHeight: 'calc(100vh / 1920 * 48)',
padding: 0,
fontSize: 'calc(100vh / 1920 * 20)'
}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
:cell-style="{
height: 'calc(100vh / 1920 * 48)',
lineHeight: 'calc(100vh / 1920 * 48)',
padding: 0,
fontSize: 'calc(100vh / 1920 * 20)'
}"
>
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
@ -130,84 +110,101 @@ export default {
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
}
}
}
</script>
<style lang="scss">
@import '~@/styles/index.scss';
<style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));;
height: calc(8px * var(--beilv));;
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));;
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container {
.el-table {
border: 0;
height: 100%;
}
.el-table::before,
.el-table--border::after {
background-color: transparent;
/* .visual-base-table-container >>> .el-table {
min-width: 120%;
} */
/* 清除默认样式 */
.visual-base-table-container >>> th.gutter {
display: none;
}
.el-table th,
td {
border-color: #0d1728 !important;
padding: 0;
}
.el-table tr {
.visual-base-table-container >>> table {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
.el-table__row--striped:hover > td {
background-color: rgba(79, 114, 136, 0.29) !important;
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
i {
color: #aaa;
@extend .pointer;
.visual-base-table-container >>> td span {
color: #ffffff50;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
}
.p-0 {
.visual-base-table-container >>> thead th {
padding: 0;
}
.p-0 >>> .cell {
height: 100%;
margin: 0;
padding: 0;
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.font-and-height {
font-size: calc(100vh / 1920 * 32);
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e90;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #20376090;
}
</style>

View File

@ -40,13 +40,12 @@ export default {
<style scoped>
.techy-vertical-table {
height: calc(100% - 2.5vh);
overflow: hidden;
/* height: calc(100% - 2.5vh); */
overflow: auto;
color: white;
}
.trow {
/* height: calc(100% / 6); */
width: 100%;
white-space: nowrap;
display: flex;
@ -59,8 +58,6 @@ export default {
.tbody {
min-width: calc(100vw / 1920 * 96);
background-color: #20376080;
/* background-color: red; */
/* height: 100%; */
white-space: nowrap;
overflow: hidden;
margin-right: 1px;
@ -70,24 +67,15 @@ export default {
.thead {
width: 25%;
font-size: 14px;
line-height: 1.81;
/* padding: 8px 16px; */
/* font-size: 1vh; */
/* line-height: 2; */
/* font-weight: 400; */
font-size: calc(14px * var(--beilv));
line-height: 1.8;
}
.tbody {
width: 24%;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-size: calc(12px * var(--beilv));
line-height: 2;
/* padding: 8px 12px; */
/* padding-left: 8px; */
/* font-size: 1vh; */
/* line-height: 2; */
/* font-weight: 400; */
}
.tbody:last-child {

View File

@ -34,7 +34,7 @@ export default {
},
axisLine: {
lineStyle: {
color: '#ffffff3d'
color: '#5982B233'
}
},
axisLabel: {
@ -47,17 +47,18 @@ export default {
type: 'value',
splitLine: {
lineStyle: {
color: '#ffffff3d'
color: '#5982B233'
}
},
axisLine: {
lineStyle: {
color: '#ffffff3d'
color: '#5982B233'
}
},
axisLabel: {
color: '#ffffff9d'
}
},
axisTick: { show : false }
}
],
series: [

View File

@ -0,0 +1,125 @@
// 扳手
export const IconBanshou = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>setting tools</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M5.8599,18.0898 C6.4089,18.6418 7.3019,18.6448 7.8539,18.0958 C7.8559,18.0938 7.8579,18.0918 7.8599,18.0898 L14.5199,11.4298 L14.8899,11.4998 L15.0599,11.4998 C16.6169,11.7418 18.1089,10.7848 18.5399,9.2698 L18.2299,9.6198 C17.1349,10.6718 15.4049,10.6718 14.3099,9.6198 C13.2319,8.5358 13.2319,6.7838 14.3099,5.6998 L14.5999,5.4098 C13.0609,5.8908 12.1389,7.4618 12.4699,9.0398 L12.5499,9.4098 L5.8809,16.0798 C5.6139,16.3438 5.4659,16.7048 5.46982098,17.0798 C5.4729,17.4538 5.6199,17.8118 5.8809,18.0798 L5.8599,18.0898 Z M6.8599,19.8698 C6.1109,19.8828 5.3889,19.5898 4.8599,19.0598 C3.7809,17.9838 3.7769,16.2358 4.8529,15.1568 C4.8559,15.1538 4.8579,15.1518 4.8599,15.1498 L11.0099,8.9898 C10.7039,6.6548 12.2459,4.4768 14.5499,3.9898 L14.7799,3.9398 L15.0899,3.9398 C15.6049,3.8968 16.0939,4.1748 16.3199,4.6398 C16.4859,5.0968 16.3549,5.6088 15.9899,5.9298 L15.2299,6.6898 C14.6769,7.2388 14.6749,8.1318 15.2239,8.6838 L15.2299,8.6898 C15.7859,9.2338 16.6739,9.2338 17.2299,8.6898 L17.9899,7.9198 C18.2099,7.6868 18.5099,7.5478 18.8299,7.5298 C19.1509,7.5208 19.4599,7.6568 19.6709,7.8998 C19.9429,8.2518 20.0459,8.7058 19.9499,9.1398 C19.5749,11.5408 17.3609,13.2088 14.9499,12.9098 L8.7999,19.0598 C8.2859,19.5748 7.5889,19.8668 6.8599,19.8698 L6.8599,19.8698 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-7" fill="#6FFADE"></path>
<polygon id="Fill-9" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
<path d="M5.3901,18.6099 C4.5621,17.8059 4.5411,16.4829 5.3451,15.6549 C5.3601,15.6399 5.3741,15.6249 5.3901,15.6099 L11.7891,9.2099 C11.3521,7.1479 12.6671,5.1199 14.7301,4.6799 L14.9301,4.6799 L15.1501,4.6799 C15.7401,4.6799 15.9301,5.1099 15.5501,5.4899 L14.7891,6.2499 C13.9611,7.0789 13.9611,8.4219 14.7891,9.2499 C15.6191,10.0789 16.9611,10.0789 17.7891,9.2499 L18.5501,8.4899 C18.6531,8.3769 18.7971,8.3079 18.9501,8.2999 C19.2201,8.2999 19.4301,8.5999 19.3501,9.1099 C19.0271,11.1909 17.0811,12.6169 15.0001,12.2999 L14.7901,12.2999 L8.3901,18.6999 C7.5861,19.5279 6.2631,19.5479 5.4351,18.7449 C5.4191,18.7299 5.4051,18.7149 5.3901,18.6999 L5.3901,18.6099 Z" id="Stroke-13" stroke="#6FFADE" stroke-width="1.5"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-15" fill="#6FFADE"></path>
<polygon id="Fill-17" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
</g>
</g>
</g>
</g>
</svg>`
// 趋势+放大镜
export const IconTrend = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>analysis</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -533.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 509.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-5" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-7" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-9" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-11" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-15" fill="#6FFADE"></path>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-19" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-21" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-23" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-25" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-27" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-29" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
// 菜单+齿轮
export const IconMenuChilun = `<svg width="100%" height="100%" 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>
<defs>
<polygon id="path-1" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
<polygon id="path-3" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1532.000000, -254.000000)">
<g id="编组-6" transform="translate(1508.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-3" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-5" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-8"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-7" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-11" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-13" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-15" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-17" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-19" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-21" fill="#6DF8E1"></path>
</g>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-23" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-25" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-28"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-27" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-29" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-31" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-33" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-35" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-37" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-39" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-41" fill="#6DF8E1"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
// 闪电安全帽
export const IconSafetyHat = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hatplus</title>
<defs>
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
<stop stop-color="#4BFFC8" offset="0%"></stop>
<stop stop-color="#45F2EC" offset="100%"></stop>
</linearGradient>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-998.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(974.000000, 230.000000)">
<g id="编组-6" transform="translate(24.000000, 24.000000)">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="异常" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M9.00003613,1.00009438 C7.45266489,0.991339384 5.96400493,1.59197413 4.85604619,2.6721807 C3.77420104,3.74179852 3.16375561,5.19879645 3.16005953,6.72012488 L3.16005953,14.5280306 L14.7760126,14.5280306 L14.7760126,6.72010926 C14.7746725,5.19671341 14.1605756,3.73789487 13.0720104,2.67216507 C11.9832986,1.60721536 10.5229694,1.00760431 9.0000205,1.00009438 L9.00003613,1.00009438 Z M8.52003548,12.6560576 L8.35203526,8.87208057 L5.48804703,8.87208057 L9.24800521,4.12815624 L9.56800564,7.18412206 L12.2880093,7.28012148 L8.48800418,12.6560576 L8.52003548,12.6560576 Z M1.00003551,16.1280053 C0.997937773,15.8953576 1.08886376,15.671504 1.25262424,15.5062394 C1.41638472,15.3409748 1.63939864,15.2480106 1.87205781,15.2480106 L16.1280144,15.2480106 C16.3586463,15.2508825 16.5792874,15.3425823 16.7440153,15.5040247 C16.9059435,15.6716664 16.9975415,15.894943 17,16.1280053 C17,16.6095886 16.6096013,17 16.1280144,17 L1.87205781,17 C1.39047096,17 1.00003551,16.6095886 1.00003551,16.1280053 L1.00003551,16.1280053 Z" id="形状" fill="url(#linearGradient-1)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`

View File

@ -33,23 +33,23 @@ const PriorityComponent = {
}
export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName' },
{ label: '所属产线', prop: 'pl' },
{ label: '报修/异常内容', prop: 'content' },
{ label: '报修/发现人', prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 },
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 },
]
export const equipmentExceptionDatalist = [
{ 'eqName': 'A1一次固化机', 'pl': 'E线', 'content': '开化是专品直', 'creator': '郭娜', 'time': '1997-06-08 06:14:37', 'priority': 1 },
{ 'eqName': 'B1一次冷却机', 'pl': 'B线', 'content': '书记因地观同展土军信', 'creator': '薛洋', 'time': '2006-03-15 10:39:30', 'priority': 2 },
{ 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 5 },
{ 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
{ 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
{ 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
{ 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 5 },
{ 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
{ 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
{ 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
@ -80,25 +80,25 @@ const LifeRemainComponent = {
}
export const equipmentAlarmProps = [
{ label: '设备名称', prop: 'eqName' },
{ label: '设备编码', prop: 'eqCode' },
{ label: '所属产线', prop: 'pl' },
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '报警内容', prop: 'content' }
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
{ label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
{ label: '所属产线', prop: 'pl', align: 'center' },
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
{ label: '报警内容', prop: 'content', align: 'center' }
]
export const equipmentAlarmDatalist = [
{ 'eqName': 'A1预热机', 'eqCode': 'SB501464', 'pl': 'C线', 'content': '使决方不相动', 'priority': 3 },
{ 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 5 },
{ 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 1 },
{ 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 5 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
{ 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
{ 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 5 },
{ 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
{
'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 5
'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
},
{ 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 5 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 5 },
{ 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 2 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 1 },
{ 'eqName': 'A钢化炉', 'eqCode': 'SB19064', 'pl': 'D线', 'content': '很这置合它里革民', 'priority': 4 }
]
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
]
export const sparepartsProps = [
{ prop: 'name', label: '部件名称' },
{ prop: 'eq', label: '所属设备' },
{ prop: 'pl', label: '所属产线' },
{ prop: 'update_time', label: '更换时间' },
{ prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量' },
{ prop: 'location', label: '库位' }
{ prop: 'name', label: '部件名称', align: 'center' },
{ prop: 'eq', label: '所属设备', align: 'center' },
{ prop: 'pl', label: '所属产线', align: 'center' },
{ prop: 'update_time', label: '更换时间', align: 'center' },
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量', align: 'center' },
{ prop: 'location', label: '库位', align: 'center' }
]
export const sparepartsDatalist = [

View File

@ -99,23 +99,19 @@ const tableProps = [
{
prop: 'createTime',
label: i18n.t('module.factory.abnormalAlarm.alarmTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'alarmType',
label: i18n.t('module.factory.abnormalAlarm.alarmType'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.alarmType')
},
{
prop: 'alarmGrade',
label: i18n.t('module.factory.abnormalAlarm.alarmLevel'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.alarmLevel')
},
{
prop: 'alarmContent',
label: i18n.t('module.factory.abnormalAlarm.alarmReason'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.alarmReason')
},
// {
// prop: 'alarmNotify',
@ -131,7 +127,6 @@ const tableProps = [
{
prop: 'status',
label: i18n.t('module.factory.abnormalAlarm.status'),
align: 'center',
filter: factory('alarmStatus')
}
// {

View File

@ -88,50 +88,41 @@ const tableProps = [
{
prop: 'createTime',
label: i18n.t('module.factory.abnormalAlarm.alarmStartTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'handleTime',
label: i18n.t('module.factory.abnormalAlarm.alarmEndTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'equipmentName',
label: i18n.t('module.factory.abnormalAlarm.equipmentName'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.equipmentName')
},
{
prop: 'alarmGrade',
label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
align: 'center'
label: i18n.t('module.basicData.alarmManagement.AlarmLevel')
},
{
prop: 'equipmentArea',
label: i18n.t('module.factory.abnormalAlarm.equipmentArea'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.equipmentArea')
},
{
prop: 'alarmContent',
label: i18n.t('module.factory.abnormalAlarm.alarmInfo'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.alarmInfo')
},
{
prop: 'alarmNotify',
label: i18n.t('module.factory.abnormalAlarm.alarmNotify'),
align: 'center'
label: i18n.t('module.factory.abnormalAlarm.alarmNotify')
},
{
prop: 'status',
label: i18n.t('module.factory.abnormalAlarm.alarmStatus'),
align: 'center',
subcomponent: AlarmStatus
},
{
prop: 'remark',
label: i18n.t('module.basicData.visual.Remarks'),
align: 'center'
label: i18n.t('module.basicData.visual.Remarks')
}
]
export default {

View File

@ -107,29 +107,24 @@ const tableProps = [
{
prop: 'planHandoverTime',
label: i18n.t('module.teamManager.shift.onlineTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'planOfflineTime',
label: i18n.t('module.teamManager.shift.offlineTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'className',
label: i18n.t('module.teamManager.shift.teamName'),
align: 'center'
label: i18n.t('module.teamManager.shift.teamName')
},
{
prop: 'classCode',
label: i18n.t('module.teamManager.shift.teamCode'),
align: 'center'
label: i18n.t('module.teamManager.shift.teamCode')
},
{
prop: 'planSection',
label: i18n.t('module.teamManager.shift.lineOrProcess'),
align: 'center',
// subcomponent: shiftManagerLine
subcomponent: {
props: {
@ -161,18 +156,15 @@ const tableProps = [
},
{
prop: 'planTeamName',
label: i18n.t('module.teamManager.shift.handoverTeam'),
align: 'center'
label: i18n.t('module.teamManager.shift.handoverTeam')
},
{
prop: 'planTeamLeader',
label: i18n.t('module.teamManager.shift.handoverMonitor'),
align: 'center'
label: i18n.t('module.teamManager.shift.handoverMonitor')
},
{
prop: 'handoverStatus',
label: i18n.t('module.teamManager.shift.status'),
align: 'center',
subcomponent: shiftManagerStatus
},
// {

View File

@ -98,35 +98,29 @@ const tableProps = [
// },
{
prop: 'className',
label: i18n.t('module.teamManager.teamInfo.className'),
align: 'center'
label: i18n.t('module.teamManager.teamInfo.className')
},
{
prop: 'classCode',
label: i18n.t('module.teamManager.teamInfo.classCode'),
align: 'center'
label: i18n.t('module.teamManager.teamInfo.classCode')
},
{
prop: 'planTeamName',
label: i18n.t('module.teamManager.teamInfo.planTeamName'),
align: 'center'
label: i18n.t('module.teamManager.teamInfo.planTeamName')
},
{
prop: 'planPreTeamName',
label: i18n.t('module.teamManager.teamInfo.planPreTeamName'),
align: 'center'
label: i18n.t('module.teamManager.teamInfo.planPreTeamName')
},
{
prop: 'planHandoverTime',
label: i18n.t('module.teamManager.teamInfo.onlineTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
},
{
prop: 'planOfflineTime',
label: i18n.t('module.teamManager.teamInfo.offlineTime'),
filter: timeFormatter,
align: 'center'
filter: timeFormatter
}
// {
// prop: 'workStatus',

View File

@ -4,11 +4,11 @@
<section class="techy-body">
<div class="part-1">
<div>
<techy-container :title="'质量异常上报'" :icon="qualitySVG">
<div>
<techy-container :title="'质量异常上报'" icon="质量1">
<div class="table-wrapper fix-table-exception-report">
<techy-table
:page="1"
:limit="10"
:limit="8"
:show-index="false"
:table-config="qualityTableProps"
:table-data="qualityDatalist"
@ -17,8 +17,9 @@
</techy-container>
</div>
<div>
<techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
<div class=" fix-table-exception-alert">
<techy-container :title="'质量异常报警'" icon="质量2">
<div class="table-wrapper">
<techy-table
:page="1"
:limit="8"
@ -26,19 +27,20 @@
:table-config="qualityExceptionTableProps"
:table-data="qualityExceptionDatalist"
/>
</div>
</techy-container>
</div>
</div>
<div class="part-2">
<techy-container :title="'质量缺陷分析'" :icon="qualityFaultSVG">
<techy-container :title="'质量缺陷分析'" icon="质量3">
<div v-if="1" class="quality-analysis__body">
<!-- 第一行 -->
<div class="quality-analysis__body__row-1">
<!-- 第一列 -->
<div class="grow-8 flex gap-16">
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>缺陷分类分析</techy-analysis-header>
<new-bar
:xlabel-font-size="8"
@ -70,7 +72,7 @@
</techy-box>
</div>
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>工序缺陷分析</techy-analysis-header>
<new-bar
chart-name="process-fault"
@ -91,18 +93,20 @@
<!-- 第二列 -->
<div class="grow-6 flex gap-16">
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
<pl-fault-analysis-pie-chart />
</techy-box>
</div>
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack />
<div class="date-select">
<span></span>
<span class="date-select__active"></span>
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'"></span>
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
</span>
</div>
</techy-box>
</div>
@ -112,7 +116,7 @@
<!-- 第二行 -->
<div class="quality-analysis__body__row-2">
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@ -124,7 +128,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@ -136,7 +140,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@ -148,7 +152,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@ -184,102 +188,6 @@ import NewLineStack from './components/charts/newLineStack.vue'
import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
const qualitySVG = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-3" fill="#6EF9E1"></path>
<path d="M15.8982,17.8 L15.8982,20.15 C15.8622,20.495 16.1052,20.809 16.4482,20.86 L22.2982,20.86 C22.6462,20.814 22.8942,20.499 22.8582,20.15 L22.8582,17.73 C22.8582,17.56 22.7482,17.42 22.6282,17.42 C22.4772,17.441 22.3702,17.578 22.3882,17.73 L22.3882,20.24 L16.3882,20.24 L16.3882,17.72 C16.3882,17.56 16.2782,17.43 16.1582,17.43 C16.0382,17.43 15.9382,17.56 15.9282,17.72 L15.8982,17.8 Z M22.2982,21.04 L16.4582,21.04 C16.0112,20.992 15.6832,20.598 15.7182,20.15 L15.7182,17.67 C15.7192,17.449 15.8992,17.271 16.1202,17.2729833 C16.3392,17.274 16.5172,17.45 16.5182,17.67 L16.5182,20.1 L22.1782,20.1 L22.1782,17.78 C22.1422,17.551 22.2992,17.336 22.5282,17.3 C22.7572,17.265 22.9722,17.421 23.0082,17.651 C23.0152,17.694 23.0152,17.738 23.0082,17.78 L23.0082,20.2 C23.0182,20.619 22.7132,20.98 22.2982,21.04 L22.2982,21.04 Z" id="Fill-5" fill="#6EF9E1"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-11" fill="#6FFADE"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-13" fill="#6EF9E1"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Stroke-15" stroke="#6EF9E1" stroke-width="0.2"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M12.2967,6.8498 L11.9997,12.7348 C11.9267,13.1178 11.5587,13.3688 11.1757,13.2948 C10.8917,13.2418 10.6697,13.0188 10.6147,12.7348 L10.3057,6.8498 L10.3057,6.7878 C10.3937,6.2348 10.9127,5.8568 11.4647,5.9438 C11.8997,6.0118 12.2407,6.3528 12.3087,6.7878 C12.3137,6.8078 12.3137,6.8288 12.3087,6.8498 L12.2967,6.8498 Z M11.3077,15.4668 C10.9047,15.4878 10.5627,15.1778 10.5417,14.7758 C10.5217,14.3728 10.8317,14.0308 11.2337,14.0098 C11.6357,13.9898 11.9787,14.2988 11.9987,14.7018 C11.9997,14.7178 12.0007,14.7338 11.9997,14.7498 C12.0067,15.1388 11.6967,15.4598 11.3077,15.4668 Z" id="Fill-19" fill="#6EF9E1"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-21" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-23" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
const qualityExceptionSVG = `<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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-1104.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(1080.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-15" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Stroke-17" stroke="#6EF9E1" stroke-width="0.5"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-19" fill="#6FFADE"></path>
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
const qualityFaultSVG = `<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>
<defs>
<polygon id="path-1" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
<polygon id="path-3" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -529.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组" transform="translate(24.000000, 16.000000)">
<g>
<polygon id="Fill-1" fill="#6CC1B0" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M16.4896,19.530219 C15.2696,19.5352 14.2756,18.5512 14.2695728,17.3302 C14.2636,16.1092 15.2496,15.1152 16.4696,15.1101728 C17.6906,15.1042 18.6836,16.0902 18.6896,17.3092 L18.6896,17.3202 C18.6896,18.5372 17.7066,19.5242 16.4896,19.530219 M21.0696,20.9602 L19.5106,19.4002 C20.6666,17.7222 20.2446,15.4252 18.5666,14.2672 C16.8886,13.1102 14.5916,13.5332 13.4336,15.2112 C12.2776,16.8882 12.6996,19.1862 14.3776,20.3422 C15.6506,21.2202 17.3366,21.2122 18.5996,20.3202 L20.1496,21.8802 C20.2386,21.9672 20.3816,21.9672 20.4696,21.8802 L21.0696,21.2802 C21.1566,21.1902 21.1566,21.0492 21.0696,20.9602" id="Fill-3" fill="#6EF9E1"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-5" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-7" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-10"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-9" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(8.839800, 6.600000)" fill="#6EF9E1">
<path d="M7.1,0.73 C7.1,1.22 6.9,1.47 6.491,1.47 L0.61,1.47 C0.201,1.47 0,1.22 0,0.73 C0,0.24 0.201,0 0.61,0 L6.491,0 C6.9,0 7.1,0.24 7.1,0.73" id="Fill-11"></path>
<path d="M5.1703,4.6597 C5.1703,5.1497 4.9603,5.3997 4.5503,5.3997 L0.6203,5.3997 C0.2103,5.3997 0.0003,5.1497 0.0003,4.6597 C0.0003,4.1707 0.2103,3.9207 0.6203,3.9207 L4.5503,3.9207 C4.9603,3.9207 5.1703,4.1707 5.1703,4.6597" id="Fill-13"></path>
<path d="M3.1606,8.5904 C3.1606,9.0794 2.9506,9.3294 2.5296,9.3294 L0.6306,9.3294 C0.2106,9.3294 0.0006,9.0794 0.0006,8.5904 C0.0006,8.1004 0.2106,7.8504 0.6306,7.8504 L2.5296,7.8504 C2.9506,7.8504 3.1606,8.1004 3.1606,8.5904" id="Fill-15"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-17" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-19" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-22"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-21" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.609800, 6.600000)" fill="#6EF9E1">
<path d="M9.33,0.73 C9.33,1.22 9.07,1.47 8.53,1.47 L0.801,1.47 C0.27,1.47 0,1.22 0,0.73 C0,0.24 0.27,0 0.801,0 L8.53,0 C9.07,0 9.33,0.24 9.33,0.73" id="Fill-23"></path>
<path d="M6.79,4.6597 C6.79,5.1497 6.52,5.3997 5.971,5.3997 L0.811,5.3997 C0.27,5.3997 8.8817842e-16,5.1497 8.8817842e-16,4.6597 C8.8817842e-16,4.1707 0.27,3.9207 0.811,3.9207 L5.971,3.9207 C6.52,3.9207 6.79,4.1707 6.79,4.6597" id="Fill-25"></path>
<path d="M4.1601,8.5904 C4.1601,9.0794 3.8801,9.3294 3.3301,9.3294 L0.8301,9.3294 C0.2801,9.3294 0.0001,9.0794 0.0001,8.5904 C0.0001,8.1004 0.2801,7.8504 0.8301,7.8504 L3.3301,7.8504 C3.8801,7.8504 4.1601,8.1004 4.1601,8.5904" id="Fill-27"></path>
<path d="M13.9501,14.1197 C14.3091,14.1197 14.6001,14.4107 14.6001,14.7697 C14.6001,15.1297 14.3091,15.4207 13.9501,15.4207 C13.5911,15.4207 13.3001,15.1297 13.3001,14.7697 C13.3001,14.4107 13.5911,14.1197 13.9501,14.1197" id="Fill-29"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
export default {
name: 'QualityManagerHome',
components: {
@ -296,10 +204,7 @@ export default {
},
data() {
return {
qualitySVG,
qualityExceptionSVG,
qualityFaultSVG,
dateMode: 'month',
qualityTableProps,
qualityDatalist,
qualityExceptionDatalist,
@ -337,10 +242,43 @@ export default {
</script>
<style scoped>
::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
.fix-table-exception-alert >>> .el-table td .cell {
width: 75% !important;
margin: auto;
text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.visual-container {
width: 100%;
min-width: 1280px;
/* height: calc(100vh - 96px); */
height: 100vh;
display: flex;
flex-direction: column;
background: url('./assets/bg.png') no-repeat;
background-size: cover;
overflow: hidden;
@ -348,14 +286,18 @@ export default {
}
.techy-body {
height: calc(100vh - 96px);
flex: 1 0;
height: 65vh;
width: 100%;
padding: calc(100vw / 1920 * 24);
/* display: grid;
grid-template-rows: minmax(280px, 25vh) 1fr; */
padding: calc(24px * var(--beilv));
display: flex;
flex-direction: column;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.table-wrapper {
height: calc(100% - 3vh);
overflow: auto;
}
.grid {
@ -363,8 +305,7 @@ export default {
}
.gap-16-8 {
/* gap: calc(100vw / 1920 * 16) calc(100vw / 1920 * 8); */
gap: calc(100vw / 1920 * 8);
gap: calc(12px * var(--beilv)) calc(8px * var(--beilv));
}
.column-2 {
@ -372,38 +313,38 @@ export default {
}
.row-5 {
grid-template-rows: repeat(5, 25px);
grid-template-rows: repeat(5, calc(24px * var(--beilv)));
}
.part-1 {
/* flex: 1 1; */
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
flex: 1;
height: calc(263px * var(--beilv));
}
.part-1 > div {
width: 30px;
flex: 1 1;
}
.part-2 {
flex: 1 1;
flex: 0;
height: calc(542px * var(--beilv));
}
.quality-analysis__body {
height: calc(100% - 32px);
display: flex;
flex-direction: column;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.quality-analysis__body__row-1 {
/* flex: 1 1;
max-height: 25vh; */
height: 25vh;
height: calc(216px * var(--beilv));
overflow: hidden;
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.quality-analysis__body__row-2 {
@ -412,7 +353,7 @@ export default {
/* flex: 1.5 1.5; */
overflow: hidden;
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
font-size: 0.65vw;
}
@ -458,14 +399,14 @@ export default {
}
.gap-16 {
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.date-select {
position: absolute;
top: calc(100vh / 1920 * 22);
right: calc(100vw / 1440 * 12);
border-radius: 2px;
top: calc(16px * var(--beilv));
right: calc(10px * var(--beilv));
border-radius: calc(2px * var(--beilv));
overflow: hidden;
display: flex;
cursor: pointer;
@ -473,15 +414,15 @@ export default {
.date-select span {
display: inline-block;
width: 40px;
width: calc(40px * var(--beilv));
text-align: center;
font-size: 12px;
line-height: 18px;
font-size: calc(12px * var(--beilv));
line-height: calc(18px * var(--beilv));
color: white;
background-color: #31878c94;
}
.date-select span.date-select__active {
background-color: #42BBB7;
background-color: #42bbb7;
}
</style>

View File

@ -57,7 +57,7 @@ export default {
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
padding: calc(2px * var(--beilv));
display: flex;
}
@ -77,23 +77,23 @@ export default {
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
min-width: calc(32px * var(--beilv));
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 300px;
width: calc(300px * var(--beilv));
position: absolute;
top: 0;
right: 0;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
width: calc(20px * var(--beilv));
height: calc(20px * var(--beilv));
margin-left: calc(3px * var(--beilv));
}
.block-green-5 {
@ -178,9 +178,9 @@ export default {
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
font-size: calc(14px * var(--beilv));
line-height: calc(12px * var(--beilv));
}
.quality-analysis-bar__amount {
@ -189,8 +189,8 @@ export default {
/* min-width: 35%; */
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) 0;
font-size: calc(14px * var(--beilv));;
line-height: calc(12px * var(--beilv));;
}
</style>

View File

@ -1,17 +1,9 @@
<template>
<div class="techy-analysis-header">
<span v-html="titleLeftSVG" />
<span class="techy-analysis-header__title">
<slot />
</span>
<span v-html="titleRightSVG" />
</div>
</template>
<script>
const titleLeftSVG = `<svg
width="56px"
height="13px"
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@ -27,10 +19,7 @@ const titleLeftSVG = `<svg
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
@ -57,10 +46,15 @@ const titleLeftSVG = `<svg
</g>
</g>
</g>
</svg>`
const titleRightSVG = `<svg
width="56px"
height="13px"
</svg>
</span>
<span class="techy-analysis-header__title">
<slot />
</span>
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@ -76,10 +70,7 @@ const titleRightSVG = `<svg
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
@ -105,12 +96,17 @@ const titleRightSVG = `<svg
</g>
</g>
</g>
</g></svg>`
</g>
</svg>
</span>
</div>
</template>
<script>
export default {
name: 'TechyAnalysisHeader',
data() {
return { titleLeftSVG, titleRightSVG }
return {}
}
}
</script>
@ -118,12 +114,18 @@ export default {
<style scoped>
.techy-analysis-header {
text-align: center;
margin-bottom: 16px;
margin-bottom: calc(16px * var(--beilv));
}
.techy-analysis-header__title {
color: #01cfcc;
font-size: 15px;
line-height: 18px;
font-size: calc(15px * var(--beilv));
line-height: calc(18px * var(--beilv));
}
.top-icon {
display: inline-block;
width: calc(56px * var(--beilv));
height: calc(13px * var(--beilv));
}
</style>

View File

@ -11,7 +11,7 @@ export default {}
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.2);
display: inline-block;
height: 100%;
width: 100%;

View File

@ -12,7 +12,7 @@
</template>
<div class="container-title-wrapper">
<span class="container-icon" v-html="icon" />
<span class="container-icon" v-html="computeIcon" />
<span class="container-title">{{ title }}</span>
</div>
@ -21,6 +21,8 @@
</template>
<script>
import { IconBanshou, IconTrend, IconMenuChilun, IconSafetyHat, IconQuality, IconQuality2, IconQuality3 } from './icons'
export default {
name: 'TechyContainer',
props: {
@ -34,18 +36,38 @@ export default {
data() {
return {}
},
computed: {
computeIcon() {
switch (this.icon) {
case '扳手螺丝刀':
return IconBanshou
case '趋势搜索':
return IconTrend
case '清单齿轮':
return IconMenuChilun
case '安全帽':
return IconSafetyHat
case '质量1':
return IconQuality
case '质量2':
return IconQuality2
case '质量3':
return IconQuality3
// more...
}
}
},
mounted() {}
}
</script>
<style scoped>
.techy-container {
border: 2px solid #52fff1;
border: calc(2px * var(--beilv)) solid #52fff1;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
display: inline-block;
position: relative;
/* padding: 24px; */
padding: calc(100vw / 1920 * 22);
padding: calc(24px * var(--beilv));
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
@ -57,58 +79,47 @@ export default {
}
.horizontal {
/* height: 4px;
width: 24px; */
/* height: 0.325vh;
width: 3vh; */
height: calc(100vw / 1920 * 4);
width: calc(100vw / 1920 * 30);
height: calc(4px * var(--beilv));
width: calc(26px * var(--beilv));
}
.vertical {
/* height: 24px;
width: 4px; */
/* height: 3vh;
width: 0.325vh; */
height: calc(100vw / 1920 * 30);
width: calc(100vw / 1920 * 4);
height: calc(26px * var(--beilv));
width: calc(4px * var(--beilv));
}
.top {
top: -3px;
top: calc(-3px * var(--beilv));
}
.left {
left: -3px;
left: calc(-3px * var(--beilv));
}
.right {
right: -3px;
right: calc(-3px * var(--beilv));
}
.bottom {
bottom: -3px;
bottom: calc(-3px * var(--beilv));
}
.container-title-wrapper {
color: #52fff1;
display: flex;
align-items: center;
/* font-size: 18px;
font-size: calc(18px * var(--beilv));
line-height: 1;
height: 24px;
margin-bottom: 8px; */
/* font-size: 1.25vh;
line-height: 1;
height: 1.5vh;
margin-bottom: 1.25vh; */
font-size: calc((100vw / 1920) * 16);
line-height: 1;
height: calc((100vw / 1920) * 20);
margin-bottom: 1.5vh;
margin-bottom: calc(8px * var(--beilv));
}
.container-title {
margin-left: 4px;
margin-left: calc(4px * var(--beilv));
}
.container-icon {
position: relative;
height: calc(24px * var(--beilv)) !important;
width: calc(24px * var(--beilv)) !important;
}
</style>

View File

@ -1,17 +1,36 @@
<template>
<header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm">
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<img class="logo-img" src="./logo.png" alt="cnbm" />
<span class="techy-header__title">{{ headTitle }}</span>
<span class="fullscreen-btn" @click="handleClick('fullscreen')">
<span v-if="isFullScreen" v-html="unfullScreenSvg" />
<span v-else v-html="fullScreenSvg" />
</span>
<!-- <div class="date">2022.10.14</div>
<div class="time">20:12:24</div> -->
<div class="fullscreen-btn">
<!-- <span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" /> -->
<span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" />
<span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" />
</div>
</header>
</template>
<script>
const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>首页</title>
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero">
<g id="首页" transform="translate(1824.000000, 46.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path>
<path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path>
</g>
</g>
</g>
</svg>`
// const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const fullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
@ -23,7 +42,8 @@ const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" versi
</g>
</svg>`
const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
@ -33,12 +53,14 @@ const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" ver
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false
}
@ -48,6 +70,8 @@ export default {
if (source === 'fullscreen') {
this.isFullScreen = !this.isFullScreen
this.$emit('toggle-full-screen', { full: this.isFullScreen })
} else if (source === 'home') {
this.$router.push('/')
}
}
}
@ -55,6 +79,16 @@ export default {
</script>
<style scoped>
/* @font-face {
font-family: 'zcoolqingkehuangyouti';
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
} */
.techy-header {
background: transparent;
display: flex;
@ -63,30 +97,67 @@ export default {
position: relative;
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
padding: calc(24px * var(--beilv)) 0;
line-height: 1;
background: url(./header-new.png) no-repeat;
/** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */
/* background-size: cover; */
background-size: 100% 100%;
background-position: bottom left calc(100vw / 1920 * 40);
height: calc(100vw / 1920 * 80);
/* background-position: bottom left calc(100vw / 1920 * 40); */
background-position: bottom left calc(32px * var(--beilv));
height: calc(96px * var(--beilv));
}
.logo-img {
width: calc(100vw / 1920 * 24);
width: calc(28px * var(--beilv));
}
.techy-header__title {
display: line-block;
margin-left: calc(12px * var(--beilv));
/* font-size: 29px; */
font-size: calc(29px * var(--beilv));
line-height: calc(41px * var(--beilv));
letter-spacing: calc(2.23px * var(--beilv));
text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
}
.date,
.time {
/* font-family: zcoolqingkehuangyouti, sans-serif; */
font-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
line-height: 36px; */
color: #49e1de;
letter-spacing: 0.8px;
position: absolute;
bottom: calc(100vmin / 1920 * 14);
}
.date {
/* left: 72px; */
left: calc(100vmin / 1920 * 72);
}
.time {
/* right: 128px; */
right: calc(100vmin / 1920 * 186);
}
.fullscreen-btn {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24);
right: calc(24px * var(--beilv));
top: calc(44px * var(--beilv));
bottom: 0;
}
.fullscreen-btn > span {
display: inline-block;
width: calc(32px * var(--beilv));
height: calc(32px * var(--beilv));
}
</style>

View File

@ -7,15 +7,14 @@
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
: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 * beilv" align="center" />
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop"
@ -23,10 +22,14 @@
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
: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" />
@ -107,82 +110,101 @@ export default {
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
<style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container {
.el-table {
border: 0;
height: 100%;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
/* .visual-base-table-container >>> .el-table {
min-width: 120%;
} */
/* 清除默认样式 */
.visual-base-table-container >>> th.gutter {
display: none;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
.visual-base-table-container >>> table {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
// new
.el-table {
width: 100%;
.el-table__header-wrapper table, .el-table__body-wrapper table {
width: 100% !important;
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.el-table__body, .el-table__footer, .el-table__header {
table-layout: auto;
}
}
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffff50;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e90;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #20376090;
}
</style>

View File

@ -88,11 +88,11 @@ export default {
title: {
textAlign: 'center',
left: '59%',
top: '35%',
top: '30%',
text: '33039',
textStyle: {
color: '#fff',
fontSize: 26,
fontSize: 22,
fontWeight: 'normal'
},
subtext: '总数',
@ -103,8 +103,9 @@ export default {
}
},
legend: {
top: '20%',
bottom: '25%',
height: '100%',
align: 'center',
verticalAlign: 'center',
left: 0,
orient: 'vertical',
icon: 'none',
@ -207,11 +208,11 @@ export default {
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
first: { color: '#FB418C', fontSize: 12 },
second: { color: '#DDB112', fontSize: 12 },
third: { color: '#1A99FF', fontSize: 12 },
fourth: { color: '#A691FF', fontSize: 12 },
fifth: { color: '#49FBD6', fontSize: 12 }
first: { color: '#FB418C', fontSize: 10 },
second: { color: '#DDB112', fontSize: 10 },
third: { color: '#1A99FF', fontSize: 10 },
fourth: { color: '#A691FF', fontSize: 10 },
fifth: { color: '#49FBD6', fontSize: 10 }
}
},
itemStyle: {

View File

@ -52,12 +52,13 @@ export default {
},
mounted() {
if (this.dataList.length > 1) {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [
{
//
name: this.dataList[0].name,
type: 'bar',
barWidth: 30,
barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
@ -70,7 +71,7 @@ export default {
//
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 26,
barWidth,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
@ -83,7 +84,7 @@ export default {
//
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 26,
barWidth,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
@ -94,7 +95,7 @@ export default {
//
name: this.dataList[1].name,
type: 'bar',
barWidth: 30,
barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
@ -107,7 +108,7 @@ export default {
//
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 26,
barWidth,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
@ -120,7 +121,7 @@ export default {
//
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 26,
barWidth,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
@ -275,27 +276,27 @@ export default {
/* .fault-category-chart::before { */
content: '';
position: absolute;
/* bottom: calc(100vh/1920 * 80);
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
bottom: calc(30px * var(--beilv));
left: 9%;
height: 52px;
height: calc(32px * var(--beilv));
width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-45deg);
transform: skew(-35deg);
z-index: 0;
}
.process-fault-chart >>> div::before {
/* .process-fault-chart::before { */
content: '';
position: absolute;
bottom: 26px;
left: 10%;
height: 48px;
bottom: 12%;
left: 8%;
height: calc(32px * var(--beilv));
/* bottom: calc(20px * var(--beilv));
left: calc(36px * var(--beilv));
height: calc(32px * var(--beilv)); */
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
transform: skew(-35deg);
z-index: 0;
}
</style>

View File

@ -101,7 +101,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#FB418C' // 0%
color: '#FB418C66' // 0%
},
{
offset: 1,
@ -132,7 +132,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#DDB112' // 0%
color: '#DDB11266' // 0%
},
{
offset: 1,
@ -163,7 +163,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#1A99FF' // 0%
color: '#1A99FF66' // 0%
},
{
offset: 1,
@ -194,7 +194,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#A691FF' // 0%
color: '#A691FF66' // 0%
},
{
offset: 1,
@ -229,7 +229,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#49FBD6' // 0%
color: '#49FBD666' // 0%
},
{
offset: 1,

View File

@ -0,0 +1,226 @@
// 扳手
export const IconBanshou = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>setting tools</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M5.8599,18.0898 C6.4089,18.6418 7.3019,18.6448 7.8539,18.0958 C7.8559,18.0938 7.8579,18.0918 7.8599,18.0898 L14.5199,11.4298 L14.8899,11.4998 L15.0599,11.4998 C16.6169,11.7418 18.1089,10.7848 18.5399,9.2698 L18.2299,9.6198 C17.1349,10.6718 15.4049,10.6718 14.3099,9.6198 C13.2319,8.5358 13.2319,6.7838 14.3099,5.6998 L14.5999,5.4098 C13.0609,5.8908 12.1389,7.4618 12.4699,9.0398 L12.5499,9.4098 L5.8809,16.0798 C5.6139,16.3438 5.4659,16.7048 5.46982098,17.0798 C5.4729,17.4538 5.6199,17.8118 5.8809,18.0798 L5.8599,18.0898 Z M6.8599,19.8698 C6.1109,19.8828 5.3889,19.5898 4.8599,19.0598 C3.7809,17.9838 3.7769,16.2358 4.8529,15.1568 C4.8559,15.1538 4.8579,15.1518 4.8599,15.1498 L11.0099,8.9898 C10.7039,6.6548 12.2459,4.4768 14.5499,3.9898 L14.7799,3.9398 L15.0899,3.9398 C15.6049,3.8968 16.0939,4.1748 16.3199,4.6398 C16.4859,5.0968 16.3549,5.6088 15.9899,5.9298 L15.2299,6.6898 C14.6769,7.2388 14.6749,8.1318 15.2239,8.6838 L15.2299,8.6898 C15.7859,9.2338 16.6739,9.2338 17.2299,8.6898 L17.9899,7.9198 C18.2099,7.6868 18.5099,7.5478 18.8299,7.5298 C19.1509,7.5208 19.4599,7.6568 19.6709,7.8998 C19.9429,8.2518 20.0459,8.7058 19.9499,9.1398 C19.5749,11.5408 17.3609,13.2088 14.9499,12.9098 L8.7999,19.0598 C8.2859,19.5748 7.5889,19.8668 6.8599,19.8698 L6.8599,19.8698 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-7" fill="#6FFADE"></path>
<polygon id="Fill-9" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
<path d="M5.3901,18.6099 C4.5621,17.8059 4.5411,16.4829 5.3451,15.6549 C5.3601,15.6399 5.3741,15.6249 5.3901,15.6099 L11.7891,9.2099 C11.3521,7.1479 12.6671,5.1199 14.7301,4.6799 L14.9301,4.6799 L15.1501,4.6799 C15.7401,4.6799 15.9301,5.1099 15.5501,5.4899 L14.7891,6.2499 C13.9611,7.0789 13.9611,8.4219 14.7891,9.2499 C15.6191,10.0789 16.9611,10.0789 17.7891,9.2499 L18.5501,8.4899 C18.6531,8.3769 18.7971,8.3079 18.9501,8.2999 C19.2201,8.2999 19.4301,8.5999 19.3501,9.1099 C19.0271,11.1909 17.0811,12.6169 15.0001,12.2999 L14.7901,12.2999 L8.3901,18.6999 C7.5861,19.5279 6.2631,19.5479 5.4351,18.7449 C5.4191,18.7299 5.4051,18.7149 5.3901,18.6999 L5.3901,18.6099 Z" id="Stroke-13" stroke="#6FFADE" stroke-width="1.5"></path>
<path d="M16.9399,20.1099 L13.4609,16.6299 C13.3319,16.4919 13.3319,16.2779 13.4609,16.1399 L14.9399,14.6699 C15.0699,14.5349 15.2859,14.5309 15.4199,14.6609 C15.4239,14.6639 15.4269,14.6669 15.4299,14.6699 L18.9099,18.1499 C19.4619,18.7019 19.4619,19.5979 18.9099,20.1499 C18.3579,20.7019 17.4619,20.7019 16.9099,20.1499 L16.9399,20.1099 Z" id="Fill-15" fill="#6FFADE"></path>
<polygon id="Fill-17" fill="#6FFADE" points="5.6499 7.6899 4.6199 7.1499 3.3899 5.4299 4.3799 4.4399 6.0999 5.6699 6.6399 6.7099 9.0399 9.1199 8.0599 10.1099"></polygon>
</g>
</g>
</g>
</g>
</svg>`
// 趋势+放大镜
export const IconTrend = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>analysis</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-384.000000, -533.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 509.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-5" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-7" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-9" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-11" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-15" fill="#6FFADE"></path>
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-19" fill="#6FFADE"></path>
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-21" fill="#6FFADE"></path>
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-23" fill="#6FFADE"></path>
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-25" fill="#6FFADE"></path>
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-27" fill="#6FFADE"></path>
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-29" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
// 菜单+齿轮
export const IconMenuChilun = `<svg width="100%" height="100%" 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>
<defs>
<polygon id="path-1" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
<polygon id="path-3" points="0 0 16.1800204 0 16.1800204 18.6799449 0 18.6799449"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1532.000000, -254.000000)">
<g id="编组-6" transform="translate(1508.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-3" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-5" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-8"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-7" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-11" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-13" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-15" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-17" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-19" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-21" fill="#6DF8E1"></path>
</g>
<path d="M9.0701,20.7905 C9.0691,21.0755 9.2221,21.3395 9.4701,21.4795 C9.7211,21.6205 10.0281,21.6205 10.2801,21.4795 C10.5301,21.3405 10.6871,21.0765 10.6901,20.7905 C10.6761,20.3375 10.2981,19.9815 9.8451,19.9955 C9.7131,20.0005 9.5851,20.0355 9.4701,20.1005 C9.2201,20.2395 9.0671,20.5045 9.0701,20.7905" id="Fill-23" fill="#6EF9E1"></path>
<path d="M17.7101951,12.2602 C17.7092,12.5452 17.8622,12.8092 18.1102,12.9492 C18.3612,13.0902 18.6682,13.0902 18.9202,12.9492 C19.1702,12.8102 19.3272,12.5472 19.3302,12.2602 C19.3262,11.9702 19.1702,11.7042 18.9202,11.5602 C18.6682,11.4192 18.3612,11.4192 18.1102,11.5602 C17.8612,11.7052 17.7101951,11.9722 17.7101951,12.2602" id="Fill-25" fill="#6EF9E1"></path>
<g transform="translate(3.140000, 2.930055)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-28"></g>
<path d="M14.85,0 L1.35,0 C0.61,-0.00595509266 0.006,0.590044907 0,1.33004491 L0,1.34004491 L0,17.3400449 C0,18.0800449 0.6,18.6800449 1.34,18.6800449 L1.35,18.6800449 L6.75,18.6800449 L6.75,17.0800449 L2.75,17.0800449 C2.121,17.0850449 1.605,16.5790449 1.6,15.9500449 L1.6,15.9390449 L1.6,2.72904491 C1.6,2.10104491 2.11,1.59004491 2.74,1.59004491 L2.75,1.59004491 L13.41,1.59004491 C14.041,1.59004491 14.555,2.09904491 14.56,2.72904491 L14.56,9.33004491 L16.1800204,9.33004491 L16.1800204,1.33004491 C16.182,0.972044907 16.037,0.629044907 15.78,0.380044907 C15.531,0.138044907 15.198,0.00104490734 14.85,0" id="Fill-27" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.579800, 7.340500)">
<path d="M12.3702,11.45 C12.3812,12.322 11.6832,13.038 10.8102,13.05 C9.9372,13.06 9.2222,12.362 9.2102,11.489 C9.1992,10.617 9.8982,9.901 10.7702,9.88897334 L10.7902,9.88897334 C11.6572,9.884 12.3652,10.583 12.3702,11.449 L12.3702,11.45 Z M14.3102,12.13 L13.6802,11.66 C13.6862,11.59 13.6862,11.519 13.6802,11.45 C13.6852,11.377 13.6852,11.303 13.6802,11.229 L14.3102,10.769 C14.4802,10.635 14.5222,10.394 14.4102,10.21 L13.7202,9.05 C13.6362,8.915 13.4892,8.832 13.3302,8.83 C13.2812,8.819 13.2292,8.819 13.1802,8.83 L12.4302,9.109 C12.3072,9.028 12.1762,8.958 12.0402,8.899 L11.9302,8.149 C11.8992,7.931 11.7102,7.772 11.4902,7.779 L10.0802,7.779 C9.8632,7.781 9.6792,7.936 9.6402,8.149 L9.5402,8.899 L9.1502,9.109 L8.4102,8.83 L8.2502,8.83 C8.0922,8.826 7.9452,8.911 7.8702,9.05 L7.1602,10.21 C7.0502,10.397 7.0972,10.638 7.2702,10.769 L7.8902,11.229 L7.8902,11.45 C7.8852,11.519 7.8852,11.59 7.8902,11.66 L7.2702,12.13 C7.0992,12.258 7.0512,12.495 7.1602,12.679 L7.8602,13.849 C7.9452,13.984 8.0912,14.067 8.2502,14.069 C8.3002,14.079 8.3502,14.079 8.4002,14.069 L9.1402,13.779 C9.2642,13.864 9.3942,13.937 9.5302,14 L9.6402,14.75 C9.6792,14.963 9.8632,15.118 10.0802,15.12 L11.4902,15.12 C11.7102,15.127 11.8992,14.968 11.9302,14.75 L12.0402,14 C12.1772,13.94 12.3082,13.866 12.4302,13.779 L13.1802,14.069 C13.2292,14.079 13.2812,14.079 13.3302,14.069 C13.4912,14.073 13.6402,13.988 13.7202,13.849 L14.4202,12.679 C14.5242,12.494 14.4782,12.261 14.3102,12.13 L14.3102,12.13 Z" id="Fill-29" fill="#6FFADE"></path>
<path d="M9.4102,0.739 C9.4102,1.229 9.2002,1.469 8.8002,1.469 L2.9202,1.469 C2.5102,1.469 2.3102,1.229 2.3102,0.739 C2.3102,0.25 2.5102,0 2.9202,0 L8.8002,0 C9.2002,0 9.4102,0.25 9.4102,0.739" id="Fill-31" fill="#6EF9E1"></path>
<path d="M7.4102,4.6599 C7.4102,5.1599 7.2002,5.3989 6.7902,5.3989 L2.8702,5.3989 C2.4502,5.3989 2.2502,5.1599 2.2502,4.6599 C2.2502,4.1599 2.4502,3.9299 2.8702,3.9299 L6.7902,3.9299 C7.2002,3.9299 7.4102,4.1699 7.4102,4.6599" id="Fill-33" fill="#6EF9E1"></path>
<path d="M5.4102,8.5896 C5.4102,9.0796 5.2002,9.3296 4.7802,9.3296 L2.8802,9.3296 C2.4602,9.3296 2.2502,9.0796 2.2502,8.5896 C2.2502,8.0996 2.4602,7.8596 2.8802,7.8596 L4.7802,7.8596 C5.2002,7.8596 5.4102,8.0996 5.4102,8.5896" id="Fill-35" fill="#6EF9E1"></path>
<path d="M0.73,0.0095 L0.75,0.0095 C1.153,0.0095 1.48,0.3365 1.48,0.7385 L1.48,0.7495 C1.48,1.1535 1.153,1.4795 0.75,1.4795 L0.73,1.4795 C0.327,1.4795 0,1.1535 0,0.7495 L0,0.7385 C0,0.3365 0.327,0.0095 0.73,0.0095" id="Fill-37" fill="#6DF8E1"></path>
<path d="M0.73,3.9695 L0.75,3.9695 C1.153,3.9695 1.48,4.2965 1.48,4.6995 L1.48,4.7095 C1.48,5.1135 1.153,5.4395 0.75,5.4395 L0.73,5.4395 C0.327,5.4395 0,5.1135 0,4.7095 L0,4.6995 C0,4.2965 0.327,3.9695 0.73,3.9695" id="Fill-39" fill="#6DF8E1"></path>
<path d="M0.73,7.9197 L0.75,7.9197 C1.153,7.9197 1.48,8.2457 1.48,8.6487 L1.48,8.6597 C1.48,9.0627 1.153,9.3897 0.75,9.3897 L0.73,9.3897 C0.327,9.3897 0,9.0627 0,8.6597 L0,8.6487 C0,8.2457 0.327,7.9197 0.73,7.9197" id="Fill-41" fill="#6DF8E1"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
// 闪电安全帽
export const IconSafetyHat = `<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hatplus</title>
<defs>
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
<stop stop-color="#4BFFC8" offset="0%"></stop>
<stop stop-color="#45F2EC" offset="100%"></stop>
</linearGradient>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-998.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(974.000000, 230.000000)">
<g id="编组-6" transform="translate(24.000000, 24.000000)">
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
<g id="异常" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="17" height="17"></rect>
<path d="M9.00003613,1.00009438 C7.45266489,0.991339384 5.96400493,1.59197413 4.85604619,2.6721807 C3.77420104,3.74179852 3.16375561,5.19879645 3.16005953,6.72012488 L3.16005953,14.5280306 L14.7760126,14.5280306 L14.7760126,6.72010926 C14.7746725,5.19671341 14.1605756,3.73789487 13.0720104,2.67216507 C11.9832986,1.60721536 10.5229694,1.00760431 9.0000205,1.00009438 L9.00003613,1.00009438 Z M8.52003548,12.6560576 L8.35203526,8.87208057 L5.48804703,8.87208057 L9.24800521,4.12815624 L9.56800564,7.18412206 L12.2880093,7.28012148 L8.48800418,12.6560576 L8.52003548,12.6560576 Z M1.00003551,16.1280053 C0.997937773,15.8953576 1.08886376,15.671504 1.25262424,15.5062394 C1.41638472,15.3409748 1.63939864,15.2480106 1.87205781,15.2480106 L16.1280144,15.2480106 C16.3586463,15.2508825 16.5792874,15.3425823 16.7440153,15.5040247 C16.9059435,15.6716664 16.9975415,15.894943 17,16.1280053 C17,16.6095886 16.6096013,17 16.1280144,17 L1.87205781,17 C1.39047096,17 1.00003551,16.6095886 1.00003551,16.1280053 L1.00003551,16.1280053 Z" id="形状" fill="url(#linearGradient-1)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`
// 质量
export const IconQuality = `<svg width="100%" height="100%" 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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -254.000000)">
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-3" fill="#6EF9E1"></path>
<path d="M15.8982,17.8 L15.8982,20.15 C15.8622,20.495 16.1052,20.809 16.4482,20.86 L22.2982,20.86 C22.6462,20.814 22.8942,20.499 22.8582,20.15 L22.8582,17.73 C22.8582,17.56 22.7482,17.42 22.6282,17.42 C22.4772,17.441 22.3702,17.578 22.3882,17.73 L22.3882,20.24 L16.3882,20.24 L16.3882,17.72 C16.3882,17.56 16.2782,17.43 16.1582,17.43 C16.0382,17.43 15.9382,17.56 15.9282,17.72 L15.8982,17.8 Z M22.2982,21.04 L16.4582,21.04 C16.0112,20.992 15.6832,20.598 15.7182,20.15 L15.7182,17.67 C15.7192,17.449 15.8992,17.271 16.1202,17.2729833 C16.3392,17.274 16.5172,17.45 16.5182,17.67 L16.5182,20.1 L22.1782,20.1 L22.1782,17.78 C22.1422,17.551 22.2992,17.336 22.5282,17.3 C22.7572,17.265 22.9722,17.421 23.0082,17.651 C23.0152,17.694 23.0152,17.738 23.0082,17.78 L23.0082,20.2 C23.0182,20.619 22.7132,20.98 22.2982,21.04 L22.2982,21.04 Z" id="Fill-5" fill="#6EF9E1"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-11" fill="#6FFADE"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-13" fill="#6EF9E1"></path>
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Stroke-15" stroke="#6EF9E1" stroke-width="0.2"></path>
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-17" fill="#6FFADE"></path>
<path d="M12.2967,6.8498 L11.9997,12.7348 C11.9267,13.1178 11.5587,13.3688 11.1757,13.2948 C10.8917,13.2418 10.6697,13.0188 10.6147,12.7348 L10.3057,6.8498 L10.3057,6.7878 C10.3937,6.2348 10.9127,5.8568 11.4647,5.9438 C11.8997,6.0118 12.2407,6.3528 12.3087,6.7878 C12.3137,6.8078 12.3137,6.8288 12.3087,6.8498 L12.2967,6.8498 Z M11.3077,15.4668 C10.9047,15.4878 10.5627,15.1778 10.5417,14.7758 C10.5217,14.3728 10.8317,14.0308 11.2337,14.0098 C11.6357,13.9898 11.9787,14.2988 11.9987,14.7018 C11.9997,14.7178 12.0007,14.7338 11.9997,14.7498 C12.0067,15.1388 11.6967,15.4598 11.3077,15.4668 Z" id="Fill-19" fill="#6EF9E1"></path>
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-21" fill="#6FFADE"></path>
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-23" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
// 质量
export const IconQuality2 = `<svg width="100%" height="100%" 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="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-1104.000000, -254.000000)">
<g id="编组-16备份-8" transform="translate(1080.000000, 230.000000)">
<g id="编组" transform="translate(24.000000, 24.000000)">
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-3" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-5" fill="#6FFADE"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-7" fill="#6FFADE"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-13" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-15" fill="#6FFADE"></path>
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Stroke-17" stroke="#6EF9E1" stroke-width="0.5"></path>
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-19" fill="#6FFADE"></path>
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
</g>
</g>
</g>
</g>
</svg>`
// 质量
export const IconQuality3 = `<svg width="100%" height="100%" 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>
<defs>
<polygon id="path-1" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
<polygon id="path-3" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-384.000000, -529.000000)">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组" transform="translate(24.000000, 16.000000)">
<g>
<polygon id="Fill-1" fill="#6CC1B0" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
<path d="M16.4896,19.530219 C15.2696,19.5352 14.2756,18.5512 14.2695728,17.3302 C14.2636,16.1092 15.2496,15.1152 16.4696,15.1101728 C17.6906,15.1042 18.6836,16.0902 18.6896,17.3092 L18.6896,17.3202 C18.6896,18.5372 17.7066,19.5242 16.4896,19.530219 M21.0696,20.9602 L19.5106,19.4002 C20.6666,17.7222 20.2446,15.4252 18.5666,14.2672 C16.8886,13.1102 14.5916,13.5332 13.4336,15.2112 C12.2776,16.8882 12.6996,19.1862 14.3776,20.3422 C15.6506,21.2202 17.3366,21.2122 18.5996,20.3202 L20.1496,21.8802 C20.2386,21.9672 20.3816,21.9672 20.4696,21.8802 L21.0696,21.2802 C21.1566,21.1902 21.1566,21.0492 21.0696,20.9602" id="Fill-3" fill="#6EF9E1"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-5" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-7" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-10"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-9" fill="#6EF9E1" mask="url(#mask-2)"></path>
</g>
<g transform="translate(8.839800, 6.600000)" fill="#6EF9E1">
<path d="M7.1,0.73 C7.1,1.22 6.9,1.47 6.491,1.47 L0.61,1.47 C0.201,1.47 0,1.22 0,0.73 C0,0.24 0.201,0 0.61,0 L6.491,0 C6.9,0 7.1,0.24 7.1,0.73" id="Fill-11"></path>
<path d="M5.1703,4.6597 C5.1703,5.1497 4.9603,5.3997 4.5503,5.3997 L0.6203,5.3997 C0.2103,5.3997 0.0003,5.1497 0.0003,4.6597 C0.0003,4.1707 0.2103,3.9207 0.6203,3.9207 L4.5503,3.9207 C4.9603,3.9207 5.1703,4.1707 5.1703,4.6597" id="Fill-13"></path>
<path d="M3.1606,8.5904 C3.1606,9.0794 2.9506,9.3294 2.5296,9.3294 L0.6306,9.3294 C0.2106,9.3294 0.0006,9.0794 0.0006,8.5904 C0.0006,8.1004 0.2106,7.8504 0.6306,7.8504 L2.5296,7.8504 C2.9506,7.8504 3.1606,8.1004 3.1606,8.5904" id="Fill-15"></path>
</g>
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-17" fill="#6EF9E1"></path>
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-19" fill="#6EF9E1"></path>
<g transform="translate(3.130000, 2.179202)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-22"></g>
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-21" fill="#6EF9E1" mask="url(#mask-4)"></path>
</g>
<g transform="translate(6.609800, 6.600000)" fill="#6EF9E1">
<path d="M9.33,0.73 C9.33,1.22 9.07,1.47 8.53,1.47 L0.801,1.47 C0.27,1.47 0,1.22 0,0.73 C0,0.24 0.27,0 0.801,0 L8.53,0 C9.07,0 9.33,0.24 9.33,0.73" id="Fill-23"></path>
<path d="M6.79,4.6597 C6.79,5.1497 6.52,5.3997 5.971,5.3997 L0.811,5.3997 C0.27,5.3997 8.8817842e-16,5.1497 8.8817842e-16,4.6597 C8.8817842e-16,4.1707 0.27,3.9207 0.811,3.9207 L5.971,3.9207 C6.52,3.9207 6.79,4.1707 6.79,4.6597" id="Fill-25"></path>
<path d="M4.1601,8.5904 C4.1601,9.0794 3.8801,9.3294 3.3301,9.3294 L0.8301,9.3294 C0.2801,9.3294 0.0001,9.0794 0.0001,8.5904 C0.0001,8.1004 0.2801,7.8504 0.8301,7.8504 L3.3301,7.8504 C3.8801,7.8504 4.1601,8.1004 4.1601,8.5904" id="Fill-27"></path>
<path d="M13.9501,14.1197 C14.3091,14.1197 14.6001,14.4107 14.6001,14.7697 C14.6001,15.1297 14.3091,15.4207 13.9501,15.4207 C13.5911,15.4207 13.3001,15.1297 13.3001,14.7697 C13.3001,14.4107 13.5911,14.1197 13.9501,14.1197" id="Fill-29"></path>
</g>
</g>
</g>
</g>
</g>
</svg>`

View File

@ -38,12 +38,12 @@ const PriorityComponent = {
console.log('is component?', PriorityComponent)
export const qualityTableProps = [
{ label: '工序名称', width: 80, prop: 'wsName' },
{ label: '所属产线', width: 80, prop: 'pl' },
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' },
{ label: '异常内容', align: 'center', prop: 'content' },
{ label: '报告人', width: 80, prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
{ label: '报告人', width: 120, prop: 'creator', align: 'center' },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
]
export const qualityDatalist = [
@ -96,14 +96,14 @@ const StatusComponent = {
}
export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName' },
{ label: '所属产线', prop: 'pl' },
{ label: '异常内容', prop: 'content' },
{ label: '发现人', prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '处理人', prop: 'charger' },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
{ label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 },
{ label: '异常内容', prop: 'content', align: 'center' },
{ label: '发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
{ label: '处理人', prop: 'charger', align: 'center', width: 100 },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
]
export const qualityExceptionDatalist = [

View File

@ -6,12 +6,12 @@
* @Description:
-->
<template>
<div class="app-container">
<div class="app-container system-manage-landpage">
<el-container>
<el-aside>
<side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
</el-aside>
<el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
<el-main>
<el-form
ref="dataForm"
:model="dataForm"
@ -24,7 +24,12 @@
<span style="margin: 0 5px;color:#1890FF">{{ dataForm.orgName }}</span>
</el-form-item>
<el-form-item :label="$t('userManage.userName') + ''" prop="name">
<el-input v-model="dataForm.name" :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
<el-input
v-model="dataForm.name"
:placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
clearable
:style="{ width: '100%' }"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
@ -47,7 +52,13 @@
@clickBtn="handleClick"
/>
</base-table>
<pagination v-show="total > 0" :total="total" :page.sync="dataForm.page" :limit.sync="dataForm.limit" @pagination="getList" />
<pagination
v-show="total > 0"
:total="total"
:page.sync="dataForm.page"
:limit.sync="dataForm.limit"
@pagination="getList"
/>
<add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
<edit-user-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @refreshDataList="getList" />
@ -55,7 +66,6 @@
</el-main>
</el-container>
</div>
</template>
<script>
@ -80,30 +90,37 @@ const topBtnConfig = [
}
]
// edit here
const tableBtn = [{
const tableBtn = [
{
type: 'edit',
btnName: 'btn.edit'
}, {
},
{
type: 'EmPower',
btnName: i18n.t('userManage.AssignRole')
}, {
},
{
type: 'delete',
btnName: 'btn.delete'
}]
}
]
// birthday
// orgId
// sex
// code
// remark
const tableProps = [{
const tableProps = [
{
prop: 'name',
label: i18n.t('userManage.userName'),
align: 'center'
}, {
},
{
prop: 'email',
label: i18n.t('userManage.email'),
align: 'center'
}, {
},
{
prop: 'mobile',
label: i18n.t('userManage.mobile'),
align: 'center'
@ -133,16 +150,19 @@ const tableProps = [{
prop: 'code',
label: i18n.t('userManage.code'),
align: 'center'
}, {
},
{
prop: 'enabled',
label: i18n.t('userManage.status'),
align: 'center',
filter: dataDict('enableState')
}, {
},
{
prop: 'remark',
label: i18n.t('userManage.remark'),
align: 'center'
}]
}
]
export default {
components: { sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
data() {
@ -174,16 +194,20 @@ export default {
current: 1,
size: 20
},
sexOptions: [{
'label': '全部',
'value': ''
}, {
'label': '男',
'value': 1
}, {
'label': '女',
'value': 2
}]
sexOptions: [
{
label: '全部',
value: ''
},
{
label: '男',
value: 1
},
{
label: '女',
value: 2
}
]
}
},
created() {
@ -274,11 +298,62 @@ export default {
</script>
<style scoped>
.el-container >>> .el-aside {
border:2px solid #E4E4E4;
border-radius:10px;
background-color: white;
min-height:550px;
width:30%;
padding-top:20px
border-radius: 8px;
background-color: #fff;
width: 256px !important;
padding-top: 20px;
margin: 0;
padding-left: 0;
padding-right: 0;
}
.el-container >>> .el-main {
border-radius: 8px;
background-color: #fff;
border: unset;
}
.el-container >>> .el-tree-node__content {
padding-left: 16px !important;
padding-right: 16px !important;
}
.el-container >>> .el-tree-node__content:hover {
background-color: #e3efff;
}
.el-container >>> .el-tree-node:focus > .el-tree-node__content {
background-color: #e3efff;
}
/* .el-container >>> .el-icon-caret-right {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
border: 1px solid #000;
background-color: transparent;
} */
.el-container >>> .el-icon-caret-right::before {
/* content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid #000;
background-color: transparent; */
}
.system-manage-landpage {
background: unset;
padding: 0;
display: flex;
}
.el-container {
display: flex;
gap: 8px;
}
.el-container >>> .el-tree-node__label {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.88px;
color: #161616;
}
</style>

View File

@ -9,7 +9,7 @@
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
@ -111,7 +111,7 @@ export default {
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
@ -120,7 +120,7 @@ export default {
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',

View File

@ -1,5 +1,5 @@
<template>
<div id="container" ref="container" class="visual-container">
<div id="container" ref="container" class="visual-container material-cockpit">
<el-row
class="container-title"
:style="{
@ -8,16 +8,18 @@
fontSize: beilv * 30 + 'px'
}"
>
<div :style="{ paddingLeft: 645 * beilv + 'px' }">
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
合肥新能源数字工厂物料管理驾驶舱
</div>
<el-button
type="text"
class="title-button"
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
:style="{ right: 0, top: 37 * beilv + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
<svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
</el-button>
</el-row>
<el-row class="container-main" :style="{ padding: '0 ' + 16 * beilv + 'px' }" :gutter="16 * beilv">
@ -32,7 +34,7 @@
<el-row>
<el-col :style="{ marginTop: 16 * beilv + 'px' }">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="14"
@ -49,7 +51,7 @@
<el-row>
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
<div class="box-padding">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="14"
@ -75,45 +77,55 @@ import bomList from './components/bomList.vue'
const originalFilm = [
{
prop: 'time',
label: '上线时间'
label: '上线时间',
minWidth: 35
},
{
prop: 'productLine',
label: '产线'
label: '产线',
minWidth: 33
},
{
prop: 'spec',
label: '原片规格'
label: '原片规格',
minWidth: 32.4
},
{
prop: 'batch',
label: '批次'
label: '批次',
minWidth: 35
},
{
prop: 'num',
label: '数量'
label: '数量',
minWidth: 28
}
]
const material = [
{
prop: 'time',
label: '上线时间'
label: '上线时间',
minWidth: 35
},
{
prop: 'eqName',
label: '设备名称'
label: '设备名称',
minWidth: 33
},
{
prop: 'spec',
label: '辅料规格'
label: '辅料规格',
minWidth: 32.4
},
{
prop: 'batch',
label: '批次'
label: '批次',
minWidth: 35
},
{
prop: 'num',
label: '数量'
label: '数量',
minWidth: 28
}
]
export default {
@ -220,6 +232,7 @@ export default {
})
return false
}
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container)
}
}
@ -236,7 +249,6 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%;
color: #fff;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
@ -248,3 +260,17 @@ export default {
}
}
</style>
<style lang="scss">
.material-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 40px;
padding-right: 40px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 40px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div id="container" ref="container" class="visual-container">
<div id="container" ref="container" class="visual-container order-cockpit">
<el-row
class="container-title"
:style="{
@ -8,16 +8,18 @@
fontSize: beilv * 30 + 'px'
}"
>
<div :style="{ paddingLeft: 645 * beilv + 'px' }">
<img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
合肥新能源数字工厂工单管理驾驶舱
</div>
<el-button
type="text"
class="title-button"
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
:style="{ right: 0, top: 37 * beilv + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
<svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
</el-button>
</el-row>
<el-row class="container-main">
@ -30,7 +32,7 @@
</el-col>
<el-col :span="14">
<base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
<div class="box-padding">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="12"
@ -47,7 +49,7 @@
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
<div class="box-padding">
<div class="box-padding specil-table2">
<base-table
:page="1"
:limit="16"
@ -73,71 +75,87 @@ import orderStatus from './components/orderStatus.vue'
const orderPool = [
{
prop: 'customerName',
label: '客户名称'
label: '客户名称',
minWidth: 35.2
},
{
prop: 'orderCode',
label: '订单编号'
label: '订单编号',
minWidth: 32
},
{
prop: 'productName',
label: '产品名称'
label: '产品名称',
minWidth: 32
},
{
prop: 'planNum',
label: '计划加工量'
label: '计划加工量',
minWidth: 23.6
},
{
prop: 'planDelivery',
label: '计划交货期'
label: '计划交货期',
minWidth: 28.8
},
{
prop: 'status',
label: '订单状态',
subcomponent: orderStatus
subcomponent: orderStatus,
minWidth: 19
}
]
const orderMonitiring = [
{
prop: 'customerName',
label: '客户名称'
label: '客户名称',
minWidth: 35.2
},
{
prop: 'orderCode',
label: '订单编号'
label: '订单编号',
minWidth: 33.2
},
{
prop: 'status',
label: '订单状态',
subcomponent: orderStatus
subcomponent: orderStatus,
minWidth: 27
},
{
prop: 'completion',
label: '完成率'
label: '完成率',
minWidth: 24.8
},
{
prop: 'yield',
label: '良品率'
label: '良品率',
minWidth: 24.8
},
{
prop: 'shiftCosts',
label: '班组费用'
label: '班组费用',
minWidth: 24.8
},
{
prop: 'energyCosts',
label: '能耗费用'
label: '能耗费用',
minWidth: 29.4
},
{
prop: 'equipmentCost',
label: '设备费用'
label: '设备费用',
minWidth: 29.4
},
{
prop: 'materialCost',
label: '材料费用'
label: '材料费用',
minWidth: 29.4
},
{
prop: 'totalCost',
label: '总费用'
label: '总费用',
minWidth: 31.6
}
]
export default {
@ -217,11 +235,11 @@ export default {
obj.status = parseInt(Math.random() * 3 + 1)
obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
obj.yield = parseInt(Math.random() * 50 + 50) + '%'
obj.shiftCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost
obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
temp.push(obj)
}
this.orderMonitiringList = temp
@ -247,6 +265,7 @@ export default {
})
return false
}
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container)
}
}
@ -263,7 +282,6 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%;
color: #fff;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
@ -278,3 +296,26 @@ export default {
}
}
</style>
<style lang="scss">
.order-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 25px;
padding-right: 25px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 25px;
}
}
.specil-table2 {
.el-table .cell {
padding-left: 50px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 50px;
}
}
}
</style>

View File

@ -9,7 +9,7 @@
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
@ -111,7 +111,7 @@ export default {
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
@ -120,7 +120,7 @@ export default {
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',

View File

@ -1,5 +1,5 @@
<template>
<div style="height: 14px">
<div :style="{ height: 15 * beilv + 'px' }">
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
@ -22,6 +22,21 @@ export default {
type: Object,
default: () => ({})
}
},
data() {
return {
beilv: 1
}
},
mounted() {
this.beilv = document.getElementById('container').offsetWidth / 1920
window.addEventListener('resize', () => {
if (this.isFullScreen) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
})
}
}
</script>

View File

@ -1,7 +1,13 @@
<template>
<div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
<!-- 小块 -->
<div v-for="(item,index) in orderMsg" :key="index" :style="{ padding: 10 * beilv + 'px' + ' 20px ' + 16 * beilv + 'px' + ' 16px'}" class="box">
<div
v-for="(item,index) in orderMsg"
:key="index"
:style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
+ 'px', height: 168 * beilv + 'px'}"
class="box"
>
<p class="line1">
<span>工单编号<span class="light-color">{{ item.code }}</span></span>
<span class="fr">
@ -13,7 +19,7 @@
<span>产品名称<span class="light-color">{{ item.name }}</span></span>
<span class="fr">
产线
<span class="light-color" style="margin-right: 25px">{{ item.line }}</span>
<span class="light-color" :style="{marginRight: 25 * beilv + 'px'}">{{ item.line }}</span>
</span>
</p>
<p :style="{ paddingLeft: 15 * beilv + 'px'}">
@ -55,11 +61,11 @@ export default {
justify-content: space-between;
.box {
width: 49.5%;
height: 49.5%;
margin-bottom: 8px;
background-image: url('../../../../assets/img/cockpit/module-back.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: auto;
.light-color {
opacity: 0.5;
}

View File

@ -7,7 +7,6 @@
-->
<template>
<div class="app-container">
<top-title />
<head-form
:form-config="headFormConfig"
@headBtnClick="btnClick"
@ -45,11 +44,16 @@ const tableBtn = [{
btnName: 'btn.delete'
}]
const tableProps = [{
prop: '',
label: '',
width: 700
}, {
prop: 'name',
label: i18n.t('module.formManage.formSort.name'),
align: 'center'
label: i18n.t('module.formManage.formSort.name')
}]
import TopTitle from '@/components/TopTitle'
let resizeEventListener = null
import HeadForm from '@/components/basicData/HeadForm'
import AddForm from './AddForm'
import EditForm from './EditForm'
@ -61,7 +65,7 @@ import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import i18n from '@/lang'
export default {
name: 'OrgManager',
components: { TopTitle, HeadForm, Pagination, BaseTable, MethodBtn, AddForm, EditForm },
components: { HeadForm, Pagination, BaseTable, MethodBtn, AddForm, EditForm },
props: {},
data() {
return {
@ -100,7 +104,15 @@ export default {
this.getList()
// this.listLoading = false
},
mounted() {},
mounted() {
this.$set(this.tableProps[0], 'width', 700 * (document.body.offsetWidth / 1920))
addEventListener('resize', resizeEventListener = () => {
this.$set(this.tableProps[0], 'width', 700 * (document.body.offsetWidth / 1920))
})
},
destroyed() {
removeEventListener('resize', resizeEventListener)
},
methods: {
handleClick(raw) {
console.log(raw)