Merge pull request '更新' (#439) from projects/zg-zwq into projects/zg-test

Reviewed-on: #439

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2024-09-10 14:43:39
+ # @LastEditTime: 2025-03-05 16:46:35
  # @LastEditors: zwq
  # @Description:
 ###
@@ -13,9 +13,12 @@ VUE_APP_TITLE = 成本管理系统
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://192.168.1.49:48080'
-VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
+# VUE_APP_BASE_API = 'http://line-sczg.kszny.picaiba.com'
-# VUE_APP_BASE_API = 'http://192.168.1.40:48080'
+VUE_APP_BASE_API = 'http://100.64.0.45:48080'
-# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
+# VUE_APP_BASE_API = 'http://172.16.33.10:48080'
+
+# ws地址
+VUE_APP_WS_API = 'ws://100.64.0.45:48080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.prod

@@ -2,7 +2,7 @@
  # @Author: zwq
  # @Date: 2024-03-27 15:49:55
  # @LastEditors: zwq
- # @LastEditTime: 2024-09-10 15:19:19
+ # @LastEditTime: 2025-03-05 16:30:45
  # @Description:
 ###
 # 生产环境配置
@@ -20,6 +20,9 @@ VUE_APP_BASE_API = ''
 # PUBLIC_PATH = 'http://192.168.0.33:8888/'
 PUBLIC_PATH = ''
 
+# ws地址
+VUE_APP_WS_API = 'ws://10.1.17.10:48080'
+
 # 二级部署路径
 VUE_APP_APP_NAME ='yudao-admin'
 

.gitignore

@@ -21,3 +21,5 @@ selenium-debug.log
 
 package-lock.json
 echarts.js
+sync_line_sczg_prod.bat
+sync_line_sczg_aliyun.bat

src/api/cost/allCost.js

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2024-04-18 16:53:17
  * @LastEditors: zwq
- * @LastEditTime: 2024-09-06 14:35:13
+ * @LastEditTime: 2025-02-17 15:47:58
  * @Description:
  */
 
@@ -52,3 +52,21 @@ export function exportRawCostStatisticsHisExcel(query) {
     responseType: 'blob'
   })
 }
