Merge pull request '更新自贡' (#424) from projects/zg-zwq into projects/zg-test
Reviewed-on: #424
This commit is contained in:
commit
ea47028178
22
src/assets/icons/svg/cost.svg
Normal file
22
src/assets/icons/svg/cost.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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">
|
||||
<title>切片</title>
|
||||
<defs>
|
||||
<linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-1">
|
||||
<stop stop-color="#4BFFC8" offset="0%"></stop>
|
||||
<stop stop-color="#45F2EC" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-2">
|
||||
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="成本看板" transform="translate(-64.000000, -290.000000)" fill-rule="nonzero">
|
||||
<g id="成本" transform="translate(64.000000, 290.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M24.8336138,7.21888656 C25.307557,7.21888656 25.7025096,7.62700427 25.6893445,8.08778234 L25.6893445,25.768495 C25.6893445,26.5452352 25.2417316,26.6505559 24.859944,26.6505559 L7.17923134,26.6505559 C6.6921231,26.6505559 6.31033556,26.2556033 6.31033556,25.7816601 L6.31033556,8.10094743 C6.31033556,7.61383919 6.70528819,7.23205165 7.17923134,7.23205165 L10.3915127,7.23205165 L10.3915127,9.00933847 C10.3915127,9.41745619 10.733805,9.75974847 11.1419227,9.75974847 L20.8709225,9.75974847 C21.2790402,9.75974847 21.6213325,9.43062128 21.6213325,9.00933847 L21.6213325,7.21888656 Z M21.3580307,13.7224398 C21.0289035,13.3933127 20.5154651,13.3933127 20.1863379,13.7224398 L14.5385153,19.3702624 L11.7738469,16.6319242 C11.4447197,16.302797 10.9312813,16.302797 10.6021541,16.6319242 C10.2730269,16.9610514 10.2730269,17.4744898 10.6021541,17.803617 L13.9460864,21.1475493 C14.2752136,21.4766764 14.788652,21.4766764 15.1177792,21.1475493 L21.3711958,14.9072977 C21.5423419,14.7361516 21.6213325,14.5386753 21.6213325,14.3148688 C21.6213325,14.0910623 21.5291768,13.893586 21.3580307,13.7224398 Z M19.896706,5.34944412 C20.1863379,5.34944412 20.4364746,5.59958078 20.4364746,5.88921271 L20.4364746,8.10094743 C20.4364746,8.39057936 20.1863379,8.64071602 19.896706,8.64071602 L12.1161392,8.64071602 L12.1161392,8.6670462 C11.8265073,8.6670462 11.5763706,8.41690953 11.5763706,8.1272776 L11.5763706,5.88921271 C11.5763706,5.59958078 11.8265073,5.34944412 12.1161392,5.34944412 L19.896706,5.34944412 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
12
src/assets/icons/svg/costchart.svg
Normal file
12
src/assets/icons/svg/costchart.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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">
|
||||
<title>切片</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="成本看板" transform="translate(-64.000000, -633.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="近期成本" transform="translate(64.000000, 633.000000)">
|
||||
<rect id="矩形" opacity="0" x="0" y="0" width="32" height="32"></rect>
|
||||
<path d="M26,23 L18.2,27.8 C17.6,28.2 17,27.8 17,27 L17,15.8 C17,15.6 17.2,15.2 17.4,15 L25.2,10.2 C25.8,9.8 26.4,10.2 26.4,11 L26.4,22.4 C26.4,22.6 26.2,23 26,23 Z M6,23 L13.8,27.8 C14.4,28.2 15,27.8 15,27 L15,15.8 C15,15.6 14.8,15.2 14.6,15 L6.8,10.2 C6.4,10 5.6,10.4 5.6,11 L5.6,22.4 C5.6,22.6 5.8,23 6,23 Z M15.8,4 L6.8,7.4 C6.4,7.6 6.4,8.2 6.8,8.4 L15.8,14 C16,14 16.2,14 16.2,14 L25.4,8.4 C25.8,8.2 25.8,7.6 25.4,7.4 L16.2,4 C16,4 16,4 15.8,4 Z" id="形状"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
22
src/assets/icons/svg/energy.svg
Normal file
22
src/assets/icons/svg/energy.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24.3417579px" height="24.000009px" viewBox="0 0 24.3417579 24.000009" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>统计</title>
|
||||
<defs>
|
||||
<linearGradient x1="99.4683184%" y1="100%" x2="20.6346149%" y2="7.84095011e-14%" id="linearGradient-1">
|
||||
<stop stop-color="#4BFFC8" offset="0%"></stop>
|
||||
<stop stop-color="#45F2EC" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="99.4683184%" y1="100%" x2="20.6346149%" y2="7.84095011e-14%" id="linearGradient-2">
|
||||
<stop stop-color="#FFFFFF" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="成本看板" transform="translate(-1327.000000, -636.000000)" fill-rule="nonzero">
|
||||
<g id="统计" transform="translate(1327.000000, 636.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="1.29865498e-07" width="23.9999981" height="23.9999981"></rect>
|
||||
<path d="M21.0417425,10.2952681 L19.5753585,10.2952681 L19.5753585,5.90037875 C19.5730113,5.34644149 19.1232931,4.89862885 18.5693508,4.89863383 L13.1812421,4.89863383 L13.1812421,3.15517144 C13.1837389,2.30739523 12.8439612,1.49449588 12.2388994,0.900668572 C11.6338375,0.306841265 10.8147135,-0.0176430365 9.96713292,0.000740689882 C8.21105284,0.081169063 6.8366707,1.54239403 6.8638551,3.30010475 L6.8638551,4.89863383 L1.47574634,4.89863383 C0.921804107,4.89862885 0.472085895,5.34644149 0.46970252,5.90037875 L0.46970252,9.28073494 C0.467465023,9.54901885 0.572450222,9.80709649 0.76136025,9.99760745 C0.950270278,10.1881184 1.2074528,10.2952777 1.47574634,10.2952681 L2.03842858,10.2952681 C3.79455985,10.2680012 5.25513623,11.6398863 5.33779264,13.3942831 C5.35388802,14.2418862 5.02721285,15.0601101 4.4317847,15.6635629 C3.83635654,16.2670156 3.02257894,16.6046145 2.1748364,16.5998668 L1.47574634,16.5998668 C0.92014366,16.5998668 0.46970252,17.0502718 0.46970252,17.6058745 L0.46970252,22.9939832 C0.46970252,23.5495859 0.92014366,24 1.47574634,24 L5.85784745,24 C6.1250049,24.0011302 6.38154936,23.8955063 6.57045992,23.7065957 C6.75937048,23.5176851 6.86499438,23.2611407 6.8638551,22.9939832 L6.8638551,22.4952422 C6.8366707,20.7375314 8.21105284,19.2763065 9.96713292,19.1958781 C10.8147135,19.1774944 11.6338375,19.5019787 12.2388994,20.095806 C12.8439612,20.6896333 13.1837389,21.5025326 13.1812421,22.3503088 L13.1812421,22.9939832 C13.1801084,23.2604003 13.2851484,23.5162945 13.473135,23.7050811 C13.6611216,23.8938677 13.9165675,24 14.182987,24 L18.5693508,24 C19.1249535,24 19.5753585,23.5495859 19.5753585,22.9939832 L19.5753585,16.5998668 L21.1824131,16.5998668 C22.0301722,16.6034883 22.8435102,16.2647998 23.4381378,15.6605426 C24.0327653,15.0562855 24.3583453,14.237612 24.3411066,13.3900204 C24.2562262,11.637307 22.7962968,10.2679159 21.0417425,10.2952681 Z" id="路径" fill="url(#linearGradient-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
12
src/assets/icons/svg/fullScreenView.svg
Normal file
12
src/assets/icons/svg/fullScreenView.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 54</title>
|
||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
|
||||
<g id="编组-54" transform="translate(1866.000000, 36.000000)">
|
||||
<rect id="矩形" stroke="#69b4ff" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="32" height="32"></rect>
|
||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#69b4ff" fill-rule="nonzero" opacity="0.79078311"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
12
src/assets/icons/svg/line.svg
Normal file
12
src/assets/icons/svg/line.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>产量</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="深加工看板" transform="translate(-68.000000, -297.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<g id="产量" transform="translate(68.000000, 297.000000)">
|
||||
<rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||
<path d="M22.2162957,1 L1.78372985,1 C1.35093374,1 1,1.33440606 1,1.75168741 L1,7 L23,7 L23,1.75168741 C23,1.33486987 22.6491174,1 22.2162957,1 Z M4.00067655,5 C3.44751496,5 3,4.5525025 3,3.99928444 C3,3.44752352 3.44751496,3 4.00067655,3 C4.55245902,3 5,3.44752352 5,3.99928444 C5,4.5525025 4.55245902,5 4.00067655,5 L4.00067655,5 Z M1,22.2486389 C1,22.6651285 1.35099088,23 1.78385746,23 L22.2161681,23 C22.6499302,23 23,22.6651041 23,22.2486389 L23,17 L1,17 L1,22.2486389 Z M4.00067655,19 C4.55245902,19 5,19.4475091 5,19.9997788 C5,20.5524648 4.55245902,21 4.00067655,21 C3.44751496,21 3,20.5524648 3,19.9997788 C3,19.4475091 3.44751496,19 4.00067655,19 Z M1,15 L23,15 L23,9 L1,9 L1,15 Z M4.00067655,11 C4.55245902,11 5,11.4479977 5,12.0002082 C5,12.552939 4.55245902,13 4.00067655,13 C3.44751496,13 3,12.552939 3,12.0002082 C3,11.4479977 3.44751496,11 4.00067655,11 L4.00067655,11 Z" id="形状"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
10
src/assets/icons/svg/unFullScreenView.svg
Normal file
10
src/assets/icons/svg/unFullScreenView.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 54备份</title>
|
||||
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-54备份">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
|
||||
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#69b4ff" fill-rule="nonzero" opacity="0.79078311"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
13
src/assets/icons/svg/yanqi.svg
Normal file
13
src/assets/icons/svg/yanqi.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="23.9254658px" viewBox="0 0 24 23.9254658" 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="成本看板" transform="translate(-1319.000000, -293.962733)" fill-rule="nonzero">
|
||||
<g id="烟气" transform="translate(1319.000000, 293.962733)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="23.9254658"></rect>
|
||||
<path d="M10.6744092,10.2458592 C10.6744092,10.2458592 3.76099563,15.5072464 6.34479666,19.9378882 C5.78613697,19.5917443 3.83082809,18.2071687 3.2721684,17.4456522 C1.73585426,15.5072464 1.80568673,14.1918996 2.36434642,12.8765528 C3.6213307,9.89971532 7.39228357,6.9921066 8.50960292,5.1229296 C10.3950794,2.07686335 8.85876522,-7.08336081e-14 8.85876522,-7.08336081e-14 C8.85876522,-7.08336081e-14 12.769383,1.73071946 12.9788804,4.98447204 C13.2582102,8.16899586 10.6744092,10.2458592 10.6744092,10.2458592 Z" id="路径" fill="#FFFFFF"></path>
|
||||
<path d="M9.55552302,-6.3573715e-14 L9.48496561,-6.3573715e-14 L9.41440819,-6.3573715e-14 L9.34385077,-6.3573715e-14 L9.27329335,-6.3573715e-14 C9.27329335,-6.3573715e-14 9.20273594,-6.3573715e-14 9.20273596,0.0693204763 L9.13217854,0.0693204763 L9.06162113,0.138640927 L8.99106371,0.207961403 L8.99106371,0.485243308 C8.99106371,0.485243308 8.99106371,0.554563785 9.06162113,0.554563785 L9.06162113,0.623884235 C10.1199823,2.35689604 9.69663786,4.36718972 7.79158769,6.65476534 C7.43880063,7.07068817 6.94489873,7.55593148 6.38043941,8.17981571 C4.96929114,9.35826373 3.6992577,10.6753527 2.99368358,11.7844803 C2.0764372,13.1015692 1.79420756,14.6266197 2.14699459,16.0130291 C2.57033907,17.8153614 4.05204476,19.4790527 6.52155425,20.8654621 C6.59211167,20.9347826 6.66266909,20.9347826 6.73322648,20.9347826 C6.80378389,20.9347826 6.87434131,20.9347826 6.94489873,20.8654621 C7.01545615,20.7961417 7.08601356,20.7961417 7.08601354,20.7268212 L7.08601354,20.6575007 L7.08601354,20.5881803 L7.08601354,20.5188598 L7.08601354,20.4495393 C7.08601354,20.3802188 7.08601354,20.3802188 7.01545615,20.3802188 L7.01545615,20.3108984 C5.60430787,18.3006047 7.01545615,16.0130291 7.9327025,14.9039015 L8.00325992,14.8345811 C8.92050629,13.656133 9.83775267,12.7549669 10.6138842,11.9231212 C11.1783435,11.3685574 11.6722454,10.8833141 12.0955899,10.3287504 C13.647853,8.45709759 14.2123123,6.72408579 13.9300827,5.06039446 C13.5772956,3.18874173 12.0955899,1.4557299 9.55552302,-6.3573715e-14 Z M9.48470738,9.26748999 C8.64336853,10.0744997 6.3074421,10.0757542 5.3258801,11.2862689 C3.92364867,12.9675392 5.42114982,16.3973307 5.7015961,17.9440994 C4.29936467,16.9353372 3.38791424,15.8593242 3.10746797,14.6488095 C2.82702169,13.5727965 3.10746797,12.3622819 3.8085837,11.2862689 L3.87869525,11.219018 C4.5096994,10.2102558 5.84181925,8.93249038 6.89349283,7.9237282 C7.52449698,7.31847086 8.01527795,6.84771519 8.3658358,6.44421029 C10.3289598,4.22493344 10.6094061,2.34191068 10.3289598,0.99689441 C11.5208565,1.87115499 12.6426417,3.01441881 12.9230879,4.49393671 C13.2035342,5.77170217 12.7127532,7.18396925 11.5208565,8.66348714 L9.48470738,9.26748999 Z M21.9281191,9.58246693 C21.6004931,7.86679721 20.3555139,6.28838107 18.1931817,4.98447205 L18.1276565,4.98447205 L18.0621313,4.98447205 L17.9966061,4.98447205 L17.9310808,4.98447205 C17.8655556,4.98447205 17.8655556,4.98447205 17.8655556,5.05309884 L17.8000304,5.05309884 L17.7345052,5.12172564 L17.66898,5.19035243 L17.66898,5.46485958 C17.66898,5.46485958 17.66898,5.53348637 17.7345052,5.53348637 L17.7345052,5.60211316 C18.6518582,7.11190253 18.2587069,8.89619902 16.6861017,10.9550027 C16.4240008,11.2981367 15.9653243,11.7785242 15.5066478,12.3275385 C14.5237695,13.3569403 13.4098408,14.5922225 12.8201138,15.6216244 C12.0993364,16.7882798 11.8372356,18.1608156 12.0993364,19.4647245 C12.4924877,21.1117675 13.7374669,22.5529301 15.8342739,23.856839 C15.8997991,23.9254658 15.9653243,23.9254658 16.0308495,23.9254658 C16.0963747,23.9254658 16.1619,23.9254658 16.2274252,23.856839 C16.2929504,23.7882123 16.3584756,23.7882123 16.3584756,23.7195855 L16.3584756,23.6509587 L16.3584756,23.5823319 L16.3584756,23.5137051 L16.3584756,23.4450783 C16.3584756,23.4450783 16.3584756,23.3764515 16.2929504,23.3764515 L16.2929504,23.3078247 C15.1790217,21.5235282 16.2929504,19.5333513 17.079253,18.5039495 L17.1447782,18.4353227 C17.9310808,17.3372941 18.6518582,16.5137726 19.3726356,15.8275047 C19.8313122,15.3471172 20.2899887,14.8667297 20.6176148,14.454969 C21.7315435,12.6020456 22.19022,11.0922563 21.9281191,9.58246693 L21.9281191,9.58246693 Z M20.5837087,13.7271478 C20.225071,14.1241412 19.7947058,14.5211345 19.2926131,14.9842934 C18.5036102,15.7121146 17.6428797,16.5061012 16.7104218,17.6309157 C15.4193261,19.086558 14.9172334,20.6083659 15.2041435,21.931677 C13.9130479,21.0715248 13.2958761,20.3327069 13.0806935,19.3402236 C12.8655109,18.3477402 13.0806935,17.3552568 13.7262413,16.3627735 L13.7979689,16.2966079 C14.3717892,15.4364556 15.4193261,13.99181 16.4235116,13.0654922 C16.9973319,12.5361677 17.4994247,12.0730088 17.7863348,11.742181 C19.5077957,9.75721431 19.8664333,8.16924091 19.6512507,6.97826087 C20.7271638,7.77224757 21.7313493,8.76473095 21.9465319,9.95571099 C22.1617145,11.2128566 21.7313493,12.4700022 20.5837087,13.7271478 Z" id="形状" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-01 13:52:10
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2024-12-27 09:16:43
|
||||
* @LastEditTime: 2025-03-05 15:23:30
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -56,7 +56,7 @@
|
||||
placeholder="选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
@ -66,7 +66,7 @@
|
||||
placeholder="请输入单价" />
|
||||
{{ unit }}
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
|
||||
@ -343,7 +343,7 @@ export default {
|
||||
let exportURL, title;
|
||||
if (this.activeName === 'his') {
|
||||
exportURL = exportCostSumExcel;
|
||||
title = '总成本统计-按日期';
|
||||
title = '总成本统计';
|
||||
} else {
|
||||
exportURL = exportRawStatisticsRealtimeExcel;
|
||||
title = '总成本统计-按规格';
|
||||
|
||||
@ -323,8 +323,11 @@ export default {
|
||||
},
|
||||
successSubmit() {
|
||||
this.handleCancel();
|
||||
const val = this.activeName === 'his' ? '产线良品率' : 'now';
|
||||
this.currentMenu(val);
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
|
||||
@ -179,6 +179,7 @@ import PieChart from '../dashboard/PieChart';
|
||||
import BarChart from '../dashboard/BarChart';
|
||||
import PanelGroup from '../dashboard/PanelGroup';
|
||||
import { getData } from '@/api/cost/allCost';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
@ -223,8 +224,10 @@ export default {
|
||||
topDate: '',
|
||||
topTime: '',
|
||||
timeZone: '',
|
||||
user: '',
|
||||
lineChartData: lineChartData.newVisitis,
|
||||
homeData: {},
|
||||
permission: false,
|
||||
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
|
||||
startTime:
|
||||
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
|
||||
@ -266,8 +269,38 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getTime();
|
||||
this.permission = false;
|
||||
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
|
||||
getUserProfile().then((response) => {
|
||||
this.user = response.data;
|
||||
if (this.user.nickname !== '技术中心') {
|
||||
this.permission = true;
|
||||
this.getData();
|
||||
} else {
|
||||
this.permission = false;
|
||||
this.homeData = {
|
||||
areaPriceD: '***',
|
||||
areaPriceO: '***',
|
||||
areaPriceS: '***',
|
||||
energyPriceD: '***',
|
||||
energyPriceO: '***',
|
||||
energyPriceS: '***',
|
||||
matPriceO: '***',
|
||||
matPriceS: '***',
|
||||
otherPriceD: '***',
|
||||
otherPriceO: '***',
|
||||
otherPriceS: '***',
|
||||
outD: '***',
|
||||
outO: '***',
|
||||
priceD: '***',
|
||||
priceO: '***',
|
||||
priceS: '***',
|
||||
ratioD: '***',
|
||||
ratioO: '***',
|
||||
ratioS: '***',
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
@ -296,12 +329,14 @@ export default {
|
||||
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
||||
startTime: this.timeday + ' 00:00:00',
|
||||
};
|
||||
if (this.permission) {
|
||||
getData(listQuery).then((response) => {
|
||||
this.homeData = response.data;
|
||||
for (let i in this.homeData) {
|
||||
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// handleClick() {
|
||||
// let start = Date.parse(new Date());
|
||||
|
||||
247
src/views/dashboard/allDashboard/BarChart.vue
Normal file
247
src/views/dashboard/allDashboard/BarChart.vue
Normal file
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
require('echarts/theme/macarons'); // echarts theme
|
||||
import resize from '../mixins/resize';
|
||||
|
||||
const animationDuration = 6000;
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
echartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '380px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
'深加工产量',
|
||||
'原片产量',
|
||||
{
|
||||
name: '总成本',
|
||||
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
||||
},
|
||||
],
|
||||
itemWidth: 18,
|
||||
itemHeight: 18,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#DFF1FE',
|
||||
},
|
||||
top: 15,
|
||||
right: 20,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.echartData.map((item) => {
|
||||
return item.time;
|
||||
}),
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位/万元',
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '深加工产量',
|
||||
type: 'bar',
|
||||
barWidth: '14px',
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.deepOut).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 片';
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DEAF5' },
|
||||
{ offset: 1, color: '#6EF9DE' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '原片产量',
|
||||
type: 'bar',
|
||||
barWidth: '14px',
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.originOut).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 片';
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '总成本',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.price).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 万元';
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#12FFF5',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#12FFF5',
|
||||
borderWidth: 1, // 圆点边框宽度（可选）
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#12FFF5',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
this.chart = echarts.init(this.$el, 'macarons');
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
522
src/views/dashboard/allDashboard/index.vue
Normal file
522
src/views/dashboard/allDashboard/index.vue
Normal file
@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 3" class="bz25-1"></div>
|
||||
<div style="flex: 5" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topText">本月总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 5" class="bz25-5 bz-top">
|
||||
<div class="topNum">
|
||||
{{ Number(topData.monthAreaCost).toFixed(1) }}
|
||||
</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
<div style="flex: 3" class="bz25-6"></div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本统计
|
||||
<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="yanqi" />
|
||||
烟气处理
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px;">
|
||||
<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.fc"></el-image>
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.no"></el-image>
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceS',
|
||||
label: '总成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outO',
|
||||
label: '原片产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioO',
|
||||
label: '原片良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '深加工产量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '深加工良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'matPriceS',
|
||||
label: '原料成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'energyPriceS',
|
||||
label: '能源成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'otherPriceS',
|
||||
label: '其他成本',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'areaPriceS',
|
||||
label: '每平米成本/元',
|
||||
width: 140,
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gas',
|
||||
label: '气消耗量/m³',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
scaleNum: 0.8,
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
fc: require('@/views/dashboard/assets/fc.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
if (screenfull.isFullscreen) {
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
} else {
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw - 280) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
} else {
|
||||
wx = (rw - 85) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=1`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('factoryState' in dataJson) {
|
||||
this.topData = dataJson.factoryState;
|
||||
}
|
||||
if ('factoryCostTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.factoryCostTableList;
|
||||
}
|
||||
if ('factoryEnergyTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.factoryEnergyTableList;
|
||||
}
|
||||
if ('factoryCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.factoryCostTrendList;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.chartRef.initChart();
|
||||
})
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-1 {
|
||||
background: url(../assets/bz25-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-5 {
|
||||
background: url(../assets/bz25-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-6 {
|
||||
background: url(../assets/bz25-6.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 130px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/dashboard/assets/1.png
Normal file
BIN
src/views/dashboard/assets/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/views/dashboard/assets/2.png
Normal file
BIN
src/views/dashboard/assets/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/views/dashboard/assets/3.png
Normal file
BIN
src/views/dashboard/assets/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/views/dashboard/assets/4.png
Normal file
BIN
src/views/dashboard/assets/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/views/dashboard/assets/NO.png
Normal file
BIN
src/views/dashboard/assets/NO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/views/dashboard/assets/NO2.png
Normal file
BIN
src/views/dashboard/assets/NO2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/views/dashboard/assets/O2.png
Normal file
BIN
src/views/dashboard/assets/O2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/views/dashboard/assets/SO2.png
Normal file
BIN
src/views/dashboard/assets/SO2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/views/dashboard/assets/bg.png
Normal file
BIN
src/views/dashboard/assets/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
src/views/dashboard/assets/bg1.png
Normal file
BIN
src/views/dashboard/assets/bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
src/views/dashboard/assets/bz25-1.png
Normal file
BIN
src/views/dashboard/assets/bz25-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/views/dashboard/assets/bz25-2.png
Normal file
BIN
src/views/dashboard/assets/bz25-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/views/dashboard/assets/bz25-3.png
Normal file
BIN
src/views/dashboard/assets/bz25-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/dashboard/assets/bz25-4.png
Normal file
BIN
src/views/dashboard/assets/bz25-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/views/dashboard/assets/bz25-5.png
Normal file
BIN
src/views/dashboard/assets/bz25-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/views/dashboard/assets/bz25-6.png
Normal file
BIN
src/views/dashboard/assets/bz25-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/views/dashboard/assets/bz25-7.png
Normal file
BIN
src/views/dashboard/assets/bz25-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/views/dashboard/assets/bz25-8.png
Normal file
BIN
src/views/dashboard/assets/bz25-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/dashboard/assets/bz25-d-1.png
Normal file
BIN
src/views/dashboard/assets/bz25-d-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/views/dashboard/assets/bz25-d-2.png
Normal file
BIN
src/views/dashboard/assets/bz25-d-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/dashboard/assets/bz25-d-3.png
Normal file
BIN
src/views/dashboard/assets/bz25-d-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/views/dashboard/assets/bz25-d-4.png
Normal file
BIN
src/views/dashboard/assets/bz25-d-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/views/dashboard/assets/bz25-d-5.png
Normal file
BIN
src/views/dashboard/assets/bz25-d-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/views/dashboard/assets/fc.png
Normal file
BIN
src/views/dashboard/assets/fc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/views/dashboard/assets/yanqi.png
Normal file
BIN
src/views/dashboard/assets/yanqi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
122
src/views/dashboard/components/Header.vue
Normal file
122
src/views/dashboard/components/Header.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2025-02-27 15:04:43
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-03-04 13:47:41
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<header class="kiln-header">
|
||||
<h1>{{ topTitle }}</h1>
|
||||
<!-- left: 312px; -->
|
||||
<!-- <div
|
||||
class="firm">
|
||||
单位:
|
||||
</div> -->
|
||||
<div class="datetime">
|
||||
<!-- <DateBtnGroup /> -->
|
||||
<span style="display: inline-block">
|
||||
{{ topTime }}
|
||||
</span>
|
||||
<span>{{ topDate + ' ' + timeZone }}</span>
|
||||
</div>
|
||||
<el-button type="text" class="screen-btn" @click="changeFullScreen">
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
// import DateBtnGroup from './DateBtnGroup.vue';
|
||||
|
||||
export default {
|
||||
name: 'KilnHeader',
|
||||
// components: { DateBtnGroup },
|
||||
props: {
|
||||
isFullScreen: false,
|
||||
topTitle: '',
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: '',
|
||||
topDate: '',
|
||||
topTime: '',
|
||||
timeZone: '',
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getTime();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
changeFullScreen() {
|
||||
this.$emit('screenfullChange');
|
||||
},
|
||||
getTime() {
|
||||
let _this = this;
|
||||
this.timer = setInterval(function () {
|
||||
_this.topDate = moment().format('YYYY.MM.DD');
|
||||
let temp = moment().format('d-HH:mm').split('-');
|
||||
_this.timeZone = [
|
||||
'星期天',
|
||||
'星期一',
|
||||
'星期二',
|
||||
'星期三',
|
||||
'星期四',
|
||||
'星期五',
|
||||
'星期六',
|
||||
][temp[0]];
|
||||
_this.topTime = temp[1];
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kiln-header {
|
||||
height: 96px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
h1 {
|
||||
font-family: HelloFont, HelloFont;
|
||||
font-weight: bold;
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 10px;
|
||||
text-shadow: 1px 7px 2px #002144;
|
||||
}
|
||||
.firm {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 325px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.datetime {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 405px;
|
||||
color: #69b4ff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.screen-btn {
|
||||
color: #69b4ff;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
326
src/views/dashboard/components/baseTable.vue
Normal file
326
src/views/dashboard/components/baseTable.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="baseTable" :id="id">
|
||||
<el-table
|
||||
:ref="id"
|
||||
:data="renderData"
|
||||
v-bind="$attrs"
|
||||
:border="cancelBorder ? false : true"
|
||||
@current-change="currentChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
backgroundColor: 'rgba(0,106,205,0.1)',
|
||||
color: '#fff',
|
||||
height: 30 + 'px',
|
||||
lineHeight: 30 + 'px',
|
||||
padding: 0,
|
||||
fontSize: 14 + 'px',
|
||||
letterSpacing: '2px',
|
||||
}"
|
||||
:row-style="setRowStyle">
|
||||
<!-- 多选 -->
|
||||
<el-table-column
|
||||
v-if="selectWidth"
|
||||
type="selection"
|
||||
:width="selectWidth" />
|
||||
<!-- 序号 -->
|
||||
<el-table-column
|
||||
v-if="page && limit"
|
||||
prop="_pageIndex"
|
||||
:width="pageWidth"
|
||||
align="center"
|
||||
:fixed="cancelPageFixed ? false : true">
|
||||
<template slot="header">
|
||||
<el-popover placement="bottom-start" width="300" trigger="click">
|
||||
<div
|
||||
class="setting-box"
|
||||
style="max-height: 400px; overflow-y: auto">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in tableProps"
|
||||
:key="'cb' + index"
|
||||
v-model="selectedBox[index]"
|
||||
:label="item.label" />
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-s-tools" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="item in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
v-bind="item"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:fixed="item.fixed || false"
|
||||
:show-overflow-tooltip="item.showOverflowtooltip || false"
|
||||
:sortable="item.sortable || false">
|
||||
<template slot="header">
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 多表头 -->
|
||||
<template v-if="item.children">
|
||||
<el-table-column
|
||||
v-for="sub in item.children"
|
||||
:prop="sub.prop"
|
||||
:key="sub.prop"
|
||||
v-bind="sub"
|
||||
:label="sub.label">
|
||||
<template slot-scope="scopeInner">
|
||||
<component
|
||||
:is="sub.subcomponent"
|
||||
v-if="sub.subcomponent"
|
||||
:key="scopeInner.row.id"
|
||||
:inject-data="{ ...scopeInner.row, ...sub }"
|
||||
@emitData="emitData" />
|
||||
<span v-else>
|
||||
{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<component
|
||||
:is="item.subcomponent"
|
||||
v-if="item.subcomponent"
|
||||
:key="scope.row.id"
|
||||
:itemProp="item.prop"
|
||||
:inject-data="{ ...scope.row, ...item }"
|
||||
@emitData="emitData" />
|
||||
<span v-else>
|
||||
{{ scope.row[item.prop] | commonFilter(item.filter) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 表格底部加号 -->
|
||||
<el-button
|
||||
v-if="addButtonShow"
|
||||
class="addButton"
|
||||
icon="el-icon-plus"
|
||||
@click="emitButtonClick">
|
||||
{{ addButtonShow }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = (a) => a) => {
|
||||
return filterType(source);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
cancelBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
cancelPageFixed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableProps: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
pageWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 70,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
selectWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
addButtonShow: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedBox: new Array(100).fill(true),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
renderTableHeadList() {
|
||||
return this.tableProps.filter((item, index) => {
|
||||
return this.selectedBox[index];
|
||||
});
|
||||
},
|
||||
renderData() {
|
||||
return this.tableData.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true);
|
||||
if (this.id === 'table2') {
|
||||
this.$nextTick(() => {
|
||||
document
|
||||
.getElementById('table2')
|
||||
.style.setProperty('--zg-height', '53px');
|
||||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
document
|
||||
.getElementById(this.id)
|
||||
.style.setProperty('--zg-height', '40px');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentChange(newVal, oldVal) {
|
||||
this.$emit('current-change', { newVal, oldVal });
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.$emit('selection-change', val);
|
||||
},
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val);
|
||||
},
|
||||
emitButtonClick() {
|
||||
this.$emit('emitButtonClick');
|
||||
},
|
||||
setCurrent(name, index) {
|
||||
let _this = this;
|
||||
let obj = _this.$refs[name].data[index];
|
||||
_this.$refs[name].setCurrentRow(obj);
|
||||
},
|
||||
doLayout(name) {
|
||||
this.$refs[name].doLayout();
|
||||
},
|
||||
setRowStyle(v) {
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(2, 13, 45, 0.3)',
|
||||
height: 30 + 'px',
|
||||
lineHeight: 30 + 'px',
|
||||
padding: 0,
|
||||
fontSize: 14 + 'px',
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(0,106,205,0.1)',
|
||||
height: 30 + 'px',
|
||||
lineHeight: 30 + 'px',
|
||||
padding: 0,
|
||||
fontSize: 14 + 'px',
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
:root {
|
||||
--zg-height: 40px; /* 定义变量 */
|
||||
}
|
||||
|
||||
.baseTable .show-col-btn {
|
||||
margin-right: 5px;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.baseTable .el-icon-refresh {
|
||||
cursor: pointer;
|
||||
}
|
||||
.baseTable >>> .el-table .el-table__cell {
|
||||
padding: 0;
|
||||
height: var(--zg-height);
|
||||
}
|
||||
.baseTable >>> .el-table {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
.baseTable >>> .el-table::before,
|
||||
.el-table--group::after,
|
||||
.el-table--border::after {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.baseTable >>> .el-table--border::after,
|
||||
.el-table--group::after,
|
||||
.el-table::before {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.baseTable >>> .el-table__header-wrapper,
|
||||
.baseTable >>> .el-table__body-wrapper {
|
||||
border: none; /* 去掉表头和表体的外边框 */
|
||||
}
|
||||
|
||||
.baseTable >>> .el-table__row td {
|
||||
border-top: none; /* 去掉单元格的上边框（横线） */
|
||||
border-bottom: none; /* 去掉单元格的下边框（横线） */
|
||||
border-right: 2px solid #305887; /* 设置单元格的右边框（竖线） */
|
||||
}
|
||||
|
||||
.baseTable >>> .el-table__row:last-child td {
|
||||
border-bottom: none; /* 去掉最后一行的下边框 */
|
||||
}
|
||||
|
||||
/* 去掉最后一列的右边框 */
|
||||
.baseTable >>> .el-table__row td:last-child {
|
||||
border-right: transparent;
|
||||
}
|
||||
|
||||
.baseTable >>> .el-table__header th {
|
||||
border-top: none; /* 去掉表头的上边框 */
|
||||
border-bottom: none; /* 去掉表头的下边框 */
|
||||
border-right: 2px solid #305887; /* 设置表头的右边框（竖线） */
|
||||
border-left: none; /* 设置表头的右边框（竖线） */
|
||||
}
|
||||
.baseTable >>> .el-table__header th:nth-last-child(2) {
|
||||
border-right: none;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '~@/styles/index.scss';
|
||||
.baseTable {
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79, 114, 136, 0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79, 114, 136, 0.29) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
src/views/dashboard/deepDashboard/BarChart.vue
Normal file
307
src/views/dashboard/deepDashboard/BarChart.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
require('echarts/theme/macarons'); // echarts theme
|
||||
import resize from '../mixins/resize';
|
||||
import { max } from 'moment';
|
||||
|
||||
const animationDuration = 6000;
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
echartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '380px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
'产量',
|
||||
{
|
||||
name: '成本',
|
||||
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
||||
},
|
||||
],
|
||||
itemWidth: 18,
|
||||
itemHeight: 18,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#DFF1FE',
|
||||
},
|
||||
top: 15,
|
||||
right: 20,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.echartData.map((item) => {
|
||||
return item.time;
|
||||
}),
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
min: 0,
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
max: 100,
|
||||
min: 0,
|
||||
minInterval: 1,
|
||||
position: 'right',
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
min: 0,
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
offset: 40,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产量',
|
||||
type: 'bar',
|
||||
barWidth: '14px',
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.out).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 片';
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '成本',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 2,
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.price).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 万元';
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FF1295',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF1295',
|
||||
borderWidth: 1, // 圆点边框宽度（可选）
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF1295',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.ratio).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' %';
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#12FFF5',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#12FFF5',
|
||||
borderWidth: 1, // 圆点边框宽度（可选）
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#12FFF5',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
this.chart = echarts.init(this.$el, 'macarons');
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
497
src/views/dashboard/deepDashboard/index.vue
Normal file
497
src/views/dashboard/deepDashboard/index.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡深加工成本看板" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 1" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">
|
||||
{{ Number(topData.yestodayRatio).toFixed(1) }}%
|
||||
</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
|
||||
<div class="topText">昨日深加工产量/万m²</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-7 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
|
||||
<div class="topText">本月深加工成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-8 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="line" />
|
||||
各产线产量及良品率
|
||||
<span style="float: right">产量单位:万平方米</span>
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table3'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps3"
|
||||
:table-data="tableData3"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本及产量统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
import interval from './interval.vue';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'yure',
|
||||
label: '余热发电量/kwh',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'elecPrice',
|
||||
label: '总价/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceD',
|
||||
label: '成本/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outD',
|
||||
label: '产量/万m²',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioD',
|
||||
label: '良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
const tableProps3 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '产线1',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '产线2',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '产线3',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '产线4',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '产线5',
|
||||
subcomponent: interval,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
o2: require('@/views/dashboard/assets/O2.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
no2: require('@/views/dashboard/assets/NO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
tableProps3,
|
||||
tableData3: [],
|
||||
echartData: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
if (screenfull.isFullscreen) {
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
} else {
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw - 280) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
} else {
|
||||
wx = (rw - 85) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=3`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('DeepState' in dataJson) {
|
||||
this.topData = dataJson.DeepState;
|
||||
}
|
||||
if ('DeepEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.DeepEnergyTableList;
|
||||
}
|
||||
if ('DeepCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.DeepCostTableList;
|
||||
}
|
||||
if ('DeepPdTables' in dataJson) {
|
||||
this.tableData3 = dataJson.DeepPdTables;
|
||||
}
|
||||
if ('DeepCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.DeepCostTrendList;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.chartRef.initChart();
|
||||
});
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-d-1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-d-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-d-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-7 {
|
||||
background: url(../assets/bz25-d-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-8 {
|
||||
background: url(../assets/bz25-d-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
51
src/views/dashboard/deepDashboard/interval.vue
Normal file
51
src/views/dashboard/deepDashboard/interval.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-03 14:09:18
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-03-06 16:32:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="tableInner" style="display: flex">
|
||||
<div style="flex: 3; border-right: 2px solid #305887">
|
||||
{{
|
||||
list['out' + list.prop]
|
||||
? Number(list['out' + list.prop]).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
<div style="flex: 2">
|
||||
{{
|
||||
list['ratio' + list.prop]
|
||||
? Number(list['ratio' + list.prop]).toFixed(1)
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: this.injectData,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.tableInner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
308
src/views/dashboard/rawDashboard/BarChart.vue
Normal file
308
src/views/dashboard/rawDashboard/BarChart.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
require('echarts/theme/macarons'); // echarts theme
|
||||
import resize from '../mixins/resize';
|
||||
import { max } from 'moment';
|
||||
|
||||
const animationDuration = 6000;
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
echartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '380px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
'产量',
|
||||
{
|
||||
name: '成本',
|
||||
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
||||
},
|
||||
],
|
||||
itemWidth: 18,
|
||||
itemHeight: 18,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#DFF1FE',
|
||||
},
|
||||
top: 15,
|
||||
right: 20,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: this.echartData.map((item) => {
|
||||
return item.time;
|
||||
}),
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位/片',
|
||||
min: 0,
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '%',
|
||||
max: 100,
|
||||
min: 0,
|
||||
minInterval: 1,
|
||||
position: 'right',
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
min: 0,
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
offset: 40,
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#97B3FF', // 左边线的颜色
|
||||
width: '1', // 坐标线的宽度
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#b6c1e1',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产量',
|
||||
type: 'bar',
|
||||
barWidth: '14px',
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.out).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 片';
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '成本',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 2,
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.price).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 万元';
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#FF1295',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF1295',
|
||||
borderWidth: 1, // 圆点边框宽度（可选）
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF1295',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
data: this.echartData.map((item) => {
|
||||
return Number(item.ratio).toFixed(1);
|
||||
}),
|
||||
animationDuration,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' %';
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#12FFF5',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#12FFF5',
|
||||
borderWidth: 1, // 圆点边框宽度（可选）
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#12FFF5',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.setOption(option);
|
||||
} else {
|
||||
this.chart = echarts.init(this.$el, 'macarons');
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
507
src/views/dashboard/rawDashboard/index.vue
Normal file
507
src/views/dashboard/rawDashboard/index.vue
Normal file
@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<div
|
||||
id="wholePlantContainerB"
|
||||
ref="wholePlantContainerB"
|
||||
style="width: 100%; height: 100%">
|
||||
<div
|
||||
id="wholePlantContainer"
|
||||
ref="wholePlantContainer"
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<KHeader
|
||||
:isFullScreen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
topTitle="自贡原片成本看板" />
|
||||
<div class="main-body">
|
||||
<div style="flex: 1" class="bz25-2 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
|
||||
<div class="topText">昨日总成本/万元</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-3 bz-top">
|
||||
<div class="topNum" style="margin-left: 50px">{{ Number(topData.yestodayRatio).toFixed(1) }}%</div>
|
||||
<div class="topText">昨日良品率</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-5 bz-top">
|
||||
<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
|
||||
<div class="topText">昨日原料成本/万元</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1" class="bz25-4 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
|
||||
<div class="topText">本月原片产量/万m²</div>
|
||||
</div>
|
||||
<div style="flex: 1" class="bz25-7 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
|
||||
<div class="topText">本月原料成本/万元</div>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1" class="bz25-8 bz-top">
|
||||
<div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div>
|
||||
<div class="topText">本月每平米总成本/元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="middle middle1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="energy" />
|
||||
能源统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table1'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps1"
|
||||
:table-data="tableData1"
|
||||
:height="230"></base-table>
|
||||
</div>
|
||||
<div style="flex: 1" class="middle middle2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="yanqi" />
|
||||
烟气处理
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10px 30px;
|
||||
gap: 12px;
|
||||
">
|
||||
<div class="yanqi" style="width: 566px;">
|
||||
<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
|
||||
<el-image class="imageClass" :src="imgUrl.so2"></el-image>
|
||||
二氧化硫 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.so2).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.fc"></el-image>
|
||||
粉尘排放
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.fc).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yanqi">
|
||||
<div class="content middle2-left">
|
||||
<el-image class="imageClass" :src="imgUrl.no"></el-image>
|
||||
氮氧化物 排放浓度
|
||||
</div>
|
||||
<div class="content middle2-right">
|
||||
{{ Number(topData.no).toFixed(1) }}
|
||||
<span style="font-size: 14px; line-height: 43px">mg/m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div style="flex: 2" class="footer footer1">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="costchart" />
|
||||
近12个月成本 · 产量趋势
|
||||
</div>
|
||||
<bar-chart
|
||||
ref="chartRef"
|
||||
style="margin-top: -50px"
|
||||
:echart-data="echartData"></bar-chart>
|
||||
</div>
|
||||
<div style="flex: 1" class="footer footer2">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="cost" />
|
||||
成本及产量统计
|
||||
</div>
|
||||
<base-table
|
||||
:id="'table2'"
|
||||
style="margin: 5px 12px 12px 12px"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:height="310"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import screenfull from 'screenfull';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import baseTable from '../components/baseTable.vue';
|
||||
import BarChart from './BarChart.vue';
|
||||
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'elec',
|
||||
label: '电消耗量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'elecPrice',
|
||||
label: '电总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gas',
|
||||
label: '气消耗量',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'gasPrice',
|
||||
label: '气总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '能源总价',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'title',
|
||||
label: '',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'priceO',
|
||||
label: '成本/万元',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'outO',
|
||||
label: '产量/万m²',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
{
|
||||
prop: 'ratioO',
|
||||
label: '良品率',
|
||||
filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
KHeader,
|
||||
baseTable,
|
||||
BarChart,
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8,
|
||||
url: process.env.VUE_APP_WS_API,
|
||||
websock: '',
|
||||
topData: {},
|
||||
imgUrl: {
|
||||
fc: require('@/views/dashboard/assets/fc.png'),
|
||||
no: require('@/views/dashboard/assets/NO.png'),
|
||||
so2: require('@/views/dashboard/assets/SO2.png'),
|
||||
},
|
||||
tableProps1,
|
||||
tableData1: [],
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
echartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.initWebSocket();
|
||||
},
|
||||
destroy() {
|
||||
this.destroy();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
methods: {
|
||||
boxReset() {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change);
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB);
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.getElementById(
|
||||
'wholePlantContainer'
|
||||
);
|
||||
let rw = parseFloat(window.innerWidth);
|
||||
let rh = parseFloat(window.innerHeight);
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width);
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height);
|
||||
let wx = 0;
|
||||
let hx = 0;
|
||||
if (screenfull.isFullscreen) {
|
||||
wx = rw / bw;
|
||||
hx = rh / bh;
|
||||
} else {
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw - 280) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
} else {
|
||||
wx = (rw - 85) / bw;
|
||||
hx = (rh - 116) / bh;
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx;
|
||||
},
|
||||
|
||||
initWebSocket() {
|
||||
// 初始化weosocket
|
||||
const path = `${this.url}/websocket/message?userId=2`;
|
||||
this.websock = new WebSocket(path);
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
|
||||
websocketonopen() {
|
||||
// 连接建立之后执行send方法发送数据
|
||||
this.websocketsend();
|
||||
},
|
||||
websocketonerror() {
|
||||
// 连接建立失败重连
|
||||
this.initWebSocket();
|
||||
},
|
||||
websocketonmessage(e) {
|
||||
let dataJson = JSON.parse(e.data);
|
||||
console.log(dataJson);
|
||||
// 数据接收
|
||||
if ('OriginState' in dataJson) {
|
||||
this.topData = dataJson.OriginState;
|
||||
}
|
||||
if ('OriginEnergyTableList' in dataJson) {
|
||||
this.tableData1 = dataJson.OriginEnergyTableList;
|
||||
}
|
||||
if ('OriginCostTableList' in dataJson) {
|
||||
this.tableData2 = dataJson.OriginCostTableList;
|
||||
}
|
||||
if ('OriginCostTrendList' in dataJson) {
|
||||
this.echartData = dataJson.OriginCostTrendList;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.chartRef.initChart();
|
||||
})
|
||||
}
|
||||
},
|
||||
websocketsend(val) {
|
||||
// 数据发送
|
||||
this.websock.send(val);
|
||||
},
|
||||
websocketclose(e) {
|
||||
// 关闭
|
||||
console.log('断开连接', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.main-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
.bz-top {
|
||||
text-align: center;
|
||||
}
|
||||
.bz25-2 {
|
||||
background: url(../assets/bz25-2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-3 {
|
||||
background: url(../assets/bz25-3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-4 {
|
||||
background: url(../assets/bz25-4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-5 {
|
||||
background: url(../assets/bz25-5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-7 {
|
||||
background: url(../assets/bz25-7.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.bz25-8 {
|
||||
background: url(../assets/bz25-8.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 147px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
.topNum {
|
||||
font-weight: 600;
|
||||
font-size: 44px;
|
||||
color: #ffffff;
|
||||
line-height: 43px;
|
||||
font-style: normal;
|
||||
margin-top: 50px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.topText {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #95caff;
|
||||
line-height: 20px;
|
||||
font-style: normal;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.middle {
|
||||
height: 322px;
|
||||
}
|
||||
.middle1 {
|
||||
background: url(../assets/1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle2 {
|
||||
background: url(../assets/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.yanqi {
|
||||
width: 275px;
|
||||
height: 108px;
|
||||
background: url(../assets/yanqi.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
height: 108px;
|
||||
}
|
||||
.imageClass {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.middle2-left {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 17px;
|
||||
letter-spacing: 5px;
|
||||
width: 110px;
|
||||
padding-top: 12px;
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.middle2-right {
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
color: #ffffff;
|
||||
line-height: 106px;
|
||||
}
|
||||
.footer {
|
||||
height: 410px;
|
||||
}
|
||||
.footer1 {
|
||||
background: url(../assets/3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.footer2 {
|
||||
background: url(../assets/4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
</style>
|
||||
46
src/views/dashboard/utils/index.js
Normal file
46
src/views/dashboard/utils/index.js
Normal file
@ -0,0 +1,46 @@
|
||||
import moment from "moment";
|
||||
export const switchShowTime = (type) => {
|
||||
let nowTime = new Date
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
let currentYear = nowTime.getFullYear();
|
||||
let startYear = null
|
||||
switch(type) {
|
||||
case '日':
|
||||
let hour = nowTime.getHours()
|
||||
if (hour > 6) {
|
||||
startTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
|
||||
endTime = moment(moment(nowTime)+86400000).format('yyyy.MM.DD')+' 7点'
|
||||
}else{
|
||||
endTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
|
||||
startTime = moment(moment(nowTime)-86400000).format('yyyy.MM.DD')+' 7点'
|
||||
}
|
||||
return startTime+'-'+endTime
|
||||
case '周':
|
||||
let timestamp = nowTime- 24 * 60 * 60 * 1000
|
||||
endTime = moment(timestamp).format('yyyy.MM.DD')
|
||||
startTime = moment(timestamp-24 * 60 * 60 * 1000 * 6).format('yyyy.MM.DD')
|
||||
return startTime+'-'+endTime
|
||||
case '月':
|
||||
let day = 29;
|
||||
let lastMonth = nowTime.getMonth() === 0 ? 12 : nowTime.getMonth();
|
||||
if (lastMonth === 2) {
|
||||
day = isLeapYear(currentYear) ? 29 : 28;
|
||||
}
|
||||
if (lastMonth === 12) {
|
||||
startYear = currentYear - 1
|
||||
}else{
|
||||
startYear = currentYear
|
||||
}
|
||||
startTime = startYear+'.'+lastMonth+'.'+day
|
||||
endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
|
||||
return startTime+'-'+endTime
|
||||
default:// 年
|
||||
startTime = (currentYear - 1)+'.12.29'
|
||||
endTime = currentYear+'.12.28'
|
||||
return startTime+'-'+endTime
|
||||
}
|
||||
}
|
||||
const isLeapYear = (year) => {
|
||||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
||||
}
|
||||
204
src/views/dashboard/utils/websocket.js
Normal file
204
src/views/dashboard/utils/websocket.js
Normal file
@ -0,0 +1,204 @@
|
||||
// websocket实例
|
||||
let wsObj = null;
|
||||
// ws连接地址
|
||||
let wsUrl = null;
|
||||
// let userId = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
let lockReconnect = false;
|
||||
// 重连定时器
|
||||
let wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
let messageCallback = null;
|
||||
// 连接失败，执行回调函数
|
||||
let errorCallback = null;
|
||||
// 发送给后台的数据
|
||||
let sendDatas = {};
|
||||
|
||||
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
|
||||
wsUrl = url;
|
||||
createWebSoket();
|
||||
messageCallback = successCallback;
|
||||
errorCallback = errCallback;
|
||||
sendDatas = agentData;
|
||||
}
|
||||
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
export const closeWebsocket = () => {
|
||||
if (wsObj) {
|
||||
writeToScreen('手动关闭websocket');
|
||||
wsObj.close() // 关闭websocket
|
||||
// wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
lockReconnect = true;
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
heartCheck.stop();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建ws函数
|
||||
const createWebSoket = () => {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false
|
||||
}
|
||||
// const host = window.location.host;
|
||||
// userId = GetQueryString("userId");
|
||||
// wsUrl = "ws://" + host + "/websoket" + userId;
|
||||
|
||||
try {
|
||||
wsObj = new WebSocket(wsUrl);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
wsObj.onclose = (event) => {
|
||||
writeToScreen('onclose执行关闭事件');
|
||||
onWsClose(event);
|
||||
}
|
||||
|
||||
wsObj.onerror = (event) => {
|
||||
writeToScreen('onerror执行error事件，开始重连');
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
}
|
||||
} catch (err) {
|
||||
writeToScreen('绑定事件没有成功，开始重连');
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen('CONNECT');
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
wsObj.send(JSON.stringify(sendDatas));
|
||||
}
|
||||
if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
|
||||
writeToScreen('wsObj.readyState=3, ws连接异常，开始重连');
|
||||
reconnect();
|
||||
errorCallback(event);
|
||||
}
|
||||
}
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr);
|
||||
messageCallback(jsonStr);
|
||||
}
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen('DISCONNECT');
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log('onclose event: ', event)
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen('非正常关闭');
|
||||
errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
const onWsError = (event) => {
|
||||
writeToScreen('onWsError: ', event.data);
|
||||
errorCallback(event);
|
||||
}
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
}
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen('3秒后重连');
|
||||
lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen('重连...' + wsUrl);
|
||||
createWebSoket();
|
||||
lockReconnect = false;
|
||||
writeToScreen('重连完成');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 从浏览器地址中获取对应参数
|
||||
const GetQueryString = (name) => {
|
||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// 获取url中 ? 符后的字符串并正则匹配
|
||||
let r = window.location.search.substr(1).match(reg);
|
||||
let context = "";
|
||||
r && (context = r[2]);
|
||||
reg = null;
|
||||
r = null;
|
||||
return context;
|
||||
}
|
||||
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
let heartCheck = {
|
||||
timeout: 15000,
|
||||
timeoutObj: null,
|
||||
serverTimeoutObj: null,
|
||||
// 重启
|
||||
reset() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
this.start();
|
||||
},
|
||||
// 停止
|
||||
stop() {
|
||||
clearTimeout(this.timeoutObj);
|
||||
clearTimeout(this.serverTimeoutObj);
|
||||
},
|
||||
// 开启定时器
|
||||
start() {
|
||||
this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
this.timeoutObj = setTimeout(() => {
|
||||
writeToScreen("心跳检查，发送ping到后台");
|
||||
try {
|
||||
const datas = { ping: true };
|
||||
wsObj.send(JSON.stringify(datas));
|
||||
} catch (err) {
|
||||
writeToScreen("发送ping异常");
|
||||
}
|
||||
console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
|
||||
// 内嵌定时器
|
||||
this.serverTimeoutObj = setTimeout(() => {
|
||||
writeToScreen("没有收到后台的数据，重新连接");
|
||||
reconnect();
|
||||
}, this.timeout)
|
||||
}, this.timeout)
|
||||
}
|
||||
}
|
||||
160
src/views/dashboard/utils/wsInterface.js
Normal file
160
src/views/dashboard/utils/wsInterface.js
Normal file
@ -0,0 +1,160 @@
|
||||
import { connectWebsocket, closeWebsocket } from './websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
case "GasInfo": {
|
||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
case "SumGasInfo": {
|
||||
store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 创建mes链接
|
||||
export const getMesMsg = () => {
|
||||
const sj = new Date().getTime()
|
||||
// ISRA
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "israKiln": {
|
||||
// store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
// break;
|
||||
// }
|
||||
// // case "KilnInfo": {
|
||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// // break;
|
||||
// // }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// // 原料 MA
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "material": {
|
||||
// store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
// break;
|
||||
// }
|
||||
// // case "KilnInfo": {
|
||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// // break;
|
||||
// // }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// 能耗 EN
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "EnergyInfo": {
|
||||
// store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
|
||||
// break;
|
||||
// }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// 烟气 GAS
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "exhaustGas": {
|
||||
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
|
||||
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
|
||||
dayTrend: msgData.dayTrend,
|
||||
weekTrend: msgData.weekTrend,
|
||||
monthTrend: msgData.monthTrend,
|
||||
yearTrend: msgData.yearTrend,
|
||||
}})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -122,18 +122,6 @@
|
||||
:model="loginForm"
|
||||
:rules="LoginRules"
|
||||
class="login-form">
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input
|
||||
v-model="loginForm.tenantName"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="租户">
|
||||
<!-- <svg-icon
|
||||
slot="prefix"
|
||||
icon-class="tree"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 账号密码登录 -->
|
||||
<div v-if="loginForm.loginType === 'uname'">
|
||||
<el-form-item prop="username">
|
||||
@ -303,7 +291,7 @@ export default {
|
||||
mobile: '',
|
||||
mobileCode: '',
|
||||
rememberMe: false,
|
||||
tenantName: '',//技术中心
|
||||
tenantName: '技术中心',//技术中心
|
||||
},
|
||||
scene: 21,
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user