删除dist

Reviewed-on: #435

.env.dev

@@ -12,8 +12,7 @@ ENV = 'development'
 VUE_APP_TITLE = 智能监控分析系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
+VUE_APP_BASE_API = 'http://172.16.32.79:48080'
-VUE_APP_BASE_API = 'http://172.16.32.79:48082'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -52,6 +52,7 @@
     "crypto-js": "^4.0.0",
     "diagram-js": "^12.3.0",
     "echarts": "5.4.0",
+    "el-tree-transfer": "^2.4.7",
     "element-ui": "2.15.12",
     "file-saver": "^2.0.5",
     "fuse.js": "6.6.2",

src/api/core/base/factory.js

@@ -61,9 +61,9 @@ export function exportFactoryExcel(query) {
 // 获取产线设备状态
 export function getLineEqStatus(data) {
   return request({
-    url: '/base/production-line/getLineEqStatus',
+		url: '/monitoring/equipment-monitor/getLineEqStatus',
-    method: 'post',
+		method: 'post',
-    data: data
+		data: data,
-  })
+	});
 }
 

src/api/core/monitoring/auto.js

@@ -44,25 +44,16 @@ export function getProductAuto(data) {
 // 班组自动报表分页
 export function getTeamReportPage(data) {
   return request({
-		url: '/monitoring/group-off-record/page',
+    url: '/monitoring/team-auto-report/page',
-		method: 'post',
+    method: 'post',
-		data: data,
+    data: data
-	});
+  })
 }
 
 // 班组自动报表分页详细
 export function getTeamReportPageDet(id) {
   return request({
-    url: '/monitoring/group-off-record/get?id=' + id,
+    url: '/monitoring/team-auto-report/pageDet?id=' + id,
     method: 'get',
   })
 }
-
-export function exportGroupProductReportExcel(data) {
-  return request({
-		url: '/monitoring/group-off-record/export-det-excel',
-		method: 'get',
-		params: data,
-		responseType: 'blob',
-	});
-}

src/api/material/issue.js

@@ -1,18 +0,0 @@
-import request from '@/utils/request'
-// 获得工厂分页
-export function getMaterialReceiptIssuePageData(data) {
-	return request({
-		url: '/base/material-warehouse-his/page',
-		method: 'post',
-		data: data,
-	});
-}
-
-
-export function createMaterialIssue(data) {
-	return request({
-		url: '/base/material-warehouse-his/create',
-		method: 'post',
-		data: data,
-	});
-}

src/api/order/index.js

@@ -1,45 +0,0 @@
-import request from '@/utils/request'
-
-export function getOrderPage(data) {
-	return request({
-		url: '/base/core-work-order/page',
-		method: 'post',
-		data: data,
-	});
-}
-
-export function updateOrderData(data) {
-	return request({
-		url: '/base/core-work-order/updatee',
-		method: 'put',
-		data: data,
-	});
-}
-
-export function createOrderData(data) {
-	return request({
-		url: '/base/core-work-order/create',
-		method: 'post',
-		data: data,
-	});
-}
-export function getOrderData(id) {
-  return request({
-		url: '/base/core-work-order/get?id=' + id,
-		method: 'get',
-	});
-}
-export function getOrderCode(data) {
-	return request({
-		url: '/base/core-work-order/getCode',
-		method: 'get',
-		data: data,
-	});
-}
-
-export function deleteOrder(id) {
-  return request({
-    url: '/base/core-work-order/delete?id=' + id,
-    method: 'delete'
-  })
-}

src/assets/icons/svg/dataBoard1.svg

@@ -0,0 +1,20 @@
+<?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="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="现场看板tc—整体产线" transform="translate(-38.175000, -126.808988)">
+            <g id="编组备份" transform="translate(38.175000, 126.808988)">
+                <polygon id="Fill-1" fill="#CAE5DD" opacity="0" points="0 32 32 32 32 0 0 0"></polygon>
+                <path d="M24.1201333,5.07973333 L22.1468,5.07973333 L22.1468,6.3064 L24.1201333,6.3064 C24.7308,6.3064 25.2268,6.8024 25.2268,7.41306667 L25.2268,25.4530667 C25.2268,26.0650667 24.7308,26.5597333 24.1201333,26.5597333 L7.93346667,26.5597333 C7.32146667,26.5597333 6.8268,26.0650667 6.8268,25.4530667 L6.8268,7.41306667 C6.8268,6.8024 7.32146667,6.3064 7.93346667,6.3064 L10.2001333,6.3064 L10.2001333,5.07973333 L7.93346667,5.07973333 C6.64813333,5.08773333 5.6068,6.12773333 5.60013333,7.41306667 L5.60013333,25.4530667 C5.6068,26.7384 6.64813333,27.7797333 7.93346667,27.7864 L24.1334667,27.7864 C25.4188,27.7797333 26.4588,26.7384 26.4668,25.4530667 L26.4668,7.41306667 C26.4588,6.1224 25.4108,5.07973333 24.1201333,5.07973333" id="Fill-3" fill="#6EF9DE"></path>
+                <path d="M7.93333333,5.56026667 C6.90933333,5.56026667 6.08,6.3896 6.08,7.4136 L6.08,25.4536 C6.08,26.4776 6.90933333,27.3069333 7.93333333,27.3069333 L24.1333333,27.3069333 C25.156,27.3069333 25.9866667,26.4776 25.9866667,25.4536 L25.9866667,7.4136 C25.9866667,6.3896 25.156,5.56026667 24.1333333,5.56026667 L22.6,5.56026667 L22.6,5.78693333 L24.0933333,5.78693333 C24.9613333,5.78693333 25.6666667,6.49093333 25.6666667,7.36026667 L25.6666667,25.4002667 C25.6666667,26.2682667 24.9613333,26.9736 24.0933333,26.9736 L7.93333333,26.9736 C7.064,26.9736 6.36,26.2682667 6.36,25.4002667 L6.36,7.4136 C6.33066667,6.54426667 7.01066667,5.81626667 7.87866667,5.78693333 C7.89733333,5.78693333 7.91466667,5.78693333 7.93333333,5.78693333 L9.73333333,5.78693333 L9.73333333,5.50693333 L7.93333333,5.56026667 Z M24.8266667,28.2536 L7.21333333,28.2536 C6.05733333,28.2536 5.12,27.3162667 5.12,26.1602667 L5.12,6.70693333 C5.12,5.55093333 6.05733333,4.6136 7.21333333,4.6136 L10.6666667,4.6136 L10.6666667,6.78693333 L8.81333333,6.78693333 C7.97333333,6.78693333 7.29333333,7.46693333 7.29333333,8.30693333 L7.29333333,24.5602667 C7.29333333,25.3989333 7.97333333,26.0802667 8.81333333,26.0802667 L23.2266667,26.0802667 C24.0666667,26.0802667 24.7466667,25.3989333 24.7466667,24.5602667 L24.7466667,8.30693333 C24.7466667,7.46693333 24.0666667,6.78693333 23.2266667,6.78693333 L21.68,6.78693333 L21.68,4.6136 L24.8266667,4.6136 C25.9826667,4.6136 26.92,5.55093333 26.92,6.70693333 L26.92,26.1602667 C26.92,27.3162667 25.9826667,28.2536 24.8266667,28.2536 L24.8266667,28.2536 Z" id="Fill-5" fill="#6EF9DE"></path>
+                <path d="M11.3468,3.3864 L20.9068,3.3864 C21.7534667,3.3864 22.4401333,4.07306667 22.4401333,4.91973333 L22.4401333,6.1864 C22.4401333,7.03306667 21.7534667,7.71973333 20.9068,7.71973333 L11.3468,7.71973333 C10.5001333,7.71973333 9.81346667,7.03306667 9.81346667,6.1864 L9.81346667,4.91973333 C9.81346667,4.07306667 10.5001333,3.3864 11.3468,3.3864" id="Fill-7" fill="#6EF9DE"></path>
+                <path d="M21.7732,11.3864 C21.7732,12.0530667 21.5065333,12.3864 20.9598667,12.3864 L13.1065333,12.3864 C12.5732,12.3864 12.2932,12.0530667 12.2932,11.3864 C12.2932,10.7197333 12.5732,10.3997333 13.1065333,10.3997333 L20.9598667,10.3997333 C21.5065333,10.3997333 21.7732,10.7330667 21.7732,11.3864" id="Fill-9" fill="#6EF9E1"></path>
+                <path d="M10.2666667,10.4130667 L10.28,10.4130667 C10.824,10.4130667 11.2666667,10.8557333 11.2666667,11.3997333 L11.2666667,11.4130667 C11.2666667,11.9584 10.824,12.3997333 10.28,12.3997333 L10.2666667,12.3997333 C9.72133333,12.3997333 9.28,11.9584 9.28,11.4130667 L9.28,11.3997333 C9.28,10.8557333 9.72133333,10.4130667 10.2666667,10.4130667" id="Fill-11" fill="#6DF8E1"></path>
+                <path d="M21.7732,16.3597333 C21.7732,17.0264 21.3998667,17.3597333 20.6398667,17.3597333 L13.4398667,17.3597333 C12.6798667,17.3597333 12.2932,17.0264 12.2932,16.3597333 C12.2932,15.6930667 12.6798667,15.3597333 13.4398667,15.3597333 L20.6398667,15.3597333 C21.3998667,15.3597333 21.7732,15.6930667 21.7732,16.3597333" id="Fill-13" fill="#6EF9E1"></path>
+                <path d="M10.2666667,15.4130667 L10.28,15.4130667 C10.824,15.4130667 11.2666667,15.8557333 11.2666667,16.3997333 L11.2666667,16.4130667 C11.2666667,16.9584 10.824,17.3997333 10.28,17.3997333 L10.2666667,17.3997333 C9.72133333,17.3997333 9.28,16.9584 9.28,16.4130667 L9.28,16.3997333 C9.28,15.8557333 9.72133333,15.4130667 10.2666667,15.4130667" id="Fill-15" fill="#6DF8E1"></path>
+                <path d="M21.7732,21.3597333 C21.7732,22.0264 21.5065333,22.3597333 20.9598667,22.3597333 L13.1065333,22.3597333 C12.5732,22.3597333 12.2932,22.0264 12.2932,21.3597333 C12.2932,20.6930667 12.5732,20.3597333 13.1065333,20.3597333 L20.9598667,20.3597333 C21.5065333,20.3597333 21.7732,20.6930667 21.7732,21.3597333" id="Fill-17" fill="#6EF9E1"></path>
+                <path d="M10.2666667,20.3864 L10.28,20.3864 C10.824,20.3864 11.2666667,20.8290667 11.2666667,21.3730667 L11.2666667,21.3864 C11.2666667,21.9317333 10.824,22.3730667 10.28,22.3730667 L10.2666667,22.3730667 C9.72133333,22.3730667 9.28,21.9317333 9.28,21.3864 L9.28,21.3730667 C9.28,20.8290667 9.72133333,20.3864 10.2666667,20.3864" id="Fill-19" fill="#6DF8E1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/dataBoard2.svg

@@ -0,0 +1,18 @@
+<?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="100%" y1="81.9999999%" x2="20.318998%" y2="18.0000001%" id="linearGradient-1">
+            <stop stop-color="#4BFFC8" offset="0%"></stop>
+            <stop stop-color="#45F2EC" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="现场看板tc—整体产线" transform="translate(-35.000000, -741.000000)" fill-rule="nonzero">
+            <g id="icon/可视化/柱状图" transform="translate(35.000000, 741.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
+                <path d="M6.07816026,6.07816026 L6.07816026,23.4413798 L28.4022997,23.4413798 L28.4022997,25.9218397 L3.5977003,25.9218397 L3.5977003,6.07816026 L6.07816026,6.07816026 Z M13.5195401,6.07816026 L13.5195401,22.2011498 L8.55862018,22.2011498 L8.55862018,6.07816026 L13.5195401,6.07816026 Z M20.9609199,11.0390801 L20.9609199,22.2011498 L16,22.2011498 L16,11.0390801 L20.9609199,11.0390801 Z M28.4022997,16 L28.4022997,22.2011498 L23.4413798,22.2011498 L23.4413798,16 L28.4022997,16 Z" id="形状" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/dataBoard3.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="27px" height="32px" viewBox="0 0 27 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>产线备份 3</title>
+    <defs>
+        <linearGradient x1="100%" y1="84.4142661%" x2="20.318998%" y2="15.5857339%" id="linearGradient-1">
+            <stop stop-color="#4BFFC8" offset="0%"></stop>
+            <stop stop-color="#45F2EC" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="现场看板tc—整体产线" transform="translate(-456.000000, -740.000000)" fill-rule="nonzero">
+            <g id="产线备份-3" transform="translate(456.000000, 740.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="27" height="32"></rect>
+                <path d="M5.9634842,21.3256682 C5.8209113,21.3358884 5.67787363,21.3358884 5.53530073,21.3256682 L5.53152795,21.3256682 C4.70985419,21.2655042 3.9028068,20.8665317 3.27496659,20.1284294 C1.90834447,18.5219016 1.90834447,15.9172034 3.27496659,14.3106756 C3.5291373,14.011848 3.81269745,13.7686207 4.11471142,13.5809616 L4.11389125,13.5765264 L4.1789034,13.5420735 C4.26583759,13.4907514 4.35456706,13.4437443 4.44485723,13.4011765 L16.0336968,7.2612301 L16.0353372,7.27016472 C18.3137697,6.10911436 21.061777,6.62333696 22.9243013,8.8128968 C25.3585662,11.6745456 25.3585662,16.314119 22.9243013,19.1757678 C21.7290674,20.580881 20.1691859,21.2960361 18.6027704,21.3212973 L18.6035632,21.3256682 L5.9634842,21.3256682 Z M5.625,20 C6.86761875,20 7.875,18.8061 7.875,17.3333333 C7.875,15.8605667 6.86761875,14.6666667 5.625,14.6666667 C4.382325,14.6666667 3.375,15.8605667 3.375,17.3333333 C3.375,18.8061 4.382325,20 5.625,20 Z M18.5625,18.6666667 C20.737088,18.6666667 22.5,16.5773202 22.5,14 C22.5,11.4226798 20.737088,9.33333333 18.5625,9.33333333 C16.3878602,9.33333333 14.625,11.4226798 14.625,14 C14.625,16.5773202 16.3878602,18.6666667 18.5625,18.6666667 Z M4.92857143,22.6666667 L22.5,22.6666667 L22.5,24.8888889 C22.5,25.1343611 22.3081339,25.3333333 22.0714286,25.3333333 L4.5,25.3333333 L4.5,23.1111111 C4.5,22.8656389 4.69186607,22.6666667 4.92857143,22.6666667 Z" id="形状" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/dataBoard4.svg

@@ -0,0 +1,18 @@
+<?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="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>
+    </defs>
+    <g id="秦皇岛/北方压延" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="现场看板tc—整体产线" transform="translate(-1514.000000, -127.000000)" fill-rule="nonzero">
+            <g id="icon/可视化/模块" transform="translate(1514.000000, 127.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="7.10542736e-14" width="32" height="32"></rect>
+                <path d="M25.7527221,14.1816202 L24.188579,14.1816202 L24.188579,9.49373791 C24.1860753,8.90287145 23.7063759,8.4252046 23.1155041,8.42520991 L17.3681876,8.42520991 L17.3681876,6.56551655 C17.370851,5.66122185 17.0084214,4.79412914 16.363022,4.1607133 C15.7176226,3.52729745 14.8438903,3.18118084 13.9398043,3.20079015 C12.066652,3.28658042 10.6006443,4.84522051 10.629641,6.72011209 L10.629641,8.42520991 L4.88232453,8.42520991 C4.29145277,8.4252046 3.81175331,8.90287145 3.80921104,9.49373791 L3.80921104,13.0994515 C3.80682438,13.385621 3.9188086,13.6609038 4.12031265,13.8641155 C4.32181669,14.0673272 4.59614473,14.1816305 4.88232453,14.1816202 L5.48251897,14.1816202 C7.35572581,14.1525356 8.91367406,15.6158797 9.00184091,17.4872366 C9.01900932,18.3913465 8.67055578,19.2641187 8.03543236,19.9078018 C7.40030895,20.5514848 6.53227944,20.9115903 5.62802066,20.9065261 L4.88232453,20.9065261 C4.28968163,20.9065261 3.80921104,21.3869581 3.80921104,21.979601 L3.80921104,27.7269175 C3.80921104,28.3195604 4.28968163,28.8000021 4.88232453,28.8000021 L9.55656609,28.8000021 C9.84153405,28.8012076 10.1151815,28.6885421 10.3166861,28.4870375 C10.5181907,28.2855329 10.6308562,28.0118854 10.629641,27.7269175 L10.629641,27.1949269 C10.6006443,25.3200353 12.066652,23.7613953 13.9398043,23.675605 C14.8438903,23.6559957 15.7176226,24.0021123 16.363022,24.6355281 C17.0084214,25.268944 17.370851,26.1360367 17.3681876,27.0403314 L17.3681876,27.7269175 C17.3669784,28.0110957 17.479021,28.2840495 17.6795401,28.4854219 C17.8800592,28.6867943 18.1525348,28.8000021 18.4367156,28.8000021 L23.1155041,28.8000021 C23.708147,28.8000021 24.188579,28.3195604 24.188579,27.7269175 L24.188579,20.9065261 L25.9027707,20.9065261 C26.8070472,20.910389 27.6746078,20.5491212 28.3088772,19.9045802 C28.9431467,19.2600392 29.290432,18.3867874 29.272044,17.4826896 C29.1815049,15.6131286 27.6242468,14.1524446 25.7527221,14.1816202 Z" id="路径" fill="url(#linearGradient-1)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/fullScreenView.svg

@@ -0,0 +1,11 @@
+<?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">
+    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
+            <g id="编组-54" transform="translate(1866.000000, 36.000000)">
+                <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
+                <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/unFullScreenView.svg

@@ -0,0 +1,9 @@
+<?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">
+    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-54备份">
+            <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
+            <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
+        </g>
+    </g>
+</svg>

src/components/ButtonNav/index.vue

@@ -1,16 +1,30 @@
+<!--
+    filename: index.vue
+    author: liubin
+    date: 2024-04-02 09:49:36
+    description:
+-->
+
 <template>
   <!-- 按钮切换 -->
   <div v-if="buttonMode" class="button-nav">
-    <button v-for="m in menus" :key="m" @click="handleClick(m)"
+    <button
+      v-for="m in menus"
+      :key="m"
+      @click="currentMenu = m"
       :data-text="m"
       :class="[m === currentMenu ? 'active' : '']"
-      ></button>
+    ></button>
   </div>
   <!-- 标签切换 -->
   <div v-else class="custom-tabs" style="height: 100%; width: 100%">
-    <el-tabs class="tag-nav" v-model="currentMenu" style="height: 100%" @tab-click="handleTabClick">
+    <el-tabs class="tag-nav" v-model="currentMenu" style="height: 100%">
-      <el-tab-pane v-for="(m, idx) in menus" :key="m" :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
+      <el-tab-pane
-        :name="m">
+        v-for="(m, idx) in menus"
+        :key="m"
+        :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
+        :name="m"
+      >
         <slot :name="`tab${idx + 1}`"></slot>
       </el-tab-pane>
     </el-tabs>
@@ -25,17 +39,14 @@ export default {
       type: Array,
       required: true,
       default: () => [],
-      validator: (val) => val.length > 0,
+      validator: (val) => {
+        return val.length > 0;
+      },
     },
     buttonMode: {
       type: Boolean,
       default: true,
     },
-    // 新增：支持外部传入选中值（v-model 绑定）
-    value: {
-      type: String,
-      default: "",
-    },
   },
   data() {
     return {
@@ -43,34 +54,16 @@ export default {
     };
   },
   created() {
-    // 优先使用外部传入的 value，否则默认第一个
+    this.currentMenu = this.menus[0];
-    this.currentMenu = this.value || this.menus[0];
   },
   watch: {
-    // 监听外部 value 变化，同步到内部 currentMenu
-    value(newVal) {
-      this.currentMenu = newVal;
-    },
-    // 监听内部 currentMenu 变化，通知外部
     currentMenu(val) {
-      this.$emit("input", val); // 触发 v-model 同步
+      this.$emit("change", val);
-      this.$emit("change", val); // 保留原 change 事件
-    },
-  },
-  methods: {
-    // 按钮点击事件
-    handleClick(m) {
-      this.currentMenu = m;
-    },
-    // 标签点击事件（el-tabs 自带）
-    handleTabClick(tab) {
-      this.currentMenu = tab.name;
     },
   },
 };
 </script>
 
