Merge pull request 'projects/mescc/develop' (#24) from projects/mescc/develop into projects/mescc/main

Reviewed-on: #24

.env.dev

@@ -1,3 +1,10 @@
+###
+ # @Author: zhp
+ # @Date: 2024-04-28 13:42:51
+ # @LastEditTime: 2024-05-29 17:06:55
+ # @LastEditors: zhp
+ # @Description:
+###
 # 开发环境配置
 ENV = 'development'
 
@@ -6,6 +13,7 @@ VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
 VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.prod

@@ -2,15 +2,15 @@
 NODE_ENV = 'production'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 玻璃控股信息平台
 
 # 芋道管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = ''
 
 # 根据服务器或域名修改
-PUBLIC_PATH = 'http://my-pi.com:8888/yudao-admin/'
+PUBLIC_PATH = ''
 # 二级部署路径
-VUE_APP_APP_NAME ='yudao-admin'
+# VUE_APP_APP_NAME ='yudao-admin'
 
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@babel/parser": "7.18.4",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "^1.6.8",
     "clipboard": "2.0.8",
@@ -54,6 +55,7 @@
     "highlight.js": "^11.9.0",
     "js-beautify": "^1.15.1",
     "jsencrypt": "3.3.1",
+    "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.30.1",
     "nprogress": "0.2.0",

src/api/cost/index.js

@@ -0,0 +1,32 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-26 14:53:45
+ * @LastEditTime: 2024-05-06 14:55:33
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+
+// 查询部门列表
+export function getOrderList(data) {
+  return request({
+    url: 'ip/prod-order/prodOrderList',
+    method: 'post',
+    data: data
+  })
+}
+export function getCostPage(data) {
+  return request({
+    url: 'ip/cost/costPage',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getCostList(data) {
+  return request({
+    url: 'ip/cost/costList',
+    method: 'post',
+    data: data
+  })
+}

src/api/energy/index.js

@@ -0,0 +1,23 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-28 09:28:12
+ * @LastEditTime: 2024-05-16 08:56:59
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+export function getEnergyPage(data) {
+  return request({
+    url: 'ip/energy/page',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getEnergySumPage(data) {
+  return request({
+    url: 'ip/prod-output/cockpitComprehensiveDataMonitor',
+    method: 'post',
+    data: data
+  })
+}

src/api/greenest/index.js

@@ -0,0 +1,32 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-26 14:53:45
+ * @LastEditTime: 2024-05-06 14:53:04
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+
+// 查询部门列表
+export function getOrderList(data) {
+  return request({
+    url: 'ip/prod-order/prodOrderList',
+    method: 'post',
+    data: data
+  })
+}
+export function getEpPage(data) {
+  return request({
+    url: 'ip/environment-protection/environmentPage',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getCostList(data) {
+  return request({
+    url: 'ip/cost/costList',
+    method: 'post',
+    data: data
+  })
+}

src/api/produceData/index.js

@@ -0,0 +1,140 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 08:54:59
+ * @LastEditTime: 2024-05-22 16:31:08
+ * @LastEditors: DY
+ * @Description:
+ */
+import request from '@/utils/request'
+
+// 查询部门列表
+export function getProduceDataPage(data) {
+  return request({
+    url: 'ip/prod-output/prodOutputDataPage',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getProduceDataDetail(id){
+  return request({
+     url: '/ip/prod-output/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 导出生产数据
+export function exportOutPutExcel(data) {
+  return request({
+    url: '/ip/prod-output/output-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 获取生产管理生产目标管理碲化镉工厂分页
+export function prodTargetDiPage(data) {
+  return request({
+    url: '/ip/prod-target/prodTargetDiPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取生产管理生产目标管理铜铟镓硒工厂分页
+export function prodTargetToPage(data) {
+  return request({
+    url: '/ip/prod-target/prodTargetToPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 创建生产目标
+export function createProduce(data) {
+  return request({
+    url: '/ip/prod-target/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得生产目标
+export function getProduceTargetDetail(id){
+  return request({
+     url: '/ip/prod-target/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 修改生产目标
+export function updateProduceTarget(data) {
+  return request({
+    url: '/ip/prod-target/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导出碲化镉生产目标数据
+export function exportDiTargetExcel(data) {
+  return request({
+    url: '/ip/prod-target/di-target-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 导出铜铟镓硒生产目标数据
+export function exportToTargetExcel(data) {
+  return request({
+    url: '/ip/prod-target/to-target-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 删除生产目标
+export function delTarget(id) {
+  return request({
+    url: '/ip/prod-target/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 导入铜铟镓硒工厂
+export function importToTarget(data) {
+  return request({
+    url: '/ip/prod-target/to-target-import-excel',
+    method: 'post',
+    data
+  })
+}
+
+// 导入碲化镉工厂
+export function importDiTarget(data) {
+  return request({
+    url: '/ip/prod-target/di-target-import-excel',
+    method: 'post',
+    data
+  })
+}
+
+// export function cockpitDataMonitor(data) {
+//   return request({
+//     url: '/ip/prod-output/cockpitDataMonitor',
+//     method: 'post',
+//     data: data
+//   })
+// }
+
+export function cockpitDataMonitor(data) {
+  return request({
+    url: '/ip/prod-output/cockpitDataMonitor',
+    method: 'post',
+    data: data
+  })
+}

src/api/wareHouse/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-28 09:28:12
+ * @LastEditTime: 2024-04-28 15:52:36
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+export function getStockPage(data) {
+  return request({
+    url: 'ip/stock/page',
+    method: 'post',
+    data: data
+  })
+}

src/assets/icons/svg/orgTreeIcon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>菜单</title>
+    <g id="10系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="用户管理" transform="translate(-284.000000, -164.000000)" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(284.000000, 162.000000)">
+                <g id="菜单" transform="translate(0.000000, 2.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/orgTreeIcon2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="127.000000pt" height="127.000000pt" viewBox="0 0 127.000000 127.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M520 831 c-19 -10 -48 -35 -64 -55 -25 -30 -31 -48 -34 -100 -8 -122
+69 -206 188 -206 119 0 196 84 188 205 -5 74 -36 123 -98 155 -51 26 -133 26
+-180 1z m137 -32 c67 -25 111 -99 98 -165 -8 -45 -57 -100 -101 -114 -100 -33
+-209 62 -190 165 12 62 82 124 143 125 12 0 34 -5 50 -11z"/>
+</g>
+</svg>

src/assets/styles/index.scss

@@ -123,7 +123,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 16px;
+  // padding: 16px;
 }
 
 .components-container {

src/assets/styles/login.scss

@@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px;
         width: 100%;
         clear: both;
         position: relative;
-        top: calc(56 * #{$base1px});
+        top: calc(#{$base1px});
-        height: calc(128 * #{$base1px});
+        height: calc(100 * #{$base1px});
         display: flex;
         align-items: center;
         justify-content: center;
@@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px;
         height: calc(16 * 0.12vh);
         line-height: calc(16 * 0.12vh);
         font-size: calc(12 * 0.12vh);
-        color: #8c8c8c;
+        color: #C7C7C7;
 
         a,
         a:hover,

src/components/ButtonNav/index.vue

@@ -82,6 +82,8 @@ export default {
     border: none;
     background: #fff;
     border-radius: 8px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
     padding: 20px;
     color: #888;
     letter-spacing: 2px;

src/layout/components/AppMain.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-12 11:13:06
- * @LastEditTime: 2024-04-15 13:52:16
+ * @LastEditTime: 2024-05-08 13:37:05
  * @LastEditors: zhp
  * @Description:
 -->
@@ -17,20 +17,20 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
+      return this.$route.path;
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +45,7 @@ export default {
   // background-color: #fff;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 56px;
 }
 
@@ -57,7 +57,7 @@ export default {
     flex-direction: column;
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 90px;
   }
 }

src/main.js

@@ -18,6 +18,7 @@ import store from "./store";
 import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
+import { scrollBoard } from '@jiaminghi/data-view'
 
 import "./assets/icons"; // icon
 import "./permission"; // permission control
@@ -55,6 +56,9 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
 Vue.prototype.divide = divide;
+Vue.prototype.tableHeight = function (n) {
+	return window.innerHeight - n;
+};
 
 // 全局组件挂载
 Vue.component("DictTag", DictTag);
@@ -69,6 +73,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
 Vue.use(CodeBrickZj);
+Vue.use(scrollBoard)
 // Form Generator 组件需要使用到 tinymce
 import Tinymce from "@/components/tinymce/index.vue";
 Vue.component("tinymce", Tinymce);

src/mixins/chart.js

@@ -1,19 +1,19 @@
 import * as echarts from "echarts";
 
 function __resizeHandler(entries) {
+  console.log(entries)
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-      // manipulate contentBoxSize
+    const contentBoxSize = Array.isArray(entry.contentBoxSize)
-      const contentBoxSize = Array.isArray(entry.contentBoxSize)
+          ? entry.contentBoxSize[0]
-        ? entry.contentBoxSize[0]
+          : entry.contentBoxSize;
-        : entry.contentBoxSize;
+        this.chart_mixin_chartInstance.resize({
-      this.chart_mixin_chartInstance.resize({
+          width:
-        width:
+            contentBoxSize.inlineSize < this.MIN_WIDTH
-          contentBoxSize.inlineSize < this.MIN_WIDTH
+              ? this.MIN_WIDTH
-            ? this.MIN_WIDTH
+              : contentBoxSize.inlineSize,
-            : contentBoxSize.inlineSize,
+          height: contentBoxSize.blockSize,
-        height: contentBoxSize.blockSize,
+        });
-      });
     } else {
       // manipulate contentRect
       this.chart_mixin_chartInstance.resize({
@@ -32,7 +32,7 @@ export default {
     const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
 
     return {
-      MIN_WIDTH: 400,
+      MIN_WIDTH: 390,
       chart_mixin_chartInstance: null,
       chart_mixin_observer: resizeObserver,
       chart_mixin_options: {

src/mixins/code-filter.js

@@ -0,0 +1,87 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-28 15:18:21
+ * @LastEditTime: 2024-04-28 15:18:21
+ * @LastEditors: zhp
+ * @Description:
+ */
+
+/*
+ * @Date: 2020-12-29 16:49:28
+ * @LastEditors: DY
+ * @LastEditTime: 2024-02-23 14:50:22
+ * @FilePath: \basic-admin\src\filters\basicData\index.js
+ * @Description:
+ */
+
+const table = {
+  lineStatus: {
+    1: '生产中',
+    2: '停止',
+    3: '未知',
+  },
+  reportType: {
+    1: '日',
+    2: '周',
+    3: '月'
+  }
+}
+
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+export function toDay(time) {
+  if (time < 24) {
+    return time + '小时'
+  } else {
+    const day = ~~(time / 24)
+    const hour = time % 24
+    return day + '天' + hour + '小时'
+  }
+}
+
+export default function (dictTable) {
+  return function (val) {
+    return table?.[dictTable]?.[val]
+  }
+}

src/mixins/tableHeightMixin.js

@@ -0,0 +1,20 @@
+export default {
+	data() {
+		return {
+			tableH: this.tableHeight(260),
+		};
+	},
+	created() {
+		this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
+		window.addEventListener('resize', this._setTableHeight);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this._setTableHeight);
+	},
+	methods: {
+		_setTableHeight() {
+			this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
+			// this.tableH = this.tableHeight(260);
+		},
+	},
+};

src/store/index.js

@@ -1,7 +1,15 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-05-16 11:59:04
+ * @LastEditors: zhp
+ * @Description:
+ */
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
 import user from './modules/user'
+import home from './modules/home'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
@@ -19,6 +27,7 @@ const store = new Vuex.Store({
     permission,
     settings,
     dict,
+    home,
     copilot
   },
   getters

src/store/modules/home.js

@@ -1,19 +1,613 @@
 import axios from "@/utils/request";
+import { deepClone } from "../../utils";
 
-function random_default() {
+/* 状态 */
-  return 0;
+const state = {
-  let a = Math.floor(Math.random() * 1000);
+  copilot: {
-  while (a < 600) {
+    /* 产量驾驶舱 */
-    a = Math.floor(Math.random() * 1000);
+    yield: {
+      ftoInvest: null,
+      chipInvest: null,
+      chipOutput: null,
+      stdOutput: null,
+      bipvOutput: null,
+    },
+    /* 能源驾驶舱 */
+    energy: {
+      stockDOData: [],
+      waterList: {},
+      gasList: [],
+      elecList:{}
+    },
+    /* 效率驾驶舱 */
+    efficiency: {
+      chipOee: {
+        current: [],
+        previous: [],
+        target:[]
+      },
+      transformRate: {
+        current: [],
+        previous: [],
+        target:[]
+      },
+      chipRate: {
+        target: [],
+        current: [],
+        previous: [],
+        outputNumber:[],
+      },
+      stdRate: {
+        target: [],
+        current: [],
+        previous: [],
+        outputNumber:[]
+      },
+    },
+  },
+  home: {
+    /** 主页状态 */
+    ftoInvest: null,
+    chipInvest: null,
+    chipOutput: null,
+    stdOutput: null,
+    bipvOutput: null,
+  },
+};
+
+const mutations = {
+  SET_HOME_INFO: (state, payload) => {
+    state.home.ftoInvest = payload.ftoInvest;
+    state.home.chipInvest = payload.chipInvest;
+    state.home.chipOutput = payload.chipOutput;
+    state.home.stdOutput = payload.stdOutput;
+    state.home.bipvOutput = payload.bipvOutput;
+  },
+  SET_COPILOT_INFO: (state, { type, payload }) => {
+    switch (type) {
+      case "yield":
+        state.copilot.yield.ftoInvest = payload.ftoInvest;
+        state.copilot.yield.chipInvest = payload.chipInvest;
+        state.copilot.yield.chipOutput = payload.chipOutput;
+        state.copilot.yield.stdOutput = payload.stdOutput;
+        state.copilot.yield.bipvOutput = payload.bipvOutput;
+        break;
+      case "energy":
+        state.copilot.energy.stockDOData = payload.stockDOData;
+        state.copilot.energy.gasList = payload.gasList;
+        state.copilot.energy.waterList = payload.waterList;
+        state.copilot.energy.elecList = payload.elecList;
+        break;
+      case "efficiency":
+        state.copilot.efficiency.chipOeeRate = payload.chipOeeRate;
+        state.copilot.efficiency.transformRate = payload.transformRate;
+        state.copilot.efficiency.chipRate = payload.chipRate;
+        state.copilot.efficiency.stdRate = payload.stdRate;
+        break;
+    }
+  },
+};
+
+const actions = {
+  /** 初始化首页数据 */
+  async initHome({ commit }) {
+    const dataArr = await getHomeInfo();
+    console.log('dataArr',dataArr);
+    // const targetArr = await getHomeInfo();
+    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO
+);
+    commit("SET_HOME_INFO", payload);
+  },
+  /** 初始化驾驶舱数据 */
+  async initCopilot({ commit }, { period,source,than}) {
+    // if (source == "energy") return;
+
+    const fetcher = {
+      yield: getCopilotYield,
+      energy: getCopilotEnergy,
+      efficiency: getCopilotEfficiency,
+    }[source];
+    const handler = {
+      yield: splitCurrentAndPrevious,
+      energy: splitCurrentAndPreviousB,
+      efficiency: splitCurrentAndPreviousA,
+    }[source]
+    // 获取产量数据
+    let { data: factoryList, type } = await fetcher(period,than)
+    // let targetList = null;
+    // if (source === "yield" || source === "efficiency") {
+    //   // 获取目标数据
+    //   let { data } = await fetcher(period,than, true)
+    //   targetList = data
+    // }
+    // if (source == "energy") {
+    //   let factoryData = factoryList
+    //   const payload = handler(factoryData)
+    //   commit("SET_COPILOT_INFO", { type, payload });
+    // } else {
+      let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
+      let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
+      let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
+      let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
+      let targetData = factoryList.prodTargetOutputDO ? factoryList.prodTargetOutputDO : factoryList.prodTargetRateDO
+      const payload = handler(factoryData,targetData,prodOutputFtoDO,preData,preFtoData)
+    commit("SET_COPILOT_INFO", { type, payload });
+
+    // }
+
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
+
+function splitCurrentAndPreviousB(factoryListResponse) {
+ let  factoryArr = [
+        {
+          id: 0,
+          name: '瑞昌中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 1,
+          name: '邯郸中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 2,
+          name: '中建材株洲光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 3,
+          name: '佳木斯中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 4,
+          name: '成都中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 5,
+          name: '凯盛光伏材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 6,
+          name: '蚌埠兴科玻璃有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+      ]
+  if (factoryListResponse) {
+       for (let i in factoryListResponse.stockDO) {
+        const index = factoryArr.findIndex(item => item.id == factoryListResponse.stockDO[i].factory)
+        if (index != -1) {
+          factoryListResponse.stockDO[i].stockInfo.forEach(ele => {
+            factoryArr[index].stockData.push(ele)
+          });
+        }
+
+       }
+      let stockDOData = []
+    factoryArr.forEach((ele, index) => [
+      stockDOData[index] = [],
+      ele.stockData.forEach((item) => {
+        let obj = {}
+        obj.name = item.glassType == 0 ? '玻璃芯片' : item.glassType == 1 ? '标准组件' : item.glassType == 2 ? 'BIPV' : '定制组件'
+        obj.value = item.stockNumber
+        stockDOData[index].push(obj)
+      }),
+    ])
+     let gasList = []
+    // if (factoryListResponse.gasDO) {
+       factoryListResponse.gasDO.forEach((ele) => {
+      gasList[ele.factory] = ele.totalEnergyValue
+    })
+    // }
+
+    // console.log(factoryListResponse.gasDO);
+    let waterObj = Object.groupBy(factoryListResponse.waterDO, ({ groupName }) => groupName)
+    let waterList = {
+      times: [],
+      0: [],
+      1: [],
+      2: [],
+      3: [],
+      4: [],
+      5: [],
+      6: [],
+    }
+    for (let i in waterObj) {
+      waterList.times.push(i)
+      waterObj[i].forEach((ele, index) => {
+        waterList[ele.factory].push(ele.totalEnergyValue)
+      })
+    }
+     let elecObj = Object.groupBy(factoryListResponse.elecDO, ({ groupName }) => groupName)
+    let elecList = {
+      times: [],
+      0: [],
+      1: [],
+      2: [],
+      3: [],
+      4: [],
+      5: [],
+      6: [],
+    }
+    for (let i in elecObj) {
+      elecList.times.push(i)
+      elecObj[i].forEach((ele, index) => {
+        elecList[ele.factory].push(ele.totalEnergyValue)
+      })
+    }
+
+    return {
+      stockDOData,
+      waterList,
+      gasList,
+      elecList,
+    };
+  } else {
+    let stockDOData = Array[7].fill([])
+    let waterList = {}
+    return {
+      stockDOData,
+      waterList,
+      gasList,
+      elecList
+    };
+  }
+}
+
+function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
+  console.log('工厂',targetListResponse);
+
+  // 初始数据
+  const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
+  // factoryListResponse = [
+  //   {
+  //     factory: 0,
+  //     oee: 0.8,
+  //     previousYearOee: 0.7,
+  //     componentConversionEfficiency: 0.8,
+  //     previousYearComponentConversionEfficiency: 0.7,
+  //     glassType: 0,
+  //     yieldRate: 0.8,
+  //     previousYearYieldRate: 0.7,
+  //     chipYieldRate: 0.38,
+  //     componentYieldRate: 0.73,
+  //   },
+  //   {
+  //     factory: 1,
+  //     oee: 0.8,
+  //     previousYearOee: 0.7,
+  //     componentConversionEfficiency: 0.8,
+  //     previousYearComponentConversionEfficiency: 0.7,
+  //     glassType: 1,
+  //     yieldRate: 0.8,
+  //     previousYearYieldRate: 0.7,
+  //     chipYieldRate: 0.38,
+  //     componentYieldRate: 0.73,
+  //   },
+  //   {
+  //     factory: 2,
+  //     oee: 0.8,
+  //     previousYearOee: 0.7,
+  //     componentConversionEfficiency: 0.8,
+  //     previousYearComponentConversionEfficiency: 0.7,
+  //     glassType: 1,
+  //     yieldRate: 0.8,
+  //     previousYearYieldRate: 0.7,
+  //     chipYieldRate: 0.38,
+  //     componentYieldRate: 0.73,
+  //   },
+  //   {
+  //     factory: 3,
+  //     oee: 0.8,
+  //     previousYearOee: 0.7,
+  //     componentConversionEfficiency: 0.8,
+  //     previousYearComponentConversionEfficiency: 0.7,
+  //     glassType: 0,
+  //     yieldRate: 0.8,
+  //     previousYearYieldRate: 0.7,
+  //     chipYieldRate: 0.38,
+  //     componentYieldRate: 0.73,
+  //   },
+  // ];
+  if (preData && preData[0] != null) {
+    for (const factory of preData) {
+      const fId = getPreFactoryId(factory);
+         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      // chipOeeRate.current[fId] = factory.oee;
+      chipOeeRate.previous[fId] = factory.previousYearOee;
+      // 转化效率
+      transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
+      // 芯片良率 与 标准组件良率
+      if (![0, 1].includes(factory.glassType)) continue;
+      const _t = [chipRate, stdRate][factory.glassType]
+      // _t.current[fId] = factory.yieldRate ;
+      _t.previous[fId] = factory.previousYearYieldRate ;
+      // }
+      // debugger;
+    }
+  }
+  if (factoryListResponse) {
+    for (const factory of factoryListResponse) {
+      const fId = getFactoryId(factory);
+      // 获取目标值
+      if (targetListResponse) {
+        const {
+          chipYieldRate,
+          componentYieldRate,
+          chipOee,
+          componentConversionEfficiency,
+          componentYield
+        } = getFactoryTargetValueA(targetListResponse, fId)
+        stdRate.target[fId] =  componentYieldRate
+        chipRate.target[fId] = chipYieldRate
+        chipOeeRate.target[fId] = chipOee
+        transformRate.target[fId] = componentConversionEfficiency
+      }
+      // 芯片OEE
+      chipOeeRate.current[fId] = factory.oee;
+      // chipOeeRate.previous[fId] = factory.previousYearOee;
+      // 转化效率
+      transformRate.current[fId] = factory.componentConversionEfficiency;
+      // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
+      // 芯片良率 与 标准组件良率
+      if (![0, 1].includes(factory.glassType)) continue;
+      const _t = [chipRate, stdRate][factory.glassType]
+      _t.current[fId] = factory.yieldRate ;
+      // _t.previous[fId] = factory.previousYearYieldRate ;
+    }
+    // console.log('chipOeeRate',chipOeeRate);
+    return {
+      chipOeeRate,
+      transformRate,
+      chipRate,
+      stdRate,
+    };
+  }
+}
+
+function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
+  console.log('prodOutputFtoListRes',preData);
+  // 初始数据
+  const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
+   if (prodOutputFtoListRes) {
+    for (const factory of prodOutputFtoListRes) {
+      console.log(factory);
+      const fId = getFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
+      ftoInvest.current[fId] = factory.chipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+    }
+   }
+   if (preFtoData) {
+    for (const factory of preFtoData) {
+      console.log(factory);
+      const fId = getPreFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
+      ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+    }
+   }
+    if (preData && preData[0] != null) {
+    for (const factory of preData) {
+      const fId = getPreFactoryId(factory);
+         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      if (![0, 1, 2].includes(factory.previousGlassType)) continue;
+      const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType];
+      // if (fId) {
+        // _t.current[fId] = factory.outputNumber;
+      // }
+      // if (preFId) {
+          _t.previous[fId] = factory.previousYearOutputNumber
+      // }
+      // debugger;
+    }
+  }
+    // console.log('ftoInvest',ftoInvest)
+  if (factoryListResponse && factoryListResponse[0] != null) {
+    for (const factory of factoryListResponse) {
+      const fId = getFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+
+      // 获取目标值
+      if (targetListResponse) {
+        const { chipYield, componentYield, bipvProductOutput } =
+          getFactoryTargetValue(targetListResponse, fId);
+        chipOutput.target[fId] = chipYield;
+        stdOutput.target[fId] = componentYield;
+        bipvOutput.target[fId] = bipvProductOutput;
+      }
+      // 芯片投入
+          chipInvest.current[fId] = factory.inputNumber;
+
+      // 产出数据, 0 - （玻璃）芯片产出， 1 - 标准组件产出， 2 - BIPV产出
+      // 因为后端写的垃圾数据，所以这里要做一下判断
+      if (![0, 1, 2].includes(factory.glassType)) continue;
+      const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
+        _t.current[fId] = factory.outputNumber;
+    }
+    return {
+      chipInvest,
+      // ftoInvest,
+      ftoInvest,
+      chipOutput,
+      stdOutput,
+      bipvOutput,
+    };
+  }else{
+      return {
+      chipInvest,
+      // ftoInvest,
+      ftoInvest,
+      chipOutput,
+      stdOutput,
+      bipvOutput,
+    }
+  }
+}
+
+function getFactoryId(factory) {
+  return factory.factory;
+}
+function getPreFactoryId(factory) {
+  return factory.previousFactory;
+}
+
+function getFactoryTargetValue(targetList, factoryId) {
+  const target = targetList.find((item) => item.factory === factoryId);
+  if (target) {
+    return {
+      // 自带模拟数据了.... random_default
+      chipYield: target.chipYield ?? 0,
+      componentYield: target.componentYield ?? 0,
+      bipvProductOutput: target.bipvProductOutput ?? 0,
+    };
+  }
+  return {
+    chipYield: 0,
+    componentYield: 0,
+    bipvProductOutput: 0,
+  };
+}
+
+/**
+ * 获取 芯片良率目标值 和 标准组件良率目标值
+ * @param {*} targetList 目标值列表
+ * @param {*} factoryId 工厂ID
+ * @returns
+ */
+function getFactoryTargetValueA(targetList, factoryId) {
+  const target = targetList.find((item) => item.factory === factoryId)
+  if (target) {
+    return {
+      chipYieldRate: target.chipYieldRate ?? 0,
+      componentYieldRate: target.componentYieldRate ?? 0,
+      componentYield: target.componentYield ?? 0,
+      // componentYield: target.componentYield ?? 0,
+      chipOee: target.chipOee ?? 0,
+    };
+  }
+  return {
+    chipYieldRate:0,
+    componentYieldRate:0,
+    componentYield: 0,
+    chipOee:0,
+  };
+}
+
+/**
+ *
+ * @returns 初始化 效率模块里 初始状态值
+ */
+function initA() {
+  const t_ = {
+    current: Array(7).fill(0),
+    previous: Array(7).fill(0),
+  };
+  // 芯片OEE
+  // 转化效率
+  // 标准组件良率
+  const stdRate = {
+    ...deepClone(t_),
+    target: Array(7).fill(0),
+  };
+  // 芯片良率
+  const transformRate = deepClone(stdRate);
+  const chipRate = deepClone(stdRate);
+  const chipOeeRate = deepClone(stdRate);
+  return {
+    chipOeeRate,
+    transformRate,
+    chipRate,
+    stdRate,
+  };
+}
+
+/**
+ *
+ * @returns 初始化 产量模块里 初始状态值
+ */
+function init() {
+  const t_ = {
+    current: Array(7).fill(0),
+    previous: Array(7).fill(0),
+  };
+  // 芯片投入
+  const chipInvest = deepClone(t_);
+  // FTO投入
+  const ftoInvest = deepClone(t_);
+  // 芯片产出
+  const chipOutput = {
+    ...deepClone(t_),
+    target: Array(7).fill(0),
+  };
+  // 标准组件产出
+  const stdOutput = deepClone(chipOutput);
+  // BIPV产出
+  const bipvOutput = deepClone(chipOutput);
+
+  return {
+    chipInvest, // 芯片投入
+    ftoInvest, // FTO投入
+    chipOutput, // 芯片产出
+    stdOutput, // 标准组件产出
+    bipvOutput, // BIPV产出
+  };
+}
+
+function random_default(min = 0, max = 1) {
+  // return 0;
+  let a = Math.floor(Math.random() * max);
+  while (a < min) {
+    a = Math.floor(Math.random() * max);
   }
   return a;
 }
 
 /* 接口 */
 async function getHomeInfo() {
-  const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
+  const { code, data } = await axios.post("ip/prod-output/cockpitData", {
     factorys: [],
     date: 4,
+    mode:0
   });
   if (code == 0) {
     return data;
@@ -34,162 +628,105 @@ async function getHomeTarget() {
   return null;
 }
 
-/* 状态 */
+function getUrl(copilot_module) {
-const state = {
+  let url = {
-  copilot: {
+    // 对比数据的 URL
-    /* 产量驾驶舱 */
+    comparison: "",
-    yield: {},
+    // 目标数据的 URL
-    /* 能源驾驶舱 */
+    // target: "",
-    energy: {},
+  };
-    /* 效率驾驶舱 */
+  switch (copilot_module) {
-    efficiency: {},
+    case "yield":
-  },
+      url.comparison = "ip/prod-output/cockpitData";
-  home: {
+      // url.target = "/ip/prod-target/query-by-date";
-    ftoInvest: null,
+      break;
-    chipInvest: null,
+    case "energy":
-    chipOutput: null,
+       url.comparison = "ip/prod-output/cockpitComprehensiveDataMonitor";
-    stdOutput: null,
+      break;
-    bipvOutput: null,
+    case "efficiency":
-  },
+      url.comparison = "ip/prod-output/cockpitDataRate";
-};
+      // url.target = "/ip/prod-target/query-rate-target";
+      break;
+  }
 
-const mutations = {
+  return url;
-  SET_HOME_INFO: (state, payload) => {
+}
-    state.home.ftoInvest = payload.ftoInvest;
-    state.home.chipInvest = payload.chipInvest;
-    state.home.chipOutput = payload.chipOutput;
-    state.home.stdOutput = payload.stdOutput;
-    state.home.bipvOutput = payload.bipvOutput;
-  },
-  SET_COPILOT_INFO: (state) => {},
-};
 
-const actions = {
+async function doFetch(copilot_module = "yield", fetch_target, params) {
-  /** 初始化首页数据 */
+  const url = getUrl(copilot_module);
-  async initHome({ commit }) {
+  const { code, data } = await axios.post(
-    const dataArr = await getHomeInfo();
+    url.comparison,
-    const targetArr = await getHomeTarget();
+    {
-
+      ...params,
-    const chipInvest = {
-      current: Array(7).fill(0),
-      previous: Array(7).fill(0),
-    }; // 芯片投入
-    const ftoInvest = {
-      current: Array(7).fill(0),
-      previous: Array(7).fill(0),
-    }; // FTO投入
-    const chipOutput = {
-      current: Array(7).fill(0),
-      previous: Array(7).fill(0),
-      target: Array(7).fill(0),
-    }; // 芯片产出
-    const stdOutput = {
-      current: Array(7).fill(0),
-      previous: Array(7).fill(0),
-      target: Array(7).fill(0),
-    }; // 标准组件产出
-    const bipvOutput = {
-      current: Array(7).fill(0),
-      previous: Array(7).fill(0),
-      target: Array(7).fill(0),
-    }; // BIPV产出
-
-    if (dataArr) {
-      for (const factory of dataArr) {
-        /* 工厂索引 */
-        const factoryId = factory.factory;
-        /* 收集目标数据 */
-        if (targetArr) {
-          const target = targetArr.find((item) => item.factory === factoryId);
-          if (target) {
-            chipOutput.target.splice(factoryId, 1, target.chipYield ?? 0);
-            stdOutput.target.splice(factoryId, 1, target.componentYield ?? 0);
-            bipvOutput.target.splice(factoryId, 1, target.bipvProductOutput ?? 0);
-          }
-        }
-        /* 收集芯片投入数据 */
-        chipInvest.current.splice(
-          factoryId,
-          1,
-          factory.inputNumber ?? random_default()
-        );
-        chipInvest.previous.splice(
-          factoryId,
-          1,
-          factory.previousYearInputNumber ?? random_default()
-        );
-        /* 收集FTO投入数据 */
-        ftoInvest.current.splice(
-          factoryId,
-          1,
-          factory.chipInput ?? random_default()
-        );
-        ftoInvest.previous.splice(
-          factoryId,
-          1,
-          factory.previousYearChipInput ?? random_default()
-        );
-        /* 收集产出数据 */
-        switch (factory.glassType) {
-          case 0:
-            // 玻璃芯片 产出
-            chipOutput.current.splice(
-              factoryId,
-              1,
-              factory.outputNumber ?? random_default()
-            );
-            chipOutput.previous.splice(
-              factoryId,
-              1,
-              factory.previousYearOutputNumber ?? random_default()
-            );
-            break;
-          case 1:
-            // 标准组件 产出
-            stdOutput.current.splice(
-              factoryId,
-              1,
-              factory.outputNumber ?? random_default()
-            );
-            stdOutput.previous.splice(
-              factoryId,
-              1,
-              factory.previousYearOutputNumber ?? random_default()
-            );
-            break;
-          case 2:
-            // BIPV 产出
-            bipvOutput.current.splice(
-              factoryId,
-              1,
-              factory.outputNumber ?? random_default()
-            );
-            bipvOutput.previous.splice(
-              factoryId,
-              1,
-              factory.previousYearOutputNumber ?? random_default()
-            );
-            break;
-        }
-      }
-
-      /* 更新 state */
-      commit("SET_HOME_INFO", {
-        ftoInvest,
-        chipInvest,
-        chipOutput,
-        stdOutput,
-        bipvOutput,
-      });
     }
-  },
+  );
-  /** 初始化驾驶舱数据 */
+  if (code == 0) {
-  async initCopilot({ commit }) {},
+    return data;
-};
+  }
+  console.warn("[doFetch] failed, code: ", code);
+  return null;
+}
 
-export default {
+/**
-  namespaced: true,
+ *
-  state,
+ * @param {*} period 日周月年1,2,3,4
-  mutations,
+ * @param {*} target 是否获取目标数据
-  actions,
+ * @returns
-};
+ */
+function getCopilotYield(period,than,target = false) {
+  return getCopilotData("yield", period,than, target);
+}
+
+function getCopilotEnergy(period, target = false) {
+  return getCopilotData("energy", period,than, target);
+}
+
+function getCopilotEfficiency(period,than, target = false) {
+  return getCopilotData("efficiency", period,than, target);
+}
+
+/**
+ *
+ * @param {*} period 周期： 日周月年
+ * @param {*} target 是否获取目标数据：默认 否
+ * @returns
+ */
+async function getCopilotData(copilot_module, period,than, target = false) {
+  if (!copilot_module) copilot_module = "yield";
+  // 请求参数，直接一次性获取所有工厂
+  let queryParams = {
+    factorys: [],
+    date: 4,
+    mode:0
+  };
+
+  switch (period) {
+    case "日":
+      queryParams.date = 1;
+      break;
+    case "周":
+      queryParams.date = 2;
+      break;
+    case "月":
+      queryParams.date = 3;
+      break;
+    case "年":
+      queryParams.date = 4;
+      break;
+    default:
+      queryParams.date = 1;
+      break;
+  }
+ switch (than) {
+    case "同比":
+      queryParams.mode = 0;
+      break;
+    case "环比":
+      queryParams.mode = 1;
+      break;
+  }
+  return {
+    data: await doFetch(copilot_module, target ? true : false, queryParams),
+    type: copilot_module,
+  };
+}

src/utils/constants.js

@@ -71,6 +71,45 @@ export const SystemDataScopeEnum = {
   DEPT_SELF: 5 // 仅本人数据权限
 }
 
+/**
+ * 工厂名称
+ */
+export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
+
+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: '凯盛光伏材料有限公司',
+    id: 5
+  }
+]
+
 /**
  * 代码生成模板类型
  */

src/utils/dict.js

@@ -139,3 +139,15 @@ export function getDictDataLabel(dictType, value) {
   const dict = getDictData(dictType, value);
   return dict ? dict.label : '';
 }
+
+// table中用来过滤字典
+export function publicFormatter(dictTable) {
+  const dictDatas = getDictDatas(dictTable)
+  return function (val) {
+    const arr = {}
+    dictDatas.map((item) => {
+      arr[item.value] = item.label
+    })
+    return arr?.[val]
+  }
+}

src/views/copilot/components/BarChartBase.vue

@@ -0,0 +1,291 @@
+<!--
+    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>
+    </div>
+    <div ref="chart" style="height:94%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+import { debounce } from "@/utils/debounce";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isOpen(val) {
+      // console.log(val)
+      this.canvasReset()
+    },
+    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.initChart(this.actualOptions);
+      // 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.initChart(this.actualOptions);
+      this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        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);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

src/views/copilot/components/ChartContainer.vue

@@ -0,0 +1,69 @@
+<!-- 
+    filename: ChartContainer.vue
+    author: liubin
+    date: 2024-04-10 08:54:33
+    description: 
+    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
+-->
+
+<template>
+  <div class="chart-container" :class="{ 'no-scroll': noScroll }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartContainer",
+  components: {},
+  props: {
+    noScroll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-container {
+  height: 0;
+  flex: 1;
+  overflow-x: scroll;
+}
+
+.no-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  //   width: 10px;
+  //   height: 10px;
+  //   background: #14305f;
+}
+
+::-webkit-scrollbar-track {
+  background: #14305f;
+  border: 0 none;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #004798;
+  border: 0 none;
+  border-radius: 6px;
+}
+</style>

src/views/copilot/components/Container.vue

@@ -1,14 +1,15 @@
-<!-- 
+<!--
     filename: Container.vue
     author: liubin
     date: 2024-04-09 10:44:09
-    description: 
+    description:
 -->
 
 <template>
   <div class="copilot-container">
     <!-- refresh btn  -->
     <button
+      v-if="0"
       style="
         appearance: none;
         outline: none;
@@ -109,7 +110,12 @@ export default {
     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 30%,
+      transparent
+    );
     z-index: 1;
   }
 

src/views/copilot/components/ContainerIcon.vue

@@ -1,8 +1,9 @@
-<!-- 
+<!--
-    filename: ContainerIcon.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-04-28 13:42:51
-    date: 2024-04-09 16:41:36
+ * @LastEditTime: 2024-05-07 16:54:54
-    description: 
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -14,8 +15,13 @@ import cube from "@/assets/images/homeindex/fto-icon.png";
 import chip from "@/assets/images/homeindex/chip-icon.png";
 import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
 import bipv from "@/assets/images/homeindex/bipv-icon.png";
+import water from "@/assets/images/homeindex/water-icon.png";
+import gas from "@/assets/images/homeindex/gas-icon.png";
+import ware from "@/assets/images/homeindex/ware-icon.png";
+import flash from "@/assets/images/homeindex/flash-icon.png";
 import std from "@/assets/images/homeindex/std-icon.png";
 
+
 export default {
   name: "ContainerIcon",
   components: {},
@@ -40,6 +46,10 @@ export default {
         bipv:
           "background: url(" + bipv + ") no-repeat center center / 100% 100%",
         std: "background: url(" + std + ") no-repeat center center / 100% 100%",
+        water: "background: url(" + water + ") no-repeat center center / 100% 100%",
+        gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
+        flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
+        ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
       }[this.icon];
     },
   },

src/views/copilot/components/CopilotHeader.vue

@@ -1,40 +1,30 @@
-<!-- 
+<!--
     filename: CopilotHeader.vue
     author: liubin
     date: 2024-04-16 15:14:01
-    description: 
+    description:
 -->
 
 <template>
   <div class="copilot-header">
     <section class="menu">
-      <CopilotButton
+      <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
-        v-for="i in ['产量', '效率', '能源']"
+        @click="() => $emit('update:active', i)" />
-        :key="i"
+      <div class="type-name"></div>
-        :label="i"
+      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
-        :active="i === active"
+        @click="() => $emit('update:than', i)" />
-        @click="() => $emit('update:active', i)"
-      />
-    </section>
-    <section class="menu">
-      <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="fullscreen-btn"
-          :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          @click="toggleFullScreen"
-        />
-      </div>
     </section>
     <div class="page-title">{{ active }}驾驶舱</div>
+    <section class="menu" style="width: 24vw;float: right;">
+      <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="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
+          @click="toggleFullScreen" />
+        <!-- <button class="times-btn"> {{ times }} </button> -->
+      </div>
+    </section>
   </div>
 </template>
 
@@ -52,18 +42,64 @@ export default {
     period: {
       type: String,
     },
+    than: {
+      type: String,
+    },
   },
   data() {
     return {
+      times:'',
       isFullscreen: false,
     };
   },
+  mounted () {
+    this.getTimes()
+    this.getTimesInterval();
+  },
   computed: {},
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 60000);
+    },
+    getTimesInterval() {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+
+        year +
+        '.' +
+        month +
+        '.' +
+      day +
+      "  " + hours +
+      '.' +
+      minutes +
+      '.' +
+      week
+    },
     toggleFullScreen() {
       this.isFullscreen = !this.isFullscreen;
-
+      screenfull.toggle(document.querySelector(".copilot-layout"))
-      screenfull.toggle(document.querySelector(".copilot-layout"));
       // 矫正宽度
       // const el = document.querySelector(".copilot-layout");
       // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
@@ -83,10 +119,11 @@ export default {
   display: flex;
   gap: 12px;
   align-items: center;
+  justify-content: space-between;
 }
 
 .copilot-header > section {
-  width: 24vw;
+  width: 26vw;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -100,6 +137,17 @@ export default {
   cursor: pointer;
 }
 
+.times-btn {
+  width: 240px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  line-height: 30px;
+  float: right;
+  /* margin-bottom: 20px; */
+}
 .export-btn {
   background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
     no-repeat;
@@ -113,15 +161,27 @@ export default {
   background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
     no-repeat;
 }
-
+    .type-name {
+      /* content: ""; */
+      display: inline-block;
+      width: 1px;
+    height: 59px;
+    border: 1px solid;
+    opacity: 0.9;
+    border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
+      /* position: absolute; */
+      /* left: 0; */
+      /* top: 10px; */
+    }
 .page-title {
-  flex: 1;
+  width: 25vw;
   font-size: 54px;
   line-height: 70px;
   letter-spacing: 5px;
   font-family: 优设标题黑;
   color: #6db6ff;
-  text-align: right;
+  text-align: center;
   user-select: none;
+  background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
 }
 </style>

src/views/copilot/components/FactoryDataHeader.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="factory-header">
+    <section class="menu1">
+      <!-- <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>
+    </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)" />
+    </section>
+  </div>
+</template>
+
+<script>
+// import CopilotButton from "./button.vue";
+import FactorySelect from "./FactorySelect.vue";
+import screenfull from "screenfull";
+import CopilotButton from "./button.vue";
+export default {
+  name: "FactoryDataHeader",
+  components: { CopilotButton, FactorySelect },
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: Number,
+    },
+    period: {
+      type: Number,
+    },
+    than: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      dataList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    toggleFullScreen() {
+      this.isFullscreen = !this.isFullscreen;
+
+      screenfull.toggle(document.querySelector(".factory-layout"));
+      // 矫正宽度
+      // const el = document.querySelector(".factory-layout");
+      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
+      // el.style.left = this.isFullscreen ? "0" : "54px";
+    },
+    updateCompany(obj) {
+      this.$emit("updateCompany", obj);
+    },
+  },
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 优设标题黑;
+  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
+}
+
+.factory-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.factory-header > .menu1 {
+  width: 20vw;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.factory-header > .menu2 {
+  width: 26vw;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.export-btn,
+.fullscreen-btn {
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+}
+
+.export-btn {
+  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+
+.fullscreen-btn {
+  background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+.exit-fullscreen {
+  background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 /
+    100% 100% no-repeat;
+}
+
+.page-title {
+  flex: 1 1 auto;
+  font-size: 40px;
+  line-height: 70px;
+  letter-spacing: 5px;
+  font-family: 优设标题黑;
+  color: #6db6ff;
+  text-align: center;
+  user-select: none;
+  background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
+}
+</style>

src/views/copilot/components/FactorySelect.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="factory-select">
+    <div class="label-box" @click="openList">
+      <span>{{ companyName }}</span>
+      <span
+        class="triangle"
+        :style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
+      ></span>
+    </div>
+    <div class="option-list" v-show="isOpen">
+      <div
+        v-for="item in company"
+        :key="item.id"
+        @click="chooseCompany(item.id, item.name)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FactorySelect",
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      company: [
+        { id: 0, name: "瑞昌中建材光电材料有限公司" },
+        { id: 1, name: "邯郸中建材光电材料有限公司" },
+        { id: 2, name: "株洲中建材光电材料有限公司" },
+        { id: 3, name: "佳木斯中建材光电材料有限公司" },
+        { id: 4, name: "成都中建材光电材料有限公司" },
+        { id: 5, name: "凯盛中建材光电材料有限公司" },
+        { id: 6, name: "蚌埠中建材光电材料有限公司" },
+      ],
+    };
+  },
+  methods: {
+    openList() {
+      this.isOpen = !this.isOpen;
+    },
+    chooseCompany(id, name) {
+      // this.companyId = id;
+      // this.companyName = name;
+      this.$emit("updateCompany", { companyName: name, companyId: id });
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-select {
+  width: 100%;
+  position: relative;
+  .label-box {
+    flex: 1;
+    position: relative;
+    background: #006acd40;
+    backdrop-filter: blur(3px);
+    padding: 12px;
+    padding-left: 20px;
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  .label-box::before,
+  .label-box::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;
+  }
+
+  .label-box::before {
+    left: 0;
+    border-left-color: #007be4;
+  }
+
+  .label-box::after {
+    right: 0;
+    border-right-color: #007be4;
+  }
+  .triangle {
+    position: absolute;
+    right: 15px;
+    top: 18px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid #1d74d8;
+  }
+  .option-list {
+    width: 100%;
+    position: absolute;
+    z-index: 1000;
+    div {
+      padding-left: 23px;
+      font-size: 20px;
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      background-color: rgba(1, 34, 86, 0.8);
+      cursor: pointer;
+    }
+    div:hover {
+      background-color: rgba(0, 106, 205, 0.61);
+    }
+  }
+  .option-list::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(1, 34, 86, 0.9);
+    filter: blur(2px);
+    z-index: -1;
+  }
+}
+</style>

src/views/copilot/components/LineChartBase.vue

@@ -0,0 +1,521 @@
+<!--
+    filename: LineChartBase.vue
+    author: liubin
+    date: 2024-04-30 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="line-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>
+    </div>
+    <div ref="elsChart" :style="{ height: '95%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "LineChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    // xAxis: {
+    //   type: Array,
+    //   required: true,
+    // },
+    series: {
+      type: Object,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis:{
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+        yAxis: {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function (value) { // 取最大值向上取整为最大刻度
+            },
+            scale: true,
+            type: 'value',
+            name: 'kw/h',
+            // max: 100,//最大值
+            // min: 0,//最小值
+            // interval: 20,//间隔
+            nameTextStyle: {// y轴上方单位的颜色
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              align: "right",
+              padding: [0, 0, 0, 2]
+            },
+            // position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+        series: [
+          {
+            name: '瑞昌',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8167F6'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '邯郸',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#2760FF'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = 97 + '%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.width = 100 + '%'
+        this.canvasReset()
+
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === false && this.isOpen === true) {
+        this.width = 97 + '%'
+        this.canvasReset()
+      } else if (val === false && this.isOpen === false) {
+        this.width = 100 + '%'
+        this.canvasReset()
+
+      }
+      // 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.initChart(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.xAxis.data = val.times
+      actualOptions.series[0].data = val[0]
+      actualOptions.series[1].data = val[1];
+      actualOptions.series[2].data = val[2];
+      actualOptions.series[3].data = val[3];
+      actualOptions.series[4].data = val[4];
+      actualOptions.series[5].data = val[5];
+      actualOptions.series[6].data = val[6];
+
+      this.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.elsChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 2vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.432vw;
+      height: 0.432vw;
+      border-radius: 100%;
+      margin-right: 0.4vw;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 1vw;
+      height: 0.125vw;
+      position: absolute;
+      top: 54%;
+      left: -15%;
+      transform: translateY(-50%);
+      border-radius: 100;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):after,
+  .legend-item:nth-child(1):before {
+    background-color: #8167F6;
+  }
+
+  .legend-item:nth-child(2):after,
+  .legend-item:nth-child(2):before {
+    background-color: #2760FF;
+  }
+
+  .legend-item:nth-child(3):after,
+  .legend-item:nth-child(3):before {
+    background-color: #5996F7;
+  }
+
+  .legend-item:nth-child(4):after,
+  .legend-item:nth-child(4):before {
+    background-color: #8BC566;
+  }
+
+  .legend-item:nth-child(5):after,
+  .legend-item:nth-child(5):before {
+    background-color: #11FAF0;
+  }
+
+  .legend-item:nth-child(6):after,
+  .legend-item:nth-child(6):before {
+    background-color: #F3C000;
+  }
+
+  .legend-item:nth-child(7):after,
+  .legend-item:nth-child(7):before {
+    background-color: #F38600;
+  }
+}
+</style>

src/views/copilot/components/LineChartWater.vue

@@ -0,0 +1,528 @@
+<!--
+    filename: LineChartBase.vue
+    author: liubin
+    date: 2024-04-30 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="line-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>
+    </div>
+    <div ref="waterChart" :style="{ height: '95%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "LineChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    // xAxis: {
+    //   type: Array,
+    //   required: true,
+    // },
+    series: {
+      type: Object,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width:'',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis:{
+            type: 'category',
+            // boundaryGap: false,
+            data: []
+          },
+        yAxis: {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function (value) { // 取最大值向上取整为最大刻度
+            },
+            scale: true,
+            type: 'value',
+            name: 'kw/h',
+            // max: 100,//最大值
+            // min: 0,//最小值
+            // interval: 20,//间隔
+            nameTextStyle: {// y轴上方单位的颜色
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              align: "right",
+              padding: [0, 0, 0, 2]
+            },
+            // position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+        series: [
+          {
+            name: '瑞昌',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8167F6'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '邯郸',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#2760FF'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: []
+          },
+        ]
+      },
+    };
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ztl')
+        this.width = 97 + '%'
+        this.canvasReset()
+
+        console.log(this.width)
+      } else {
+        this.width = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === false && this.isOpen === true) {
+        console.log(val)
+        this.width = 97 + '%'
+        this.canvasReset()
+      } else if(val === false && this.isOpen === false) {
+        this.width = 100 + '%'
+        this.canvasReset()
+      }
+      // 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.initChart(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options))
+      // console.log(actualOptions)
+      actualOptions.xAxis.data = val.times
+      // actualOptions.series.forEach((ele,index) => {
+      //   ele.data = val.index
+      // })
+      actualOptions.series[0].data = val[0]
+      actualOptions.series[1].data = val[1];
+      actualOptions.series[2].data = val[2];
+      actualOptions.series[3].data = val[3];
+      actualOptions.series[4].data = val[4];
+      actualOptions.series[5].data = val[5];
+      actualOptions.series[6].data = val[6];
+
+      // actualOptions.series[1].data = val?.[1]?.data || [];
+      // actualOptions.series[1].name = val?.[1]?.name || "";
+      this.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.waterChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 2vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.432vw;
+      height: 0.432vw;
+      border-radius: 100%;
+      margin-right: 0.4vw;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 1vw;
+      height: 0.125vw;
+      position: absolute;
+      top: 54%;
+      left: -15%;
+      transform: translateY(-50%);
+      border-radius: 100;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):after,
+  .legend-item:nth-child(1):before {
+    background-color: #8167F6;
+  }
+
+  .legend-item:nth-child(2):after,
+  .legend-item:nth-child(2):before {
+    background-color: #2760FF;
+  }
+
+  .legend-item:nth-child(3):after,
+  .legend-item:nth-child(3):before {
+    background-color: #5996F7;
+  }
+
+  .legend-item:nth-child(4):after,
+  .legend-item:nth-child(4):before {
+    background-color: #8BC566;
+  }
+
+  .legend-item:nth-child(5):after,
+  .legend-item:nth-child(5):before {
+    background-color: #11FAF0;
+  }
+
+  .legend-item:nth-child(6):after,
+  .legend-item:nth-child(6):before {
+    background-color: #F3C000;
+  }
+
+  .legend-item:nth-child(7):after,
+  .legend-item:nth-child(7):before {
+    background-color: #F38600;
+  }
+}
+</style>

src/views/copilot/components/NotMsg.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="notmsg">暂无数据</div>
+</template>
+
+<script>
+export default {
+	name: 'NotMsg',
+	components: {},
+	data() {
+		return {
+		};
+	},
+	computed: {
+	},
+	methods: {
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.notmsg {
+	padding-top: 72px;
+	color: rgba(255, 255, 255, 0.4);
+	text-align: center;
+	font-size: 24px;
+}
+</style>

src/views/copilot/components/charts/base/DoubleRingChart.vue

@@ -1,119 +0,0 @@
-<!-- 
-    filename: DoubleRingChart.vue
-    author: liubin
-    date: 2024-04-17 11:01:55
-    description: 
--->
-
-<template>
-  <div class="double-ring-chart">
-    <div ref="chart" class="double-ring-chart__container"></div>
-    <!--   :style="{ height: vHeight + 'vh' }" -->
-    <div class="double-ring-chart__legend">
-      <div v-for="item in legendItems" :key="item.label" class="legend-item">
-        <span class="legend-item__label">{{ item.label }}</span>
-        <span class="legend-item__value">{{
-          item.value.toLocaleString()
-        }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartMixin from "@/mixins/chart.js";
-import fullscreenMixin from "@/mixins/fullscreen.js";
-import options from "./double-ring-chart-options";
-
-export default {
-  name: "DoubleRingChart",
-  mixins: [chartMixin, fullscreenMixin],
-  props: {
-    vHeight: {
-      type: Number,
-      default: 24,
-    },
-    legendItems: {
-      type: Array,
-      default: () => [
-        { label: "2023年累计", value: 88002 },
-        { label: "2024年累计", value: 88002 },
-        { label: "2025年累计", value: 88002 },
-      ],
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {},
-  mounted() {
-    this.initOptions(options);
-  },
-  methods: {
-    // fullscreen mixin 需要的回调
-    fullscreenCallback(isFullscreen) {
-      console.log("isFullscreen--->", isFullscreen);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.double-ring-chart {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.double-ring-chart__container {
-  flex: 1;
-  height: 0;
-}
-
-.double-ring-chart__legend {
-  padding: 12px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  gap: 32px;
-}
-
-.legend-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.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(1) .legend-item__label::before {
-  background: #0f65ff;
-}
-.legend-item:nth-child(1) .legend-item__value {
-  color: #0f65ff;
-}
-
-.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(3) .legend-item__label::before {
-  background: #003982;
-}
-</style>

src/views/copilot/components/charts/base/DoubleRingWrapper.vue

@@ -1,66 +0,0 @@
-<!-- 
-    filename: DoubleRingWrapper.vue
-    author: liubin
-    date: 2024-04-17 09:55:12
-    description: 
--->
-
-<template>
-  <div class="double-ring-wrapper">
-    <copilot-select :options="cityOptions" />
-    <div class="flex-1 stretch">
-      <DoubleRingChartVue />
-    </div>
-  </div>
-</template>
-
-<script>
-import CopilotSelect from "../../select.vue";
-import fetcher from "./fetcherDoubleRing";
-import DoubleRingChartVue from "./DoubleRingChart.vue";
-
-export default {
-  name: "DoubleRingWrapper",
-  components: { CopilotSelect, DoubleRingChartVue },
-  props: {},
-  data() {
-    return {
-      cityOptions: [
-        "成都",
-        "邯郸",
-        "株洲",
-        "瑞昌",
-        "佳木斯",
-        "凯盛光伏",
-        "蚌埠兴科",
-      ],
-    };
-  },
-  computed: {},
-  mounted() {
-    fetcher.getData().then((res) => {
-      console.log("getData--->", res);
-    });
-  },
-  methods: {},
-};
-</script>
-
-<style scoped lang="scss">
-.double-ring-wrapper {
-  height: 100%;
-  padding: 12px 24px;
-  display: flex;
-  gap: 12px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.stretch {
-  align-self: stretch;
-}
-</style>

src/views/copilot/components/charts/base/fetcherDoubleRing.js

@@ -1,10 +0,0 @@
-export default {
-  getData: async function (url) {
-    //
-    return await new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve([90119, 40801, 44028]);
-      }, 1200);
-    });
-  },
-};

src/views/copilot/components/ftoBarChartBase.vue

@@ -0,0 +1,298 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-23 15:49:14
+ * @LastEditTime: 2024-05-29 10:56:21
+ * @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>
+    </div>
+    <div ref="ftoChart" style="height:94%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+import { debounce } from "@/utils/debounce";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isOpen(val) {
+      // console.log(val)
+      this.canvasReset()
+    },
+    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.initChart(this.actualOptions);
+      // 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.initChart(this.actualOptions);
+      this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        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);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.ftoChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

src/views/copilot/components/gasBarChartBase.vue

@@ -0,0 +1,309 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-13 14:08:51
+ * @LastEditTime: 2024-05-23 15:18:53
+ * @LastEditors: zhp
+ * @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> -->
+    </div>
+    <div  ref="gasChart" :style="{ height: '95%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    // legend: {
+    //   type: Array,
+    //   required: false,
+    // },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: false,
+    },
+    // in: {
+    //   type: String,
+    //   default: "",
+    // },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          // {
+          //   name: "", // this.series[1].name,
+          //   type: "bar",
+          //   barWidth: 12,
+          //   // tooltip: {
+          //   //   valueFormatter: function (value) {
+          //   //     return value + " ml";
+          //   //   },
+          //   // },
+          //   itemStyle: {
+          //     borderRadius: [10, 10, 0, 0],
+          //     color: {
+          //       type: "linear",
+          //       x: 0,
+          //       y: 0,
+          //       x2: 0,
+          //       y2: 1,
+          //       colorStops: [
+          //         {
+          //           offset: 0,
+          //           color: "#57abf8", // 0% 处的颜色
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: "#364BFE66", // 100% 处的颜色
+          //         },
+          //       ],
+          //       global: false, // 缺省为 false
+          //     },
+          //   },
+          //   data: [], // this.series[1].data,
+          // },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        this.width = 97 + '%'
+        this.canvasReset()
+
+        console.log(this.width)
+      } else {
+        console.log('ryf')
+        this.width = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === false && this.isOpen === true) {
+        this.width = 97 + '%'
+        this.canvasReset()
+      } else if (val === false && this.isOpen === false) {
+        this.width = 100 + '%'
+        this.canvasReset()
+      }
+      // 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.initChart(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      console.log('actualOptions', this.options)
+      actualOptions.series[0].data = val;
+      // 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);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.gasChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+  // mounted() {
+  //   this.actualOptions = this.options;
+  //   this.initOptions(this.options);
+  //   window.addEventListener("resize", this.initOptions(this.actualOptions))
+  //   if (screenfull.isEnabled) {
+  //     screenfull.on("change", () => {
+  //       this.isFullscreen = screenfull.isFullscreen;
+  //     });
+  //   }
+  // },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

src/views/copilot/components/select.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: select.vue
     author: liubin
     date: 2024-04-17 09:50:03
-    description: 
+    description:
 -->
 
 <template>
@@ -33,9 +33,28 @@ export default {
   },
   data() {
     return {
-      currentActive: '',
+      currentActive: this.options[0],
     };
   },
+  watch: {
+    currentActive: {
+      handler(val) {
+        this.$emit(
+          "update:active",
+          [
+            "瑞昌",
+            "邯郸",
+            "株洲",
+            "佳木斯",
+            "成都",
+            "凯盛光伏",
+            "蚌埠兴科",
+          ].indexOf(val)
+        );
+      },
+      immediate: true,
+    },
+  },
   computed: {},
   methods: {},
 };
@@ -55,7 +74,7 @@ button {
   padding: 8px 12px;
   cursor: pointer;
   position: relative;
-  transition: all .3s;
+  transition: all 0.3s;
 }
 
 button.active,

src/views/copilot/container.vue

@@ -1,23 +1,19 @@
-<!-- 
+<!--
     filename: container.vue
     author: liubin
     date: 2024-04-16 14:51:25
-    description: 
+    description:
 -->
 
 <template>
-  <div class="copilot-layout">
+  <!-- <div class="copilot-layout" ref="copilot-layout"> -->
-    <CopilotHeaderVue
+  <div class="copilot-layout produce" ref="copilot-layout">
-      :active="page"
+    <CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" @update:period="period = $event"
-      :period="period"
+      @update:than="updateThan" />
-      @update:active="page = $event"
-      @update:period="period = $event"
-    />
-
-    <YieldCopilot v-if="page == '产量'" :period="period" />
-    <EnergyCopilot v-if="page == '能源'" :period="period" />
-    <EfficiencyCopilot v-if="page == '效率'" :period="period" />
 
+    <YieldCopilot :period="period"  :than="than"  />
+    <!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
+    <!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
 </template>
@@ -25,34 +21,88 @@
 <script>
 import CopilotHeaderVue from "./components/CopilotHeader.vue";
 import YieldCopilot from "./yield/index.vue";
-import EnergyCopilot from "./energy/index.vue";
+// import EnergyCopilot from "./energy/index.vue";
-import EfficiencyCopilot from "./efficiency/index.vue";
+// import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
   name: "CopilotContainer",
   components: {
     CopilotHeaderVue,
     YieldCopilot,
-    EnergyCopilot,
+    // EnergyCopilot,
-    EfficiencyCopilot,
+    // EfficiencyCopilot,
   },
   data() {
     return {
       page: "产量",
       period: "日",
+      than:'同比',
+      currentsStyles: '',
     };
   },
+  methods: {
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updateActive(val, oldVal) {
+      console.log(val)
+      if (val === '效率') {
+        this.$router.push({
+          path: 'efficiency-container',
+          query: {
+            name: '效率'
+          }
+        })
+        // this.page = oldVal
+      } else if (val === '产量') {
+        this.$router.push({
+          path: 'main',
+          query: {
+            name: '产量'
+          }
+        })
+        // this.page = oldVal
+      }
+    }
+  },
+  // mounted() {
+  //   this.page = this.$route.query.name
+  // },
+  // watch: {
+  //   page(val) {
+  //     if (val === '产量') {
+  //       console.log(val)
+  //       this.currentsStyles =
+  //         'height: calc(100% + 38px)'
+  //       console.log(this.currentsStyles)
+  //     } else {
+  //       console.log(val)
+  //       this.currentsStyles = 'height:100%+38px'
+  //       console.log(this.currentsStyles)
+  //     }
+  //     immediate: true
+  //   }
+  // }
+  // mounted() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
+  // destroyed() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
 };
 </script>
-
 <style>
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;
-  height: calc(100% + 38px);
   left: -16px;
-  top: -8px;
+  /* top: -8px; */
+  /* height: calc(100% + 38px); */
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -61,6 +111,14 @@ export default {
   gap: 8px;
 }
 
+.produce {
+  height: calc(100% + 38px);
+}
+
+.other {
+  height: calc(100% + 240px);
+}
+
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/

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

@@ -6,16 +6,21 @@
 -->
 
 <template>
-  <DoubleRingWrapperVue />
+  <DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "BipvOutput",
   components: { DoubleRingWrapperVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
   data() {
     return {};
   },

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

@@ -0,0 +1,106 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="ChipInvest"
+    class="chip-invest-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./sub/bar/BarChartBase.vue";
+
+export default {
+  name: "ChipInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  computed: {
+    legend() {
+      switch (this.period) {
+        case "日":
+          return [{ label: "昨日", color: "#12f7f1" }];
+        case "周":
+          return [{ label: "本周", color: "#12f7f1" }];
+        case "月": {
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return [
+            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+            { label: `${year}年${month}月`, color: "#58adfa" },
+          ];
+        }
+        case "年": {
+          const year = new Date().getFullYear();
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+        }
+        default:
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+      }
+    },
+    series() {
+      const { chipInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = chipInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = chipInvest?.pervious;
+          dataList[1] = chipInvest?.current;
+      }
+      return getTemplate(this.period, dataList);
+    },
+  },
+};
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
+</script>

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

@@ -0,0 +1,281 @@
+<!--
+    filename: ChipOee.vue
+    author: liubin
+    date: 2024-04-29 08:51:04
+    description: 芯片OEE
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="chipOEE"
+    class="chip-oee"
+  />
+</template>
+
+<script>
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
+export default {
+  name: "ChipOEE",
+  components: { BarChartBase },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
+    chipOeeRate: {
+      type: Object,
+      default:{}
+    }
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  computed: {
+    legend() {
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.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: `去年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { 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: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
+          { label: `${year - 1}年`, color: "#12f7f1" },
+          { label: `${year}年`, color: "#58adfa" },
+          { label:  `${year}年`, color: "#58adfa" },
+
+          // { label: `${year}年目标`, value: valueTuple[2] },
+        ];
+      }
+      return items
+      // switch (this.period) {
+      //   case "日":
+      //     return [{ label: "昨日", color: "#12f7f1" }];
+      //   case "周":
+      //     return [{ label: "本周", color: "#12f7f1" }];
+      //   case "月": {
+      //     const year = new Date().getFullYear();
+      //     const month = new Date().getMonth() + 1;
+      //     return [
+      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+      //       { label: `${year}年${month}月`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   case "年": {
+      //     const year = new Date().getFullYear();
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   default:
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      // }
+    },
+    // chipOeeRate() {
+    //    return  this.$store.getters.copilot.efficiency.chipOeeRate
+    // },
+    series() {
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      const chipOeeRate = this.chipOeeRate
+      // 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;
+          dataList[1] = chipOeeRate?.current
+          dataList[2] = chipOeeRate?.target
+      }
+      console.log(dataList)
+      return getTemplate(this.period, dataList,this.than);
+    },
+  },
+  methods: {},
+};
+
+function getTemplate(period, dataList, than) {
+  // console.log('dataList',dataList);
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.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 (period === '日' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月${today}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${year}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  }
+  return items
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -6,16 +6,21 @@
 -->
 
 <template>
-  <DoubleRingWrapperVue />
+  <DoubleRingWrapperVue data-source="芯片产出" :period="period" />
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "ChipOutput",
   components: { DoubleRingWrapperVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
   data() {
     return {};
   },

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

@@ -0,0 +1,57 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-10 11:10:54
+ * @LastEditTime: 2024-05-30 13:23:03
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="chip-rate">
+    <ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
+    <ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
+  </div>
+</template>
+
+<script>
+import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
+export default {
+  name: "ChipRate",
+  components: { ChipRateItem: ChipRateItemVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: '同比',
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chip-rate {
+  flex: 1;
+  display: flex;
+  gap: 5px;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
+  }
+}
+</style>

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

@@ -0,0 +1,108 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="ftoInvest"
+    class="fto-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./sub/bar/BarChartBase.vue";
+
+export default {
+  name: "FtoInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  computed: {
+    legend() {
+      switch (this.period) {
+        case "日":
+          return [{ label: "昨日", color: "#12f7f1" }];
+        case "周":
+          return [{ label: "本周", color: "#12f7f1" }];
+        case "月": {
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return [
+            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+            { label: `${year}年${month}月`, color: "#58adfa" },
+          ];
+        }
+        case "年": {
+          const year = new Date().getFullYear();
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+        }
+        default:
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+      }
+    },
+    series() {
+      const { ftoInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = ftoInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = ftoInvest?.pervious;
+          dataList[1] = ftoInvest?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
+  },
+};
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
+</script>

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

@@ -6,16 +6,21 @@
 -->
 
 <template>
-  <DoubleRingWrapperVue />
+  <DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "StdOutput",
   components: { DoubleRingWrapperVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
   data() {
     return {};
   },

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

@@ -0,0 +1,126 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-30 11:19:51
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <!-- <div class="order"> -->
+    <div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px">
+      <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>
+</template>
+
+<script>
+import StdRateItem from "./sub/std/StdRateItem.vue";
+export default {
+  name: "StdRate",
+  components: { StdRateItem },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
+  },
+  computed: {
+    cities() {
+      console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
+      // let getterName = "";
+      // switch (this.dataSource) {
+      //   case "标准组件产出":
+      //     getterName = "stdOutput";
+      //     break;
+      //   case "芯片产出":
+      //     getterName = "chipOutput";
+      //     break;
+      //   case "BIPV产出":
+      //     getterName = "bipvOutput";
+      //     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, },
+      ]
+      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
+        this.$store.getters.copilot?.efficiency.stdRate?.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(
+          (v, idx) => {
+            _cities[idx].target = v ?? 0;
+          }
+        )
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
+        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+          (v, idx) => {
+            _cities[idx].current = v ?? 0;
+          }
+        );
+      }
+      // 删掉凯盛光伏
+      // _cities.splice(4, 1);
+      return _cities;
+    },
+  },
+  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>
+
+<style scoped lang="scss">
+.std-rate {
+  display: flex;
+  // gap: 1px;
+  // flex: 1 1 auto;
+
+  // display: -webkit-box;
+  flex-wrap: wrap;
+  align-items: center;
+  // grid-template-columns: repeat(2, 1fr);
+  // grid-template-rows: repeat(4, 1fr);
+}
+.std-rate::-webkit-scrollbar {
+  display: none;
+}
+.flex-item{
+  // flex: 1 1 auto;
+  width: 50%;
+}
+.span-2 {
+  // flex: 1 1 auto;
+  flex-basis: 100%;
+}
+</style>

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

@@ -0,0 +1,270 @@
+<!--
+    filename: TransformRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:34
+    description: 转化效率
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="chipOEE"
+    class="chip-oee"
+  />
+</template>
+
+<script>
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
+export default {
+  name: "TransformRate",
+  components: { BarChartBase },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: '同比',
+    },
+    transformRate: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  computed: {
+    legend() {
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.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: `去年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { 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: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
+          { label: `${year - 1}年`, color: "#12f7f1" },
+          { label: `${year}年`, color: "#58adfa" },
+          { label: `${year}年`, color: "#58adfa" },
+
+          // { label: `${year}年目标`, value: valueTuple[2] },
+        ];
+      }
+      return items
+    },
+    // transformRate() {
+    //   return this.$store.getters.copilot.efficiency.transformRate
+    // },
+    series() {
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      const transformRate = this.transformRate
+      // console.log('chipOee', chipOeeRate)
+      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;
+          dataList[1] = transformRate.current
+          dataList[2] = transformRate.target
+      }
+      console.log('transformRate', dataList)
+      return getTemplate(this.period, dataList, this.than);
+    },
+    // series() {
+    //   const { transformRate } = this.$store.getters.copilot.efficiency;
+    //   let dataList = null;
+
+    //   switch (this.period) {
+    //     case "日":
+    //     case "周":
+    //       dataList = transformRate?.current;
+    //       break;
+    //     default:
+    //       dataList = [];
+    //       dataList[0] = transformRate?.previous;
+    //       dataList[1] = transformRate?.current;
+    //   }
+
+    //   return getTemplate(this.period, dataList);
+    // },
+  },
+  methods: {},
+};
+
+function getTemplate(period, dataList,than) {
+  // console.log('dataList',dataList);
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.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 (period === '日' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月${today}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${year}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  }
+  return items
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,257 @@
+<!--
+    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
+      >
+    </div>
+    <div
+      ref="chart"
+      style="max-width: 50vw"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "../../../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
+
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    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.initOptions(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      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 || "";
+      this.actualOptions = actualOptions;
+      this.initOptions(actualOptions);
+    },
+  },
+  mounted() {
+    this.actualOptions = this.options;
+    this.initOptions(this.options);
+
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

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

@@ -0,0 +1,366 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 13:22:43
+ * @LastEditTime: 2024-05-29 14:09:08
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <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>
+    </div>
+    <div ref="oeeChart" style="height:96%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "../../../../components/ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 36,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "0%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/%",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+          {
+            name: "", // "2024年目标值",
+            type: "line",
+            lineStyle: {
+              color: "#f3c000",
+            },
+            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
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.canvasReset()
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    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;
+      // if (val === false && this.isOpen === true) {
+      //   console.log(val)
+      //   this.width = 97 + '%'
+      //   this.canvasReset()
+      // } else if (val === false && this.isOpen === false) {
+      //   this.width = 100 + '%'
+      //   this.canvasReset()
+      // }
+      // 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.initChart(this.actualOptions)
+      this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      // 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.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.oeeChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 1.3vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+ .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%);
+ }
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

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

@@ -0,0 +1,366 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-23 15:50:44
+ * @LastEditTime: 2024-05-29 14:25:10
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <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>
+    </div>
+    <div ref="oeeChart" style="height:96%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "../../../../components/ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 36,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "0%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/%",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+          {
+            name: "", // "2024年目标值",
+            type: "line",
+            lineStyle: {
+              color: "#f3c000",
+            },
+            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
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.canvasReset()
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    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;
+      // if (val === false && this.isOpen === true) {
+      //   console.log(val)
+      //   this.width = 97 + '%'
+      //   this.canvasReset()
+      // } else if (val === false && this.isOpen === false) {
+      //   this.width = 100 + '%'
+      //   this.canvasReset()
+      // }
+      // 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.initChart(this.actualOptions)
+      // this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        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);
+    },
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.oeeChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right:1.3vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):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(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%);
+    }
+}
+</style>

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

@@ -0,0 +1,260 @@
+<!--
+    filename: ChipRateItem.vue
+    author: liubin
+    date: 2024-04-29 14:25:18
+    description:
+-->
+
+<template>
+  <div class="chip-rate-item">
+    <div class="cities">
+      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
+    </div>
+    <!-- <div style="flex:1;padding: 0 20%;"> -->
+    <div class="chart" ref="chart"></div>
+    <!-- </div> -->
+    <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CopilotButtons from "@/views/copilot/components/select.vue";
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import getOptions from "../../../options/chipOptions.js";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "ChipRateItem",
+  components: { CopilotButtons },
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    cities: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: Number,
+      default: 1,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: '同比',
+    }
+  },
+  data() {
+    return {
+      factoryId: 0,
+      count: 1,
+    };
+  },
+  computed: {
+    chipRate() {
+      return this.$store.getters.copilot.efficiency.chipRate;
+    },
+    valueTuple() {
+      const getter = this.chipRate;
+      // console.log(getter)
+      if (this.period === "日" || this.period === "周") {
+        return [
+          getter.previous[this.factoryId],
+          getter.current[this.factoryId],
+          0,
+        ];
+      }
+      // [100, 200, 200]
+      return [
+        getter.previous[this.factoryId],
+        getter.current[this.factoryId],
+        getter.target[this.factoryId],
+      ];
+    },
+    options() {
+      const single = this.period === "日" || this.period === "周";
+      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%",
+        subtitle = {
+          日: "本日良率",
+          周: "本周良率",
+          月: `${month}月良率`,
+          年: `${year}良率`,
+        }[this.period];
+
+      const t = getOptions({
+        single,
+        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        titleValue,
+        subtitle,
+        previousSum: vt[0],
+        currentSum: vt[1],
+        targetSum: vt[2],
+      });
+      return t;
+    },
+    legend() {
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.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: `${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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      } 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]) + "%" },
+        ];
+      }
+      return items
+      // [
+      //   {
+      //     label:
+      //       this.period == "月"
+      //         ? `${year - 1}年${month}月良率`
+      //         : `${year - 1}年良率`,
+      //     value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
+      //   },
+      //   {
+      //     label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
+      //     value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
+      //   },
+      // ];
+    },
+  },
+  mounted() {
+    this.initOptions(this.options);
+  },
+  watch: {
+    period() {
+      console.log(this.$store.getters.copilot.efficiency)
+      this.initOptions(this.options);
+    },
+    factoryId() {
+      this.initOptions(this.options);
+    },
+    chipRate() {
+      this.initOptions(this.options);
+    },
+  },
+  methods: {
+    handleCityUpdate(id) {
+      this.factoryId = id;
+    },
+    fullscreenCallback(isFullscreen) {},
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.chip-rate-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    backdrop-filter: blur(24px);
+  .cities {
+    height: 40px;
+  }
+
+    .chart {
+      // margin-left: 5%;
+      // width: 290px;
+      align-self: stretch;
+      // flex: 1 1 auto;
+    // align-items: center;
+      // margin:0 auto;
+      // padding: 0 10%;;
+      /* margin: 10%; */
+      /* min-width: 300px; */
+      height: 200px;
+    }
+  .legend {
+    height: 80px;
+    display: flex;
+    gap: 40px;
+    justify-content: space-around;
+  }
+
+  .legend-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+
+    &:first-child {
+      .legend-item__value {
+        color: #0e61f5;
+      }
+    }
+
+    &:nth-child(2) {
+      .legend-item__value {
+        color: #0fd5d1;
+      }
+    }
+  }
+
+  .legend-item__value {
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+</style>
+

src/views/copilot/efficiency/components/sub/city/CityData.vue

@@ -0,0 +1,149 @@
+<!-- 
+    filename: CityData.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="city-data">
+    <div class="headquarter">
+      <div class="inner-shadow w-1"></div>
+      <div class="inner-shadow flex-1 flex">
+        <CityName value="凯盛光伏" />
+        <CityValue :value="headquarterValue" horizontal :period="period" />
+      </div>
+      <div class="inner-shadow w-1"></div>
+    </div>
+
+    <div class="city-item-container">
+      <CityItem
+        v-for="city in cities"
+        :key="city.name"
+        :location="city.name"
+        :value="city.value"
+        :period="period"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CityItemVue from "./CityItem.vue";
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
+
+export default {
+  name: "CityData",
+  components: {
+    CityItem: CityItemVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
+  props: {
+    dataSource: {
+      type: String,
+      default: null,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    headquarterValue() {
+      let getterName = "";
+      switch (this.dataSource) {
+        case "标准组件产出":
+          getterName = "stdOutput";
+          break;
+        case "芯片产出":
+          getterName = "chipOutput";
+          break;
+        case "BIPV产出":
+          getterName = "bipvOutput";
+          break;
+      }
+      return (
+        "" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
+      );
+    },
+    cities() {
+      let getterName = "";
+      switch (this.dataSource) {
+        case "标准组件产出":
+          getterName = "stdOutput";
+          break;
+        case "芯片产出":
+          getterName = "chipOutput";
+          break;
+        case "BIPV产出":
+          getterName = "bipvOutput";
+          break;
+      }
+      const _cities = [
+        { name: "瑞昌", value: 0 },
+        { name: "邯郸", value: 0 },
+        { name: "株洲", value: 0 },
+        { name: "佳木斯", value: 0 },
+        { name: "成都", value: 0 },
+        { name: "凯盛光伏", value: 0 },
+        { name: "蚌埠兴科", value: 0 },
+      ];
+      this.$store.getters.copilot.yield[getterName]?.current?.forEach(
+        (v, idx) => {
+          _cities[idx].value = v ?? 0;
+        }
+      );
+      // 删掉凯盛光伏
+      _cities.splice(4, 1);
+      return _cities;
+    },
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.city-data {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.headquarter {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+}
+
+.w-1 {
+  width: 70px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inner-shadow {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+}
+
+.city-item-container {
+  flex: 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+</style>

src/views/copilot/efficiency/components/sub/city/CityItem.vue

@@ -0,0 +1,59 @@
+<!-- 
+    filename: CityItem.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="city-item inner-shadow">
+    <CityName :value="location" />
+    <CityValue :value="value + ''" :period="period" />
+  </div>
+</template>
+
+<script>
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
+import GradientTextVue from "../gradient/GradientText.vue";
+
+export default {
+  name: "CityItem",
+  components: {
+    GradientTextVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
+  props: {
+    location: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.city-item {
+  display: flex;
+}
+
+.inner-shadow {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+}
+</style>

src/views/copilot/efficiency/components/sub/city/CityName.vue

@@ -0,0 +1,55 @@
+<!-- 
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "../../../assets/icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 1;
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>

src/views/copilot/efficiency/components/sub/city/CityValue.vue

@@ -0,0 +1,127 @@
+<!-- 
+    filename: CityValue.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-value" :class="[horizontal ? 'horizontal' : '']">
+    <span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
+      period == "周" ? "本周产出" : "今日产出"
+    }}</span>
+    <span class="value" :class="[horizontal ? 'horizontal' : '']">{{
+      value | numberFilter
+    }}</span>
+    <!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
+  </div>
+</template>
+
+<script>
+import GradientTextVue from "../gradient/GradientText.vue";
+
+export default {
+  name: "CityValue",
+  components: { GradientTextVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  filters: {
+    numberFilter(value) {
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return value;
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.city-value {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 2;
+  position: relative;
+}
+
+.city-value.horizontal {
+  flex-direction: row;
+}
+
+.city-value::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent 20%,
+    #fff 50%,
+    transparent 80%
+  );
+}
+
+span.hint {
+  margin: 0 0.77vw;
+  font-size: 0.77vw;
+  order: 2;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+span.hint.horizontal {
+  margin: 0 1.235vw;
+  width: 1.543vw;
+  order: 1;
+  font-size: 0.77vw;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+.value {
+  color: #4dd2fe;
+  text-align: center;
+  font-size: 1.132vw;
+  order: 1;
+}
+.value.horizontal {
+  text-align: left;
+  flex: 1;
+  font-size: 1.543vw;
+  order: 2;
+}
+
+svg,
+.value {
+  width: 100px;
+  order: 1;
+}
+
+.value.horizontal,
+svg.horizontal {
+  order: 2;
+}
+</style>

src/views/copilot/efficiency/components/sub/gradient/GradientText.vue

@@ -0,0 +1,64 @@
+<!-- 
+    filename: GradientText.vue
+    author: liubin
+    date: 2024-04-24 16:33:25
+    description: 
+-->
+
+<template>
+  <svg :height="size + 8" width="100%">
+    <defs>
+      <linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
+        <stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" />
+      </linearGradient>
+    </defs>
+    <text
+      x="0"
+      :y="size"
+      fill="url(#smoke-text)"
+      :style="{
+        fontSize: `${size}px`,
+        letterSpacing: spacing || '2px',
+        fontFamily: 'Calibri, Verdana, sans-serif',
+      }"
+    >
+      {{ text | numberFilter }}
+    </text>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "GradientText",
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: "Test",
+    },
+    spacing: {
+      type: String,
+      default: "1px",
+    },
+    size: {
+      type: Number,
+      default: 24,
+    },
+  },
+  filters: {
+    numberFilter(value) {
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return value;
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,221 @@
+<!-- 
+    filename: DoubleRingChart.vue
+    author: liubin
+    date: 2024-04-17 11:01:55
+    description: 
+-->
+
+<template>
+  <div class="double-ring-chart">
+    <div ref="chart" class="double-ring-chart__container"></div>
+    <!-- style="{ height: vHeight + 'vh' }" -->
+    <div class="double-ring-chart__legend">
+      <div v-for="item in legendItems" :key="item.label" class="legend-item">
+        <span class="legend-item__label">{{ item.label }}</span>
+        <span class="legend-item__value">{{ item.value | numberFilter }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import getOptions from "../../../options/double-ring-chart-options";
+
+export default {
+  name: "DoubleRingChart",
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 24,
+    },
+    factoryId: {
+      type: Number,
+      required: true,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+    dataSource: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {};
+  },
+  filters: {
+    numberFilter(val) {
+      if (!isNaN(val)) {
+        return (+val).toLocaleString();
+      }
+      return 0;
+    },
+  },
+  computed: {
+    dataSourceField() {
+      switch (this.dataSource) {
+        case "标准组件产出":
+          return "stdOutput";
+        case "芯片产出":
+          return "chipOutput";
+        case "BIPV产出":
+          return "bipvOutput";
+      }
+    },
+    valueTuple() {
+      // [previousValue, currentValue, sumValue?]
+      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
+      if (this.period === "日" || this.period === "周") {
+        return [
+          getter.previous[this.factoryId],
+          getter.current[this.factoryId],
+        ];
+      }
+      // [100, 200, 200]
+      return [
+        getter.previous[this.factoryId],
+        getter.current[this.factoryId],
+        getter.target[this.factoryId],
+      ];
+    },
+
+    options() {
+      const year = new Date().getFullYear();
+      const month = new Date().getMonth() + 1;
+      const vt = this.valueTuple;
+      let titleValue =
+          vt[0] != null && vt[2] != null && vt[2] !== 0
+            ? `${vt[1] / vt[2]}%`
+            : "0%",
+        subtitle =
+          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+
+      return getOptions({
+        titleValue,
+        subtitle,
+        previousSum: this.valueTuple[0],
+        currentSum: this.valueTuple[1],
+        targetSum: this.valueTuple[2],
+      });
+    },
+
+    legendItems() {
+      return calculateItems(this.period, this.valueTuple);
+    },
+  },
+  watch: {
+    legendItems() {
+      this.initOptions(this.options);
+    },
+  },
+  mounted() {
+    this.initOptions(this.options);
+  },
+  methods: {
+    // fullscreen mixin 需要的回调
+    fullscreenCallback(isFullscreen) {
+      console.log("isFullscreen--->", isFullscreen);
+    },
+  },
+};
+
+function calculateItems(period, valueTuple) {
+  let items = [];
+  const today = new Date().getDate();
+  const month = new Date().getMonth() + 1;
+  const year = new Date().getFullYear();
+  switch (period) {
+    case "日":
+      items = [
+        { label: `${month}月${today}日累计`, value: valueTuple[1] },
+        { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
+      ];
+      break;
+    case "周":
+      items = [
+        { label: `本周累计`, value: valueTuple[1] },
+        { label: `去年本周累计`, value: valueTuple[0] },
+      ];
+      break;
+    case "月":
+      items = [
+        { label: `${month}月累计`, value: valueTuple[1] },
+        { label: `去年${month}月累计`, value: valueTuple[0] },
+        { label: `${month}月目标`, value: valueTuple[2] },
+      ];
+      break;
+    case "年":
+      items = [
+        { label: `${year}年累计`, value: valueTuple[1] },
+        { label: `${year - 1}年累计`, value: valueTuple[0] },
+        { label: `${year}年目标`, value: valueTuple[2] },
+      ];
+      break;
+  }
+  return items;
+}
+</script>
+
+<style scoped>
+.double-ring-chart {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.double-ring-chart__container {
+  flex: 1;
+  height: 0;
+}
+
+.double-ring-chart__legend {
+  padding: 12px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+}
+
+.legend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.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(1) .legend-item__label::before {
+  background: #12fff5;
+}
+.legend-item:nth-child(1) .legend-item__value {
+  color: #12fff5;
+}
+
+.legend-item:nth-child(2) .legend-item__label::before {
+  background: #0f65ff;
+}
+.legend-item:nth-child(2) .legend-item__value {
+  color: #0f65ff;
+}
+
+.legend-item:nth-child(3) .legend-item__label::before {
+  background: #003982;
+}
+</style>

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

@@ -0,0 +1,86 @@
+<!-- 
+    filename: DoubleRingWrapper.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="double-ring-wrapper">
+    <template v-if="period == '月' || period == '年'">
+      <copilot-select
+        @update:active="handleActiveUpdate"
+        :options="cityOptions"
+      />
+      <div class="flex-1 stretch">
+        <DoubleRingChartVue
+          :data-source="dataSource"
+          :period="period"
+          :factoryId="factoryId"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <CityData :data-source="dataSource" :period="period" />
+    </template>
+  </div>
+</template>
+
+<script>
+import CopilotSelect from "@/views/copilot/components/select.vue";
+import DoubleRingChartVue from "./DoubleRingChart.vue";
+import CityData from "../city/CityData.vue";
+
+export default {
+  name: "DoubleRingWrapper",
+  components: { CopilotSelect, DoubleRingChartVue, CityData },
+  props: {
+    dataSource: {
+      type: String,
+      default: null,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {
+      factoryId: 4, // 默认成都
+      cityOptions: [
+        "成都",
+        "邯郸",
+        "株洲",
+        "瑞昌",
+        "佳木斯",
+        "凯盛光伏",
+        "蚌埠兴科",
+      ],
+    };
+  },
+  methods: {
+    handleActiveUpdate(index) {
+      this.factoryId = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.double-ring-wrapper {
+  height: 100%;
+  padding: 12px 24px;
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<!--
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description:
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "@/views/copilot/assets/icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  position: relative;
+}
+
+.city-name::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 2px;
+  background: linear-gradient(to top, transparent, #0b5be1ee, transparent);
+  height: 100%;
+  transform: translateY(-50%);
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,116 @@
+<!--
+    filename: ProgressBar.vue
+    author: liubin
+    date: 2024-04-29 09:18:30
+    description:
+-->
+
+<template>
+  <div class="progress-bar" :data-title="title" :data-rate="value + '%'">
+    <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,
+    },
+    // total: {
+    //   type: Number,
+    //   default: 0,
+    // },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dataRate() {
+      return this.value == 0
+        ? "-"
+        : this.value > 1
+          ?  100 + '%'
+          : `${(parseFloat(this.value)).toFixed(0)}%`;
+    },
+  },
+  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/components/sub/std/StdRateItem.vue

@@ -0,0 +1,152 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-29 17:03:00
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <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" />
+    </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" />
+    </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" />
+    </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" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CityName from "./CityName.vue";
+import ProgressBar from "./ProgressBar.vue";
+
+export default {
+  name: "StdRateItem",
+  components: { CityName, ProgressBar },
+  props: {
+    city: {
+      type: Object,
+      required: true,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
+  },
+  data() {
+    return {
+      showDay:true,
+    };
+  },
+  computed: {
+    titlePre() {
+      console.log(this.city);
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.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}日`
+      } else if (this.period === '日' && this.than === '环比') {
+        return `${yesterday}日`
+      } else if (this.period === '周' && this.than === '同比') {
+        return `去年本周`
+      } else if (this.period === '周' && this.than === '环比') {
+        return `上周`
+      } else if (this.period === '月' && this.than === '同比') {
+        return `去年${month}月`
+      } else if (this.period === '月' && this.than === '环比') {
+        return `${lastMonth}月`
+      } else {
+        return `${year - 1}年`
+      }
+    },
+    title() {
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      const today = new Date().getDate();
+      const month = new Date().getMonth() + 1;
+      const year = new Date().getFullYear();
+      if (this.period === '日' && this.than === '同比') {
+        return `${month}月${today}日`
+      } else if (this.period === '日' && this.than === '环比') {
+        return `${month}月${today}日`
+      } else if (this.period === '周' && this.than === '同比') {
+        return `本周`
+      } else if (this.period === '周' && this.than === '环比') {
+        return `本周`
+      } else if (this.period === '月' && this.than === '同比') {
+        return `${month}月`
+      } else if (this.period === '月' && this.than === '环比') {
+        return `${month}月`
+      } else {
+        return `${year}年`
+      }
+    },
+    titleTarget() {
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      const today = new Date().getDate();
+      const month = new Date().getMonth() + 1;
+      const year = new Date().getFullYear();
+      if (this.period === '月') {
+        return `${month}月目标`
+      } else if (this.period === '年') {
+        return `${year}年目标`
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.std-rate-item {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 auto;
+  padding: 12px;
+}
+
+.std-rate-item__value {
+  flex: 1 1 auto;
+  margin: 6px;
+  display: flex;
+  gap: 12px;
+  // height: auto;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

src/views/copilot/efficiency/index.vue

@@ -1,29 +1,90 @@
-<!-- 
+<!--
-    filename: index.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-07 10:04:53
-    date: 2024-04-16 14:40:15
+ * @LastEditTime: 2024-05-30 11:13:01
-    description: 效率驾驶舱
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="efficiency-copilot">
-    <db-container title="芯片良率" icon="chip2"></db-container>
+    <Container title="芯片良率" icon="chip2">
-    <db-container title="标准组件良率" icon="std"></db-container>
+      <ChipRate :period="period" :than="than" />
-    <db-container title="芯片OEE" icon="chip"></db-container>
+    </Container>
-    <db-container title="转化效率" icon="cube"></db-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>
   </div>
 </template>
 
 <script>
-import Container from "../../dashboard/components/Container.vue";
+import Container from "@/views/copilot/components/Container.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",
-  components: { DbContainer: Container },
+  components: {
-  data() {
+    Container,
-    return {};
+    ChipOee: ChipOeeVue,
+    ChipRate: ChipRateVue,
+    StdRate: StdRateVue,
+    TransformRate: TransformRateVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
+  },
+  data() {
+    return {
+      chipOeeRate: {},
+      transformRate:{}
+    };
+  },
+  watch: {
+    period: {
+      handler(val) {
+        val && this.fetchData(val,this.than);
+      },
+      immediate: true,
+    },
+    than: {
+      handler(val) {
+        console.log(val)
+        val && this.fetchData(this.period, val);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    fetchData(period = "日",than) {
+      console.log(`效率驾驶舱，获取${period}数据`);
+      this.$store.dispatch("copilot/initCopilot", {
+        period,
+        source: "efficiency",
+        than
+      }).then(() => {
+        this.$nextTick(() => {
+          this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
+          this.transformRate = this.$store.getters.copilot.efficiency.transformRate
+        })
+      })
+    },
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
@@ -32,8 +93,8 @@ export default {
   flex: 1;
   display: grid;
   gap: 16px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns:repeat(2, 1fr);
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: repeat(2, 1fr)
 }
 
 .efficiency-copilot > div {

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

@@ -0,0 +1,163 @@
+export default function ({
+  single = false,
+  color,
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) {
+  return {
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      containLabel: true,
+    },
+    tooltip: {
+      // formatter(params) {
+      //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
+      // }
+    },
+    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: "#040c5f45",
+        },
+      },
+      // 数据 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 },
+          },
+        ],
+      },
+      // 数据 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 },
+              },
+            ],
+          },
+    ],
+  };
+}

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

@@ -1,6 +1,12 @@
-export default {
+export default ({
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) => ({
   grid: {
-    left: 0,
+    left: '50%',
     right: 0,
     bottom: 0,
     top: 0,
@@ -8,16 +14,16 @@ export default {
   },
   tooltip: {},
   title: {
-    text: "78%",
+    text: titleValue,
-    left: "50%",
+    left: "49%",
-    top: "40%",
+    top: "39%",
     textAlign: "center",
     textStyle: {
       fontWeight: 600,
       fontSize: 32,
       color: "#fffd",
     },
-    subtext: "\u200224年累计产出\u2002",
+    subtext: `\u2002${subtitle}\u2002`,
     subtextStyle: {
       fontSize: 14,
       fontWeight: 100,
@@ -26,17 +32,17 @@ export default {
     },
   },
   series: [
-    // 背景 series - 2024计划
+    // 背景 series
     {
       type: "pie",
-      name: "2024目标",
+      name: "当前目标",
       radius: ["70%", "85%"],
       center: ["50%", "52%"],
       emptyCircleStyle: {
         color: "#042c5f33",
       },
     },
-    // 数据 series - 2024累计
+    // 数据 series
     {
       type: "pie",
       radius: ["70%", "85%"],
@@ -44,15 +50,14 @@ export default {
       avoidLabelOvervlap: false,
       label: {
         show: false,
-        // position: "center",
       },
       labelLine: {
         show: false,
       },
       data: [
         {
-          value: 90,
+          value: currentSum,
-          name: "2024累计产出",
+          name: "当前累计产出",
           selected: false,
           itemStyle: {
             borderJoin: "round",
@@ -73,8 +78,16 @@ export default {
           },
         },
         {
-          value: 20,
+          value:
-          name: "-",
+            targetSum > currentSum
+              ? targetSum - currentSum
+              : targetSum == 0
+              ? currentSum == 0
+                ? 1
+                : 0
+              : 0,
+
+          name: "未达成累计",
           itemStyle: { color: "transparent" },
           label: { show: false },
         },
@@ -94,8 +107,8 @@ export default {
       },
       data: [
         {
-          value: 90,
+          value: previousSum,
-          name: "2023累计产出",
+          name: "上期累计产出",
           selected: false,
           itemStyle: {
             borderJoin: "round",
@@ -116,7 +129,12 @@ export default {
           },
         },
         {
-          value: 20,
+          value:
+            targetSum > previousSum
+              ? targetSum - previousSum
+              : previousSum == 0
+              ? 1
+              : 0,
           name: "-",
           itemStyle: { color: "transparent" },
           label: { show: false },
@@ -124,4 +142,4 @@ export default {
       ],
     },
   ],
-};
+});

src/views/copilot/efficiencyContainer.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-20 16:04:18
+ * @LastEditTime: 2024-05-30 11:14:17
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <!-- <div class="copilot-layout" ref="copilot-layout"> -->
+  <div class="copilot-layout other" ref="copilot-layout">
+    <CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive"
+      @update:period="period = $event" @update:than="updateThan" />
+
+    <!-- <YieldCopilot v-if="page == '产量'" :period="period" /> -->
+    <!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
+    <EfficiencyCopilot :period="period"  :than="than" />
+    <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
+  </div>
+</template>
+
+<script>
+import CopilotHeaderVue from "./components/CopilotHeader.vue";
+// import YieldCopilot from "./yield/index.vue";
+// import EnergyCopilot from "./energy/index.vue";
+import EfficiencyCopilot from "./efficiency/index.vue";
+
+export default {
+  name: "CopilotContainer",
+  components: {
+    CopilotHeaderVue,
+    EfficiencyCopilot,
+  },
+  data() {
+    return {
+      than:'同比',
+      page: "效率",
+      period: "日",
+      currentsStyles: '',
+    };
+  },
+  methods: {
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updateActive(val, oldVal) {
+      console.log(val)
+      if (val === '效率') {
+        this.$router.push({
+          path: 'efficiency-container',
+          query: {
+            name: '效率'
+          }
+        })
+        // this.page = oldVal
+      } else if (val === '产量') {
+        this.$router.push({
+          path: 'main',
+          query: {
+            name: '产量'
+          }
+        })
+        // this.page = oldVal
+      }
+    }
+  },
+  // mounted() {
+  //   this.page = this.$route.query.name
+  // },
+  // watch: {
+  //   page(val) {
+  //     if (val === '产量') {
+  //       console.log(val)
+  //       this.currentsStyles =
+  //         'height: calc(100% + 38px)'
+  //       console.log(this.currentsStyles)
+  //     } else {
+  //       console.log(val)
+  //       this.currentsStyles = 'height:100%+38px'
+  //       console.log(this.currentsStyles)
+  //     }
+  //     immediate: true
+  //   }
+  // }
+  // mounted() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
+  // destroyed() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
+};
+</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); */
+  width: calc(100% + 30px);
+  z-index: 1001;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.produce{
+  height: calc(100% + 38px);
+}
+.other {
+  height: calc(100% + 240px);
+}
+.copilot-footer {
+  /** position: absolute;
+  bottom: 10px; **/
+  height: 10px;
+  width: 100%;
+  color: rgb(80, 80, 80);
+  user-select: none;
+  font-size: 14px;
+  letter-spacing: 1px;
+  display: grid;
+  place-content: center;
+}
+</style>

src/views/copilot/energy/components/ElecCost.vue

@@ -0,0 +1,113 @@
+<!--
+    filename: ElecCost.vue
+    author: liubin
+    date: 2024-04-29 16:37:01
+    description: 电能耗
+-->
+
+<template>
+  <LineChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  />
+  <!-- <BarChartBase
+    v-else
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  /> -->
+</template>
+
+<script>
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+
+export default {
+  name: "ElecCost",
+  components: {
+    // BarChartBase: BarChartBaseVue,
+    LineChartBase: LineChartBaseVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
+      xAxis: cities,
+    };
+  },
+  computed: {
+    // legend() {
+    //   switch (this.period) {
+    //     case "日":
+    //       return [{ label: "昨日", color: "#12f7f1" }];
+    //     case "周":
+    //       return [{ label: "本周", color: "#12f7f1" }];
+    //     case "月": {
+    //       const year = new Date().getFullYear();
+    //       const month = new Date().getMonth() + 1;
+    //       return [
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     case "年": {
+    //       const year = new Date().getFullYear();
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     default:
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //   }
+    // },
+    series() {
+     return this.$store.getters.copilot.energy.elecList;
+      // let dataList = null;
+
+      // switch (this.period) {
+      //   case "日":
+      //   case "周":
+      //     dataList = ftoInvest?.current;
+      //     break;
+      //   default:
+      //     dataList = [];
+      //     dataList[0] = ftoInvest?.pervious;
+      //     dataList[1] = ftoInvest?.current;
+      // }
+
+      // return getTemplate(this.period, dataList);
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.elec-cost {
+  flex: 1;
+}
+</style>

src/views/copilot/energy/components/NatGas.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-14 08:48:34
+ * @LastEditTime: 2024-05-17 09:42:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<!--
+    filename: NatGas.vue
+    author: liubin
+    date: 2024-04-29 16:36:27
+    description: 天然气能耗
+-->
+
+<template>
+  <BarChartBase
+    :series="series"
+    :xAxis="xAxis"
+    in="nat-gas"
+    class="nat-gas"
+  />
+</template>
+
+<script>
+import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";
+
+export default {
+  name: "NatGasCost",
+  components: { BarChartBase },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      // series: [],
+      xAxis: cities,
+    };
+  },
+  // watch: {
+  //   period() {
+  //     this.series = this.$store.getters.copilot.energy.stockDOData;
+  //   }
+  // },
+  computed: {
+    series() {
+      console.log('this.$store.getters.copilot.energy.gasList', this.$store.getters.copilot.energy.gasList);
+      return this.$store.getters.copilot.energy.gasList;
+      // let dataList = null;
+      // let  dataList = gasList
+      // switch (this.period) {
+      //   case "日":
+      //   case "周":
+      //     dataList = ftoInvest?.current;
+      //     break;
+      //   default:
+      //     dataList = [];
+      //     dataList[0] = ftoInvest?.pervious;
+      //     dataList[1] = ftoInvest?.current;
+      // }
+
+      // return gasList
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.nat-gas {
+  flex: 1;
+}
+</style>

src/views/copilot/energy/components/StockMonitor.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-17 10:34:51
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="stock-monitor">
+    <MonitorItem :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" :stockDOData="stockDOData" />
+    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :stockDOData="stockDOData" />
+  </div>
+</template>
+
+<script>
+import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
+
+export default {
+  name: "StockMonitor",
+  components: { MonitorItem: MonitorItemVue },
+  props: {
+    stockDOData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      // dhgList: [
+      //   { name: "总库存", value: 1000 },
+      //   { name: "已用库存", value: 500 },
+      //   { name: "剩余库存", value: 500 },
+      // ],
+      // otherList: [
+      //   { name: "分类1", value: 1000 },
+      //   { name: "分类2", value: 1000 },
+      //   { name: "分类3", value: 1000 },
+      //   { name: "分类4", value: 1000 },
+      // ],
+    };
+  },
+  computed: {
+    dhgList() {
+      console.log(this.stockDOData);
+      // console.log()
+    }
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.stock-monitor {
+  flex: 1;
+  display: flex;
+  gap: 5px;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
+  }
+}
+</style>

src/views/copilot/energy/components/WaterCost.vue

@@ -0,0 +1,101 @@
+<!--
+    filename: WaterCost.vue
+    author: liubin
+    date: 2024-04-29 16:37:34
+    description: 水能耗
+-->
+
+<template>
+  <LineChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="waterCost"
+    class="water-cost"
+  />
+  <!-- <BarChartBase
+    v-else
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="waterCost"
+    class="water-cost"
+  /> -->
+</template>
+
+<script>
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
+
+export default {
+  name: "WaterCost",
+  components: {
+    // BarChartBase: BarChartBaseVue,
+    LineChartBase: LineChartBaseVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
+    };
+  },
+  computed: {
+    // legend() {
+    //   switch (this.period) {
+    //     case "日":
+    //       return [{ label: "昨日", color: "#12f7f1" }];
+    //     case "周":
+    //       return [{ label: "本周", color: "#12f7f1" }];
+    //     case "月": {
+    //       const year = new Date().getFullYear();
+    //       const month = new Date().getMonth() + 1;
+    //       return [
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     case "年": {
+    //       const year = new Date().getFullYear();
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     default:
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //   }
+    // },
+    series() {
+      console.log('this.$store.getters.copilot.energy.waterList', this.$store.getters.copilot.energy.waterList.times);
+      return this.$store.getters.copilot.energy.waterList
+      // return getTemplate(this.period, dataList);
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.water-cost {
+  flex: 1;
+}
+</style>

src/views/copilot/energy/components/sub/monitor/MonitorItem.vue

@@ -0,0 +1,214 @@
+<!--
+    filename: ChipRateItem.vue
+    author: liubin
+    date: 2024-04-29 14:25:18
+    description:
+-->
+
+<template>
+  <div class="monitor-item">
+    <div class="cities">
+      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
+    </div>
+    <!-- <div style="width: 90%;"> -->
+      <div class="chart" ref="chart"></div>
+    <!-- </div> -->
+    <div class="legend" v-if="1">
+      <div class="legend-item" v-for="(lgd, index) in legendList" :key="lgd.name">
+        <div>
+          <span :style="'backgroundColor:' + colors[index % 5]" class="legend-item__chart"></span>
+          <span :style="'color:' + colors[index % 5]" class="legend-item__label">{{ lgd.name }}</span>
+        </div>
+        <div :style="'color:' + colors[index % 5]" class="legend-item__value">{{ lgd.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CopilotButtons from "@/views/copilot/components/select.vue";
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import getOptions from "../../../options/monitorOptions.js";
+
+export default {
+  name: "ChipRateItem",
+  components: { CopilotButtons },
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    cities: {
+      type: Array,
+      default: () => [],
+    },
+    // legendList: {
+    //   type: Array,
+    //   default: () => [],
+    // },
+    color: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      period: "月",
+      factoryId: 0,
+      // legendList:[],
+      colors: ['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
+      // valueTuple: [100, 100, 200],
+    };
+  },
+  computed: {
+    data() {
+      console.log('ztl', this.$store.getters.copilot.energy.gasList)
+      return this.$store.getters.copilot.energy.stockDOData
+    },
+    valueTuple() {
+      return this.data[this.factoryId]
+    },
+    legendList() {
+      // if (this.valueTuple) {
+      // if (this.valueTuple.length == 0) {
+      return this.valueTuple
+      // } else {
+      // return []
+      // }
+      // console.log(this.valueTuple)
+      // } else {
+      // return []
+      // }
+    },
+    options() {
+      // const year = new Date().getFullYear();
+      // const month = new Date().getMonth() + 1;
+      let arr = []
+      let titleValue = ''
+      if (this.legendList != 0) {
+        this.legendList.forEach(ele => {
+          arr.push(ele.value)
+        });
+        let vt = arr
+        titleValue = vt.reduce(function (prev, cur, index, arr) {
+          return prev + cur
+        })
+      } else {
+        titleValue = ''
+        // this.legendList = []
+      }
+
+      let subtitle = `总计/片`;
+      return getOptions({
+        // single: true,
+        // color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        titleValue,
+        subtitle,
+        dataList: this.data[this.factoryId],
+        // previousSum: this.valueTuple[0],
+        // currentSum: this.valueTuple[1],
+        // targetSum: this.valueTuple[2],
+      });
+    },
+  },
+  watch: {
+    period() {
+      this.initOptions(this.options);
+    },
+    legendList() {
+      this.initOptions(this.options);
+    },
+    factoryId(newVal, oldVal) {
+      console.log(newVal);
+      // if (newVal) {
+      // this.legendList = this.data[newVal]
+      // if ( == 0) {
+      //   this.initOptions(this.options)
+      // }
+      // console.log(this.valueTuple.length)
+      // console.log(this.options)
+      this.initOptions(this.options)
+      // }
+    },
+    // chipRate() {
+    //   this.initOptions(this.options);
+    // },
+  },
+  mounted() {
+    // console.log(this.legendList)
+    this.initOptions(this.options);
+  },
+  methods: {
+    handleCityUpdate(id) {
+      console.log(id)
+      this.factoryId = id;
+    },
+    fullscreenCallback(isFullscreen) {
+      console.log("isFullscreen--->", isFullscreen);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.monitor-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  backdrop-filter: blur(24px);
+
+  .cities {
+    height: 40px;
+  }
+
+  .chart {
+    // margin-left: 5%;
+    // width: 290px;
+    align-self: stretch;
+    flex: 1 1 auto;
+    // padding: 0 10%;
+    /* margin: 10%; */
+    /* min-width: 300px; */
+    height: 0;
+  }
+
+  .legend {
+    height: 80px;
+    display: flex;
+    gap: 20px;
+    justify-content: space-around;
+  }
+
+  .legend-item {
+    display: flex;
+    // width: 90px;
+    flex-direction: column;
+    // justify-content: space-around;
+    // justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 3px;
+
+    .legend-item__chart {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: #2760FF;
+      border-radius: 2px;
+      // margin-right: 8px;
+    }
+
+    .legend-item__label {
+      margin-left: 8px;
+    }
+
+    // }
+  }
+
+  .legend-item__value {
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+</style>

src/views/copilot/energy/index.vue

@@ -1,25 +1,102 @@
-<!-- 
+<!--
-    filename: index.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-07 10:25:10
-    date: 2024-04-16 14:40:15
+ * @LastEditTime: 2024-05-16 15:31:20
-    description: 能源驾驶舱
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
-  <div class="energy-copilot">能源驾驶舱</div>
+  <div class="energy-copilot">
+    <section class="top flex">
+      <Container title="仓库监控·当前" icon="ware">
+        <StockMonitorVue :stockDOData="stockDOData" :period="period" />
+      </Container>
+      <Container title="天然气能耗" icon="gas">
+        <NatGasVue :period="period" />
+      </Container>
+    </section>
+    <section class="bottom flex">
+      <Container title="电能耗" icon="flash">
+        <ElecCostVue :period="period" />
+      </Container>
+      <Container title="水能耗" icon="water">
+        <WaterCostVue :period="period" />
+      </Container>
+    </section>
+  </div>
 </template>
 
 <script>
+import Container from "@/views/copilot/components/Container.vue";
+import StockMonitorVue from "./components/StockMonitor.vue";
+import ElecCostVue from "./components/ElecCost.vue";
+import NatGasVue from "./components/NatGas.vue";
+import WaterCostVue from "./components/WaterCost.vue";
 export default {
   name: "EnergyCopilot",
-  components: {},
+  components: {
-  props: {},
+    Container,
-  data() {
+    StockMonitorVue,
-    return {};
+    ElecCostVue,
+    NatGasVue,
+    WaterCostVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {
+     stockDOData:[],
+    };
+  },
+  watch: {
+    period: {
+      handler(val) {
+        val && this.fetchData(val);
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    fetchData(period = "日") {
+      // console.log(this.width);
+      // console.log('sidebar', this.$store.getters.sidebar);
+      console.log(`综合驾驶舱，获取${period}数据`);
+      // this.getData(this.period)
+      this.$store.dispatch("copilot/initCopilot", {
+        period,
+        source: "energy",
+      });
+      // this.$store.dispatch("copilot/initCopilot", {
+      //   period,
+      //   source: "comprehensive",
+      // });
+    },
   },
-  computed: {},
-  methods: {},
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.energy-copilot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flex {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.top>div,
+.bottom>div {
+  height: 100%;
+}
+</style>

src/views/copilot/energy/options/monitorOptions.js

@@ -0,0 +1,80 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-16 13:35:50
+ * @LastEditors: zhp
+ * @Description:
+ */
+export default function ({
+  // single = false,
+  colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
+  titleValue,
+  subtitle,
+  dataList,
+}) {
+  return {
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  // tooltip: {},
+  title: {
+    text: titleValue,
+    left: "47%",
+    top: "39%",
+    textAlign: "center",
+    textStyle: {
+      fontWeight: 600,
+      fontSize: 32,
+      color: "#fffd",
+    },
+    subtext: `\u2002${subtitle}\u2002`,
+    subtextStyle: {
+      fontSize: 14,
+      fontWeight: 100,
+      color: "#fffd",
+      align: "right",
+    },
+  },
+  // legend: {
+  //   top: '5%',
+  //   left: 'center'
+  // },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+    	center: ['50%', '50%'],
+			radius: ['50%', '80%'],
+      avoidLabelOverlap: false,
+        labelLine: {
+        show: false
+      },
+      label: {
+        show: false
+      },
+      data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
+						name:item.name,
+            value: item.value,
+						itemStyle:{
+							color:{
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								global: false,
+								colorStops:[
+									{offset: 0,color:colors[index%5]},
+									{offset: 1,color:colors[index%5]+'33'}
+								]
+							}
+						}
+            }))
+    }
+  ]
+  };
+}

src/views/copilot/factoryData/bbIndex.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="factory-layout">
+    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
+      @update:than="updateThan" @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" />
+        </db-container>
+        <!-- <db-container title="" icon="store"> -->
+        <!-- <store :stock="stock" /> -->
+        <!-- </db-container> -->
+      </section>
+      <!-- <section class="bottom flex"> -->
+      <!-- <db-container title="" icon="energy"> -->
+      <!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
+      <!-- </db-container> -->
+      <!-- </section> -->
+    </div>
+    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
+  </div>
+</template>
+<script>
+import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
+import Container from "./components/Container.vue";
+import ProdMonitor from "./components/ProdMonitor.vue";
+import { deepClone } from "@/utils";
+// import Store from "./components/Store.vue";
+// import Energy from "./components/Energy.vue";
+import Order from "./components/Order.vue";
+import { cockpitDataMonitor } from "@/api/produceData";
+export default {
+  name: "factoryData",
+  components: {
+    FactoryDataHeader,
+    DbContainer: Container,
+    ProdMonitor,
+    // Store,
+    // Energy,
+    Order,
+  },
+  data() {
+    return {
+      companyId: 6,
+      companyName: "蚌埠中建材光电材料有限公司",
+      period: 1,
+      show: false,
+      than: '同比',
+      data: {},
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      factoryData: {
+        preDataDetail: [],
+        currentDataDetail: {},
+        targetDataDetail: [],
+      },
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
+      energyLegend: [
+        { label: "电", color: "#FFD160" },
+        { label: "水", color: "#2760FF" },
+        { label: "气", color: "#12FFF5" },
+      ],
+    };
+  },
+  mounted() {
+    this.getMes();
+  },
+  methods: {
+    updateCompany(obj) {
+      this.companyId = obj.companyId;
+      this.companyName = obj.companyName;
+      this.getMes();
+    },
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
+      cockpitDataMonitor({
+        factorys: [this.companyId],
+        date: this.period,
+        mode: this.than === '同比' ? 0 : 1
+      }).then((res) => {
+        console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.prodOrder = res.data.prodWorkOrderDO || [];
+        let prodOutputFtoListRes = res.data.prodOutputFtoDO || [];
+        let preFtoData = res.data.previousProdOutputFtoDO || [];
+        let preData = res.data.previousProdOutputMonitorShDO || [];
+        let factoryListResponse = res.data.prodOutputMonitorShDO || [];
+        let targetListResponse = res.data.prodTargetMonitorDO || [];
+        let preDataDetail = []
+        let currentDataDetail = []
+        let targetDataDetail = []
+        if (prodOutputFtoListRes) {
+          for (const factory of prodOutputFtoListRes) {
+            console.log(factory);
+            currentDataDetail[0] = factory.chipInput
+          }
+        }
+        if (preFtoData) {
+          for (const factory of preFtoData) {
+            console.log(factory);
+            // const fId = this.getPreFactoryId(factory);
+            // const preFId = getPreFactoryId(factory);
+            // if (fId) {
+            preDataDetail[0] = factory.previousYearChipInput
+            // }
+            // if (preFId) {
+            // ftoInvest.previous[fId] = factory.previousYearChipInput;
+            // }
+          }
+        }
+        if (preData && preData[0] != null) {
+          for (const factory of preData) {
+            if (factory.previousGlassType === 0) {
+              preDataDetail[1] = factory.previousYearOutputNumber
+            } else if (factory.previousGlassType === 1) {
+              preDataDetail[2] = factory.previousYearOutputNumber
+            } else if (factory.previousYearOutputNumber === 2) {
+              currentDataDetail[3] = factory.outputNumber
+            }
+          }
+        }
+        if (targetListResponse && targetListResponse[0] != null) {
+          for (const factory of targetListResponse) {
+            targetDataDetail[0] = factory.ftoInput
+            // if (factory.previousGlassType === 0) {
+            targetDataDetail[1] = factory.chipYield
+            // } else if (factory.previousGlassType === 1) {
+            targetDataDetail[2] = factory.componentYield
+            targetDataDetail[3] = factory.bipvProductoutput
+            // }
+          }
+        }
+        // console.log('ftoInvest',ftoInvest)
+        if (factoryListResponse && factoryListResponse[0] != null) {
+          for (const factory of factoryListResponse) {
+            // targetDataDetail[0] = factory.ftoInput
+            if (factory.glassType === 0) {
+              currentDataDetail[1] = factory.outputNumber
+            } else if (factory.glassType === 1) {
+              currentDataDetail[2] = factory.outputNumber
+            }else if (factory.glassType === 2) {
+              currentDataDetail[3] = factory.outputNumber
+            }
+          }
+        }
+        this.factoryData.preDataDetail = preDataDetail
+        this.factoryData.currentDataDetail = currentDataDetail
+        this.factoryData.targetDataDetail = targetDataDetail
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-layout {
+  padding: 16px;
+  background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
+  position: absolute;
+  height: calc(100% + 38px);
+  left: -16px;
+  top: -8px;
+  width: calc(100% + 30px);
+  z-index: 1001;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .factory-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .flex {
+      display: flex;
+      gap: 16px;
+      flex: 1;
+    }
+
+    .top>div,
+    .bottom>div {
+      height: 100%;
+    }
+  }
+
+  .factory-footer {
+    /** position: absolute;
+  bottom: 10px; **/
+    height: 10px;
+    width: 100%;
+    color: rgb(80, 80, 80);
+    user-select: none;
+    font-size: 14px;
+    letter-spacing: 1px;
+    display: grid;
+    place-content: center;
+  }
+}
+</style>

src/views/copilot/factoryData/cdIndex.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="factory-layout">
+    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
+      @update:than="updateThan" @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" />
+        </db-container>
+        <!-- <db-container title="" icon="store"> -->
+        <!-- <store :stock="stock" /> -->
+        <!-- </db-container> -->
+      </section>
+      <!-- <section class="bottom flex"> -->
+      <!-- <db-container title="" icon="energy"> -->
+      <!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
+      <!-- </db-container> -->
+      <!-- </section> -->
+    </div>
+    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
+  </div>
+</template>
+<script>
+import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
+import Container from "./components/Container.vue";
+import ProdMonitor from "./components/ProdMonitor.vue";
+import { deepClone } from "@/utils";
+// import Store from "./components/Store.vue";
+// import Energy from "./components/Energy.vue";
+import Order from "./components/Order.vue";
+import { cockpitDataMonitor } from "@/api/produceData";
+export default {
+  name: "factoryData",
+  components: {
+    FactoryDataHeader,
+    DbContainer: Container,
+    ProdMonitor,
+    // Store,
+    // Energy,
+    Order,
+  },
+  data() {
+    return {
+      companyId: 4,
+      companyName: "成都中建材光电材料有限公司",
+      period: 1,
+      show: false,
+      than: '同比',
+      data: {},
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      factoryData: {
+        preDataDetail: [],
+        currentDataDetail: {},
+        targetDataDetail: [],
+      },
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
+      energyLegend: [
+        { label: "电", color: "#FFD160" },
+        { label: "水", color: "#2760FF" },
+        { label: "气", color: "#12FFF5" },
+      ],
+    };
+  },
+  mounted() {
+    this.getMes();
+  },
+  methods: {
+    updateCompany(obj) {
+      this.companyId = obj.companyId;
+      this.companyName = obj.companyName;
+      this.getMes();
+    },
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
+      cockpitDataMonitor({
+        factorys: [this.companyId],
+        date: this.period,
+        mode: this.than === '同比' ? 0 : 1
+      }).then((res) => {
+        console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.prodOrder = res.data.prodWorkOrderDO || [];
+        let prodOutputFtoListRes = res.data.prodOutputFtoDO || [];
+        let preFtoData = res.data.previousProdOutputFtoDO || [];
+        let preData = res.data.previousProdOutputMonitorShDO || [];
+        let factoryListResponse = res.data.prodOutputMonitorShDO || [];
+        let targetListResponse = res.data.prodTargetMonitorDO || [];
+        let preDataDetail = []
+        let currentDataDetail = []
+        let targetDataDetail = []
+        if (prodOutputFtoListRes) {
+          for (const factory of prodOutputFtoListRes) {
+            console.log(factory);
+            currentDataDetail[0] = factory.chipInput
+          }
+        }
+        if (preFtoData) {
+          for (const factory of preFtoData) {
+            console.log(factory);
+            // const fId = this.getPreFactoryId(factory);
+            // const preFId = getPreFactoryId(factory);
+            // if (fId) {
+            preDataDetail[0] = factory.previousYearChipInput
+            // }
+            // if (preFId) {
+            // ftoInvest.previous[fId] = factory.previousYearChipInput;
+            // }
+          }
+        }
+        if (preData && preData[0] != null) {
+          for (const factory of preData) {
+            if (factory.previousGlassType === 0) {
+              preDataDetail[1] = factory.previousYearOutputNumber
+            } else if (factory.previousGlassType === 1) {
+              preDataDetail[2] = factory.previousYearOutputNumber
+            } else if (factory.previousYearOutputNumber === 2) {
+              currentDataDetail[3] = factory.outputNumber
+            }
+          }
+        }
+        if (targetListResponse && targetListResponse[0] != null) {
+          for (const factory of targetListResponse) {
+            targetDataDetail[0] = factory.ftoInput
+            // if (factory.previousGlassType === 0) {
+            targetDataDetail[1] = factory.chipYield
+            // } else if (factory.previousGlassType === 1) {
+            targetDataDetail[2] = factory.componentYield
+            targetDataDetail[3] = factory.bipvProductoutput
+            // }
+          }
+        }
+        // console.log('ftoInvest',ftoInvest)
+        if (factoryListResponse && factoryListResponse[0] != null) {
+          for (const factory of factoryListResponse) {
+            // targetDataDetail[0] = factory.ftoInput
+            if (factory.glassType === 0) {
+              currentDataDetail[1] = factory.outputNumber
+            } else if (factory.glassType === 1) {
+              currentDataDetail[2] = factory.outputNumber
+            } else if (factory.glassType === 2) {
+              currentDataDetail[3] = factory.outputNumber
+            }
+          }
+        }
+        this.factoryData.preDataDetail = preDataDetail
+        this.factoryData.currentDataDetail = currentDataDetail
+        this.factoryData.targetDataDetail = targetDataDetail
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-layout {
+  padding: 16px;
+  background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
+  position: absolute;
+  height: calc(100% + 38px);
+  left: -16px;
+  top: -8px;
+  width: calc(100% + 30px);
+  z-index: 1001;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .factory-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .flex {
+      display: flex;
+      gap: 16px;
+      flex: 1;
+    }
+
+    .top>div,
+    .bottom>div {
+      height: 100%;
+    }
+  }
+
+  .factory-footer {
+    /** position: absolute;
+  bottom: 10px; **/
+    height: 10px;
+    width: 100%;
+    color: rgb(80, 80, 80);
+    user-select: none;
+    font-size: 14px;
+    letter-spacing: 1px;
+    display: grid;
+    place-content: center;
+  }
+}
+</style>

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

@@ -0,0 +1,417 @@
+<template>
+  <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>
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "Energy",
+  props: {
+    // legend: {
+    //   type: Array,
+    //   required: true,
+    // },
+    energyCockpits: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      chart: "",
+      options: {
+        color: ["#FFD160", "#2760FF", "#12FFF5"],
+        grid: {
+          left: "7%",
+          right: "7%",
+          bottom: "8%",
+          top: "15%",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        yAxis: {
+            type: "value",
+            name: "单位/片",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "right",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+          },
+        series: [
+          // {
+          //   name: "",
+          //   data: [],
+          //   type: "line",
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       { offset: 0, color: "#FFD160" + "80" },
+          //       { offset: 0.5, color: "#FFD160" + "20" },
+          //       { offset: 1, color: "#FFD160" + "00" },
+          //     ]),
+          //   },
+          //   lineStyle: {
+          //     width: 2,
+          //   },
+          //   symbol: "circle",
+          //   symbolSize: 8,
+          //   emphasis: {
+          //     focus: "series",
+          //   },
+          // },
+          // {
+          //   name: "",
+          //   data: [],
+          //   type: "line",
+          //   yAxisIndex: 1,
+          //   areaStyle: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       { offset: 0, color: "#2760FF" + "80" },
+          //       { offset: 0.5, color: "#2760FF" + "20" },
+          //       { offset: 1, color: "#2760FF" + "00" },
+          //     ]),
+          //   },
+          //   lineStyle: {
+          //     width: 2,
+          //   },
+          //   symbol: "circle",
+          //   symbolSize: 8,
+          //   emphasis: {
+          //     focus: "series",
+          //   },
+          // },
+          {
+            name: "",
+            data: [],
+            type: "bar",
+            // yAxisIndex: 1,
+            // areaStyle: {
+            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     { offset: 0, color: "#12FFF5" + "80" },
+            //     { offset: 0.5, color: "#12FFF5" + "20" },
+            //     { offset: 1, color: "#12FFF5" + "00" },
+            //   ]),
+            // },
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    // 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.initOptions(this.actualOptions);
+    // },
+    // series(val) {
+    //   if (!val) {
+    //     this.initOptions(this.options);
+    //     return;
+    //   }
+    //   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.initOptions(actualOptions);
+    // },
+    energyCockpits() {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 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);
+
+      // let seriesArr = [
+      //   {
+      //     name: "水",
+      //     energyType: 1,
+      //     data: [],
+      //   },
+      //   {
+      //     name: "电",
+      //     energyType: 2,
+      //     data: [],
+      //   },
+      //   {
+      //     name: "气",
+      //     energyType: 3,
+      //     data: [],
+      //   },
+      // ];
+      // if (this.energyCockpits.length > 0) {
+      //   let dataArr = this.energyCockpits.map((item) => {
+      //     return item.groupName;
+      //   });
+      //   energyxAxis = Array.from(new Set(dataArr));
+      //   n = energyxAxis.length;
+      //   seriesArr[0].data = Array.from({ length: n }, () => 0);
+      //   seriesArr[1].data = Array.from({ length: n }, () => 0);
+      //   seriesArr[2].data = Array.from({ length: n }, () => 0);
+      //   for (let i = 0; i < this.energyCockpits.length; i++) {
+      //     for (let j = 0; j < energyxAxis.length; j++) {
+      //       if (this.energyCockpits[i].groupName === energyxAxis[j]) {
+      //         if (this.energyCockpits[i].energyType === 1) {
+      //           seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
+      //         } else if (this.energyCockpits[i].energyType === 2) {
+      //           seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
+      //         } else if (this.energyCockpits[i].energyType === 3) {
+      //           seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
+      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);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.left-chart-base {
+  // position: relative;
+  height: 100%;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 4vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 1.34vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      // width: 10px;
+      // height: 10px;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #ffd160;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+
+  .legend-item:nth-child(1):after {
+    background-color: #ffd160;
+    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(2):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #2760ff;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+
+  .legend-item:nth-child(2):after {
+    background-color: #2760ff;
+    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(3):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #12fff5;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+
+  .legend-item:nth-child(3):after {
+    background-color: #12fff5;
+    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%);
+  }
+}
+</style>

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

@@ -0,0 +1,343 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-30 08:58:39
+ * @LastEditTime: 2024-05-30 10:38:32
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <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>
+    </div>
+    <div ref="oeeChart" style="height:96%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 36,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "0%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/%",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "fto", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+          {
+            name: "", // "2024年目标值",
+            type: "bar",
+            barWidth: 12,
+            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
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    xAxis(val) {
+      this.options.xAxis.data = val
+      this.canvasReset()
+    },
+    isOpen(val) {
+      this.canvasReset()
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    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;
+      // if (val === false && this.isOpen === true) {
+      //   console.log(val)
+      //   this.width = 97 + '%'
+      //   this.canvasReset()
+      // } else if (val === false && this.isOpen === false) {
+      //   this.width = 100 + '%'
+      //   this.canvasReset()
+      // }
+      // 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.initChart(this.actualOptions)
+      this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      // console.log('val', val)
+      const actualOptions = JSON.parse(JSON.stringify(this.options))
+      // 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.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.oeeChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 1.3vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+  .legend-item:nth-child(3):before {
+    background-color: #f3c000;
+  }
+}
+</style>

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

@@ -0,0 +1,69 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-30 09:00:01
+ * @LastEditTime: 2024-05-30 09:50:02
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="chart-container" :class="{ 'no-scroll': noScroll }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartContainer",
+  components: {},
+  props: {
+    noScroll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-container {
+  height: 0;
+  flex: 1;
+  overflow-x: scroll;
+}
+
+.no-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  //   width: 10px;
+  //   height: 10px;
+  //   background: #14305f;
+}
+
+::-webkit-scrollbar-track {
+  background: #14305f;
+  border: 0 none;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #004798;
+  border: 0 none;
+  border-radius: 6px;
+}
+</style>

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

@@ -0,0 +1,278 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-29 14:48:06
+ * @LastEditTime: 2024-05-30 10:54:00
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="chipOEE"
+    class="chip-oee"
+  />
+</template>
+
+<script>
+import BarChartBase from "./BarChartChipOEE.vue";
+export default {
+  name: "ChipOEE",
+  components: { BarChartBase },
+  props: {
+    period: {
+      type: Number,
+      default:1,
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
+    companyId: {
+      type: Number,
+      default: 0
+    },
+    data: {
+      type: Object,
+      default:{}
+    }
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["fto投入", "芯片产量", "标准组件产量"];
+    return {
+      // xAxis: cities,
+    };
+  },
+  computed: {
+    xAxis() {
+      console.log(' this.companyId', this.companyId);
+      return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
+    },
+    legend() {
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.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 === 1  && this.than === '同比') {
+        items = [
+          { label: `去年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period ===1 && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === 2 && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === 2 && this.than === '环比') {
+        items = [
+          { label: `上周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === 3 && this.than === '同比') {
+        items = [
+          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === 3 && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
+          { label: `${year - 1}年`, color: "#12f7f1" },
+          { label: `${year}年`, color: "#58adfa" },
+          { label:  `${year}年目标`, color: "#58adfa" },
+
+          // { label: `${year}年目标`, value: valueTuple[2] },
+        ];
+      }
+      return items
+      // switch (this.period) {
+      //   case "日":
+      //     return [{ label: "昨日", color: "#12f7f1" }];
+      //   case "周":
+      //     return [{ label: "本周", color: "#12f7f1" }];
+      //   case "月": {
+      //     const year = new Date().getFullYear();
+      //     const month = new Date().getMonth() + 1;
+      //     return [
+      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+      //       { label: `${year}年${month}月`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   case "年": {
+      //     const year = new Date().getFullYear();
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   default:
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      // }
+    },
+    // chipOeeRate() {
+    //    return  this.$store.getters.copilot.efficiency.chipOeeRate
+    // },
+    series() {
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      // const chipOeeRate = this.data
+      // console.log('chipOee', chipOeeRate)
+      let dataList = []
+      dataList[0] = this.data.preDataDetail
+      dataList[1] = this.data.currentDataDetail
+      dataList[2] = this.data.targetDataDetail
+      console.log(dataList)
+      return getTemplate(this.period, dataList,this.than);
+    },
+  },
+  methods: {},
+};
+
+function getTemplate(period, dataList, than) {
+  // console.log('dataList',dataList);
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.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 (period === 1 && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月${today}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period ===1 && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === 2 && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === 2&& than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === 3 && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === 3 && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${year}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  }
+  return items
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,232 @@
+<!-- 
+    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 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>
+      <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;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 30%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::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;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1.18vw;
+      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;
+    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/copilot/factoryData/components/ContainerIcon.vue

@@ -0,0 +1,56 @@
+<!-- 
+    filename: ContainerIcon.vue
+    author: liubin
+    date: 2024-04-09 16:41:36
+    description: 
+-->
+
+<template>
+  <div class="container-icon" :style="bgStyle"></div>
+</template>
+
+<script>
+import prod from "@/assets/images/companyData/prod-minor.png";
+import store from "@/assets/images/companyData/store.png";
+import energy from "@/assets/images/companyData/energy.png";
+import order from "@/assets/images/companyData/order.png";
+
+export default {
+  name: "ContainerIcon",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "prod",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    bgStyle() {
+      return {
+        prod:
+          "background: url(" + prod + ") no-repeat center center / 100% 100%",
+        store:
+          "background: url(" + store + ") no-repeat center center / 100% 100%",
+        energy:
+          "background: url(" + energy + ") no-repeat center center / 100% 100%",
+        order:
+          "background: url(" + order + ") no-repeat center center / 100% 100%",
+      }[this.icon];
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.container-icon {
+  //   width: 32px;
+  //   height: 32px;
+  width: 1.701vw;
+  height: 1.701vw;
+  background: #ccc2;
+}
+</style>