Merge pull request 'projects/mescc/zhp' (#103) from projects/mescc/zhp into projects/mescc/develop

Reviewed-on: #103

.env.dev

@@ -1,20 +1,31 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-29 17:06:55
- # @LastEditors: zhp
+ # @LastEditTime: 2024-06-24 16:57:53
+ # @LastEditors: DY
  # @Description:
 ###
 # 开发环境配置
 ENV = 'development'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.61:48080'
-# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
-
+# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
+VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# 闫阳
+# VUE_APP_BASE_API = 'http://192.168.1.81:48080'
+# 徐
+# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
+# 郭
+# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+# sara
+# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
+# 张一丁
+# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
+# 蔡
+# VUE_APP_BASE_API = 'http://192.168.1.54:48080'
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
@@ -22,7 +33,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 VUE_APP_TENANT_ENABLE = true
 
 # 验证码的开关
-VUE_APP_CAPTCHA_ENABLE = true
+VUE_APP_CAPTCHA_ENABLE = false
 
 # 文档的开关
 VUE_APP_DOC_ENABLE = true

.env.front

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/本地环境
 VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'
@@ -14,7 +14,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 VUE_APP_TENANT_ENABLE = true
 
 # 验证码的开关
-VUE_APP_CAPTCHA_ENABLE = true
+VUE_APP_CAPTCHA_ENABLE = false
 
 # 文档的开关
 VUE_APP_DOC_ENABLE = true

.env.prod

@@ -2,7 +2,7 @@
 NODE_ENV = 'production'
 
 # 页面标题
-VUE_APP_TITLE = 玻璃控股信息平台
+VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/生产环境
 VUE_APP_BASE_API = ''
@@ -16,7 +16,7 @@ PUBLIC_PATH = ''
 VUE_APP_TENANT_ENABLE = true
 
 # 验证码的开关
-VUE_APP_CAPTCHA_ENABLE = true
+VUE_APP_CAPTCHA_ENABLE = false
 
 # 文档的开关
 VUE_APP_DOC_ENABLE = false

.env.stage

@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 测试环境配置
 ENV = 'staging'
@@ -16,7 +16,7 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
 VUE_APP_TENANT_ENABLE = true
 
 # 验证码的开关
-VUE_APP_CAPTCHA_ENABLE = true
+VUE_APP_CAPTCHA_ENABLE = false
 
 # 文档的开关
 VUE_APP_DOC_ENABLE = false

.env.static

@@ -4,7 +4,7 @@ NODE_ENV = development
 ENV = 'staging'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 发电玻璃智能管控平台
 
 # 芋道管理系统/测试环境
 VUE_APP_BASE_API = 'http://127.0.0.1:48080'
@@ -18,7 +18,7 @@ VUE_APP_APP_NAME ='/admin-ui-vue2/'
 VUE_APP_TENANT_ENABLE = true
 
 # 验证码的开关
-VUE_APP_CAPTCHA_ENABLE = true
+VUE_APP_CAPTCHA_ENABLE = false
 
 # 文档的开关
 VUE_APP_DOC_ENABLE = true

package.json

@@ -51,10 +51,14 @@
     "crypto-js": "^4.0.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.12",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.6.2",
     "highlight.js": "^11.9.0",
+    "html2canvas": "^1.4.1",
     "js-beautify": "^1.15.1",
     "jsencrypt": "3.3.1",
+    "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.30.1",
@@ -69,7 +73,8 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.2"
+    "vuex": "3.6.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.5.18",

src/api/produceData/index.js

@@ -1,38 +1,57 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 08:54:59
- * @LastEditTime: 2024-05-22 16:31:08
+ * @LastEditTime: 2024-06-19 15:22:10
  * @LastEditors: DY
  * @Description:
  */
 import request from '@/utils/request'
 
-// 查询部门列表
+// 查询生产数据管理分页
 export function getProduceDataPage(data) {
   return request({
-    url: 'ip/prod-output/prodOutputDataPage',
+    url: '/ip/proddata/page',
     method: 'post',
     data: data
   })
 }
 
-export function getProduceDataDetail(id){
+// 查询图数据
+export function getproddata(data) {
   return request({
-     url: '/ip/prod-output/get?id=' + id,
-    method: 'get'
+    url: '/ip/proddata/list',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getProduceDataDetail(data){
+  return request({
+    url: '/ip/proddata/get',
+    method: 'post',
+    data: data
   })
 }
 
 // 导出生产数据
 export function exportOutPutExcel(data) {
   return request({
-    url: '/ip/prod-output/output-export-excel',
+    url: '/ip/proddata/export-excel',
     method: 'post',
     data: data,
     responseType: 'blob'
   })
 }
 
+// 获取生产数据管理列表
+export function prodOutputDataList(data) {
+  return request({
+    url: '/ip/prod-output/prodOutputDataList',
+    method: 'post',
+    data: data
+  })
+}
+
 // 获取生产管理生产目标管理碲化镉工厂分页
 export function prodTargetDiPage(data) {
   return request({
@@ -110,7 +129,7 @@ export function importToTarget(data) {
   return request({
     url: '/ip/prod-target/to-target-import-excel',
     method: 'post',
-    data
+    data: data
   })
 }
 
@@ -119,7 +138,7 @@ export function importDiTarget(data) {
   return request({
     url: '/ip/prod-target/di-target-import-excel',
     method: 'post',
-    data
+    data: data
   })
 }
 
@@ -138,3 +157,12 @@ export function cockpitDataMonitor(data) {
     data: data
   })
 }
+
+export function exportFactoryDataExcel(data) {
+  return request({
+    url: '/ip/prod-output-month/export/excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/api/produceData/order.js

@@ -0,0 +1,60 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 08:54:59
+ * @LastEditTime: 2024-06-03 14:25:02
+ * @LastEditors: DY
+ * @Description:
+ */
+import request from '@/utils/request'
+
+// 查询工单分页
+export function getWorkOrderPage(data) {
+  return request({
+    url: '/ip/prod-work-order/page',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询工单趋势数据
+export function getDailyTrend(data) {
+  return request({
+    url: '/ip/prod-work-order/getDailyTrend',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得工单
+export function getWorkOrderDetail(id){
+  return request({
+     url: '/ip/prod-work-order/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得工单设备加工数量
+export function getEqNum(id){
+  return request({
+     url: '/ip/prod-work-order/getEqNum?workOrderId=' + id,
+    method: 'get'
+  })
+}
+
+// 导出工单数据
+export function exportExcel(data) {
+  return request({
+    url: '/ip/prod-work-order/export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 获得工单数据概览
+export function getOverView(){
+  return request({
+     url: '/ip/prod-work-order/getOverView',
+    method: 'get'
+  })
+}

src/api/report/benchmarking.js

@@ -0,0 +1,219 @@
+// 对标报表的接口
+import request from '@/utils/request'
+
+// 产量对标FTO
+export function fTOReportByDateRangePage(data) {
+  return request({
+    url: '/ip/prod-output/queryOBFTOReportByDateRange',
+    method: 'post',
+    data: data
+  })
+}
+// 产量对标FTO导出
+export function fTOReportByDateRangeExport(data) {
+  return request({
+    url: '/ip/prod-output/queryOBFTOReportByDateRangeExcel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 芯片产量对标
+export function cPReportByDateRangePage(data) {
+  return request({
+    url: '/ip/prod-output/queryCPReportByDateRange',
+    method: 'post',
+    data: data
+  })
+}
+// 芯片产量对标导出
+export function cPReportByDateRangeExport(data) {
+  return request({
+    url: '/ip/prod-output/queryCPReportByDateRangeExport',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 标准组件产量对标
+export function sCPReportByDateRangePage(data) {
+  return request({
+    url: '/ip/prod-output/querySCPReportByDateRange',
+    method: 'post',
+    data: data
+  })
+}
+// 标准组件产量对标导出
+export function sCPReportByDateRangeExport(data) {
+  return request({
+    url: '/ip/prod-output/querySCPReportByDateRangeExport',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 转化效率对标
+export function componentconvertrateCPage(data) {
+  return request({
+    url: '/ip/componentconvertrate-compare/page',
+    method: 'post',
+    data: data
+  })
+}
+// 转化效率对标导出
+export function componentconvertrateCExport(data) {
+  return request({
+    url: '/ip/componentconvertrate-compare/export-excel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 芯片良率对标
+export function chipyieldRatePage(data) {
+  return request({
+    url: '/ip/chipyield-rate/page',
+    method: 'post',
+    data: data
+  })
+}
+// 芯片良率对标导出
+export function chipyieldRateExport(data) {
+  return request({
+    url: '/ip/chipyield-rate/export-excel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 标准组件良率对标
+export function componentyieldRatePage(data) {
+  return request({
+    url: '/ip/componentyield-rate/page',
+    method: 'post',
+    data: data
+  })
+}
+// 标准组件良率对标导出
+export function componentyieldRateExport(data) {
+  return request({
+    url: '/ip/componentyield-rate/export-excel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+
+// 稼动率对标
+export function utilzationComparePage(data) {
+  return request({
+    url: '/ip/utilzation-compare/page',
+    method: 'post',
+    data: data
+  })
+}
+// 稼动率对标导出
+export function utilzationCompareExport(data) {
+  return request({
+    url: '/ip/utilzation-compare/export-excel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 芯片OEE对标
+export function chipoeeComparePage(data) {
+  return request({
+    url: '/ip/chipoee-compare/page',
+    method: 'post',
+    data: data
+  })
+}
+// 芯片OEE对标导出
+export function chipoeeCompareExport(data) {
+  return request({
+    url: '/ip/chipoee-compare/export-excel',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 封装OEE对标
+export function componentOEEPage(data) {
+  return request({
+    url: '/ip/component-oee/page',
+    method: 'post',
+    data: data
+  })
+}
+// 封装OEE对标导出
+export function componentOEEExport(data) {
+  return request({
+    url: '/ip/component-oee/export',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 芯片人均产量
+export function chipAnnualAverageProductionPage(data) {
+  return request({
+    url: '/ip/chip-annual-average-production/page',
+    method: 'post',
+    data: data
+  })
+}
+// 芯片人均产量导出
+export function chipAnnualAverageProductionExport(data) {
+  return request({
+    url: '/ip/chip-annual-average-production/export',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 标准组件人均产量对标
+export function componentAapPage(data) {
+  return request({
+    url: '/ip/prod-output/componentAap',
+    method: 'post',
+    data: data
+  })
+}
+// 标准组件人均产量对标导出
+export function componentAapExport(data) {
+  return request({
+    url: '/ip/prod-output/componentAap-export',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}
+
+// 指标完成情况对标
+export function targetCompletionPage(data) {
+  return request({
+    url: '/ip/prod-output/TargetCompletion',
+    method: 'post',
+    data: data
+  })
+}
+// 指标完成情况对标导出
+export function targetCompletionExport(data) {
+  return request({
+    url: '/ip/prod-output/TargetCompletion-export',
+    method: 'post',
+    responseType: 'blob',
+    data: data
+  })
+}

src/api/report/index.js

@@ -0,0 +1,95 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-06-17 09:41:03
+ * @LastEditTime: 2024-06-20 15:39:21
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+export function getComprehensiveDataPage(data) {
+  return request({
+    url: 'ip/comprehensive/data/get/comprehensive/data',
+    method: 'post',
+    data: data
+  })
+}
+
+export function exportComprehensiveDataPage(data) {
+   return request({
+    url: 'ip/comprehensive/data/export/comprehensive/data',
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+  })
+}
+
+
+export function getProduceTransData(data) {
+   return request({
+    url: 'ip/prod-output/queryYCEReportByDateRange',
+    method: 'post',
+    data: data
+  })
+}
+
+export function exportProduceTransData(data) {
+   return request({
+    url: 'ip/prod-output/queryYCEReportByDateRangeExcel',
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+  })
+}
+
+
+export function getProduceSituationData(data) {
+   return request({
+    url: 'ip/production/situation/get/production/situation',
+    method: 'post',
+    data: data
+  })
+}
+
+export function exportProduceSituationData(data) {
+   return request({
+    url: 'ip/production/situation/export/production/situation',
+    method: 'post',
+     data: data,
+      responseType: 'blob',
+  })
+}
+
+export function getProductionSituationMWData(data) {
+   return request({
+    url: 'ip/production/situation/power/get/production/situation',
+    method: 'post',
+    data: data
+  })
+}
+
+export function exportProductionSituationMWData(data) {
+   return request({
+    url: 'ip/production/situation/power/export/production/situation',
+    method: 'post',
+     data: data,
+      responseType: 'blob',
+  })
+}
+
+
+export function getProductionYieldSituationMWData(data) {
+   return request({
+    url: 'ip/product/yield/get/production/situation',
+    method: 'post',
+    data: data
+  })
+}
+
+export function exportProductionYieldSituationMWData(data) {
+   return request({
+    url: 'ip/product/yield/export/production/situation',
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+  })
+}

src/assets/icons/svg/darkHome.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="01数字驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="产量驾驶舱" transform="translate(-1438.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-20" transform="translate(1438.000000, 8.000000)">
+                <g id="编组" transform="translate(0.000000, 4.000000)">
+                    <rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.1"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/factoryWorkOrder.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 15</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-714.000000, -131.000000)">
+            <g id="编组-15" transform="translate(714.000000, 131.000000)">
+                <g id="编组-13备份" fill="#0B58FF" opacity="0.227236793">
+                    <rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect>
+                </g>
+                <g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect>
+                    <path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/workProcess.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-474.000000, -131.000000)">
+            <g id="编组-13" transform="translate(474.000000, 131.000000)">
+                <rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect>
+                <g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/styles/index.scss

@@ -232,6 +232,8 @@ aside {
   background-color: #d9d9d9;
 }
 
+// 大屏滚动表格
+
 .no-data-bg {
   position: absolute;
   display: inline-block;
@@ -252,3 +254,13 @@ aside {
     letter-spacing: 1px;
   }
 }
+
+.dv-scroll-board .rows .ceil,
+.dv-scroll-board .header .header-item {
+  border-right: 1px solid rgba(13, 23, 40, 1);
+}
+
+.dv-scroll-board .rows .ceil:last-child,
+.dv-scroll-board .header .header-item:last-child {
+  border-right: none;
+}

src/components/Breadcrumb/index.vue

@@ -1,11 +1,13 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
-        item.meta.title
-      }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      <el-breadcrumb-item v-for=" (item, index) in levelList" :key="item.path">
+        <span :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}"
+          v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{
+          item.meta.title
+          }}</span>
+        <a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else
+          @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -18,7 +20,29 @@ export default {
       levelList: null
     }
   },
+  computed: {
+    changeColor() {
+      // console.log(this.$route);
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
   watch: {
+    changeColor(val) {
+      if (val == true) {
+        let item = document.getElementsByClassName('el-breadcrumb__separator')
+        // let item  =document.getElementsByClassName('')
+        item[0].style.color = rgba(255, 255, 255, 0.45)
+        item[1].style.color = rgba(255, 255, 255, 0.45)
+      } else {
+        let item = document.getElementsByClassName('el-breadcrumb__separator')
+        item[0].style.color = ''
+          item[1].style.color = ''
+      }
+    },
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
       if (route.path.startsWith('/redirect/')) {
@@ -70,13 +94,20 @@ export default {
   margin-left: 8px;
 
   .no-redirect {
-    color: rgba(0, 0, 0, 0.65);
+    color: rgba(0, 0, 0, .45);
     cursor: text;
   }
 }
-
 .app-breadcrumb .el-breadcrumb__inner a,
 .el-breadcrumb__inner.is-link {
-  color: rgba(0, 0, 0, 0.45);
+  color:rgba(0, 0, 0, 0.65)
 }
 </style>
+<!-- <style lang="scss">
+.changeColor {
+  --theme-color: rgba(255, 255, 255, 0.45);
+}
+.el-breadcrumb__separator {
+  color:var(--theme-color);
+}
+</style> -->

src/components/Hamburger/index.vue

@@ -1,14 +1,16 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-11 13:56:19
+ * @LastEditors: zhp
+ * @Description:
+-->
 <template>
   <div style="padding: 0 15px;" @click="toggleClick">
-    <svg
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
+      width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' ">
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
   </div>
 </template>
@@ -22,6 +24,15 @@ export default {
       default: false
     }
   },
+  computed: {
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
   methods: {
     toggleClick() {
       this.$emit('toggleClick')

src/layout/components/Navbar.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="navbar">
+  <div ref="navbar" class="navbar"
+    :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
       @toggleClick="toggleSideBar" />
 
@@ -41,6 +42,13 @@ export default {
       'nickname',
       'device'
     ]),
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    },
     setting: {
       get() {
         return this.$store.state.settings.showSettings
@@ -58,6 +66,23 @@ export default {
       }
     }
   },
+  watch: {
+    // changeColor: {
+    //   handler(val){
+    //     if (val == true) {
+    //       let svg = document.getElementsByClassName('hamburger')
+    //       console.log('svg', svg)
+    //       svg[0].style.color = 'rgba(255, 255, 255, 1)'
+    //       svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
+    //     } else {
+    //       let svg = document.getElementsByClassName('hamburger')
+    //       console.log('svg', svg);
+    //       svg[0].setAttribute('fill', '')
+    //     }
+    //   },
+    //   immediate: true, //立即执行
+    // }
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')

src/layout/components/NavbarRight.vue

@@ -1,25 +1,31 @@
 <template>
   <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
     <div class="home-icon" v-if='blackTitle'>
-      <svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" />
+      <svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'"
+        style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" />
     </div>
     <div class="time-msg">
-      <div class="line1">{{ timeZone }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
-      <div class="line2">{{ topDate }}</div>
+      <div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone
+        }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
+      <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div>
     </div>
     <div class="base-msg">
       <div class="avatar">
         <el-dropdown>
           <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item>
-            <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item>
+            <el-dropdown-item>
+              <svg-icon icon-class="helpbtn" />帮助文档
+            </el-dropdown-item>
+            <el-dropdown-item @click.native="logout">
+              <svg-icon icon-class="exitbtn" />退出登录
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
       <div class="use-msg">
-        <div class="line1">{{ nickname }}</div>
-        <div class="line2">{{ dept }}</div>
+        <div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div>
+        <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div>
       </div>
     </div>
   </div>
@@ -48,6 +54,15 @@ export default {
       }
     }
   },
+  computed: {
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
   created() {
     // this.getUserMsg()
     this.getTime()
@@ -124,4 +139,4 @@ export default {
     opacity: 0.65;
   }
 }
-</style>
+</style>

src/layout/components/Sidebar/Logo.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import logoImg from "@/assets/logo/logo.png";
+import logoImg from "@/assets/logo/cnbm.png";
 import variables from "@/assets/styles/variables.scss";
 
 export default {
@@ -70,7 +70,7 @@ export default {
   },
   data() {
     return {
-      title: "玻璃控股信息平台",
+      title: "发电玻璃智能管控平台",
       logo: logoImg,
     };
   },
@@ -104,7 +104,7 @@ export default {
       width: 32px;
       height: 32px;
       vertical-align: middle;
-      margin-right: 12px;
+      margin-right: 10px;
     }
 
     & .sidebar-title {
@@ -113,7 +113,7 @@ export default {
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 19px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/layout/components/TagsView/ScrollPane.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-04 10:44:35
+ * @LastEditors: zhp
+ * @Description:
+-->
 <template>
   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
     <slot />
@@ -17,7 +24,9 @@ export default {
   computed: {
     scrollWrapper() {
       return this.$refs.scrollContainer.$refs.wrap
-    }
+    },
+  },
+  watch: {
   },
   mounted() {
     this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)

src/layout/components/TagsView/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="tags-view-container" class="tags-view-container">
+  <div ref="tagsViewContainer"
+    :style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container"
+    class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@@ -36,6 +38,13 @@ export default {
     }
   },
   computed: {
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    },
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
     },
@@ -44,9 +53,31 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme;
-    }
+    },
   },
   watch: {
+    changeColor(val) {
+      if (val == true) {
+        // console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
+        // this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+        // this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
+        var tag = document.getElementsByClassName("tags-view-item")
+        console.log('tag', tag)
+        for (let i in tag) {
+          tag[i].classList.add("changeColor")
+          // tag[i].classList.remove("default")
+        }
+        // console.log('this.$refs.scrollContainer', this.$refs.tag);
+      } else {
+        // this.$refs.tagsViewContainer.style.backgroundColor = ''
+        // this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
+        var tag = document.getElementsByClassName("tags-view-item")
+        for (let i in tag) {
+          tag[i].classList.remove("changeColor")
+          // tag[i].classList.add("default")
+        }
+      }
+    },
     $route() {
       this.addTags()
       this.moveToCurrentTag()
@@ -60,6 +91,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.$route, this.changeColor);
     this.initTags()
     this.addTags()
   },
@@ -68,11 +100,23 @@ export default {
       return route.path === this.$route.path
     },
     activeStyle(tag) {
-      if (!this.isActive(tag)) return {};
-      return {
-        "background-color": this.theme,
-        "border-color": this.theme
-      };
+      if (this.changeColor) {
+        if (!this.isActive(tag)) return {
+          "background-color": 'rgba(0, 59, 115, 1)',
+          "border-color": 'rgba(0, 59, 115, 1)',
+          "color": 'rgba(255, 255, 255, 1)'
+        };
+        return {
+          "background-color": this.theme,
+          "border-color": this.theme
+        };
+      } else {
+        if (!this.isActive(tag)) return {};
+        return {
+          "background-color": this.theme,
+          "border-color": this.theme
+        };
+      }
     },
     isAffix(tag) {
       return tag.meta && tag.meta.affix
@@ -230,6 +274,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// :root{
+//   --theme-color: rgba(0, 0, 0, 0.45);
+//   --theme-background: #f4f4f4ff;
+// }
+.changeColor{
+  --theme-background: rgba(0, 59, 115, 1);
+  --theme-color: rgba(255, 255, 255, 1);
+}
 .tags-view-container {
   height: 42px;
   width: 100%;
@@ -245,8 +297,8 @@ export default {
       cursor: pointer;
       height: 28px;
       line-height: 28px;
-      color: rgba(0, 0, 0, 0.45);
-      background: #F4F4F4FF;
+      color: var(--theme-color,rgba(0, 0, 0, 0.45));
+      background:var(--theme-background,#f4f4f4ff);
       padding: 0 8px 0 12px;
       font-size: 14px;
       letter-spacing: 1px;
@@ -331,7 +383,7 @@ export default {
       .el-icon-close {
         &:hover {
           background-color: #fff;
-          color: #409eff;
+          color: rgba(62, 142, 247, 1);
         }
       }
     }

src/layout/index.vue

@@ -2,7 +2,8 @@
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer"
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <tags-view v-if="needTagsView" />
@@ -39,6 +40,13 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    changeColor() {
+      if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
+        return true
+      } else {
+        return false
+      }
+    },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
@@ -51,6 +59,16 @@ export default {
       return variables;
     }
   },
+  watch: {
+    // changeColor(val) {
+    //   if (val == true) {
+    //     // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
+    //     this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
+    //   } else {
+    //     this.$refs.mainContainer.style.backgroundColor = ''
+    //   }
+    // },
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

src/mixins/chart.js

@@ -8,10 +8,14 @@ function __resizeHandler(entries) {
           ? entry.contentBoxSize[0]
           : entry.contentBoxSize;
         this.chart_mixin_chartInstance.resize({
-          width:
-            contentBoxSize.inlineSize < this.MIN_WIDTH
-              ? this.MIN_WIDTH
-              : contentBoxSize.inlineSize,
+          // width:
+          //   contentBoxSize.inlineSize < this.MIN_WIDTH
+          //     ? this.MIN_WIDTH
+          //     : contentBoxSize.inlineSize,
+        // width:
+        //   entry.contentRect.width < this.MIN_WIDTH
+        //     ? this.MIN_WIDTH
+        //     : entry.contentRect.width,
           height: contentBoxSize.blockSize,
         });
     } else {

src/router/index.js

@@ -127,7 +127,8 @@ Router.prototype.push = function push(location) {
 
 export default new Router({
   base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
-  mode: "history", // 去掉url中的#
+  // mode: "history", // 去掉url中的#
+  mode: "hash",
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes,
 });

src/store/modules/home.js

@@ -92,10 +92,12 @@ const actions = {
   /** 初始化首页数据 */
   async initHome({ commit }) {
     const dataArr = await getHomeInfo();
-    console.log('dataArr',dataArr);
+    // console.log('dataArr', dataArr);
+      let preData = dataArr.previousProdOutputOutDO
+      let preFtoData = dataArr.previousProdOutputFtoDO
     // const targetArr = await getHomeInfo();
-    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO
-);
+    // factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData
+    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,preData,preFtoData);
     commit("SET_HOME_INFO", payload);
   },
   /** 初始化驾驶舱数据 */
@@ -125,6 +127,7 @@ const actions = {
     //   const payload = handler(factoryData)
     //   commit("SET_COPILOT_INFO", { type, payload });
     // } else {
+      // console.log('factoryList',factoryList)
       let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
       let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
       let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
@@ -286,7 +289,7 @@ function splitCurrentAndPreviousB(factoryListResponse) {
 }
 
 function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  console.log('工厂',targetListResponse);
+  // console.log('工厂',preData);
 
   // 初始数据
   const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
@@ -340,17 +343,24 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
   //     componentYieldRate: 0.73,
   //   },
   // ];
-  if (preData && preData[0] != null) {
+  if (preData) {
     for (const factory of preData) {
-      const fId = getPreFactoryId(factory);
-         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      const fId = getPreFactoryId(factory)
+      // console.log('factory',factory.previousYearOee);
+        //  chipInvest.previous[fId] = factory.previousYearInputNumber;
       // chipOeeRate.current[fId] = factory.oee;
-      chipOeeRate.previous[fId] = factory.previousYearOee;
+      if (factory.previousGlassType === 0) {
+         chipOeeRate.previous[fId] = factory.previousYearOee;
+      }
+      // chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
-      transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
+        if (factory.previousGlassType === 1) {
+        transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency;
+      }
+      // transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
       // 芯片良率 与 标准组件良率
-      if (![0, 1].includes(factory.glassType)) continue;
-      const _t = [chipRate, stdRate][factory.glassType]
+      if (![0, 1].includes(factory.previousGlassType)) continue;
+      const _t = [chipRate, stdRate][factory.previousGlassType]
       // _t.current[fId] = factory.yieldRate ;
       _t.previous[fId] = factory.previousYearYieldRate ;
       // }
@@ -375,10 +385,14 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
         transformRate.target[fId] = componentConversionEfficiency
       }
       // 芯片OEE
-      chipOeeRate.current[fId] = factory.oee;
+      if (factory.glassType === 0) {
+         chipOeeRate.current[fId] = factory.oee;
+      }
       // chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
-      transformRate.current[fId] = factory.componentConversionEfficiency;
+      if (factory.glassType === 1) {
+        transformRate.current[fId] = factory.componentConversionEfficiency;
+      }
       // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
@@ -386,6 +400,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
       _t.current[fId] = factory.yieldRate ;
       // _t.previous[fId] = factory.previousYearYieldRate ;
     }
+    // console.log('chipOeeRate',stdRate);
     // console.log('chipOeeRate',chipOeeRate);
     return {
       chipOeeRate,
@@ -397,12 +412,12 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
 }
 
 function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  console.log('prodOutputFtoListRes',preData);
+  // console.log('prodOutputFtoListRes',preFtoData);
   // 初始数据
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
-   if (prodOutputFtoListRes) {
+   if (prodOutputFtoListRes.length !== 0 ) {
     for (const factory of prodOutputFtoListRes) {
-      console.log(factory);
+      // console.log(factory);
       const fId = getFactoryId(factory);
       // const preFId = getPreFactoryId(factory);
       // if (fId) {
@@ -415,7 +430,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
    }
    if (preFtoData) {
     for (const factory of preFtoData) {
-      console.log(factory);
+      // console.log(factory);
       const fId = getPreFactoryId(factory);
       // const preFId = getPreFactoryId(factory);
       // if (fId) {
@@ -426,10 +441,13 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       // }
     }
    }
-    if (preData && preData[0] != null) {
+    if (preData) {
     for (const factory of preData) {
       const fId = getPreFactoryId(factory);
-         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      if (factory.previousGlassType === 0) {
+      chipInvest.previous[fId] = factory.previousYearInputNumber
+      }
+        //  chipInvest.previous[fId] = factory.previousYearInputNumber;
       if (![0, 1, 2].includes(factory.previousGlassType)) continue;
       const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType];
       // if (fId) {
@@ -442,11 +460,14 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
     }
   }
     // console.log('ftoInvest',ftoInvest)
-  if (factoryListResponse && factoryListResponse[0] != null) {
+  if (factoryListResponse) {
     for (const factory of factoryListResponse) {
       const fId = getFactoryId(factory);
+      // console.log('factory.inputNumber', factory, fId);
+      if (factory.glassType === 0) {
+      chipInvest.current[fId] = factory.inputNumber
+      }
       // const preFId = getPreFactoryId(factory);
-
       // 获取目标值
       if (targetListResponse) {
         const { chipYield, componentYield, bipvProductOutput } =
@@ -456,7 +477,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
         bipvOutput.target[fId] = bipvProductOutput;
       }
       // 芯片投入
-          chipInvest.current[fId] = factory.inputNumber;
 
       // 产出数据, 0 - （玻璃）芯片产出， 1 - 标准组件产出， 2 - BIPV产出
       // 因为后端写的垃圾数据，所以这里要做一下判断
@@ -464,6 +484,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
         _t.current[fId] = factory.outputNumber;
     }
+    // console.log('chipInvest',ftoInvest);
     return {
       chipInvest,
       // ftoInvest,
@@ -472,15 +493,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       stdOutput,
       bipvOutput,
     };
-  }else{
-      return {
-      chipInvest,
-      // ftoInvest,
-      ftoInvest,
-      chipOutput,
-      stdOutput,
-      bipvOutput,
-    }
   }
 }
 

src/styles/index.scss

@@ -163,4 +163,4 @@ textarea {
 
 .el-upload__tip {
   line-height: 1.2;
-}
+}

src/utils/constants.js

@@ -74,9 +74,9 @@ export const SystemDataScopeEnum = {
 /**
  * 工厂名称
  */
-export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
+// export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
 
-export const dhgfactoryList =[
+export const factoryArray1 =[
   {
     name: '瑞昌中建材光电材料有限公司',
     id: 0
@@ -97,12 +97,43 @@ export const dhgfactoryList =[
     name: '成都中建材光电材料有限公司',
     id: 4
   },
+  {
+    name: '凯盛光伏材料有限公司',
+    id: 5
+  },
   {
     name: '蚌埠兴科玻璃有限公司',
     id: 6
   }
 ]
 
+// export const dhgfactoryList =[
+//   {
+//     name: '瑞昌中建材光电材料有限公司',
+//     id: 0
+//   },
+//   {
+//     name: '邯郸中建材光电材料有限公司',
+//     id: 1
+//   },
+//   {
+//     name: '中建材株洲光电材料有限公司',
+//     id: 2
+//   },
+//   {
+//     name: '佳木斯中建材光电材料有限公司',
+//     id: 3
+//   },
+//   {
+//     name: '成都中建材光电材料有限公司',
+//     id: 4
+//   },
+//   {
+//     name: '蚌埠兴科玻璃有限公司',
+//     id: 6
+//   }
+// ]
+
 export const tyjxfactoryList =[
   {
     name: '凯盛光伏材料有限公司',
@@ -110,6 +141,32 @@ export const tyjxfactoryList =[
   }
 ]
 
+// 暂时只有瑞昌邯郸数据
+export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司']
+
+export const factoryListabbr =['瑞昌', '邯郸']
+export const factoryArray =[
+  {
+    name: '瑞昌中建材光电材料有限公司',
+    id: 0
+  },
+  {
+    name: '邯郸中建材光电材料有限公司',
+    id: 1
+  }
+]
+
+export const dhgfactoryList =[
+  {
+    name: '瑞昌中建材光电材料有限公司',
+    id: 0
+  },
+  {
+    name: '邯郸中建材光电材料有限公司',
+    id: 1
+  }
+]
+
 /**
  * 代码生成模板类型
  */

src/views/components/ChartContainer.vue

@@ -1,8 +1,16 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-10 15:17:28
+ * @LastEditTime: 2024-07-19 15:18:00
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<!--
     filename: ChartContainer.vue
     author: liubin
     date: 2024-04-10 08:54:33
-    description: 
+    description:
     todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
 -->
 
@@ -43,7 +51,7 @@ export default {
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 80%;
   height: 8px;
 }
 

src/views/copilot/components/BarChartBase.vue

@@ -9,7 +9,7 @@
   <chart-container class="bar-chart-base">
     <div class="legend">
       <span v-for="item in legend" :key="item.label" class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
     <div ref="chart" style="height:94%;width:100%"></div>
   </chart-container>
@@ -62,7 +62,36 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -73,23 +102,24 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/片",
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            align: "right",
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -107,7 +137,7 @@ export default {
           {
             name: "", // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -142,7 +172,7 @@ export default {
           {
             name: "", // this.series[1].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -187,19 +217,19 @@ export default {
       this.canvasReset()
     },
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+      this.options.series.map((item) => {
+        item.barWidth = val ? 18 : 16;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions);
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
+      this.initChart(this.options);
       // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
       // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       // this.initChart(this.actualOptions);
       this.canvasReset()
     },
@@ -208,14 +238,14 @@ export default {
         this.initChart(this.options);
         return;
       }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      console.log('actualOptions', this.options)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options));
+      // console.log('actualOptions', this.options)
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data || [];
+      this.options.series[1].name = val?.[1]?.name || "";
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -224,7 +254,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -248,7 +278,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.chart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/components/Container.vue

@@ -8,9 +8,7 @@
 <template>
   <div class="copilot-container">
     <!-- refresh btn  -->
-    <button
-      v-if="0"
-      style="
+    <button v-if="0" style="
         appearance: none;
         outline: none;
         border: none;
@@ -20,22 +18,11 @@
         position: absolute;
         top: 8px;
         right: 8px;
-      "
-      @click="$emit('refresh')"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        style="width: 24px; height: 24px"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-        />
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
       </svg>
     </button>
     <!-- decoration  -->
@@ -44,19 +31,13 @@
     <div v-if="side == 'left'" class="corner bl"></div>
     <div v-if="side == 'right'" class="corner br"></div>
     <!-- content  -->
-    <div
-      class="container-head"
-      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
-    >
-      <Icon :icon="icon"></Icon>
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
       <h2 class="container-title">{{ title }}</h2>
     </div>
-    <div
-      class="container-body"
-      :class="[
+    <div class="container-body" :class="[
         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
-      ]"
-    >
+      ]">
       <slot />
     </div>
   </div>
@@ -92,6 +73,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .copilot-container {
   height: 0;
   flex: 1;
@@ -141,7 +123,7 @@ export default {
     gap: 8px;
 
     .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
       line-height: 1.39vw;
       font-weight: normal;
       letter-spacing: 2px;
@@ -161,8 +143,8 @@ export default {
     position: absolute;
     // width: 16px;
     // height: 16px;
-    width: 0.95vw;
-    height: 0.95vw;
+    width: 0.7vw;
+    height: 0.7vw;
   }
 
   .corner.tl {

src/views/copilot/components/ContainerIcon.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-05-07 16:54:54
+ * @LastEditTime: 2024-07-09 16:55:58
  * @LastEditors: zhp
  * @Description:
 -->
@@ -61,8 +61,8 @@ export default {
 .container-icon {
   //   width: 32px;
   //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
   background: #ccc2;
 }
 </style>

src/views/copilot/components/CopilotHeader.vue

@@ -19,7 +19,7 @@
       <CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
         @click="() => $emit('update:period', i)" />
       <div class="btn-group">
-        <button type="button" class="export-btn" />
+        <!-- <button type="button" class="export-btn" @click="handleExport" /> -->
         <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
           @click="toggleFullScreen" />
         <!-- <button class="times-btn"> {{ times }} </button> -->
@@ -31,6 +31,7 @@
 <script>
 import CopilotButton from "./button.vue";
 import screenfull from "screenfull";
+import { exportFactoryDataExcel } from "@/api/produceData";
 
 export default {
   name: "CopilotHeader",
@@ -58,6 +59,15 @@ export default {
   },
   computed: {},
   methods: {
+    handleExport() {
+      exportFactoryDataExcel({
+        // factoryId: this.companyId,
+        timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
+      }).then(response => {
+        this.$download.excel(response, `生产数据.xls`);
+        // this.exportLoading = false;
+      }).catch(() => { });
+    },
     getTimes() {
       setInterval(this.getTimesInterval, 60000);
     },

src/views/copilot/components/FactoryDataHeader.vue

@@ -4,18 +4,22 @@
       <!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
         @click="() => $emit('update:active', i)" />
       <div class="type-name"></div> -->
-      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
-        @click="() => $emit('update:than', i)" />
-      <div class="btn-group">
-        <button type="button" class="export-btn" />
-        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          @click="toggleFullScreen" />
-      </div>
+      <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
+        @click="() => $emit('update:period', i.id)" />
+      <!-- <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+        @click="() => $emit('update:than', i)" /> -->
     </section>
     <div class="page-title">{{ companyName }}</div>
     <section class="menu2">
-      <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
-        @click="() => $emit('update:period', i.id)" />
+      <div class="btn-group">
+        <el-tooltip v-if="showPeriod" class="item" effect="dark" content="导出" placement="top">
+          <button type="button" class="export-btn" @click="handleExport" />
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="isFullscreen  === false ? '退出全屏' : '全屏'" placement="top">
+          <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
+            @click="toggleFullScreen" />
+        </el-tooltip>
+      </div>
     </section>
   </div>
 </template>
@@ -25,6 +29,8 @@
 import FactorySelect from "./FactorySelect.vue";
 import screenfull from "screenfull";
 import CopilotButton from "./button.vue";
+import { exportFactoryDataExcel } from "@/api/produceData";
+
 export default {
   name: "FactoryDataHeader",
   components: { CopilotButton, FactorySelect },
@@ -42,9 +48,20 @@ export default {
       type: String,
     },
   },
+  watch: {
+    period(val) {
+      if (val != 1) {
+        this.showPeriod = true
+      } else {
+        this.showPeriod = false
+      }
+    }
+  },
   data() {
     return {
       isFullscreen: false,
+      content: '全屏',
+      showPeriod:false,
       dataList: [
         { id: 1, name: "日" },
         { id: 2, name: "周" },
@@ -55,6 +72,22 @@ export default {
   },
   computed: {},
   methods: {
+    handleExport() {
+      // if (this.period != 1) {
+        this.showPeriod = true
+        exportFactoryDataExcel({
+          factoryId: this.companyId,
+          timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
+          compare: this.than === '同比' ? 1 : 2
+        }).then(response => {
+          this.$download.excel(response, `${this.companyName}生产数据.xls`);
+          // this.exportLoading = false;
+        }).catch(() => { });
+      // } else {
+      //   this.showPeriod = false
+      // }
+
+    },
     toggleFullScreen() {
       this.isFullscreen = !this.isFullscreen;
 
@@ -90,14 +123,16 @@ export default {
   gap: 8px;
 }
 .factory-header > .menu2 {
-  width: 26vw;
+  width: 20vw;
   display: flex;
+  justify-content: flex-end;
   align-items: center;
   gap: 8px;
 }
 
 .export-btn,
 .fullscreen-btn {
+  /* float: right; */
   width: 32px;
   height: 32px;
   margin-left: 24px;

src/views/copilot/components/bottomLeftContainer.vue

@@ -0,0 +1,226 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-09 15:07:50
+ * @LastEditTime: 2024-07-09 15:41:38
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-05 09:43:51
+ * @LastEditTime: 2024-07-09 15:06:52
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 90%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 8%;
+    bottom: 0;
+    background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.95vw;
+    height: 0.95vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/bottomRightContainer.vue

@@ -0,0 +1,219 @@
+<!--
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description:
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 95%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 3%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.95vw;
+    height: 0.95vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/button.vue

@@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-05-31 13:26:32
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
     filename: button.vue
     author: liubin
     date: 2024-04-16 15:02:34
-    description: 
+    description:
 -->
 
 <template>
@@ -50,7 +57,7 @@ button {
   padding: 12px;
   padding-left: 20px;
   color: #fff;
-  font-size: 22px;
+  font-size: 18px;
   letter-spacing: 10px;
   cursor: pointer;
 }
@@ -68,8 +75,8 @@ button {
 .copilot-btn::after {
   content: "";
   position: absolute;
-  width: 16px;
-  height: 16px;
+  width: 0.7vw;
+  height: 0.7vw;
   top: 0;
   background: transparent;
   border-style: solid;

src/views/copilot/components/efficiencyLeftContainer.vue

@@ -0,0 +1,220 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-09 15:15:00
+ * @LastEditTime: 2024-07-19 16:11:37
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 5%,
+        #024798 10%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 5%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 90%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 10%;
+    bottom: 0;
+    background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/efficiencyRightContainer.vue

@@ -0,0 +1,220 @@
+<!--
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description:
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 5%,
+    #024798 10%,
+    transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 95%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 3%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/ftoBarChartBase.vue

@@ -1,22 +1,16 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:49:14
- * @LastEditTime: 2024-05-29 10:56:21
+ * @LastEditTime: 2024-07-19 16:08:27
  * @LastEditors: zhp
  * @Description:
 -->
-<!--
-    filename: BarChartBase.vue
-    author: liubin
-    date: 2024-04-10 08:59:28
-    description:
--->
 
 <template>
   <chart-container class="bar-chart-base">
     <div class="legend">
       <span v-for="item in legend" :key="item.label" class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
     <div ref="ftoChart" style="height:94%;width:100%"></div>
   </chart-container>
@@ -69,7 +63,36 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -80,23 +103,24 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/片",
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            align: "right",
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -114,7 +138,7 @@ export default {
           {
             name: "", // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -149,7 +173,7 @@ export default {
           {
             name: "", // this.series[1].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -194,19 +218,19 @@ export default {
       this.canvasReset()
     },
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+      this.options.series.map((item) => {
+        item.barWidth = val ? 18 : 16;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions);
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
+      this.initChart(this.options);
       // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
       // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       // this.initChart(this.actualOptions);
       this.canvasReset()
     },
@@ -215,14 +239,14 @@ export default {
         this.initChart(this.options);
         return;
       }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      console.log('actualOptions', this.options)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options));
+      // console.log('actualOptions', this.options)
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val[1].data;
+      this.options.series[1].name = val[1].name;
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -231,7 +255,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -255,7 +279,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.ftoChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/components/leftContainer.vue

@@ -0,0 +1,218 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-05 09:43:51
+ * @LastEditTime: 2024-07-19 16:11:59
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 90%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 7%;
+    bottom: 0;
+    background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/rightContainer.vue

@@ -0,0 +1,220 @@
+<!--
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description:
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 10%,
+    #024798 20%,
+    transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 95%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 1%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/components/twoContainer.vue

@@ -1,15 +1,22 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-05 09:48:37
+ * @LastEditTime: 2024-07-19 16:14:07
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
     filename: Container.vue
     author: liubin
     date: 2024-04-09 10:44:09
-    description: 
+    description:
 -->
 
 <template>
   <div class="copilot-container">
     <!-- refresh btn  -->
     <button
-      v-if="false"
+      v-if="0"
       style="
         appearance: none;
         outline: none;
@@ -22,7 +29,7 @@
         right: 8px;
       "
       @click="$emit('refresh')"
-    >
+    >rotate
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -41,14 +48,14 @@
     <!-- decoration  -->
     <div class="corner tl"></div>
     <div class="corner tr"></div>
-    <div v-if="side == 'left'" class="corner bl"></div>
-    <div v-if="side == 'right'" class="corner br"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
     <!-- content  -->
     <div
       class="container-head"
       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
     >
-      <Icon :icon="icon"></Icon>
+      <Icon  :icon="icon"></Icon>
       <h2 class="container-title">{{ title }}</h2>
     </div>
     <div
@@ -92,6 +99,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+
 .copilot-container {
   height: 0;
   flex: 1;
@@ -99,23 +108,25 @@ export default {
   flex-direction: column;
   position: relative;
   box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+          #024798 20%,
+          transparent 90%) 1;
   backdrop-filter: blur(4px);
 
   &::before {
     content: "";
     position: absolute;
     display: inline-block;
-    height: 100%;
+    height: 92%;
     width: 0.11415vw;
     border-radius: 2px;
     top: 0%;
     left: 0;
-    background: radial-gradient(
-      circle at center,
-      #024798 2%,
-      #024798 30%,
-      transparent
-    );
+    background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
     z-index: 1;
   }
 
@@ -126,7 +137,7 @@ export default {
     width: 60%;
     height: 0.31415vh;
     border-radius: 2px;
-    left: 8%;
+    left: 6%;
     bottom: 0;
     background: linear-gradient(to right, #024798, transparent);
     z-index: 0;
@@ -141,7 +152,7 @@ export default {
     gap: 8px;
 
     .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
       line-height: 1.39vw;
       font-weight: normal;
       letter-spacing: 2px;
@@ -161,8 +172,8 @@ export default {
     position: absolute;
     // width: 16px;
     // height: 16px;
-    width: 0.95vw;
-    height: 0.95vw;
+    width: 0.7vw;
+      height: 0.7vw;
   }
 
   .corner.tl {

src/views/copilot/container.vue

@@ -25,7 +25,7 @@ import YieldCopilot from "./yield/index.vue";
 // import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
-  name: "CopilotContainer",
+  name: "copilotContainer",
   components: {
     CopilotHeaderVue,
     YieldCopilot,
@@ -35,7 +35,7 @@ export default {
   data() {
     return {
       page: "产量",
-      period: "日",
+      period: "月",
       than:'同比',
       currentsStyles: '',
     };

src/views/copilot/efficiency/components/ChipOee.vue

@@ -36,7 +36,9 @@ export default {
   },
   data() {
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+    ];
     return {
       xAxis: cities,
     };
@@ -45,8 +47,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -58,44 +63,47 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日目标`, color: "#58adfa" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日目标`, color: "#58adfa" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
-          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周目标`, color: "#58adfa" },
+          { label: `${year - 1}年本周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '环比') {
         items = [
+          { label: `本周目标`, color: "#58adfa" },
           { label: `上周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
-          { label: `去年${month}月`, color: "#12f7f1" },
-          { label: `${month}月`, color: "#58adfa" },
           { label: `${month}月目标`, color: "#58adfa" },
+          { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
       } else if (this.period === '月' && this.than === '环比') {
         items = [
+          { label: `${month}月目标`, color: "#58adfa" },
           { label: `${lastMonth}月`, color: "#12f7f1" },
           { label: `${month}月`, color: "#58adfa" },
-          { label: `${month}月目标`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
       } else {
         items = [
+          { label: `${year}年目标`, color: "#58adfa" },
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          { label:  `${year}年`, color: "#58adfa" },
-
           // { label: `${year}年目标`, value: valueTuple[2] },
         ];
       }
@@ -136,14 +144,6 @@ export default {
       // console.log('chipOee', chipOeeRate)
       let dataList = null
       switch (this.period) {
-        case "日":
-          dataList = [];
-          dataList[0] = chipOeeRate?.previous;
-          dataList[1] = chipOeeRate?.current;
-        case "周":
-          dataList = [];
-          dataList[0] = chipOeeRate?.previous;
-          dataList[1] = chipOeeRate?.current;
           default:
           dataList = [];
           dataList[0] = chipOeeRate?.previous;
@@ -161,8 +161,11 @@ function getTemplate(period, dataList, than) {
   // console.log('dataList',dataList);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -175,31 +178,41 @@ function getTemplate(period, dataList, than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `去年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `${yesterday}日目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `${yesterday}日目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '周' && than === '同比') {
     items = [
       {
-        name: `去年本周`,
+        name: `${year-1}年本周`,
         data: dataList ? dataList[0] : [],
       },
       {
@@ -207,6 +220,11 @@ function getTemplate(period, dataList, than) {
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `本周目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '周' && than === '环比') {
     items = [
@@ -219,11 +237,16 @@ function getTemplate(period, dataList, than) {
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `本周目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '月' && than === '同比') {
     items = [
       {
-        name: `去年${month}月`,
+        name: `${year-1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {

src/views/copilot/efficiency/components/ChipRate.vue

@@ -1,15 +1,15 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-10 11:10:54
- * @LastEditTime: 2024-05-30 13:23:03
+ * @LastEditTime: 2024-06-06 10:04:49
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <div class="chip-rate">
-    <ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
-    <ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
+    <ChipRateItem :period="period" :than="than" :cities="['邯郸',]" :color="1" />
+    <ChipRateItem :period="period" :than="than" :cities="['瑞昌']" :color="2" />
   </div>
 </template>
 

src/views/copilot/efficiency/components/StdRate.vue

@@ -1,21 +1,21 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-30 11:19:51
+ * @LastEditTime: 2024-06-06 13:55:10
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <!-- <div class="order"> -->
-    <div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px">
-      <div class="span-2">
+  <div class="std-rate" style="width: 100%">
+    <!-- <div class="span-2">
         <StdRateItem :period="period" :city="cities[5]" />
-      </div>
-      <div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
-        <StdRateItem :period="period" :than="than" :city="item" />
-      </div>
+      </div> -->
+    <div class="span-2" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
+      <StdRateItem :period="period" :than="than" :city="item" />
     </div>
+  </div>
 </template>
 
 <script>
@@ -33,7 +33,15 @@ export default {
       default: "同比",
     },
   },
+  data() {
+    return {
+      // data: null
+    }
+  },
   computed: {
+    stdData() {
+      return this.$store.getters.copilot.efficiency.stdRate
+    },
     cities() {
       console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
       // let getterName = "";
@@ -49,30 +57,30 @@ export default {
       //     break;
       // }
       const _cities = [
-        { name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
-        { name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "瑞昌", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "邯郸",target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
       ]
-      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
-        this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
+      if (this.stdData?.previous) {
+        this.stdData?.previous.forEach(
           (v, idx) => {
             _cities[idx].previous = v ?? 0;
           }
         );
       }
-      if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
-        this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
+      if (this.stdData?.target) {
+        this.stdData?.target.forEach(
           (v, idx) => {
             _cities[idx].target = v ?? 0;
           }
         )
       }
-      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
-        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+      if (this.stdData?.current) {
+        this.stdData?.current.forEach(
           (v, idx) => {
             _cities[idx].current = v ?? 0;
           }
@@ -80,22 +88,30 @@ export default {
       }
       // 删掉凯盛光伏
       // _cities.splice(4, 1);
-      return _cities;
+      let arr = []
+      arr.push(_cities[0])
+      arr.push(_cities[1])
+      return arr;
     },
   },
-  data() {
-    return {
-      // cities: [
-      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
-      //   { name: "邯郸", target: 200, total: 300, current: 20 },
-      //   { name: "株洲", target: 300, total: 400, current: 20 },
-      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
-      //   { name: "成都", target: 500, total: 600, current: 20 },
-      //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
-      //   { name: "蚌埠", target: 500, total: 600, current: 20 },
-      // ],
-    };
+  watch: {
+    period() {
+      this.data = this.$store.getters.copilot.efficiency.stdRate
+    }
   },
+  // data() {
+  //   return {
+  //     // cities: [
+  //     //   { name: "瑞昌", target: 100, total: 200, current: 20 },
+  //     //   { name: "邯郸", target: 200, total: 300, current: 20 },
+  //     //   { name: "株洲", target: 300, total: 400, current: 20 },
+  //     //   { name: "佳木斯", target: 400, total: 500, current: 20 },
+  //     //   { name: "成都", target: 500, total: 600, current: 20 },
+  //     //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
+  //     //   { name: "蚌埠", target: 500, total: 600, current: 20 },
+  //     // ],
+  //   };
+  // },
   methods: {},
 };
 </script>
@@ -103,12 +119,12 @@ export default {
 <style scoped lang="scss">
 .std-rate {
   display: flex;
-  // gap: 1px;
+  gap: 16px;
   // flex: 1 1 auto;
-
+  flex-direction: column;
   // display: -webkit-box;
   flex-wrap: wrap;
-  align-items: center;
+  // align-items: center;
   // grid-template-columns: repeat(2, 1fr);
   // grid-template-rows: repeat(4, 1fr);
 }
@@ -117,7 +133,7 @@ export default {
 }
 .flex-item{
   // flex: 1 1 auto;
-  width: 50%;
+  // width: 50%;
 }
 .span-2 {
   // flex: 1 1 auto;

src/views/copilot/efficiency/components/TransformRate.vue

@@ -36,7 +36,9 @@ export default {
   },
   data() {
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+    ];
     return {
       xAxis: cities,
     };
@@ -45,8 +47,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -58,44 +63,47 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日目标`, color: "#58adfa" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${yesterday}日目标`, color: "#58adfa" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
-          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周目标`, color: "#58adfa" },
+          { label: `${year - 1}年本周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '环比') {
         items = [
+          { label: `本周目标`, color: "#58adfa" },
           { label: `上周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
-          { label: `去年${month}月`, color: "#12f7f1" },
-          { label: `${month}月`, color: "#58adfa" },
           { label: `${month}月目标`, color: "#58adfa" },
+          { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
       } else if (this.period === '月' && this.than === '环比') {
         items = [
+          { label: `${month}月目标`, color: "#58adfa" },
           { label: `${lastMonth}月`, color: "#12f7f1" },
           { label: `${month}月`, color: "#58adfa" },
-          { label: `${month}月目标`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
       } else {
         items = [
+          { label: `${year}年目标`, color: "#58adfa" },
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          { label: `${year}年`, color: "#58adfa" },
-
           // { label: `${year}年目标`, value: valueTuple[2] },
         ];
       }
@@ -107,17 +115,9 @@ export default {
     series() {
       // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
       const transformRate = this.transformRate
-      // console.log('chipOee', chipOeeRate)
+      console.log('chipOee', transformRate)
       let dataList = null;
       switch (this.period) {
-        case "日":
-          dataList = [];
-          dataList[0] = transformRate.previous;
-          dataList[1] = transformRate.current;
-        case "周":
-          dataList = [];
-          dataList[0] = transformRate.previous;
-          dataList[1] = transformRate.current;
         default:
           dataList = [];
           dataList[0] = transformRate.previous;
@@ -152,8 +152,11 @@ function getTemplate(period, dataList,than) {
   // console.log('dataList',dataList);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -166,31 +169,41 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `去年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `${yesterday}日目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `${yesterday}日目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '周' && than === '同比') {
     items = [
       {
-        name: `去年本周`,
+        name: `${year-1}年本周`,
         data: dataList ? dataList[0] : [],
       },
       {
@@ -198,6 +211,11 @@ function getTemplate(period, dataList,than) {
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `本周目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '周' && than === '环比') {
     items = [
@@ -210,11 +228,16 @@ function getTemplate(period, dataList,than) {
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
+      {
+        name: `本周目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
     ];
   } else if (period === '月' && than === '同比') {
     items = [
       {
-        name: `去年${month}月`,
+        name: `${year-1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-29 14:09:08
+ * @LastEditTime: 2024-07-19 16:10:10
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,9 +9,9 @@
   <chart-container class="bar-chart-base">
     <div class="legend">
       <span v-for="(item,index) in legend" :key="index" class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
-    <div ref="oeeChart" style="height:96%;width:100%"></div>
+    <div ref="oeeChart" style="height:94%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
-  name: "BarChartBase",
+  name: "barChartBaseoee",
   components: {
     ChartContainer,
   },
@@ -62,7 +62,42 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `${params[i].seriesType === "line"
+                ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
+                <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
+                  : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
+                }` +
+                `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -73,23 +108,23 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/%",
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -107,7 +142,7 @@ export default {
           {
             name: "", // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -142,7 +177,7 @@ export default {
           {
             name: "", // this.series[1].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -180,30 +215,30 @@ export default {
             itemStyle: {
               color: "#f3c000",
             },
-            areaStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#f3c000", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.55,
-                    color: "#f3c00033",
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
+            // areaStyle: {
+            //   color: {
+            //     type: "linear",
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [
+            //       {
+            //         offset: 0,
+            //         color: "#f3c000", // 0% 处的颜色
+            //       },
+            //       {
+            //         offset: 0.55,
+            //         color: "#f3c00033",
+            //       },
+            //       {
+            //         offset: 1,
+            //         color: "transparent", // 100% 处的颜色
+            //       },
+            //     ],
+            //     global: false, // 缺省为 false
+            //   },
+            // },
             data: [], // this.series[0].data,
           },
         ],
@@ -221,12 +256,12 @@ export default {
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
-      });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 16;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       // if (val === false && this.isOpen === true) {
       //   console.log(val)
       //   this.width = 97 + '%'
@@ -236,12 +271,12 @@ export default {
       //   this.canvasReset()
       // }
       // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
       // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions)
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
+      this.initChart(this.options)
       this.canvasReset()
     },
     series(val) {
@@ -252,14 +287,14 @@ export default {
       // console.log('val', val)
       const actualOptions = JSON.parse(JSON.stringify(this.options))
       console.log(actualOptions)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data;
-      actualOptions.series[1].name = val?.[1]?.name;
-      actualOptions.series[2].data = val?.[2]?.data || [];
-      actualOptions.series[2].name = val?.[2]?.name || "";
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data;
+      this.options.series[1].name = val?.[1]?.name;
+      this.options.series[2].data = val?.[2]?.data || [];
+      this.options.series[2].name = val?.[2]?.name || "";
       this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -268,12 +303,12 @@ export default {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
-    // if (screenfull.isEnabled) {
-    //   screenfull.on("change", () => {
-    //     this.isFullscreen = screenfull.isFullscreen;
-    //   });
-    // }
-    this.actualOptions = this.options
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -296,13 +331,14 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.oeeChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
+
 .bar-chart-base {
   // position: relative;
 
@@ -327,7 +363,10 @@ export default {
       margin-right: 0.22vw;
     }
   }
- .legend-item:nth-child(3):before {
+     .legend-item:nth-child(1) {
+       margin-left: 1vw;
+     }
+ .legend-item:nth-child(1):before {
    // width: 12px;
    // height: 2px;
    width: 1vw;
@@ -336,11 +375,11 @@ export default {
    position: absolute;
    top: 50%;
    // left: -16px;
-   left: -0.951vw;
+   left: -1.3vw;
    transform: translateY(-50%);
  }
 
- .legend-item:nth-child(3):after {
+ .legend-item:nth-child(1):after {
    background-color: #f3c000;
    content: "";
    display: inline-block;
@@ -351,15 +390,15 @@ export default {
    height: 0.3191vw;
    border-radius: 100%;
    top: 50%;
-   left: -0.851vw;
+   left: -1.13vw;
    // left: -16px;
    transform: translateY(-50%) translateX(50%);
  }
-  .legend-item:nth-child(1):before {
+  .legend-item:nth-child(2):before {
     background-color: #12f7f1;
   }
 
-  .legend-item:nth-child(2):before {
+  .legend-item:nth-child(3):before {
     background-color: #58adfa;
   }
 }

src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:50:44
- * @LastEditTime: 2024-05-29 14:25:10
+ * @LastEditTime: 2024-07-19 16:10:19
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,9 +9,9 @@
   <chart-container class="bar-chart-base">
     <div class="legend">
       <span v-for="(item,index) in legend" :key="index" class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
-    <div ref="oeeChart" style="height:96%;width:100%"></div>
+    <div ref="oeeChart" style="height:94%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
-  name: "BarChartBase",
+  name: "barChartBaseoee",
   components: {
     ChartContainer,
   },
@@ -62,7 +62,42 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `${params[i].seriesType === "line"
+                ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
+                <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
+                : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
+                }` +
+                `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -73,23 +108,23 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/%",
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -107,7 +142,7 @@ export default {
           {
             name: "", // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -142,7 +177,7 @@ export default {
           {
             name: "", // this.series[1].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -180,30 +215,30 @@ export default {
             itemStyle: {
               color: "#f3c000",
             },
-            areaStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#f3c000", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.55,
-                    color: "#f3c00033",
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
+            // areaStyle: {
+            //   color: {
+            //     type: "linear",
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [
+            //       {
+            //         offset: 0,
+            //         color: "#f3c000", // 0% 处的颜色
+            //       },
+            //       {
+            //         offset: 0.55,
+            //         color: "#f3c00033",
+            //       },
+            //       {
+            //         offset: 1,
+            //         color: "transparent", // 100% 处的颜色
+            //       },
+            //     ],
+            //     global: false, // 缺省为 false
+            //   },
+            // },
             data: [], // this.series[0].data,
           },
         ],
@@ -221,12 +256,12 @@ export default {
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
-      });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 16;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       // if (val === false && this.isOpen === true) {
       //   console.log(val)
       //   this.width = 97 + '%'
@@ -236,13 +271,13 @@ export default {
       //   this.canvasReset()
       // }
       // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
       // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions)
-      // this.canvasReset()
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
+      this.initChart(this.options)
+      this.canvasReset()
     },
     series(val) {
       if (!val) {
@@ -250,15 +285,15 @@ export default {
         return;
       }
       console.log(val)
-      const actualOptions = JSON.parse(JSON.stringify(this.options))
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
-      actualOptions.series[2].data = val?.[2]?.data || [];
-      actualOptions.series[2].name = val?.[2]?.name || "";
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options))
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data || [];
+      this.options.series[1].name = val?.[1]?.name || "";
+      this.options.series[2].data = val?.[2]?.data || [];
+      this.options.series[2].name = val?.[2]?.name || "";
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -267,12 +302,12 @@ export default {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
-    // if (screenfull.isEnabled) {
-    //   screenfull.on("change", () => {
-    //     this.isFullscreen = screenfull.isFullscreen;
-    //   });
-    // }
-    this.actualOptions = this.options
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -295,13 +330,14 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.oeeChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
+
 .bar-chart-base {
   // position: relative;
 
@@ -326,41 +362,43 @@ export default {
       margin-right: 0.22vw;
     }
   }
-
-  .legend-item:nth-child(1):before {
+ .legend-item:nth-child(1) {
+   margin-left: 1vw;
+ }
+  .legend-item:nth-child(2):before {
     background-color: #12f7f1;
   }
 
-  .legend-item:nth-child(2):before {
+  .legend-item:nth-child(3):before {
     background-color: #58adfa;
   }
-    .legend-item:nth-child(3):before {
-      // width: 12px;
-      // height: 2px;
-      width: 1vw;
-      height: 0.1064vw;
-      background-color: #f3c000;
-      position: absolute;
-      top: 50%;
-      // left: -16px;
-      left: -0.951vw;
-      transform: translateY(-50%);
-    }
+ .legend-item:nth-child(1):before {
+   // width: 12px;
+   // height: 2px;
+   width: 1vw;
+   height: 0.1064vw;
+   background-color: #f3c000;
+   position: absolute;
+   top: 50%;
+   // left: -16px;
+   left: -1.3vw;
+   transform: translateY(-50%);
+ }
 
-    .legend-item:nth-child(3):after {
-      background-color: #f3c000;
-      content: "";
-      display: inline-block;
-      position: absolute;
-      // width: 6px;
-      // height: 6px;
-      width: 0.3191vw;
-      height: 0.3191vw;
-      border-radius: 100%;
-      top: 50%;
-      left: -0.851vw;
-      // left: -16px;
-      transform: translateY(-50%) translateX(50%);
-    }
+ .legend-item:nth-child(1):after {
+   background-color: #f3c000;
+   content: "";
+   display: inline-block;
+   position: absolute;
+   // width: 6px;
+   // height: 6px;
+   width: 0.3191vw;
+   height: 0.3191vw;
+   border-radius: 100%;
+   top: 50%;
+   left: -1.13vw;
+   // left: -16px;
+   transform: translateY(-50%) translateX(50%);
+ }
 }
 </style>

src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

@@ -13,10 +13,11 @@
     <!-- <div style="flex:1;padding: 0 20%;"> -->
     <div class="chart" ref="chart"></div>
     <!-- </div> -->
-    <div class="legend" >
+    <div class="legend">
       <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
-        <span class="legend-item__value">{{ lgd.value }}</span>
         <span class="legend-item__label">{{ lgd.label }}</span>
+        <span class="legend-item__value">{{ lgd.value }}</span>
+
       </div>
     </div>
   </div>
@@ -64,13 +65,13 @@ export default {
     valueTuple() {
       const getter = this.chipRate;
       // console.log(getter)
-      if (this.period === "日" || this.period === "周") {
-        return [
-          getter.previous[this.factoryId],
-          getter.current[this.factoryId],
-          0,
-        ];
-      }
+      // if (this.period === "日" || this.period === "周") {
+      //   return [
+      //     getter.previous[this.factoryId],
+      //     getter.current[this.factoryId],
+      //     0,
+      //   ];
+      // }
       // [100, 200, 200]
       return [
         getter.previous[this.factoryId],
@@ -79,27 +80,86 @@ export default {
       ];
     },
     options() {
-      const single = this.period === "日" || this.period === "周";
+      // const single = this.period === "日" || this.period === "周";
+      const today = new Date().getDate();
       const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
       const vt = this.valueTuple;
-      let titleValue = single
-          ? (vt[1] != null && `${vt[1] * 100}%`) || "0%"
-          : vt[0] != null && vt[2] != null && vt[2] !== 0
-          ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
-          : "0%",
+      let items = [];
+      var day1 = new Date();
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
+      //今天的时间
+      // var day2 = new Date();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      // const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
+      // const month = new Date().getMonth() + 1;
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
+      // const year = new Date().getFullYear();
+      if (this.period === '日' && this.than === '同比') {
+        items = [
+          { label: `${yesterday}日良率`, },
+          { label: `${year - 1}年${yesterday}日良率` },
+          { label: `${yesterday}日目标` },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日良率` },
+          { label: `${dayBeYes}日良率` },
+          { label: `${yesterday}日目标` },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `本周良率`, },
+          { label: `${year - 1}年本周良率` },
+          { label: `本周目标`, },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `本周良率`, },
+          { label: `上周良率`, },
+          { label: `本周目标`, },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `${month}月良率`, },
+          { label: `${year-1}年${month}月良率`, },
+          { label: `${month}月目标良率`, },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${month}月良率`, },
+          { label: `${lastMonth}月良率`, },
+          { label: `${month}月目标良率`, },
+        ];
+      } else {
+        items = [
+          { label: `${year}年良率`, },
+          { label: `${year - 1}年良率` },
+          { label: `${year}年目标良率` },
+        ];
+      }
+      let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
         subtitle = {
-          日: "本日良率",
+          日: "昨日良率",
           周: "本周良率",
           月: `${month}月良率`,
           年: `${year}良率`,
         }[this.period];
-
+      console.log(vt[0]);
       const t = getOptions({
-        single,
+        // single,
         color: this.color == 1 ? "#4CF0E8" : "#1065ff",
         titleValue,
         subtitle,
+        yesterday,
+        currentName: items[0].label,
+        preName: items[1].label,
         previousSum: vt[0],
         currentSum: vt[1],
         targetSum: vt[2],
@@ -109,8 +169,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -122,41 +185,48 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${year - 1}年${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
+          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
-          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else if (this.period === '周' && this.than === '环比') {
         items = [
-          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+          { label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
-          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
-          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+          { label: `${year-1}年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+
+          { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else if (this.period === '月' && this.than === '环比') {
         items = [
-          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
-          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+          { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+
+          { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       } else {
         items = [
-          { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-          { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null  ? 0 + "%" : (this.valueTuple[0]) + "%" },
-          { label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+          { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
+          { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
+
+          { label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
         ];
       }
       return items
@@ -191,6 +261,16 @@ export default {
     },
   },
   methods: {
+    formatNumber(num) {
+      console.log(num);
+      // 判断是否为整数
+      if (Number.isInteger(num)) {
+        return num; // 如果是整数，直接转换为字符串
+      } else {
+        // 如果不是整数，保留两位小数并转换为字符串
+        return num.toFixed(2);
+      }
+    },
     handleCityUpdate(id) {
       this.factoryId = id;
     },
@@ -206,7 +286,8 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    // padding: 0 3px;
+    // justify-content: center;
     gap: 3px;
     backdrop-filter: blur(24px);
   .cities {
@@ -216,29 +297,36 @@ export default {
     .chart {
       // margin-left: 5%;
       // width: 290px;
-      align-self: stretch;
-      // flex: 1 1 auto;
-    // align-items: center;
-      // margin:0 auto;
-      // padding: 0 10%;;
+      flex: 1 1 auto;
+      padding: 0 20%;
       /* margin: 10%; */
+      height: 16vh;
       /* min-width: 300px; */
-      height: 200px;
+      align-self: stretch;
     }
   .legend {
     height: 80px;
     display: flex;
-    gap: 40px;
-    justify-content: space-around;
+    color: #fff;
+    justify-content: flex-end;
+    gap:20px;
+    // justify-content: space-between;
   }
-
+  // .legend:nth-child(3){
+  //   margin-left: 30px;
+  // }
   .legend-item {
+    margin-left: 15px;
     display: flex;
+    font-size: 16px;
+    // font-weight: 600;
     flex-direction: column;
-    align-items: center;
+    // align-items: center;
+    align-items: flex-start;
     gap: 3px;
 
     &:first-child {
+      // margin-left: 5px;
       .legend-item__value {
         color: #0e61f5;
       }
@@ -250,10 +338,41 @@ export default {
       }
     }
   }
+.legend-item__label {
+  position: relative;
+}
 
+.legend-item__label::before {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ccc;
+  border-radius: 2px;
+  top: 6px;
+  left: -18px;
+}
+
+.legend-item:nth-child(2) .legend-item__label::before {
+  background: #12fff5;
+}
+
+.legend-item:nth-child(2) .legend-item__value {
+  color: #12fff5;
+}
+
+.legend-item:nth-child(1) .legend-item__label::before {
+  background: #0f65ff;
+}
+
+.legend-item:nth-child(1) .legend-item__value {
+  color: #0f65ff;
+}
+
+.legend-item:nth-child(3) .legend-item__label::before {
+  background: #003982;
+}
   .legend-item__value {
-    font-size: 24px;
-    font-weight: 600;
   }
 }
 </style>

src/views/copilot/efficiency/components/sub/ring/DoubleRingChart.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: DoubleRingChart.vue
     author: liubin
     date: 2024-04-17 11:01:55
-    description: 
+    description:
 -->
 
 <template>
@@ -132,19 +132,19 @@ function calculateItems(period, valueTuple) {
     case "日":
       items = [
         { label: `${month}月${today}日累计`, value: valueTuple[1] },
-        { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
+        { label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] },
       ];
       break;
     case "周":
       items = [
         { label: `本周累计`, value: valueTuple[1] },
-        { label: `去年本周累计`, value: valueTuple[0] },
+        { label: `${year-1}年本周累计`, value: valueTuple[0] },
       ];
       break;
     case "月":
       items = [
         { label: `${month}月累计`, value: valueTuple[1] },
-        { label: `去年${month}月累计`, value: valueTuple[0] },
+        { label: `${year-1}年${month}月累计`, value: valueTuple[0] },
         { label: `${month}月目标`, value: valueTuple[2] },
       ];
       break;

src/views/copilot/efficiency/components/sub/std/ProgressBar.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="progress-bar" :data-title="title" :data-rate="value + '%'">
+  <div class="progress-bar" :data-title="title" :data-rate="current + '%'">
     <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
   </div>
 </template>
@@ -20,6 +20,18 @@ export default {
       type: Number,
       default: 0,
     },
+    target: {
+      type: Number,
+      default: 0,
+    },
+    previous: {
+      type: Number,
+      default: 0,
+    },
+    current: {
+      type: Number,
+      default: 0,
+    },
     // total: {
     //   type: Number,
     //   default: 0,
@@ -34,11 +46,16 @@ export default {
   },
   computed: {
     dataRate() {
-      return this.value == 0
-        ? "-"
-        : this.value > 1
-          ?  100 + '%'
-          : `${(parseFloat(this.value)).toFixed(0)}%`;
+      // if (this.current != 0 && this.target != 0) {
+        console.log( '1111111111', this.current, this.target,this.previous);
+      return this.current == 0 && this.target == 0
+          ? 0
+        : this.current != 0 && this.target != 0
+          ? `${((this.current / this.target) * 100).toFixed(2)}%`
+          : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? parseFloat(this.current).toFixed(2) + '%' : 0 + '%'
+      // } else if(this.previous != 0) {
+      //   return this.previous + '%'
+      // }
     },
   },
   methods: {},

src/views/copilot/efficiency/components/sub/std/StdRateItem.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-29 17:03:00
+ * @LastEditTime: 2024-07-09 15:04:24
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,31 +10,31 @@
   <div v-if="period == '日'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :period="period" :title="title" :value="city.current" />
-      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
+      <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
+      <preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
     </div>
   </div>
   <div v-else-if="period == '周'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :period="period" :title="title" :value="city.current" />
-      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
+      <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
+      <preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
     </div>
   </div>
   <div v-else-if="period == '月'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
-      <ProgressBar :period="period" :title="title" :value="city.current" />
+      <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
+      <preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
+      <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
     </div>
   </div>
   <div v-else="period == '年'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
-      <ProgressBar :period="period" :title="title" :value="city.current" />
+      <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
+      <preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
+      <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
     </div>
   </div>
 </template>
@@ -42,10 +42,12 @@
 <script>
 import CityName from "./CityName.vue";
 import ProgressBar from "./ProgressBar.vue";
+import preProgressBar from "./preProgressBar.vue";
+
 
 export default {
   name: "StdRateItem",
-  components: { CityName, ProgressBar },
+  components: { CityName, ProgressBar, preProgressBar },
   props: {
     city: {
       type: Object,
@@ -69,22 +71,25 @@ export default {
     titlePre() {
       console.log(this.city);
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       const today = new Date().getDate();
       const month = new Date().getMonth() + 1;
       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
-        return `去年${month}月${today}日`
+        return `${year - 1}年${yesterday}日`
       } else if (this.period === '日' && this.than === '环比') {
-        return `${yesterday}日`
+        return `${dayBeYes}日`
       } else if (this.period === '周' && this.than === '同比') {
-        return `去年本周`
+        return `${year-1}年本周`
       } else if (this.period === '周' && this.than === '环比') {
         return `上周`
       } else if (this.period === '月' && this.than === '同比') {
-        return `去年${month}月`
+        return `${year-1}年${month}月`
       } else if (this.period === '月' && this.than === '环比') {
         return `${lastMonth}月`
       } else {
@@ -93,14 +98,18 @@ export default {
     },
     title() {
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       const today = new Date().getDate();
       const month = new Date().getMonth() + 1;
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
-        return `${month}月${today}日`
+        return `${yesterday}日`
       } else if (this.period === '日' && this.than === '环比') {
-        return `${month}月${today}日`
+        return `${yesterday}日`
       } else if (this.period === '周' && this.than === '同比') {
         return `本周`
       } else if (this.period === '周' && this.than === '环比') {
@@ -120,9 +129,13 @@ export default {
       const month = new Date().getMonth() + 1;
       const year = new Date().getFullYear();
       if (this.period === '月') {
-        return `${month}月目标`
+        return `${month}月目标${this.city.target}%`
       } else if (this.period === '年') {
-        return `${year}年目标`
+        return `${year}年目标${this.city.target}%`
+      } else if (this.period === '周') {
+        return `本周目标${this.city.target}%`
+      } else if (this.period === '日') {
+        return `${month}月${today}日目标${this.city.target}%`
       }
     },
   },
@@ -137,7 +150,7 @@ export default {
   align-items: center;
   gap: 8px;
   flex: 1 1 auto;
-  padding: 12px;
+  padding: 16px;
 }
 
 .std-rate-item__value {

src/views/copilot/efficiency/components/sub/std/preProgressBar.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-27 09:12:54
+ * @LastEditTime: 2024-07-09 15:02:46
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="progress-bar" :data-title="title" :data-rate="previous + '%'">
+    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProgressBar",
+  components: {},
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    target: {
+      type: Number,
+      default: 0,
+    },
+    previous: {
+      type: Number,
+      default: 0,
+    },
+    current: {
+      type: Number,
+      default: 0,
+    },
+    // total: {
+    //   type: Number,
+    //   default: 0,
+    // },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dataRate() {
+      // if (this.current != 0 && this.target != 0) {
+        // console.log( '1111111111', this.current, this.target,this.previous);
+      return this.previous >= 100 ? 100 + '%' : parseFloat(this.previous).toFixed(2) + '%';
+      // } else if(this.previous != 0) {
+      //   return this.previous + '%'
+      // }
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.progress-bar {
+  height: 10px;
+  background-color: #002f6b;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  position: relative;
+
+  &:before {
+    content: attr(data-title);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    font-size: 12px;
+  }
+
+  &:after {
+    content: attr(data-rate);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    right: 0;
+    font-size: 12px;
+  }
+
+  &:first-child {
+    &:after {
+      color: #11eae3;
+    }
+  }
+
+  &:nth-child(2) {
+    &:after {
+      color: #0e65fd;
+    }
+  }
+
+  .progress-bar__rate {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    border-radius: 4px;
+     background: linear-gradient(to right,
+          #004c5e11 10%,
+          #004c5e,
+          #0ac0c0,
+          #11eae3);
+  }
+
+  &:first-child {
+    .progress-bar__rate {
+      background: linear-gradient(to right,
+          #004c5e11 10%,
+          #004c5e,
+          #0ac0c0,
+          #11eae3);
+    }
+  }
+
+  &:nth-child(2) {
+    .progress-bar__rate {
+      background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
+    }
+  }
+}
+</style>

src/views/copilot/efficiency/index.vue

@@ -1,39 +1,48 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-05-30 11:13:01
+ * @LastEditTime: 2024-07-09 15:16:43
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <div class="efficiency-copilot">
-    <Container title="芯片良率" icon="chip2">
-      <ChipRate :period="period" :than="than" />
-    </Container>
-    <Container title="标准组件良率" icon="std">
-      <StdRate :period="period" :than="than" />
-    </Container>
-    <Container title="芯片OEE" icon="chip">
-      <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
-    </Container>
-    <Container title="转化效率" icon="cube">
-      <TransformRate :transformRate="transformRate" :period="period" :than="than" />
-    </Container>
+    <section class="top flex">
+      <Container title="芯片良率" icon="chip2">
+        <ChipRate :period="period" :than="than" />
+      </Container>
+      <left-container title="标准组件良率" icon="std">
+        <StdRate :period="period" :than="than" />
+      </left-container>
+    </section>
+    <section class="bottom flex">
+      <Container title="芯片OEE" icon="chip">
+        <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
+      </Container>
+      <left-container title="转化效率" icon="cube">
+        <TransformRate :transformRate="transformRate" :period="period" :than="than" />
+      </left-container>
+    </section>
+
+
   </div>
 </template>
 
 <script>
-import Container from "@/views/copilot/components/Container.vue";
+import Container from "@/views/copilot/components/efficiencyRightContainer.vue";
+import leftContainer from "@/views/copilot/components/efficiencyLeftContainer.vue";
+
 import ChipOeeVue from "./components/ChipOee.vue";
 import ChipRateVue from "./components/ChipRate.vue";
 import StdRateVue from "./components/StdRate.vue";
 import TransformRateVue from "./components/TransformRate.vue";
 
 export default {
-  name: "EfficiencyCopilot",
+  name: "efficiencyCopilot",
   components: {
     Container,
+    leftContainer,
     ChipOee: ChipOeeVue,
     ChipRate: ChipRateVue,
     StdRate: StdRateVue,
@@ -88,7 +97,30 @@ export default {
 };
 </script>
 
+
 <style scoped>
+.efficiency-copilot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.flex {
+  display: flex;
+  gap: 20px;
+  flex: 1;
+}
+
+.top > div,
+.bottom > div {
+  height: 100%;
+}
+
+</style>
+
+<!-- <style scoped>
+
 .efficiency-copilot {
   flex: 1;
   display: grid;
@@ -100,4 +132,4 @@ export default {
 .efficiency-copilot > div {
   height: 100%;
 }
-</style>
+</style> -->

src/views/copilot/efficiency/options/chipOptions.js

@@ -1,163 +1,184 @@
-export default function ({
-  single = false,
-  color,
+ export default ({
   titleValue,
   subtitle,
   previousSum,
   currentSum,
   targetSum,
-}) {
-  return {
-    grid: {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-      containLabel: true,
+  currentName,
+  preName,
+  yesterday,
+}) => ({
+  grid: {
+    left: 300,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  tooltip: {
+    trigger: "item",
+    extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+    backgroundColor: '#001829',
+    borderColor: '#001829',
+  },
+  title: {
+    text: titleValue,
+    left: "48%",
+    top: "middle",
+    textAlign: "center",
+    textStyle: {
+      fontWeight: 600,
+      fontSize: 36,
+       color: "rgba(223,241,254,.8)",
     },
-    tooltip: {
-      // formatter(params) {
-      //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
-      // }
+    subtext: `\u2002${yesterday + '日良率'}\u2002`,
+    subtextStyle: {
+      fontSize: 16,
+      fontWeight: 100,
+      color: "rgba(255,255,255,.7)",
+      align: "right",
     },
-    title: {
-      text: titleValue,
-      left: "49%",
-      top: "39%",
-      textAlign: "center",
-      textStyle: {
-        fontWeight: 600,
-        fontSize: 32,
-        color: "#fffd",
-      },
-      subtext: `\u2002${subtitle}\u2002`,
-      subtextStyle: {
-        fontSize: 14,
-        fontWeight: 100,
-        color: "#fffd",
-        align: "right",
+  },
+  series: [
+    // 背景 series
+    {
+      type: "pie",
+      name: "当前良率",
+      radius: ["70%", "85%"],
+      center: ["50%", "52%"],
+      emptyCircleStyle: {
+        color: "#003982",
       },
     },
-    series: [
-      // 背景 series
-      {
-        type: "pie",
-        name: "当前目标",
-        radius: ["70%", "85%"],
-        center: ["50%", "52%"],
-        emptyCircleStyle: {
-          color: "#040c5f45",
-        },
+    // 数据 series
+    {
+      type: "pie",
+      radius: ["70%", "85%"],
+      center: ["50%", "52%"],
+      avoidLabelOvervlap: false,
+      label: {
+        show: false,
       },
-      // 数据 series
-      {
-        type: "pie",
-        radius: ["70%", "85%"],
-        center: ["50%", "52%"],
-        avoidLabelOvervlap: false,
-        label: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-        data: [
-          {
-            value: currentSum,
-            name: "当前良率",
-            selected: false,
-            itemStyle: {
-              borderJoin: "round",
-              borderCap: "round",
-              borderWidth: 12,
-              borderRadius: "50%",
-              color: {
-                type: "linear",
-                x: 1,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: single
-                  ? [
-                      { offset: 0, color: `${color}11` },
-                      { offset: 1, color: `${color}` },
-                    ]
-                  : [
-                      { offset: 0, color: "#4CF0E811" },
-                      { offset: 1, color: "#4CF0E8" },
-                    ],
-              },
-            },
-          },
-          {
-            value:
-              targetSum > currentSum
-                ? targetSum - currentSum
-                : targetSum == 0
-                ? currentSum == 0
-                  ? 1
-                  : 0
-                : targetSum,
-
-            name: "未达成",
-            itemStyle: { color: "transparent" },
-            label: { show: false },
-          },
-        ],
+      labelLine: {
+        show: false,
       },
-      // 数据 series2 - 2023累计
-      single
-        ? null
-        : {
-            type: "pie",
-            radius: ["55%", "70%"],
-            center: ["50%", "52%"],
-            avoidLabelOvervlap: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              {
-                value: previousSum,
-                name: "上期良率",
-                selected: false,
-                itemStyle: {
-                  borderJoin: "round",
-                  borderCap: "round",
-                  borderWidth: 12,
-                  borderRadius: "50%",
-                  color: {
-                    type: "linear",
-                    x: 1,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [
-                      { offset: 0, color: "#1065ff66" },
-                      { offset: 1, color: "#1065ff" },
-                    ],
-                  },
-                },
-              },
-              {
-                value:
-                  targetSum > previousSum
-                    ? targetSum - previousSum
-                    : previousSum == 0
-                    ? 1
-                    : 0,
-                name: "-",
-                formatter: {
-                  show: false
-                },
-                itemStyle: { color: "transparent" },
-                label: { show: false },
-              },
-            ],
+      data: [
+        {
+          value: currentSum,
+          name: currentName,
+          tooltip: {
+            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter:`
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
+              </div>
+              `
           },
-    ],
-  };
-}
+          selected: false,
+          itemStyle: {
+            borderJoin: "round",
+            borderCap: "round",
+            borderWidth: 12,
+            borderRadius: "50%",
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#4CF0E811" },
+                { offset: 1, color: "#4CF0E8" },
+              ],
+            },
+          },
+        },
+        {
+          value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
+          name: currentName,
+          tooltip: {
+           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter:`
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
+              </div>
+              `
+          },
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+    // 数据 series2 - 2023累计
+    {
+      type: "pie",
+      radius: ["55%", "70%"],
+      center: ["50%", "52%"],
+      avoidLabelOvervlap: false,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        {
+          value: previousSum,
+          name: preName,
+           tooltip: {
+           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+            extraCssText: 'padding:0;border-width:0',
+            formatter:`
+                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
+                </div>
+                `
+          },
+          selected: false,
+          itemStyle: {
+            borderJoin: "round",
+            borderCap: "round",
+            borderWidth: 12,
+            borderRadius: "50%",
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#1065ff66" },
+                { offset: 1, color: "#1065ff" },
+              ],
+            },
+          },
+        },
+        {
+          value:previousSum === 0 ? 1 : 0,
+          name: preName,
+          tooltip: {
+             backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+            extraCssText: 'padding:0;border-width:0',
+            formatter:`
+                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
+                </div>
+                `
+          },
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+  ],
+});

src/views/copilot/efficiencyContainer.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 16:04:18
- * @LastEditTime: 2024-05-30 11:14:17
+ * @LastEditTime: 2024-06-03 16:46:11
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <!-- <div class="copilot-layout" ref="copilot-layout"> -->
-  <div class="copilot-layout other" ref="copilot-layout">
+  <div class="copilot-layout" ref="copilot-layout">
     <CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive"
       @update:period="period = $event" @update:than="updateThan" />
 
@@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue";
 import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
-  name: "CopilotContainer",
+  name: "copilotEfficiencyContainer",
   components: {
     CopilotHeaderVue,
     EfficiencyCopilot,
@@ -34,7 +34,7 @@ export default {
     return {
       than:'同比',
       page: "效率",
-      period: "日",
+      period: "月",
       currentsStyles: '',
     };
   },
@@ -95,13 +95,14 @@ export default {
 </script>
 <style>
 
+
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;
   left: -16px;
   /* top: -8px; */
-  /* height: calc(100% + 38px); */
+  height: calc(100% + 30px);
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -110,12 +111,12 @@ export default {
   gap: 8px;
 }
 
-.produce{
+/* .produce{
   height: calc(100% + 38px);
-}
-.other {
-  height: calc(100% + 240px);
-}
+} */
+/* .other { */
+  /* height: calc(100% + 240px); */
+/* } */
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/

src/views/copilot/factoryData/bbIndex.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="factory-layout">
-    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
-      @update:than="updateThan" @update:period="updatePeriod" />
+    <FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period"
+      @update:period="updatePeriod" />
     <div class="factory-section">
       <section class="top flex">
-        <db-container title="生产监控" icon="prod">
+        <db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than">
           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="工单监控" icon="order">
+        <left-container title="工单监控" icon="order">
           <order :prodOrder="prodOrder" />
-        </db-container>
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,8 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +39,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,

src/views/copilot/factoryData/cdIndex.vue

@@ -8,9 +8,9 @@
           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="工单监控" icon="order">
+        <left-container title="工单监控" icon="order">
           <order :prodOrder="prodOrder" />
-        </db-container>
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,8 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +39,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,

src/views/copilot/factoryData/components/BarChartBase.vue

@@ -1,22 +1,36 @@
 <template>
-  <div class="left-chart-base">
-    <!-- <div class="legend">
+  <chart-container class="bar-chart-base">
+    <div class="left-chart-base">
+      <!-- <div class="legend">
       <span v-for="item in legend" :key="item.label" class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
     </div> -->
-    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
-  </div>
+
+      <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
+    </div>
+  </chart-container>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import ChartContainer from "../../components/ChartContainer.vue";
+
+// import CopilotButton from "./chartButton"
 export default {
+  components: {
+    ChartContainer
+    // CopilotButton,
+  },
   name: "Energy",
   props: {
     // legend: {
     //   type: Array,
     //   required: true,
     // },
+    type: {
+      type: String,
+      default:'目标产量'
+    },
     energyCockpits: {
       type: Array,
       required: true,
@@ -27,16 +41,54 @@ export default {
       isFullscreen: false,
       actualOptions: null,
       chart: "",
+      data: [],
+      orderXAxis:[],
+      // obj:{
+      //   seriesArr: [],
+      //   targetProduceArr: [],
+      //   planIn: [],
+      //   acIn: [],
+      //   acProduceArr: [],
+      //   scrapNum: [],
+      //   processNum: [],
+      // },
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
         grid: {
-          left: "7%",
-          right: "7%",
-          bottom: "8%",
+          left: "9%",
+          right: "3%",
+          bottom: "15%",
           top: "15%",
         },
         tooltip: {
           trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            var res = ``;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value  : 0}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+            // return res;
+          },
         },
         xAxis: {
           axisTick: {
@@ -48,25 +100,40 @@ export default {
             },
           },
           axisLabel: {
-            color: "rgba(255, 255, 255, 0.7)",
-            fontSize: 12,
+            interval: 0,//设置横坐标为斜
+            rotate:45,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            // formatter: function (value) {
+            //   console.log(value);
+
+            //   return value;
+            // },
           },
           data: [],
         },
+        // dataZoom: [
+        //   {
+        //     // show: true,
+        //     start: 0,
+        //     end: 50
+        //   }
+        //   ],
         yAxis: {
             type: "value",
             name: "单位/片",
+            position: 'left',
             nameTextStyle: {
-              color: "rgba(255, 255, 255, 0.7)",
-              fontSize: 12,
+              color: "rgba(223,241,254,.8)",
+              fontSize: 16,
               align: "right",
             },
             axisTick: {
               show: false,
             },
             axisLabel: {
-              color: "rgba(255, 255, 255, 0.7)",
-              fontSize: 12,
+              color: "rgba(223,241,254,.8)",
+              fontSize:16,
             },
             axisLine: {
               show: true,
@@ -134,7 +201,7 @@ export default {
             //     { offset: 1, color: "#12FFF5" + "00" },
             //   ]),
             // },
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -172,14 +239,17 @@ export default {
     },
   },
   watch: {
+    type(val) {
+      this.initChart()
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
     //   this.actualOptions.series.map((item) => {
-    //     item.barWidth = val ? 18 : 12;
+    //     item.barWidth = val ? 18 : 16;
     //   });
-    //   this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-    //   this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-    //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+    //   this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+    //   this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+    //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
     //   this.initOptions(this.actualOptions);
     // },
     // series(val) {
@@ -197,9 +267,9 @@ export default {
     //   this.actualOptions = actualOptions;
     //   this.initOptions(actualOptions);
     // },
-    energyCockpits() {
-      this.initChart();
-    },
+    // energyCockpits() {
+    //   this.initChart();
+    // },
     isOpen(val) {
       this.canvasReset();
     },
@@ -228,17 +298,81 @@ export default {
       }, 500)();
     },
     initChart() {
-      console.log("this.energyCockpits", this.energyCockpits);
-      let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
-      // let n = 0;
-      let seriesArr =[]
-      seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
-      seriesArr[1] = this.energyCockpits.length != 0 && this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
-      seriesArr[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
-      seriesArr[3] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0
-      seriesArr[4] = this.energyCockpits.length != 0 && this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0
-      seriesArr[5] = this.energyCockpits.length != 0 && this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0
-      console.log(seriesArr);
+      if (this.type === '目标产量') {
+        this.orderXAxis = []
+        this.data = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            this.data.push(ele.targetProduction)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+        // this.initChart(targetProduceArr, orderXAxis)
+      } else if (this.type === '计划投入') {
+        this.orderXAxis = []
+        this.data = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            this.data.push(ele.plannedInvestment)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+      } else if (this.type === '实际投入') {
+        this.orderXAxis = []
+        this.data = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            this.data.push(ele.actualInvestment)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+      } else if (this.type === '实际产出') {
+        this.orderXAxis = []
+        this.data = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            this.data.push(ele.actualProduction)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+      } else if (this.type === '废品数量') {
+        this.orderXAxis = []
+        this.data  = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            this.data.push(ele.wasteNum)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+      } else if (this.type === '待再加工') {
+        this.orderXAxis = []
+        this.data = []
+        if (this.energyCockpits) {
+          this.energyCockpits.forEach(ele => {
+            console.log(ele.reworkNum);
+            this.data.push(ele.reworkNum)
+            if (ele.workOrderNumber.length > 4) {
+              ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + "..";
+            }
+            this.orderXAxis.push(ele.workOrderNumber)
+          });
+        }
+      }
 
       // let seriesArr = [
       //   {
@@ -280,20 +414,21 @@ export default {
       //     }
       //   }
       // }
-      if (this.chart) {
-        this.chart.dispose();
-      }
-      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.xAxis.data = orderXAxis;
-      actualOptions.series[0].data = seriesArr;
+
       // actualOptions.series[0].name = seriesArr[0].name;
       // actualOptions.series[1].data = seriesArr[1].data;
       // actualOptions.series[1].name = seriesArr[1].name;
       // actualOptions.series[2].data = seriesArr[2].data;
       // actualOptions.series[2].name = seriesArr[2].name;
-      this.actualOptions = actualOptions;
-      this.chart.setOption(actualOptions);
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
+      // const actualOptions = JSON.parse(JSON.stringify(this.options));
+      this.options.xAxis.data = this.orderXAxis;
+      this.options.series[0].data = this.data;
+      // this.actualOptions = actualOptions;
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/factoryData/components/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-30 08:58:39
- * @LastEditTime: 2024-05-30 10:38:32
+ * @LastEditTime: 2024-07-18 16:48:10
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,9 +9,9 @@
   <chart-container class="bar-chart-base">
     <div class="legend">
       <span v-for="(item,index) in legend" :key="index" class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
-    <div ref="oeeChart" style="height:96%;width:100%"></div>
+    <div ref="oeeChart" style="height:100%"></div>
   </chart-container>
 </template>
 
@@ -56,13 +56,70 @@ export default {
       actualOptions: null,
       options: {
         grid: {
-          left: "5%",
+          left: "8%",
           right: "0%",
           bottom: "3%",
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     // type: "cross",
+        //     crossStyle: {
+        //       color: "rgba(237,237,237,0.5)",
+        //     },
+        //   },
+        //   extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+        //   backgroundColor: '#001829',
+        //   borderColor: '#001829',
+        //   // textStyle: {
+        //   //   color:'rgba(255, 255, 255, 0.85)'
+        //   // },
+        //   formatter: params => {
+        //     console.log('params', params)
+        //     var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+        //     for (var i = 0, l = params.length; i < l; i++) {
+        //       res +=
+        //         "<br/>" +
+        //         `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
+        //         `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` +
+        //         `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`;
+        //     }
+        //     return res;
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+            // return res;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -73,23 +130,25 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
-          name: "单位/%",
+          name: "单位/片",
+          position: 'left',
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            align: "right",
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -105,9 +164,9 @@ export default {
         },
         series: [
           {
-            name: "fto", // this.series[0].name,
+            name: "FTO", // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -142,7 +201,7 @@ export default {
           {
             name: "", // this.series[1].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -173,32 +232,11 @@ export default {
           },
           {
             name: "", // "2024年目标值",
-            type: "bar",
-            barWidth: 12,
+            type: "line",
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#f3c000", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "#f3c00033",
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
+              color:'#f3c000'
             },
             data: [], // this.series[0].data,
           },
@@ -221,12 +259,12 @@ export default {
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+      this.options.series.map((item) => {
+        item.barWidth = val ? 18 : 16;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       // if (val === false && this.isOpen === true) {
       //   console.log(val)
       //   this.width = 97 + '%'
@@ -236,12 +274,12 @@ export default {
       //   this.canvasReset()
       // }
       // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
       // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions)
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
+      this.initChart(this.options)
       this.canvasReset()
     },
     series(val) {
@@ -251,16 +289,17 @@ export default {
       }
       // console.log('val', val)
       const actualOptions = JSON.parse(JSON.stringify(this.options))
+      console.log(actualOptions);
       // actualOptions.xAxis.data = val
       console.log(actualOptions)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data;
-      actualOptions.series[1].name = val?.[1]?.name;
-      actualOptions.series[2].data = val?.[2]?.data || [];
-      actualOptions.series[2].name = val?.[2]?.name || "";
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data;
+      this.options.series[1].name = val?.[1]?.name;
+      this.options.series[2].data = val?.[2]?.data || [];
+      this.options.series[2].name = val?.[2]?.name || "";
       this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -297,27 +336,28 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.oeeChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
+
 .bar-chart-base {
   // position: relative;
 
   .legend {
     position: absolute;
-    top: 5.2vh;
-    right: 1vw;
+    top: 3vh;
+    right: 13vw;
   }
 
   .legend-item {
     position: relative;
-    // font-size: 12px;
-    margin-right: 1.3vw;
-
+    font-size: 1.2vw;
+    margin-right:1.2vw;
+    color: #DFF1FE;
     &::before {
       content: "";
       display: inline-block;
@@ -328,7 +368,9 @@ export default {
       margin-right: 0.22vw;
     }
   }
-
+  .legend-item:nth-child(3) {
+      margin-left: 1vw;
+  }
   .legend-item:nth-child(1):before {
     background-color: #12f7f1;
   }
@@ -336,8 +378,37 @@ export default {
   .legend-item:nth-child(2):before {
     background-color: #58adfa;
   }
-  .legend-item:nth-child(3):before {
-    background-color: #f3c000;
-  }
+ .legend-item:nth-child(3):before {
+   // width: 12px;
+   // height: 2px;
+   width: 1vw;
+   height: 0.1064vw;
+   background-color: #f3c000;
+   position: absolute;
+   top: 50%;
+   // left: -16px;
+   left: -0.951vw;
+   transform: translateY(-50%);
+ }
+
+ .legend-item:nth-child(3):after {
+   background-color: #f3c000;
+   content: "";
+   display: inline-block;
+   position: absolute;
+   // width: 6px;
+   // height: 6px;
+   width: 0.3191vw;
+   height: 0.3191vw;
+   border-radius: 100%;
+   top: 50%;
+   left: -0.851vw;
+   // left: -16px;
+   transform: translateY(-50%) translateX(50%);
+ }
 }
+ .echarts-tooltip-dark {
+   background: #001829;
+
+ }
 </style>

src/views/copilot/factoryData/components/ChipOee.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-29 14:48:06
- * @LastEditTime: 2024-05-30 10:54:00
+ * @LastEditTime: 2024-06-18 14:49:25
  * @LastEditors: zhp
  * @Description:
 -->
@@ -41,7 +41,7 @@ export default {
   },
   data() {
     // 城市数组的顺序必须是固定的
-    const cities = ["fto投入", "芯片产量", "标准组件产量"];
+    const cities = ["FTO投入", "芯片产量", "标准组件产量"];
     return {
       // xAxis: cities,
     };
@@ -49,13 +49,25 @@ export default {
   computed: {
     xAxis() {
       console.log(' this.companyId', this.companyId);
-      return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
+      return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量'];
     },
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
+      //今天的时间
+      // var day2 = new Date();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      // const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
+      // const month = new Date().getMonth() + 1;
+      // const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
+      // const year = new Date().getFullYear();
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -65,19 +77,22 @@ export default {
       const month = new Date().getMonth() + 1;
       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
       const year = new Date().getFullYear();
-      if (this.period === 1  && this.than === '同比') {
+      if (this.period === 1 && this.than === '同比') {
         items = [
-          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${year - 1}年${yesterday}累计` },
+          { label: `${yesterday}日累计`, },
+
+          // { label: `${month}月${today}日目标`, },
         ];
-      } else if (this.period ===1 && this.than === '环比') {
+      } else if (this.period === 1 && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${dayBeYes}日累计` },
+          { label: `${yesterday}日累计` },
+          // { label: `${month}月${today}日目标`, },
         ];
       } else if (this.period === 2 && this.than === '同比') {
         items = [
-          { label: `去年本周`, color: "#12f7f1" },
+          { label: `${year-1}年本周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === 2 && this.than === '环比') {
@@ -87,7 +102,7 @@ export default {
         ];
       } else if (this.period === 3 && this.than === '同比') {
         items = [
-          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${year-1}年${month}月`, color: "#12f7f1" },
           { label: `${month}月`, color: "#58adfa" },
           { label: `${month}月目标`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
@@ -158,8 +173,11 @@ function getTemplate(period, dataList, than) {
   // console.log('dataList',dataList);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -172,11 +190,11 @@ function getTemplate(period, dataList, than) {
   if (period === 1 && than === '同比') {
     items = [
       {
-        name: `去年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -184,11 +202,11 @@ function getTemplate(period, dataList, than) {
   } else if (period ===1 && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -196,7 +214,7 @@ function getTemplate(period, dataList, than) {
   } else if (period === 2 && than === '同比') {
     items = [
       {
-        name: `去年本周`,
+        name: `${year-1}年本周`,
         data: dataList ? dataList[0] : [],
       },
       {
@@ -220,7 +238,7 @@ function getTemplate(period, dataList, than) {
   } else if (period === 3 && than === '同比') {
     items = [
       {
-        name: `去年${month}月`,
+        name: `${year-1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {

src/views/copilot/factoryData/components/ContainerIcon.vue

@@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-09 16:49:22
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
     filename: ContainerIcon.vue
     author: liubin
     date: 2024-04-09 16:41:36
-    description: 
+    description:
 -->
 
 <template>
@@ -49,8 +56,8 @@ export default {
 .container-icon {
   //   width: 32px;
   //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
   background: #ccc2;
 }
 </style>

src/views/copilot/factoryData/components/Order.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="order-container">
     <div class="table">
-      <dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" />
+      <dv-scroll-board v-if="showTable" :config="config"
+        style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
     </div>
     <div class="chart">
       <div class="chart-title">
-        <span class="title">生产情况</span>
+        <span class="title">工单情况</span>
         <span class="line"></span>
       </div>
-      <barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
+      <div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
+        <CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
+          :active="i === type" @click="() => $emit('update:type', i)" />
+      </div>
+      <barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
     </div>
   </div>
 
@@ -16,14 +21,18 @@
 <script>
 import { debounce } from "@/utils/debounce";
 import barChartBase from './BarChartBase'
+// import barChartBase from './BarChartBase'
+import CopilotButton from "./chartButton"
 export default {
   name: "Order",
   components: {
     barChartBase,
+    CopilotButton,
   },
   data() {
     return {
       showTable: true,
+      // type: '目标产量',
       config: {
         header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
         headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -31,14 +40,19 @@ export default {
         evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
         data: [],
         rowNum: 12,
+        fontSize:16,
         waitTime: 3000,
-        columnWidth: [100],
-        align: ["center"],
+        columnWidth: [150],
+        align: ["left"],
         carousel: "page",
       },
     };
   },
   props: {
+    type: {
+      type: String,
+      default: "目标产量",
+    },
     prodOrder: {
       type: Array,
       default: [],
@@ -58,9 +72,18 @@ export default {
     },
   },
   mounted() {
-    window.addEventListener("resize", this.tableReset);
+    window.addEventListener("resize", this.tableReset)
+    this.$nextTick(() => {
+      let button = document.getElementsByClassName('button-type')
+      console.log(button);
+      button[0].children[0].style.borderRadius = '4px 0 0 4px'
+      button[0].children[5].style.borderRadius = '0px 4px 4px 0px'
+      // children[5].classList.add('skate')
+      // console.log(button[0].children[5].classList);
+    });
   },
   methods: {
+
     tableReset() {
       this.showTable = false;
       debounce(() => {
@@ -77,53 +100,39 @@ export default {
           let arr = [];
           // arr.push(i + 1);
           arr.push(
-            `<span title=${this.prodOrder[i].workOrderNumber || ""}>${
+            `<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
             this.prodOrder[i].workOrderNumber || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].inStatus || ""}>${
-            this.prodOrder[i].inStatus || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].plannedInvestment || ""}>${
-            this.prodOrder[i].plannedInvestment || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
-            }</span>`
-          );
-          arr.push(`<span style="display:inline-block;width:45px;">${
-            this.prodOrder[i].productionProgress
-            ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
-              : "0%"
-          }</span>
+            }</span>`,
+              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
+              }</span>`,
+              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
+              }</span>`,
+              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
+              }</span>`,
+              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
+              }</span>`,
+              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
+              }</span>`,
+              `<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
+                ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
+                : "0%"
+              }</span>
             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
-              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
-            this.prodOrder[i].productionProgress
-            ? this.prodOrder[i].productionProgress.toFixed(0) *
-                      37.68 *
-                      0.01 +
-                    "," +
-                    (1 -
-              this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
-                      37.68
-                  : 0 + "," + 37.68
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
+                ? this.prodOrder[i].productionProgress.toFixed(2) *100 *
+                37.68 *
+                0.01 +
+                "," +
+                (1 -
+                  this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 *
+                37.68
+                : 0 + "," + 37.68
               }"/>
             </svg>
-          </div>`);
+          </div>`
+          )
           outArr.push(arr);
         }
         this.config.data = outArr;
@@ -180,7 +189,7 @@ export default {
               height: 1px; // display: inline-block;
               border: 1px solid;
               // display: inline-block;
-              border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
+              border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
               backdrop-filter: blur(3px);
             }
           }

src/views/copilot/factoryData/components/ProdMonitor.vue

@@ -8,11 +8,11 @@
         </div>
         <div class="middle-box">
           <span class="type">玻璃类型</span>
-          <span class="type-name">FTO投入</span>
+          <span class="type-name">FTO</span>
         </div>
         <div class="right-box">
           <span class="type">投入数量</span>
-          <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
+          <span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span>
         </div>
       </div>
       <div class="std-box">
@@ -23,13 +23,13 @@
           <div class="separate">
             <div>
               <span class="type">玻璃类型</span>
-              <span class="type-name">标准组检产量</span>
+              <span class="type-name">标准组件</span>
             </div>
             <div>
               <span class="type">良品数量</span>
               <span class="type-name">{{
-              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
-              }}</span>
+                msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
+                }}</span>
             </div>
           </div>
         </div>
@@ -38,12 +38,12 @@
             <div>
               <span class="type">生产数量</span>
               <span class="num">{{
-              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
-              }}</span>
+                msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
+                }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-              <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
+              <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
             </div>
           </div>
         </div>
@@ -56,13 +56,13 @@
           <div class="separate">
             <div>
               <span class="type">玻璃类型</span>
-              <span class="type-name">芯片产量</span>
+              <span class="type-name">芯片</span>
             </div>
             <div>
               <span class="type">良品数量</span>
               <span class="type-name">{{
-              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
-              }}</span>
+                msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
+                }}</span>
             </div>
           </div>
         </div>
@@ -71,12 +71,12 @@
             <div>
               <span class="type">生产数量</span>
               <span class="num">{{
-              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
-              }}</span>
+                msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
+                }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-              <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
+              <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
             </div>
           </div>
         </div>
@@ -89,13 +89,13 @@
           <div class="separate">
             <div>
               <span class="type">玻璃类型</span>
-              <span class="type-name">BIPV产量</span>
+              <span class="type-name">BIPV</span>
             </div>
             <div>
               <span class="type">良品数量</span>
               <span class="type-name">{{
-              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
-              }}</span>
+                msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
+                }}</span>
             </div>
           </div>
         </div>
@@ -104,12 +104,12 @@
             <div>
               <span class="type">生产数量</span>
               <span class="num">{{
-              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
-              }}</span>
+                msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
+                }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-              <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
+              <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
             </div>
           </div>
         </div>
@@ -118,7 +118,11 @@
     <div class="chart">
       <div class="chart-title">
         <span class="title">生产情况</span>
-        <span class="line"></span>
+        <div class="button-than" style="position: absolute;right: 3%;">
+          <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+            @click="() => $emit('update:than', i)" />
+        </div>
+        <!-- <span class="line"></span> -->
       </div>
       <barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
         style="height: 0;flex:1">
@@ -129,11 +133,12 @@
 <script>
 import { number } from 'echarts';
 import barChartBase from './ChipOee'
-
+import CopilotButton from "./button.vue"
 export default {
   name: "ProdMonitor",
   components: {
     barChartBase,
+    CopilotButton
   },
   data() {
     return {
@@ -154,6 +159,9 @@ export default {
       type: Number,
       default:0
     },
+    than: {
+      type: String,
+    },
     than: {
       type: String,
       default: '同比',
@@ -182,10 +190,14 @@ export default {
   },
   mounted() {
     this.makeData();
+    this.$nextTick(() => {
+      let button = document.getElementsByClassName('button-than')
+      button[0].children[0].style.borderRadius = '4px 0 0 4px'
+      button[0].children[1].style.borderRadius = '0px 4px 4px 0'
+    })
   },
   methods: {
     makeData() {
-      console.log('msgObj', this.msgObj);
       this.msgObj.chip = {};
       this.msgObj.stand = {};
       this.msgObj.bipv = {};
@@ -234,19 +246,19 @@ export default {
           // width: 5vw;
           color: #FFFFFF;
           line-height: 24px;
-          text-align: left;
+          // text-align: left;
           font-style: normal;
           display: inline-block;
       }
-      .line{
-        flex: 1;
-        // width: 80%;
-        height: 1px;        // display: inline-block;
-        border: 1px solid;
-        // display: inline-block;
-        border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
-        backdrop-filter: blur(3px);
-      }
+      // .line{
+      //   flex: 1;
+      //   // width: 80%;
+      //   height: 1px;        // display: inline-block;
+      //   border: 1px solid;
+      //   // display: inline-block;
+      //   border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
+      //   backdrop-filter: blur(3px);
+      // }
     }
   }
   .data{

src/views/copilot/factoryData/components/button.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-06 14:22:56
+ * @LastEditTime: 2024-07-02 13:54:08
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <button
+    class="copilot-btn"
+    :class="[active ? 'active' : '']"
+    @click="$emit('click', label)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "CopilotButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+};
+</script>
+
+<style>
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.copilot-btn {
+  /* flex: 1; */
+  /* position: relative; */
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  line-height: 22px;
+  /* letter-spacing: 5px; */
+  text-align: center;
+  font-style: normal;
+  letter-spacing: 10px;
+  cursor: pointer;
+}
+
+.copilot-btn.active {
+  background: #1D74D8;
+  /* border-radius: 4px;; */
+}
+/* .copilot-btn::before,
+.copilot-btn::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  background: transparent;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  border-top-color: #007be4;
+}
+
+.copilot-btn::before {
+  left: 0;
+  border-left-color: #007be4;
+}
+
+.copilot-btn::after {
+  right: 0;
+  border-right-color: #007be4;
+} */
+</style>

src/views/copilot/factoryData/components/chartButton.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-07 08:37:17
+ * @LastEditTime: 2024-07-18 16:16:24
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <button
+    class="chart-btn"
+    :class="[active ? 'active' : '']"
+    @click="$emit('click', label)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "CopilotButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+  },
+};
+</script>
+
+<style>
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: none;
+}
+</style>
+
+<style scoped>
+.skate {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+
+.chart-btn:nth-child(6)::after {
+  content: '';
+  width: 0;
+  height: 0;
+  display: none;
+}
+.chart-btn {
+  /* flex: 1; */
+  position: relative;
+  width: 88px;
+  height: 32px;
+  background: #01306C;
+  /* border-radius: 4px 0px 0px 4px; */
+  backdrop-filter: blur(3px);
+  /* text-align: center;
+  padding: 12px;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 18px; */
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 22px;
+  letter-spacing: 5px;
+  text-align: center;
+  font-style: normal;
+  /* margin-right: 1px; */
+  /* letter-spacing: 10px; */
+  cursor: pointer;
+}
+.chart-btn::after {
+  /* flex: 1; */
+  /* position: relative; */
+  content: "";
+  position: absolute;
+    /* width: 16px; */
+    /* height: 16px; */
+  top: px;
+  right: -1px;
+  width: 1px;
+  height: 23px;
+  border: 1px solid #010D18;
+}
+.chart-btn.active {
+  background: #1D74D8;
+  /* border-radius: 4px;; */
+}
+.chart-btn.active::after {
+  display: none;
+  /* border-radius: 4px;; */
+}
+/* .copilot-btn::before,
+.copilot-btn::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  background: transparent;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  border-top-color: #007be4;
+}
+
+.copilot-btn::before {
+  left: 0;
+  border-left-color: #007be4;
+}
+
+.copilot-btn::after {
+  right: 0;
+  border-right-color: #007be4;
+} */
+</style>

src/views/copilot/factoryData/components/leftContainer.vue

@@ -0,0 +1,226 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-05 09:36:07
+ * @LastEditTime: 2024-07-19 16:16:02
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description:
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 96%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 80%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 4%;
+    bottom: 0;
+    background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/factoryData/components/rightContainer.vue

@@ -0,0 +1,220 @@
+<!--
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description:
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button v-if="false" style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      " @click="$emit('refresh')">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        style="width: 24px; height: 24px">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <!-- content  -->
+    <div class="container-head" ref="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div class="container-body" :class="[
+      side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+    ]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue"
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {},
+  mounted() {
+
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+
+
+.copilot-container {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
+  backdrop-filter: blur(4px);
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 96%;
+      width: 0.11415vw;
+      border-radius: 2px;
+      top: 0%;
+      left: 0;
+      background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 80%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 3%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
+    border-left: 0.532vw solid transparent;
+    border-bottom: .6vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/copilot/factoryData/hdIndex.vue

@@ -5,12 +5,12 @@
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
-            :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
-        </db-container>
-        <db-container title="工单监控" icon="order">
-          <order :prodOrder="prodOrder" />
+          <prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than"
+            :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
+        <left-container title="工单监控" icon="order">
+          <order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,8 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +39,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,
@@ -45,6 +47,7 @@ export default {
   },
   data() {
     return {
+      type: '目标产量',
       companyId: 1,
       companyName: "邯郸中建材光电材料有限公司",
       period: 1,
@@ -73,6 +76,10 @@ export default {
     this.getMes();
   },
   methods: {
+    updateType(val) {
+      console.log(val)
+      this.type = val
+    },
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;
@@ -81,7 +88,7 @@ export default {
     updateThan(val) {
       console.log(val);
       this.than = val;
-      // this.getMes();
+      this.getMes()
     },
     updatePeriod(val) {
       this.period = val;
@@ -127,11 +134,11 @@ export default {
         if (preData && preData[0] != null) {
           for (const factory of preData) {
             if (factory.previousGlassType === 0) {
-              preDataDetail[1] = factory.previousYearOutputNumber
+              preDataDetail[1] = factory.previousOutputNumber
             } else if (factory.previousGlassType === 1) {
-              preDataDetail[2] = factory.previousYearOutputNumber
-            } else if (factory.previousYearOutputNumber === 2) {
-              currentDataDetail[3] = factory.outputNumber
+              preDataDetail[2] = factory.previousOutputNumber
+            } else if (factory.previousGlassType === 2) {
+              preDataDetail[3] = factory.previousOutputNumber
             }
           }
         }

src/views/copilot/factoryData/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="factory-layout">
-    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
-      @update:than="updateThan" @update:period="updatePeriod" />
+    <FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period"
+      @update:period="updatePeriod" />
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
-            :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
-        </db-container>
-        <db-container title="工单监控" icon="order">
-          <order :prodOrder="prodOrder" />
+          <prod-monitor @update:than="updateThan" :than="than" :companyId="companyId" :factoryData="factoryData"
+             :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
+        <left-container title="工单监控" icon="order">
+          <order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,9 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
+
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +40,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer:leftContainer,
     ProdMonitor,
     // Store,
     // Energy,
@@ -46,6 +49,7 @@ export default {
   data() {
     return {
       companyId: 0,
+      type:'目标产量',
       companyName: "瑞昌中建材光电材料有限公司",
       period: 1,
       show:false,
@@ -73,6 +77,10 @@ export default {
     this.getMes();
   },
   methods: {
+    updateType(val) {
+      console.log(val)
+      this.type = val
+    },
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;
@@ -81,7 +89,7 @@ export default {
     updateThan(val) {
       console.log(val);
       this.than = val;
-      // this.getMes();
+      this.getMes()
     },
     updatePeriod(val) {
       this.period = val;
@@ -124,16 +132,17 @@ export default {
             // }
           }
         }
-        if (preData && preData[0] != null) {
+        if (preData) {
           for (const factory of preData) {
             if (factory.previousGlassType === 0) {
-              preDataDetail[1] = factory.previousYearOutputNumber
+              console.log('factory', factory)
+              preDataDetail[1] = factory.previousOutputNumber
             } else if (factory.previousGlassType === 1) {
-              preDataDetail[2] = factory.previousYearOutputNumber
+              preDataDetail[2] = factory.previousOutputNumber
             }
           }
         }
-        if (targetListResponse && targetListResponse[0] != null) {
+        if (targetListResponse) {
           for (const factory of targetListResponse) {
             targetDataDetail[0] = factory.ftoInput
             // if (factory.previousGlassType === 0) {
@@ -145,7 +154,7 @@ export default {
           }
         }
         // console.log('ftoInvest',ftoInvest)
-        if (factoryListResponse && factoryListResponse[0] != null) {
+        if (factoryListResponse) {
           for (const factory of factoryListResponse) {
             // targetDataDetail[0] = factory.ftoInput
             if (factory.glassType === 0) {
@@ -155,6 +164,7 @@ export default {
             }
           }
         }
+        console.log('  this.factoryData.preDataDetail', preDataDetail);
         this.factoryData.preDataDetail = preDataDetail
         this.factoryData.currentDataDetail = currentDataDetail
         this.factoryData.targetDataDetail = targetDataDetail

src/views/copilot/factoryData/jmsIndex.vue

@@ -8,9 +8,9 @@
           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="工单监控" icon="order">
+        <left-container title="工单监控" icon="order">
           <order :prodOrder="prodOrder" />
-        </db-container>
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,8 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +39,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,

src/views/copilot/factoryData/ksIndex.vue

@@ -8,9 +8,9 @@
           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="工单监控" icon="order">
+        <left-container title="工单监控" icon="order">
           <order :prodOrder="prodOrder" />
-        </db-container>
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,8 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +39,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,

src/views/copilot/factoryData/oldIndex.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-21 13:24:03
- * @LastEditTime: 2024-05-21 13:24:03
+ * @LastEditTime: 2024-06-05 09:43:30
  * @LastEditors: zhp
  * @Description:
 -->
@@ -37,7 +37,7 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+// import Container from "./components/Container.vue";
 import ProdMonitor from "./components/ProdMonitor.vue";
 import Store from "./components/Store.vue";
 import Energy from "./components/Energy.vue";
@@ -47,7 +47,7 @@ export default {
   name: "factoryData",
   components: {
     FactoryDataHeader,
-    DbContainer: Container,
+    // DbContainer: Container,
     ProdMonitor,
     Store,
     Energy,

src/views/copilot/factoryData/zzIndex.vue

@@ -8,9 +8,9 @@
           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="工单监控" icon="order">
+        <left-container title="工单监控" icon="order">
           <order :prodOrder="prodOrder" />
-        </db-container>
+        </left-container>
         <!-- <db-container title="" icon="store"> -->
         <!-- <store :stock="stock" /> -->
         <!-- </db-container> -->
@@ -26,7 +26,9 @@
 </template>
 <script>
 import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
-import Container from "./components/Container.vue";
+import Container from "./components/rightContainer.vue";
+import leftContainer from "./components/leftContainer.vue";
+
 import ProdMonitor from "./components/ProdMonitor.vue";
 import { deepClone } from "@/utils";
 // import Store from "./components/Store.vue";
@@ -38,6 +40,7 @@ export default {
   components: {
     FactoryDataHeader,
     DbContainer: Container,
+    LeftContainer: leftContainer,
     ProdMonitor,
     // Store,
     // Energy,

src/views/copilot/yield/components/ChipInvest.vue

@@ -23,7 +23,10 @@ export default {
   components: { BarChartBase },
   data() {
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+
+    ];
     return {
       xAxis: cities,
     };
@@ -42,8 +45,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -55,17 +61,17 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
-          { label: `去年本周`, color: "#12f7f1" },
+          { label: `${year-1}年本周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '环比') {
@@ -75,7 +81,7 @@ export default {
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
-          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${year-1}年${month}月`, color: "#12f7f1" },
           { label: `${month}月`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
@@ -146,8 +152,11 @@ export default {
 function getTemplate(period, dataList,than) {
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -160,11 +169,11 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `去年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -172,11 +181,11 @@ function getTemplate(period, dataList,than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -184,7 +193,7 @@ function getTemplate(period, dataList,than) {
   } else if (period === '周' && than === '同比') {
     items = [
       {
-        name: `去年本周`,
+        name: `${year-1}年本周`,
         data: dataList ? dataList[0] : [],
       },
       {
@@ -208,7 +217,7 @@ function getTemplate(period, dataList,than) {
   } else if (period === '月' && than === '同比') {
     items = [
       {
-        name: `去年${month}月`,
+        name: `${year-1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {

src/views/copilot/yield/components/FtoInvest.vue

@@ -23,7 +23,10 @@ export default {
   components: { BarChartBase },
   data() {
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+
+    ];
     return {
       xAxis: cities,
     };
@@ -42,8 +45,11 @@ export default {
     legend() {
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -55,17 +61,17 @@ export default {
       const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${yesterday}日`, color: "#12f7f1" },
-          { label: `${month}月${today}日`, color: "#58adfa" },
+          { label: `${dayBeYes}日`, color: "#12f7f1" },
+          { label: `${yesterday}日`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
-          { label: `去年本周`, color: "#12f7f1" },
+          { label: `${year-1}年本周`, color: "#12f7f1" },
           { label: `本周`, color: "#58adfa" },
         ];
       } else if (this.period === '周' && this.than === '环比') {
@@ -75,7 +81,7 @@ export default {
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
-          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${year-1}年${month}月`, color: "#12f7f1" },
           { label: `${month}月`, color: "#58adfa" },
           // { label: `${month}月目标`, value: valueTuple[2] },
         ];
@@ -147,9 +153,15 @@ export default {
 
 function getTemplate(period, dataList,than) {
   let items = [];
+  // var day1 = new Date();
+  // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  // var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -162,11 +174,11 @@ function getTemplate(period, dataList,than) {
   if (period === '日' && than === '同比') {
     items = [
       {
-        name: `去年${month}月${today}日`,
+        name: `${year - 1}年${yesterday}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -174,11 +186,11 @@ function getTemplate(period, dataList,than) {
   } else if (period === '日' && than === '环比') {
     items = [
       {
-        name: `${yesterday}日`,
+        name: `${dayBeYes}日`,
         data: dataList ? dataList[0] : [],
       },
       {
-        name: `${month}月${today}日`,
+        name: `${yesterday}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
@@ -186,7 +198,7 @@ function getTemplate(period, dataList,than) {
   } else if (period === '周' && than === '同比') {
     items = [
       {
-        name: `去年本周`,
+        name: `${year-1}年本周`,
         data: dataList ? dataList[0] : [],
       },
       {
@@ -210,7 +222,7 @@ function getTemplate(period, dataList,than) {
   } else if (period === '月' && than === '同比') {
     items = [
       {
-        name: `去年${month}月`,
+        name: `${year-1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {

src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 13:32:59
- * @LastEditTime: 2024-05-30 13:35:00
+ * @LastEditTime: 2024-07-19 16:05:46
  * @LastEditors: zhp
  * @Description:
 -->
@@ -78,13 +78,13 @@ export default {
     valueTuple() {
       // [previousValue, currentValue, sumValue?]
       const getter = this.$store.getters.copilot.yield[this.dataSourceField];
-      if (this.period === "日" || this.period === "周") {
-        console.log(this.period)
-        return [
-          getter.previous[this.factoryId],
-          getter.current[this.factoryId],
-        ];
-      }
+      // if (this.period === "日" || this.period === "周") {
+      //   console.log(this.period)
+      //   return [
+      //     getter.previous[this.factoryId],
+      //     getter.current[this.factoryId],
+      //   ];
+      // }
       // [100, 200, 200]
       return [
         getter.previous[this.factoryId],
@@ -100,8 +100,11 @@ export default {
       const vt = this.valueTuple;
       let items = [];
       var day1 = new Date();
-      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var day2 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
       //今天的时间
       // var day2 = new Date();
       // day2.setTime(day2.getTime());
@@ -113,28 +116,32 @@ export default {
       // const year = new Date().getFullYear();
       if (this.period === '日' && this.than === '同比') {
         items = [
-          { label: `${month}月${today}日累计`,},
-          { label: `去年${month}月${today}日累计` },
+          { label: `${yesterday}日累计`,},
+          { label: `${year - 1}年${yesterday}累计` },
+          { label: `${yesterday}日目标`, },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
-          { label: `${month}月${today}日累计`},
           { label: `${yesterday}日累计`},
+          { label: `${dayBeYes}日累计` },
+          { label: `${yesterday}日目标`, },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
           { label: `本周累计`,},
-          { label: `去年本周累计`},
+          { label: `${year-1}年本周累计` },
+          { label: `本周目标`, },
         ];
       } else if (this.period === '周' && this.than === '环比') {
         items = [
           { label: `本周累计`,},
-          { label: `上周累计`,},
+          { label: `上周累计`, },
+          { label: `本周目标`, },
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
           { label: `${month}月累计`,},
-          { label: `去年${month}月累计`, },
+          { label: `${year-1}年${month}月累计`, },
           { label: `${month}月目标`,},
         ];
       } else if (this.period === '月' && this.than === '环比') {
@@ -151,21 +158,27 @@ export default {
         ];
       }
       let titleValue =
-          vt[0] != null && vt[2] != null && vt[2] !== 0
-            ? `${vt[1] / vt[2]}%`
-            : "0%",
+        vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
+          ? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
+          : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
+            ? "100%" : '0%',
         subtitle =
-      this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
-      console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
-      console.log(items)
+          this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
+      console.log('titleValue', items)
+      let titleSize = fontSize(0.35)
+      let subtitleSize = fontSize(0.14)
+
+      // console.log(this.valueTuple[2]- this.valueTuple[1])
       return getOptions({
         titleValue,
         subtitle,
+        titleSize,
+        subtitleSize,
         currentName: items[0].label,
         preName: items[1].label,
         previousSum: this.valueTuple[0],
         currentSum: this.valueTuple[1],
-        targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
+        targetSum: this.valueTuple[2] ? this.valueTuple[2] :0,
       });
     },
 
@@ -196,18 +209,37 @@ export default {
     }
   },
   methods: {
+    formatNumber(num) {
+      // 判断是否为整数
+      if (Number.isInteger(num)) {
+        return num; // 如果是整数，直接转换为字符串
+      } else {
+        // 如果不是整数，保留两位小数并转换为字符串
+        return num.toFixed(2);
+      }
+    }
     // fullscreen mixin 需要的回调
     // fullscreenCallback(isFullscreen) {
     //   console.log("isFullscreen--->", isFullscreen);
     // },
   },
 };
-
-function calculateItems(period, valueTuple,than) {
+function fontSize(res){
+  let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = 100 * (clientWidth / 1920);
+  return res * fontSize;
+}
+function calculateItems(period, valueTuple, than) {
+  console.log('valueTuple', valueTuple);
   let items = [];
   var day1 = new Date();
-  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var day2 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
+  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
+
   //今天的时间
   // var day2 = new Date();
   // day2.setTime(day2.getTime());
@@ -219,40 +251,44 @@ function calculateItems(period, valueTuple,than) {
   const year = new Date().getFullYear();
   if (period === '日' && than === '同比') {
     items = [
-      { label: `${month}月${today}日累计`, value: valueTuple[1] },
-      { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
+      { label: `${year - 1}年${yesterday}累计`, value: valueTuple[0] },
+      { label: `${yesterday}累计`, value: valueTuple[1] },
+      { label: `${yesterday}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '日' && than === '环比') {
     items = [
-      { label: `${month}月${today}日累计`, value: valueTuple[1] },
-      { label: `${yesterday}日累计`, value: valueTuple[0] },
+      { label: `${dayBeYes}日累计`, value: valueTuple[0] },
+      { label: `${yesterday}日累计`, value: valueTuple[1] },
+      { label: `${yesterday}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '周' && than === '同比') {
     items = [
+      { label: `${year-1}年本周累计`, value: valueTuple[0] },
       { label: `本周累计`, value: valueTuple[1] },
-      { label: `去年本周累计`, value: valueTuple[0] },
+      { label: `本周目标`, value: valueTuple[2] },
     ];
   } else if (period === '周' && than === '环比') {
     items = [
-      { label: `本周累计`, value: valueTuple[1] },
       { label: `上周累计`, value: valueTuple[0] },
+      { label: `本周累计`, value: valueTuple[1] },
+      { label: `本周目标`, value: valueTuple[2] },
     ];
   } else if (period === '月' && than === '同比') {
     items = [
+      { label: `${year-1}年${month}月累计`, value: valueTuple[0] },
       { label: `${month}月累计`, value: valueTuple[1] },
-      { label: `去年${month}月累计`, value: valueTuple[0] },
       { label: `${month}月目标`, value: valueTuple[2] },
     ];
   } else if (period === '月' && than === '环比') {
     items = [
-      { label: `${month}月累计`, value: valueTuple[1] },
       { label: `${lastMonth}月累计`, value: valueTuple[0] },
+      { label: `${month}月累计`, value: valueTuple[1] },
       { label: `${month}月目标`, value: valueTuple[2] },
     ];
   } else {
     items = [
-      { label: `${year}年累计`, value: valueTuple[1] },
       { label: `${year - 1}年累计`, value: valueTuple[0] },
+      { label: `${year}年累计`, value: valueTuple[1] },
       { label: `${year}年目标`, value: valueTuple[2] },
     ];
   }
@@ -270,8 +306,9 @@ function calculateItems(period, valueTuple,than) {
 </script>
 
 <style scoped>
+
 .double-ring-chart {
-  height: 100%;
+  height: 98%;
   display: flex;
   flex-direction: column;
 }
@@ -286,7 +323,7 @@ function calculateItems(period, valueTuple,than) {
 }
 
 .double-ring-chart__legend {
-  padding: 12px;
+  /* padding: 12px; */
   color: #fff;
   display: flex;
   justify-content: center;
@@ -295,6 +332,7 @@ function calculateItems(period, valueTuple,than) {
 
 .legend-item {
   display: flex;
+  /* font-size:16px; */
   flex-direction: column;
   align-items: flex-start;
 }
@@ -314,17 +352,17 @@ function calculateItems(period, valueTuple,than) {
   left: -18px;
 }
 
-.legend-item:nth-child(1) .legend-item__label::before {
+.legend-item:nth-child(2) .legend-item__label::before {
   background: #12fff5;
 }
-.legend-item:nth-child(1) .legend-item__value {
+.legend-item:nth-child(2) .legend-item__value {
   color: #12fff5;
 }
 
-.legend-item:nth-child(2) .legend-item__label::before {
+.legend-item:nth-child(1) .legend-item__label::before {
   background: #0f65ff;
 }
-.legend-item:nth-child(2) .legend-item__value {
+.legend-item:nth-child(1) .legend-item__value {
   color: #0f65ff;
 }
 

src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue

@@ -1,10 +1,10 @@
 <!--
-    filename: DoubleRingWrapper.vue
-    author: liubin
-    date: 2024-04-17 09:55:12
-    description:
+ * @Author: zhp
+ * @Date: 2024-05-30 16:00:50
+ * @LastEditTime: 2024-07-09 09:09:07
+ * @LastEditors: zhp
+ * @Description:
 -->
-
 <template>
   <div class="double-ring-wrapper">
     <template>
@@ -42,13 +42,14 @@ export default {
     return {
       factoryId: 4, // 默认成都
       cityOptions: [
-        "成都",
-        "邯郸",
-        "株洲",
         "瑞昌",
-        "佳木斯",
-        "凯盛光伏",
-        "蚌埠兴科",
+        // "成都",
+        "邯郸",
+        // "株洲",
+
+        // "佳木斯",
+        // "凯盛光伏",
+        // "蚌埠兴科",
       ],
     };
   },
@@ -63,7 +64,7 @@ export default {
 <style scoped lang="scss">
 .double-ring-wrapper {
   height: 100%;
-  padding: 12px 24px;
+  padding: 0px 24px;
   display: flex;
   gap: 12px;
   flex-direction: column;

src/views/copilot/yield/components/sub/ring/noDoubleRingWrapper.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-24 15:15:00
- * @LastEditTime: 2024-05-28 08:42:36
+ * @LastEditTime: 2024-07-09 09:27:12
  * @LastEditors: zhp
  * @Description:
 -->
@@ -54,12 +54,12 @@ export default {
     return {
       factoryId: 4, // 默认成都
       cityOptions: [
-        "成都",
+        // "成都",
         "邯郸",
-        "株洲",
-        "佳木斯",
-        "凯盛光伏",
-        "蚌埠兴科",
+        // "株洲",
+        // "佳木斯",
+        // "凯盛光伏",
+        // "蚌埠兴科",
       ],
     };
   },
@@ -74,7 +74,7 @@ export default {
 <style scoped lang="scss">
 .double-ring-wrapper {
   height: 100%;
-  padding: 12px 24px;
+  padding: 0px 24px;
   display: flex;
   gap: 12px;
   flex-direction: column;

src/views/copilot/yield/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-10 11:10:54
- * @LastEditTime: 2024-05-28 13:36:07
+ * @LastEditTime: 2024-07-09 15:09:27
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,29 +9,33 @@
 <template>
   <div class="yield-copilot">
     <section class="top flex">
-      <db-container class="std-yield" title="标准组件产出" icon="std">
+      <right-container class="std-yield" title="标准组件产出" icon="std">
         <std-output v-if="show" :period="period" :than="than" />
-      </db-container>
+      </right-container>
       <db-container class="chip-yield" title="芯片产出" icon="chip2">
         <chip-output v-if="show" :period="period" :than="than" />
       </db-container>
-      <db-container class="bipv-yield" title="BIPV产出" icon="bipv">
+      <left-container class="bipv-yield" title="BIPV产出" icon="bipv">
         <bipv-output v-if="show" :period="period" :than="than" />
-      </db-container>
+      </left-container>
     </section>
     <section class="bottom flex">
-      <db-container class="fto-involve" title="FTO投入">
+      <bottom-right-container class="fto-involve" title="FTO投入">
         <fto-invest :period="period" :than="than" />
-      </db-container>
-      <db-container class="chip-involve" title="芯片投入" icon="chip">
+      </bottom-right-container>
+      <bottom-left-container class="chip-involve" title="芯片投入" icon="chip">
         <chip-invest :period="period" :than="than" />
-      </db-container>
+        </bottom-left-container>
     </section>
   </div>
 </template>
 
 <script>
-import Container from "@/views/copilot/components/Container.vue";
+import twoContainer from "@/views/copilot/components/twoContainer.vue";
+import leftContainer from "@/views/copilot/components/leftContainer.vue";
+import rightContainer from "@/views/copilot/components/rightContainer.vue";
+import bottomRightContainer from "@/views/copilot/components/bottomRightContainer.vue";
+import bottomLeftContainer from "@/views/copilot/components/bottomLeftContainer.vue";
 import StdOutput from "./components/StdOutput.vue";
 import ChipOutput from "./components/ChipOutput.vue";
 import FtoInvest from "./components/FtoInvest.vue";
@@ -41,7 +45,11 @@ import ChipInvest from "./components/ChipInvest.vue";
 export default {
   name: "YieldCopilot",
   components: {
-    DbContainer: Container,
+    DbContainer: twoContainer,
+    bottomRightContainer,
+    bottomLeftContainer,
+    leftContainer,
+    rightContainer,
     StdOutput,
     ChipOutput,
     BipvOutput,

src/views/copilot/yield/options/double-ring-chart-options.js

@@ -3,6 +3,8 @@ export default ({
   subtitle,
   previousSum,
   currentSum,
+  subtitleSize,
+  titleSize,
   targetSum,
   currentName,
   preName,
@@ -14,22 +16,29 @@ export default ({
     top: 0,
     containLabel: true,
   },
-  tooltip: {},
+  tooltip: {
+    trigger: "item",
+    // extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+    // backgroundColor: '#001829',
+    // borderColor: '#001829',
+  },
   title: {
     text: titleValue,
-    left: "44%",
-    top: "37%",
+    left: "48.5%",
+    top: "middle",
+    itemGap: 12,
+    textVerticalAlign:'auto',
     textAlign: "center",
     textStyle: {
-      fontWeight: 600,
-      fontSize: 32,
-      color: "#fffd",
+      fontWeight: 400,
+      fontSize: titleSize,
+      color: "rgba(223,241,254,.8)",
     },
     subtext: `\u2002${subtitle}\u2002`,
     subtextStyle: {
-      fontSize: 14,
+      fontSize: subtitleSize,
       fontWeight: 100,
-      color: "#fffd",
+      color: "rgba(255,255,255,.7)",
       align: "right",
     },
   },
@@ -38,8 +47,8 @@ export default ({
     {
       type: "pie",
       name: "当前目标",
-      radius: ["70%", "85%"],
-      center: ["45%", "52%"],
+      radius: ["74%", "86%"],
+      center: ["50%", "48%"],
       emptyCircleStyle: {
         color: "#042c5f33",
       },
@@ -47,8 +56,8 @@ export default ({
     // 数据 series
     {
       type: "pie",
-      radius: ["70%", "85%"],
-      center: ["45%", "52%"],
+      radius: ["74%", "86%"],
+      center: ["50%", "48%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,
@@ -61,6 +70,17 @@ export default ({
           value: currentSum,
           name: currentName,
           selected: false,
+          tooltip: {
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter:`
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
+              </div>
+              `
+          },
           itemStyle: {
             borderJoin: "round",
             borderCap: "round",
@@ -80,16 +100,19 @@ export default ({
           },
         },
         {
-          value:
-            targetSum > currentSum
-              ? targetSum - currentSum
-              : targetSum == 0
-              ? currentSum == 0
-                ? 1
-                : 0
-              : 0,
-
-          name: "未达成累计",
+          value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
+          name: currentName,
+           tooltip: {
+              backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+            extraCssText: 'padding:0;border-width:0',
+            formatter:`
+                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
+                </div>
+                `
+          },
           itemStyle: { color: "transparent" },
           label: { show: false },
         },
@@ -98,8 +121,8 @@ export default ({
     // 数据 series2 - 2023累计
     {
       type: "pie",
-      radius: ["55%", "70%"],
-      center: ["45%", "52%"],
+      radius: ["61%", "74%"],
+      center: ["50%", "48%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,
@@ -112,6 +135,17 @@ export default ({
           value: previousSum,
           name: preName,
           selected: false,
+          tooltip: {
+            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+            extraCssText: 'padding:0;border-width:0',
+            formatter:`
+                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
+                </div>
+                `
+          },
           itemStyle: {
             borderJoin: "round",
             borderCap: "round",
@@ -131,13 +165,20 @@ export default ({
           },
         },
         {
-          value:
-            targetSum > previousSum
-              ? targetSum - previousSum
-              : previousSum == 0
-              ? 1
-              : 0,
-          name: "-",
+
+          value:previousSum === 0 ? 1 : 0,
+          name: preName,
+          tooltip: {
+            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+            extraCssText: 'padding:0;border-width:0',
+            formatter:`
+                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
+                   <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
+                </div>
+                `
+          },
           itemStyle: { color: "transparent" },
           label: { show: false },
         },

src/views/dashboard/charts/Bipv.vue

@@ -1,8 +1,9 @@
-<!-- 
-    filename: Bipv.vue
-    author: liubin
-    date: 2024-04-10 15:39:54
-    description: 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-06-03 08:55:42
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -24,7 +25,10 @@ export default {
   data() {
     const year = new Date().getFullYear();
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = [ "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+
+    ];
     return {
       legend: [
         { label: `${year}年目标值`, color: "#f3c000" },
@@ -70,15 +74,15 @@ export default {
       return [
         {
           name: `${new Date().getFullYear()}年目标值`,
-          data: bipvOutput.target,
+          data: bipvOutput.target.splice(0, 1),
         },
         {
           name: `${new Date().getFullYear() - 1}年`,
-          data: bipvOutput.previous,
+          data: bipvOutput.previous.splice(0, 1)
         },
         {
           name: `${new Date().getFullYear()}年`,
-          data: bipvOutput.current,
+          data: bipvOutput.current.splice(0, 1),
         },
       ];
     },

src/views/dashboard/charts/ChipInvest.vue

@@ -1,8 +1,9 @@
-<!-- 
-    filename: chip-invest.vue
-    author: liubin
-    date: 2024-04-10 08:59:28
-    description: 
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-06-21 15:06:39
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -23,7 +24,9 @@ export default {
   data() {
     const year = new Date().getFullYear();
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+    ];
     return {
       legend: [
         { label: `${year - 1}年`, color: "#12f7f1" },
@@ -32,6 +35,7 @@ export default {
       xAxis: cities,
     };
   },
+
   computed: {
     series() {
       const chipInvest = this.$store.getters.home.chipInvest;

src/views/dashboard/charts/ChipYield.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: ChipYield.vue
     author: liubin
     date: 2024-04-11 10:46:47
-    description: 
+    description:
 -->
 
 <template>
@@ -11,24 +11,24 @@
     <section class="right-part">
       <div class="yield-location">
         <section class="btn-group">
-          <button
+          <!-- <button
             @click="activeLoc = '1'"
             :class="activeLoc === '1' ? 'active' : ''"
           >
             成都
-          </button>
+          </button> -->
           <button
             @click="activeLoc = '2'"
             :class="activeLoc === '2' ? 'active' : ''"
           >
             邯郸
           </button>
-          <button
+          <!-- <button
             @click="activeLoc = '3'"
             :class="activeLoc === '3' ? 'active' : ''"
           >
             株洲
-          </button>
+          </button> -->
           <button
             @click="activeLoc = '4'"
             :class="activeLoc === '4' ? 'active' : ''"
@@ -37,7 +37,7 @@
           </button>
         </section>
         <section class="btn-group">
-          <button
+          <!-- <button
             @click="activeLoc = '5'"
             :class="activeLoc === '5' ? 'active' : ''"
             class="fixwidth"
@@ -55,7 +55,7 @@
             :class="activeLoc === '7' ? 'active' : ''"
           >
             蚌埠兴科
-          </button>
+          </button> -->
         </section>
       </div>
       <div class="yield-summary">
@@ -85,13 +85,14 @@ export default {
   props: {},
   data() {
     return {
-      activeLoc: "1",
+      activeLoc: "2",
     };
   },
   computed: {
     output() {
       // ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
       const chipOutput = this.$store.getters.home.chipOutput;
+      console.log('chipOutput', chipOutput);
       if (
         !chipOutput ||
         !chipOutput.target ||

src/views/dashboard/charts/ChipYieldChart.vue

@@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-07-18 16:37:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
     filename: ChipYield.vue
     author: liubin
     date: 2024-04-11 10:46:47
-    description: 
+    description:
 -->
 
 <template>
@@ -46,7 +53,17 @@ export default {
           top: 0,
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "item",
+          // axisPointer: {
+          //   // type: "cross",
+          //   crossStyle: {
+          //     color: "rgba(237,237,237,0.5)",
+          //   },
+          // },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+        },
         title: {
           text: "0%",
           left: "48%",
@@ -59,7 +76,7 @@ export default {
           },
           subtext: `\u2002${year}年累计产出\u2002`,
           subtextStyle: {
-            fontSize: 12,
+            fontSize: 15,
             fontWeight: 100,
             color: "#fffd",
             align: "right",
@@ -91,9 +108,11 @@ export default {
             },
             data: [
               {
-                value: 90,
+                value: 0,
                 name: `${year}累计产出`,
                 selected: false,
+                tooltip: {
+                },
                 itemStyle: {
                   borderJoin: "round",
                   borderCap: "round",
@@ -113,8 +132,10 @@ export default {
                 },
               },
               {
-                value: 20,
-                name: "-",
+                value: 0,
+                name: `${year}目标`,
+                tooltip: {
+                },
                 itemStyle: { color: "transparent" },
                 label: { show: false },
               },
@@ -134,9 +155,22 @@ export default {
             },
             data: [
               {
-                value: 90,
+                value: 0,
                 name: `${year - 1}累计产出`,
                 selected: false,
+                tooltip: {
+                  trigger: "item",
+                  // axisPointer: {
+                  //   // type: "cross",
+                  //   crossStyle: {
+                  //     color: "rgba(237,237,237,0.5)",
+                  //   },
+                  // },
+                  backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+                  extraCssText: 'padding:0;border-width:0',
+                  formatter: params => {
+                  },
+                },
                 itemStyle: {
                   borderJoin: "round",
                   borderCap: "round",
@@ -157,7 +191,18 @@ export default {
               },
               {
                 value: 0,
-                name: "-",
+                name: `${year - 1}累计产出`,
+                tooltip: {
+                  trigger: "item",
+                  // axisPointer: {
+                  //   // type: "cross",
+                  //   crossStyle: {
+                  //     color: "rgba(237,237,237,0.5)",
+                  //   },
+                  // },
+                  backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+                  extraCssText: 'padding:0;border-width:0',
+                },
                 itemStyle: { color: "transparent" },
                 label: { show: false },
               },
@@ -202,32 +247,84 @@ export default {
       };
     },
     actualOptions() {
-      const options = JSON.parse(JSON.stringify(this.options));
+      console.log('this.output.current / this.output.target', this.output.current/this.output.target);
+      const year = new Date().getFullYear()
+      const options = this.options
+      // console.log('options', options);
       // 标题
-      if (!this.output.target) options.title.text = "0%";
-      else
-        options.title.text =
-          (this.output.current / this.output.target) * 100 + "%";
+      if (!this.output.target && !this.output.current) options.title.text = "0%";
+      else if (!this.output.target && this.output.current) options.title.text = "100%";
+      else options.title.text =
+        ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
       // 外环
       if (
         this.output.current == this.output.target &&
         this.output.current == 0
       ) {
-        options.series[1].data[0].value = 0;
-        options.series[1].data[1].value = 100;
+        this.options.series[1].data[0].value = 0;
+        this.options.series[1].data[1].value = 1;
+        this.options.series[1].data[0].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
+             <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
+              </div>`;
+        this.options.series[1].data[1].tooltip.formatter =
+            `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
+                <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span>
+              </div>`;
       } else {
-        options.series[1].data[0].value = this.output.current;
-        options.series[1].data[1].value =
+        this.options.series[1].data[0].value = this.output.current;
+        this.options.series[1].data[1].value =
           this.output.target - this.output.current;
+        this.options.series[1].data[0].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+           <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
+           <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
+              </div>`;
+        this.options.series[1].data[1].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
+            <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
+            <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
+              </div>`;
       }
       // 内环
       if (this.output.previous == 0) {
-        options.series[2].data[0].value = 0;
-        options.series[2].data[1].value = 100;
+        this.options.series[2].data[0].value = 0;
+        this.options.series[2].data[1].value = 1;
+        this.options.series[2].data[0].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+            <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
+            <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
+              </div>`;
+        this.options.series[2].data[1].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+         <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
+          <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
+              </div>`;
       } else {
-        options.series[2].data[0].value = this.output.previous;
-        options.series[2].data[1].value = 0;
+        this.options.series[2].data[0].value = this.output.previous;
+        this.options.series[2].data[1].value = 0;
+        this.options.series[2].data[0].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+      <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
+        <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
+              </div>`;
+        this.options.series[2].data[1].tooltip.formatter =
+          `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+          <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
+              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> +
+              <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
+              </div>`;
       }
+      console.log('options', options);
       return options;
     },
   },
@@ -243,6 +340,9 @@ export default {
     factory(val) {
       this.initOptions(this.actualOptions);
     },
+    actualOptions() {
+      this.initOptions(this.actualOptions);
+    }
   },
   mounted() {
     console.log("mounted", this.actualOptions);

src/views/dashboard/charts/Fto.vue

@@ -1,8 +1,9 @@
-<!-- 
-    filename: fto.vue
-    author: liubin
-    date: 2024-04-10 08:59:28
-    description: 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-06-27 16:30:58
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -23,7 +24,9 @@ export default {
   data() {
     const year = new Date().getFullYear();
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+    ];
     return {
       legend: [
         { label: `${year - 1}年`, color: "#12f7f1" },

src/views/dashboard/charts/LeftChartBase.vue

@@ -1,26 +1,17 @@
-<!-- 
+<!--
     filename: left-chart-base
     author: liubin
     date: 2024-04-10 08:59:28
-    description: 
+    description:
 -->
 
 <template>
   <chart-container class="left-chart-base">
     <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
-    <div
-      ref="chart"
-      style="max-width: 22vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
   </chart-container>
 </template>
 
@@ -59,14 +50,46 @@ export default {
       actualOptions: null,
       options: {
         grid: {
-          left: "3%",
+          left: "5%",
           right: "4%",
           bottom: "0",
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value: 0}</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+            // return res;
+          },
+        },
         xAxis: {
+          type:'category',
           axisTick: {
             show: false,
           },
@@ -76,23 +99,27 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            textStyle: {
+              color: "rgba(223,241,254,.8)",
+              fontSize: 16,
+            },
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/片",
+          // position:'left',
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            align:'right'
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -110,7 +137,16 @@ export default {
           {
             name: '', // this.series[0].name,
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
+            label: {
+              show: true, //开启显示
+              align: 'right', //在上方显示
+              position: 'top', //在上方显示
+              textStyle: { //数值样式
+                color: "rgba(223,241,254,.8)",
+                fontSize: 14
+              }
+            },
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -145,14 +181,21 @@ export default {
           {
             name: '', // this.series[1].name,
             type: "bar",
-            barWidth: 12,
-            // tooltip: {
-            //   valueFormatter: function (value) {
-            //     return value + " ml";
-            //   },
-            // },
+            barWidth: 16,
+            label: {
+              show: true, //开启显示
+              align: 'left', //在上方显示
+              position: 'top', //在上方显示
+              textStyle: { //数值样式
+                color: "rgba(223,241,254,.8)",
+                fontSize: 16
+              }
+            },
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
+              // normal: {
+
+              // },
               color: {
                 type: "linear",
                 x: 0,
@@ -184,9 +227,9 @@ export default {
       this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
       this.initOptions(this.actualOptions);
     },
     series(val) {
@@ -217,9 +260,25 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.left-chart-base {
-  // position: relative;
+.echarts-tooltip{
+  background: #001829;
+  // background-color: ;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
+    opacity: 0.6;
+    border-radius: 4px;
+    .content {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        backdrop-filter: blur(6px);
+        // transition: .3s transform;
+      }
+}
 
+.left-chart-base {
   .legend {
     position: absolute;
     top: 5.2vh;

src/views/dashboard/charts/RightChartBase.vue

@@ -1,26 +1,24 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-07-19 15:25:37
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
     filename: right-chart-base
     author: liubin
     date: 2024-04-10 08:59:28
-    description: 
+    description:
 -->
 
 <template>
   <chart-container class="right-chart-base">
     <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
+      <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
     </div>
-    <div
-      ref="chart"
-      style="max-width: 22vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
+    <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
   </chart-container>
 </template>
 
@@ -58,13 +56,50 @@ export default {
       isFullscreen: false,
       options: {
         grid: {
-          left: "3%",
+          left: "6%",
           right: "4%",
           bottom: "0",
           top: "18%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          confine:true,
+          backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+              `${params[i].seriesType === "line"
+                ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
+                <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
+                : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
+                <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
+              }` +
+                `<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
+            }
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
+          },
+
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -75,23 +110,25 @@ export default {
             },
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           data: this.xAxis,
         },
         yAxis: {
           name: "单位/片",
+          // position: 'left',
           nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
+            align: 'right'
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
           },
           axisLine: {
             show: true,
@@ -115,36 +152,36 @@ export default {
             itemStyle: {
               color: "#f3c000",
             },
-            areaStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#f3c000", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.55,
-                    color: "#f3c00033",
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
+            // areaStyle: {
+            //   color: {
+            //     type: "linear",
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [
+            //       {
+            //         offset: 0,
+            //         color: "#f3c000", // 0% 处的颜色
+            //       },
+            //       {
+            //         offset: 0.55,
+            //         color: "#f3c00033",
+            //       },
+            //       {
+            //         offset: 1,
+            //         color: "transparent", // 100% 处的颜色
+            //       },
+            //     ],
+            //     global: false, // 缺省为 false
+            //   },
+            // },
             data: [], // this.series[0].data,
           },
           {
             name: "", // "2023年",
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
               color: {
@@ -179,7 +216,7 @@ export default {
           {
             name: "", // "2024年",
             type: "bar",
-            barWidth: 12,
+            barWidth: 16,
             // tooltip: {
             //   valueFormatter: function (value) {
             //     return value + " ml";
@@ -219,9 +256,9 @@ export default {
       this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
       this.initOptions(this.actualOptions);
     },
     series(val) {
@@ -284,13 +321,13 @@ export default {
   .legend-item:nth-child(1):before {
     // width: 12px;
     // height: 2px;
-    width: 0.638vw;
+    width: 1vw;
     height: 0.1064vw;
     background-color: #f3c000;
     position: absolute;
     top: 50%;
     // left: -16px;
-    left: -0.851vw;
+    left: -1.2vw;
     transform: translateY(-50%);
   }
   .legend-item:nth-child(1):after {
@@ -300,11 +337,11 @@ export default {
     position: absolute;
     // width: 6px;
     // height: 6px;
-    width: 0.3191vw;
-    height: 0.3191vw;
+    width: 0.4vw;
+    height: 0.4vw;
     border-radius: 100%;
     top: 50%;
-    left: -0.851vw;
+    left: -1.1vw;
     // left: -16px;
     transform: translateY(-50%) translateX(50%);
   }

src/views/dashboard/charts/StdChart.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: Bipv.vue
     author: liubin
     date: 2024-04-10 15:39:54
-    description: 
+    description:
 -->
 
 <template>
@@ -25,7 +25,9 @@ export default {
   data() {
     const year = new Date().getFullYear();
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    const cities = ["瑞昌", "邯郸",
+      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
+    ];
     return {
       legend: [
         { label: `${year}年目标值`, color: "#f3c000" },

src/views/dashboard/components/CompanyInfo.vue

@@ -83,7 +83,7 @@ export default {
   // backdrop-filter: blur(2px);
   // border-radius: 4px;
   transform: translate(-50%, -100%);
-  box-shadow: inset 0 0 12px 2px #fff3;
+  // box-shadow: inset 0 0 12px 2px #fff3;
   background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
     // background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7)  10%, #021842 30%);
   // 在这里设置一个总的字体大小 不失为一个好的选择
@@ -92,11 +92,12 @@ export default {
 }
 
 h2 {
-  padding: 0 1vw;
+  // padding: 0 1vw;
   margin: 6px 0;
   font-family: 优设标题黑;
   color: #fff;
-  letter-spacing:5px;
+  letter-spacing:4px;
+  text-align: left;
   // font-size: 24px;
   font-size: 1.276em;
 }
@@ -115,7 +116,7 @@ ul {
 }
 
 li {
-  font-size: 0.851em;
+  font-size: 0.77em;
 }
 
 .corner {

src/views/dashboard/components/Container.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: Container.vue
     author: liubin
     date: 2024-04-09 10:44:09
-    description: 
+    description:
 -->
 
 <template>
@@ -38,7 +38,7 @@
       class="container-head"
       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
     >
-      <Icon :icon="icon"></Icon>
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
       <h2 class="container-title">{{ title }}</h2>
     </div>
     <div
@@ -82,6 +82,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .dashboard-container {
   height: 0;
   flex: 1;
@@ -90,29 +91,29 @@ export default {
   position: relative;
   box-shadow: inset 0 0 20px 1px #fff1;
 
-  // &::after {
-  //   content: "";
-  //   position: absolute;
-  //   display: inline-block;
-  //   width: 60%;
-  //   height: 0.31415vh;
-  //   border-radius: 2px;
-  //   left: 8%;
-  //   bottom: 0;
-  //   background: linear-gradient(to right, #024798, transparent);
-  //   z-index: 0;
-  // }
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 85%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 8%;
+    bottom: 0;
+    background: linear-gradient(to left, #024798, transparent);
+    z-index: 0;
+  }
 
   .container-head {
     // height: 40px;
-    height: 3.8vh;
+    height:4vh;
     padding: 8px;
     display: flex;
     align-items: center;
     gap: 8px;
 
     .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
       line-height: 1.39vw;
       font-weight: normal;
       letter-spacing: 2px;
@@ -132,8 +133,8 @@ export default {
     position: absolute;
     // width: 16px;
     // height: 16px;
-    width: 0.95vw;
-    height: 0.95vw;
+    width: 0.7vw;
+    height: 0.7vw;
   }
 
   .corner.tl {

src/views/dashboard/components/ContainerIcon.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: ContainerIcon.vue
     author: liubin
     date: 2024-04-09 16:41:36
-    description: 
+    description:
 -->
 
 <template>
@@ -51,8 +51,8 @@ export default {
 .container-icon {
   //   width: 32px;
   //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
   background: #ccc2;
 }
 </style>

src/views/dashboard/components/Header.vue

@@ -153,7 +153,7 @@ h1 {
 
 .side {
   position: absolute;
-  font-size: 1.18vw;
+  font-size: 1vw;
   // line-height: 24px;
   line-height: 1.277vw;
   letter-spacing: 2px;

src/views/dashboard/components/leftContainer.vue

@@ -0,0 +1,204 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-08 13:51:30
+ * @LastEditTime: 2024-07-19 10:43:18
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="dashboard-container">
+    <!-- refresh btn  -->
+    <button
+      v-if="0"
+      style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
+      @click="$emit('refresh')"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        style="width: 24px; height: 24px"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+        />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div v-if="side == 'left'" class="corner bl"></div>
+    <div v-if="side == 'right'" class="corner br"></div>
+    <!-- content  -->
+    <div
+      class="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
+    >
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div
+      class="container-body"
+      :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 85%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 8%;
+    bottom: 0;
+    background: linear-gradient(to right, #024798, transparent);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height:4vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.7vw;
+    height: 0.7vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

src/views/index.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="dashboard-factory-all">
     <div id="map-container">
-      <div v-if="visible" class="cdLine"></div>
-      <div v-if="visible" class="zzLine"></div>
-      <div v-if="visible" class="rcLine"></div>
-      <div v-if="visible" class="rcLineTwo"></div>
-      <div v-if="visible" class="hdLine"></div>
-      <div v-if="visible" class="hdLineTwo"></div>
-      <div v-if="visible" class="ksLine"></div>
-      <div v-if="visible" class="bbLine"></div>
-      <div v-if="visible" class="bbLineTwo"></div>
-      <div v-if="visible" class="bbLineThree"></div>
-      <div v-if="visible" class="jmsLine"></div>
-      <div v-if="visible" class="jmsLineTwo"></div>
+      <!-- <div v-if="visible" class="cdLine"></div> -->
+      <!-- <div v-if="visible" class="zzLine"></div> -->
+      <!-- <div v-if="visible" class="rcLine"></div> -->
+      <!-- <div v-if="visible" class="rcLineTwo"></div> -->
+      <!-- <div v-if="visible" class="hdLine"></div> -->
+      <!-- <div v-if="visible" class="hdLineTwo"></div> -->
+      <!-- <div v-if="visible" class="ksLine"></div> -->
+      <!-- <div v-if="visible" class="bbLine"></div> -->
+      <!-- <div v-if="visible" class="bbLineTwo"></div> -->
+      <!-- <div v-if="visible" class="bbLineThree"></div> -->
+      <!-- <div v-if="visible" class="jmsLine"></div> -->
+      <!-- <div v-if="visible" class="jmsLineTwo"></div> -->
       <div class="databoard">
         <db-header class="db-header"></db-header>
         <div class="db-body">
           <div class="db-left">
-            <db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
+            <left-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
               <fto-chart :key="ftoKey" />
-            </db-container>
-            <db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
+            </left-container>
+            <left-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
               <chip-invest-chart :key="chipInvestKey" />
-            </db-container>
+            </left-container>
           </div>
           <div class="db-right">
             <db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
@@ -39,12 +39,12 @@
       </div>
     </div>
     <company-info v-if="visible" :info="info" :position="rcHintPosition" />
-    <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
-    <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
+    <!-- <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> -->
+    <!-- <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> -->
     <hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
-    <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
-    <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
-    <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
+    <!-- <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> -->
+    <!-- <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> -->
+    <!-- <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> -->
   </div>
 </template>
 
@@ -53,6 +53,7 @@ import store from "@/store";
 import DashboardHeader from "./dashboard/components/Header.vue";
 import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
 import Container from "./dashboard/components/Container.vue";
+import leftContainer from "./dashboard/components/leftContainer.vue";
 import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 import BipvChart from "./dashboard/charts/Bipv.vue";
@@ -61,25 +62,30 @@ import StdChart from "./dashboard/charts/StdChart.vue";
 
 const LOCATIONS = [
   // 佳木斯
-  { x: 67, y: 20, tx: 60, ty: 29,  path: 'copilot/jmsIndex' },
+  // { x: 67, y: 20, tx: 60, ty: 29, path: 'factoryData/jmsIndex' },
   // 成都
-  { x: 46, y: 56,tx:46,ty:93, path: 'copilot/cdIndex' },
+  // { x: 46, y: 56, tx: 46, ty: 93, path: 'factoryData/cdIndex' },
   // 蚌埠1
-  { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'copilot/bbIndex' },
+  // { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'factoryData/bbIndex' },
   // 蚌埠2
-  { x: 61, y: 53,tx:39,ty:68, path: 'copilot/ksIndex' },
+  // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
   // 江西 瑞昌
-  { x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
+  { x: 60, y: 58, tx: 68, ty: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' },
   // 湖南 株洲
-  { x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
+  // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
   // 邯郸
-  { x: 58, y: 45, tx: 47, ty: 34, path: 'copilot/hdIndex' },
+  { x: 58, y: 45, tx: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
 ];
-
+// rcLine.style.left = `66.8%`;
+// rcLine.style.top = `52%`;
+// rcLineTwo.className = "rcLineTwo";
+// rcLineTwo.style.left = `58.7%`;
+// rcLineTwo.style.top = `34%`;
 export default {
   name: "Index",
   components: {
     CompanyInfo,
+    leftContainer,
     ksCompanyInfo: CompanyInfo,
     hdCompanyInfo: CompanyInfo,
     bbCompanyInfo: CompanyInfo,
@@ -213,39 +219,51 @@ export default {
           { label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
         ],
       };
-      if (position === LOCATIONS[0]) {
-        templateInfo.companyName = "佳木斯中建材";
-        this.jmsHintPosition = position;
-        templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
-        templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
-        templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
-        templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
-        this.jmsInfo = templateInfo;
-      } else if (position === LOCATIONS[1]) {
-        this.cdHintPosition = position;
-        templateInfo.companyName = "成都中建材";
-        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
-        templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
-        templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
-        templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
-        this.cdInfo = templateInfo;
-      } else if (position === LOCATIONS[2]) {
-        this.bbHintPosition = position;
-        templateInfo.companyName = "蚌埠兴科";
-        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
-        templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
-        templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
-        templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
-        this.bbInfo = templateInfo;
-      } else if (position === LOCATIONS[3]) {
-        this.ksHintPosition = position;
-        templateInfo.companyName = "凯盛光伏";
-        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
-        templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
-        templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
-        templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
-        this.ksInfo = templateInfo;
-      } else if (position === LOCATIONS[4]) {
+      if
+        // (position === LOCATIONS[0]) {
+        // templateInfo.companyName = "佳木斯中建材";
+        // this.jmsHintPosition = position;
+        // templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
+        // templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
+        // templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
+        // templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
+        // this.jmsInfo = templateInfo;
+      // } else if (position === LOCATIONS[1]) {
+        // this.cdHintPosition = position;
+        // templateInfo.companyName = "成都中建材";
+        // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
+        // templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
+        // templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
+        // templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
+        // this.cdInfo = templateInfo;
+      // } else if (position === LOCATIONS[2]) {
+        // this.bbHintPosition = position;
+        // templateInfo.companyName = "蚌埠兴科";
+        // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
+        // templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
+        // templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
+        // templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
+        // this.bbInfo = templateInfo;
+      // } else if (position === LOCATIONS[3]) {
+        // this.ksHintPosition = position;
+        // templateInfo.companyName = "凯盛光伏";
+        // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
+        // templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
+        // templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
+        // templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
+        // this.ksInfo = templateInfo;
+      // }
+        (position === LOCATIONS[0]) {
+        const rcLine = document.createElement("div");
+        const rcLineTwo = document.createElement("div");
+        rcLine.className = "rcLine";
+        rcLine.style.left = `${position.lx}%`;
+        rcLine.style.top = `${position.ly}%`;
+        rcLineTwo.className = "rcLineTwo";
+        rcLineTwo.style.left = `${position.ltx}%`;
+        rcLineTwo.style.top = `${position.lty}%`;
+        document.getElementById("map-container").appendChild(rcLine);
+        document.getElementById("map-container").appendChild(rcLineTwo);
         this.rcHintPosition = position;
         templateInfo.companyName = "瑞昌中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
@@ -253,15 +271,25 @@ export default {
         templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
         templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
         this.info = templateInfo;
-      } else if (position === LOCATIONS[5]) {
-        this.zzHintPosition = position;
-        templateInfo.companyName = "株洲中建材";
-        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
-        templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
-        templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
-        templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
-        this.zzInfo = templateInfo;
-      } else if (position === LOCATIONS[6]) {
+      // } else if (position === LOCATIONS[5]) {
+        // this.zzHintPosition = position;
+        // templateInfo.companyName = "株洲中建材";
+        // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
+        // templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
+        // templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
+        // templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
+        // this.zzInfo = templateInfo;
+      } else if (position === LOCATIONS[1]) {
+        const hdLine = document.createElement("div");
+        const hdLineTwo = document.createElement("div");
+        hdLine.className = "hdLine";
+        hdLine.style.left = `${position.lx}%`;
+        hdLine.style.top = `${position.ly}%`;
+        hdLineTwo.className = "hdLineTwo";
+        hdLineTwo.style.left = `${position.ltx}%`;
+        hdLineTwo.style.top = `${position.lty}%`;
+        document.getElementById("map-container").appendChild(hdLine);
+        document.getElementById("map-container").appendChild(hdLineTwo);
         this.hdHintPosition = position;
         templateInfo.companyName = "邯郸中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
@@ -314,7 +342,7 @@ export default {
   .db-left,
   .db-right {
     // width: 420px;
-    width: 24vw;
+    width: 24.5vw;
     padding: 20px;
     display: flex;
     flex-direction: column;
@@ -348,40 +376,40 @@ export default {
 .rcLine {
   display: inline-block;
   position: absolute;
-  left: 61%;
-  width: 100px;
-  top: 61.5%;
+  /* left: 61%; */
+  width: 7.9vw;
+  /* top: 61.5%; */
   /* x: 60, y: 58, */
-    height: 1px;
+  height: 1px;
   border: 2px dashed #FFCF00;
 }
 
 .rcLineTwo {
   position: absolute;
-  left: 66.8%;
+  /* left: 66.8%; */
   width: 1px;
-  top: 52%;
+  /* top: 52%; */
   display: inline-block;
   /* // x: 60, y: 58, */
-  height: 90px;
+  height: 5vw;
   border: 2px dashed #FFCF00;
 }
 
 .hdLine {
   position: absolute;
-  left: 58.7%;
+  /* left: 58.7%; */
   width: 1px;
-  top: 34%;
+  /* top: 34%; */
   display: inline-block;
   /* // x: 60, y: 58, */
-  height: 100px;
+  height: 6vw;
   border: 2px dashed #FFCF00;
 }
 .hdLineTwo {
   position: absolute;
-  left: 53%;
-  width: 90px;
-  top: 34%;
+  /* left: 53%; */
+  width: 5vw;
+  /* top: 34%; */
   display: inline-block;
   /* // x: 60, y: 58, */
   height: 1px;