1

Reviewed-on: #16

.env.dev

@@ -1,3 +1,10 @@
+###
+ # @Author: zhp
+ # @Date: 2024-04-28 13:42:51
+ # @LastEditTime: 2024-05-13 13:30:20
+ # @LastEditors: zhp
+ # @Description:
+###
 # 开发环境配置
 ENV = 'development'
 
@@ -5,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.61:48080'
-# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
+VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = 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",

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,15 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-04-28 09:28:12
+ * @LastEditTime: 2024-04-28 09:43:40
+ * @LastEditors: zhp
+ * @Description:
+ */
+import request from '@/utils/request'
+export function getEnergyPage(data) {
+  return request({
+    url: 'ip/energy/page',
+    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,40 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 08:54:59
+ * @LastEditTime: 2024-05-07 09:34:17
+ * @LastEditors: zhp
+ * @Description:
+ */
+/*
+ * @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 getProduceDataPage(data) {
+  return request({
+    url: 'ip/prod-output/prodOutputDataPage',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getProduceDataDetail(data){
+  return request({
+     url: '/ip/prod-output/get=' + id,
+    method: 'get',
+    query: 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});
-        height: calc(128 * #{$base1px});
+        top: calc(#{$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/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

@@ -4,16 +4,16 @@ function __resizeHandler(entries) {
   for (const entry of entries) {
     if (entry.contentBoxSize) {
       // manipulate contentBoxSize
-      const contentBoxSize = Array.isArray(entry.contentBoxSize)
-        ? entry.contentBoxSize[0]
-        : entry.contentBoxSize;
-      this.chart_mixin_chartInstance.resize({
-        width:
-          contentBoxSize.inlineSize < this.MIN_WIDTH
-            ? this.MIN_WIDTH
-            : contentBoxSize.inlineSize,
-        height: contentBoxSize.blockSize,
-      });
+      // const contentBoxSize = Array.isArray(entry.contentBoxSize)
+      //   ? entry.contentBoxSize[0]
+      //   : entry.contentBoxSize;
+      // this.chart_mixin_chartInstance.resize({
+      //   width:
+      //     contentBoxSize.inlineSize < this.MIN_WIDTH
+      //       ? this.MIN_WIDTH
+      //       : contentBoxSize.inlineSize,
+      //   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/modules/home.js

@@ -1,3 +1,4 @@
+
 import axios from "@/utils/request";
 import { deepClone } from "../../utils";
 
@@ -28,10 +29,12 @@ const state = {
         target: [],
         current: [],
         previous: [],
+        outputNumber:[],
       },
       stdRate: {
         target: [],
         current: [],
+        outputNumber:[]
       },
     },
   },
@@ -66,6 +69,7 @@ const mutations = {
         state.copilot.energy = payload.data;
         break;
       case "efficiency":
+        console.log('222222', payload)
         state.copilot.efficiency.chipOee = payload.chipOee;
         state.copilot.efficiency.transformRate = payload.transformRate;
         state.copilot.efficiency.chipRate = payload.chipRate;
@@ -79,8 +83,8 @@ const actions = {
   /** 初始化首页数据 */
   async initHome({ commit }) {
     const dataArr = await getHomeInfo();
-    const targetArr = await getHomeTarget();
-    const payload = splitCurrentAndPrevious(dataArr, targetArr);
+    const targetArr = await getHomeInfo();
+    const payload = splitCurrentAndPrevious(dataArr.prodOutputResultDO, targetArr.prodTargetDO);
     commit("SET_HOME_INFO", payload);
   },
   /** 初始化驾驶舱数据 */
@@ -96,16 +100,22 @@ const actions = {
       yield: splitCurrentAndPrevious,
       comprehensive: () => null,
       efficiency: splitCurrentAndPreviousA,
-    }[source];
+    }[source]
+    console.log(handler)
     // 获取产量数据
-    let { data: factoryList, type } = await fetcher(period);
+    // console.log('qqqqqq',handler)
+    let { data: factoryList, type } = await fetcher(period)
+    console.log(factoryList,type);
     let targetList = null;
     if (source === "yield" || source === "efficiency") {
       // 获取目标数据
-      let { data } = await fetcher(period, true);
-      targetList = data;
+      let { data } = await fetcher(period, true)
+      // console.log('11111',data)
+      targetList = data
     }
-    const payload = handler(factoryList, targetList);
+    let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
+    let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
+    const payload = handler(factoryData, targetData)
     commit("SET_COPILOT_INFO", { type, payload });
   },
 };
@@ -118,58 +128,61 @@ export default {
 };
 
 function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
+  console.log('工厂',targetListResponse);
+  // console.log('工厂',factoryListResponse);
+
   // 初始数据
   const { chipOee, 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,
-    },
-  ];
+  // 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 (factoryListResponse) {
     for (const factory of factoryListResponse) {
       const fId = getFactoryId(factory);
@@ -180,23 +193,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
           componentYieldRate,
           chipOee,
           componentConversionEfficiency,
+          componentYield
         } = getFactoryTargetValueA(targetListResponse, fId);
-        stdRate.target[fId] = chipYieldRate;
-        chipRate.target[fId] = componentYieldRate;
+        stdRate.target[fId] =  componentYieldRate
+        chipRate.target[fId] = chipYieldRate
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee || random_default();
-      chipOee.previous[fId] = factory.previousYearOee || random_default();
+      chipOee.current[fId] = factory.oee * 100 ;
+      chipOee.previous[fId] = factory.previousYearOee * 100 ;
       // 转化效率
       transformRate.current[fId] =
-        factory.componentConversionEfficiency || random_default();
+        factory.componentConversionEfficiency * 100 ;
       transformRate.previous[fId] =
-        factory.previousYearComponentConversionEfficiency || random_default();
+        factory.previousYearComponentConversionEfficiency * 100 ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
-      const _t = [chipRate, stdRate][factory.glassType];
-      _t.current[fId] = factory.yieldRate || random_default();
-      _t.previous[fId] = factory.previousYearYieldRate || random_default();
+      const _t = [chipRate, stdRate][factory.glassType]
+      console.log('_t',_t);
+      _t.current[fId] = factory.yieldRate ;
+      _t.previous[fId] = factory.previousYearYieldRate ;
     }
 
     return {
@@ -209,10 +224,13 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
 }
 
 function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
+  console.log('工厂',factoryListResponse);
+
   // 初始数据
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
+
       const fId = getFactoryId(factory);
       // 获取目标值
       if (targetListResponse) {
@@ -275,16 +293,18 @@ function getFactoryTargetValue(targetList, factoryId) {
  * @returns
  */
 function getFactoryTargetValueA(targetList, factoryId) {
-  const target = targetList.find((item) => item.factory === factoryId);
+  const target = targetList.find((item) => item.factory === factoryId)
   if (target) {
     return {
       chipYieldRate: target.chipYieldRate ?? random_default(),
       componentYieldRate: target.componentYieldRate ?? random_default(),
+      componentYield: target.componentYield ?? random_default(),
     };
   }
   return {
-    chipYieldRate: random_default(),
-    componentYieldRate: random_default(),
+    chipYieldRate:0,
+    componentYieldRate:0,
+    componentYield:0 ,
   };
 }
 
@@ -308,7 +328,6 @@ function initA() {
   };
   // 芯片良率
   const chipRate = deepClone(stdRate);
-
   return {
     chipOee,
     transformRate,
@@ -360,7 +379,7 @@ function random_default(min = 0, max = 1) {
 
 /* 接口 */
 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,
   });
@@ -392,14 +411,14 @@ function getUrl(copilot_module) {
   };
   switch (copilot_module) {
     case "yield":
-      url.comparison = "/ip/prod-output/query-by-date";
-      url.target = "/ip/prod-target/query-by-date";
+      url.comparison = "ip/prod-output/cockpitData";
+      // url.target = "/ip/prod-target/query-by-date";
       break;
     case "energy":
       break;
     case "efficiency":
-      url.comparison = "/ip/prod-output/query-Rate-List";
-      url.target = "/ip/prod-target/query-rate-target";
+      url.comparison = "ip/prod-output/cockpitDataRate";
+      // url.target = "/ip/prod-target/query-rate-target";
       break;
   }
 
@@ -409,7 +428,7 @@ function getUrl(copilot_module) {
 async function doFetch(copilot_module = "yield", fetch_target, params) {
   const url = getUrl(copilot_module);
   const { code, data } = await axios.post(
-    fetch_target ? url.target : url.comparison,
+    url.comparison,
     {
       ...params,
     }

src/views/copilot/components/BarChartBase.vue

@@ -18,7 +18,7 @@
     </div>
     <div
       ref="chart"
-      style="max-width: 50vw"
+      style="max-width: 40vw"
       :style="{ height: vHeight + 'vh' }"
     ></div>
   </chart-container>
@@ -199,6 +199,7 @@ export default {
         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 || [];

src/views/copilot/components/ContainerIcon.vue

@@ -1,8 +1,9 @@
 <!--
-    filename: ContainerIcon.vue
-    author: liubin
-    date: 2024-04-09 16:41:36
-    description: 
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-05-07 16:54:54
+ * @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

@@ -63,7 +63,7 @@ export default {
     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)";

src/views/copilot/components/FactoryDataHeader.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="factory-header">
+    <section class="menu1">
+      <FactorySelect
+        :companyName="companyName"
+        :companyId="companyId"
+        @updateCompany="updateCompany"
+      />
+    </section>
+    <section class="menu2">
+      <CopilotButton
+        v-for="i in dataList"
+        :key="i.id"
+        :label="i.name"
+        :active="i.id === period"
+        @click="() => $emit('update:period', i.id)"
+      />
+      <div class="btn-group">
+        <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>
+  </div>
+</template>
+
+<script>
+import CopilotButton from "./button.vue";
+import FactorySelect from "./FactorySelect.vue";
+import screenfull from "screenfull";
+
+export default {
+  name: "FactoryDataHeader",
+  components: { CopilotButton, FactorySelect },
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: Number,
+    },
+    period: {
+      type: Number,
+    },
+  },
+  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: 24vw;
+  /* display: flex;
+  align-items: center;
+  gap: 8px; */
+}
+.factory-header > .menu2 {
+  width: 30vw;
+  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;
+  font-size: 40px;
+  line-height: 70px;
+  letter-spacing: 5px;
+  font-family: 优设标题黑;
+  color: #6db6ff;
+  text-align: right;
+  user-select: none;
+}
+</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

@@ -8,37 +8,29 @@
 <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
-      >
+      <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>
+    <div ref="elsChart" :style="{ height: '100%',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 chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
 export default {
   name: "LineChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
-      default: 34,
+      default: 38,
     },
     legend: {
       type: Array,
@@ -59,6 +51,7 @@ export default {
   },
   data() {
     return {
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -69,120 +62,319 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
-        xAxis: {
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          data: this.xAxis,
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
         },
-        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",
-            },
-          },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
-        series: [
+        xAxis: [
           {
-            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
-              },
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
             },
-            data: [], // this.series[0].data,
-          },
-          {
-            name: "", // this.series[1].name,
-            type: "bar",
-            barWidth: 12,
-            // tooltip: {
-            //   valueFormatter: function (value) {
-            //     return value + " ml";
-            //   },
+            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]
+            //   }
             // },
-            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,
           },
         ],
+        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 = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -191,11 +383,11 @@ export default {
       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);
+      this.initChart(this.actualOptions);
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -204,19 +396,42 @@ export default {
       actualOptions.series[1].data = val?.[1]?.data || [];
       actualOptions.series[1].name = val?.[1]?.name || "";
       this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
     },
   },
-  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
 
-    if (screenfull.isEnabled) {
-      screenfull.on("change", () => {
-        this.isFullscreen = screenfull.isFullscreen;
-      });
+  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>
 
@@ -233,7 +448,7 @@ export default {
   .legend-item {
     position: relative;
     // font-size: 12px;
-    margin-right: 0.67vw;
+    margin-right: 2vw;
 
     &::before {
       content: "";
@@ -260,37 +475,37 @@ export default {
 
   .legend-item:nth-child(1):after,
   .legend-item:nth-child(1):before {
-    background-color: #fad162;
+    background-color: #8167F6;
   }
 
   .legend-item:nth-child(2):after,
   .legend-item:nth-child(2):before {
-    background-color: #2160f3;
+    background-color: #2760FF;
   }
 
   .legend-item:nth-child(3):after,
   .legend-item:nth-child(3):before {
-    background-color: #13dbf3;
+    background-color: #5996F7;
   }
 
   .legend-item:nth-child(4):after,
   .legend-item:nth-child(4):before {
-    background-color: #88ca67;
+    background-color: #8BC566;
   }
 
   .legend-item:nth-child(5):after,
   .legend-item:nth-child(5):before {
-    background-color: #5c97fc;
+    background-color: #11FAF0;
   }
 
   .legend-item:nth-child(6):after,
   .legend-item:nth-child(6):before {
-    background-color: #f48900;
+    background-color: #F3C000;
   }
 
   .legend-item:nth-child(7):after,
   .legend-item:nth-child(7):before {
-    background-color: #776bf0;
+    background-color: #F38600;
   }
 }
 </style>

src/views/copilot/components/LineChartWater.vue

@@ -0,0 +1,515 @@
+<!--
+    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: '100%',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: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width:'',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "1%",
+          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: '4%',
+          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]
+          },
+        ]
+      },
+    };
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ztl')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
+      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.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);
+    },
+  },
+  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/gasBarChartBase.vue