-<!-- 样式不变 -->
 <style scoped lang="scss">
 .button-nav {
   width: 100%;
@@ -115,24 +108,22 @@ export default {
 </style>
 
 <style scoped>
-.custom-tabs>>>.el-tabs__header {
+.custom-tabs >>> .el-tabs__header {
   margin-bottom: 8px;
   display: inline-block;
   /* transform: translateY(-12px); */
 }
-
+.custom-tabs >>> .el-tabs__item {
-.custom-tabs>>>.el-tabs__item {
   padding-left: 0px !important;
   padding-right: 0px !important;
   line-height: 36px !important;
   height: 36px;
 }
 
-.custom-tabs>>>.el-tabs__content {
+.custom-tabs >>> .el-tabs__content {
   height: calc(100% - 42px);
 }
-
+.custom-tabs >>> .el-tab-pane {
-.custom-tabs>>>.el-tab-pane {
   box-sizing: border-box;
   height: 100%;
   padding: 20px;

src/filter/code-filter.js

@@ -91,4 +91,4 @@ export default function (dictTable) {
   return function (val) {
     return table?.[dictTable]?.[val]
   }
-}
+}

src/main.js

@@ -21,6 +21,7 @@ import {
 	handleTree,
 	addBeginAndEndTime,
 	divide,
+	formatThousands
 } from '@/utils/ruoyi';
 import Pagination from '@/components/Pagination';
 // 自定义表格工具扩展
@@ -45,6 +46,7 @@ Vue.prototype.resetForm = resetForm;
 Vue.prototype.getDictDatas = getDictDatas;
 Vue.prototype.getDictDatas2 = getDictDatas2;
 Vue.prototype.getDictDataLabel = getDictDataLabel;
+Vue.prototype.formatThousands = formatThousands;
 Vue.prototype.DICT_TYPE = DICT_TYPE;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;

src/utils/ruoyi.js

@@ -295,3 +295,15 @@ export function getPath(path) {
   }
   return Math.floor(divisor/dividend*100)/100;
 }
+
+// 通用千分位格式化函数
+export function formatThousands(value) {
+  if (value === null || value === undefined) return '0'
+  
+  // 清理已有逗号并转为数字
+  const numValue = Number(String(value).replace(/,/g, ''))
+  if (isNaN(numValue)) return '0'
+
+  // 支持小数处理
+  return numValue.toLocaleString('en-US')
+}

src/views/base/dataBoard/components/CenterBottomL.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class='centerBottomL'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard3" class='icon'/>
+      <span>本月数据</span>
+    </div>
+    <div class='dataBox' style='top:50px'>
+      <p>
+        <span class='text'>总投入片数</span>
+        <span class='precent' :class='{precentR:monthData?.inputNumChange>=0,precentG:monthData?.inputNumChange<0}'>{{monthData?.inputNumChange || '-'}}%</span>
+        <img v-show='monthData?.inputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
+        <img v-show='monthData?.inputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
+      </p>
+      <p class='num'>{{monthData?.inputNum ? formatThousands(monthData.inputNum) : '-'}}</p>
+    </div>
+    <div class='dataBox'style='top:180px'>
+      <p>
+        <span class='text'>总生产片数</span>
+        <span class='precent' :class='{precentR:monthData?.outputNumChange>=0,precentG:monthData?.outputNumChange<0}'>{{monthData?.outputNumChange || '-'}}%</span>
+        <img v-show='monthData?.outputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
+        <img v-show='monthData?.outputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
+      </p>
+      <p class='num'>{{monthData?.outputNum ? formatThousands(monthData.outputNum) : '-'}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CenterBottomL',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
+        if (item.dataType === "本月") {
+          this.monthData = item
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      monthData:{}
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.centerBottomL {
+  width: 337px;
+  height: 332px;
+  background: url('../../../../assets/images/dataBoard/center-bottom.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  left: 440px;
+  bottom:23px;
+  .title {
+    margin: 7px 0 0 15px;
+    .icon {
+      width: 33px;
+      height: 33px;
+      margin-right: 5px;
+      vertical-align:middle;
+      margin-top: 5px;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+    }
+  }
+  .dataBox {
+    width: 290px;
+    height: 135px;
+    background: url('../../../../assets/images/dataBoard/numberBox.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    padding:22px 0 0 16px;
+    left: 24px;
+    p{
+      margin: 0;
+    }
+    .text {
+      font-weight: 500;
+      font-size: 20px;
+      color: #FFFFFF;
+      letter-spacing: 2px;
+      margin-right: 8px;
+    }
+    .precent {
+      font-size: 18px;
+      margin-right: 5px;
+    }
+    .precentR {
+      color: #FF271D;
+    }
+    .precentG {
+      color: #34F716;
+    }
+    .num {
+      font-weight: 500;
+      font-size: 38px;
+      color: #FFFFFF;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/views/base/dataBoard/components/CenterBottomR.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class='centerBottomR'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard3" class='icon'/>
+      <span>上月数据</span>
+    </div>
+    <div class='dataBox' style='top:50px'>
+      <p>
+        <span class='text'>总投入片数</span>
+      </p>
+      <p class='num'>{{lastMonthData?.inputNum ? formatThousands(lastMonthData.inputNum) : '-'}}</p>
+    </div>
+    <div class='dataBox'style='top:180px'>
+      <p>
+        <span class='text'>总生产片数</span>
+      </p>
+      <p class='num'>{{lastMonthData?.outputNum ? formatThousands(lastMonthData.outputNum) : '-'}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CenterBottomR',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
+        if (item.dataType === "上月") {
+          this.lastMonthData = item
+        } 
+      })
+    }
+  },
+  data() {
+    return {
+      lastMonthData:{}
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.centerBottomR {
+  width: 337px;
+  height: 332px;
+  background: url('../../../../assets/images/dataBoard/center-bottom.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  left: 791px;
+  bottom:23px;
+  .title {
+    margin: 7px 0 0 15px;
+    .icon {
+      width: 33px;
+      height: 33px;
+      margin-right: 5px;
+      vertical-align:middle;
+      margin-top: 5px;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+    }
+  }
+  .dataBox {
+    width: 290px;
+    height: 135px;
+    background: url('../../../../assets/images/dataBoard/numberBox.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    padding:22px 0 0 16px;
+    left: 24px;
+    p{
+      margin: 0;
+    }
+    .text {
+      font-weight: 500;
+      font-size: 20px;
+      color: #FFFFFF;
+      letter-spacing: 2px;
+      margin-right: 8px;
+    }
+    .num {
+      font-weight: 500;
+      font-size: 38px;
+      color: #FFFFFF;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/views/base/dataBoard/components/CenterTop.vue

@@ -0,0 +1,352 @@
+<template>
+  <div ref="centerTopBox" class='centerTopBox'>
+    <div>
+      <video src="/static/videos/01.webm" muted autoplay loop class='videoStyle'></video>
+      <div
+        class='eqTipBox'
+        v-show='showTooltip'
+        :style="'left:'+tooltipStyle.left+'px;top:'+tooltipStyle.top+'px;'"
+      >
+        <p><span class='eqTipTitle'>设备名称:</span><span class='eqTipNum'>{{eqTipMsg.name}}</span></p>
+        <p><span class='eqTipTitle'>进口数量:</span><span class='eqTipNum'>{{eqTipMsg.input}}</span></p>
+        <p><span class='eqTipTitle'>出口数量:</span><span class='eqTipNum'>{{eqTipMsg.output}}</span></p>
+        <p><span class='eqTipTitle'>报警状态:</span>
+          <span class='eqTipNum'>
+            <img v-show='eqTipMsg.alarm' :src='dotY' width='16'/>
+            <img v-show='!eqTipMsg.alarm' :src='dotG' width='16'/>
+            {{eqTipMsg.alarm?'报警':'未报警'}}
+          </span>
+        </p>
+        <p><span class='eqTipTitle'>在线状态:</span>
+          <span class='eqTipNum'>
+            <img v-show='eqTipMsg.status' :src='dotG' width='16'/>
+            <img v-show='!eqTipMsg.status' :src='dotR' width='16'/>
+            {{eqTipMsg.status?'在线':'离线'}}
+          </span>
+        </p>
+      </div>
+      <!-- 设备 -->
+      <div class='eqBox'>
+        <!-- line-从上到下-从右往左 -->
+        <span 
+          v-for='(item,index) in eqList'
+          :key='index'
+          :style="'width:'+item.w+'px;height:'+item.h+'px;left:'+item.l+'px;top:'+item.t+'px'"
+          @mouseenter="handleMouseEnter(item, $event)"
+          @mouseleave="handleMouseLeave"
+        ></span>
+      </div>
+    </div>
+    <div class='centerTopTopBox'>
+      <div style='display: inline-block;'>
+        <img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
+        <p class='num'>{{dataObj?.productRate || '-'}}%</p>
+        <p class='title'>成品率</p>
+      </div>
+      <div style='display: inline-block;'>
+        <img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
+        <p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.todayProduct ? formatThousands(dataObj.todayProduct) : '-'}}</p>
+        <p class='title' style='color:#FFB625'>今日产量</p>
+      </div>
+      <div style='display: inline-block;'>
+        <img src="../../../../assets/images/dataBoard/centerNumY.png" alt="" width='261'>
+        <p class='num' style='width: 260px;padding-left: 20px;'>{{dataObj?.monthProduct ? formatThousands(dataObj.monthProduct) : '-'}}</p>
+        <p class='title' style='color:#FFB625'>本月产量</p>
+      </div>
+      <div style='display: inline-block;'>
+        <img src="../../../../assets/images/dataBoard/centerNumB.png" alt="" width='203'>
+        <p class='num'>{{dataObj?.alarmNum ? formatThousands(dataObj.alarmNum) : '-'}}</p>
+        <p class='title'>设备报警数</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CenterTop',
+  data() {
+    return {
+      showTooltip:false,
+      tooltipStyle: {
+        left: 0,
+        top: 0
+      },
+      dotY:require('../../../../assets/images/dataBoard/dotY.png'),
+      dotR:require('../../../../assets/images/dataBoard/dotR.png'),
+      dotG:require('../../../../assets/images/dataBoard/dotG.png'),
+      eqList:[
+        {name:'A1-磨边机-1',id:100301,w:70,h:18,l:830,t:160},
+        {name:'A1-磨边机-2',id:100302,w:70,h:18,l:830,t:183},
+        {name:'A1-磨边机-3',id:100303,w:70,h:18,l:832,t:206},
+        {name:'A1-磨边后清洗机-1',id:100401,w:30,h:15,l:798,t:160},
+        {name:'A1-磨边后清洗机-2',id:100402,w:30,h:15,l:798,t:183},
+        {name:'A1-磨边后清洗机-3',id:100403,w:30,h:15,l:800,t:206},
+        {name:'A1-打孔机-1',id:100501,w:13,h:12,l:730,t:163},
+        {name:'A1-打孔机-2',id:100502,w:13,h:12,l:730,t:187},
+        {name:'A1-打孔机-3',id:100503,w:13,h:12,l:730,t:210},
+        {name:'A1-打孔后清洗机-1',id:100601,w:32,h:15,l:665,t:160},
+        {name:'A1-打孔后清洗机-2',id:100602,w:32,h:15,l:665,t:183},
+        {name:'A1-打孔后清洗机-3',id:100603,w:32,h:15,l:665,t:206},
+        {name:'A1-丝印机-1',id:100701,w:30,h:12,l:605,t:163},
+        {name:'A1-丝印机-2',id:100702,w:30,h:12,l:605,t:187},
+        {name:'A1-丝印机-3',id:100703,w:30,h:12,l:605,t:210},
+        {name:'A1-丝印后固化机-1',id:101301,w:37,h:12,l:558,t:163},
+        {name:'A1-丝印后固化机-2',id:101302,w:37,h:12,l:558,t:187},
+        {name:'A1-丝印后固化机-3',id:101303,w:37,h:12,l:558,t:210},
+        {name:'A1-钢化炉',id:101401,w:75,h:15,l:382,t:209},
+        {name:'A1-包装清洗机-1',id:101501,w:30,h:15,l:228,t:173},
+        {name:'A1-包装清洗机-2',id:101502,w:30,h:15,l:228,t:206},
+        {name:'A1-铺纸机-1',id:101601,w:18,h:15,l:188,t:175},
+        {name:'A1-铺纸机-2',id:101602,w:18,h:15,l:188,t:206},
+
+        {name:'A2-磨边机-1',id:200301,w:70,h:18,l:832,t:233},
+        {name:'A2-磨边机-2',id:200302,w:70,h:18,l:833,t:257},
+        {name:'A2-磨边机-3',id:200303,w:70,h:18,l:834,t:281},
+        {name:'A2-磨边后清洗机-1',id:200401,w:30,h:15,l:800,t:233},
+        {name:'A2-磨边后清洗机-2',id:200402,w:30,h:15,l:801,t:257},
+        {name:'A2-磨边后清洗机-3',id:200403,w:30,h:15,l:802,t:281},
+        {name:'A2-打孔机-1',id:200501,w:13,h:12,l:731,t:240},
+        {name:'A2-打孔机-2',id:200502,w:13,h:12,l:731,t:262},
+        {name:'A2-打孔机-3',id:200503,w:13,h:12,l:731,t:285},
+        {name:'A2-打孔后清洗机-1',id:200601,w:32,h:15,l:666,t:234},
+        {name:'A2-打孔后清洗机-2',id:200602,w:32,h:15,l:666,t:258},
+        {name:'A2-打孔后清洗机-3',id:200603,w:32,h:15,l:666,t:282},
+        {name:'A2-丝印机-1',id:200701,w:30,h:12,l:605,t:238},
+        {name:'A2-丝印机-2',id:200702,w:30,h:12,l:605,t:262},
+        {name:'A2-丝印机-3',id:200703,w:30,h:12,l:605,t:286},
+        {name:'A2-丝印后固化机-1',id:201301,w:37,h:12,l:558,t:238},
+        {name:'A2-丝印后固化机-2',id:201302,w:37,h:12,l:558,t:262},
+        {name:'A2-丝印后固化机-3',id:201303,w:37,h:12,l:558,t:286},
+        {name:'A2-钢化炉',id:201401,w:75,h:15,l:382,t:238},
+        {name:'A2-包装清洗机-1',id:201501,w:30,h:15,l:228,t:234},
+        {name:'A2-包装清洗机-2',id:201502,w:30,h:15,l:228,t:267},
+        {name:'A2-铺纸机-1',id:201601,w:18,h:15,l:187,t:234},
+        {name:'A2-铺纸机-2',id:201602,w:18,h:15,l:186,t:267},
+
+        {name:'A3-磨边机-1',id:300301,w:70,h:18,l:834,t:318},
+        {name:'A3-磨边机-2',id:300302,w:70,h:18,l:834,t:342},
+        {name:'A3-磨边后清洗机-1',id:300401,w:30,h:15,l:802,t:319},
+        {name:'A3-磨边后清洗机-2',id:300402,w:30,h:15,l:802,t:342},
+        {name:'A3-打孔机-1',id:300501,w:13,h:12,l:731,t:324},
+        {name:'A3-打孔机-2',id:300502,w:13,h:12,l:731,t:348},
+        {name:'A3-打孔后清洗机-1',id:300601,w:32,h:15,l:666,t:320},
+        {name:'A3-打孔后清洗机-2',id:300602,w:32,h:15,l:666,t:342},
+        {name:'A3-丝印机-1',id:300701,w:30,h:12,l:605,t:324},
+        {name:'A3-丝印机-2',id:300702,w:30,h:12,l:605,t:348},
+        {name:'A3-一次镀膜机-1',id:300801,w:20,h:15,l:553,t:322},
+        {name:'A3-一次镀膜机-2',id:300802,w:20,h:15,l:553,t:346},
+        {name:'A3-丝印后固化机-1',id:301301,w:37,h:12,l:506,t:324},
+        {name:'A3-丝印后固化机-2',id:301302,w:37,h:12,l:506,t:347},
+        {name:'A3-钢化炉',id:301401,w:75,h:15,l:340,t:346},
+        {name:'A3-包装清洗机-1',id:301501,w:30,h:15,l:240,t:343},
+        {name:'A3-铺纸机-1',id:301601,w:18,h:15,l:200,t:343},
+        {name:'A3-铺纸机-2',id:301602,w:18,h:15,l:170,t:343},
+
+        {name:'A4-磨边机-1',id:400301,w:70,h:18,l:838,t:380},
+        {name:'A4-磨边机-2',id:400302,w:70,h:18,l:838,t:405},
+        {name:'A4-磨边机-3',id:400303,w:70,h:18,l:839,t:428},
+        {name:'A4-磨边后清洗机-1',id:400401,w:30,h:15,l:804,t:380},
+        {name:'A4-磨边后清洗机-2',id:400402,w:30,h:15,l:805,t:405},
+        {name:'A4-磨边后清洗机-3',id:400403,w:30,h:15,l:806,t:427},
+        {name:'A4-一次镀膜机-1',id:400801,w:20,h:15,l:707,t:381},
+        {name:'A4-一次镀膜机-2',id:400802,w:20,h:15,l:707,t:407},
+        {name:'A4-一次镀膜机-3',id:400803,w:20,h:15,l:707,t:429},
+        {name:'A4-一次固化机-1',id:401001,w:37,h:12,l:660,t:383},
+        {name:'A4-一次固化机-2',id:401002,w:37,h:12,l:660,t:409},
+        {name:'A4-一次固化机-3',id:401003,w:37,h:12,l:660,t:431},
+        {name:'A4-二次镀膜机-1',id:401101,w:20,h:15,l:605,t:382},
+        {name:'A4-二次镀膜机-2',id:401102,w:20,h:15,l:605,t:408},
+        {name:'A4-二次镀膜机-3',id:401103,w:20,h:15,l:605,t:430},
+        {name:'A4-二次固化机-1',id:401201,w:37,h:12,l:557,t:383},
+        {name:'A4-二次固化机-2',id:401202,w:37,h:12,l:557,t:409},
+        {name:'A4-二次固化机-3',id:401203,w:37,h:12,l:557,t:431},
+        {name:'A4-钢化炉',id:401401,w:75,h:15,l:379,t:381},
+        {name:'A4-包装清洗机-1',id:401501,w:30,h:15,l:220,t:379},
+        {name:'A4-包装清洗机-2',id:401502,w:30,h:18,l:220,t:410},
+        {name:'A4-铺纸机-1',id:401601,w:18,h:15,l:180,t:381},
+        {name:'A4-铺纸机-2',id:401602,w:18,h:15,l:180,t:414},
+
+        {name:'A5-磨边机-1',id:500301,w:70,h:18,l:817,t:465},
+        {name:'A5-磨边机-2',id:500302,w:70,h:18,l:817,t:488},
+        {name:'A5-磨边机-3',id:500303,w:70,h:18,l:819,t:512},
+        {name:'A5-磨边后清洗机-1',id:500401,w:30,h:15,l:784,t:462},
+        {name:'A5-磨边后清洗机-2',id:500402,w:30,h:15,l:784,t:488},
+        {name:'A5-磨边后清洗机-3',id:500403,w:30,h:15,l:785,t:512},
+        {name:'A5-一次镀膜机-1',id:500801,w:20,h:15,l:685,t:466},
+        {name:'A5-一次镀膜机-2',id:500802,w:20,h:15,l:685,t:490},
+        {name:'A5-一次镀膜机-3',id:500803,w:20,h:15,l:685,t:513},
+        {name:'A5-一次固化机-1',id:501001,w:37,h:12,l:638,t:468},
+        {name:'A5-一次固化机-2',id:501002,w:37,h:12,l:638,t:491},
+        {name:'A5-一次固化机-3',id:501003,w:37,h:12,l:638,t:514},
+        {name:'A5-二次镀膜机-1',id:501101,w:20,h:15,l:584,t:468},
+        {name:'A5-二次镀膜机-2',id:501102,w:20,h:15,l:584,t:490},
+        {name:'A5-二次镀膜机-3',id:501103,w:20,h:15,l:584,t:513},
+        {name:'A5-二次固化机-1',id:501201,w:37,h:12,l:535,t:468},
+        {name:'A5-二次固化机-2',id:501202,w:37,h:12,l:535,t:492},
+        {name:'A5-二次固化机-3',id:501203,w:37,h:12,l:535,t:514},
+        {name:'A5-钢化炉',id:501401,w:75,h:15,l:344,t:513},
+        {name:'A5-包装清洗机-1',id:501501,w:30,h:18,l:185,t:473},
+        {name:'A5-包装清洗机-2',id:501502,w:30,h:18,l:185,t:511},
+        {name:'A5-铺纸机-1',id:501601,w:18,h:15,l:144,t:475},
+        {name:'A5-铺纸机-2',id:501602,w:18,h:15,l:144,t:511}
+      ],
+      eqTipMsg:{
+        name:'',
+        input:null,
+        output:null,
+        alarm:'未报警',
+        status:'在线'
+      }
+    }
+  },
+  props: {
+    scaleNum: {
+      type: Number,
+      default: 1
+    },
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    scaleNum(val) {
+      this.scaleNum = val
+    },
+    dataObj(val) {
+      val.equipmentDets && val.equipmentDets.forEach(item => {
+        this.eqList.forEach(eq => {
+          if (eq.id == item.id) {
+            eq.name = item.name
+            eq.input = item.input
+            eq.output = item.output
+            eq.alarm = item.isError
+            eq.status = item.isRun
+          }
+        })
+      })
+    }
+  },
+  mounted() {},
+  methods: {
+    // 鼠标hover事件
+    handleMouseEnter(item, event) {
+      this.showTooltip = true;
+      this.eqTipMsg.name = item.name;
+      this.eqTipMsg.input = item.input;
+      this.eqTipMsg.output = item.output;
+      this.eqTipMsg.alarm = item.alarm;
+      this.eqTipMsg.status = item.status;
+      this.updateTooltipPosition(event);
+    },
+    handleMouseLeave() {
+      this.showTooltip = false;
+    },
+    updateTooltipPosition(event) {
+      const rect = this.$refs.centerTopBox.getBoundingClientRect()
+      const offset = 15;
+      const tooltipWidth = 315*this.scaleNum;
+      const tooltipHeight = 170*this.scaleNum;
+      const startX = rect.left;
+      const startY = rect.top;
+      const endX = rect.width;
+      const endY = rect.height;
+      let posX = event.clientX-startX + offset;
+      let posY = event.clientY-startY + offset;
+      if (posX + tooltipWidth > endX) {
+        posX = event.clientX-startX - tooltipWidth - offset;
+      }
+      if (posY + tooltipHeight > endY) {
+        posY = event.clientY -startY - tooltipHeight - offset;
+      }
+      this.tooltipStyle.left = posX/this.scaleNum;
+      this.tooltipStyle.top = posY/this.scaleNum;
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+p{
+  margin: 0;
+}
+.centerTopBox {
+  width: 1041px;
+  height: 600px;
+  background: url('../../../../assets/images/dataBoard/center-top.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  left: 440px;
+  top:113px;
+  overflow: hidden;
+  .videoStyle {
+    width: 1920px;
+    height: 1080px;
+    position: absolute;
+    left:-440px;
+    top:-113px;
+  }
+  .eqTipBox {
+    width: 315px;
+    height: 170px;
+    background: url('../../../../assets/images/dataBoard/eq-tip.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    padding-top: 10px;
+    z-index: 1;
+    span{
+      display: inline-block;
+      font-size: 20px;
+      color: #FFFFFF;
+      letter-spacing: 1px;
+      vertical-align: middle;
+    }
+    .eqTipTitle {
+      width: 112px;
+      height: 30px;
+      padding-left: 15px;
+    }
+    .eqTipNum {
+      width: 190px;
+      height: 30px;
+      line-height: 30px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .eqBox {
+    span{
+      display: inline-block;
+      // border: 1px solid red;
+      position: absolute;
+    }
+  }
+  .centerTopTopBox {
+    padding-left: 48px;
+    position: absolute;
+    top:30px;
+    .num {
+      width: 203px;
+      height: 65px;
+      line-height: 65px;
+      padding-left: 10px;
+      box-sizing: border-box;
+      font-weight: 500;
+      font-size: 38px;
+      color: #FFFFFF;
+      text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
+      text-align: center;
+      position: absolute;
+      top:0px;
+    }
+    .title {
+      font-weight: 500;
+      font-size: 20px;
+      color: #00C8F7;
+      letter-spacing: 2px;
+      text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/base/dataBoard/components/Header.vue

@@ -0,0 +1,108 @@
+<template>
+  <header class="dataBoardHeader">
+    <div class='topTitle'></div>
+    <!-- <div class='time-chsoose'>
+      <span class='title'>时间选择</span>
+      <span class='time-show'>{{time}}</span>
+      <el-date-picker
+        v-model="time"
+        type="date"
+        value-format='yyyy-MM-dd'
+        :clearable='false'
+        style='position: absolute;right: 0px;width: 119px;top:-2px;opacity: 0;'
+      >
+      </el-date-picker>
+    </div> -->
+    <div
+      type="text"
+      class="screen-btn"
+      :title="isFullScreen?'退出全屏':'全屏'"
+      @click="changeFullScreen"
+    >
+      <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+      <svg-icon v-else icon-class="fullScreenView" />
+    </div>
+  </header>
+</template>
+
+<script>
+// import moment from 'moment'
+export default {
+  name: 'DataBoardHeader',
+  props: {
+    isFullScreen: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+  },
+  data() {
+    return {
+      // time: moment().format('YYYY-MM-DD')
+    }
+  },
+  computed: {},
+  methods: {
+    changeFullScreen() {
+      this.$emit('screenfullChange')
+    },
+    exportPDF() {
+      this.$emit('exportPDF')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dataBoardHeader {
+	background: url('../../../../assets/images/dataBoard/head.png') no-repeat;
+	height: 99px;
+	background-size: 100%;
+	background-position: 0 0;
+	position: relative;
+	.topTitle{
+		width: 465px;
+		height: 77px;
+    background: url('../../../../assets/images/dataBoard/data-board-title.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    left: 731px;
+    top:19px;
+  }
+  .time-chsoose {
+    width: 212px;
+		height: 33px;
+    background: url('../../../../assets/images/dataBoard/time-choose.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    right: 63px;
+    top:49px;
+    .title {
+      font-size: 18px;
+      color: #082049;
+      letter-spacing: 1px;
+      position: relative;
+      top: 4px;
+      left: 8px
+    }
+    .time-show {
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 18px;
+      position: relative;
+      top: 4px;
+      left: 28px;
+    }
+  }
+	.screen-btn{
+		color: #00fff0;
+    height: 32px;
+    line-height: 32px;
+		font-size: 32px;
+		position: absolute;
+		right: 22px;
+		top:47px;
+	}
+}
+</style>

src/views/base/dataBoard/components/LeftBottom.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class='leftBottomBox'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard2" class='icon'/>
+      <span>投入产出及良品率</span>
+    </div>
+    <div v-if='xData.length === 0' class='noData'>暂无数据</div>
+    <div v-else>
+      <div class="top_legend">
+        <span class="chart_legend_icon1">投入</span>
+        <span class="chart_legend_icon2">产出</span>
+        <span><span class="chart_legend_icon3"></span>良品率</span>
+      </div>
+      <div id='inOutputChart' style='width: 400px;height: 290px;'></div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'LeftBottom',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      this.xData = []
+      this.inputData = []
+      this.outputData = []
+      this.goodRateData = []
+      val.monthBar && val.monthBar.forEach(item => {
+        this.xData.push(item.dataType)
+        this.inputData.push(item.inputNum)
+        this.outputData.push(item.outputNum)
+        this.goodRateData.push(item.goodRate)
+      })
+      this.initChart();
+    }
+  },
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      xData:[],
+      inputData:[],
+      outputData:[],
+      goodRateData:[],
+    }
+  },
+  mounted() {},
+  methods: {
+    initChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('inOutputChart')
+      this.chart = echarts.init(this.chartDom)
+      var option;
+      option = {
+        grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
+        legend: {
+          show: false,
+        },
+        xAxis: {
+          type: "category",
+          data: this.xData,
+          axisLabel: {
+            color: "#fff",
+            fontSize: 10,
+            interval: 0,
+            rotate:30
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              width: 2,
+              color: "#5982B2",
+            },
+          },
+        },
+        yAxis: [{
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#DFF1FE",
+            fontSize: 12,
+            formatter: "{value}",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: "#5982B2",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              width: 2,
+              color: "#5982B2",
+            },
+          },
+        },{
+          name: "良品率/%",
+          nameTextStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#DFF1FE",
+            fontSize: 12,
+            formatter: "{value}",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: "#5982B2",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              width: 2,
+              color: "#5982B2",
+            },
+          },
+        }],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "qhd-chart-tooltip",
+          show: true,
+        },
+        series: [
+          {
+            data: this.inputData,
+            type: "bar",
+            barWidth: 10,
+            barGap:0,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(157, 234, 245, 1)' },
+                { offset: 1, color: 'rgba(110, 249, 222, 1)' },
+              ]),
+            },
+          },
+          {
+            data:this.outputData,
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(92, 183, 255, 1)' },
+                { offset: 1, color: 'rgba(54, 75, 254, 1)' },
+              ]),
+            },
+          },
+          {
+            data:this.goodRateData,
+            type: "line",
+            yAxisIndex: 1,
+            symbol:'circle',
+            symbolSize: 7,
+            color:'rgba(18, 255, 245, 1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
+                { offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
+                { offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
+              ]),
+            }
+          }
+        ],
+      }
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.leftBottomBox {
+  width: 402px;
+  height: 332px;
+  background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  left: 23px;
+  bottom:23px;
+  .title {
+    margin: 7px 0 0 15px;
+    .icon {
+      width: 32px;
+      height: 32px;
+      margin-right: 5px;
+      vertical-align:middle;
+      margin-top: 5px;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+    }
+  }
+  .top_legend {
+    color: #fff;
+    font-size: 14px;
+    position: absolute;
+    left:120px;
+    top:50px;
+    .chart_legend_icon1{
+      margin-right: 10px;
+    }
+    .chart_legend_icon2{
+      margin-right: 14px;
+    }
+    .chart_legend_icon1:before {
+      display: inline-block;
+      content: "";
+      width: 10px;
+      height: 10px;
+      margin-right: 5px;
+      border-radius: 2px;
+      background: #73F8E0;
+    }
+    .chart_legend_icon2:before {
+      display: inline-block;
+      content: "";
+      width: 10px;
+      height: 10px;
+      margin-right: 5px;
+      border-radius: 2px;
+      background: #497EFF;
+    }
+    .chart_legend_icon3 {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      margin-right: 8px;
+      border-radius: 4px;
+      background: #73F8E0;
+      position:relative;
+    }
+    .chart_legend_icon3:before {
+      display: inline-block;
+      content: "";
+      width: 16px;
+      height:2px;
+      background: #73F8E0;
+      position:absolute;
+      top:3px;
+      left:-4px;
+    }
+  }
+}
+.noData  {
+  font-size: 24px;
+  text-align: center;
+  padding-top: 100px;
+}
+</style>
+<style>
+.qhd-chart-tooltip {
+  background: #0a2b4f77 !important;
+  border: none !important;
+  backdrop-filter: blur(12px);
+}
+.qhd-chart-tooltip * {
+  color: #fff !important;
+}
+</style>

src/views/base/dataBoard/components/LeftTop.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class='leftTopBox'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard1" class='icon'/>
+      <span>近期数据对比</span>
+    </div>
+    <div class='title-split'>
+      <img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
+      <span class='text'>本日</span>
+      <img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
+    </div>
+    <div class='data-box'>
+      <div class='left-icon' style="top:19px;">
+        <img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'>
+        <div>总投入</div>
+      </div>
+      <div class='left-icon' style="top:139px;">
+        <img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'>
+        <div>总生产</div>
+      </div>
+      <div class='right-data' style="top:15px;">
+        <p><span class='num'>{{todayData?.inputNum ? formatThousands(todayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
+        <p><span class='num'>{{todayData?.inputArea ? formatThousands(todayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
+      </div>
+      <div class='right-data' style="top:132px;">
+        <p><span class='num'>{{todayData?.outputNum ? formatThousands(todayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
+        <p><span class='num'>{{todayData?.outputArea ? formatThousands(todayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
+      </div>
+    </div>
+    <div class='title-split'>
+      <img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
+      <span class='text'>昨日</span>
+      <img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
+    </div>
+    <div class='data-box'>
+      <div class='left-icon' style="top:19px;">
+        <img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'>
+        <div>总投入</div>
+      </div>
+      <div class='left-icon' style="top:139px;">
+        <img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'>
+        <div>总生产</div>
+      </div>
+      <div class='right-data' style="top:15px;">
+        <p><span class='num'>{{yesterdayData?.inputNum ? formatThousands(yesterdayData.inputNum) : '-'}}</span><span class='text'>片数</span></p>
+        <p><span class='num'>{{yesterdayData?.inputArea ? formatThousands(yesterdayData.inputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
+      </div>
+      <div class='right-data' style="top:132px;">
+        <p><span class='num'>{{yesterdayData?.outputNum ? formatThousands(yesterdayData.outputNum) : '-'}}</span><span class='text'>片数</span></p>
+        <p><span class='num'>{{yesterdayData?.outputArea ? formatThousands(yesterdayData.outputArea) : '-'}}</span><span class='text'>面积/㎡</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LeftTop',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      val.todayAndYesterday && val.todayAndYesterday.forEach(item => {
+        if (item.dataType === "今日") {
+          this.todayData = item
+        } else {
+          this.yesterdayData = item
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      todayData:{},
+      yesterdayData:{}
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+.leftTopBox {
+  width: 402px;
+  height: 600px;
+  background: url('../../../../assets/images/dataBoard/left-top.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  left: 23px;
+  top:113px;
+  .title {
+    margin: 10px 0 0 15px;
+    .icon {
+      width: 33px;
+      height: 33px;
+      margin-right: 5px;
+      vertical-align:middle;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+    }
+  }
+  .title-split {
+    margin-left: 95px;
+    margin-top: 10px;
+    .text{
+      display: inline-block;
+      width: 100px;
+      font-size: 22px;
+      color: #01CFCC;
+      line-height: 24px;
+      letter-spacing: 7px;
+      text-align: center;
+    }
+  }
+  .data-box {
+    width: 358px;
+    height: 230px;
+    background: url('../../../../assets/images/dataBoard/leftTopDataBox.png') no-repeat;
+    background-size: 100%;
+    margin-top: 8px;
+    position: relative;
+    left: 24px;
+    .left-icon {
+      font-weight: 500;
+      font-size: 16px;
+      color: #9DEAF5;
+      line-height: 22px;
+      letter-spacing: 1px;
+      text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
+      position: absolute;
+      left: 30px;
+    }
+    .right-data {
+      position: absolute;
+      left: 100px;
+      p{
+        margin: 0;
+      };
+      .num {
+        font-weight: 500;
+        font-size: 32px;
+        color: #FFFFFF;
+        text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
+        margin-right: 5px;
+      }
+      .text {
+        font-weight: 500;
+        font-size: 16px;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+        text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
+      }
+    }
+  }
+}
+</style>

src/views/base/dataBoard/components/RightBottom.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class='rightBottomBox'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard3" class='icon'/>
+      <span>本月<span class='dotted'></span>班组生产排名</span>
+    </div>
+    <div class='rankingLeft'>
+      <div class='rankingLeftTitle'>产量</div>
+      <div class='rankingTypeBox'>
+        <div style='margin-bottom: 10px;' v-for='(item,index) in teamProductionRank' :key='index'>
+        <img :src="require(`../../../../assets/images/dataBoard/ranking${index+1}.png`)" alt="" width="50">
+          <div class='rankingTextBox'>
+            <p class='text1'>{{item.name}}/片</p>
+            <p class='text2'>{{item?.value ? formatThousands(item.value) : '-'}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='rankingRight'>
+      <div class='rankingRightTitle'>
+        成品率
+      </div>
+      <div class='rankingTypeBox' style='left: 120px;'>
+        <div style='margin-bottom: 10px;' v-for='(item,index) in teamRateRank' :key='index'>
+          <img :src="require(`../../../../assets/images/dataBoard/ranking${index+1}.png`)" alt="" width="50">
+          <div class='rankingTextBox'>
+            <p class='text1'>{{item.name}}</p>
+            <p class='text2'>{{Math.trunc(item.value)}}<span style='font-size: 20px;'>.{{item.value1}}%</span></p>
+          </div>
+        </div>
+        <!-- <div>
+          <img src="../../../../assets//images//dataBoard/ranking2.png" alt="" width='50'>
+          <div class='rankingTextBox'>
+            <p class='text1'>班组1</p>
+            <p class='text2'>94<span style='font-size: 20px;'>.13%</span></p>
+          </div>
+        </div>
+        <div>
+          <img src="../../../../assets//images//dataBoard/ranking3.png" alt="" width='50'>
+          <div class='rankingTextBox'>
+            <p class='text1'>班组1</p>
+            <p class='text2'>90<span style='font-size: 20px;'>.42%</span></p>
+          </div>
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'RightBottom',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      this.teamProductionRank = []
+      this.teamRateRank = []
+      val.teamProductionRank && val.teamProductionRank.forEach(item => {
+        let obj = {
+          name: item.name,
+          value: item.value,
+          rank: item.rank,
+        }
+        this.teamProductionRank.push(obj)
+      })
+      val.teamRateRank && val.teamRateRank.forEach(item => {
+        let obj = {
+          name: item.name,
+          value: item.value,
+          rank: item.rank,
+          value1: this.getPositiveDecimal(item.value)
+        }
+        this.teamRateRank.push(obj)
+      })
+    }
+  },
+  data() {
+    return {
+      teamProductionRank:[],
+      teamRateRank:[]
+    }
+  },
+  mounted() {},
+  methods: {
+    getPositiveDecimal(num) {  
+      const str = Math.abs(num).toString();  
+      const [, decimal] = str.split('.');
+      return decimal || '00';
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+p{
+  margin: 0;
+}
+.rightBottomBox {
+  width: 755px;
+  height: 332px;
+  background: url('../../../../assets/images/dataBoard/right-bottom.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  right: 23px;
+  bottom:23px;
+  .title {
+    margin: 10px 0 0 15px;
+    .icon {
+      width: 33px;
+      height: 33px;
+      margin-right: 5px;
+      vertical-align:middle;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+      .dotted {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        border-radius: 2px;
+        background-color: #52FFF1;
+        margin: 0 8px;
+      }
+    }
+  }
+  .rankingLeft {
+    width: 405px;
+    height: 265px;
+    background: url('../../../../assets/images/dataBoard/rankingBg1.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    left: 12px;
+    top: 48px;
+    .rankingLeftTitle {
+      width: 24px;
+      height: 73px;
+      font-weight: 500;
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 55px;
+      position: relative;
+      left: 37px;
+      top: 63px;
+    }
+  }
+  .rankingRight {
+    width: 338px;
+    height: 265px;
+    background: url('../../../../assets/images/dataBoard/rankingBg2.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    right: 12px;
+    top: 48px;
+    .rankingRightTitle {
+      width: 24px;
+      height: 132px;
+      font-weight: 500;
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 55px;
+      position: relative;
+      left: 37px;
+      top: 43px;
+    }
+  }
+  .rankingTypeBox {
+      position: absolute;
+      left: 100px;
+      top:13px;
+      .rankingTextBox {
+        display: inline-block;
+        margin-left: 16px;
+        vertical-align: top;
+        .text1 {
+          font-weight: 500;
+          font-size: 17px;
+          color: #FFFFFF;
+          line-height: 22px;
+          letter-spacing: 1px;
+          padding-top: 5px;
+        }
+        .text2 {
+          font-weight: 500;
+          font-size: 32px;
+          color: #FFFFFF;
+          line-height: 22px;
+          margin-top: 8px;
+        }
+      }
+    }
+}
+</style>

src/views/base/dataBoard/components/RightTop.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class='rightTopBox'>
+    <div class='title'>
+      <svg-icon icon-class="dataBoard4" class='icon'/>
+      <span>缺陷情况</span>
+    </div>
+    <div class='title-split'>
+      <img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
+      <span class='text'>总数</span>
+      <img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
+    </div>
+    <div class='dataBox'>
+      <div class='row'>
+        <div class='box' style='width: 105px;'>
+          <p class='name'>
+            <span style='margin-right: 3px;'>当日</span>
+            <img v-show='nokSumDet.today >= nokSumDet.yesterday' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
+            <img v-show='nokSumDet.today < nokSumDet.yesterday' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
+          </p>
+          <p class='num'>{{nokSumDet?.today ? formatThousands(nokSumDet.today) : '-'}}</p>
+        </div>
+        <div class='box' style='width: 115px;'>
+          <p class='name'>
+            <span style='margin-right: 3px;'>本月</span>
+            <img v-show='nokSumDet.month >= nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
+            <img v-show='nokSumDet.month < nokSumDet.lastMonth' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
+          </p>
+          <p class='num'>{{nokSumDet?.month ? formatThousands(nokSumDet.month) : '-'}}</p>
+        </div>
+        <div class='box' style='width: 110px;'>
+          <p class='name'>
+            <span style='margin-right: 3px;'>本年</span>
+            <img v-show='nokSumDet.year >= nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
+            <img v-show='nokSumDet.year < nokSumDet.lastYear' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
+          </p>
+          <p class='num'>{{nokSumDet?.year ? formatThousands(nokSumDet.year) : '-'}}</p>
+        </div>
+      </div>
+      <div class='row' style='padding-top: 5px;'>
+        <div class='box' style='width: 105px;'>
+          <p class='name'>
+            <span>昨日</span>
+          </p>
+          <p class='num'>{{nokSumDet?.yesterday ? formatThousands(nokSumDet.yesterday) : '-'}}</p>
+        </div>
+        <div class='box' style='width: 115px;'>
+          <p class='name'>
+            <span>上月</span>
+          </p>
+          <p class='num'>{{nokSumDet?.lastMonth ? formatThousands(nokSumDet.lastMonth) : '-'}}</p>
+        </div>
+        <div class='box' style='width: 110px;'>
+          <p class='name'>
+            <span>上年</span>
+          </p>
+          <p class='num'>{{nokSumDet?.lastYear ? formatThousands(nokSumDet.lastYear) : '-'}}</p>
+        </div>
+      </div>
+    </div>
+    <div class='title-split2'>
+      <img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
+      <span class='text'>全厂缺陷汇总</span>
+      <img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
+    </div>
+    <div id='defectSumChart' style='width: 400px;height: 315px;'></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+const colors = [
+  "rgb(39, 96, 255)",
+  "rgb(91, 155, 255)",
+  "rgb(153, 214, 108)",
+  "rgb(18, 255, 245)",
+  "rgb(221, 177, 18)",
+];
+export default {
+  name: 'RightTop',
+  props: {
+    dataObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    dataObj(val) {
+      this.nokSumDet = val.nokSumDet
+      this.dataProps = []
+      val.nokPieDet && val.nokPieDet.forEach(item => {
+        let obj = {
+          value: item.num,
+          name: item.type
+        }
+        this.dataProps.push(obj)
+      })
+      this.initChart()
+    }
+  },
+  data() {
+    return {
+      nokSumDet:{},
+      chartDom: '',
+      chart: '',
+      dataProps:[],
+      rangArrValue:[],
+      dataList:[],
+      totalValue:0
+    }
+  },
+  mounted() {},
+  methods: {
+    initChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('defectSumChart')
+      this.chart = echarts.init(this.chartDom)
+      var option;
+      this.getPersonnelList(this.dataProps)
+      option = {
+        color: colors,
+        graphic: [
+          {
+            type: "text",
+            left: "center",
+            top: "44%",
+            style: {
+              text: this.totalValue,
+              fill: "#fff",
+              width: 150,
+              height: 44,
+              fontSize: 31,
+              fontWeight: 400,
+            },
+          },
+          {
+            type: "text",
+            left: "center",
+            top: "55%",
+            style: {
+              text: "总数/件",
+              fill: "rgba(255, 255, 255, 0.70)",
+              width: 32,
+              height: 16,
+              fontSize: 16,
+              fontWeight: 400,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "产线缺陷分类",
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["50%", "50%"],
+            label:{
+              formatter:function(params){
+                return `{color${params.dataIndex}|${params.percent}%}\n{style2|${params.name}}`
+              },
+              rich:{
+                color0:{color:'rgb(39, 96, 255)',fontSize:22},
+                color1:{color:'rgb(91, 155, 255)',fontSize:22},
+                color2:{color:'rgb(153, 214, 108)',fontSize:22},
+                color3:{color:'rgb(18, 255, 245)',fontSize:22},
+                color4:{color:'rgb(221, 177, 18)',fontSize:22},
+                color5:{color:'rgb(39, 96, 255)',fontSize:22},
+                color6:{color:'rgb(91, 155, 255)',fontSize:22},
+                color7:{color:'rgb(153, 214, 108)',fontSize:22},
+                color8:{color:'rgb(18, 255, 245)',fontSize:22},
+                color9:{color:'rgb(221, 177, 18)',fontSize:22},
+                style2:{
+                  color:'#fff',
+                  fontSize:14
+                }
+              }
+            },
+            data: this.dataList,
+          },
+        ],
+      }
+      option && this.chart.setOption(option);
+    },
+    getCoordinates(startArc, endArc) {
+      const posi = [
+        Math.sin(startArc),
+        -Math.cos(startArc),
+        Math.sin(endArc),
+        -Math.cos(endArc),
+      ];
+      const dx = posi[2] - posi[0];
+      const dy = posi[3] - posi[1];
+
+      return this.getLocation(dx, dy);
+    },
+    getLocation(dx,dy) {
+      const tanV = dx / dy;
+      const directSign = Math.abs(tanV) < 1;
+      const t = directSign ? tanV : 1 / tanV;
+
+      const sign1 = t > 0 ? 1 : -1;
+      const sign2 = dx > 0 ? 1 : -1;
+      const sign = directSign ? sign1 * sign2 : sign2;
+
+      const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2];
+      const group2 = sign > 0 ? [0, 1] : [1, 0];
+      const group = [...group1, ...group2];
+      const keys = directSign ? ["x", "x2", "y", "y2"] : ["y", "y2", "x", "x2"];
+
+      let res = {};
+      keys.forEach((k, idx) => {
+        res[k] = group[idx];
+      });
+      return res;
+    },
+    async getPersonnelList(dataProps){
+      this.rangArrValue = [];
+      this.totalValue = 0;
+      this.dataList = [];
+      this.totalValue = dataProps.reduce(
+        (total, value) => total + value.value,
+        0
+      );
+      let cacheNum = 0;
+      for (let i = 0; i < dataProps.length; i++) {
+        const endNum = cacheNum + dataProps[i].value;
+        this.rangArrValue.push([cacheNum, endNum]);
+        cacheNum = endNum;
+      }
+      const angleArr = this.rangArrValue.map((arr) =>
+        arr.map((num) => (num / this.totalValue) * Math.PI * 2)
+      );
+      this.dataList = dataProps.map((item, index) => {
+        const range = this.getCoordinates(angleArr[index][0], angleArr[index][1]);
+        const startColor = colors[index%5];
+        const color = {
+          type: "linear",
+          x: range.x,
+          x2: range.x2,
+          y: range.y,
+          y2: range.y2,
+          colorStops: [
+            {
+              offset: 0,
+              color: startColor, // 起始颜色
+            },
+            {
+              offset: 1,
+              color: `${startColor.substring(0, startColor.length - 1)}, 0.2)`, // 终点颜色
+            },
+          ],
+          global: false,
+        };
+
+        return {
+          name: item.name,
+          value: item.value,
+          itemStyle: {
+            color: color,
+          },
+        };
+      });
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+p{
+  margin: 0;
+}
+.rightTopBox {
+  width: 402px;
+  height: 600px;
+  background: url('../../../../assets/images/dataBoard/left-top.png') no-repeat;
+  background-size: 100%;
+  position: absolute;
+  right: 23px;
+  top:113px;
+  .title {
+    margin: 10px 0 0 15px;
+    .icon {
+      width: 33px;
+      height: 33px;
+      margin-right: 5px;
+      vertical-align:middle;
+    }
+    span {
+      font-size: 24px;
+      color: #52FFF1;
+      line-height: 24px;
+      vertical-align:middle;
+    }
+  }
+  .title-split {
+    margin-left: 95px;
+    margin-top: 10px;
+    .text{
+      display: inline-block;
+      width: 100px;
+      font-size: 22px;
+      color: #01CFCC;
+      line-height: 24px;
+      letter-spacing: 7px;
+      text-align: center;
+    }
+  }
+  .title-split2 {
+    margin-left: 66px;
+    margin-top: 20px;
+    .text{
+      display: inline-block;
+      width: 160px;
+      font-size: 22px;
+      color: #01CFCC;
+      line-height: 24px;
+      letter-spacing: 2px;
+      text-align: center;
+    }
+  }
+  .dataBox {
+    width: 358px;
+    height: 160px;
+    background: url('../../../../assets/images/dataBoard/defectNum.png') no-repeat;
+    background-size: 100%;
+    position: relative;
+    left: 21px;
+    top:8px;
+    padding-left: 24px;
+    .row {
+      .box{
+        display: inline-block;
+        padding-top: 10px;
+        .name {
+          font-weight: 500;
+          font-size: 20px;
+          color: #FFFFFF;
+          letter-spacing: 2px;
+        }
+        .num {
+          font-weight: 500;
+          font-size: 28px;
+          color: #FFFFFF;
+          text-shadow: 0px 5px 2px rgba(0,0,0,0.62);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/base/dataBoard/index.vue

@@ -1,100 +1,234 @@
-<!-- 
-    filename: index.vue
-    author: liubin
-    date: 2023-10-11 09:32:04
-    description: 设备看板
--->
-
 <template>
-	<div ref="dataBoard" class="data-board">
+	<div ref='dataBoardBoxB' class='dataBoardBoxB'>
-		<el-button type="text" @click="goback" class="go-back--btn">返回</el-button>
+		<div id="dataBoardBox" class='dataBoardBox' style="width: 1920px;height: 1080px;" :style="{ transform: 'scale(' + scaleNum + ')' }">
+			<DataBoardHeader
+				:is-full-screen="isFullScreen"
+				@screenfullChange="screenfullChange"
+			/>
+			<LeftTop :dataObj='dataObj'/>
+			<LeftBottom :dataObj='dataObj'/>
+			<CenterTop :scaleNum='scaleNum' :dataObj='dataObj'/>
+			<CenterBottomL :dataObj='dataObj'/>
+			<CenterBottomR :dataObj='dataObj'/>
+			<RightTop :dataObj='dataObj'/>
+			<RightBottom :dataObj='dataObj'/>
+		</div>
 	</div>
 </template>
 
 <script>
+import DataBoardHeader from './components/Header.vue';
+import LeftTop from './components/LeftTop.vue';
+import LeftBottom from './components/LeftBottom.vue';
+import CenterTop from './components/CenterTop.vue';
+import CenterBottomL from './components/CenterBottomL.vue';
+import CenterBottomR from './components/CenterBottomR.vue';
+import RightTop from './components/RightTop.vue';
+import RightBottom from './components/RightBottom.vue';
+import { debounce } from '@/utils/debounce';
+import screenfull from 'screenfull';
+import { getAccessToken } from '@/utils/auth';
+import store from "@/store";
 export default {
 	name: 'DataBoard',
-	components: {},
+	components: { DataBoardHeader,LeftTop,LeftBottom,CenterTop,CenterBottomL,CenterBottomR,RightTop,RightBottom },
 	props: {},
 	data() {
 		return {
-			appMain: null, // dom
+			isFullScreen: false,
-			parentStyle: {
+			scaleNum: 0.8,
-				margin: '8px 14px 0px 16px',
+			dataObj:{},
-				minHeight: 'calc(100vh - 120px - 8px)',
+			sseReader: null,        // 保存流读取器
-			}, // object
+      abortController: null,  // 用于中止 fetch 请求
-			mainFooter: null, // dom
+      retryCount: 0,          // 当前重试次数
+      isDestroyed: false      // 标记组件是否已销毁
 		};
 	},
-	// mounted() {
+	created() {
-	// 	this.$nextTick(() => {
+    this.init()
-	// 		this.modify();
+  },
-	// 	});
+	mounted() {
-	// },
+	  this.boxReset = debounce(() => {
-	// activated() {
+      this.resetSize()
-	// 	this.modify();
+    }, 300)
-	// },
+    this.boxReset()
-	// deactivated() {
+    window.addEventListener('resize', () => {
-	// 	this.recover();
+      this.boxReset()
-	// },
+    })
-	// beforeDestroy() {
+		this.getData()
-	// 	this.recover();
+	},
-	// },
+	beforeDestroy() {
-	methods: {
+    this.closeSSE();
-		// modify() {
+  },
-		// 	// 在这个页面临时修改下父类的margin，结束时需还原
+	computed: {
-		// 	this.appMain = document.querySelector('.app-main');
+		sidebarOpened() {
-		// 	// this.appMain.style.minHeight = 'calc(100vh - 90px)';
+			return this.$store.state.app.sidebar.opened
-		// 	this.appMain.style.margin = 0;
-		// 	// 在这个页面临时删除 main-footer 元素，结束时需还原
-		// 	// this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
-		// 	// document.querySelector('.main-footer').remove();
-        //     this.$refs.dataBoard.classList.add('data-board');
-		// },
-		// recover() {
-        //     this.$refs.dataBoard.classList.remove('data-board');
-		// 	this.$nextTick(() => {
-		// 		this.appMain.style.margin = this.parentStyle.margin;
-		// 		// this.appMain.style.minHeight = this.parentStyle.minHeight;
-		// 		// this.appMain.insertAdjacentElement('afterend', this.mainFooter);
-		// 	});
-		// },
-		goback() {
-			this.$router.go(-1);
 		}
 	},
+	watch: {
+		sidebarOpened(newVal, oldVal) {
+			this.boxReset()
+		}
+	},
+	methods: {
+		async getData() {
+			let _this = this;
+			if (_this.isDestroyed) return;
+			const url = process.env.VUE_APP_BASE_API+'/admin-api/monitoring/message/subscribe/'+store.getters.userId+'-'+Date.now();
+			const token = getAccessToken()
+			const headers = new Headers({
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'text/event-stream'
+      });
+			try {
+        // 创建中止控制器
+        this.abortController = new AbortController();
+        // 发起 fetch 请求（替换为你的接口地址）
+        const response = await fetch(url, {
+          method: 'GET',
+          headers: headers,
+          signal: _this.abortController.signal // 绑定中止信号
+        });
+
+        // 获取流读取器
+        _this.sseReader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        // 持续读取流数据
+        while (true) {
+          const { done, value } = await _this.sseReader.read();
+          if (done) {
+            console.log('SSE 连接正常关闭');
+            _this.handleReconnect(); // 触发重连
+            break;
+          }
+          // 处理 SSE 事件数据
+          const data = decoder.decode(value);
+          console.log('收到消息:', data);
+					if (_this.isValidData(data)){
+						_this.upDateMsg(data);
+					}
+        }
+      } catch (error) {
+        // 主动中止的请求不报错
+        if (error.name === 'AbortError') return;
+        console.error('SSE 连接异常:', error);
+        _this.handleReconnect(); // 触发重连
+      }
+		},
+		closeSSE() {
+      this.isDestroyed = true; // 标记销毁
+      if (this.abortController) {
+        this.abortController.abort(); // 中止 fetch 请求
+      }
+      if (this.sseReader) {
+        this.sseReader.cancel();      // 关闭流读取器
+        this.sseReader = null;
+      }
+      console.log('SSE 连接已强制关闭');
+    },
+		handleReconnect() {
+      if (this.isDestroyed) return;
+      // 指数退避策略（最大重试 5 次）
+      const maxRetries = 5;
+      if (this.retryCount < maxRetries) {
+        const delay = Math.pow(2, this.retryCount) * 1000;
+        setTimeout(() => {
+          this.retryCount++;
+          this.initSSE();
+        }, delay);
+      } else {
+        console.error('SSE 重连次数已达上限');
+      }
+    },
+		isValidData (data) {
+		  return data.trim().startsWith('data:{') && !data.includes('heartbeat');
+		},
+		upDateMsg(data) {
+			const jsonStr = data.replace(/^data:/, '').trim();
+			try {
+				const dataObj = JSON.parse(jsonStr);
+				this.dataObj = dataObj
+				console.log('dataObj',this.dataObj)
+			} catch (e) {
+				console.error('JSON 解析失败:', e);
+			}
+		},
+		change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+		init() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.on('change', this.change)
+    },
+    destroy() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      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.dataBoardBoxB)
+    },
+		resetSize() {
+      const dataBoardBox = document.getElementById('dataBoardBox')
+      const rw = parseFloat(window.innerWidth)
+			const rh = parseFloat(window.innerHeight)
+      const bw = parseFloat(dataBoardBox.style.width)
+      const bh = parseFloat(dataBoardBox.style.height)
+      let wx = 0
+			let hy = 0
+      if (screenfull.isFullscreen) {
+        wx = rw / bw
+				hy = rh / bh
+      } else {
+        if (this.$store.state.app.sidebar.opened) {
+          wx = (rw - 283) / bw
+        } else {
+          wx = (rw - 88) / bw
+        }
+				hy = (rh - 150) / bh
+      }
+      this.scaleNum = wx < hy ? wx : hy
+    },
+	},
 };
 </script>
 
 <style scoped lang="scss">
-.data-board {
+	.dataBoardBoxB {
-	position: absolute;
+		width: 100%;
-	top: 0;
+		height: calc(100vh - 150px);
-	left: 0;
+		position: relative;
-	width: 100%;
+		overflow: auto;
-	height: 100%;
+		.dataBoardBox {
-	background: url('../../../assets/images/DataBoard.png') 100% 100% / contain
+			position: absolute;
-		no-repeat;
+			transform-origin: 16px 8px;
-}
+			font-size: 16px;
-
+			top: 0px;
-.go-back--btn {
+			left: 0px;
-	position: fixed;
+			background: url('../../../assets/images/dataBoard/background.png') no-repeat;
-	top: 28px;
+			background-size: cover;
-	left: 24px;
+			background-position: 0 0;
-	color: #fff;
+			overflow: auto;
-	font-size: 18px;
+		}		
-	letter-spacing: 6px;
-
-	&:hover {
-		text-decoration: underline;
 	}
-
-	&::after {
-		content: "\2BAA";
-		position: absolute;
-		top: 6px;
-		right: -26px;
-		font-size: 24px;
-	}
-}
 </style>

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

@@ -1,47 +1,61 @@
 <template>
-  <div>
+	<div>
-    <div style="background: #f2f4f9; height: 40px; width: 100%">
+		<div style="background: #f2f4f9; height: 40px; width: 100%">
-      <ButtonNav :menus="['当前', '历史']" @change="currentMenu" v-model="activeName">
+			<ButtonNav :menus="['当前', '历史']" @change="currentMenu">
-        <!-- <template v-slot:tab1>
+				<template v-slot:tab1>
-          <div>当前</div>
+					<div>当前</div>
-        </template>
+				</template>
-        <template v-slot:tab2>
+				<template v-slot:tab2>
-          <div>历史</div>
+					<div>历史</div>
-        </template> -->
+				</template>
-      </ButtonNav>
+			</ButtonNav>
-    </div>
+		</div>
-    <div class="app-container energyOverlimitLog">
+		<div class="app-container energyOverlimitLog">
-      <div v-if="activeName === '历史' && routeType !== 'order'">
+			<div v-show="activeName === 'his'">
-        <!-- 搜索工作栏 -->
+				<!-- 搜索工作栏 -->
-        <search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
+				<search-bar
-          @headBtnClick="buttonClick" />
+					:formConfigs="formConfig"
-      </div>
+					ref="searchBarForm"
-      <h2 v-else>
+					@select-changed="handleSearchBarChanged"
-        订单名称:{{ name }}
+					@headBtnClick="buttonClick" />
-        订单编码:{{ code }}
+			</div>
-        <el-button    v-hasPermi="['base:core-work-order:export']" type="primary" @click="handleExport">导出</el-button>
+			<div v-show="activeName === 'now'"></div>
-      </h2>
+			<!-- 列表 -->
-      <div v-show="activeName === '当前'"></div>
+			<div v-if="activeName === 'his'">
-      <!-- 列表 -->
+				<base-table-s
-      <div v-if="activeName === '历史'">
+					:page="1"
-        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData"
+					:limit="100"
-          :max-height="tableH / 2"></base-table-s>
+					:table-props="tableProps"
-        <div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
+					:table-data="tableData"
-          <barChart style="margin-top: 50px" ref="barChart" height="600px" :bar-data="tableData" />
+					:max-height="tableH / 2"></base-table-s>
-        </div>
+				<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
-      </div>
+					<barChart
-      <div v-if="activeName === '当前'">
+						style="margin-top: 50px"
-        <span class="blue-block"></span>
+						ref="barChart"
-        <span class="tip">当班数据</span>
+						height="600px"
-        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData2"
+						:bar-data="tableData" />
-          :max-height="tableH / 2" />
+				</div>
-        <span class="blue-block"></span>
+			</div>
-        <span class="tip">当天数据</span>
+			<div v-if="activeName === 'now'">
-        <base-table-s :page="1" :limit="100" :table-props="tableProps" :table-data="tableData3"
+				<span class="blue-block"></span>
-          :max-height="tableH / 2" />
+				<span class="tip">当班数据</span>
-      </div>
+				<base-table-s
-    </div>
+					:page="1"
-  </div>
+					:limit="100"
+					:table-props="tableProps"
+					:table-data="tableData2"
+					:max-height="tableH / 2" />
+				<span class="blue-block"></span>
+				<span class="tip">当天数据</span>
+				<base-table-s
+					:page="1"
+					:limit="100"
+					:table-props="tableProps"
+					:table-data="tableData3"
+					:max-height="tableH / 2" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -266,10 +280,7 @@ export default {
 		return {
 			urlOptions: {
 				getDataListURL: getPdlAutoReportNewSearch,
-      },
+			},
-      routeType: 'line',
-      code: '',
-      name:'',
 			formConfig: [
 				{
 					type: 'select',
@@ -283,8 +294,7 @@ export default {
 					label: '产线',
 					selectOptions: [],
 					param: 'lineId',
-          multiple: true,
+					multiple: true,
-          defaultSelect:[]
 				},
 				{
 					type: 'datePicker',
@@ -295,8 +305,7 @@ export default {
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
-          param: 'timeVal',
+					param: 'timeVal',
-          defaultSelect:[],
 					width: 350,
 				},
 				{
@@ -309,8 +318,8 @@ export default {
 					type: 'separate',
 				},
 				{
-          type: this.$auth.hasPermi('|base:core-work-order:export') ? 'button' : '',
+					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
-					// type: 'button',
+					type: 'button',
 					btnName: '导出',
 					name: 'export',
 					color: 'warning',
@@ -319,7 +328,7 @@ export default {
 			listQuery: {
 				lineId: [],
 			},
-      activeName: '当前',
+			activeName: 'now',
 			tableProps,
 			tableData: [],
 			tableData2: [],
@@ -331,32 +340,10 @@ export default {
 		baseTableS,
 		barChart,
 	},
-	mounted() {
+	created() {
-    this.getPdLineList()
+		this.getPdLineList();
-    this.$nextTick(() => {
+	},
-      const tab = this.$route.query.tab; // 获取路由参数
+	methods: {
-      console.log(this.$route.query);
-      this.routeType = this.$route.query.buttonType === 'order' ? 'order' : 'line'
-      this.code = this.$route.query.code
-      this.name = this.$route.query.name
-
-      if (tab === 'his') {
-        // 路由参数为 his 时，切换到“历史”标签
-        this.activeName = '历史'; // 注意：这里直接传标签名（'历史'），不是'his'
-        this.formConfig[1].defaultSelect = this.$route.query.lineId
-        this.formConfig[2].defaultSelect[0] = this.$route.query.startProduceTime
-        this.formConfig[2].defaultSelect[1] = this.$route.query.finishProduceTime
-        // this.buttonClick()
-        this.listQuery.lineId = this.$route.query.lineId
-      } else {
-        this.activeName = '当前'; // 默认“当前”标签
-      }
-    })
-
-
-  // ... 其他方法 ...
-  },
-  methods: {
 		getPdLineList() {
 			getPdList().then((res) => {
 				this.formConfig[1].selectOptions = res.data || [];
@@ -376,7 +363,7 @@ export default {
 					this.listQuery.lineId = val.lineId || [];
 					this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
 					this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
-					if (this.activeName === '历史') {
+					if (this.activeName === 'his') {
 						this.getDataList();
 					} else {
 						this.getDataList2();
@@ -388,19 +375,13 @@ export default {
 				default:
 					console.log(val);
 			}
-    },
+		},
-    currentMenu(val) {
+		currentMenu(val) {
-      this.activeName = val; // 同步标签名到 activeName
+			this.activeName = val === '历史' ? 'his' : 'now';
-      let actualName = val === '历史' ? 'his' : 'now'; // 转换为内部状态
+			if (this.activeName === 'his') {
-
+				this.$refs.searchBarForm.resetForm();
-    // 后续逻辑不变（根据 activeName 加载对应数据）
+				this.listQuery.factoryId = undefined;
-      if (actualName === 'his') {
+				this.listQuery.lineId = [];
-				// this.$refs.searchBarForm.resetForm();
-        this.listQuery.factoryId = undefined;
-        if (!this.$route.query.lineId) {
-          this.listQuery.lineId = [];
-
-        }
 				// 获取当前时间
 				const now = new Date();
 				// 获取前一天的同一时间
@@ -423,98 +404,39 @@ export default {
 				this.getDataList2();
 			}
 		},
-
+		// 获取数据列表
-    getDataList() {
+		getDataList() {
-      if (this.listQuery.startTime) {
+			if (this.listQuery.startTime) {
-        this.dataListLoading = true;
+				this.dataListLoading = true;
-
+				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
-        // 判断是否为order类型且lineId有值
+					this.tableData = response.data.map((item, index) => {
-        if (this.routeType === 'order' && this.listQuery.lineId?.length) {
+						item.originalLossNum = item.original?.lossNum;
-          // 存储所有接口请求的Promise
+						item.originalLossArea = item.original?.lossArea;
-          const requests = this.listQuery.lineId.map(lineId => {
+						item.edgeLossNum = item.edge?.lossNum;
-            // 复制原有查询参数，替换当前lineId
+						item.edgeLossArea = item.edge?.lossArea;
-            const params = { ...this.listQuery, lineId: [lineId] };
+						item.drillLossNum = item.drill?.lossNum;
-            return this.urlOptions.getDataListURL(params);
+						item.drillLossArea = item.drill?.lossArea;
-          });
+						item.coatingLossNum = item.coating?.lossNum;
-
+						item.coatingLossArea = item.coating?.lossArea;
-          // 并行执行所有请求
+						item.silkLossNum = item.silk?.lossNum;
-          Promise.all(requests)
+						item.silkLossArea = item.silk?.lossArea;
-            .then(responses => {
+						item.temperingLossNum = item.tempering?.lossNum;
-              // 合并所有接口返回的数据
+						item.temperingLossArea = item.tempering?.lossArea;
-              this.tableData = responses.flatMap(response => {
+						item.packingLossNum = item.packing?.lossNum;
-                return response.data.map(item => {
+						item.packingLossArea = item.packing?.lossArea;
-                  // 处理嵌套属性
+						return item;
-                  item.originalLossNum = item.original?.lossNum;
+					});
-                  item.originalLossArea = item.original?.lossArea;
+					this.$nextTick(() => {
-                  item.edgeLossNum = item.edge?.lossNum;
+            if(this.tableData.length>0){
-                  item.edgeLossArea = item.edge?.lossArea;
+              this.$refs.barChart.initChart();
-                  item.drillLossNum = item.drill?.lossNum;
+            }
-                  item.drillLossArea = item.drill?.lossArea;
+					});
-                  item.coatingLossNum = item.coating?.lossNum;
+					this.dataListLoading = false;
-                  item.coatingLossArea = item.coating?.lossArea;
+				});
-                  item.silkLossNum = item.silk?.lossNum;
+			} else {
-                  item.silkLossArea = item.silk?.lossArea;
+				this.$message.warning('请选择时间范围');
-                  item.temperingLossNum = item.tempering?.lossNum;
+			}
-                  item.temperingLossArea = item.tempering?.lossArea;
+		},
-                  item.packingLossNum = item.packing?.lossNum;
-                  item.packingLossArea = item.packing?.lossArea;
-                  return item;
-                });
-              });
-
-              this.$nextTick(() => {
-                if (this.tableData.length > 0) {
-                  this.$refs.barChart.initChart();
-                }
-              });
-            })
-            .catch(error => {
-              console.error('接口请求失败:', error);
-              this.$message.error('数据加载失败，请重试');
-            })
-            .finally(() => {
-              this.dataListLoading = false;
-            });
-        } else {
-          // 非order类型或无lineId时，正常单次请求
-          this.urlOptions.getDataListURL(this.listQuery)
-            .then(response => {
-              this.tableData = response.data.map((item, index) => {
-                item.originalLossNum = item.original?.lossNum;
-                item.originalLossArea = item.original?.lossArea;
-                item.edgeLossNum = item.edge?.lossNum;
-                item.edgeLossArea = item.edge?.lossArea;
-                item.drillLossNum = item.drill?.lossNum;
-                item.drillLossArea = item.drill?.lossArea;
-                item.coatingLossNum = item.coating?.lossNum;
-                item.coatingLossArea = item.coating?.lossArea;
-                item.silkLossNum = item.silk?.lossNum;
-                item.silkLossArea = item.silk?.lossArea;
-                item.temperingLossNum = item.tempering?.lossNum;
-                item.temperingLossArea = item.tempering?.lossArea;
-                item.packingLossNum = item.packing?.lossNum;
-                item.packingLossArea = item.packing?.lossArea;
-                return item;
-              });
-
-              this.$nextTick(() => {
-                if (this.tableData.length > 0) {
-                  this.$refs.barChart.initChart();
-                }
-              });
-            })
-            .catch(error => {
-              console.error('接口请求失败:', error);
-              this.$message.error('数据加载失败，请重试');
-            })
-            .finally(() => {
-              this.dataListLoading = false;
-            });
-        }
-      } else {
-        this.$message.warning('请选择时间范围');
-      }
-    },
 		// 获取数据2列表
 		getDataList2() {
 			getPdlAutoReportNewSearchNow().then((response) => {

src/views/group/base/groupReport/gr-detail.vue

@@ -6,224 +6,208 @@
  * @Description:
 -->
 <template>
-  <div>
+	<div>
-    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+		<search-bar
-    <el-table id="detail" :data="tableData" :header-cell-style="{
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
+		<el-table
+			id="detail"
+			:data="tableData"
+			:header-cell-style="{
 				background: '#F2F4F9',
 				color: '#606266',
-			}" border  v-loading="dataListLoading" style="width: 100%" ref="dataList">
+			}"
-      <el-table-column prop="lineName" label="产线" align="center" />
+			border
-      <!-- <el-table-column prop="sizes" width="105" showOverflowtooltip align="center" label="规格" /> -->
+			:span-method="arraySpanMethod"
-      <!-- <el-table-column prop="process" label="产品工艺" align="center" /> -->
+			v-loading="dataListLoading"
-      <el-table-column prop="inputN" label="磨边" align="center">
+			style="width: 100%"
-        <el-table-column prop="edgeNum" label="投入数量/片" />
+			ref="dataList">
-        <el-table-column prop="edgeTime" label="数据上报时间">
+			<el-table-column prop="lineName" label="产线" align="center" />
-          <template v-slot="scope">
+			<el-table-column
-            <span>
+				prop="sizes"
-              {{
+				width="105"
-              scope.row.reportType === 0
+				showOverflowtooltip
-              ? parseTime(scope.row.edgeTime)
+        align="center"
-              : '-'
+				label="规格" />
-              }}
+			<el-table-column prop="process" label="产品工艺" align="center" />
-            </span>
+			<el-table-column prop="inputN" label="投入" align="center">
-          </template>
+				<el-table-column prop="inputNum" label="投入数量/片" />
-        </el-table-column>
+				<el-table-column prop="inputArea" label="投入面积/m²">
-      </el-table-column>
+					<template v-slot="scope">
-      <el-table-column prop="outputN" label="打孔/丝印" align="center">
+						<span>
-        <el-table-column prop="drillCoating" label="投入数量">
+							{{
-          <template v-slot="scope">
+								scope.row.inputArea != null
-            <span>
+									? scope.row.inputArea.toFixed(2)
-              {{
+									: '-'
-              (scope.row.drillNum ?? '-')
+							}}
-              + '/'
+						</span>
-              + (scope.row.coatingNum ?? '-')
+					</template>
-              }}
+				</el-table-column>
-            </span>
+			</el-table-column>
-          </template>
+			<el-table-column prop="outputN" label="产出" align="center">
-        </el-table-column>
+				<el-table-column prop="outputNum" label="产出数量/片" />
-        <el-table-column prop="coatingTime" label="数据上报时间">
+				<el-table-column prop="outputArea" label="产出面积/m²">
-          <template v-slot="scope">
+					<template v-slot="scope">
-            <span>
+						<span>
-              {{
+							{{
-  scope.row.reportType === 0
+								scope.row.outputArea != null
-              ? parseTime(scope.row.coatingTime)
+									? scope.row.outputArea.toFixed(2)
-              : '-'
+									: '-'
-              }}
+							}}
-            </span>
+						</span>
-          </template>
+					</template>
-        </el-table-column>
+				</el-table-column>
-      </el-table-column>
+			</el-table-column>
-      <el-table-column prop="lossN" label="镀膜" align="center">
+			<el-table-column prop="lossN" label="不良" align="center">
-        <el-table-column prop="silkNum" label="投入数量" />
+				<el-table-column prop="lossNum" label="不良数量/片" />
-        <el-table-column prop="silkTime" label="数据上报时间">
+				<el-table-column prop="lossArea" label="不良面积/m²">
-          <template v-slot="scope">
+					<template v-slot="scope">
-            <span>
+						<span>
-              {{
+							{{
-  scope.row.reportType === 0
+								scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
-              ? parseTime(scope.row.silkTime)
+							}}
-              : '-'
+						</span>
-              }}
+					</template>
-            </span>
+				</el-table-column>
-          </template>
+			</el-table-column>
-        </el-table-column>
+			<el-table-column prop="lossRatio" label="不良率/%">
-      </el-table-column>
+				<template v-slot="scope">
-      <el-table-column prop="lossN" label="钢化" align="center">
+					<span>
-        <el-table-column prop="temperingNum" label="投入数量" />
+						{{
-        <el-table-column prop="temperingTime" label="数据上报时间">
+							scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
-          <template v-slot="scope">
+						}}
-            <span>
+					</span>
-              {{
+				</template>
-  scope.row.reportType === 0
+			</el-table-column>
-              ? parseTime(scope.row.temperingTime)
+			<el-table-column prop="outputRatio" label="投入产出率/%">
-              : '-'
+				<template v-slot="scope">
-              }}
+					<span>
-            </span>
+						{{
-          </template>
+							scope.row.outputRatio != null
-        </el-table-column>
+								? scope.row.outputRatio.toFixed(2)
-      </el-table-column>
+								: '-'
-      <el-table-column prop="lossN" label="包装" align="center">
+						}}
-        <el-table-column prop="packingNum" label="投入数量" />
+					</span>
-        <el-table-column prop="packingTime" label="数据上报时间">
+				</template>
-          <template v-slot="scope">
+			</el-table-column>
-            <span>
+			<el-table-column prop="processingRatio" label="加工成品率/%">
-              {{
+				<template v-slot="scope">
-  scope.row.reportType === 0
+					<span>
-              ? parseTime(scope.row.packingTime)
+						{{
-              : '-'
+							scope.row.processingRatio != null
-              }}
+								? scope.row.processingRatio.toFixed(2)
-            </span>
+								: '-'
-          </template>
+						}}
-        </el-table-column>
+					</span>
-      </el-table-column>
+				</template>
-      <!-- <el-table-column prop="lossRatio" label="不良率/%">
+			</el-table-column>
-        <template v-slot="scope">
+			<el-table-column prop="lossD" label="不良详情" align="center">
-          <span>
+				<el-table-column prop="original" label="原片" align="center">
-            {{
+					<el-table-column prop="originalLossNum" label="原片不良/片" />
-            scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
+					<el-table-column prop="originalLossArea" label="原片不良/m²">
-            }}
+						<template v-slot="scope">
-          </span>
+							<span>
-        </template>
+								{{
-      </el-table-column>
+									scope.row.originalLossArea != null
-      <el-table-column prop="outputRatio" label="投入产出率/%">
+										? scope.row.originalLossArea.toFixed(2)
-        <template v-slot="scope">
+										: '-'
-          <span>
+								}}
-            {{
+							</span>
-            scope.row.outputRatio != null
+						</template>
-            ? scope.row.outputRatio.toFixed(2)
+					</el-table-column>
-            : '-'
+				</el-table-column>
-            }}
+				<el-table-column prop="edge" label="磨边" align="center">
-          </span>
+					<el-table-column prop="edgeLossNum" label="磨边不良/片" />
-        </template>
+					<el-table-column prop="edgeLossArea" label="磨边不良/m²">
-      </el-table-column>
+						<template v-slot="scope">
-      <el-table-column prop="processingRatio" label="加工成品率/%">
+							<span>
-        <template v-slot="scope">
+								{{
-          <span>
+									scope.row.edgeLossArea != null
-            {{
+										? scope.row.edgeLossArea.toFixed(2)
-            scope.row.processingRatio != null
+										: '-'
-            ? scope.row.processingRatio.toFixed(2)
+								}}
-            : '-'
+							</span>
-            }}
+						</template>
-          </span>
+					</el-table-column>
-        </template>
+				</el-table-column>
-      </el-table-column>
+				<el-table-column prop="drill" label="打孔" align="center">
-      <el-table-column prop="lossD" label="不良详情" align="center">
+					<el-table-column prop="drillLossNum" label="打孔不良/片" />
-        <el-table-column prop="original" label="原片" align="center">
+					<el-table-column prop="drillLossArea" label="打孔不良/m²">
-          <el-table-column prop="originalLossNum" label="原片不良/片" />
+						<template v-slot="scope">
-          <el-table-column prop="originalLossArea" label="原片不良/m²">
+							<span>
-            <template v-slot="scope">
+								{{
-              <span>
+									scope.row.drillLossArea != null
-                {{
+										? scope.row.drillLossArea.toFixed(2)
-                scope.row.originalLossArea != null
+										: '-'
-                ? scope.row.originalLossArea.toFixed(2)
+								}}
-                : '-'
+							</span>
-                }}
+						</template>
-              </span>
+					</el-table-column>
-            </template>
+				</el-table-column>
-          </el-table-column>
+				<el-table-column prop="coating" label="镀膜" align="center">
-        </el-table-column>
+					<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
-        <el-table-column prop="edge" label="磨边" align="center">
+					<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
-          <el-table-column prop="edgeLossNum" label="磨边不良/片" />
+						<template v-slot="scope">
-          <el-table-column prop="edgeLossArea" label="磨边不良/m²">
+							<span>
-            <template v-slot="scope">
+								{{
-              <span>
+									scope.row.coatingLossArea != null
-                {{
+										? scope.row.coatingLossArea.toFixed(2)
-                scope.row.edgeLossArea != null
+										: '-'
-                ? scope.row.edgeLossArea.toFixed(2)
+								}}
-                : '-'
+							</span>
-                }}
+						</template>
-              </span>
+					</el-table-column>
-            </template>
+				</el-table-column>
-          </el-table-column>
+				<el-table-column prop="silk" label="丝印" align="center">
-        </el-table-column>
+					<el-table-column prop="silkLossNum" label="丝印不良/片" />
-        <el-table-column prop="drill" label="打孔" align="center">
+					<el-table-column prop="silkLossArea" label="丝印不良/m²">
-          <el-table-column prop="drillLossNum" label="打孔不良/片" />
+						<template v-slot="scope">
-          <el-table-column prop="drillLossArea" label="打孔不良/m²">
+							<span>
-            <template v-slot="scope">
+								{{
-              <span>
+									scope.row.silkLossArea != null
-                {{
+										? scope.row.silkLossArea.toFixed(2)
-                scope.row.drillLossArea != null
+										: '-'
-                ? scope.row.drillLossArea.toFixed(2)
+								}}
-                : '-'
+							</span>
-                }}
+						</template>
-              </span>
+					</el-table-column>
-            </template>
+				</el-table-column>
-          </el-table-column>
+				<el-table-column prop="tempering" label="钢化" align="center">
-        </el-table-column>
+					<el-table-column prop="temperingLossNum" label="钢化不良/片" />
-        <el-table-column prop="coating" label="镀膜" align="center">
+					<el-table-column prop="temperingLossArea" label="钢化不良/m²">
-          <el-table-column prop="coatingLossNum" label="镀膜不良/片" />
+						<template v-slot="scope">
-          <el-table-column prop="coatingLossArea" label="镀膜不良/m²">
+							<span>
-            <template v-slot="scope">
+								{{
-              <span>
+									scope.row.temperingLossArea != null
-                {{
+										? scope.row.temperingLossArea.toFixed(2)
-                scope.row.coatingLossArea != null
+										: '-'
-                ? scope.row.coatingLossArea.toFixed(2)
+								}}
-                : '-'
+							</span>
-                }}
+						</template>
-              </span>
+					</el-table-column>
-            </template>
+				</el-table-column>
-          </el-table-column>
+				<el-table-column prop="packing" label="包装" align="center">
-        </el-table-column>
+					<el-table-column prop="packingLossNum" label="包装不良/片" />
-        <el-table-column prop="silk" label="丝印" align="center">
+					<el-table-column prop="packingLossArea" label="包装不良/m²">
-          <el-table-column prop="silkLossNum" label="丝印不良/片" />
+						<template v-slot="scope">
-          <el-table-column prop="silkLossArea" label="丝印不良/m²">
+							<span>
-            <template v-slot="scope">
+								{{
-              <span>
+									scope.row.packingLossArea != null
-                {{
+										? scope.row.packingLossArea.toFixed(2)
-                scope.row.silkLossArea != null
+										: '-'
-                ? scope.row.silkLossArea.toFixed(2)
+								}}
-                : '-'
+							</span>
-                }}
+						</template>
-              </span>
+					</el-table-column>
-            </template>
+				</el-table-column>
-          </el-table-column>
+			</el-table-column>
-        </el-table-column>
+		</el-table>
-        <el-table-column prop="tempering" label="钢化" align="center">
+	</div>
-          <el-table-column prop="temperingLossNum" label="钢化不良/片" />
-          <el-table-column prop="temperingLossArea" label="钢化不良/m²">
-            <template v-slot="scope">
-              <span>
-                {{
-                scope.row.temperingLossArea != null
-                ? scope.row.temperingLossArea.toFixed(2)
-                : '-'
-                }}
-              </span>
-            </template>
-          </el-table-column>
-        </el-table-column> -->
-      <el-table-column prop="down" label="下片" align="center">
-        <el-table-column prop="downNum" label="成品数量" />
-        <el-table-column prop="scrapNum" label="废片数量" />
-        <el-table-column prop="inputOutputRate" label="投入产出率" />
-        <el-table-column prop="yieldRate" label="加工成品率" />
-      </el-table-column>
-      </el-table-column>
-    </el-table>
-  </div>
 </template>
 
 <script>
-import { getTeamReportPageDet, exportGroupProductReportExcel } from '@/api/core/monitoring/auto';
+import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
 import * as XLSX from 'xlsx';
 import FileSaver from 'file-saver';
 
@@ -231,8 +215,7 @@ export default {
 	components: {},
 	data() {
 		return {
-      tableData: [],
+			tableData: [],
-      id:null,
 			dataListLoading: false,
 			formConfig: [
 				{
@@ -250,8 +233,7 @@ export default {
 	mounted() {},
 	methods: {
 		// 获取数据列表
-    init(id) {
+		init(id) {
-      this.id = id
 			this.dataListLoading = true;
 			getTeamReportPageDet(id).then((response) => {
 				this.tableData = response.data?.map((item, index) => {
@@ -277,17 +259,17 @@ export default {
 				this.dataListLoading = false;
 			});
 		},
-		// arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-		// 	if (row.isSummaryReport) {
+			if (row.isSummaryReport) {
-		// 		if (columnIndex === 0) {
+				if (columnIndex === 0) {
-		// 			return [1, 3];
+					return [1, 3];
-		// 		} else if (columnIndex === 1) {
+				} else if (columnIndex === 1) {
-		// 			return [0, 0];
+					return [0, 0];
-		// 		} else if (columnIndex === 2) {
+				} else if (columnIndex === 2) {
-		// 			return [0, 0];
+					return [0, 0];
-		// 		}
+				}
-		// 	}
+			}
-		// },
+		},
 
 		buttonClick(val) {
 			switch (val.btnName) {
@@ -298,33 +280,27 @@ export default {
 					console.log(val);
 			}
 		},
-    handleExport() {
+		handleExport() {
-      this.$modal.confirm('是否确认导出').then(() => {
+			let tables = document.querySelector('#detail').cloneNode(true);
-          return exportGroupProductReportExcel({id:this.id});
+			let exportTable = XLSX.utils.table_to_book(tables);
-        }).then(response => {
-          console.log(response)
-          this.$download.excel(response, '班组生产报表-详情.xls');
-        }).catch(() => {})
-			// let tables = document.querySelector('#detail').cloneNode(true);
-			// let exportTable = XLSX.utils.table_to_book(tables);
 
-			// var exportTableOut = XLSX.write(exportTable, {
+			var exportTableOut = XLSX.write(exportTable, {
-			// 	bookType: 'xlsx',
+				bookType: 'xlsx',
-			// 	bookSST: true,
+				bookSST: true,
-			// 	type: 'array',
+				type: 'array',
-			// });
+			});
-			// // sheetjs.xlsx为导出表格的标题名称
+			// sheetjs.xlsx为导出表格的标题名称
-			// try {
+			try {
-			// 	FileSaver.saveAs(
+				FileSaver.saveAs(
-			// 		new Blob([exportTableOut], {
+					new Blob([exportTableOut], {
-			// 			type: 'application/octet-stream',
+						type: 'application/octet-stream',
-			// 		}),
+					}),
-			// 		'班组生产报表-详情.xlsx'
+					'班组生产报表-详情.xlsx'
-			// 	);
+				);
-			// } catch (e) {
+			} catch (e) {
-			// 	if (typeof console !== 'undefined') console.log(e, exportTableOut);
+				if (typeof console !== 'undefined') console.log(e, exportTableOut);
-			// }
+			}
-			// return exportTableOut;
+			return exportTableOut;
 		},
 	},
 };

src/views/group/base/groupReport/index.vue

@@ -74,7 +74,7 @@ const tableProps = [
     fixed: true
 	},
 	{
-    prop: 'reportDate',
+		prop: 'reportName',
 		label: '日期',
 		width: 180,
     fixed: true
@@ -89,241 +89,211 @@ const tableProps = [
 		label: '班组',
     fixed: true
 	},
-  {
+
-    prop: 'edgeNum',
-    label: '磨边',
-    fixed: true
-  }, {
-    prop: 'drillOrCoating',
-    label: '打孔/丝印',
-    fixed: true
-  }, {
-    prop: 'silkNum',
-    label: '镀膜',
-    fixed: true
-  }, {
-    prop: 'temperingNum',
-    label: '钢化',
-    fixed: true
-  }, {
-    prop: 'packingNum',
-    label: '包装',
-    fixed: true
-  },
 	{
 		prop: 'inputN',
-		label: '下片',
+		label: '投入',
 		align: 'center',
 		children: [
 			{
-        prop: 'downNum',
+				prop: 'inputNum',
-				label: '成品数量',
+				label: '投入数量/片',
         width:100
 			},
 			{
-        prop: 'scrapNum',
+				prop: 'inputArea',
-				label: '废片数量',
+				label: '投入面积/m²',
         width:100
-      },
+			},
-      {
+		],
-        prop: 'inputOutputRate',
+	},
-        label: '投入产出率',
+	{
-        width: 100
+		prop: 'outputN',
-      },
+		label: '产出',
-      {
+		align: 'center',
-        prop: 'yieldRate',
+		children: [
-        label: '加工成品率',
+			{
-        width: 100
+				prop: 'outputNum',
-      },
+				label: '产出数量/片',
+        width:100
+			},
+			{
+				prop: 'outputArea',
+				label: '产出面积/㎡',
+				filter: (val) => (val != null ? val.toFixed(2) : '-'),
+        width:100
+			},
+		],
+	},
+	{
+		prop: 'lossN',
+		label: '不良',
+		align: 'center',
+		children: [
+			{
+				prop: 'lossNum',
+				label: '不良数量/片',
+        width:100
+			},
+			{
+				prop: 'lossArea',
+				label: '不良面积/㎡',
+				filter: (val) => (val != null ? val.toFixed(2) : '-'),
+        width:100
+			},
+		],
+	},
+	{
+		prop: 'lossRatio',
+		label: '不良率/%',
+		filter: (val) => (val != null ? val.toFixed(2) : '-'),
+    width:100
+	},
+	{
+		prop: 'outputRatio',
+		label: '投入产出率/%',
+		filter: (val) => (val != null ? val.toFixed(2) : '-'),
+    width:110
+	},
+	{
+		prop: 'processingRatio',
+		label: '加工成品率/%',
+		filter: (val) => (val != null ? val.toFixed(2) : '-'),
+    width:110
+	},
+	{
+		prop: 'lossD',
+		label: '不良详情',
+		align: 'center',
+		children: [
+			{
+				prop: 'original',
+				label: '原片',
+        align: 'center',
+				children: [
+					{
+						prop: 'originalLossNum',
+						label: '原片不良/片',
+            width:100
+					},
+					{
+						prop: 'originalLossArea',
+						label: '原片不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'edge',
+				label: '磨边',
+        align: 'center',
+				children: [
+					{
+						prop: 'edgeLossNum',
+						label: '磨边不良/片',
+            width:100
+					},
+					{
+						prop: 'edgeLossArea',
+						label: '磨边不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'drill',
+				label: '打孔',
+        align: 'center',
+				children: [
+					{
+						prop: 'drillLossNum',
+						label: '打孔不良/片',
+            width:100
+					},
+					{
+						prop: 'drillLossArea',
+						label: '打孔不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'coating',
+				label: '镀膜',
+        align: 'center',
+				children: [
+					{
+						prop: 'coatingLossNum',
+						label: '镀膜不良/片',
+            width:100
+					},
+					{
+						prop: 'coatingLossArea',
+						label: '镀膜不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'silk',
+				label: '丝印',
+        align: 'center',
+				children: [
+					{
+						prop: 'silkLossNum',
+						label: '丝印不良/片',
+            width:100
+					},
+					{
+						prop: 'silkLossArea',
+						label: '丝印不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'tempering',
+				label: '钢化',
+        align: 'center',
+				children: [
+					{
+						prop: 'temperingLossNum',
+						label: '钢化不良/片',
+            width:100
+					},
+					{
+						prop: 'temperingLossArea',
+						label: '钢化不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
+			{
+				prop: 'packing',
+				label: '包装',
+        align: 'center',
+				children: [
+					{
+						prop: 'packingLossNum',
+						label: '包装不良/片',
+            width:100
+					},
+					{
+						prop: 'packingLossArea',
+						label: '包装不良/㎡',
+						filter: (val) => (val != null ? val.toFixed(2) : '-'),
+            width:100
+					},
+				],
+			},
 		],
 	},
-	// {
-	// 	prop: 'outputN',
-	// 	label: '产出',
-	// 	align: 'center',
-	// 	children: [
-	// 		{
-	// 			prop: 'outputNum',
-	// 			label: '产出数量/片',
-  //       width:100
-	// 		},
-	// 		{
-	// 			prop: 'outputArea',
-	// 			label: '产出面积/㎡',
-	// 			filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //       width:100
-	// 		},
-	// 	],
-	// },
-	// {
-	// 	prop: 'lossN',
-	// 	label: '不良',
-	// 	align: 'center',
-	// 	children: [
-	// 		{
-	// 			prop: 'lossNum',
-	// 			label: '不良数量/片',
-  //       width:100
-	// 		},
-	// 		{
-	// 			prop: 'lossArea',
-	// 			label: '不良面积/㎡',
-	// 			filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //       width:100
-	// 		},
-	// 	],
-	// },
-	// {
-	// 	prop: 'lossRatio',
-	// 	label: '不良率/%',
-	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //   width:100
-	// },
-	// {
-	// 	prop: 'outputRatio',
-	// 	label: '投入产出率/%',
-	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //   width:110
-	// },
-	// {
-	// 	prop: 'processingRatio',
-	// 	label: '加工成品率/%',
-	// 	filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //   width:110
-	// },
-	// {
-	// 	prop: 'lossD',
-	// 	label: '不良详情',
-	// 	align: 'center',
-	// 	children: [
-	// 		{
-	// 			prop: 'original',
-	// 			label: '原片',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'originalLossNum',
-	// 					label: '原片不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'originalLossArea',
-	// 					label: '原片不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'edge',
-	// 			label: '磨边',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'edgeLossNum',
-	// 					label: '磨边不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'edgeLossArea',
-	// 					label: '磨边不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'drill',
-	// 			label: '打孔',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'drillLossNum',
-	// 					label: '打孔不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'drillLossArea',
-	// 					label: '打孔不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'coating',
-	// 			label: '镀膜',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'coatingLossNum',
-	// 					label: '镀膜不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'coatingLossArea',
-	// 					label: '镀膜不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'silk',
-	// 			label: '丝印',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'silkLossNum',
-	// 					label: '丝印不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'silkLossArea',
-	// 					label: '丝印不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'tempering',
-	// 			label: '钢化',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'temperingLossNum',
-	// 					label: '钢化不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'temperingLossArea',
-	// 					label: '钢化不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 		{
-	// 			prop: 'packing',
-	// 			label: '包装',
-  //       align: 'center',
-	// 			children: [
-	// 				{
-	// 					prop: 'packingLossNum',
-	// 					label: '包装不良/片',
-  //           width:100
-	// 				},
-	// 				{
-	// 					prop: 'packingLossArea',
-	// 					label: '包装不良/㎡',
-	// 					filter: (val) => (val != null ? val.toFixed(2) : '-'),
-  //           width:100
-	// 				},
-	// 			],
-	// 		},
-	// 	],
-	// },
 ];
 
 export default {
@@ -339,22 +309,17 @@ export default {
 			listQuery: {
         reportType: 1,
 				pageSize: 10,
-        pageNo: 1,
+				pageNo: 1,
-        startTime: undefined,
-        endTime: undefined,
 				total: 1,
 			},
 			fileName: '',
 			dataListLoading: false,
 			tableProps,
-      tableBtn: [
+			tableBtn: [
-        this.$auth.hasPermi(`monitoring:group-off:update`)
+				{
-          ? {
+					type: 'eq',
-            type: 'eq',
+					btnName: '详情',
-            btnName: '详情',
+				},
-          }
-          : undefined,
-
 			].filter((v) => v),
 			showData: [],
 			tableData: [],
@@ -374,19 +339,15 @@ export default {
 				{
 					type: 'select',
 					label: '报表类型',
-          selectOptions: [
+					selectOptions: [
-            {
-              id: 0,
-              name: '班',
-            },
 						{
 							id: 1,
 							name: '日',
 						},
-						// {
+						{
-						// 	id: 2,
+							id: 2,
-						// 	name: '周',
+							name: '周',
-						// },
+						},
 						{
 							id: 3,
 							name: '月',
@@ -403,16 +364,15 @@ export default {
 					type: 'datePicker',
 					label: '时间范围',
 					dateType: 'daterange',
-          format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd',
-          valueFormat: 'timestamp',
+					valueFormat: 'timestamp',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
 					param: 'timeVal',
 				},
 				{
-          type: this.$auth.hasPermi('monitoring:group-off:query') ? 'button' : '',
+					type: 'button',
-
 					btnName: '查询',
 					name: 'search',
 					color: 'primary',
@@ -421,8 +381,8 @@ export default {
 					type: 'separate',
 				},
 				{
-          type: this.$auth.hasPermi('monitoring:group-off:export') ? 'button' : '',
+					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
-					// type: 'button',
+					type: 'button',
 					btnName: '导出',
 					name: 'export',
 					color: 'warning',
@@ -442,9 +402,7 @@ export default {
 		// 设置为23:59:59
 		const end = new Date(yesterday.getTime());
 		end.setHours(23, 59, 59, 59);
-    this.listQuery.startTime = yesterday.getTime(), [end.getTime()];
+		this.listQuery.reportStartTime = [yesterday.getTime(),end.getTime()];
-    this.listQuery.endTime = end.getTime()
-
 		this.$nextTick(() => {
 			this.$refs.searchBarForm.formInline.timeVal = [yesterday.getTime(),end.getTime()];
 		});
@@ -503,12 +461,9 @@ export default {
 					this.listQuery.factoryId = val.factoryId || undefined;
 					this.listQuery.teamId = val.teamId || undefined;
 					this.listQuery.reportType = val.reportType || undefined;
-          this.listQuery.startTime = val.timeVal
+					this.listQuery.reportStartTime = val.timeVal
-						? val.timeVal[0]
+						? val.timeVal
-            : undefined;
+						: undefined;
-          this.listQuery.endTime = val.timeVal
-            ? val.timeVal[1]
-            : undefined;
 					this.getDataList();
 					break;
 				case 'export':
@@ -520,10 +475,8 @@ export default {
 		},
 		// 获取数据列表
 		getDataList() {
-      this.dataListLoading = true;
+			this.dataListLoading = true;
-      console.log(this.listQuery);
+			const arr = ['日', '周', '月', '年'];
-
-      const arr = ['班', '日', '', '月', '年']; // 索引0对应班，1对应日，3对应月，4对应年，索引2留空
 			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
 				if (!response.data.list) {
 					this.showData = [];
@@ -531,8 +484,7 @@ export default {
 					return;
 				}
 				this.tableData = response.data?.list.map((item, index) => {
-          item.reportType = arr[item.reportType] || item.reportType;
+					item.reportType = arr[item.reportType - 1];
-          item.drillOrCoating = item.drillNum + "/" + item.coatingNum
 					item.originalLossNum = item.original?.lossNum;
 					item.originalLossArea = item.original?.lossArea;
 					item.edgeLossNum = item.edge?.lossNum;
@@ -556,7 +508,7 @@ export default {
 		},
 		handleClick(val) {
 			this.addOrUpdateVisible = true;
-      const time = val.data.timeVal ? parseTime(val.data.timeVal[0]) + '-' + parseTime(val.data.timeVal[1]) : '- '
+      const time = val.data.reportName?val.data.reportName:'- '
       const teamName = val.data.teamName?val.data.teamName:'- '
       const teamLeader = val.data.teamLeader?val.data.teamLeader:'- '
 			this.addOrEditTitle =

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

@@ -1,123 +0,0 @@
-<!--
- * @Author: zwq
- * @Date: 2021-11-18 14:16:25
- * @LastEditors: DY
- * @LastEditTime: 2023-10-16 11:16:48
- * @Description:
--->
-<template>
-  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="物料名称" prop="materialName">
-          <el-input v-model="dataForm.materialName" clearable placeholder="请输入物料名称" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="物料规格" prop="materialSize">
-          <el-input v-model="dataForm.materialSize" clearable placeholder="请输入物料规格" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="物料批次" prop="materialDate">
-          <el-input v-model="dataForm.materialDate" clearable placeholder="请输入物料批次" />
-        </el-form-item>
-      </el-col>
-      <!-- <el-form-item label="启用状态" prop="enabled">
-			<el-select
-				v-model="dataForm.enabled"
-				placeholder="请选择启用状态">
-				<el-option
-					v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-					:key="dict.value"
-					:label="dict.label"
-					:value="dict.value" />
-			</el-select>
-		</el-form-item> -->
-      <el-col :span="12">
-        <el-form-item label="入库数量" prop="materialNum">
-          <el-input v-model="dataForm.materialNum" clearable placeholder="请输入入库数量" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-
-<script>
-import basicAdd from './../mixins/basic-add';
-import {
-  createMaterialIssue,
-} from '@/api/material/issue';
-
-export default {
-	mixins: [basicAdd],
-	data() {
-		return {
-			urlOptions: {
-			  isGetCode: false,
-        // codeURL: getCode,
-        createURL: createMaterialIssue,
-				// updateURL: updateFactory,
-				// infoURL: getFactory,
-			},
-			dataForm: {
-        id: undefined,
-        materialName: undefined,
-        materialNum: undefined,
-        materialDate: undefined,
-        materialSize: undefined,
-        operateStatus:undefined
-			},
-			dataRule: {
-        materialName: [{ required: true, message: "物料名称不能为空", trigger: "blur" }],
-        materialNum: [{  required: true, message: "数量不能为空", trigger: "blur" }],
-      }
-		};
-	},
-  methods: {
-    init(operateStatus) {
-      this.dataForm.operateStatus = operateStatus;
-      this.visible = true;
-      this.$nextTick(() => {
-        this.$refs["dataForm"].resetFields();
-        // if (this.dataForm.id) {
-        //   this.urlOptions.infoURL(id).then(response => {
-        //     this.dataForm = response.data;
-        //     if (this.setData) {
-        //       this.setDataForm()
-        //     }
-        //   });
-        // } else {
-        //   if (this.urlOptions.isGetCode) {
-        //     this.getCode()
-        //   }
-        // }
-      });
-    },
-    dataFormSubmit() {
-      this.$refs["dataForm"].validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        // 修改的提交
-        // if (this.dataForm.id) {
-        //   this.urlOptions.updateURL(this.dataForm).then(response => {
-        //     this.$modal.msgSuccess("修改成功");
-        //     this.visible = false;
-        //     this.$emit("refreshDataList");
-        //   });
-        //   return;
-        // }
-        // 添加的提交
-        this.urlOptions.createURL(this.dataForm).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.visible = false;
-          this.$emit("refreshDataList");
-        });
-      });
-    },
-	},
-};
-</script>

src/views/materialReceiptIssue/base/index.vue

@@ -1,243 +0,0 @@
-<template>
-	<div class="app-container">
-		<search-bar
-			:formConfigs="formConfig"
-			ref="searchBarForm"
-			@headBtnClick="buttonClick" />
-		<base-table
-			v-loading="dataListLoading"
-			:table-props="tableProps"
-			:page="listQuery.pageNo"
-			:limit="listQuery.pageSize"
-			:table-data="tableData">
-			<!-- <method-btn
-				v-if="tableBtn.length"
-				slot="handleBtn"
-				:width="120"
-				label="操作"
-				:method-list="tableBtn"
-				@clickBtn="handleClick" /> -->
-		</base-table>
-		<pagination
-			:limit.sync="listQuery.pageSize"
-			:page.sync="listQuery.pageNo"
-			:total="listQuery.total"
-			@pagination="getDataList" />
-		<base-dialog
-			:dialogTitle="addOrEditTitle"
-			:dialogVisible="addOrUpdateVisible"
-			@cancel="handleCancel"
-			@confirm="handleConfirm"
-			:before-close="handleCancel"
-			width="30%">
-			<add-or-update
-				ref="addOrUpdate"
-				@refreshDataList="successSubmit"></add-or-update>
-		</base-dialog>
-	</div>
-</template>
-
-<script>
-import AddOrUpdate from './add-or-updata';
-import basicPage from './../mixins/basic-page';
-import { parseTime } from './../mixins/code-filter';
-import {
-  getMaterialReceiptIssuePageData,
-} from '@/api/material/issue';
-
-const tableProps = [
-	{
-    prop: 'materialName',
-		label: '物料名称'
-	},
-	{
-    prop: 'materialSize',
-		label: '物料规格'
-	},
-	{
-    prop: 'materialDate',
-    label: '物料批次'
-	},
-	{
-    prop: 'operateStatus',
-    label: '操作状态',
-    filter: (val) => ['', '入库', '出库'][val]
-  },
-  {
-    prop: 'materialNum',
-    label: '出入库数量',
-    // filter: (val) => ['', '入库', '出库', '移库'][val]
-  },
-	{
-		prop: 'createTime',
-		label: '操作时间',
-		filter: parseTime
-  },
-  {
-    prop: 'creator',
-    label: '操作人',
-    // filter: parseTime
-  },
-];
-
-export default {
-	mixins: [basicPage],
-	data() {
-		return {
-			urlOptions: {
-        getDataListURL: getMaterialReceiptIssuePageData,
-				// deleteURL: deleteFactory,
-				// exportURL: exportFactoryExcel,
-      },
-      operateStatus:undefined,
-			tableProps,
-			// tableBtn: [
-			// 	this.$auth.hasPermi(`base:factory:update`)
-			// 		? {
-			// 				type: 'edit',
-			// 				btnName: '编辑',
-			// 		  }
-			// 		: undefined,
-      //     this.$auth.hasPermi(`base:factory:delete`)
-			// 		? {
-			// 				type: 'delete',
-			// 				btnName: '删除',
-			// 		  }
-			// 		: undefined,
-			// ].filter((v)=>v),
-			tableData: [],
-			formConfig: [
-				{
-          type: 'input',
-          label: '物料名称',
-					placeholder: '物料名称',
-          param: 'materialName',
-				},
-				{
-					type: 'input',
-          label: '操作人',
-					placeholder: '操作人',
-          param: 'operateName',
-        },
-        {
-          type: 'select',
-          label: '操作状态',
-          placeholder: '操作状态',
-          selectOptions: [{
-            id: 1,
-            name:'入库'
-          },
-            {
-              id: 2,
-              name: '出库'
-            }],
-          param: 'operateStatus',
-        },
-        {
-          type: 'datePicker',
-          label: '操作时间',
-          dateType: 'daterange',
-          format: 'yyyy-MM-dd',
-          valueFormat: 'timestamp',
-          rangeSeparator: '-',
-          startPlaceholder: '开始时间',
-          endPlaceholder: '结束时间',
-          param: 'timeVal',
-        },
-				{
-          type: this.$auth.hasPermi('base:material-warehouse-his:query') ? 'button' : '',
-					btnName: '搜索',
-					name: 'search',
-					color: 'primary',
-				},
-				// {
-				// 	type: 'separate',
-				// },
-				// {
-				// 	type: 'button',
-				// 	btnName: '重置',
-				// 	name: 'reset',
-				// },
-				{
-					type: 'separate',
-				},
-				{
-          type: this.$auth.hasPermi('base:material-warehouse-his:create') ? 'button' : '',
-					btnName: '入库',
-          name: 'receipt',
-					color: 'success',
-					plain: true,
-        },
-        {
-          type: this.$auth.hasPermi('base:material-warehouse-his:create') ? 'button' : '',
-          btnName: '出库',
-          name: 'issue',
-          color: 'success',
-          plain: true,
-        },
-				// {
-				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
-				// },
-				// {
-				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
-				// 	btnName: '导出',
-				// 	name: 'export',
-				// 	color: 'warning',
-				// },
-			],
-		};
-	},
-	components: {
-		AddOrUpdate,
-	},
-	created() {},
-  methods: {
-    addOrUpdateHandle() {
-      this.addOrUpdateVisible = true;
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(this.operateStatus);
-      });
-    },
-		buttonClick(val) {
-			switch (val.btnName) {
-				case 'search':
-					this.listQuery.pageNo = 1;
-          this.listQuery.pageSize = 10;
-          this.listQuery.operateName = val.operateName ? val.operateName :undefined;
-          this.listQuery.operateTimeStart = val.timeVal? val.timeVal[0] :undefined;
-          this.listQuery.operateTimeEnd = val.timeVal ? val.timeVal[1] : undefined;
-          this.listQuery.materialName = val.materialName ? val.materialName : undefined;
-          this.listQuery.operateStatus = val.operateStatus ? val.operateStatus : undefined;
-					this.getDataList();
-					break;
-				case 'reset':
-					this.$refs.searchBarForm.resetForm();
-					this.listQuery = {
-						pageSize: 10,
-						pageNo: 1,
-						total: 1,
-					};
-					this.getDataList();
-					break;
-        case 'receipt':
-					this.addOrEditTitle = '入库';
-          this.addOrUpdateVisible = true;
-          this.operateStatus = 1
-          this.addOrUpdateHandle();
-          break;
-        case 'issue':
-          this.addOrEditTitle = '出库';
-          this.addOrUpdateVisible = true;
-          this.operateStatus = 2
-          this.addOrUpdateHandle();
-          break;
-				case 'export':
-					this.handleExport();
-					break;
-				default:
-					console.log(val);
-			}
-		},
-	},
-};
-</script>

src/views/materialReceiptIssue/mixins/basic-add.js

@@ -1,100 +0,0 @@
-/*
- * @Author: zwq
- * @Date: 2022-08-24 11:19:43
- * @LastEditors: zwq
- * @LastEditTime: 2023-08-03 14:21:04
- * @Description:
- */
-export default {
-  data() {
-    /* eslint-disable */
-    return {
-      urlOptions: {
-        createURL: '',
-        updateURL: '',
-        infoURL: '',
-        codeURL: '',
-        getOption: false,
-        isGetCode: false,
-        optionArrUrl: [],
-        optionArr: {}
-      },
-      visible: false,
-      setData: false
-    }
-  },
-  created() {
-  },
-  activated() {
-  },
-  methods: {
-    init(id) {
-      this.dataForm.id = id || "";
-      this.visible = true;
-      if (this.urlOptions.getOption) {
-        this.getArr()
-      }
-      this.$nextTick(() => {
-        this.$refs["dataForm"].resetFields();
-        if (this.dataForm.id) {
-          this.urlOptions.infoURL(id).then(response => {
-            this.dataForm = response.data;
-            if (this.setData) {
-              this.setDataForm()
-            }
-          });
-        } else {
-          if (this.urlOptions.isGetCode) {
-            this.getCode()
-          }
-				}
-      });
-    },
-		getCode() {
-			this.urlOptions.codeURL()
-				.then(({ data: res }) => {
-					this.dataForm.code = res;
-				})
-				.catch(() => {});
-		},
-    getArr() {
-      const params = {
-        pageSize: 100,
-        pageNo: 1,
-      }
-      this.urlOptions.optionArrUrl.forEach((item, index) => {
-        item(params).then(({ data: res }) => {
-          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
-        })
-          .catch(() => {
-          });
-      });
-    },
-    // 表单提交
-    dataFormSubmit() {
-      this.$refs["dataForm"].validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        // 修改的提交
-        if (this.dataForm.id) {
-          this.urlOptions.updateURL(this.dataForm).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.visible = false;
-            this.$emit("refreshDataList");
-          });
-          return;
-        }
-        // 添加的提交
-        this.urlOptions.createURL(this.dataForm).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.visible = false;
-          this.$emit("refreshDataList");
-        });
-      });
-    },
-    formClear() {
-      this.$refs.dataForm.resetFields()
-    }
-  }
-}

src/views/materialReceiptIssue/mixins/basic-page.js

@@ -1,168 +0,0 @@
-/*
- * @Author: zwq
- * @Date: 2022-08-24 11:19:43
- * @LastEditors: DY
- * @LastEditTime: 2023-09-21 16:02:07
- * @Description:
- */
-export default {
-  data() {
-    /* eslint-disable */
-    return {
-      urlOptions: {
-        getDataListURL: '',
-        deleteURL: '',
-        statusUrl: '',
-        exportURL: ''
-      },
-      tableData: [],
-      listQuery: {
-        pageSize: 10,
-        pageNo: 1,
-        total: 1,
-      },
-      exportLoading: false,
-      dataListLoading: false,
-      addOrEditTitle: '',
-      addOrUpdateVisible: false,
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.getDataList()
-  },
-  methods: {
-    // 获取数据列表
-    getDataList() {
-      this.dataListLoading = true;
-      this.urlOptions.getDataListURL(this.listQuery).then(response => {
-        this.tableData = response.data.list;
-        this.listQuery.total = response.data.total;
-        this.dataListLoading = false;
-      });
-    },
-    // 每页数
-    sizeChangeHandle(val) {
-      this.listQuery.pageSize = val;
-      this.listQuery.pageNo = 1;
-      this.getDataList();
-    },
-    // 当前页
-    currentChangeHandle(val) {
-      this.listQuery.pageNo = val;
-      this.getDataList();
-    },
-    // 新增 / 修改
-    addOrUpdateHandle(id) {
-      this.addOrUpdateVisible = true;
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id);
-      });
-    },
-    cancel(id) {
-      this.$refs["popover-" + id].showPopper = false;
-    },
-    //改变状态
-    changeStatus(id) {
-      this.$http
-        .post(this.urlOptions.statusUrl, { id })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.warning(res.msg);
-          }
-          this.$refs["popover-" + id].showPopper = false;
-          this.$message({
-            message: this.$t("prompt.success"),
-            type: "success",
-            duration: 500,
-            onClose: () => {
-              this.getDataList();
-            },
-          });
-        })
-        .catch(() => { });
-    },
-    //tableBtn点击
-    handleClick(val) {
-      if (val.type === "edit") {
-        this.addOrUpdateVisible = true;
-        this.addOrEditTitle = "编辑";
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(val.data.id);
-        });
-      } else if (val.type === "delete") {
-        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
-      } else if (val.type === "change") {
-        this.changeStatus(val.data.id)
-      } else {
-        this.otherMethods(val)
-      }
-    },
-    // 删除
-    deleteHandle(id, name, index) {
-      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.urlOptions.deleteURL(id).then(({ data }) => {
-            this.$message({
-              message: "操作成功",
-              type: "success",
-              duration: 1500,
-              onClose: () => {
-                this.getDataList();
-              },
-            });
-          });
-        })
-        .catch(() => { });
-    },
-    //search-bar点击
-    buttonClick(val) {
-      switch (val.btnName) {
-        case "search":
-          this.listQuery.xm1 = val.xm1;
-          this.listQuery.xm2 = val.xm2;
-          this.listQuery.pageNo = 1;
-          this.getDataList();
-          break;
-        case "add":
-          this.addOrEditTitle = '新增'
-          this.addOrUpdateVisible = true;
-          this.addOrUpdateHandle()
-          break;
-        default:
-          console.log(val)
-      }
-    },
-    handleCancel() {
-      this.$refs.addOrUpdate.formClear()
-      this.addOrUpdateVisible = false
-      this.addOrEditTitle = ''
-    },
-    handleConfirm() {
-      this.$refs.addOrUpdate.dataFormSubmit()
-    },
-    successSubmit() {
-      this.handleCancel()
-      this.getDataList()
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = { ...this.queryParams };
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-        this.exportLoading = true;
-        return this.urlOptions.exportURL(params);
-      }).then(response => {
-        this.$download.excel(response, '工厂.xls');
-        this.exportLoading = false;
-      }).catch(() => { });
-    }
-  }
-}

src/views/materialReceiptIssue/mixins/code-filter.js

@@ -1,73 +0,0 @@
-
-/*
- * @Date: 2020-12-29 16:49:28
- * @LastEditors: DY
- * @LastEditTime: 2023-09-12 11:13:34
- * @FilePath: \basic-admin\src\filters\basicData\index.js
- * @Description:
- */
-
-const table = {
-  lineStatus: {
-    1: '生产中',
-    2: '停止',
-    3: '未知',
-  },
-  reportType: {
-    1: '日',
-    2: '周',
-    3: '月'
-  },
-  pdType: {
-    1: '原片',
-    0: '深加工',
-  },
-}
-
-// 日期格式化
-export function parseTime(time, pattern) {
-  if (arguments.length === 0 || !time) {
-    return null
-  }
-  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
-    } else if (typeof time === 'string') {
-      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
-    }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    let value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
-    }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}
-export default function (dictTable) {
-  return function (val) {
-    return table?.[dictTable]?.[val]
-  }
-}

src/views/monitoring/qhdEquipmentVisualize/index.vue

@@ -0,0 +1,337 @@
+<!--
+ * @Author: zwq
+ * @Date: 2025-02-10 09:15:55
+ * @LastEditors: zwq
+ * @LastEditTime: 2025-02-25 15:48:59
+ * @Description:
+-->
+<template>
+  <div class="app-container" style="overflow: auto">
+    <search-bar :formConfigs="formConfig" ref="searchBarForm" @select-changed="handleSearchBarChanged"
+      @headBtnClick="buttonClick" />
+    <div class="top-tip">
+      <div class="block" style="background: #5b8ff9" />
+      运行
+      <div class="block" style="background: #f4b183" />
+      停机
+      <div class="block" style="background: #ff4f3e" />
+      故障
+    </div>
+    <div class="canvas-line" v-for="(item, index) in lineArr" :key="index">
+      <div class="title">{{ item.name }}</div>
+      <canvas style="
+					box-shadow: 1px 1px 2px 2px #909399;
+					padding: 0;
+					height: 350px;
+					width: 2500px;
+				" @click="getclient($event, index + 1, item.num)" :id="'mycanvas' + (index + 1)"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPdList } from '@/api/core/monitoring/auto';
+import { getFactoryPage, getLineEqStatus } from '@/api/core/base/factory';
+import linePot from './line-pot';
+
+export default {
+	data() {
+		return {
+			listQuery: {
+				factoryId: null,
+				lineId: null,
+			},
+			ctx: '', //canvas
+			lineArr: [],
+			formConfig: [
+				{
+					type: 'select',
+					label: '工厂',
+					selectOptions: [],
+					param: 'factoryId',
+					onchange: true,
+				},
+				{
+					type: 'select',
+					label: '产线',
+					selectOptions: [],
+					param: 'lineId',
+					multiple: true,
+          width: 410
+				},
+				{
+					type: 'button',
+					btnName: '搜索',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			linePot,
+		};
+	},
+	components: {},
+	created() {
+		this.getPdLineList();
+	},
+	methods: {
+		initCanvas(name) {
+			let canvas = document.getElementById(name);
+			canvas.width = canvas.clientWidth;
+      canvas.width = canvas.clientWidth;
+      console.log(canvas.width);
+
+			canvas.height = 350;
+			this.ctx = canvas.getContext('2d');
+			this.ctx.lineWidth = 1;
+			this.ctx.strokeStyle = '#909399';
+			this.ctx.fillStyle = '#5b8ff9';
+			this.ctx.font = '12px 宋体'; //文字大小 字体样式
+      this.ctx.clearRect(0, 0, canvas.clientWidth, 350); //清空画布
+		},
+		//画长方形
+		fillRect(x, y, width, height, name, color) {
+			this.ctx.beginPath(); //开始
+			this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
+			this.ctx.fillRect(x, y, width, height); //左上角点的坐标(x,y) 宽 高
+			this.ctx.strokeRect(x, y, width, height);
+			this.ctx.fillStyle = '#fff'; //填充颜色
+			if (height === 50) {
+				//判断是否特殊机器 机器文字y轴定位加10
+				this.ctx.fillText(name, x + 5, y + 30);
+			} else {
+				this.ctx.fillText(name, x + 5, y + 20);
+			}
+			this.ctx.closePath(); //结束
+		},
+		//画特殊形
+		fillLRect(LArr, name, color) {
+			this.ctx.beginPath(); //开始
+			LArr.forEach((item, index) => {
+				if (index === 0) {
+					this.ctx.moveTo(item[0], item[1]);
+				} else {
+					this.ctx.lineTo(item[0], item[1]);
+				}
+			});
+			this.ctx.closePath(); //结束   // 闭合路径
+			this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
+			this.ctx.fill();
+			this.ctx.stroke();
+			this.ctx.fillStyle = '#fff'; //填充颜色
+			if (LArr[0][0] === LArr[1][0]) {
+				//判断L形第一截是竖着还是横着
+				this.ctx.fillText(name, LArr[1][0] + 5, LArr[1][1]-10); //竖着
+			} else {
+				this.ctx.fillText(name, LArr[0][0] + 25, LArr[0][1] + 20);
+			}
+    },
+    isEven(num) {
+      return (num & 1) === 0;
+    },
+    setRect(item, index) {
+      console.log(index)
+      let identifier = ''
+      if (this.isEven(index + 1)) {
+         identifier = 'line' + item.num + 'canvasSecondHalf';
+      } else {
+        identifier = 'line' + item.num + 'canvasFirstHalf';
+      }
+			// const identifier = 'line' + item.num + 'canvas';
+			this.$nextTick(() => {
+				this.initCanvas('mycanvas' + (index + 1));
+			});
+			this.$nextTick(() => {
+				this.linePot[identifier].forEach((idItem) => {
+					item.children.forEach((eqItem) => {
+						if (eqItem.id === idItem.id) {
+							idItem.color = ['#5b8ff9', '#f4b183', '#ff4f3e'][
+								eqItem.equipmentStatus
+							];
+						}
+					});
+					if (idItem.isL) {
+						this.fillLRect(idItem.line, idItem.name, idItem.color);
+					} else {
+						this.fillRect(
+							idItem.x,
+							idItem.y,
+							idItem.width,
+							idItem.height,
+							idItem.name,
+							idItem.color
+						);
+					}
+				});
+			});
+		},
+		getclient(e, index, num) {
+			let canvas = document.getElementById('mycanvas' + index);
+			const rect = canvas.getBoundingClientRect();
+      let identifier = ''
+      if (this.isEven(index + 1)) {
+        identifier = 'line' + num + 'canvasSecondHalf';
+      } else {
+        identifier = 'line' + num + 'canvasFirstHalf';
+      }
+			this.isEQ(e.clientX - rect.left, e.clientY - rect.top, identifier);
+		},
+		// 检查点击位置是否在设备内
+		isEQ(x, y, identifier) {
+			this.linePot[identifier].forEach((idItem) => {
+				if (idItem.isEQ) {
+					// 检查点击位置是否在矩形内
+					if (
+						x >= idItem.x &&
+						x <= idItem.x + idItem.width &&
+						y >= idItem.y &&
+						y <= idItem.y + idItem.height
+					) {
+						console.log(idItem.name, idItem.id);
+						this.$router.push({
+              path: '//base/production-line/getLineEqStatus',
+							query: { eqid: idItem.id },
+						});
+					}
+				}
+			});
+		},
+		getPdLineList() {
+			const params = {
+				pageSize: 100,
+				pageNo: 1,
+			};
+			getFactoryPage(params).then((res) => {
+				this.formConfig[0].selectOptions = res.data.list || [];
+			});
+			getPdList().then((res) => {
+				this.formConfig[1].selectOptions = res.data || [];
+			});
+		},
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'search':
+					this.listQuery.pageNo = 1;
+					this.listQuery.pageSize = 100;
+					this.listQuery.factoryId = val.factoryId || undefined;
+					this.listQuery.lineId = val.lineId ? val.lineId : [];
+					this.getDataList();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		handleSearchBarChanged({ param, value }) {
+			this.listQuery.lineId = [];
+			this.$refs.searchBarForm.formInline.lineId = undefined;
+			getPdList(value).then((res) => {
+				this.formConfig[1].selectOptions = res.data || [];
+			});
+		},
+		getDataList() {
+			// this.lineArr = [
+			// 	{
+			// 		num: 1,
+			// 		name: 'A1',
+			// 		children: [],
+			// 	},
+			// 	{
+			// 		num: 2,
+			// 		name: 'A2',
+			// 		children: [],
+			// 	},
+			// 	{
+			// 		num: 3,
+			// 		name: 'A3',
+			// 		children: [],
+			// 	},
+			// 	{
+			// 		num: 4,
+			// 		name: 'A4',
+			// 		children: [],
+			// 	},
+			// 	{
+			// 		num: 5,
+			// 		name: 'A5',
+			// 		children: [],
+			// 	},
+			// ];
+      getLineEqStatus(this.listQuery).then((response) => {
+        this.lineArr = response.data;
+        // Create a new array by duplicating each item
+        const duplicatedArr = [];
+        this.lineArr.forEach((item, index) => {
+          // Process original item
+          const num = [
+            '',
+            '1672847052717821953',
+            '1672847052717821954',
+            '1686260211054157825',
+            '1701892552632770122',
+            '1714562503683465331',
+          ].indexOf(item.id);
+          if (num > 0) {
+            // Original item with copy=1
+            const originalItem = {
+              ...item,
+              num: num,
+              name: item.lineName +'前半段',
+              copy: 1
+            };
+            duplicatedArr.push(originalItem);
+            this.setRect(originalItem, index * 2); // Adjust index for original
+
+            // Create copy with copy=2
+            const copiedItem = {
+              ...item,
+              num: num,
+              name: item.lineName + '后半段',
+              copy: 2
+            };
+            duplicatedArr.push(copiedItem);
+            this.setRect(copiedItem, index * 2 + 1); // Adjust index for copy
+          } else {
+            this.$message.warning('没有对应的产线！');
+          }
+        });
+        console.log(duplicatedArr);
+
+        // Replace the original array with the duplicated one
+        this.lineArr = duplicatedArr;
+      });
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.top-tip {
+	.block {
+		display: inline-block;
+		width: 20px;
+		height: 10px;
+		margin-left: 20px;
+		margin-right: 3px;
+	}
+}
+.canvas-line {
+	margin-top: 20px;
+	min-width: 2000px;
+  overflow: auto;
+  // height: 300px;
+  // overflow-x: hidden;
+	.title {
+		font-size: 20px;
+		font-weight: bolder;
+		&::before {
+			content: '';
+			background: rgb(39, 240, 17);
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			margin-right: 3px;
+			transform: translateY(-50%);
+		}
+	}
+}
+</style>

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

@@ -1,172 +0,0 @@
-<!--
- * @Author: zwq
- * @Date: 2023-08-01 13:52:10
- * @LastEditors: DY
- * @LastEditTime: 2023-10-16 13:40:00
- * @Description:
--->
-<template>
-  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
-    label-width="130px">
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="订单名称" prop="name">
-          <el-input v-model="dataForm.name" clearable placeholder="请输入订单名称" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="订单编码" prop="code">
-          <el-input v-model="dataForm.code" clearable placeholder="请输入订单编码" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="客户" prop="customerName">
-          <el-input v-model="dataForm.customerName" clearable placeholder="请输入客户" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="计划加工量（片）" prop="planProductNum">
-          <el-input v-model="dataForm.planProductNum" clearable placeholder="请输入计划加工量" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="产品工艺" prop="processName">
-          <el-input v-model="dataForm.processName" clearable placeholder="请输入产品工艺" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="产品规格" prop="planProductSize">
-          <el-input v-model="dataForm.planProductSize" clearable placeholder="请输入产品规格" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="交货日期" prop="deliveryTime">
-          <el-date-picker v-model="dataForm.deliveryTime" type="date" placeholder="选择交货日期" value-format="timestamp">
-          </el-date-picker>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="包装规格（片/箱）" prop="packSpec">
-          <el-input v-model="dataForm.packSpec" clearable placeholder="请输入包装规格" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <span>产线信息</span>
-    <el-button type="text" icon="el-icon-plus" @click="handleAdd" style="color: #409EFF;float: right;">
-    </el-button>
-    <el-divider></el-divider>
-    <el-row :gutter="24" v-for="(item, index) in dataForm.bindLineList" :key="index">
-      <el-col :span="8">
-        <el-form-item label="产线" :prop="'bindLineList.' + index + '.lineId'">
-          <el-select v-model="item.lineId" filterable clearable placeholder="请选择产线">
-            <el-option v-for="line in urlOptions.optionArr.arr0" :key="line.id" :label="line.name"
-              :value="line.id"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="14">
-        <el-form-item label="实际生产时间段" :prop="'bindLineList[' + index + '].dateRange'">
-          <el-date-picker v-model="item.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期" value-format="timestamp" @change="(va1) => handleChange(va1, index)" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="2">
-        <!-- 删除按钮（至少保留一项） -->
-        <el-button type="text" icon="el-icon-delete" @click="handleDelete(index)"
-          :disabled="dataForm.bindLineList.length <= 1" style="color: #f56c6c;"></el-button>
-      </el-col>
-    </el-row>
-    <!-- <el-form-item label="备注" prop="remark">
-      <el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
-    </el-form-item> -->
-  </el-form>
-</template>
-
-<script>
-import basicAdd from '../../mixins/basic-add';
-import {
-  updateOrderData,
-  createOrderData,
-  getOrderData,
-  getOrderCode
-  // exportWorkshopSectionExcel
-} from "@/api/order/index";
-import {
-	getProductionLinePage,
-} from '@/api/core/base/productionLine';
-
-export default {
-	mixins: [basicAdd],
-	data() {
-		return {
-			urlOptions: {
-        getOption: true,
-			  isGetCode: true,
-        codeURL: getOrderCode,
-        createURL: createOrderData,
-        updateURL: updateOrderData,
-        infoURL: getOrderData,
-        optionArrUrl: [getProductionLinePage],
-			},
-			dataForm: {
-				id: undefined,
-				code: undefined,
-        bindLineList: [
-        ],
-        deliveryTime:undefined,
-				name: undefined,
-        remark: undefined,
-        planProductSize: undefined,
-        planProductNum: undefined,
-        customerName: undefined,
-        processName: undefined,
-        packSpec: undefined,
-			},
-			dataRule: {
-				code: [
-					{ required: true, message: '订单编码不能为空', trigger: 'blur' },
-				],
-				name: [
-					{ required: true, message: '订单名称不能为空', trigger: 'blur' },
-				],
-			},
-		};
-	},
-  methods: {
-    handleAdd() {
-      const newItem = {
-        productionLineId: '',
-        dateRange: []
-      };
-      // 使用 this.$set 向数组添加元素（确保响应式）
-      this.$set(
-        this.dataForm.bindLineList,
-        this.dataForm.bindLineList.length,  // 新元素的索引（数组长度即最后一个位置）
-        newItem  // 要添加的新元素
-      );
-    },
-    handleChange(val, index) {
-      console.log(val);
-      this.dataForm.bindLineList[index].startProduceTime = val[0]
-      this.dataForm.bindLineList[index].finishProduceTime = val[1]
-    },
-    handleDelete(index) {
-      this.dataForm.bindLineList.splice(index, 1);
-      Message.info('已删除该配置');
-    },
-	},
-};
-</script>

src/views/order/base/order/detail.vue

@@ -1,358 +0,0 @@
-<!--
- * @Author: zhp
- * @Date: 2021-12-04 16:27:09
- * @LastEditTime: 2022-08-09 09:47:17
- * @LastEditors: zhp
- * @Description:
--->
-<template>
-  <div>
-    <el-drawer title="详情" :visible.sync="drawer" :before-close="handleClose" size="60%">
-      <div class="detailBox">
-        <h2 style="margin-left: 32px;">
-          订单编号: {{ dataForm.code}}
-        </h2>
-        <el-row>
-          <el-col :span="8">
-            <p class="title">订单名称</p>
-            <p class="text">{{ dataForm.name }}</p>
-          </el-col>
-          <el-col :span="8">
-            <p class="title">客户</p>
-            <p class="text">{{ dataForm.customerName }}</p>
-          </el-col>
-          <el-col :span="8">
-            <p class="title">计划加工量</p>
-            <p class="text">{{ dataForm?.planProductNum }}</p>
-          </el-col>
-        </el-row>
-        <!-- <el-divider /> -->
-        <div>
-          <el-row>
-            <el-col :span="8">
-              <p class="title">产品工艺</p>
-              <p class="text">{{ dataForm?.processName }}</p>
-            </el-col>
-            <el-col :span="8">
-              <p class="title">产品规格</p>
-              <p class="text">{{ dataForm?.planProductSize }}</p>
-            </el-col>
-            <el-col :span="8">
-              <p class="title">交货日期</p>
-              <p class="text">{{ parseTime(dataForm?.deliveryTime) }}</p>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <p class="title">包装规格（片/箱）</p>
-              <p class="text">{{ dataForm?.packSpec }}</p>
-            </el-col>
-            <el-col :span="8">
-              <p class="title">实际生产时间</p>
-              <p class="text">{{ parseTime(dataForm?.startProduceTime) + '-' + parseTime(dataForm?.finishProduceTime) }}</p>
-            </el-col>
-            <el-col :span="8">
-              <p class="title">实际投入数量</p>
-              <p class="text">{{ dataForm?.assignQuantity }}</p>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <p class="title">实际产出数量</p>
-              <p class="text">{{ dataForm?.actualQuantity }}</p>
-            </el-col>
-            <el-col :span="8">
-              <p class="title">备注</p>
-              <p class="text">{{ dataForm?.remark }}</p>
-            </el-col>
-          </el-row>
-        </div>
-        <!-- <div v-if="glass === 4"> -->
-        <!-- 铜铟镓硒待完成 -->
-        <!-- </div> -->
-      </div>
-      <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
-
-      <h2 style="margin-left: 32px;">
-        产线信息
-      </h2>
-      <el-divider />
-      <el-button @click="handleRoute" type="text" style="float: right;margin-right: 20px;">订单生产详情</el-button>
-      <base-table :table-props="tableProps" :table-data="tableData">
-        <method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
-          @clickBtn="handleClick" />
-      </base-table>
-      <!-- <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
-        @pagination="getDataList" /> -->
-    </el-drawer>
-  </div>
-</template>
-
-<script>
-const tableProps = [{
-  prop: 'lineName',
-  label: '产线',
-  align: 'center'
-},
-  {
-    prop: 'processName',
-    label: '产品工艺',
-    align: 'center'
-  }, {
-    prop: 'planProductSize',
-    label: '产品规格',
-    align: 'center'
-  }, {
-    prop: 'startProduceTime',
-    label: '开始时间',
-    filter: parseTime,
-
-    align: 'center'
-  }, {
-    prop: 'finishProduceTime',
-    label: '结束时间',
-    filter: parseTime,
-    align: 'center'
-  }, {
-    prop: 'assignQuantity',
-    label: '投入数量',
-    align: 'center'
-  }, {
-    prop: 'actualQuantity',
-    label: '产出数量',
-    align: 'center'
-  },
-]
-// import { getPageWareHouseSubstrateHistory } from '@/api/equipment/trans'
-// import BaseTable from '@/components/BaseTable'
-// // import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
-// import Pagination from '@/components/Pagination'
-// edit here
-// import i18n from '@/lang'
-
-// import HeadForm from '@/components/basicData/HeadForm'
-import {
-  getOrderData,
-  // exportWorkshopSectionExcel
-} from "@/api/order/index";
-import { parseTime } from '../../mixins/code-filter';
-
-export default {
-  components: {
-    // BaseTable,
-    // Pagination,
-    // HeadForm
-    // MethodBtn
-    // MethodBtn
-  },
-  data() {
-    return {
-      tableProps,
-      drawer: false,
-      list: [],
-      tableBtn: [{
-            type: 'detail',
-            btnName: '产线生产详情',
-          }
-        // this.$auth.hasPermi(`base:workshop-section:delete`)
-        // ? {
-        // 		type: 'delete',
-        // 		btnName: '删除',
-        //   }
-        // : undefined,
-      ].filter((v) => v),
-      tableData:[],
-      listLoading: false,
-      total: 0,
-      edit: false,
-      // dataForm: {
-      //   id: null,
-      //   io: null,
-      //   status: null
-      // },
-      lineIdList:[],
-      dataForm: {
-        id: null,
-        name: '', // 订单名称
-        customerName: '', // 客户
-        planProductNum: '', // 计划加工量
-        processName: '', // 产品工艺
-        planProductSize: '', // 产品规格
-        deliveryTime: '', // 交货日期
-        packSpec: '', // 包装规格（片/箱）
-        startProduceTime: '', // 实际生产时间
-        assignQuantity: '', // 实际投入数量
-        actualQuantity: '', // 实际产出数量
-        remark: '' // 备注
-      },
-      listQuery: {
-
-      },
-      // headFormConfig: [
-      //   {
-      //     label: this.$t('module.equipmentManager.trans.inEqTime'),
-      //     type: 'datePickRange',
-      //     dateType: 'datetimerange',
-      //     format: 'yyyy-MM-dd HH:mm:ss',
-      //     valueFormat: 'yyyy-MM-ddTHH:mm:ss',
-      //     param: 'inTime'
-      //   },
-      //   {
-      //     label: this.$t('module.equipmentManager.trans.outTime'),
-      //     type: 'datePickRange',
-      //     dateType: 'datetimerange',
-      //     format: 'yyyy-MM-dd HH:mm:ss',
-      //     valueFormat: 'yyyy-MM-ddTHH:mm:ss',
-      //     param: 'outTime'
-      //   },
-      //   {
-      //     type: 'button',
-      //     btnName: 'btn.search',
-      //     name: 'search',
-      //     color: 'primary'
-      //   }
-      //   // {
-      //   //   type: 'button',
-      //   //   btnName: 'btn.exportBtn',
-      //   //   name: 'exportBtn',
-      //   //   color: 'primary'
-      //   // }
-      // ],
-      rules: {
-        // slotNo: [
-        //   { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.trans.slotNo')]), trigger: 'blur' }
-        // ],
-        // substrateId: [
-        //   { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.trans.substrateId')]), trigger: 'blur' }
-        // ]
-      }
-    }
-  },
-  methods: {
-    handleClose() {
-      this.drawer = false
-    },
-    handleRoute() {
-      console.log(this.lineIdList);
-
-      this.$router.push({
-        path: '/core/monitoring/production-line-data',
-        query: {
-          lineId: this.lineIdList,
-          startProduceTime: this.dataForm.startProduceTime,
-          finishProduceTime: this.dataForm.finishProduceTime,
-          tab: 'his',
-          name: this.dataForm.name,
-          code: this.dataForm.code,
-
-          buttonType:'order'
-        }
-      })
-    },
-    handleClick(val) {
-      console.log(val);
-
-      this.$router.push({
-        path: '/core/monitoring/production-line-data',
-        query: {
-          lineId: [val.data.lineId],
-          startProduceTime: val.data.startProduceTime,
-          finishProduceTime: val.data.finishProduceTime,
-          tab:'his'
-        }
-      })
-    },
-    async init(id) {
-      // if (id !== undefined) {
-      this.dataForm.id = id || ''
-      //   this.edit = true
-      // }
-      // console.log(this.edit)
-      this.drawer = true
-      this.$nextTick(() => {
-        // this.$refs['dataForm'].resetFields()
-        getOrderData(id).then((res) => {
-          this.dataForm = res.data
-          this.tableData = res.data.bindLines
-
-          this.tableData.forEach(ele => {
-            this.lineIdList.push(
-              ele.lineId
-            )
-          });
-
-        })
-        // console.log();
-
-        // if (this.listQuery.id) {
-        //   this.getList()
-        // }
-      })
-    },
-    getList() {
-      getPageWareHouseSubstrateHistory(this.listQuery).then(res => {
-        console.log(res)
-
-        this.list = res.data.records
-        this.total = res.data.total
-      })
-    }
-    // dataSubmit() {
-    //   this.$refs['dataForm'].validate((valid) => {
-    //     if (valid) {
-    //       if (this.dataForm.id) {
-    //         const data = {
-    //           id: this.dataForm.id,
-    //           io: this.dataForm.io,
-    //           status: this.dataForm.status
-    //         }
-    //         addOrUpdateLineSideWareHouseDetailData(data).then(res => {
-    //           this.$message({
-    //             message: this.$t('module.basicData.visual.success'),
-    //             type: 'success',
-    //             duration: 1500,
-    //             onClose: () => {
-    //               this.drawer = false
-    //               this.$emit('refreshDataList')
-    //             }
-    //           })
-    //         })
-    //       }
-    //     }
-    //   })
-    // }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-    .detailBox p {
-      margin: 0;
-      padding: 0 32px;
-    }
-
-    .detailBox.title {
-      /* width: 56px; */
-      /* height: 14px; */
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: 400;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
-      line-height: 16px;
-      text-align: left;
-      font-style: normal;
-      text-transform: none;
-    }
-
-    .detailBox.text {
-      font-size: 14px;
-      font-weight: 400;
-      color: rgba(102, 102, 102, 0.75);
-      padding-bottom: 20px;
-    }
-
-    .detailBox {
-      width: 98%;
-      padding: 30px 0;
-    }
-</style>

src/views/order/base/order/index.vue

@@ -1,362 +0,0 @@
-<template>
-  <div class="app-container">
-    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    <el-table v-loading="dataListLoading" :data="tableData" row-key="id" border style="width: 100%">
-      <el-table-column label="序号" type="index" width="50" />
-      <!-- 订单名称/产线名称列 -->
-      <el-table-column prop="name" label="订单名称/产线名称" align="center" />
-
-      <!-- 订单编号列 -->
-      <el-table-column prop="code" label="订单编号" align="center" />
-
-      <!-- 客户列 -->
-      <el-table-column prop="customerName" label="客户" align="center" />
-
-      <!-- 计划加工量列 -->
-      <el-table-column prop="planProductNum" label="计划加工量" align="center" />
-
-      <!-- 实际加工量列 -->
-      <el-table-column prop="actualQuantity" label="实际加工量" align="center" />
-
-      <!-- 产品工艺列 -->
-      <el-table-column prop="processName" label="产品工艺" align="center" />
-
-      <!-- 产品规格列 -->
-      <el-table-column prop="planProductSize" label="产品规格" align="center" />
-
-      <!-- 交货时间列（带时间格式化） -->
-      <el-table-column prop="deliveryTime" label="交货时间" align="center">
-        <template #default="scope">
-          {{ parseTime(scope.row.deliveryTime) }}
-        </template>
-      </el-table-column>
-
-      <!-- 开始时间列（带时间格式化） -->
-      <el-table-column prop="startProduceTime" label="开始时间" align="center">
-        <template #default="scope">
-          {{ parseTime(scope.row.startProduceTime) }}
-        </template>
-      </el-table-column>
-
-      <!-- 结束时间列（带时间格式化） -->
-      <el-table-column prop="finishProduceTime" label="结束时间" align="center">
-        <template #default="scope">
-          {{ parseTime(scope.row.finishProduceTime) }}
-        </template>
-      </el-table-column>
-
-      <!-- 产线数量列 -->
-      <el-table-column prop="bindLineNum" label="产线数量" align="center" />
-
-      <!-- 操作列（对应原handleBtn插槽） -->
-      <el-table-column fixed="right" label="操作" width="120">
-        <template #default="scope">
-          <!-- 只在 level 为 0 时显示操作按钮 -->
-          <div v-if="scope.row.level === 0">
-            <!-- 详情按钮 -->
-            <span v-hasPermi="['base:core-work-order:update']" class="iconfont icon-detail  primary-color"
-              @click="handleDetail(scope.row)" style="cursor: pointer; margin-right: 10px;"></span>
-
-            <!-- 编辑按钮 -->
-            <span v-hasPermi="['base:core-work-order:update']" class="iconfont icon-edit primary-color"
-              @click="handleEdit(scope.row)" style="cursor: pointer; margin-right: 10px;"></span>
-
-            <!-- 删除按钮 -->
-            <span v-hasPermi="['base:core-work-order:delete']" class="iconfont icon-delete delete-color"
-              @click="deleteHandle(scope.row.id,scope.row.name,scope.row.index)" style="cursor: pointer;"></span>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
-      @pagination="getDataList" />
-    <base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel"
-      @confirm="handleConfirm" :before-close="handleCancel" width="50%">
-      <add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
-    </base-dialog>
-    <detail v-if="dialogVisibleDetail" ref="detailDialog" @refreshDataList="getDataList" />
-  </div>
-</template>
-
-<script>
-import AddOrUpdate from './add-or-updata';
-import detail from './detail';
-
-import basicPage from '../../mixins/basic-page';
-import { parseTime } from '../../mixins/code-filter';
-import {
-  getOrderPage,
-  deleteOrder
-  // getWorkshopSectionPage,
-  // exportWorkshopSectionExcel
-} from "@/api/order/index";
-import { getPdList } from '@/api/core/monitoring/auto';
-import { getFactoryPage } from '@/api/core/base/factory';
-
-const tableProps = [
-	{
-		prop: 'name',
-		label: '订单名称/产线名称'
-	},
-	{
-		prop: 'code',
-		label: '订单编号'
-	},
-	{
-    prop: 'customerName',
-		label: '客户'
-	},
-	{
-    prop: 'planProductNum',
-		label: '计划加工量'
-  },
-  {
-    prop: 'productNum',
-    label: '实际加工量'
-  },
-  {
-    prop: 'processName',
-    label: '产品工艺'
-  },
-  {
-    prop: 'planProductSize',
-    label: '产品规格'
-  },
-	{
-    prop: 'deliveryTime',
-    label: '交货时间',
-		filter: parseTime
-  },
-  {
-    prop: 'startProduceTime',
-    label: '开始时间',
-    filter: parseTime
-  },
-  {
-    prop: 'finishProduceTime',
-    label: '结束时间',
-    filter: parseTime
-  },
-  {
-    prop: 'bindLineNum',
-    label: '产线数量',
-  },
-];
-
-export default {
-	mixins: [basicPage],
-	data() {
-		return {
-			urlOptions: {
-        getDataListURL: getOrderPage,
-        deleteURL: deleteOrder,
-				// exportURL: exportWorkshopSectionExcel,
-			},
-      tableProps,
-      dialogVisibleDetail:false,
-			tableBtn: [
-        this.$auth.hasPermi(`base:core-work-order:update`)
-					? {
-							type: 'edit',
-							btnName: '编辑',
-					  }
-					: undefined,
-        this.$auth.hasPermi(`base:core-work-order:delete`)
-					? {
-							type: 'delete',
-							btnName: '删除',
-					  }
-					: undefined,
-			].filter((v)=>v),
-			listQuery: {
-        lineId: null,
-        startTime: undefined,
-        endTime:undefined
-			},
-			tableData: [],
-      formConfig: [
-        {
-          type: 'input',
-          label: '订单名称',
-          placeholder: '工段名称',
-          param: 'name',
-        },
-				// {
-				// 	type: 'select',
-				// 	label: '工厂',
-				// 	selectOptions: [],
-				// 	param: 'factoryId',
-				// 	onchange: true,
-				// },
-				{
-					type: 'select',
-					label: '产线',
-					selectOptions: [],
-					param: 'lineId',
-					// multiple: true,
-				},
-        {
-          type: 'datePicker',
-          label: '时间范围',
-          dateType: 'daterange',
-          format: 'yyyy-MM-dd',
-          valueFormat: 'timestamp',
-          rangeSeparator: '-',
-          startPlaceholder: '开始时间',
-          endPlaceholder: '结束时间',
-          param: 'timeVal',
-        },
-				{
-          type: this.$auth.hasPermi('base:core-work-order:query') ? 'button' : '',
-					btnName: '搜索',
-					name: 'search',
-					color: 'primary',
-				},
-				// {
-				// 	type: 'separate',
-				// },
-				// {
-				// 	type: 'button',
-				// 	btnName: '重置',
-				// 	name: 'reset',
-				// },
-				{
-					type: 'separate',
-				},
-				{
-          type: this.$auth.hasPermi('base:core-work-order:create') ? 'button' : '',
-					btnName: '新增',
-					name: 'add',
-					color: 'success',
-					plain: true,
-				},
-				// {
-				// 	type: this.$auth.hasPermi('base:workshop-section:create') ? 'separate' : '',
-				// },
-				// {
-				// 	type: this.$auth.hasPermi('base:workshop-section:export') ? 'button' : '',
-				// 	btnName: '导出',
-				// 	name: 'export',
-				// 	color: 'warning',
-				// },
-			],
-		};
-	},
-	components: {
-    AddOrUpdate,
-    detail
-	},
-	created() {
-		this.getPdLineList();
-	},
-	methods: {
-		getPdLineList() {
-			getPdList().then((res) => {
-				this.formConfig[1].selectOptions = res.data || [];
-			});
-			const params = {
-				pageSize: 100,
-				pageNo: 1,
-			};
-			getFactoryPage(params).then((res) => {
-				this.formConfig[0].selectOptions = res.data.list || [];
-			});
-		},
-		// handleSearchBarChanged({ param, value }) {
-		// 	this.listQuery.lineId = null;
-		// 	this.$refs.searchBarForm.formInline.lineId = undefined;
-		// 	getPdList(value).then((res) => {
-		// 		this.formConfig[1].selectOptions = res.data || [];
-		// 	});
-    // },
-    getDataList() {
-      this.dataListLoading = true;
-      this.urlOptions.getDataListURL(this.listQuery).then(response => {
-        this.tableData = response.data.list.map((ele) => {
-          ele.children = ele.bindLines.map((item) => {
-            item.name = item.lineName;
-            item.level = 1
-            return item
-          })
-          ele.level = 0
-          return ele;
-        })
-        console.log(this.tableData);
-        this.listQuery.total = response.data.total;
-        this.dataListLoading = false;
-      });
-    },
-    handleEdit(val) {
-      console.log(val);
-
-      // if (val.type === "edit") {
-        this.addOrUpdateVisible = true;
-        this.addOrEditTitle = "编辑";
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(val.id);
-        });
-      // }
-    },
-    handleDetail(val) {
-      console.log(val);
-
-      // if (val.type === "edit") {
-      this.dialogVisibleDetail = true;
-      // this.addOrEditTitle = "编辑";
-      this.$nextTick(() => {
-        this.$refs.detailDialog.init(val.id);
-      });
-      // }
-    },
-    addOrUpdateHandle(id) {
-      this.addOrUpdateVisible = true;
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id);
-      });
-    },
-    buttonClick(val) {
-      console.log(val);
-
-			switch (val.btnName) {
-				case 'search':
-					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
-					this.listQuery.name = val.name;
-					this.listQuery.factoryId = val.factoryId || undefined;
-          this.listQuery.lineId = val.lineId || null;
-          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined
-          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined
-					this.getDataList();
-					break;
-				case 'reset':
-					this.$refs.searchBarForm.resetForm();
-					this.listQuery = {
-						pageSize: 10,
-						pageNo: 1,
-						total: 1,
-					};
-					this.getDataList();
-					break;
-				case 'add':
-					this.addOrEditTitle = '新增';
-					this.addOrUpdateVisible = true;
-					this.addOrUpdateHandle();
-					break;
-				case 'export':
-					this.handleExport();
-					break;
-				default:
-					console.log(val);
-			}
-		},
-	},
-};
-</script>
-<style>
-.delete-color {
-  color: #ff5454;
-}
-.primary-color {
-  color: #0b58ff;
-}
-</style>

src/views/order/mixins/basic-add.js

@@ -1,109 +0,0 @@
-/*
- * @Author: zwq
- * @Date: 2022-08-24 11:19:43
- * @LastEditors: zwq
- * @LastEditTime: 2023-08-03 14:21:04
- * @Description:
- */
-export default {
-  data() {
-    /* eslint-disable */
-    return {
-      urlOptions: {
-        createURL: '',
-        updateURL: '',
-        infoURL: '',
-        codeURL: '',
-        getOption: false,
-        isGetCode: false,
-        optionArrUrl: [],
-        optionArr: {}
-      },
-      dataForm:{},
-      visible: false,
-      setData: false
-    }
-  },
-  created() {
-  },
-  activated() {
-  },
-  methods: {
-    init(id) {
-      this.dataForm.id = id || "";
-      this.visible = true;
-      if (this.urlOptions.getOption) {
-        this.getArr()
-      }
-      this.$nextTick(() => {
-        this.$refs["dataForm"].resetFields();
-        this.dataForm.bindLineList = []
-        if (this.dataForm.id) {
-          this.urlOptions.infoURL(id).then(response => {
-            this.dataForm = response.data;
-            this.dataForm.bindLineList = response.data.bindLines.map((ele) => {
-              ele.lineId = ele.lineId;
-              ele.dateRange = [ele.startProduceTime, ele.finishProduceTime];
-              return ele
-            })
-
-            if (this.setData) {
-              this.setDataForm()
-            }
-          });
-        } else {
-          if (this.urlOptions.isGetCode) {
-            this.getCode()
-          }
-				}
-      });
-    },
-		getCode() {
-			this.urlOptions.codeURL()
-				.then(({ data: res }) => {
-					this.dataForm.code = res;
-				})
-				.catch(() => {});
-		},
-    getArr() {
-      const params = {
-        pageSize: 100,
-        pageNo: 1,
-      }
-      this.urlOptions.optionArrUrl.forEach((item, index) => {
-        item(params).then(({ data: res }) => {
-          this.$set(this.urlOptions.optionArr, `arr${index}`, res.list)
-        })
-          .catch(() => {
-          });
-      });
-    },
-    // 表单提交
-    dataFormSubmit() {
-      this.$refs["dataForm"].validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        // 修改的提交
-        if (this.dataForm.id) {
-          this.urlOptions.updateURL(this.dataForm).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.visible = false;
-            this.$emit("refreshDataList");
-          });
-          return;
-        }
-        // 添加的提交
-        this.urlOptions.createURL(this.dataForm).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.visible = false;
-          this.$emit("refreshDataList");
-        });
-      });
-    },
-    formClear() {
-      this.$refs.dataForm.resetFields()
-
-    }
-  }
-}

src/views/order/mixins/basic-page.js

@@ -1,168 +0,0 @@
-/*
- * @Author: zwq
- * @Date: 2022-08-24 11:19:43
- * @LastEditors: DY
- * @LastEditTime: 2023-09-21 16:02:07
- * @Description:
- */
-export default {
-  data() {
-    /* eslint-disable */
-    return {
-      urlOptions: {
-        getDataListURL: '',
-        deleteURL: '',
-        statusUrl: '',
-        exportURL: ''
-      },
-      tableData: [],
-      listQuery: {
-        pageSize: 10,
-        pageNo: 1,
-        total: 1,
-      },
-      exportLoading: false,
-      dataListLoading: false,
-      addOrEditTitle: '',
-      addOrUpdateVisible: false,
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.getDataList()
-  },
-  methods: {
-    // 获取数据列表
-    getDataList() {
-      this.dataListLoading = true;
-      this.urlOptions.getDataListURL(this.listQuery).then(response => {
-        this.tableData = response.data.list;
-        this.listQuery.total = response.data.total;
-        this.dataListLoading = false;
-      });
-    },
-    // 每页数
-    sizeChangeHandle(val) {
-      this.listQuery.pageSize = val;
-      this.listQuery.pageNo = 1;
-      this.getDataList();
-    },
-    // 当前页
-    currentChangeHandle(val) {
-      this.listQuery.pageNo = val;
-      this.getDataList();
-    },
-    // 新增 / 修改
-    addOrUpdateHandle(id) {
-      this.addOrUpdateVisible = true;
-      this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id);
-      });
-    },
-    cancel(id) {
-      this.$refs["popover-" + id].showPopper = false;
-    },
-    //改变状态
-    changeStatus(id) {
-      this.$http
-        .post(this.urlOptions.statusUrl, { id })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.warning(res.msg);
-          }
-          this.$refs["popover-" + id].showPopper = false;
-          this.$message({
-            message: this.$t("prompt.success"),
-            type: "success",
-            duration: 500,
-            onClose: () => {
-              this.getDataList();
-            },
-          });
-        })
-        .catch(() => { });
-    },
-    //tableBtn点击
-    handleClick(val) {
-      if (val.type === "edit") {
-        this.addOrUpdateVisible = true;
-        this.addOrEditTitle = "编辑";
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(val.data.id);
-        });
-      } else if (val.type === "delete") {
-        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
-      } else if (val.type === "change") {
-        this.changeStatus(val.data.id)
-      } else {
-        this.otherMethods(val)
-      }
-    },
-    // 删除
-    deleteHandle(id, name, index) {
-      this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.urlOptions.deleteURL(id).then(({ data }) => {
-            this.$message({
-              message: "操作成功",
-              type: "success",
-              duration: 1500,
-              onClose: () => {
-                this.getDataList();
-              },
-            });
-          });
-        })
-        .catch(() => { });
-    },
-    //search-bar点击
-    buttonClick(val) {
-      switch (val.btnName) {
-        case "search":
-          this.listQuery.xm1 = val.xm1;
-          this.listQuery.xm2 = val.xm2;
-          this.listQuery.pageNo = 1;
-          this.getDataList();
-          break;
-        case "add":
-          this.addOrEditTitle = '新增'
-          this.addOrUpdateVisible = true;
-          this.addOrUpdateHandle()
-          break;
-        default:
-          console.log(val)
-      }
-    },
-    handleCancel() {
-      this.$refs.addOrUpdate.formClear()
-      this.addOrUpdateVisible = false
-      this.addOrEditTitle = ''
-    },
-    handleConfirm() {
-      this.$refs.addOrUpdate.dataFormSubmit()
-    },
-    successSubmit() {
-      this.handleCancel()
-      this.getDataList()
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = { ...this.queryParams };
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-        this.exportLoading = true;
-        return this.urlOptions.exportURL(params);
-      }).then(response => {
-        this.$download.excel(response, '工厂.xls');
-        this.exportLoading = false;
-      }).catch(() => { });
-    }
-  }
-}

src/views/order/mixins/code-filter.js

@@ -1,73 +0,0 @@
-
-/*
- * @Date: 2020-12-29 16:49:28
- * @LastEditors: DY
- * @LastEditTime: 2023-09-12 11:13:34
- * @FilePath: \basic-admin\src\filters\basicData\index.js
- * @Description:
- */
-
-const table = {
-  lineStatus: {
-    1: '生产中',
-    2: '停止',
-    3: '未知',
-  },
-  reportType: {
-    1: '日',
-    2: '周',
-    3: '月'
-  },
-  pdType: {
-    1: '原片',
-    0: '深加工',
-  },
-}
-
-// 日期格式化
-export function parseTime(time, pattern) {
-  if (arguments.length === 0 || !time) {
-    return null
-  }
-  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
-    } else if (typeof time === 'string') {
-      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
-    }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    let value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
-    }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}
-export default function (dictTable) {
-  return function (val) {
-    return table?.[dictTable]?.[val]
-  }
-}