+
+// 获得成本首页 -获取首页数据
+export function getData(query) {
+  return request({
+    url: '/monitoring/cost-homepage/getData',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获得成本首页 -详细首页数据
+export function getDetailData(query) {
+  return request({
+    url: '/monitoring/cost-homepage/getDetailData',
+    method: 'get',
+    params: query
+  })
+}

src/api/cost/costOriginRatioHis.js

@@ -15,7 +15,7 @@ export function updatecostOriginRatioHis(data) {
     data: data
   })
 }
-// 获得原片良品率
+// 获得原片产线良品率
 export function getcostOriginRatioHisPage(query) {
   return request({
     url: '/monitoring/cost-origin-ratio-his/page',
@@ -24,6 +24,15 @@ export function getcostOriginRatioHisPage(query) {
   })
 }
 
+// 获得原片工段良品率
+export function getcostOriginWSRatioHisPage(query) {
+  return request({
+    url: '/monitoring/cost-origin-ratio-his/page-ws',
+    method: 'get',
+    params: query
+  })
+}
+
 // 导出原片良品率 Excel
 export function exportcostOriginRatioHisExcel(query) {
   return request({
@@ -34,3 +43,14 @@ export function exportcostOriginRatioHisExcel(query) {
   })
 }
 
+
+// 导出原片良品率 工段Excel
+export function exportcostOriginWSRatioHisExcel(query) {
+  return request({
+    url: '/monitoring/cost-origin-ratio-his/export-excel-ws',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+

src/api/environmental/environmentalLog.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 获得环保数据历史分页
+export function getCostEnviHisPage(query) {
+  return request({
+    url: '/monitoring/cost-envi-his/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获得余热发电page
+export function yurepage(query) {
+  return request({
+    url: '/base/energy-quantity-day/yurepage',
+    method: 'get',
+    params: query
+  })
+}

src/assets/font/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: '站酷庆科黄油体';
+  src: url('./站酷庆科黄油体.ttf') format('truetype');;
+}

src/assets/icons/svg/cost.svg

@@ -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>

src/assets/icons/svg/costchart.svg

@@ -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>

src/assets/icons/svg/energy.svg

@@ -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>

src/assets/icons/svg/fullScreenView.svg

@@ -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>

src/assets/icons/svg/line.svg

@@ -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>

src/assets/icons/svg/unFullScreenView.svg

@@ -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>

src/assets/icons/svg/yanqi.svg

@@ -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>

src/layout/components/Sidebar/Logo.vue

@@ -67,7 +67,7 @@ export default {
 	},
 	data() {
 		return {
-			title: '中建材智能化院',
+			title: '中建材自贡新能源',
 			logo: logoImg,
 		};
 	},

src/main.js

@@ -4,6 +4,7 @@ import Element from 'element-ui';
 import './assets/styles/element-variables.scss';
 import '@/assets/styles/index.scss'; // global css
 import '@/assets/styles/ruoyi.scss'; // ruoyi css
+import '@/assets/font/font.css'
 import App from './App';
 import store from './store';
 import router from './router';
@@ -34,7 +35,6 @@ import {
 	getDictDatas,
 	getDictDatas2,
 } from '@/utils/dict';
-
 import './theme/index.css'; // 自定义主题包 - code-brick-zj
 
 // 全局方法挂载

src/mixins/basic-page.js

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-08-24 11:19:43
  * @LastEditors: zwq
- * @LastEditTime: 2024-04-02 09:33:29
+ * @LastEditTime: 2025-02-21 13:18:46
  * @Description:
  */
 export default {
@@ -16,7 +16,7 @@ export default {
       },
       tableData: [], //table数据
       listQuery: { //分页
-        pageSize: 10,
+        pageSize: 20,
         pageNo: 1,
         total: 1,
       },

src/router/index.js

@@ -69,6 +69,26 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/print/design'], resolve),
     hidden: true
   },
+  {
+    path: '/allDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/allDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/rawDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/rawDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/deepDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/deepDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/coldDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/coldDashboard/index-model'], resolve),
+    hidden: true
+  },
   {
     path: "",
     component: Layout,
@@ -76,9 +96,15 @@ export const constantRoutes = [
     children: [
       {
         path: "index",
-        component: (resolve) => require(["@/views/cost/raw/costMaterial/index"], resolve),
+        component: (resolve) => require(["@/views/cost/index"], resolve),
         name: "首页",
         meta: { title: "首页", icon: "dashboard", affix: true },
+      },
+      {
+        path: "indexDetail",
+        component: (resolve) => require(["@/views/cost/indexDetail"], resolve),
+        name: "首页详细",
+        meta: { title: "首页详细", icon: "dashboard"},
         hidden: true
       },
     ],

src/views/Environmental/Envi-yure-log.vue

@@ -0,0 +1,121 @@
+<!--
+ * @Author: zwq
+ * @Date: 2024-11-13 14:01:16
+ * @LastEditors: zwq
+ * @LastEditTime: 2025-02-21 14:32:08
+ * @Description:
+-->
+<template>
+	<div>
+		<div class="app-container">
+			<!-- 搜索工作栏 -->
+			<search-bar
+				:formConfigs="formConfig"
+				ref="searchBarForm"
+				@headBtnClick="buttonClick" />
+			<!-- 列表 -->
+			<base-table
+				:page="listQuery.pageNo"
+				:limit="listQuery.pageSize"
+				:table-props="tableProps"
+				:table-data="tableData"
+				:max-height="tableH" />
+			<pagination
+				:page.sync="listQuery.pageNo"
+				:limit.sync="listQuery.pageSize"
+				:total="listQuery.total"
+				@pagination="getDataList" />
+		</div>
+	</div>
+</template>
+
+<script>
+import basicPage from '@/mixins/basic-page';
+import { yurepage } from '@/api/environmental/environmentalLog';
+import { parseTime } from '@/filter/code-filter';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+
+const tableProps = [
+	{
+		prop: 'recordTime',
+		label: '记录时间',
+		filter: parseTime,
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+	},
+	{
+		prop: 'usingQuantity',
+		label: '发电量',
+    filter: (val) => (val != null ? Number(val).toFixed(3) : '-'),
+	},
+];
+export default {
+	name: '',
+	mixins: [basicPage, tableHeightMixin],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: yurepage,
+			},
+			formConfig: [
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'datetimerange',
+					format: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					width: 350,
+					param: 'searchTime',
+					clearable: false,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			listQuery: {
+				statisticType: 1,
+			},
+			tableProps,
+			tableData: [],
+		};
+	},
+	components: {},
+	created() {
+		const end = new Date();
+		const start = new Date();
+		this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+		this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+		this.$nextTick(() => {
+			this.$refs.searchBarForm.formInline.searchTime = [
+				this.listQuery.startTime,
+				this.listQuery.endTime,
+			];
+		});
+	},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 20;
+					this.listQuery.statisticType = 1;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style lang="scss"></style>

src/views/Environmental/Environmental-log.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: zwq
+ * @Date: 2024-11-13 14:01:16
+ * @LastEditors: zwq
+ * @LastEditTime: 2025-02-21 14:31:00
+ * @Description:
+-->
+<template>
+	<div>
+		<div class="app-container">
+			<!-- 搜索工作栏 -->
+			<search-bar
+				:formConfigs="formConfig"
+				ref="searchBarForm"
+				@headBtnClick="buttonClick" />
+			<!-- 列表 -->
+			<base-table
+				:page="listQuery.pageNo"
+				:limit="listQuery.pageSize"
+				:table-props="tableProps"
+				:table-data="tableData"
+				:max-height="tableH" />
+			<pagination
+				:page.sync="listQuery.pageNo"
+				:limit.sync="listQuery.pageSize"
+				:total="listQuery.total"
+				@pagination="getDataList" />
+		</div>
+	</div>
+</template>
+
+<script>
+import basicPage from '@/mixins/basic-page';
+import { getCostEnviHisPage } from '@/api/environmental/environmentalLog';
+import { parseTime } from '@/filter/code-filter';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+
+const tableProps = [
+	{
+		prop: 'recTime',
+		label: '记录时间',
+		filter: parseTime,
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+	},
+	{
+		prop: 'envi1',
+		label: '二氧化硫mg/Nm3',
+		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'envi2',
+		label: '氮氧化物mg/Nm3',
+		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'envi3',
+		label: '粉尘mg/Nm3',
+		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+];
+export default {
+	name: '',
+	mixins: [basicPage, tableHeightMixin],
+	data() {
+		return {
+			urlOptions: {
+				getDataListURL: getCostEnviHisPage,
+			},
+			formConfig: [
+				{
+					type: 'datePicker',
+					label: '时间',
+					dateType: 'datetimerange',
+					format: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					width: 350,
+					param: 'searchTime',
+					clearable: false,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			listQuery: {
+				statisticType: 1,
+			},
+			tableProps,
+			tableData: [],
+		};
+	},
+	components: {},
+	created() {
+		const end = new Date();
+		const start = new Date();
+		this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+		this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+		this.$nextTick(() => {
+			this.$refs.searchBarForm.formInline.searchTime = [
+				this.listQuery.startTime,
+				this.listQuery.endTime,
+			];
+		});
+	},
+	methods: {
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 20;
+					this.listQuery.statisticType = 1;
+					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>
+<style lang="scss"></style>

src/views/base/material/index.vue

@@ -57,7 +57,6 @@ const tableProps = [
     prop: 'createTime',
     label: '添加时间',
     filter: parseTime,
-    minWidth: 150
   },
 	{
 		prop: 'name',
@@ -68,6 +67,10 @@ const tableProps = [
 		label: '原料编码',
 		width: 180,
 	},
+	{
+		prop: 'level',
+		label: '原料等级',
+	},
 	{
 		prop: 'unit',
 		label: '单位',
@@ -149,7 +152,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.listQuery.code = val.code;
 					this.getDataList();

src/views/base/materialPricing/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-08-01 13:52:10
  * @LastEditors: zwq
- * @LastEditTime: 2024-04-11 09:05:16
+ * @LastEditTime: 2025-03-05 15:23:30
  * @Description:
 -->
 <template>
@@ -63,7 +63,7 @@
 						style="width: 75%"
 						v-model="dataForm.price"
 						clearable
-						placeholder="请输入允许留存时间" />
+						placeholder="请输入单价" />
 					{{ unit }}
 				</el-form-item>
 			</el-col>

src/views/base/materialPricing/index.vue

@@ -63,11 +63,11 @@ const tableProps = [
 		label: '原料编码',
 		width: 180,
 	},
-	{
+	// {
-		prop: 'price',
+	// 	prop: 'price',
-		label: '单价(元/吨)',
+	// 	label: '单价(元/千克)',
-		align: 'right',
+	// 	align: 'right',
-	},
+	// },
 	{
 		prop: 'createTime',
 		label: '生效时间',
@@ -152,7 +152,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.materialId = val.name;
 					this.getDataList();
 					break;

src/views/core/base/factory/index.vue

@@ -154,7 +154,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.listQuery.code = val.code;
 					this.getDataList();

src/views/core/base/lineBindProduct/index.vue

@@ -85,7 +85,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.getDataList();
 					break;
 				default:

src/views/core/base/lineBindProductLog/index.vue

@@ -120,7 +120,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.productionLineId = val.productionLineId;
 					this.listQuery.productId = val.productId;
 					this.listQuery.startTime = val.startTime;

src/views/core/base/product/index.vue

@@ -162,7 +162,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.listQuery.code = val.code;
 					this.getDataList();

src/views/core/base/productionLine/index.vue

@@ -196,7 +196,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.getDataList();
 					break;

src/views/core/base/workshopSection/index.vue

@@ -152,7 +152,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.getDataList();
 					break;

src/views/core/monitoring/auto/index.vue

@@ -309,7 +309,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.lineId = val.line ? val.line : undefined;
 					this.listQuery.reportType = val.reportType ? val.reportType : undefined;
 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;

src/views/core/monitoring/data/index.vue

@@ -263,7 +263,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.proLineId = val.line ? val.line : undefined;
 					this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
 					this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;

src/views/core/monitoring/sectionStatistics/index.vue

@@ -305,7 +305,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.lineId = val.line ? val.line : undefined;
 					this.listQuery.sectionId = val.section ? val.section : undefined;
 					this.listQuery.reportType = val.reportType ? val.reportType : undefined;

src/views/core/monitoring/sectionStatisticsSearch/index.vue

@@ -321,7 +321,7 @@ export default {
           console.log(val.timeSlot);
 
 					// this.listQuery.pageNo = 1;
-          // this.listQuery.pageSize = 10;
+          // this.listQuery.pageSize = 20;
           this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined
           this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
           this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined

src/views/cost/costStatistics/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div style="background: #f2f4f9; height: 40px; width: 100%">
+		<!-- <div style="background: #f2f4f9; height: 40px; width: 100%">
 			<ButtonNav :menus="['按日期', '按规格']" @change="currentMenu">
 				<template v-slot:tab1>
 					<div>按日期</div>
@@ -9,7 +9,7 @@
 					<div>按规格</div>
 				</template>
 			</ButtonNav>
-		</div>
+		</div> -->
 		<div class="app-container energyOverlimitLog">
 			<div v-show="activeName === 'his'">
 				<!-- 搜索工作栏 -->
@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -86,32 +86,36 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 	},
 	{
 		prop: 'originArea',
 		label: '原片下片面积',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'deepArea',
 		label: '深加工下片面积',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'originPrice',
 		label: '原片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'deepPrice',
 		label: '深加工成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'price',
 		label: '总成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 const tableProps2 = [
@@ -244,19 +248,12 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
 			this.formConfig2[0].startPlaceholder = '开始时间';
 			this.formConfig2[0].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
@@ -274,7 +271,7 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
@@ -334,12 +331,19 @@ export default {
 				this.otherMethods(val);
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		/** 导出按钮操作 */
 		handleExport() {
 			let exportURL, title;
 			if (this.activeName === 'his') {
 				exportURL = exportCostSumExcel;
-        title = '总成本统计-按日期';
+        title = '总成本统计';
 			} else {
 				exportURL = exportRawStatisticsRealtimeExcel;
         title = '总成本统计-按规格';

src/views/cost/deep/24hourCostMonitor/index.vue

@@ -77,7 +77,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
@@ -90,7 +90,7 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.listQuery.recTime = val.searchTime;
 					this.handleExport();

src/views/cost/deep/costDeepEnergy/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'energyTypeName',
 		label: '能源类型',
 	},
-	{
+	// {
-		prop: 'bindObjectName',
+	// 	prop: 'bindObjectName',
-		label: '监控对象',
+	// 	label: '监控对象',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
-	{
+	// {
-		prop: 'meterName',
+	// 	prop: 'meterName',
-		label: '抄表名',
+	// 	label: '抄表名',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
 	{
 		prop: 'quantity',
 		label: '累计使用量',
@@ -115,20 +118,24 @@ const tableProps = [
 	},
 ];
 const tableProps2 = [
+	{
+		prop: 'remark',
+		label: '备注',
+	},
 	{
 		prop: 'energyTypeName',
 		label: '能源类型',
 	},
-	{
+	// {
-		prop: 'bindObjectName',
+	// 	prop: 'bindObjectName',
-		label: '监控对象',
+	// 	label: '监控对象',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
-	{
+	// {
-		prop: 'meter',
+	// 	prop: 'meter',
-		label: '抄表名',
+	// 	label: '抄表名',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
 	{
 		prop: 'quantity',
 		label: '累计使用量',
@@ -207,13 +214,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'button',
@@ -262,26 +272,18 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[1].startPlaceholder = '开始时间';
-			this.formConfig2[1].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.energyTypeId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
-					if (this.activeName === 'his') {
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -292,13 +294,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.energyTypeId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -320,15 +327,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		// 获取数据2列表
 		getDataList2() {
 			if (this.listQuery.startTime) {

src/views/cost/deep/costDeepOthercostHis/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'otherCostName',
@@ -99,9 +102,14 @@ const tableProps = [
 		prop: 'price',
 		label: '总价（元）',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 const tableProps2 = [
+	// {
+	// 	prop: 'remark',
+	// 	label: '备注',
+	// },
 	{
 		prop: 'otherCostName',
 		label: '成本名称',
@@ -110,6 +118,7 @@ const tableProps2 = [
 		prop: 'price',
 		label: '总价（元）',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 export default {
@@ -182,13 +191,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'button',
@@ -237,26 +249,20 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[1].startPlaceholder = '开始时间';
-			this.formConfig2[1].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
+						this.listQuery.endTime = val.searchTime
+							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+							: null;
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -267,13 +273,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -295,15 +306,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		// 获取数据2列表
 		getDataList2() {
 			getRawOthercostSunPage(this.listQuery).then((response) => {

src/views/cost/deep/costDeepOthercostLog/index.vue

@@ -65,6 +65,7 @@ const tableProps = [
 		prop: 'price',
 		label: '成本金额',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'remark',
@@ -161,7 +162,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
@@ -174,7 +175,7 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime

src/views/cost/deep/costDeepOthercostRule/typeRule.vue

@@ -10,9 +10,9 @@
 		<span>
 			{{
 				injectData.type == 1
-					? `每天等价,${injectData.price}元`
+					? `每天等价,${Number(injectData.price)}元`
 					: injectData.type == 2
-					? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
+					? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 					: '-'
 			}}
 		</span>

src/views/cost/deep/costDeepRatioHis/index.vue

@@ -52,7 +52,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -85,9 +85,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'productionLineName',
@@ -100,22 +103,27 @@ const tableProps = [
 	{
 		prop: 'innum',
 		label: '上片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outnum',
 		label: '下片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 ];
 const tableProps2 = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'productionLineName',
@@ -128,15 +136,17 @@ const tableProps2 = [
 	{
 		prop: 'innum',
 		label: '进片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outnum',
 		label: '出片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 ];
 export default {
@@ -170,13 +180,15 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
 				},
 				{
 					type: 'button',
@@ -225,22 +237,15 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.productionLineId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
 						this.getDataList();
@@ -253,12 +258,12 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.productionLineId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					this.handleExport();
 					break;
@@ -309,10 +314,20 @@ export default {
 				this.otherMethods(val);
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		successSubmit() {
 			this.handleCancel();
-			const val = this.activeName === 'his' ? '产线良品率' : 'now';
+			if (this.activeName === 'his') {
-			this.currentMenu(val);
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
 		},
 		/** 导出按钮操作 */
 		handleExport() {

src/views/cost/deep/costStatistics/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '时间',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'bindObjectName',
@@ -102,33 +105,42 @@ const tableProps = [
 	{
 		prop: 'inCount',
 		label: '上片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outCount',
 		label: '下片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 	{
 		prop: 'costSum',
 		label: '深加工成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costPiece',
 		label: '单片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costArea',
 		label: '每平米成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 const tableProps2 = [
+	{
+		prop: 'remark',
+		label: '备注',
+	},
 	{
 		prop: 'bindObjectName',
 		label: '产线',
@@ -140,30 +152,35 @@ const tableProps2 = [
 	{
 		prop: 'inCount',
 		label: '上片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outCount',
 		label: '下片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 	{
 		prop: 'costSum',
 		label: '深加工成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costPiece',
 		label: '单片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costArea',
 		label: '每平米成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 export default {
@@ -225,13 +242,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'select',
@@ -288,26 +308,20 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[0].startPlaceholder = '开始时间';
-			this.formConfig2[0].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
+						this.listQuery.endTime = val.searchTime
+							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+							: null;
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -318,13 +332,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -346,15 +365,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		// 获取数据2列表
 		getDataList2() {
 			if (this.listQuery.startTime) {

src/views/cost/index.vue

@@ -0,0 +1,527 @@
+<template>
+	<div class="home-page">
+		<div class="date-tabs">
+			<!-- @tab-click="handleClick" -->
+			<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
+				<el-tab-pane
+					:label="'\u2002\u2002日\u2002\u2002'"
+					name="日"></el-tab-pane>
+				<el-tab-pane
+					:label="'\u2002\u2002周\u2002\u2002'"
+					name="周"></el-tab-pane>
+				<el-tab-pane
+					:label="'\u2002\u2002月\u2002\u2002'"
+					name="月"></el-tab-pane>
+				<el-tab-pane
+					:label="'\u2002\u2002年\u2002\u2002'"
+					name="年"></el-tab-pane>
+			</el-tabs>
+			<div class="detail">
+				<el-date-picker
+					v-model="timeday"
+					align="right"
+					type="date"
+					format="yyyy-MM-dd"
+					valueFormat="yyyy-MM-dd"
+					:clearable="false"
+					@change="timedayChange"
+					placeholder="选择日期"
+					:picker-options="pickerOptions"></el-date-picker>
+			</div>
+			<!-- <div class="current-date">( {{ showTime }} )</div> -->
+			<div class="current-time">
+				<el-button
+					size="mini"
+					type="text"
+					style="font-size: 24px; color: white; margin-right: 30px"
+          :disabled="!permission"
+					@click="goDetail">
+					<svg-icon icon-class="list"></svg-icon>
+					详细
+				</el-button>
+				<span style="display: inline-block; margin-right: 16px">
+					{{ topTime + timeZone }}
+				</span>
+				<span>{{ topDate }}</span>
+			</div>
+		</div>
+		<el-row class="main-top" :gutter="16">
+			<el-col :span="24" style="position: relative">
+				<div class="title">
+					<svg-icon icon-class="home-produce" />
+					<span class="title-inner">生产总成本</span>
+				</div>
+				<el-row class="box">
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.priceS }}万元</div>
+						<div class="unit-style">总计成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.matPriceS }}万元</div>
+						<div class="unit-style">原料成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.energyPriceS }}万元</div>
+						<div class="unit-style">能源成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.otherPriceS }}万元</div>
+						<div class="unit-style">其他成本</div>
+					</el-col>
+					<!-- <el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.ratioS }}</div>
+						<div class="unit-style">综合良品率/%</div>
+					</el-col> -->
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.areaPriceS }}元</div>
+						<div class="unit-style">综合每平米成本</div>
+					</el-col>
+				</el-row>
+			</el-col>
+			<el-col :span="24" style="position: relative">
+				<div class="title">
+					<svg-icon icon-class="home-produce" />
+					<span class="title-inner">原片成本</span>
+				</div>
+				<el-row class="box">
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.priceO }}万元</div>
+						<div class="unit-style">原片总成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.matPriceO }}万元</div>
+						<div class="unit-style">原料成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.energyPriceO }}万元</div>
+						<div class="unit-style">能源成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.otherPriceO }}万元</div>
+						<div class="unit-style">其他成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.ratioO }}</div>
+						<div class="unit-style">原片良品率/%</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.areaPriceO }}元</div>
+						<div class="unit-style">原片每平米成本</div>
+					</el-col>
+				</el-row>
+			</el-col>
+			<el-col :span="24" style="position: relative">
+				<div class="title">
+					<svg-icon icon-class="home-produce" />
+					<span class="title-inner">深加工成本</span>
+				</div>
+				<el-row class="box">
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.priceD }}万元</div>
+						<div class="unit-style">深加工总成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.energyPriceD }}万元</div>
+						<div class="unit-style">能源成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.otherPriceD }}万元</div>
+						<div class="unit-style">其他成本</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.ratioD }}</div>
+						<div class="unit-style">深加工良品率/%</div>
+					</el-col>
+					<el-col :span="4" class="num-box shadow">
+						<div class="num-style">{{ homeData.areaPriceD }}元</div>
+						<div class="unit-style">深加工每平米成本</div>
+					</el-col>
+				</el-row>
+			</el-col>
+		</el-row>
+		<el-row class="main-bottom" :gutter="16" v-if="false">
+			<el-col :span="9">
+				<div class="chart-wrapper">
+					<line-chart :chart-data="lineChartData" />
+				</div>
+			</el-col>
+			<el-col :span="7">
+				<div class="chart-wrapper">
+					<pie-chart />
+				</div>
+			</el-col>
+			<el-col :span="8">
+				<div class="chart-wrapper">
+					<bar-chart />
+				</div>
+			</el-col>
+		</el-row>
+		<div
+			class="main-footer"
+			style="
+				color: #c7c7c7;
+				user-select: none;
+				font-size: 14px;
+				letter-spacing: 1px;
+				height: 30px;
+				display: grid;
+				place-content: center;
+			">
+			&copy; 中建材智能自动化研究院有限公司
+		</div>
+	</div>
+</template>
+
+<script>
+import moment from 'moment';
+import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+import LineChart from '../dashboard/LineChart';
+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: {
+		expectedData: [100, 120, 161, 134, 105, 160, 165],
+		actualData: [120, 82, 91, 154, 162, 140, 145],
+	},
+	messages: {
+		expectedData: [200, 192, 120, 144, 160, 130, 140],
+		actualData: [180, 160, 151, 106, 145, 150, 130],
+	},
+	purchases: {
+		expectedData: [80, 100, 121, 104, 105, 90, 100],
+		actualData: [120, 90, 100, 138, 142, 130, 130],
+	},
+	shoppings: {
+		expectedData: [130, 140, 141, 142, 145, 150, 160],
+		actualData: [120, 82, 91, 154, 162, 140, 130],
+	},
+};
+
+export default {
+	name: 'Home',
+	mixins: [tableHeightMixin],
+	components: {
+		LineChart,
+		PieChart,
+		PanelGroup,
+		BarChart,
+	},
+	computed: {
+		gradientBackground() {
+			return {
+				'background-image':
+					'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
+				'background-size': '100px 100px', // 调整条纹的大小
+			};
+		},
+	},
+	data() {
+		return {
+			activeName: '日',
+			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') +
+				' 00:00:00',
+			endTime:
+				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
+				' 00:00:00',
+
+			pickerOptions: {
+				disabledDate(time) {
+					return time.getTime() + 3600 * 1000 * 24 > Date.now();
+				},
+				shortcuts: [
+					{
+						text: '今天',
+						onClick(picker) {
+							picker.$emit('pick', new Date());
+						},
+					},
+					{
+						text: '昨天',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24);
+							picker.$emit('pick', date);
+						},
+					},
+					{
+						text: '一周前',
+						onClick(picker) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+							picker.$emit('pick', date);
+						},
+					},
+				],
+			},
+		};
+	},
+	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.roles[0].name !== 'dashborad') {
+				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);
+	},
+	methods: {
+		getData() {
+			let listQuery = {
+				//分页
+				pageSize: 10,
+				pageNo: 1,
+				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
+				startTime: this.timeday + ' 00:00:00',
+			};
+			getData(listQuery).then((response) => {
+				this.homeData = response.data;
+				for (let i in this.homeData) {
+					this.homeData[i] = Number(this.homeData[i]).toFixed(2);
+				}
+			});
+		},
+		timedayChange() {
+			let listQuery = {
+				//分页
+				pageSize: 10,
+				pageNo: 1,
+				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());
+		// 	let end = Date.parse(new Date());
+		// 	switch (this.activeName) {
+		// 		case '日':
+		// 			this.showTime = moment(new Date())
+		// 				.subtract(0, 'days')
+		// 				.format('YYYY-MM-DD');
+		// 			this.lineChartData = lineChartData.newVisitis;
+		// 			break;
+		// 		case '周':
+		// 			start = moment(new Date()).subtract(6, 'days').format('x');
+		// 			this.showTime =
+		// 				moment(new Date()).subtract(6, 'days').format('MM-DD') +
+		// 				' ~ ' +
+		// 				moment(new Date()).subtract(0, 'days').format('MM-DD');
+		// 			this.lineChartData = lineChartData.messages;
+		// 			break;
+		// 		case '月':
+		// 			start = moment(new Date()).subtract(1, 'month').format('x');
+		// 			this.showTime =
+		// 				moment(new Date()).subtract(1, 'month').format('MM-DD') +
+		// 				' ~ ' +
+		// 				moment(new Date()).subtract(0, 'days').format('MM-DD');
+		// 			this.lineChartData = lineChartData.purchases;
+		// 			break;
+		// 		case '年':
+		// 			start = moment(new Date()).subtract(1, 'year').format('x');
+		// 			this.showTime =
+		// 				moment(new Date()).subtract(1, 'year').format('YYYY') +
+		// 				' ~ ' +
+		// 				moment(new Date()).subtract(0, 'days').format('YYYY');
+		// 			this.lineChartData = lineChartData.shoppings;
+		// 			break;
+		// 		default:
+		// 			console.log(val);
+		// 	}
+		// 	this.getData();
+		// },
+		getTime() {
+			let _this = this;
+			this.timer = setInterval(function () {
+				_this.topDate = moment().format('YYYY.MM.DD');
+				let temp = moment().format('A-hh:mm').split('-');
+				_this.timeZone = temp[0];
+				_this.topTime = temp[1];
+			}, 1000);
+		},
+		goDetail() {
+			this.$router.push({ path: 'indexDetail' });
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.home-page::before {
+	background-image: url('~@/assets/img/home-bg.png');
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transform: rotate(180deg);
+}
+.date-tabs {
+	padding-left: 40px;
+	padding-top: 20px;
+	position: relative;
+	margin-bottom: 20px;
+}
+:deep(.date-tabs) {
+	.el-tabs__header {
+		margin-bottom: 8px;
+		display: inline-block;
+		transform: translateY(-12px);
+	}
+
+	.el-tabs__content {
+		overflow: visible;
+	}
+
+	.el-tabs__item {
+		font-size: 18px;
+		color: #fff;
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+		line-height: 36px !important;
+		height: 36px;
+	}
+	.el-tabs__item.is-active {
+		color: #0b58ff;
+	}
+}
+.detail {
+	display: inline-block;
+	position: absolute;
+	left: 260px;
+	top: 10px;
+}
+:deep(.detail) {
+	.el-input__inner {
+		background-color: transparent;
+		color: white;
+	}
+}
+// .current-date {
+// 	color: #fff;
+// 	font-size: 18px;
+// 	position: absolute;
+// 	left: 260px;
+// 	top: 14px;
+// }
+.current-time {
+	color: #fff;
+	font-size: 18px;
+	position: absolute;
+	right: 38px;
+	top: 14px;
+}
+.main-top {
+	width: 100%;
+	padding: 0 20px 0 40px;
+	.title {
+		position: absolute;
+		left: 34px;
+		top: 20px;
+		width: 180px;
+		font-size: 32px;
+		z-index: 10;
+		.title-inner {
+			position: absolute;
+			left: 42px;
+			top: 5px;
+			font-size: calc(100vw * 20 / 1920);
+		}
+	}
+	.box {
+		background-color: #fff;
+		border-radius: 24px;
+		height: 192px;
+		padding: 40px 24px 32px 24px;
+		margin-bottom: 20px;
+		box-shadow: 0 8px 8px 0 gray;
+		.num-box {
+			height: 120px;
+			padding-top: 26px;
+			text-align: center;
+			.num-style {
+				color: #000;
+				font-size: calc(100vw * 40 / 1920);
+			}
+			.unit-style {
+				color: rgba(0, 0, 0, 0.7);
+				font-size: calc(100vw * 18 / 1920);
+			}
+		}
+		.shadow {
+			background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
+		}
+	}
+}
+.main-bottom {
+	width: 100%;
+	margin-top: 20px;
+	.chart-wrapper {
+		margin-left: 10px;
+		height: 425px;
+		background: #fff;
+		border-radius: 5px;
+		box-shadow: 0 3px 3px 0 gray;
+	}
+}
+</style>
+<style lang="scss">
+.home-page {
+	.el-progress-bar__inner {
+		background-image: url('~@/assets/img/home-progress-bg.png');
+		background-size: cover;
+	}
+}
+</style>

src/views/cost/indexDetail.vue

@@ -0,0 +1,199 @@
+<template>
+	<div class="app-container">
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<base-table
+			:table-props="tableProps1"
+			:page="1"
+			:limit="100"
+			:table-data="tableData1"></base-table>
+		<base-table
+			:table-props="tableProps2"
+			:page="1"
+			:limit="100"
+			:table-data="tableData2"></base-table>
+	</div>
+</template>
+
+<script>
+import { getDetailData } from '@/api/cost/allCost';
+import moment from 'moment';
+
+const tableProps1 = [
+	{
+		prop: 'name',
+		label: '成本项目-原片',
+	},
+	{
+		prop: 'f1',
+		label: '本期领用',
+		children: [
+			{
+				prop: 'quantity',
+				label: '数量',
+			},
+			{
+				prop: 'price',
+				label: '单价',
+			},
+			{
+				prop: 'sumPrice',
+				label: '金额',
+			},
+		],
+	},
+	{
+		prop: 'sprice',
+		label: '单位成本',
+	},
+];
+
+const tableProps2 = [
+	{
+		prop: 'name',
+		label: '成本项目-加工',
+	},
+	{
+		prop: 'quantity',
+		label: '耗用数量',
+	},
+	{
+		prop: 'price',
+		label: '平均耗用单价',
+	},
+	{
+		prop: 'sumPrice',
+		label: '总成本',
+	},
+	{
+		prop: 'sprice',
+		label: '综合单位成本',
+	},
+];
+export default {
+	data() {
+		return {
+			tableProps1,
+			tableData1: [],
+			tableProps2,
+			tableData2: [],
+			listQuery: {
+				pageSize: 10,
+				pageNo: 1,
+				statisticType: 1,
+			},
+			activeName: '日',
+			startTime:
+				moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD') +
+				' 00:00:00',
+			endTime:
+				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
+				' 00:00:00',
+			formConfig: [
+				{
+					type: 'select',
+					label: '维度',
+					selectOptions: [
+						{ id: 1, name: '日' },
+						{ id: 2, name: '周' },
+						{ id: 3, name: '月' },
+						{ id: 4, name: '年' },
+					],
+					param: 'statisticType',
+					defaultSelect: 1, // 默认值,
+					clearable: false,
+				},
+				{
+					// 日期选择
+					type: 'datePicker',
+					// label: '日期',
+					dateType: 'date',
+					placeholder: '选择日期',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd',
+					param: 'timeday',
+					clearable: false,
+					pickerOptions: {
+						disabledDate(time) {
+							return (time.getTime()+ 3600 * 1000 * 24) > Date.now();
+						},
+						shortcuts: [
+							{
+								text: '今天',
+								onClick(picker) {
+									picker.$emit('pick', new Date());
+								},
+							},
+							{
+								text: '昨天',
+								onClick(picker) {
+									const date = new Date();
+									date.setTime(date.getTime() - 3600 * 1000 * 24);
+									picker.$emit('pick', date);
+								},
+							},
+							{
+								text: '一周前',
+								onClick(picker) {
+									const date = new Date();
+									date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+									picker.$emit('pick', date);
+								},
+							},
+						],
+					},
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '返回首页',
+					name: 'back',
+					color: 'warning',
+				},
+			],
+		};
+	},
+	created() {},
+	mounted() {
+		this.listQuery.startTime = this.startTime;
+    this.$refs.searchBarForm.formInline.timeday = this.startTime.substr(0, 10)
+		this.getDataList();
+	},
+	methods: {
+		// 获取数据列表
+		getDataList() {
+			getDetailData(this.listQuery).then((response) => {
+				this.tableData1 = response.data.odata;
+				this.tableData2 = response.data.ddata;
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+          console.log(val.timeday)
+					this.listQuery.statisticType = val.statisticType || 1;
+					this.listQuery.startTime = val.timeday
+						? val.timeday + ' 00:00:00'
+						: null;
+					this.getDataList();
+					break;
+				case 'back':
+          this.$router.go(-1)
+					break;
+				default:
+					console.log(val);
+			}
+		},
+	},
+};
+</script>

src/views/cost/raw/24hourCostMonitor/index.vue

@@ -77,7 +77,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
@@ -90,7 +90,7 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name;
 					this.listQuery.recTime = val.searchTime;
 					this.handleExport();

src/views/cost/raw/costEnergy/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'energyTypeName',
 		label: '能源类型',
 	},
-	{
+	// {
-		prop: 'bindObjectName',
+	// 	prop: 'bindObjectName',
-		label: '监控对象',
+	// 	label: '监控对象',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
-	{
+	// {
-		prop: 'meterName',
+	// 	prop: 'meterName',
-		label: '抄表名',
+	// 	label: '抄表名',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
 	{
 		prop: 'quantity',
 		label: '累计使用量',
@@ -115,20 +118,24 @@ const tableProps = [
 	},
 ];
 const tableProps2 = [
+	{
+		prop: 'remark',
+		label: '备注',
+	},
 	{
 		prop: 'energyTypeName',
 		label: '能源类型',
 	},
-	{
+	// {
-		prop: 'bindObjectName',
+	// 	prop: 'bindObjectName',
-		label: '监控对象',
+	// 	label: '监控对象',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
-	{
+	// {
-		prop: 'meter',
+	// 	prop: 'meter',
-		label: '抄表名',
+	// 	label: '抄表名',
-		filter: (val) => (val != null ? val : '--'),
+	// 	filter: (val) => (val != null ? val : '--'),
-	},
+	// },
 	{
 		prop: 'quantity',
 		label: '累计使用量',
@@ -207,13 +214,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'button',
@@ -237,10 +247,11 @@ export default {
 			activeName: 'his',
 			tableProps,
 			tableProps2,
-			tableBtn: [{
+			tableBtn: [
+				{
 					type: 'edit',
 					btnName: '编辑',
-					  }
+				},
 			].filter((v) => v),
 			tableData: [],
 			tableData2: [],
@@ -262,26 +273,18 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[1].startPlaceholder = '开始时间';
-			this.formConfig2[1].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.energyTypeId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
-					if (this.activeName === 'his') {
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -292,13 +295,16 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.energyTypeId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -320,15 +326,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+		getNavDataList() {
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+		},
 		// 获取数据2列表
 		getDataList2() {
 			if (this.listQuery.startTime) {

src/views/cost/raw/costMaterial/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2024-09-05 15:34:28
+ * @LastEditTime: 2024-12-27 09:18:43
  * @Description:
 -->
 <template>
@@ -22,7 +22,7 @@
 						placeholder="请输入原料名称" />
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<!-- <el-col :span="12">
 				<el-form-item label="单价" prop="matPrice">
 					<el-input
 						v-model="dataForm.matPrice"
@@ -31,7 +31,7 @@
 						placeholder="请输入单价" />
 					(元/吨)
 				</el-form-item>
-			</el-col>
+			</el-col> -->
 			<el-col :span="12">
 				<el-form-item label="累计用量" prop="quantity">
 					<el-input-number

src/views/cost/raw/costMaterial/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'materialName',
@@ -97,13 +100,13 @@ const tableProps = [
 	},
 	{
 		prop: 'quantity',
-		label: '累计使用量(吨)',
+		label: '累计使用量(千克)',
-	},
-	{
-		prop: 'matPrice',
-		label: '单价(元/吨)',
-		align: 'right',
 	},
+	// {
+	// 	prop: 'matPrice',
+	// 	label: '单价(元/千克)',
+	// 	align: 'right',
+	// },
 	{
 		prop: 'price',
 		label: '总价(元)',
@@ -111,6 +114,10 @@ const tableProps = [
 	},
 ];
 const tableProps2 = [
+	// {
+	// 	prop: 'remark',
+	// 	label: '备注',
+	// },
 	{
 		prop: 'materialName',
 		label: '原料名称',
@@ -123,13 +130,13 @@ const tableProps2 = [
 	},
 	{
 		prop: 'quantity',
-		label: '累计使用量(吨)',
+		label: '累计使用量(千克)',
-	},
-	{
-		prop: 'materialPrice',
-		label: '单价(元/吨)',
-		align: 'right',
 	},
+	// {
+	// 	prop: 'materialPrice',
+	// 	label: '单价(元/千克)',
+	// 	align: 'right',
+	// },
 	{
 		prop: 'price',
 		label: '总价(元)',
@@ -204,13 +211,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'button',
@@ -234,10 +244,11 @@ export default {
 			activeName: 'his',
 			tableProps,
 			tableProps2,
-			tableBtn: [{
+			tableBtn: [
+				{
 					type: 'edit',
 					btnName: '编辑',
-					  }
+				},
 			].filter((v) => v),
 			tableData: [],
 			tableData2: [],
@@ -259,26 +270,20 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[1].startPlaceholder = '开始时间';
-			this.formConfig2[1].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.materialId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
+						this.listQuery.endTime = val.searchTime
+							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+							: null;
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -289,13 +294,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.materialId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -317,15 +327,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+		getNavDataList() {
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+		},
 		// 获取数据2列表
 		getDataList2() {
 			if (this.listQuery.startTime) {

src/views/cost/raw/costOriginRatioHis/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2024-09-05 15:33:16
+ * @LastEditTime: 2025-06-13 10:59:54
  * @Description:
 -->
 <template>
@@ -15,7 +15,9 @@
 		label-width="80px">
 		<el-row :gutter="20">
 			<el-col :span="12">
-				<el-form-item label="产线" prop="bindObjectName">
+				<el-form-item
+					:label="activeName === 'his' ? '产线' : '工段'"
+					prop="bindObjectName">
 					<el-input
 						style="width: 100%"
 						v-model="dataForm.bindObjectName"
@@ -33,7 +35,7 @@
 						placeholder="选择所属日期"></el-date-picker>
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="厚度" prop="thick">
 					<el-input-number
 						:min="0"
@@ -43,7 +45,7 @@
 						placeholder="请输入厚度" />
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="在线速度" prop="speed">
 					<el-input-number
 						:min="0"
@@ -53,7 +55,7 @@
 						placeholder="请输入在线速度" />
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="掰边宽度" prop="width">
 					<el-input-number
 						:min="0"
@@ -64,25 +66,27 @@
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
-				<el-form-item label="拉引量" prop="inArea">
+				<el-form-item
+					:label="activeName === 'his' ? '拉引量' : '进片数'"
+					prop="inArea">
 					<el-input-number
 						:min="0"
 						style="width: 85%"
 						v-model="dataForm.inArea"
-						clearable
+						clearable />
-						placeholder="请输入拉引量" />
+					{{ activeName === 'his' ? '(m²)' : '片' }}
-					(m²)
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
-				<el-form-item label="下片面积" prop="outArea">
+				<el-form-item
+					:label="activeName === 'his' ? '下片面积' : '出片数'"
+					prop="outArea">
 					<el-input-number
 						:min="0"
 						style="width: 85%"
 						v-model="dataForm.outArea"
-						clearable
+						clearable />
-						placeholder="请输入下片面积" />
+					{{ activeName === 'his' ? '(m²)' : '片' }}
-					(m²)
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
@@ -129,10 +133,12 @@ export default {
 				recTime: undefined,
 			},
 			dataRule: {},
+			activeName: 'his',
 		};
 	},
 	methods: {
-		init(val, statisticType) {
+		init(val, statisticType, activeName) {
+			this.activeName = activeName;
 			this.visible = true;
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields();
@@ -148,17 +154,22 @@ export default {
 				if (!valid) {
 					return false;
 				}
-				const udata = {
+				let udata = {
 					id: this.dataForm.id,
 					statisticType: this.dataForm.statisticType,
-					modifyThick: this.dataForm.thick,
-					modifySpeed: this.dataForm.speed,
-					modifyWidth: this.dataForm.width,
 					modifyInArea: this.dataForm.inArea,
 					modifyOutArea: this.dataForm.outArea,
 					modifyRatio:
 						this.dataForm.ratio >= 0 ? this.dataForm.ratio / 100 : '',
 				};
+				if (this.activeName === 'his') {
+					udata = {
+						...udata,
+						modifyThick: this.dataForm.thick,
+						modifySpeed: this.dataForm.speed,
+						modifyWidth: this.dataForm.width,
+					};
+				}
 				// 修改的提交
 				this.urlOptions.updateURL(udata).then((response) => {
 					this.$modal.msgSuccess('修改成功');

src/views/cost/raw/costOriginRatioHis/index.vue

@@ -1,11 +1,22 @@
 <template>
+	<div>
+		<div style="background: #f2f4f9; height: 40px; width: 100%">
+			<ButtonNav :menus="['产线良品率', '工段良品率']" @change="currentMenu">
+				<template v-slot:tab1>
+					<div>产线良品率</div>
+				</template>
+				<template v-slot:tab2>
+					<div>工段良品率</div>
+				</template>
+			</ButtonNav>
+		</div>
 		<div class="app-container energyOverlimitLog">
-		<!-- 搜索工作栏 -->
 			<search-bar
 				:formConfigs="formConfig"
 				ref="searchBarForm"
 				@headBtnClick="buttonClick" />
 			<!-- 列表 -->
+			<div v-if="activeName === 'his'">
 				<base-table
 					:page="listQuery.pageNo"
 					:limit="listQuery.pageSize"
@@ -20,11 +31,28 @@
 						:method-list="tableBtn"
 						@clickBtn="handleClick" />
 				</base-table>
+			</div>
+			<div v-if="activeName === 'now'">
+				<base-table
+					:page="listQuery.pageNo"
+					:limit="listQuery.pageSize"
+					:table-props="tableProps2"
+					:table-data="tableData2"
+					:max-height="tableH">
+					<method-btn
+						v-if="tableBtn.length"
+						slot="handleBtn"
+						:width="80"
+						label="操作"
+						:method-list="tableBtn"
+						@clickBtn="handleClick" />
+				</base-table>
+			</div>
 			<pagination
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-			@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -38,22 +66,34 @@
 					@refreshDataList="successSubmit"></add-or-update>
 			</base-dialog>
 		</div>
+	</div>
 </template>
 
 <script>
 import AddOrUpdate from './add-or-updata';
 import basicPage from '@/mixins/basic-page';
 import { getLinePage } from '@/api/base/productionLine';
-import { getcostOriginRatioHisPage,exportcostOriginRatioHisExcel } from '@/api/cost/costOriginRatioHis';
+import {
+	getcostOriginRatioHisPage,
+	getcostOriginWSRatioHisPage,
+	exportcostOriginWSRatioHisExcel,
+	exportcostOriginRatioHisExcel,
+} from '@/api/cost/costOriginRatioHis';
 import { parseTime } from '@/filter/code-filter';
 import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+import ButtonNav from '@/components/ButtonNav';
+
+
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
     width:130,
 	},
+	{
+		prop: 'remark',
+		label: '备注',
+	},
 	{
 		prop: 'bindObjectName',
 		label: '产线',
@@ -62,27 +102,67 @@ const tableProps = [
 	{
 		prop: 'thick',
 		label: '厚度',
+    filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 	},
 	{
 		prop: 'speed',
 		label: '在线速度',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'width',
 		label: '掰边宽度',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'inArea',
 		label: '拉引量/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outArea',
 		label: '下片面积/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
+	},
+];
+const tableProps2  = [
+	{
+		prop: 'time',
+		label: '日期',
+    width:130,
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+	},
+	{
+		prop: 'bindObjectName',
+		label: '工段',
+    width:145,
+	},
+	{
+		prop: 'spec',
+		label: '规格',
+	},
+	{
+		prop: 'inArea',
+		label: '进片数',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'outArea',
+		label: '出片数',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'ratio',
+		label: '良品率',
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 ];
 export default {
@@ -116,13 +196,15 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
 				},
 				{
 					type: 'button',
@@ -143,23 +225,27 @@ export default {
 			listQuery: {
 				statisticType: 1,
 			},
+			activeName: 'his',
 			tableProps,
+			tableProps2,
 			tableBtn: [{
 							type: 'edit',
 							btnName: '编辑',
 					  }
 			].filter((v) => v),
 			tableData: [],
+			tableData2: [],
 		};
 	},
 	components: {
 		AddOrUpdate,
+		ButtonNav,
 	},
 	created() {
     const params ={
       pageNo: 1,
       pageSize: 100,
-      pdType: 1
+      pdType: 0
     }
 		getLinePage(params).then((response) => {
 			this.formConfig[1].selectOptions = response.data.list;
@@ -167,36 +253,33 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
+					if (this.activeName === 'his') {
 						this.getDataList();
+					} else {
+						this.getDataList2();
+					}
 					break;
 				case 'add':
 					this.addOrUpdateHandle();
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					this.handleExport();
 					break;
@@ -204,23 +287,74 @@ export default {
 					console.log(val);
 			}
 		},
+		currentMenu(val) {
+			this.activeName = val === '产线良品率' ? 'his' : 'now';
+			if (this.activeName === 'his') {
+				this.$refs.searchBarForm.resetForm();
+				this.listQuery.bindObjectId = null;
+				this.listQuery.startTime = null;
+				this.listQuery.endTime = null;
+				this.listQuery.statisticType = 1;
+				this.listQuery.pageNo = 1;
+				this.getDataList();
+			} else {
+				this.$refs.searchBarForm.resetForm();
+				this.listQuery.bindObjectId = null;
+				this.listQuery.startTime = null;
+				this.listQuery.endTime = null;
+				this.listQuery.statisticType = 1;
+				this.listQuery.pageNo = 1;
+				this.getDataList2();
+			}
+		},
+		// 获取数据2列表
+		getDataList2() {
+			getcostOriginWSRatioHisPage(this.listQuery).then((response) => {
+				this.tableData2 = response.data.list;
+				this.listQuery.total = response.data.total;
+			});
+		},
 		//tableBtn点击
 		handleClick(val) {
 			if (val.type === 'edit') {
 				this.addOrUpdateVisible = true;
 				this.addOrEditTitle = '编辑';
 				this.$nextTick(() => {
-					this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
+					this.$refs.addOrUpdate.init(
+						val.data,
+						this.listQuery.statisticType,
+						this.activeName
+					);
 				});
 			} else {
 				this.otherMethods(val);
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
+		successSubmit() {
+			this.handleCancel();
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+		},
 		/** 导出按钮操作 */
 		handleExport() {
 			let exportURL, title;
+			if (this.activeName === 'his') {
 				exportURL = exportcostOriginRatioHisExcel;
-        title = '原片成本-原片良品率';
+				title = '原片-产线良品率';
+			} else {
+				exportURL = exportcostOriginWSRatioHisExcel;
+				title = '原片-工段良品率';
+			}
 			// 处理查询参数
 			let params = { ...this.listQuery };
 			params.pageNo = undefined;

src/views/cost/raw/costOthercostHis/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '日期',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'otherCostName',
@@ -102,6 +105,10 @@ const tableProps = [
 	},
 ];
 const tableProps2 = [
+	// {
+	// 	prop: 'remark',
+	// 	label: '备注',
+	// },
 	{
 		prop: 'otherCostName',
 		label: '成本名称',
@@ -182,13 +189,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'button',
@@ -237,24 +247,20 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
+						this.listQuery.endTime = val.searchTime
+							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+							: null;
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -265,13 +271,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -297,6 +308,13 @@ export default {
 				this.getDataList2();
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		// 获取数据2列表
 		getDataList2() {
 			getRawOthercostSunPage(this.listQuery).then((response) => {

src/views/cost/raw/costOthercostLog/index.vue

@@ -65,6 +65,7 @@ const tableProps = [
 		prop: 'price',
 		label: '成本金额',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'remark',
@@ -161,7 +162,7 @@ export default {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
@@ -174,7 +175,7 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.name = val.name||null;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime

src/views/cost/raw/costOthercostRule/typeRule.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2023-12-05 13:45:59
  * @LastEditors: zwq
- * @LastEditTime: 2024-04-15 17:12:03
+ * @LastEditTime: 2024-12-25 16:20:38
  * @Description
 -->
 <template>
@@ -10,9 +10,9 @@
 		<span>
 			{{
 				injectData.type == 1
-					? `每天等价,${injectData.price}元`
+					? `每天等价,${Number(injectData.price)}元`
 					: injectData.type == 2
-					? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
+					? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 					: '-'
 			}}
 		</span>

src/views/cost/raw/costStatistics/index.vue

@@ -54,7 +54,7 @@
 				:page.sync="listQuery.pageNo"
 				:limit.sync="listQuery.pageSize"
 				:total="listQuery.total"
-				@pagination="getDataList" />
+				@pagination="getNavDataList" />
 			<base-dialog
 				:dialogTitle="addOrEditTitle"
 				:dialogVisible="addOrUpdateVisible"
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 
 const tableProps = [
 	{
-		prop: 'recTime',
+		prop: 'time',
 		label: '时间',
-		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
+	},
+	{
+		prop: 'remark',
+		label: '备注',
 	},
 	{
 		prop: 'bindObjectName',
@@ -98,32 +101,41 @@ const tableProps = [
 	{
 		prop: 'thick',
 		label: '厚度',
+    filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 	},
 	{
 		prop: 'inArea',
 		label: '拉引量/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outArea',
 		label: '下片面积/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 	{
 		prop: 'costSum',
 		label: '原片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costArea',
 		label: '每平米成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 const tableProps2 = [
+	{
+		prop: 'remark',
+		label: '备注',
+	},
 	{
 		prop: 'bindObjectName',
 		label: '产线',
@@ -135,34 +147,40 @@ const tableProps2 = [
 	{
 		prop: 'inArea',
 		label: '拉引量/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outArea',
 		label: '下片面积/m²',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'outCount',
 		label: '下片数量',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'ratio',
 		label: '良品率',
-		filter: (val) => (val ? val * 100 + '%' : '-'),
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 	{
 		prop: 'costSum',
 		label: '原片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costPiece',
 		label: '单片成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 	{
 		prop: 'costArea',
 		label: '每平米成本/元',
 		align: 'right',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 	},
 ];
 export default {
@@ -224,13 +242,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
+					clearable: false,
 				},
 				{
 					type: 'select',
@@ -287,26 +308,20 @@ export default {
 	},
 	methods: {
 		buttonClick(val) {
-			if (val.statisticType === 2) {
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年第{w}周');
-			}else{
-				this.tableProps[0].filter = (val) =>
-					parseTime(val, '{y}年{m}月{d}日');
-      }
-			this.formConfig2[0].startPlaceholder = '开始时间';
-			this.formConfig2[0].endPlaceholder = '结束时间';
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					if (this.activeName === 'his') {
+						this.listQuery.endTime = val.searchTime
+							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+							: null;
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -317,13 +332,18 @@ export default {
 					break;
 				case 'export':
 					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.pageSize = 20;
 					this.listQuery.bindObjectId = val.name || null;
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
+					this.listQuery.endTime = val.searchTime
+						? val.searchTime[1]
+						: null;
+					if (this.activeName === 'his') {
 						this.listQuery.endTime = val.searchTime
 							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 							: null;
+					}
 					this.handleExport();
 					break;
 				default:
@@ -345,15 +365,26 @@ export default {
 				const end = new Date();
 				const start = new Date();
 				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
+				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
-				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
+				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
-				this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
+				this.$nextTick(() => {
-				this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
+					this.$refs.searchBarForm2.formInline.searchTime = [
+						this.listQuery.startTime,
+						this.listQuery.endTime,
+					];
+				});
 				this.listQuery.name = null;
 				this.listQuery.pageNo = 1;
 				this.getDataList2();
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
 		// 获取数据2列表
 		getDataList2() {
 			if (this.listQuery.startTime) {

src/views/dashboard/BarChart.vue

@@ -74,21 +74,21 @@ export default {
           }
         }],
         series: [{
-          name: 'pageA',
+          name: '成本1',
           type: 'bar',
           stack: 'vistors',
           barWidth: '60%',
           data: [79, 52, 200, 334, 390, 330, 220],
           animationDuration
         }, {
-          name: 'pageB',
+          name: '成本2',
           type: 'bar',
           stack: 'vistors',
           barWidth: '60%',
           data: [80, 52, 200, 334, 390, 330, 220],
           animationDuration
         }, {
-          name: 'pageC',
+          name: '成本3',
           type: 'bar',
           stack: 'vistors',
           barWidth: '60%',

src/views/dashboard/allDashboard/BarChart.vue

@@ -0,0 +1,249 @@
+<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(permission) {
+			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(permission){
+        option.series[2]=[]
+      }
+			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>

src/views/dashboard/allDashboard/index-model.vue

@@ -0,0 +1,558 @@
+<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">
+						{{
+							topData.yestodaySum ? 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">
+						{{
+							topData.yestodayRatio
+								? Number(topData.yestodayRatio).toFixed(1)
+								: '-'
+						}}%
+					</div>
+					<div class="topText">昨日良品率</div>
+				</div>
+				<div style="flex: 5" class="bz25-4 bz-top">
+					<div class="topNum">
+						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
+					</div>
+					<div class="topText">本月总成本/万元</div>
+				</div>
+				<div style="flex: 5" class="bz25-5 bz-top">
+					<div class="topNum">
+						{{
+							topData.monthAreaCost
+								? 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">
+								{{ topData.so2 ? 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">
+								{{ topData.fc ? 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">
+								{{ topData.no ? 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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+			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;
+			wx = rw / bw;
+			hx = rh / 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 (!this.permission) {
+					this.topData.monthAreaCost = '***';
+					this.topData.monthSum = '***';
+					this.topData.yestodaySum = '***';
+				}
+			}
+			if ('factoryCostTableList' in dataJson) {
+				this.tableData1 = dataJson.factoryCostTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.priceS = null;
+						item.matPriceS = null;
+						item.energyPriceS = null;
+						item.otherPriceS = null;
+						item.areaPriceS = null;
+					});
+				}
+			}
+			if ('factoryEnergyTableList' in dataJson) {
+				this.tableData2 = dataJson.factoryEnergyTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.price = null;
+					});
+				}
+			}
+			if ('factoryCostTrendList' in dataJson) {
+				this.echartData = dataJson.factoryCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		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>

src/views/dashboard/allDashboard/index.vue

@@ -0,0 +1,568 @@
+<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">
+						{{
+							topData.yestodaySum ? 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">
+						{{
+							topData.yestodayRatio
+								? Number(topData.yestodayRatio).toFixed(1)
+								: '-'
+						}}%
+					</div>
+					<div class="topText">昨日良品率</div>
+				</div>
+				<div style="flex: 5" class="bz25-4 bz-top">
+					<div class="topNum">
+						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
+					</div>
+					<div class="topText">本月总成本/万元</div>
+				</div>
+				<div style="flex: 5" class="bz25-5 bz-top">
+					<div class="topNum">
+						{{
+							topData.monthAreaCost
+								? 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">
+								{{ topData.so2 ? 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">
+								{{ topData.fc ? 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">
+								{{ topData.no ? 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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+			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 (!this.permission) {
+					this.topData.monthAreaCost = '***';
+					this.topData.monthSum = '***';
+					this.topData.yestodaySum = '***';
+				}
+			}
+			if ('factoryCostTableList' in dataJson) {
+				this.tableData1 = dataJson.factoryCostTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.priceS = null;
+						item.matPriceS = null;
+						item.energyPriceS = null;
+						item.otherPriceS = null;
+						item.areaPriceS = null;
+					});
+				}
+			}
+			if ('factoryEnergyTableList' in dataJson) {
+				this.tableData2 = dataJson.factoryEnergyTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.price = null;
+					});
+				}
+			}
+			if ('factoryCostTrendList' in dataJson) {
+				this.echartData = dataJson.factoryCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		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>

src/views/dashboard/coldDashboard/components/dataBox.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="dataBox">
+    <div class="side1"></div>
+    <div class="side2"></div>
+    <div class='titleBox'>
+      <svg-icon icon-class="energy" />
+      {{title}}
+      <span class='line1' style='left: 0px'></span>
+      <span class='line2' style='left: 0px'></span>
+      <span class='line2' style='right: 0px'></span>
+      <span class='line1' style='right: 0px'></span>
+    </div>
+    <span class='lt' v-if='position == "lt"'></span>
+    <span class='rt' v-if='position == "rt"'></span>
+    <span class='lb' v-if='position == "lb"'></span>
+    <span class='rb' v-if='position == "rb"'></span>
+    <div class="centerBox">
+      <div class="centerBoxItem1">
+        <span class='num'>{{msgData?.cut || '-'}}片</span>
+        <span class='name'>- 预计切割片数 -</span>
+      </div>
+      <div class="centerBoxItem1">
+        <span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
+        <span class='name'>- 综合面积良品率 -</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>掰边后片数：</span>
+        <span class='num'>{{msgData?.bai || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>掰边后良品率：</span>
+        <span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>顶板后片数：</span>
+        <span class='num'>{{msgData?.ding || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>顶板后良品率：</span>
+        <span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>下片片数：</span>
+        <span class='num'>{{msgData?.xia || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>下片良品率：</span>
+        <span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DataBox',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    position:{
+      type: String,
+      default: ''
+    },
+    msgData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.dataBox {
+  width: 909px;
+  height: 430px;
+  position: relative;
+  overflow: hidden;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: 0;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 909px;
+    height: 2px;
+    border-radius: 2px;
+    left: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 90%,
+        transparent);
+  }
+  .side1 {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 400px;
+    width: 2px;
+    border-radius: 2px;
+    top: 40px;
+    left: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 80%,
+        transparent);
+  }
+  .side2 {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 400px;
+    width: 2px;
+    border-radius: 2px;
+    top: 40px;
+    right: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 80%,
+        transparent);
+  }
+    
+  .titleBox {
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    padding-left: 23px;
+    background-color: rgba(0, 106, 205, 0.22);
+    font-size: 22px;
+    color: #fff;
+    .line1 {
+      display: inline-block;
+      width: 2px;
+      height: 16px;
+      background-color: #0078E4;
+      position: absolute;
+      top: 0px;
+    }
+    .line2 {
+      display: inline-block;
+      width: 16px;
+      height: 2px;
+      background-color: #0078E4;
+      position: absolute;
+      top: 0px;
+    }
+  }
+  .lt {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-left-color: #1F8FFF;
+    border-top-color: #1F8FFF;
+  }
+  .rt {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-right-color: #1F8FFF;
+    border-top-color: #1F8FFF;
+  }
+  .lb {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-left-color: #1F8FFF;
+    border-bottom-color: #1F8FFF;
+  }
+  .rb {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-right-color: #1F8FFF;
+    border-bottom-color: #1F8FFF;
+  }
+  .centerBox {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    padding: 20px 24px 35px 24px;
+    .centerBoxItem1 {
+      width: 426px;
+      height: 106px;
+      background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 16px;
+      box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+      text-align: center;
+      .num {
+        font-family: '站酷庆科黄油体';
+        font-size: 32px;
+        font-weight: bold;
+        display: block;
+        margin-top:15px;
+        margin-bottom: 3px;
+        color: #48D6FF;
+        letter-spacing: 6px;
+        text-shadow: 1px 4px 2px #000000;
+      }
+      .name {
+        display: block;
+        font-size: 20px;
+        letter-spacing: 1px;
+        color: rgba(255,255,255,0.9);
+      }
+    }
+    .centerBoxItem2 {
+      width: 426px;
+      height: 56px;
+      line-height: 56px;
+      background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 16px;
+      font-size: 20px;
+      letter-spacing: 1px;
+      .name {
+        display: inline-block;
+        text-align: right;
+        width: 213px;
+        color: rgba(255,255,255,0.9);
+      }
+      .num {
+        display: inline-block;
+        text-align: left;
+        width: 213px;
+        color: #15C1F2;
+      }
+    }
+  }
+}
+.dataBox > * {
+  position: relative;
+  z-index: 1;
+}
+</style>

src/views/dashboard/coldDashboard/index-model.vue

@@ -0,0 +1,184 @@
+<template>
+	<div
+		id="coldContainerB"
+		ref="coldContainerB"
+		style="width: 100%; height: 100%">
+		<div
+			id="coldContainer"
+			class="coldContainer"
+			style="width: 1920px; height: 1080px"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="自贡冷端数据看板" />
+			<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
+			<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
+			<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
+			<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
+		</div>
+	</div>
+</template>
+<script>
+import KHeader from '../components/Header';
+import DataBox from './components/dataBox';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import { getUserProfile } from '@/api/system/user';
+export default {
+	name: 'ColdDashboard',
+	components: {
+		KHeader,
+		DataBox,
+	},
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 1,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			line1: {},
+			line2: {},
+			line3: {},
+			line4: {},
+		};
+	},
+	created() {
+		this.init();
+		this.initWebSocket();
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+		this.websocketclose();
+	},
+	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.coldContainerB);
+		},
+		resetSize() {
+			let coldContainerBox = document.getElementById('coldContainer');
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(coldContainerBox.style.width);
+			let bh = parseFloat(coldContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			wx = rw / bw;
+			hx = rh / bh;
+			this.scaleNum = wx;
+		},
+		initWebSocket() {
+			// 初始化weosocket
+			const path = `${this.url}/websocket/message?userId=4`;
+			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 msgData = e.data;
+			try {
+				msgData = JSON.parse(e.data);
+			} catch (error) {
+				console.log('websocket: [unable to msgData] :  ', e.data);
+			}
+			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+			msgData.originRatioTables &&
+				msgData.originRatioTables.forEach((item) => {
+					item.lineName.includes('1') && (this.line1 = item);
+					item.lineName.includes('2') && (this.line2 = item);
+					item.lineName.includes('3') && (this.line3 = item);
+					item.lineName.includes('4') && (this.line4 = item);
+				});
+		},
+		websocketsend() {
+			// 数据发送
+			this.websock.send('');
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			this.websock.close();
+			console.log('断开连接', e);
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.coldContainer {
+	position: absolute;
+	transform-origin: 16px 8px;
+	font-size: 16px;
+	top: 0px;
+	left: 0px;
+	width: 1920px;
+	height: 1080px;
+	background: url(../assets/bg1.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+	.box1 {
+		position: absolute;
+		top: 141px;
+		left: 40px;
+	}
+	.box2 {
+		position: absolute;
+		top: 141px;
+		right: 40px;
+	}
+	.box3 {
+		position: absolute;
+		bottom: 66px;
+		left: 40px;
+	}
+	.box4 {
+		position: absolute;
+		bottom: 66px;
+		right: 40px;
+	}
+}
+</style>

src/views/dashboard/coldDashboard/index.vue

@@ -0,0 +1,194 @@
+<template>
+	<div
+		id="coldContainerB"
+		ref="coldContainerB"
+		style="width: 100%; height: 100%">
+		<div
+			id="coldContainer"
+			class="coldContainer"
+			style="width: 1920px; height: 1080px"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="自贡冷端数据看板" />
+			<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
+			<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
+			<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
+			<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
+		</div>
+	</div>
+</template>
+<script>
+import KHeader from '../components/Header';
+import DataBox from './components/dataBox';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import { getUserProfile } from '@/api/system/user';
+export default {
+	name: 'ColdDashboard',
+	components: {
+		KHeader,
+		DataBox,
+	},
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 1,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			line1: {},
+			line2: {},
+			line3: {},
+			line4: {},
+		};
+	},
+	created() {
+		this.init();
+		this.initWebSocket();
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+		this.websocketclose();
+	},
+	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.coldContainerB);
+		},
+		resetSize() {
+			let coldContainerBox = document.getElementById('coldContainer');
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(coldContainerBox.style.width);
+			let bh = parseFloat(coldContainerBox.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=4`;
+			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 msgData = e.data;
+			try {
+				msgData = JSON.parse(e.data);
+			} catch (error) {
+				console.log('websocket: [unable to msgData] :  ', e.data);
+			}
+			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+			msgData.originRatioTables &&
+				msgData.originRatioTables.forEach((item) => {
+					item.lineName.includes('1') && (this.line1 = item);
+					item.lineName.includes('2') && (this.line2 = item);
+					item.lineName.includes('3') && (this.line3 = item);
+					item.lineName.includes('4') && (this.line4 = item);
+				});
+		},
+		websocketsend() {
+			// 数据发送
+			this.websock.send('');
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			this.websock.close();
+			console.log('断开连接', e);
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.coldContainer {
+	position: absolute;
+	transform-origin: 16px 8px;
+	font-size: 16px;
+	top: 0px;
+	left: 0px;
+	width: 1920px;
+	height: 1080px;
+	background: url(../assets/bg1.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+	.box1 {
+		position: absolute;
+		top: 141px;
+		left: 40px;
+	}
+	.box2 {
+		position: absolute;
+		top: 141px;
+		right: 40px;
+	}
+	.box3 {
+		position: absolute;
+		bottom: 66px;
+		left: 40px;
+	}
+	.box4 {
+		position: absolute;
+		bottom: 66px;
+		right: 40px;
+	}
+}
+</style>

src/views/dashboard/components/Header.vue

@@ -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>

src/views/dashboard/components/baseTable.vue

@@ -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>

src/views/dashboard/deepDashboard/BarChart.vue

@@ -0,0 +1,310 @@
+<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(permission) {
+			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(permission){
+        option.series[1]=[]
+      }
+			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>

src/views/dashboard/deepDashboard/index-model.vue

@@ -0,0 +1,515 @@
+<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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+			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;
+			wx = rw / bw;
+			hx = rh / 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 (!this.permission) {
+					this.topData.yestodaySum = '***';
+					this.topData.monthSum = '***';
+					this.topData.monthAreaCost = '***';
+				}
+			}
+			if ('DeepEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.DeepEnergyTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.elecPrice = null;
+					});
+				}
+			}
+			if ('DeepCostTableList' in dataJson) {
+				this.tableData2 = dataJson.DeepCostTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.priceD = null;
+					});
+				}
+			}
+			if ('DeepPdTables' in dataJson) {
+				this.tableData3 = dataJson.DeepPdTables;
+			}
+			if ('DeepCostTrendList' in dataJson) {
+				this.echartData = dataJson.DeepCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		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>

src/views/dashboard/deepDashboard/index.vue

@@ -0,0 +1,523 @@
+<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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+      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(!this.permission){
+          this.topData.yestodaySum = '***'
+          this.topData.monthSum = '***'
+          this.topData.monthAreaCost = '***'
+        }
+			}
+			if ('DeepEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.DeepEnergyTableList;
+        if(!this.permission){
+          this.tableData1.forEach(item=>{
+            item.elecPrice = null
+          })
+        }
+			}
+			if ('DeepCostTableList' in dataJson) {
+				this.tableData2 = dataJson.DeepCostTableList;
+        if(!this.permission){
+          this.tableData2.forEach(item=>{
+            item.priceD = null
+          })
+        }
+			}
+			if ('DeepPdTables' in dataJson) {
+				this.tableData3 = dataJson.DeepPdTables;
+			}
+			if ('DeepCostTrendList' in dataJson) {
+				this.echartData = dataJson.DeepCostTrendList;
+				this.$nextTick(() => {
+          this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		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>

src/views/dashboard/deepDashboard/interval.vue

@@ -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>

src/views/dashboard/rawDashboard/BarChart.vue

@@ -0,0 +1,311 @@
+<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(permission) {
+
+			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(permission){
+        option.series[1]=[]
+      }
+			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>

src/views/dashboard/rawDashboard/index-model.vue

@@ -0,0 +1,532 @@
+<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">
+								{{ topData.so2 ? 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">
+								{{ topData.fc ? 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">
+								{{ topData.no ? 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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+			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;
+			wx = rw / bw;
+			hx = rh / 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 (!this.permission) {
+					this.topData.monthAreaCost = '***';
+					this.topData.monthMat = '***';
+					this.topData.yestodaySum = '***';
+					this.topData.yestodayMat = '***';
+				}
+			}
+			if ('OriginEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.OriginEnergyTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.elecPrice = null;
+						item.gasPrice = null;
+						item.price = null;
+					});
+				}
+			}
+			if ('OriginCostTableList' in dataJson) {
+				this.tableData2 = dataJson.OriginCostTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.priceO = null;
+					});
+				}
+			}
+			if ('OriginCostTrendList' in dataJson) {
+				this.echartData = dataJson.OriginCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		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>

src/views/dashboard/rawDashboard/index.vue

@@ -0,0 +1,536 @@
+<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">
+								{{ topData.so2 ? 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">
+								{{ topData.fc ? 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">
+								{{ topData.no ? 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';
+import { getUserProfile } from '@/api/system/user';
+
+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: [],
+			permission: false,
+		};
+	},
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+      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(!this.permission){
+          this.topData.monthAreaCost = '***'
+          this.topData.monthMat = '***'
+          this.topData.yestodaySum = '***'
+          this.topData.yestodayMat = '***'
+        }
+			}
+			if ('OriginEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.OriginEnergyTableList;
+        if(!this.permission){
+          this.tableData1.forEach(item=>{
+            item.elecPrice = null
+            item.gasPrice = null
+            item.price = null
+          })
+        }
+			}
+			if ('OriginCostTableList' in dataJson) {
+				this.tableData2 = dataJson.OriginCostTableList;
+        if(!this.permission){
+          this.tableData2.forEach(item=>{
+            item.priceO = null
+          })
+        }
+			}
+			if ('OriginCostTrendList' in dataJson) {
+				this.echartData = dataJson.OriginCostTrendList;
+        this.$nextTick(()=>{
+          this.$refs.chartRef.initChart(!this.permission);
+        })
+			}
+		},
+		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>

src/views/dashboard/utils/index.js

@@ -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);
+}