@@ -0,0 +1,304 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-13 14:08:51
+ * @LastEditTime: 2024-05-14 08:46:07
+ * @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: '100%',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: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "1%",
+          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)
+      if (val === true) {
+        console.log('ryf')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
+      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));
+      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.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/container.vue

@@ -1,3 +1,4 @@
+
 <!--
     filename: container.vue
     author: liubin
@@ -6,18 +7,12 @@
 -->
 
 <template>
-  <div class="copilot-layout">
-    <CopilotHeaderVue
-      :active="page"
-      :period="period"
-      @update:active="page = $event"
-      @update:period="period = $event"
-    />
+  <div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]">
+    <CopilotHeaderVue :active="page" :period="period" @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" />
-
     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
 </template>
@@ -40,8 +35,24 @@ export default {
     return {
       page: "产量",
       period: "日",
+      currentsStyles: '',
     };
   },
+  // 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";
@@ -52,15 +63,14 @@ export default {
   // },
 };
 </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; */
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -69,6 +79,12 @@ export default {
   gap: 8px;
 }
 
+.produce{
+  height: calc(100% + 38px);
+}
+.other {
+  height: 100vh + 50px;
+}
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/

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

@@ -0,0 +1,38 @@
+<!-- 
+    filename: BipvOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "BipvOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
 export default {
   name: "ChipOEE",
   components: { BarChartBase },
@@ -63,20 +63,22 @@ export default {
       }
     },
     series() {
-      const { ftoInvest } = this.$store.getters.copilot.yield;
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      const { chipOee } = this.$store.getters.copilot.efficiency;
       let dataList = null;
-
       switch (this.period) {
         case "日":
         case "周":
-          dataList = ftoInvest?.current;
+          dataList = chipOee?.current;
+        case "周":
+          dataList = chipOee?.current;
           break;
         default:
           dataList = [];
-          dataList[0] = ftoInvest?.pervious;
-          dataList[1] = ftoInvest?.current;
+          dataList[0] = chipOee?.previous;
+          dataList[1] = chipOee?.current;
       }
-
+      // console.log(dataList)
       return getTemplate(this.period, dataList);
     },
   },
@@ -86,6 +88,7 @@ export default {
 function getTemplate(period, dataList) {
   const year = new Date().getFullYear();
   const month = new Date().getMonth() + 1;
+  // console.log('11111', dataList);
   return period == "日" || period == "周"
     ? [
         {

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

@@ -0,0 +1,38 @@
+<!-- 
+    filename: ChipOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="芯片产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "ChipOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</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

@@ -0,0 +1,38 @@
+<!-- 
+    filename: StdOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "StdOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

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

@@ -1,20 +1,18 @@
 <!--
-    filename: StdRate.vue
-    author: liubin
-    date: 2024-04-29 08:50:43
-    description: 标准组件良率
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-11 14:51:07
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="std-rate">
     <div class="span-2">
-      <StdRateItem :city="cities[5]" />
+      <StdRateItem :period="period" :city="cities[5]" />
     </div>
-    <div
-      v-for="item in cities.filter((val, index) => index != 5)"
-      :key="item.name"
-    >
-      <StdRateItem :city="item" />
+    <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
+      <StdRateItem :period="period" :city="item" />
     </div>
   </div>
 </template>
@@ -24,21 +22,75 @@ import StdRateItem from "./sub/std/StdRateItem.vue";
 export default {
   name: "StdRate",
   components: { StdRateItem },
-  props: {},
+  props: {
+    period: {
+      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, thisYear: 20 },
-        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
-        { name: "株洲", target: 300, total: 400, thisYear: 20 },
-        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
-        { name: "成都", target: 500, total: 600, thisYear: 20 },
-        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
-        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
-      ],
+      // 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 },
+      // ],
     };
   },
-  computed: {},
   methods: {},
 };
 </script>

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
 export default {
   name: "TransformRate",
   components: { BarChartBase },
@@ -63,18 +63,18 @@ export default {
       }
     },
     series() {
-      const { ftoInvest } = this.$store.getters.copilot.yield;
+      const { transformRate } = this.$store.getters.copilot.efficiency;
       let dataList = null;
 
       switch (this.period) {
         case "日":
         case "周":
-          dataList = ftoInvest?.current;
+          dataList = transformRate?.current;
           break;
         default:
           dataList = [];
-          dataList[0] = ftoInvest?.pervious;
-          dataList[1] = ftoInvest?.current;
+          dataList[0] = transformRate?.previous;
+          dataList[1] = transformRate?.current;
       }
 
       return getTemplate(this.period, dataList);

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,287 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 13:22:43
+ * @LastEditTime: 2024-05-14 08:32:44
+ * @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="chart" :style="{ height: '100%',width: width}"></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,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '100%-128px'
+        this.canvasReset()
+      } else {
+        this.watch = 100 + '%'
+        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);
+    },
+    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 || "";
+      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/efficiency/components/sub/chip/ChipRateItem.vue

@@ -10,7 +10,9 @@
     <div class="cities">
       <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
     </div>
-    <div class="chart" ref="chart"></div>
+    <!-- <div style="flex:1;padding: 0 20%;"> -->
+      <div class="chart" ref="chart"></div>
+    <!-- </div> -->
     <div class="legend" v-if="period == '月' || period == '年'">
       <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
         <span class="legend-item__value">{{ lgd.value }}</span>
@@ -57,6 +59,7 @@ export default {
     },
     valueTuple() {
       const getter = this.chipRate;
+      // console.log(getter)
       if (this.period === "日" || this.period === "周") {
         return [
           getter.previous[this.factoryId],
@@ -108,11 +111,11 @@ export default {
             this.period == "月"
               ? `${year - 1}年${month}月良率`
               : `${year - 1}年良率`,
-          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
         },
         {
           label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
-          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
         },
       ];
     },
@@ -122,6 +125,7 @@ export default {
   },
   watch: {
     period() {
+      console.log(this.$store.getters.copilot.efficiency)
       this.initOptions(this.options);
     },
     factoryId() {
@@ -155,6 +159,7 @@ export default {
   }
 
   .chart {
+    width: 390px;
     align-self: stretch;
     height: 280px;
   }
@@ -191,4 +196,4 @@ export default {
   }
 }
 </style>
-l
+

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/ProgressBar.vue

@@ -6,11 +6,8 @@
 -->
 
 <template>
-  <div class="progress-bar" :data-title="title" :data-rate="dataRate">
-    <div
-      class="progress-bar__rate"
-      :style="{ width: dataRate == '-' ? 0 : dataRate }"
-    ></div>
+  <div class="progress-bar" :data-title="titleYear" :data-rate="number">
+    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
   </div>
 </template>
 
@@ -23,23 +20,52 @@ export default {
       type: Number,
       default: 0,
     },
-    total: {
+    target: {
       type: Number,
       default: 0,
     },
+    goodNumber: {
+      type: Number,
+      default:0
+    },
+    componentYield: {
+      type: Number,
+      default:0
+    },
+    period: {
+      type: String,
+      default:'日',
+    },
     title: {
       type: String,
       default: "",
     },
+    city: {
+      type: String,
+      default:""
+    }
   },
   data() {
-    return {};
+    return {
+      number: 0,
+      titleYear:'',
+    };
   },
   computed: {
     dataRate() {
-      return this.total == 0
+      if ((this.period === '年' || this.period === '月') && this.target != 0) {
+        // console.log(this.componentYield)
+        this.titleYear = this.title + '  ' + `${(this.target * 100).toFixed(0)}%`
+      } else {
+        this.titleYear = this.title
+      }
+      this.number = this.value == 0
         ? "-"
-        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+        : `${(this.value * 100).toFixed(0)}%`
+      // console.log(this.period)
+      return this.value == 0
+        ? "-"
+        : this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
     },
   },
   methods: {},
@@ -69,7 +95,7 @@ export default {
     color: #fff;
     position: absolute;
     bottom: -200%;
-    right: 0;
+    right: 10px;
     font-size: 12px;
   }
 

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

@@ -1,20 +1,38 @@
 <!--
-    filename: StdRateItem.vue
-    author: liubin
-    date: 2024-04-29 08:59:33
-    description: 
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-11 15:05:17
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
-  <div class="std-rate-item">
+  <div v-if="period == '日'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar title="24年目标" :total="city.target" :value="city.target" />
-      <ProgressBar
-        title="24年累计"
-        :total="city.target"
-        :value="city.thisYear"
-      />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
+      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
+    </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 title="24年累计" :total="city.target" :value="city.thisYear" /> -->
+    </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="titleEnd" :target="city.target" :value="city.current" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
+    </div>
+  </div>
+  <div v-else="period == '年'" class="std-rate-item">
+    <CityName :value="city.name" />
+    <div class="std-rate-item__value">
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
 </template>
@@ -31,9 +49,55 @@ export default {
       type: Object,
       required: true,
     },
+    period: {
+      type: String,
+      default: "日",
+    }
   },
   data() {
-    return {};
+    return {
+      showDay:true,
+    };
+  },
+  computed: {
+    title() {
+      switch (this.period) {
+        case "日":
+          return "今日"
+        case "周":
+          return  "本周"
+        case "月":
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return `${year - 1}年${month}月累计`
+        case "年": {
+          const year = new Date().getFullYear();
+          // return [
+           return `${year - 1}年累计`
+          // ];
+        }
+        default:
+         return "今日"
+      }
+    },
+    titleEnd() {
+      switch (this.period) {
+        // case "日":
+        //   return "今日"
+        // case "周":
+        //   return "本周"
+        case "月":
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return  `${year}年${month}月目标`
+        case "年": {
+          const year = new Date().getFullYear();
+          // return [
+          return  `${year}年目标`
+          // ];
+        }
+      }
+    }
   },
 };
 </script>

src/views/copilot/efficiency/index.vue

@@ -1,8 +1,9 @@
 <!--
-    filename: index.vue
-    author: liubin
-    date: 2024-04-16 14:40:15
-    description: 效率驾驶舱
+ * @Author: zhp
+ * @Date: 2024-05-07 10:04:53
+ * @LastEditTime: 2024-05-09 08:56:44
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -72,8 +73,8 @@ export default {
   flex: 1;
   display: grid;
   gap: 16px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-columns:repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr)
 }
 
 .efficiency-copilot > div {

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

@@ -0,0 +1,145 @@
+export default ({
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) => ({
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  tooltip: {},
+  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: "#042c5f33",
+      },
+    },
+    // 数据 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: [
+                { offset: 0, color: "#4CF0E811" },
+                { offset: 1, color: "#4CF0E8" },
+              ],
+            },
+          },
+        },
+        {
+          value:
+            targetSum > currentSum
+              ? targetSum - currentSum
+              : targetSum == 0
+              ? currentSum == 0
+                ? 1
+                : 0
+              : 0,
+
+          name: "未达成累计",
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+    // 数据 series2 - 2023累计
+    {
+      type: "pie",
+      radius: ["55%", "70%"],
+      center: ["50%", "52%"],
+      avoidLabelOvervlap: false,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        {
+          value: previousSum,
+          name: "上期累计产出",
+          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: "-",
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+  ],
+});

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

@@ -7,31 +7,30 @@
 
 <template>
   <LineChartBase
-    v-if="1"
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="elecCost"
     class="elec-cost"
   />
-  <BarChartBase
+  <!-- <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 BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
 import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
 
 export default {
   name: "ElecCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -44,38 +43,47 @@ export default {
     // 城市数组的顺序必须是固定的
     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" },
-          ];
-      }
-    },
+    // 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;

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

@@ -7,7 +7,6 @@
 
 <template>
   <BarChartBase
-    :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="nat-gas"
@@ -16,7 +15,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";
 
 export default {
   name: "NatGasCost",
@@ -35,34 +34,34 @@ export 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" },
-          ];
-      }
-    },
+    // 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;

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

@@ -1,8 +1,9 @@
 <!--
-    filename: StockMonitor.vue
-    author: liubin
-    date: 2024-04-29 16:35:40
-    description: 仓库监控·当前
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 09:39:15
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -25,15 +26,15 @@ export default {
   data() {
     return {
       dhgList: [
-        { name: "总库存", value: "1000" },
-        { name: "已用库存", value: "500" },
-        { name: "剩余库存", value: "500" },
+        { 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" },
+        { name: "分类1", value: 1000 },
+        { name: "分类2", value: 1000 },
+        { name: "分类3", value: 1000 },
+        { name: "分类4", value: 1000 },
       ],
     };
   },

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

@@ -7,31 +7,30 @@
 
 <template>
   <LineChartBase
-    v-if="0"
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="waterCost"
     class="water-cost"
   />
-  <BarChartBase
+  <!-- <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/LineChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
 
 export default {
   name: "WaterCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -45,37 +44,46 @@ export default {
     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" },
-          ];
-      }
-    },
+    // 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;

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

@@ -10,11 +10,16 @@
     <div class="cities">
       <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
     </div>
-    <div class="chart" ref="chart"></div>
+    <div style="padding: 0 30px;width: 90%;">
+      <div class="chart" ref="chart"></div>
+    </div>
     <div class="legend" v-if="1">
-      <div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
-        <span class="legend-item__label">{{ lgd.name }}</span>
-        <span class="legend-item__value">{{ lgd.value }}</span>
+      <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>
@@ -47,6 +52,7 @@ export default {
   data() {
     return {
       period: "月",
+      colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
       valueTuple: [100, 100, 200],
     };
   },
@@ -54,19 +60,23 @@ export default {
     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]) * 100).toFixed(0)}%`
-            : "0%",
-        subtitle =
-          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+      let arr = []
+      this.legendList.forEach(ele => {
+        arr.push(ele.value)
+      });
+      let vt = arr
+      console.log(arr)
+      let titleValue = vt.reduce(function (prev, cur, index, arr) {
+        return prev + cur
+      })
+      let subtitle = `总计/片`;
 
       return getOptions({
         single: true,
         color: this.color == 1 ? "#4CF0E8" : "#1065ff",
         titleValue,
         subtitle,
+        dataList:this.legendList,
         previousSum: this.valueTuple[0],
         currentSum: this.valueTuple[1],
         targetSum: this.valueTuple[2],
@@ -100,6 +110,8 @@ export default {
   }
 
   .chart {
+    margin-left: 5%;
+    width: 290px;
     align-self: stretch;
     height: 280px;
   }
@@ -107,27 +119,31 @@ export default {
   .legend {
     height: 80px;
     display: flex;
-    gap: 40px;
+    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;
-
-    &:first-child {
-      .legend-item__value {
-        color: #0e61f5;
-      }
+    .legend-item__chart{
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: #2760FF;
+      border-radius: 2px;
+      // margin-right: 8px;
     }
-
-    &:nth-child(2) {
-      .legend-item__value {
-        color: #0fd5d1;
-      }
+   .legend-item__label {
+      margin-left: 8px;
     }
+    // }
   }
 
   .legend-item__value {

src/views/copilot/energy/index.vue

@@ -1,22 +1,23 @@
 <!--
-    filename: index.vue
-    author: liubin
-    date: 2024-04-16 14:40:15
-    description: 综合驾驶舱
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-13 15:48:10
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="energy-copilot">
-    <Container title="仓库监控·当前" icon="chip2">
+    <Container title="仓库监控·当前" icon="ware">
       <StockMonitorVue :period="period" />
     </Container>
-    <Container title="天然气能耗" icon="std">
+    <Container title="天然气能耗" icon="gas">
       <NatGasVue :period="period" />
     </Container>
-    <Container title="电能耗" icon="chip">
+    <Container title="电能耗" icon="flash">
       <ElecCostVue :period="period" />
     </Container>
-    <Container title="水能耗" icon="cube">
+    <Container title="水能耗" icon="water">
       <WaterCostVue :period="period" />
     </Container>
   </div>
@@ -55,8 +56,11 @@ export default {
       immediate: true,
     },
   },
+
   methods: {
     fetchData(period = "日") {
+      // console.log(this.width);
+      // console.log('sidebar', this.$store.getters.sidebar);
       console.log(`效率驾驶舱，获取${period}数据`);
       this.$store.dispatch("copilot/initCopilot", {
         period,

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

@@ -1,156 +1,84 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-10 16:10:49
+ * @LastEditors: zhp
+ * @Description:
+ */
 export default function ({
   single = false,
-  color,
+  colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
   titleValue,
   subtitle,
+  dataList,
   previousSum,
   currentSum,
   targetSum,
 }) {
   return {
-    grid: {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-      containLabel: true,
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  // tooltip: {},
+  title: {
+    text: titleValue,
+    left: "49%",
+    top: "39%",
+    textAlign: "center",
+    textStyle: {
+      fontWeight: 600,
+      fontSize: 32,
+      color: "#fffd",
     },
-    tooltip: {},
-    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",
-      },
+    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,
-        },
+  },
+  // legend: {
+  //   top: '5%',
+  //   left: 'center'
+  // },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+    	// center: ['50%', '40%'],
+			radius: ['50%', '80%'],
+      avoidLabelOverlap: 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
-                : 0,
-
-            name: "未达成累计",
-            itemStyle: { color: "transparent" },
-            label: { show: false },
-          },
-        ],
+        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: "-",
-                itemStyle: { color: "transparent" },
-                label: { 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/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>

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

@@ -0,0 +1,430 @@
+<template>
+  <div>
+    <div class="left-chart-base">
+      <NotMsg v-show="notMsg" />
+      <div class="legend" v-show="!notMsg">
+        <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%"
+        v-show="!notMsg"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
+export default {
+  name: "Energy",
+  components: { NotMsg },
+  props: {
+    legend: {
+      type: Array,
+      required: true,
+    },
+    energyCockpits: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      notMsg: false,
+      chart: "",
+      options: {
+        color: ["#FFD160", "#2760FF", "#12FFF5"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "0",
+          top: "15%",
+          containLabel: true,
+        },
+        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: "KW/h",
+            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",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "m³/h",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "left",
+            },
+            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: "line",
+            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" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            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() {
+      let energyxAxis = [];
+      let n = 0;
+      let seriesArr = [
+        {
+          name: "水",
+          energyType: 1,
+          data: [],
+        },
+        {
+          name: "电",
+          energyType: 2,
+          data: [],
+        },
+        {
+          name: "气",
+          energyType: 3,
+          data: [],
+        },
+      ];
+      if (this.energyCockpits.length > 0) {
+        this.notMsg = false;
+        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;
+              }
+            }
+          }
+        }
+      } else {
+        this.notMsg = true;
+      }
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.xAxis.data = energyxAxis;
+      actualOptions.series[0].data = seriesArr[0].data;
+      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/Order.vue

@@ -0,0 +1,114 @@
+<template>
+  <dv-scroll-board
+    v-if="showTable"
+    :config="config"
+    style="width: 100%; height: 100%"
+    ref="orderScrollBoard"
+  />
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+export default {
+  name: "Order",
+  data() {
+    return {
+      showTable: true,
+      config: {
+        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
+        headerBGC: "rgba(0, 106, 205, 0.22)",
+        oddRowBGC: "rgba(0, 106, 205, 0.22)",
+        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
+        data: [],
+        rowNum: 12,
+        waitTime: 3000,
+        columnWidth: [50],
+        align: ["center"],
+        carousel: "page",
+      },
+    };
+  },
+  props: {
+    prodOrder: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    isOpen(val) {
+      this.tableReset();
+    },
+    prodOrder() {
+      this.getTableList();
+    },
+  },
+  mounted() {
+    window.addEventListener("resize", this.tableReset);
+  },
+  methods: {
+    tableReset() {
+      this.showTable = false;
+      debounce(() => {
+        this.initTable();
+      }, 500)();
+    },
+    initTable() {
+      this.showTable = true;
+    },
+    getTableList() {
+      let outArr = [];
+      if (this.prodOrder.length > 0) {
+        for (let i = 0; i < this.prodOrder.length; i++) {
+          let arr = [];
+          arr.push(i + 1);
+          arr.push(
+            `<span title=${this.prodOrder[i].customerName || ""}>${
+              this.prodOrder[i].customerName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].productName || ""}>${
+              this.prodOrder[i].productName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
+              this.prodOrder[i].plannedProductionQuantity || ""
+            }</span>`
+          );
+          arr.push(`<span style="display:inline-block;width:45px;">${
+            this.prodOrder[i].productionProgress
+              ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+              : "0%"
+          }</span>
+            <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
+            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
+              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
+                this.prodOrder[i].productionProgress
+                  ? this.prodOrder[i].productionProgress.toFixed(0) *
+                      37.68 *
+                      0.01 +
+                    "," +
+                    (1 -
+                      this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
+                      37.68
+                  : 0 + "," + 37.68
+              }"/>
+            </svg>
+          </div>`);
+          outArr.push(arr);
+        }
+        this.config.data = outArr;
+      } else {
+        this.config.data = [];
+      }
+      this.$refs["orderScrollBoard"].updateRows(outArr);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,335 @@
+<template>
+  <div class="prod-monitor">
+    <div class="fto-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/fto.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.2875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <span class="type">玻璃类型</span>
+        <span class="type-name">FTO投入</span>
+      </div>
+      <div class="right-box">
+        <span class="type">投入数量</span>
+        <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
+      </div>
+    </div>
+    <div class="std-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/std.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">标准组检产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">{{
+              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">{{
+              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
+            }}</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num"
+              >{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chip-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/chip.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">芯片产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">{{
+              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">{{
+              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
+            }}</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num"
+              >{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bipv-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/bipv.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">BIPV产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">{{
+              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">{{
+              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
+            }}</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num"
+              >{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ProdMonitor",
+  data() {
+    return {
+      msgObj: {
+        stand: {},
+        chip: {},
+        bipv: {},
+      },
+    };
+  },
+  props: {
+    prodOutPut: {
+      type: Array,
+      default: [],
+    },
+    prodFto: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {
+    prodOutPut() {
+      this.makeData();
+    },
+  },
+  mounted() {
+    this.makeData();
+  },
+  methods: {
+    makeData() {
+      this.msgObj.chip = {};
+      this.msgObj.stand = {};
+      this.msgObj.bipv = {};
+      if (this.prodOutPut.length > 0) {
+        this.prodOutPut.map((item) => {
+          if (item.glassType === 0) {
+            this.msgObj.chip = item;
+          } else if (item.glassType === 1) {
+            this.msgObj.stand = item;
+          } else if (item.glassType === 2) {
+            this.msgObj.bipv = item;
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.prod-monitor {
+  height: 100%;
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+  .fto-box,
+  .std-box,
+  .chip-box,
+  .bipv-box {
+    box-shadow: inset 0 0 12px 2px #fff3;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    .icon {
+      flex: 1;
+      text-align: center;
+    }
+    .middle-box {
+      flex: 2.086;
+      position: relative;
+    }
+    .right-box {
+      flex: 2.424;
+      position: relative;
+    }
+    .type {
+      display: inline-block;
+      font-size: 0.9375vw;
+      color: #6db6ff;
+      position: relative;
+      text-align: right;
+      padding-right: 0.417vw;
+      letter-spacing: 2px;
+      width: 6.25vw;
+    }
+    .type1 {
+      display: inline-block;
+      font-size: 0.9375vw;
+      color: #6db6ff;
+      position: relative;
+      text-align: right;
+      padding-right: 0.6vw;
+      width: 6.25vw;
+      padding-left: 1.6vw;
+      text-align: justify;
+      text-align-last: justify;
+    }
+    .type-name {
+      font-size: 1.042vw;
+      color: #fff;
+      position: relative;
+      text-align: left;
+      padding-left: 0.573vw;
+    }
+    .type-name::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.042vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          180deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: 4px;
+    }
+    .num {
+      font-size: 1.042vw;
+      color: #fff;
+      position: relative;
+      text-align: left;
+      padding-left: 0.573vw;
+    }
+    .num::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.042vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          180deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: 4px;
+    }
+  }
+  .fto-box {
+    flex: 1;
+    .type::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.6146vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          135deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1),
+          rgba(31, 143, 255, 0)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: -2px;
+    }
+  }
+  .std-box {
+    flex: 1.3;
+  }
+  .chip-box {
+    flex: 1.3;
+  }
+  .bipv-box {
+    flex: 1.3;
+  }
+  .std-box,
+  .chip-box,
+  .bipv-box {
+    .separate::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 3.125vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          135deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1),
+          rgba(31, 143, 255, 0)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: -2px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <NotMsg v-show="notMsg" />
+    <div
+      id="factoryStoreChart"
+      style="width: 100%; height: 100%"
+      v-show="!notMsg"
+    ></div>
+  </div>
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
+export default {
+  name: "Store",
+  components: { NotMsg },
+  props: {
+    stock: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      notMsg: false,
+      chart: "",
+      options: {
+        grid: {
+          left: "3%",
+          right: "1%",
+          bottom: "0",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        yAxis: {
+          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: "", // 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,
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    stock(val) {
+      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() {
+      let xAxis = Object.keys(this.stock) || [];
+      let data = [];
+      if (xAxis.length > 0) {
+        this.notMsg = false;
+        data = xAxis.map((item) => {
+          return this.stock[item].total;
+        });
+      } else {
+        this.notMsg = true;
+      }
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryStoreChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.xAxis.data = xAxis;
+      actualOptions.series[0].data = data;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
+  },
+};
+</script>
+<style></style>

src/views/copilot/factoryData/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="factory-layout">
+    <FactoryDataHeader
+      :companyName="companyName"
+      :companyId="companyId"
+      :period="period"
+      @updateCompany="updateCompany"
+      @update:period="updatePeriod"
+    />
+    <div class="factory-section">
+      <section class="top flex">
+        <db-container title="生产监控" icon="prod">
+          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
+        </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>
+        <db-container title="订单监控" icon="order">
+          <order :prodOrder="prodOrder" />
+        </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 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: 0,
+      companyName: "瑞昌中建材光电材料有限公司",
+      period: 1,
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      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();
+    },
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
+      cockpitDataMonitor({
+        factorys: [this.companyId],
+        date: this.period,
+      }).then((res) => {
+        console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.stock = res.data.stockDO || {};
+        this.energyCockpits = res.data.energyCockpitsDO || [];
+        this.prodOrder = res.data.prodOrderMonitorDO || [];
+      });
+    },
+  },
+};
+</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/yield/components/ChipInvest.vue

@@ -73,7 +73,7 @@ export default {
           break;
         default:
           dataList = [];
-          dataList[0] = chipInvest?.pervious;
+          dataList[0] = chipInvest?.previous;
           dataList[1] = chipInvest?.current;
       }
       return getTemplate(this.period, dataList);

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

@@ -74,7 +74,7 @@ export default {
           break;
         default:
           dataList = [];
-          dataList[0] = ftoInvest?.pervious;
+          dataList[0] = ftoInvest?.previous;
           dataList[1] = ftoInvest?.current;
       }
 

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

@@ -72,6 +72,7 @@ export default {
       );
     },
     cities() {
+      // console.log('ztl')
       let getterName = "";
       switch (this.dataSource) {
         case "标准组件产出":

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

@@ -7,7 +7,9 @@
 
 <template>
   <div class="double-ring-chart">
-    <div ref="chart" class="double-ring-chart__container"></div>
+    <div class="double-ring-chart__container">
+      <div ref="chart" style="height: 90%;"></div>
+    </div>
     <!-- style="{ height: vHeight + 'vh' }" -->
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
@@ -70,6 +72,7 @@ export default {
       // [previousValue, currentValue, sumValue?]
       const getter = this.$store.getters.copilot.yield[this.dataSourceField];
       if (this.period === "日" || this.period === "周") {
+        console.log(this.period)
         return [
           getter.previous[this.factoryId],
           getter.current[this.factoryId],
@@ -168,7 +171,10 @@ function calculateItems(period, valueTuple) {
 }
 
 .double-ring-chart__container {
-  flex: 1;
+  flex:1;
+  padding: 0 10%;
+  /* margin: 10%; */
+  /* min-width: 300px; */
   height: 0;
 }
 

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

@@ -15,8 +15,8 @@ export default ({
   tooltip: {},
   title: {
     text: titleValue,
-    left: "49%",
-    top: "39%",
+    left: "44%",
+    top: "37%",
     textAlign: "center",
     textStyle: {
       fontWeight: 600,
@@ -37,7 +37,7 @@ export default ({
       type: "pie",
       name: "当前目标",
       radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       emptyCircleStyle: {
         color: "#042c5f33",
       },
@@ -46,7 +46,7 @@ export default ({
     {
       type: "pie",
       radius: ["70%", "85%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,
@@ -97,7 +97,7 @@ export default ({
     {
       type: "pie",
       radius: ["55%", "70%"],
-      center: ["50%", "52%"],
+      center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {
         show: false,

src/views/cost/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:14:51
+ * @LastEditTime: 2024-05-06 14:55:56
  * @LastEditors: zhp
  * @Description:
 -->
@@ -36,7 +36,7 @@
 
 <script>
 // import { parseTime } from '../../core/mixins/code-filter';
-// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+import { getOrderList, getCostPage } from '@/api/cost/index';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -47,11 +47,11 @@ export default {
 	data() {
     return {
       listQuery: {
-        pageSize: 10,
-        pageNo: 1,
-        factoryId: null,
-        total: 0,
-        type: null,
+        current: 1,
+        size: 10,
+        // factoryId: null,
+        // total: 0,
+        // type: null,
         // reportType: 2,
         reportTime: []
       },
@@ -230,7 +230,7 @@ export default {
 	mounted() {
     this.getDict()
     // this.getCurrentYearFirst()
-    // this.getDataList()
+    this.getDataList()
 	},
   methods: {
     buttonClick() {
@@ -264,10 +264,14 @@ export default {
       }
     },
     async getDict() {
-      this.$refs.lineChart.initChart()
+      // this.$refs.lineChart.initChart()
 			// 产线列表
-			// const res = await getCorePLList();
-			// this.proLineList = res.data;
+      const res = await getOrderList({
+        current:1,
+        size:999,
+      });
+      console.log(res)
+			this.mainFormConfig[0].selectOptions = res.data;
 		},
     // 获取数据列表
     multipliedByHundred(str) {
@@ -293,6 +297,10 @@ export default {
 
     },
     async getDataList() {
+        const res = await getCostPage({
+        current: 1,
+        size: 999,
+      });
     },
     add0(m) {
       return m < 10 ? '0' + m : m

src/views/dashboard/components/Header.vue

@@ -9,8 +9,8 @@
   <header class="dashboard-header">
     <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
-    <span class="side left">晴转多云 14℃</span>
-    <span class="side right">23:12|星期一|2023.12.13</span>
+    <span class="side left">{{ this.weather }}</span>
+    <span class="side right"> {{ times }} </span>
   </header>
 </template>
 
@@ -25,7 +25,10 @@ export default {
   props: {},
   data() {
     return {
+      weatherInterval:null,
       isFullscreen: false,
+      times: null,
+      weather:'',
     };
   },
   computed: {
@@ -37,7 +40,72 @@ export default {
       };
     },
   },
+  mounted() {
+    this.getTimes()
+    this.weatherInterval = setInterval(() => {
+      this,this.getWeather()
+    }, 1000)
+  },
+  destroyed() {
+    // console.log(1111)
+    clearInterval(this.weatherInterval)
+  },
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 1000);
+    },
+    getTimesInterval: function () {
+      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 =
+        hours +
+        ':' +
+      minutes +
+      ' | ' +
+      week +
+      ' | ' +
+        year +
+        '.' +
+        month +
+        '.' +
+        day
+    },
+    getWeather() {
+      fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
+        method: 'get',
+        extensions: 'base',
+        //  output:'JSON'
+      }).then((response) => {
+        // 注意此处
+        response.json().then((data) => {
+          console.log(data)
+          this.weather = data.lives[0].weather + '   ' + data.lives[0].temperature + '℃'
+        }).catch((err) => {
+          this.weather = '晴  25℃'
+          console.log(err);
+        })
+      })
+    },
     toggleFullscreen() {
       screenfull.toggle();
       this.isFullscreen = !this.isFullscreen;

src/views/energy/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:14:31
+ * @LastEditTime: 2024-05-06 09:24:02
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,7 +9,7 @@
   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
       <div style="background: #fff; height: 70px; width:100%">
-        <ButtonNav :menus="['水', '电', '气']" :button-mode="true" @change="currentMenu = $event">
+        <ButtonNav :menus="['水', '电', '气']" :button-mode="true" @change="handleChange">
         </ButtonNav>
       </div>
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
@@ -93,8 +93,8 @@
 </template>
 
 <script>
-// import { parseTime } from '../../core/mixins/code-filter';
-// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+import { parseTime } from '@/mixins/code-filter';
+import { getEnergyPage } from '@/api/energy';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -116,27 +116,6 @@ export default {
       },
       date1: undefined,
       date2: undefined,
-      // weekNum: undefined,
-      dataList: [
-        {
-          id:'first',
-        },
-         {
-          id: 'second',
-        },
-         {
-          id: 'third',
-        },
-         {
-          id: 'fourth',
-        },
-         {
-          id: 'fifth',
-        },
-         {
-          id: 'sixth',
-        },
-      ],
 			urlOptions: {
 				// getDataListURL: getGlassPage,
 				// exportURL: exportGlasscExcel
@@ -216,13 +195,14 @@ export default {
           type:'button',
           btnName: '导出',
           name: 'export',
-          color: 'warning',
+          plain: true,
+          color: 'primary',
         },
       ],
       formConfig: [
         {
           type: 'title',
-          label: '成本管理',
+          label: '能源管理',
         },
       ],
       timeList: [
@@ -258,8 +238,9 @@ export default {
         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
         // },
         {
-          prop: 'userName',
+          prop: 'createTime',
           label: '日期',
+          filter: parseTime,
         },
         {
           prop: 'nickName',
@@ -303,9 +284,12 @@ export default {
 	mounted() {
     this.getDict()
     // this.getCurrentYearFirst()
-    // this.getDataList()
+    this.getDataList()
 	},
   methods: {
+    handleChange(e) {
+      console.log(e);
+    },
     buttonClick() {
 
     },
@@ -461,6 +445,9 @@ export default {
 
     },
     async getDataList() {
+      const res = await getEnergyPage(this.listQuery)
+      this.tableData = res.data.list
+      // this.dataProps = res.data.list.map()
     },
     add0(m) {
       return m < 10 ? '0' + m : m

src/views/greenest/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:14:01
+ * @LastEditTime: 2024-05-07 08:40:58
  * @LastEditors: zhp
  * @Description:
 -->
@@ -11,18 +11,18 @@
       <!-- <el-alert title="自定义 close-text" type="warning" close-text="知道了">
       </el-alert> -->
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
-        <el-form-item label="时间维度" prop="reportTime">
-          <el-select clearable v-model="timeSelect" placeholder="请选择">
+        <el-form-item label="时间维度" prop="mode">
+          <el-select clearable v-model="listQuery.mode" placeholder="请选择">
             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 2" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.mode === 3" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
             placeholder="开始时间">
           </el-date-picker>
@@ -31,8 +31,8 @@
             @change="getYear">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="工厂名称" prop="factoryId">
-          <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称">
+        <el-form-item label="工厂名称" prop="factorys">
+          <el-select clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple>
             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -56,8 +56,7 @@
     </div>
     <div class="app-container" style="margin-top: 18px;flex-grow: 1; padding: 16px;">
       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
-        :table-data="tableData">
+      <base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" :table-data="tableData">
       </base-table>
     </div>
     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
@@ -71,8 +70,8 @@
 </template>
 
 <script>
-// import { parseTime } from '../../core/mixins/code-filter';
-// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+import { parseTime } from '@/mixins/code-filter';
+import { getEpPage } from '@/api/greenest/index';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -83,14 +82,18 @@ export default {
 	data() {
     return {
       listQuery: {
-        pageSize: 10,
-        pageNo: 1,
-        factoryId: null,
-        total: 0,
-        type: null,
+        current: 1,
+        size: 10,
+        factorys: [],
+        mode: 2,
+        beginTime: undefined,
+        endTime: undefined,
+        // total: 0,
+        // type: null,
         // reportType: 2,
         reportTime: []
       },
+      dynamicProps: [],
 			urlOptions: {
 				// getDataListURL: getGlassPage,
 				// exportURL: exportGlasscExcel
@@ -103,19 +106,43 @@ export default {
       ],
       timeList: [
         {
-          value: 'month',
+          value: 2,
           label:'月'
         },
         {
-          value: 'year',
+          value: 3,
           label: '年'
         }
       ],
       factoryList: [
         {
-          name: '测试',
-          id:1
-        }
+          id: 0,
+          name: '瑞昌中建材光电材料有限公司'
+        },
+        {
+          id: 1,
+          name: '邯郸中建材光电材料有限公司'
+        },
+        {
+          id: 2,
+          name: '中建材株洲光电材料有限公司'
+        },
+        {
+          id: 3,
+          name: '佳木斯中建材光电材料有限公司'
+        },
+        {
+          id: 4,
+          name: '成都中建材光电材料有限公司'
+        },
+        {
+          id: 5,
+          name: '凯盛光伏材料有限公司'
+        },
+        {
+          id: 6,
+          name: '蚌埠兴科玻璃有限公司'
+        },
       ],
       typeList: [
         {
@@ -131,68 +158,14 @@ export default {
           id: 2,
         },
       ],
-      tableProps: [
-        // {
-        // 	prop: 'createTime',
-        // 	label: '添加时间',
-        // 	fixed: true,
-        // 	width: 180,
-        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
-        // },
-        {
-          prop: 'userName',
-          label: '日期',
-        },
-        {
-          prop: 'nickName',
-          label: '工厂名称',
-        },
-        {
-          prop: 'datas',
-          label: '废水(t)',
-          // subcomponent: row
-        },
-        {
-          prop: 'unit',
-          label: '废气(m³)',
-          // subcomponent: row
-        },
-        {
-          prop: 'remark',
-          label: 'VOC(g/L)',
-          // subcomponent: row
-        },
-        {
-          prop: 'kg',
-          label: '固体废弃物-可回收(kg)',
-          // subcomponent: row
-        }
-      ],
-      timeSelect:'month',
-      startTimeStamp:null, //开始时间
-      endTimeStamp:null, //结束时间
-      date:'凯盛玻璃控股成员企业2024生产数据',
+      tableProps: [],
+      // startTimeStamp:null, //开始时间
+      // endTimeStamp:null, //结束时间
+      // date:'凯盛玻璃控股成员企业2024生产数据',
 			// reportTime: '',
-			startTimeStamp: '',
-			endTimeStamp: '',
-      tableData: [
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas:'111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-          // subcomponent: row
-        }
-      ],
+			// startTimeStamp: '',
+			// endTimeStamp: '',
+      tableData: [],
 			// proLineList: [],
 			// all: {}
 		};
@@ -201,12 +174,26 @@ export default {
     this.getDict()
     // this.getCurrentYearFirst()
     // this.getDataList()
-	},
+  },
+  // computed: {
+  //   tableProps() {
+  //     return [
+  //       {
+  //         prop: 'createTime',
+  //         label: '日期',
+  //         filter: parseTime
+  //       },
+  //       ...this.dynamicProps,
+  //     ];
+  //   },
+  // },
   methods: {
     buttonClick() {
 
     },
     getYear(e) {
+      this.listQuery.beginTime = this.listQuery.reportTime ? new Date(new Date(new Date(this.listQuery.reportTime[0]).setMonth(0, 1)).setHours(0, 0, 0)).getTime() : undefined
+      this.listQuery.endTime = this.listQuery.reportTime ? new Date(new Date(new Date(this.listQuery.reportTime[1]).setMonth(11, 31)).setHours(23,59,59)).getTime() : undefined
       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
         this.$message({
           message: '年份起止时间不能超过十年',
@@ -218,20 +205,22 @@ export default {
     },
     changeTime() {
       if (this.listQuery.reportTime) {
-        this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
-        this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
+        this.listQuery.beginTime = this.listQuery.reportTime ? new Date(this.listQuery.reportTime[0]).getTime() : undefined
+        this.listQuery.endTime = this.listQuery.reportTime ? new Date(this.listQuery.reportTime[1]).getTime() : undefined
+        // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
+        // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
           this.$message({
             message: '时间范围不能超过24个月',
             type: 'warning'
           });
           this.listQuery.reportTime = [];
-          this.createStartDate = '';
-          this.createEndDate = '';
+          // this.createStartDate = '';
+          // this.createEndDate = '';
         }
       } else {
-        this.createStartDate = '';
-        this.createEndDate = '';
+        // this.createStartDate = '';
+        // this.createEndDate = '';
       }
     },
     async getDict() {
@@ -264,61 +253,109 @@ export default {
 
     },
     async getDataList() {
+      // this.tableData = []
+      // this.tabl
+
+      const res = await getEpPage(this.listQuery)
+      let arr =[
+        {
+          prop: 'createTime',
+          label: '日期',
+          // filter: parseTime
+        },
+        {
+          prop: 'factory',
+          label: '工厂名称',
+          filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val]
+        }
+      ]
+      // console.log(dataArr);
+      // for (let i = 0; i < res.data.list.length-1; i++) {
+      //   if (r[i].createTime != r[i + 1].createTime ) {
+      //     this.data.a.push(r[i])
+      //   }
+      // }
+      // console.log(res.data);
+      // this.dynamicProps = []
+      const dateList = []
+      const processList = []
+      const factoryList = []
+
+      res.data.records.forEach(ele => {
+        // 表头
+        dateList.push(ele.environmentalProtectionName)
+        // 列数
+        processList.push(ele.createTime)
+        factoryList.push(ele.factory)
+      })
+      this.dateProps = Array.from(new Set(dateList))
+      // this.processArray = Array.from(new Set(processList))
+      // this.factoryArray = Array.from(new Set(factoryList))
+      // this.factoryArray.forEach(item => {
+      //   const props =
+      //   arr.push(props)
+      // })
+      // res.data.records.forEach(ele => {
+      //   if (this.factoryArray.some(ele.factory) && this.factoryArray.some(ele.createTime)) {
+      //     arr.push({
+
+      //     })
+      //   }
+      //   // 表头
+      //   // dateList.push(ele.environmentalProtectionName)
+      //   // 列数
+      //   // processList.push(ele.createTime)
+      //   // factoryList.push(ele.factory)
+      // })
+      this.dateProps.forEach(item => {
+        const props = {
+          'prop': item,
+          'label': item
+        }
+        arr.push(props)
+      })
+      this.tableProps = arr
+      this.tableData = this.mergeGrade(res.data.records)
+      console.log(this.tableData)
+      // // 构造表格数据
+      // this.total = this.processArray.length
+      // this.processArray.forEach(process => {
+      //   const listData = {
+      //     'createTime': process,
+      //     'factory':null
+      //   }
+      //   res.data.records.forEach((r,index) => {
+      //     if (process === r.createTime) {
+      //       // const temp = Object.keys(r).filter(keys => keys !== 'reportDate' && keys !== 'factory' && keys !== 'environmentalProtectionName' && keys !== 'id' && keys !== 'createTime')
+      //       // const item = Object.keys(r).filter(keys => keys !== 'reportDate' && keys !== 'environmentalProtectionValue' && keys !== 'environmentalProtectionName' && keys !== 'id' && keys !== 'createTime')
+      //       // console.log(r[item[0]]);
+      //       listData[r.environmentalProtectionName] = r.environmentalProtectionValue
+      //       listData.factory = r.factory
+      //     }
+      //   })
+      //   console.log(listData);
+      //   this.tableData.push(listData)
+      // })
     },
-    add0(m) {
-      return m < 10 ? '0' + m : m
+
+   mergeGrade(grade) {
+        if (!Array.isArray(grade)) return []
+        const newGrade = []
+        grade.forEach(item => {
+          const index = newGrade.findIndex(subItem => subItem.factory === item.factory && subItem.createTime === item.createTime)
+            if (index > -1) {
+              newGrade[index][item.environmentalProtectionName] = item.environmentalProtectionValue
+            } else {
+                newGrade.push({
+                  factory: item.factory,
+                  createTime: item.groupTime,
+                  [item.environmentalProtectionName]: item.environmentalProtectionValue
+                    // grades: { [item.class]: item.grade }
+                })
+            }
+        })
+        return newGrade
     },
-    format(shijianchuo) {
-      //shijianchuo是整数，否则要parseInt转换
-      var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
-      // console.log(time)
-      // var y = time.getFullYear();
-      // var m = time.getMonth() + 1;
-      // var d = time.getDate();
-      // var h = time.getHours();
-      // var mm = time.getMinutes();
-      // var s = time.getSeconds();
-      return time
-    },
-		// changeTime(val) {
-    //   if (val) {
-    //     // console.log(val)
-    //     // console.log(val.setHours(7, 0, 0))
-    //     // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
-    //     // let time = this.format(val.setHours(7, 0, 0))
-    //     this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //     this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-    //     // console.log(this.listQuery.reportTime);
-    //     this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //     this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-    //     console.log(this.listQuery.reportTime);
-		// 	} else {
-		// 			this.listQuery.reportTime = []
-		// 	}
-		// },
-		//时间戳转为yy-mm-dd hh:mm:ss
-		timeFun(unixtimestamp) {
-				var unixtimestamp = new Date(unixtimestamp);
-				var year = 1900 + unixtimestamp.getYear();
-				var month = "0" + (unixtimestamp.getMonth() + 1);
-				var date = "0" + unixtimestamp.getDate();
-				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
-		},
-		buttonClick(val) {
-			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
-			switch (val.btnName) {
-				case 'search':
-					this.listQuery.pageNo = 1;
-					this.listQuery.pageSize = 10;
-					this.getDataList();
-					break;
-				case 'export':
-					this.handleExport();
-					break;
-				default:
-					console.log(val);
-			}
-		},
 		/** 导出按钮操作 */
     handleExport() {
       // 处理查询参数

src/views/index.vue

@@ -210,14 +210,6 @@ export default {
   },
 };
 </script>
-
-<style>
-.hideSidebar.mobile .dashboard-factory-all {
-  left: 0 !important;
-  width: 100vw !important;
-}
-</style>
-
 <style lang="scss" scoped>
 .dashboard-factory-all {
   background: #151516;

src/views/login.vue

@@ -9,7 +9,7 @@
           class="welcome"
           style="
             position: absolute;
-            top: 15%;
+            top: 12%;
             left: 20%;
             user-select: none;
             display: flex;
@@ -51,6 +51,11 @@
             向世界先进水平挑战，为人类社会文明做贡献
           </p>
         </div>
+        <img
+          src="../assets/images/login.png"
+          style="position: absolute; top: 30%; left: 15%; width: 40vw"
+          alt=""
+        />
       </div>
       <!-- 表单 -->
       <div class="field">
@@ -64,7 +69,7 @@
             style=""
             class="cnbm_logo"
           />
-          <h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3>
+          <h3 class="title" style="margin: 16px 0">发电玻璃智能管控平台</h3>
         </h2>
         <h2 class="pc-title" style="">
           <img
@@ -75,7 +80,9 @@
             style=""
             class="cnbm_logo"
           />
-          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px;">集团工业互联网平台</span>
+          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px"
+            >发电玻璃智能管控平台</span
+          >
         </h2>
 
         <!-- 表单 -->
@@ -164,7 +171,7 @@
         </div>
         <!-- footer -->
         <div class="footer">
-          Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
+          版权所有：中建材智能自动化研究院有限公司&nbsp;&nbsp;&nbsp;版本：1.0
         </div>
       </div>
     </div>

src/views/produce/data/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-04-17 15:37:39
+ * @LastEditTime: 2024-05-07 09:31:54
  * @LastEditors: zhp
  * @Description:
 -->
@@ -156,10 +156,9 @@
 
 <script>
 // import basicAdd from './basic-add';
-// import {
-//   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList,
-//   getTeamList, getDetList, getLineList
-// } from "@/api/base/qualityScrapLog";
+import {
+  getProduceDataDetail
+} from "@/api/produceData";
 // import { getList, } from "@/api/base/qualityScrapType";
 import SmallTitle from './SmallTitle';
 export default {
@@ -223,8 +222,11 @@ export default {
     // this.getCurrentTime()
   },
   methods: {
-    init() {
+    init(id) {
       this.visible = true
+      if (id) {
+        getProduceDataDetail()
+      }
     },
     // getCurrentTime() {
     //   // new Date().Format("yyyy-MM-dd HH:mm:ss")

src/views/produce/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:13:47
+ * @LastEditTime: 2024-05-07 09:18:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,17 +10,17 @@
     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
         <el-form-item label="时间维度" prop="reportTime">
-          <el-select clearable v-model="timeSelect" placeholder="请选择">
+          <el-select clearable v-model="listQuery.date" placeholder="请选择">
             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 0" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
             start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
@@ -32,12 +32,12 @@
             {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
           </span>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
             placeholder="开始时间">
           </el-date-picker>
@@ -46,8 +46,8 @@
             @change="getYear">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="工厂名称" prop="factoryId">
-          <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称">
+        <el-form-item label="工厂名称" prop="factorys">
+          <el-select clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -76,7 +76,6 @@
       <!-- <el-col :span="12">
             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
           </el-col> -->
-      </el-row>
     </div>
     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
@@ -99,7 +98,7 @@
 
 <script>
 // import { parseTime } from '../../core/mixins/code-filter';
-// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+import { getProduceDataPage } from '@/api/produceData';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -115,12 +114,15 @@ export default {
 	data() {
     return {
       listQuery: {
-        pageSize: 10,
-        pageNo: 1,
-        factoryId: null,
+        size: 10,
+        current: 1,
+        factorys: [],
         total: 0,
-        type: null,
+        date: 1,
+        type:undefined,
         // reportType: 2,
+        beginTime: undefined,
+        endTime:undefined,
         reportTime: []
       },
       detailOrUpdateVisible:false,
@@ -256,24 +258,24 @@ export default {
       formConfig: [
         {
           type: 'title',
-          label: '成本管理',
+          label: '生产数据管理',
         },
       ],
       timeList: [
         {
-          value: 'day',
+          value: 0,
           label: '日'
         },
         {
-          value: 'week',
+          value: 1,
           label: '周'
         },
         {
-          value: 'month',
+          value: 2,
           label:'月'
         },
         {
-          value: 'year',
+          value: 3,
           label: '年'
         }
       ],
@@ -284,67 +286,38 @@ export default {
         }
       ],
       tableProps: [
-        // {
-        // 	prop: 'createTime',
-        // 	label: '添加时间',
-        // 	fixed: true,
-        // 	width: 180,
-        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
-        // },
         {
-          prop: 'userName',
+          prop: 'createTime',
           label: '日期',
         },
         {
-          prop: 'nickName',
+          prop: 'factory',
           label: '工厂名称',
+          filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val]
         },
         {
-          prop: 'type',
+          prop: 'glassType',
           label: '玻璃类型',
+          filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val]
         },
         {
-          prop: 'inNum',
+          prop: 'inputNumber',
           label: '投入数量',
         },
         {
-          prop: 'putNum',
+          prop: 'outputNumber',
           label: '产出数量',
         },
         {
-          prop: 'goodNum',
+          prop: 'goodNumber',
           label: '良品数量',
         },
         {
-          prop: 'goodYelid',
+          prop: 'yieldRate',
           label: '良品率%',
         },
       ],
-      timeSelect:'day',
-      startTimeStamp:null, //开始时间
-      endTimeStamp:null, //结束时间
-      // date:'凯盛玻璃控股成员企业2024生产数据',
-			// reportTime: '',
-			startTimeStamp: '',
-			endTimeStamp: '',
-      tableData: [
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas:'111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-          // subcomponent: row
-        }
-      ],
+      tableData: [],
 			// proLineList: [],
 			// all: {}
 		};
@@ -522,6 +495,9 @@ export default {
 
     },
     async getDataList() {
+      const res = await getProduceDataPage(this.listQuery)
+      console.log(res)
+      this.tableData = res.data.records
     },
     add0(m) {
       return m < 10 ? '0' + m : m

src/views/produce/target/add-or-updata.vue

@@ -1,154 +1,202 @@
 <!--
  * @Author: zhp
- * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-04-17 15:37:39
+ * @Date: 2024-04-17 16:31:51
+ * @LastEditTime: 2024-04-17 17:01:14
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <el-drawer class="drawer" :visible.sync="visible" size="50%">
     <small-title slot="title" :no-padding="true">
-      {{ '碲化镉工厂生产数据详情' }}
+      {{ '新增' }}
     </small-title>
     <div class="detailBox">
-      <el-row :gutter="24">
-        <el-col :span="8">
-          <p class="title">工厂名称</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="8">
-          <p class="title">时间维度</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="8">
-          <p class="title">时间</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <el-divider></el-divider>
-      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
-        {{ '芯片' }}
-      </small-title>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">芯片产量</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片良率</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片良率</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片总功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">FTO投入量</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">CSS稼动率</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片段OEE</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片平均功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">芯片人均产量</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-      </el-row>
-      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
-        {{ '标准组件' }}
-      </small-title>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">封装BOM</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">封装线OEE</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">标准组件良率</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">标准组件产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">标准组件总功率</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">封装产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">标准组件人均产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">标准组件人均产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
-        {{ 'BIPV产品' }}
-      </small-title>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">产品产量</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">人均产量</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片使用量</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">芯片使用量</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
-      <el-row :gutter="24">
-        <el-col :span="6">
-          <p class="title">内部材料成本</p>
-          <p class="text">{{ }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">内部材料成本</p>
-          <p class="text">{{ dataForm.code }}</p>
-        </el-col>
-        <el-col :span="6">
-          <p class="title">内部材料成本</p>
-          <p class="text">{{ dataForm.productName }}</p>
-        </el-col>
-      </el-row>
+      <el-form ref="form" :model="dataForm" label-width="80px" label-position="top">
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="8">
+            <el-form-item label="工厂名称" prop="factoryId">
+              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="工厂名称" prop="factoryId">
+              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="工厂名称" prop="factoryId">
+              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+          {{ '芯片' }}
+        </small-title>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="芯片产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片产量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片良率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片良率"></el-input>
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片BOM" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片BOM"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片总功率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片总功率"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="FTO投入量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入FTO投入量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="CSS稼动率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入CSS稼动率"></el-input>
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片段OEE" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片段OEE"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片平均功率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片平均功率"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="芯片人均产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片人均产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+          {{ '标准组件' }}
+        </small-title>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="封装BOM" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入封装BOM"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="封装线OEE" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入封装线OEE"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件良率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件良率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="标准组件总功率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件总功率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件人均产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件人均产量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件平均功率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件平均功率"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider></el-divider>
+
+        <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+          {{ 'BIPV产品' }}
+        </small-title>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="产品产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入产品产量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="人均产量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入人均产量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片使用量" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片使用量"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="芯片利用率" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片利用率"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" style="padding: 0 32px;">
+          <el-col :span="6">
+            <el-form-item label="内部材料成本" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入内部材料成本"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="OEM及委外材料成本" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入OEM及委外材料成本"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="综合材料成本" prop="factoryId">
+              <el-input v-model="dataForm.factoryId" placeholder="请输入综合材料成本"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="footer">
+      <el-button @click="cancelForm">取 消</el-button>
+      <el-button type="primary" @click="handleClose()">确 定</el-button>
     </div>
   </el-drawer>
 
@@ -191,6 +239,7 @@ export default {
           name: '自动',
         }
       ],
+      factoryList:[],
       sectionList: [],
       visible: false,
       dataForm: {
@@ -325,6 +374,22 @@ export default {
 };
 </script>
 <style scoped>
+.footer {
+  position: absolute;
+  bottom: 1%;
+  right: 2%;
+}
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+.el-divider--horizontal{
+  margin: 0;
+}
   .drawer >>> .el-drawer {
   border-radius: 8px 0 0 8px;
 }

src/views/produce/target/detail-or-updata.vue

@@ -0,0 +1,365 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-11-06 15:15:30
+ * @LastEditTime: 2024-04-17 16:40:01
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <el-drawer class="drawer" :visible.sync="visible" size="50%">
+    <small-title slot="title" :no-padding="true">
+      {{ '碲化镉工厂生产数据详情' }}
+    </small-title>
+    <div class="detailBox">
+      <el-row :gutter="24">
+        <el-col :span="8">
+          <p class="title">工厂名称</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="8">
+          <p class="title">时间维度</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="8">
+          <p class="title">时间</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+        {{ '芯片' }}
+      </small-title>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">芯片产量</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片良率</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片良率</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片总功率</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">FTO投入量</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">CSS稼动率</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片段OEE</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片平均功率</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">芯片人均产量</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片产能利用率</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+      </el-row>
+      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+        {{ '标准组件' }}
+      </small-title>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">封装BOM</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">封装线OEE</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件良率</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件产量</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">标准组件总功率</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">封装产能利用率</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件人均产量</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件人均产量</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
+        {{ 'BIPV产品' }}
+      </small-title>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">产品产量</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">人均产量</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片使用量</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">芯片使用量</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="6">
+          <p class="title">内部材料成本</p>
+          <p class="text">{{ }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">内部材料成本</p>
+          <p class="text">{{ dataForm.code }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">内部材料成本</p>
+          <p class="text">{{ dataForm.productName }}</p>
+        </el-col>
+      </el-row>
+    </div>
+  </el-drawer>
+
+</template>
+
+<script>
+// import basicAdd from './basic-add';
+// import {
+//   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList,
+//   getTeamList, getDetList, getLineList
+// } from "@/api/base/qualityScrapLog";
+// import { getList, } from "@/api/base/qualityScrapType";
+import SmallTitle from './SmallTitle';
+export default {
+  components: {
+    SmallTitle,
+  },
+  // mixins: [basicAdd],
+  data() {
+    return {
+      urlOptions: {
+        isGetCode: false,
+        // codeURL: getCode,
+        // createURL: createQualityScrapLog,
+        // updateURL: updateQualityScrapLog,
+        // infoURL: getQualityScrapLog,
+      },
+      lineList: [],
+      typeList: [],
+      workOrderList: [],
+      detList: [],
+      teamList: [],
+      sourceList: [
+        {
+          id: 1,
+          name: '手动',
+        },
+        {
+          id: 2,
+          name: '自动',
+        }
+      ],
+      sectionList: [],
+      visible: false,
+      dataForm: {
+        id: undefined,
+        logTime: undefined,
+        source: 1,
+        detId: undefined,
+        workOrderId: null,
+        teamId: undefined,
+        num: undefined,
+        lineId: undefined,
+        description: undefined,
+        // description: undefined,
+        remark: undefined,
+      },
+      // materialList: [],
+      dataRule: {
+        // materialId: [{ required: true, message: "", trigger: "blur" }],
+        workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
+        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
+        detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
+
+        logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
+      }
+    };
+  },
+  mounted() {
+    this.getDict()
+    console.log('我看看', this.dataForm)
+    // this.getCurrentTime()
+  },
+  methods: {
+    init() {
+      this.visible = true
+    },
+    // getCurrentTime() {
+    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
+    //   this.dataForm.logTime = new Date()
+    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
+    //   console.log(this.dataForm.logTime);
+    // },
+    async getDict() {
+    //   // 物料列表
+    //   const res = await getList()
+    //   this.typeList = res.data
+    //   getWorkOrderList().then((res) => {
+    //     console.log(res);
+    //     // console.log(response);
+    //     this.workOrderList = res.data.map((item) => {
+    //       return {
+    //         name: item.name,
+    //         id: item.id
+    //       }
+    //     })
+    //     // console.log(this.formConfig[0].selectOptions);
+    //     // this.listQuery.total = response.data.total;
+    //   })
+    //   getLineList().then((res) => {
+    //     console.log(res);
+    //     // console.log(response);
+    //     this.lineList = res.data.map((item) => {
+    //       return {
+    //         name: item.name,
+    //         id: item.id
+    //       }
+    //     })
+    //     // console.log(this.formConfig[0].selectOptions);
+    //     // this.listQuery.total = response.data.total;
+    //   })
+    //   getDetList().then((res) => {
+    //     console.log(res);
+    //     // console.log(response);
+    //     this.detList = res.data.map((item) => {
+    //       return {
+    //         name: item.content,
+    //         id: item.id
+    //       }
+    //     })
+    //     // console.log(this.formConfig[0].selectOptions);
+    //     // this.listQuery.total = response.data.total;
+    //   })
+    //   getTeamList().then((res) => {
+    //     console.log(res);
+    //     // console.log(response);
+    //     this.teamList = res.data.map((item) => {
+    //       return {
+    //         name: item.name,
+    //         id: item.id
+    //       }
+    //     })
+    //     // console.log(this.formConfig[0].selectOptions);
+    //     // this.listQuery.total = response.data.total;
+    //   })
+    // },
+    // async getWorksectionById(lineId) {
+    //   if (lineId) {
+    //     const { code, data } = await this.$axios({
+    //       url: '/base/core-workshop-section/listByParentId',
+    //       method: 'get',
+    //       params: {
+    //         id: lineId,
+    //       },
+    //     });
+    //     if (code == 0) {
+    //       console.log(data)
+    //       this.sectionList = data.map((item) => {
+    //         return {
+    //           name: item.name,
+    //           id: item.id,
+    //         };
+    //       });
+    //     }
+    //   } else {
+    //     this.$axios({
+    //       url: '/base/core-workshop-section/listAll',
+    //       method: 'get',
+    //       // params: {
+    //       //   id: lineId,
+    //       // },
+    //     }).then((res) => {
+    //       // console.log(data)
+    //       this.sectionList = res.data.map((item) => {
+    //         return {
+    //           name: item.name,
+    //           id: item.id,
+    //         };
+    //       });
+    //     })
+    //   }
+    },
+  },
+};
+</script>
+<style scoped>
+  .drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox p {
+  margin: 0;
+  padding: 0 32px;
+}
+.detailBox .title {
+  /* width: 56px; */
+  /* height: 14px; */
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+  padding-bottom: 20px;
+}
+
+</style>

src/views/produce/target/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:12:20
+ * @LastEditTime: 2024-04-17 16:37:35
  * @LastEditors: zhp
  * @Description:
 -->
@@ -77,7 +77,8 @@
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
-      <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
+      <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="successSubmit" />
 
       <!-- <el-row :gutter="24"> -->
       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> -->
@@ -86,7 +87,7 @@
       <!-- <el-col :span="12">
             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
           </el-col> -->
-      </el-row>
+
     </div>
 
     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
@@ -107,12 +108,14 @@ import lineChart from './lineChart';
 import moment from 'moment'
 import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
-import AddOrUpdate from './add-or-updata';
+import detailOrUpdate from './detail-or-updata';
+import addOrUpdate from './add-or-updata';
+
 
 // import FileSaver from 'file-saver'
 // import * as XLSX from 'xlsx'
 export default {
-  components: { lineChart, ButtonNav, AddOrUpdate },
+  components: { lineChart, ButtonNav, detailOrUpdate,addOrUpdate },
   mixins: [basicPage],
 	data() {
     return {
@@ -125,18 +128,23 @@ export default {
         // reportType: 2,
         reportTime: []
       },
-      detailOrUpdateVisible:false,
+      detailOrUpdateVisible: false,
+      addOrUpdateVisible:false,
       date1: undefined,
       date2: undefined,
       tableBtn: [
-          {
+        {
             type: 'detail',
             btnName: '详情',
         },
-        // {
-        //     type: 'delete',
-        //     btnName: '删除',
-        //   },
+        {
+          type: 'edit',
+          btnName: '修改',
+        },
+        {
+            type: 'delete',
+            btnName: '删除',
+          },
       ].filter((v) => v),
       typeList: [
         {
@@ -297,33 +305,58 @@ export default {
         // 	width: 180,
         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
         // },
-        {
-          prop: 'userName',
-          label: '日期',
-        },
+
         {
           prop: 'nickName',
           label: '工厂名称',
         },
+        {
+          prop: 'userName',
+          label: '目标时间',
+        },
         {
           prop: 'type',
-          label: '玻璃类型',
+          label: '提交时间',
         },
         {
           prop: 'inNum',
-          label: '投入数量',
+          label: '钼电极投入量(片)',
         },
         {
           prop: 'putNum',
-          label: '产出数量',
+          label: '芯片产量(片)',
         },
         {
           prop: 'goodNum',
-          label: '良品数量',
+          label: '芯片平均功率(W)',
         },
         {
           prop: 'goodYelid',
-          label: '良品率%',
+          label: '芯片良率(%)',
+        },
+        {
+          prop: 'goodYelid',
+          label: '芯片总功率(KW)',
+        },
+        {
+          prop: 'goodYelid',
+          label: 'PID6稼动率(%)',
+        },
+        {
+          prop: 'goodYelid',
+          label: '芯片段OEE(%)',
+        },
+        {
+          prop: 'goodYelid',
+          label: '芯片产能利用率(%)',
+        },
+        {
+          prop: 'goodYelid',
+          label: '芯片人均产量（片/人）',
+        },
+        {
+          prop: 'goodYelid',
+          label: '芯片BOM',
         },
       ],
       timeSelect:'month',
@@ -366,6 +399,19 @@ export default {
     // this.getDataList()
 	},
   methods: {
+    handleClick(val) {
+      if (val.type === "edit") {
+        this.addOrUpdateVisible = true;
+        // this.addOrEditTitle = "编辑";
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(val.data.id);
+        });
+      } else if (val.type === "delete") {
+        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
+      } else {
+        this.otherMethods(val)
+      }
+    },
     otherMethods(val) {
       this.detailOrUpdateVisible = true;
       this.addOrEditTitle = "详情";

src/views/system/components/statusBtn.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.status === 1 ? "停用" : "启用";
+    },
+  },
+};
+</script>
+<style scoped>
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.green {
+  background: #10dc76;
+}
+.red {
+  background: #ff5656;
+}
+</style>

src/views/system/loginlog/index.vue

@@ -2,63 +2,138 @@
   <div class="app-container">
     <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="登录地址" prop="userIp">
-        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.userIp"
+          placeholder="请输入登录地址"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="用户名称" prop="username">
-        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px;"
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.username"
+          placeholder="请输入用户名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="结果" clearable style="width: 240px">
-          <el-option :key="true" label="成功" :value="true"/>
-          <el-option :key="false" label="失败" :value="false"/>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="结果"
+          clearable
+          style="width: 240px"
+        >
+          <el-option :key="true" label="成功" :value="true" />
+          <el-option :key="false" label="失败" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item label="登录时间" prop="createTime">
-        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+        <el-date-picker
+          v-model="queryParams.createTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:login-log:export']">导出</el-button>
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:login-log:export']"
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="list">
       <el-table-column label="访问编号" align="center" prop="id" />
-      <el-table-column label="日志类型" align="center" prop="logType" width="120">
+      <el-table-column
+        label="日志类型"
+        align="center"
+        prop="logType"
+        width="120"
+      >
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
+            :value="scope.row.logType"
+          />
         </template>
       </el-table-column>
       <el-table-column label="用户名称" align="center" prop="username" />
-      <el-table-column label="登录地址" align="center" prop="userIp" width="130" :show-overflow-tooltip="true" />
-      <el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
+      <el-table-column
+        label="登录地址"
+        align="center"
+        prop="userIp"
+        width="130"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="userAgent"
+        align="center"
+        prop="userAgent"
+        width="400"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column label="结果" align="center" prop="status">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
+            :value="scope.row.result"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
+      <el-table-column
+        label="登录日期"
+        align="center"
+        prop="loginTime"
+        width="180"
+      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
@@ -86,8 +161,8 @@ export default {
         userIp: undefined,
         username: undefined,
         status: undefined,
-        createTime: []
-      }
+        createTime: [],
+      },
     };
   },
   created() {
@@ -97,12 +172,11 @@ export default {
     /** 查询登录日志列表 */
     getList() {
       this.loading = true;
-      list(this.queryParams).then(response => {
-          this.list = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        }
-      );
+      list(this.queryParams).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -116,19 +190,31 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
-          let params = {...this.queryParams};
+          let params = { ...this.queryParams };
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportLoginLog(params);
-        }).then(response => {
-          this.$download.excel(response, '登录日志.xls');
+        })
+        .then((response) => {
+          this.$download.excel(response, "登录日志.xls");
           this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
-
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>

src/views/system/menu/index.vue

@@ -1,59 +1,146 @@
 <template>
   <div class="app-container">
-    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <doc-alert
+      title="功能权限"
+      url="https://doc.iocoder.cn/resource-permission"
+    />
     <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="菜单名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入菜单名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="菜单状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in statusDictDatas"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:menu:create']">新增</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:menu:create']"
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+          >展开/折叠</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
-              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column
+        prop="name"
+        label="菜单名称"
+        :show-overflow-tooltip="true"
+        width="250"
+      ></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
         <template v-slot="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
       <el-table-column prop="sort" label="排序" width="60"></el-table-column>
-      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
-      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
+      <el-table-column
+        prop="permission"
+        label="权限标识"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="component"
+        label="组件路径"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="componentName"
+        label="组件名称"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column prop="status" label="状态" width="80">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:menu:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
-                     v-hasPermi="['system:menu:create']">新增</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:menu:delete']">删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:update']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:create']"
+            >新增</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:menu:delete']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -64,26 +151,55 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
-              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
-                          placeholder="选择上级菜单"/>
+              <treeselect
+                v-model="form.parentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择上级菜单"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="菜单类型" prop="type">
               <el-radio-group v-model="form.type">
-                <el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-                  {{dict.label}}</el-radio>
+                <el-radio
+                  v-for="dict in menuTypeDictDatas"
+                  :key="parseInt(dict.value)"
+                  :label="parseInt(dict.value)"
+                >
+                  {{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item v-if="form.type !== 3" label="菜单图标">
-              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
                 <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
-                            style="height: 32px;width: 16px;"/>
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                <el-input
+                  slot="reference"
+                  v-model="form.icon"
+                  placeholder="点击选择图标"
+                  readonly
+                >
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    class="el-input__icon"
+                    style="height: 32px; width: 16px"
+                  />
+                  <i
+                    v-else
+                    slot="prefix"
+                    class="el-icon-search el-input__icon"
+                  />
                 </el-input>
               </el-popover>
             </el-form-item>
@@ -95,59 +211,89 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="sort">
-              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+              <el-input-number
+                v-model="form.sort"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
               <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
-                <i class="el-icon-question" />
+                <el-tooltip
+                  content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+                  placement="top"
+                >
+                  <i class="el-icon-question" />
                 </el-tooltip>
                 路由地址
               </span>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
           </el-col>
-					<el-col :span="12">
-						<el-form-item v-if="form.type !== 1" label="权限标识">
+          <el-col :span="12">
+            <el-form-item v-if="form.type !== 1" label="权限标识">
               <span slot="label">
-                <el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
+                <el-tooltip
+                  content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 权限字符
               </span>
-							<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
-						</el-form-item>
-					</el-col>
-          <el-col :span="12" v-if="form.type === 2">
-            <el-form-item label="组件路径" prop="component">
-              <el-input v-model="form.component" placeholder="例如说：system/user/index" />
+              <el-input
+                v-model="form.permission"
+                placeholder="请权限标识"
+                maxlength="50"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.type === 2">
+            <el-form-item label="组件路径" prop="component">
+              <el-input
+                v-model="form.component"
+                placeholder="例如说：system/user/index"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.type === 2">
+            <el-form-item label="组件名称" prop="componentName">
+              <el-input
+                v-model="form.componentName"
+                placeholder="例如说：SystemUser"
+              />
             </el-form-item>
           </el-col>
-					<el-col :span="12" v-if="form.type === 2">
-						<el-form-item label="组件名称" prop="componentName">
-							<el-input v-model="form.componentName" placeholder="例如说：SystemUser" />
-						</el-form-item>
-					</el-col>
           <el-col :span="12">
             <el-form-item label="菜单状态" prop="status">
               <span slot="label">
-                <el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
+                <el-tooltip
+                  content="选择停用时，路由将不会出现在侧边栏，也不能被访问"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 菜单状态
               </span>
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
-                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+                <el-radio
+                  v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="parseInt(dict.value)"
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="显示状态">
               <span slot="label">
-                <el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                <el-tooltip
+                  content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 是否显示
@@ -161,10 +307,13 @@
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="总是显示">
               <span slot="label">
-                <el-tooltip content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单" placement="top">
+                <el-tooltip
+                  content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                 总是显示
+                总是显示
               </span>
               <el-radio-group v-model="form.alwaysShow">
                 <el-radio :key="true" :label="true">总是</el-radio>
@@ -172,20 +321,23 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-					<el-col :span="12">
-						<el-form-item v-if="form.type === 2" label="是否缓存">
+          <el-col :span="12">
+            <el-form-item v-if="form.type === 2" label="是否缓存">
               <span slot="label">
-                <el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段" placement="top">
+                <el-tooltip
+                  content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
-                 是否缓存
+                是否缓存
               </span>
-							<el-radio-group v-model="form.keepAlive">
-								<el-radio :key="true" :label="true">缓存</el-radio>
-								<el-radio :key="false" :label="false">不缓存</el-radio>
-							</el-radio-group>
-						</el-form-item>
-					</el-col>
+              <el-radio-group v-model="form.keepAlive">
+                <el-radio :key="true" :label="true">缓存</el-radio>
+                <el-radio :key="false" :label="false">不缓存</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -197,14 +349,20 @@
 </template>
 
 <script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import {
+  listMenu,
+  getMenu,
+  delMenu,
+  addMenu,
+  updateMenu,
+} from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 
-import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-import {isExternal} from "@/utils/validate";
+import { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
+import { getDictDatas, DICT_TYPE } from "@/utils/dict";
+import { isExternal } from "@/utils/validate";
 
 export default {
   name: "SystemMenu",
@@ -230,24 +388,22 @@ export default {
       // 查询参数
       queryParams: {
         name: undefined,
-        visible: undefined
+        visible: undefined,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+          { required: true, message: "菜单名称不能为空", trigger: "blur" },
         ],
         sort: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
         ],
         path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
+          { required: true, message: "路由地址不能为空", trigger: "blur" },
         ],
-        status: [
-          { required: true, message: "状态不能为空", trigger: "blur" }
-        ]
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
       },
 
       // 枚举
@@ -255,7 +411,7 @@ export default {
       CommonStatusEnum: CommonStatusEnum,
       // 数据字典
       menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
     };
   },
   created() {
@@ -269,7 +425,7 @@ export default {
     /** 查询菜单列表 */
     getList() {
       this.loading = true;
-      listMenu(this.queryParams).then(response => {
+      listMenu(this.queryParams).then((response) => {
         this.menuList = this.handleTree(response.data, "id");
         this.loading = false;
       });
@@ -282,14 +438,14 @@ export default {
       return {
         id: node.id,
         label: node.name,
-        children: node.children
+        children: node.children,
       };
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then(response => {
+      listMenu().then((response) => {
         this.menuOptions = [];
-        const menu = { id: 0, name: '主类目', children: [] };
+        const menu = { id: 0, name: "主类目", children: [] };
         menu.children = this.handleTree(response.data, "id");
         this.menuOptions.push(menu);
       });
@@ -348,42 +504,44 @@ export default {
     handleUpdate(row) {
       this.reset();
       this.getTreeselect();
-      getMenu(row.id).then(response => {
+      getMenu(row.id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改菜单";
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           // 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
-          if (this.form.type === SystemMenuTypeEnum.DIR
-            || this.form.type === SystemMenuTypeEnum.MENU) {
+          if (
+            this.form.type === SystemMenuTypeEnum.DIR ||
+            this.form.type === SystemMenuTypeEnum.MENU
+          ) {
             // 如果是外链，则不进行校验
-            const path = this.form.path
+            const path = this.form.path;
             if (!isExternal(path)) {
               // 父权限为根节点，path 必须以 / 开头
-              if (this.form.parentId === 0 && path.charAt(0) !== '/') {
-                this.$modal.msgSuccess('前端必须以 / 开头')
-                return
-              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
-                this.$modal.msgSuccess('前端不能以 / 开头')
-                return
+              if (this.form.parentId === 0 && path.charAt(0) !== "/") {
+                this.$modal.msgSuccess("前端必须以 / 开头");
+                return;
+              } else if (this.form.parentId !== 0 && path.charAt(0) === "/") {
+                this.$modal.msgSuccess("前端不能以 / 开头");
+                return;
               }
             }
           }
 
           // 提交
           if (this.form.id !== undefined) {
-            updateMenu(this.form).then(response => {
+            updateMenu(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addMenu(this.form).then(response => {
+            addMenu(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -394,13 +552,26 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.name + '"的数据项?')
+        .then(function () {
           return delMenu(row.id);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
-  }
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>

src/views/system/operatelog/index.vue

@@ -1,84 +1,184 @@
 <template>
   <div class="app-container">
-    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    <!-- <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" /> -->
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="系统模块" prop="module">
-        <el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.module"
+          placeholder="请输入系统模块"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="操作人员" prop="userNickname">
-        <el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.userNickname"
+          placeholder="请输入操作人员"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
-          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
-                     :label="dict.label" :value="parseInt(dict.value)"/>
+        <el-select
+          v-model="queryParams.type"
+          placeholder="操作类型"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
-          <el-option :key="true" label="成功" :value="true"/>
-          <el-option :key="false" label="失败" :value="false"/>
+        <el-select
+          v-model="queryParams.success"
+          placeholder="操作状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option :key="true" label="成功" :value="true" />
+          <el-option :key="false" label="失败" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item label="操作时间" prop="startTime">
-        <el-date-picker v-model="queryParams.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+        <el-date-picker
+          v-model="queryParams.startTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
 
-    <el-row :gutter="10" class="mb8">
+    <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:operate-log:export']">导出</el-button>
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:operate-log:export']"
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row> -->
 
-    <el-table v-loading="loading" :data="list">
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="230"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <!-- <el-table v-loading="loading" :data="list">
       <el-table-column label="日志编号" align="center" prop="id" />
       <el-table-column label="操作模块" align="center" prop="module" />
       <el-table-column label="操作名" align="center" prop="name" width="180" />
       <el-table-column label="操作类型" align="center" prop="type">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
+            :value="scope.row.type"
+          />
         </template>
       </el-table-column>
       <el-table-column label="操作人" align="center" prop="userNickname" />
       <el-table-column label="操作结果" align="center" prop="status">
         <template v-slot="scope">
-          <span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
+          <span>{{ scope.row.resultCode === 0 ? "成功" : "失败" }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作日期" align="center" prop="startTime" width="180">
+      <el-table-column
+        label="操作日期"
+        align="center"
+        prop="startTime"
+        width="180"
+      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.startTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="执行时长" align="center" prop="startTime">
         <template v-slot="scope">
-          <span>{{ scope.row.duration }}  ms</span>
+          <span>{{ scope.row.duration }} ms</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
-                     v-hasPermi="['system:operate-log:query']">详细</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row, scope.index)"
+            v-hasPermi="['system:operate-log:query']"
+            >详细</el-button
+          >
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList" />
+    <pagination
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
 
     <!-- 操作日志详细 -->
-    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog
+      title="访问日志详细"
+      :visible.sync="open"
+      width="700px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="24">
@@ -88,24 +188,35 @@
             <el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
+            <el-form-item label="用户信息："
+              >{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} |
+              {{ form.userAgent }}
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="操作信息：">
               {{ form.module }} | {{ form.name }}
-              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
-              <br /> {{ form.content }}
-              <br /> {{ form.exts }}
+              <dict-tag
+                :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
+                :value="form.type"
+              />
+              <br />
+              {{ form.content }} <br />
+              {{ form.exts }}
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
+            <el-form-item label="请求信息："
+              >{{ form.requestMethod }} | {{ form.requestUrl }}
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
+            <el-form-item label="方法参数：">{{
+              form.javaMethodArgs
+            }}</el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="开始时间：">
@@ -114,8 +225,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="操作结果：">
-              <div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
-              <div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
+              <div v-if="form.resultCode === 0">
+                正常 | {{ form.resultData }}
+              </div>
+              <div v-else-if="form.resultCode > 0">
+                失败 | {{ form.resultCode }} || {{ form.resultMsg }}
+              </div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -129,11 +244,100 @@
 
 <script>
 import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+const tableProps = [
+  {
+    prop: "code",
+    label: "角色编码",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "角色名称",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  // {
+  //   prop: "status",
+  //   label: "状态",
+  //   minWidth: 100,
+  //   subcomponent: statusBtn,
+  // },
+  {
+    prop: "remark",
+    label: "角色描述",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemOperateLog",
+  mixins: [tableHeightMixin],
   data() {
     return {
+      formConfig: [
+        {
+          type: "input",
+          label: "系统模块",
+          placeholder: "系统模块",
+          param: "module",
+        },
+        {
+          type: "input",
+          label: "操作人员",
+          placeholder: "操作人员",
+          param: "userNickname",
+        },
+        {
+          type: "select",
+          label: "类型",
+          selectOptions: this.getDictDatas(this.DICT_TYPE.SYSTEM_OPERATE_TYPE),
+          labelField: "label",
+          valueField: "value",
+          param: "type",
+        },
+        {
+          type: "select",
+          label: "状态",
+          selectOptions: [
+            { id: true, name: "成功" },
+            { id: false, name: "失败" },
+          ],
+          param: "success",
+        },
+        {
+          type: "datePicker",
+          label: "操作时间",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "startTime",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: "button",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableProps,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -144,6 +348,12 @@ export default {
       total: 0,
       // 表格数据
       list: [],
+      tableBtn: [
+        {
+          type: "detail",
+          btnName: "详情",
+        },
+      ],
       // 是否显示弹出层
       open: false,
       // 类型数据字典
@@ -153,12 +363,12 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
         module: undefined,
         userNickname: undefined,
         businessType: undefined,
-        status: undefined,
-        startTime: []
+        success: undefined,
+        startTime: [],
       },
     };
   },
@@ -169,12 +379,11 @@ export default {
     /** 查询登录日志 */
     getList() {
       this.loading = true;
-      listOperateLog(this.queryParams).then( response => {
-          this.list = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        }
-      );
+      listOperateLog(this.queryParams).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -193,19 +402,46 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
-          let params = {...this.queryParams};
+          let params = { ...this.queryParams };
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportOperateLog(params);
-        }).then(response => {
-          this.$download.excel(response, '操作日志.xls');
+        })
+        .then((response) => {
+          this.$download.excel(response, "操作日志.xls");
           this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+        })
+        .catch(() => {});
+    },
+    buttonClick(val) {
+      if (val.btnName === "search") {
+        this.queryParams.module = val.module;
+        this.queryParams.userNickname = val.userNickname;
+        this.queryParams.type = val.type;
+        this.queryParams.success = val.success;
+        this.queryParams.startTime = val.startTime;
+        this.getList();
+      } else {
+        this.handleExport();
+      }
+    },
+    handleClick(val) {
+      this.handleView(val.data);
+    },
+  },
 };
 </script>
-
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>