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

Reviewed-on: #24

.env.dev

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

src/api/energy/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-04-28 09:28:12
- * @LastEditTime: 2024-04-28 09:43:40
+ * @LastEditTime: 2024-05-16 08:56:59
  * @LastEditors: zhp
  * @Description:
  */
@@ -13,3 +13,11 @@ export function getEnergyPage(data) {
     data: data
   })
 }
+
+export function getEnergySumPage(data) {
+  return request({
+    url: 'ip/prod-output/cockpitComprehensiveDataMonitor',
+    method: 'post',
+    data: data
+  })
+}

src/api/produceData/index.js

@@ -1,15 +1,8 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 08:54:59
- * @LastEditTime: 2024-05-07 09:34:17
+ * @LastEditTime: 2024-05-22 16:31:08
- * @LastEditors: zhp
+ * @LastEditors: DY
- * @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'
@@ -23,14 +16,121 @@ export function getProduceDataPage(data) {
   })
 }
 
-export function getProduceDataDetail(data){
+export function getProduceDataDetail(id){
   return request({
-     url: '/ip/prod-output/get=' + id,
+     url: '/ip/prod-output/get?id=' + id,
-    method: 'get',
+    method: 'get'
-    query: data
   })
 }
 
+// 导出生产数据
+export function exportOutPutExcel(data) {
+  return request({
+    url: '/ip/prod-output/output-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 获取生产管理生产目标管理碲化镉工厂分页
+export function prodTargetDiPage(data) {
+  return request({
+    url: '/ip/prod-target/prodTargetDiPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取生产管理生产目标管理铜铟镓硒工厂分页
+export function prodTargetToPage(data) {
+  return request({
+    url: '/ip/prod-target/prodTargetToPage',
+    method: 'post',
+    data: data
+  })
+}
+
+// 创建生产目标
+export function createProduce(data) {
+  return request({
+    url: '/ip/prod-target/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得生产目标
+export function getProduceTargetDetail(id){
+  return request({
+     url: '/ip/prod-target/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 修改生产目标
+export function updateProduceTarget(data) {
+  return request({
+    url: '/ip/prod-target/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导出碲化镉生产目标数据
+export function exportDiTargetExcel(data) {
+  return request({
+    url: '/ip/prod-target/di-target-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 导出铜铟镓硒生产目标数据
+export function exportToTargetExcel(data) {
+  return request({
+    url: '/ip/prod-target/to-target-export-excel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}
+
+// 删除生产目标
+export function delTarget(id) {
+  return request({
+    url: '/ip/prod-target/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 导入铜铟镓硒工厂
+export function importToTarget(data) {
+  return request({
+    url: '/ip/prod-target/to-target-import-excel',
+    method: 'post',
+    data
+  })
+}
+
+// 导入碲化镉工厂
+export function importDiTarget(data) {
+  return request({
+    url: '/ip/prod-target/di-target-import-excel',
+    method: 'post',
+    data
+  })
+}
+
+// export function cockpitDataMonitor(data) {
+//   return request({
+//     url: '/ip/prod-output/cockpitDataMonitor',
+//     method: 'post',
+//     data: data
+//   })
+// }
+
 export function cockpitDataMonitor(data) {
   return request({
     url: '/ip/prod-output/cockpitDataMonitor',

src/components/ButtonNav/index.vue

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

src/mixins/chart.js

@@ -1,10 +1,9 @@
 import * as echarts from "echarts";
 
 function __resizeHandler(entries) {
-  console.log(entries);
+  console.log(entries)
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-      // manipulate contentBoxSize
     const contentBoxSize = Array.isArray(entry.contentBoxSize)
           ? entry.contentBoxSize[0]
           : entry.contentBoxSize;

src/store/index.js

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

src/store/modules/home.js

@@ -1,4 +1,3 @@
-
 import axios from "@/utils/request";
 import { deepClone } from "../../utils";
 
@@ -14,25 +13,35 @@ const state = {
       bipvOutput: null,
     },
     /* 能源驾驶舱 */
-    energy: {},
+    energy: {
+      stockDOData: [],
+      waterList: {},
+      gasList: [],
+      elecList:{}
+    },
     /* 效率驾驶舱 */
     efficiency: {
       chipOee: {
         current: [],
         previous: [],
+        target:[]
       },
       transformRate: {
         current: [],
         previous: [],
+        target:[]
       },
       chipRate: {
         target: [],
         current: [],
         previous: [],
+        outputNumber:[],
       },
       stdRate: {
         target: [],
         current: [],
+        previous: [],
+        outputNumber:[]
       },
     },
   },
@@ -64,11 +73,13 @@ const mutations = {
         state.copilot.yield.bipvOutput = payload.bipvOutput;
         break;
       case "energy":
-        state.copilot.energy = payload.data;
+        state.copilot.energy.stockDOData = payload.stockDOData;
+        state.copilot.energy.gasList = payload.gasList;
+        state.copilot.energy.waterList = payload.waterList;
+        state.copilot.energy.elecList = payload.elecList;
         break;
       case "efficiency":
-        console.log('222222', payload)
+        state.copilot.efficiency.chipOeeRate = payload.chipOeeRate;
-        state.copilot.efficiency.chipOee = payload.chipOee;
         state.copilot.efficiency.transformRate = payload.transformRate;
         state.copilot.efficiency.chipRate = payload.chipRate;
         state.copilot.efficiency.stdRate = payload.stdRate;
@@ -81,43 +92,49 @@ const actions = {
   /** 初始化首页数据 */
   async initHome({ commit }) {
     const dataArr = await getHomeInfo();
-    const targetArr = await getHomeInfo();
+    console.log('dataArr',dataArr);
-    const payload = splitCurrentAndPrevious(dataArr.prodOutputResultDO, targetArr.prodTargetDO);
+    // const targetArr = await getHomeInfo();
+    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO
+);
     commit("SET_HOME_INFO", payload);
   },
   /** 初始化驾驶舱数据 */
-  async initCopilot({ commit }, { period, source }) {
+  async initCopilot({ commit }, { period,source,than}) {
-    if (source == "comprehensive") return;
+    // if (source == "energy") return;
 
     const fetcher = {
       yield: getCopilotYield,
-      comprehensive: getCopilotEnergy,
+      energy: getCopilotEnergy,
       efficiency: getCopilotEfficiency,
     }[source];
     const handler = {
       yield: splitCurrentAndPrevious,
-      comprehensive: () => null,
+      energy: splitCurrentAndPreviousB,
       efficiency: splitCurrentAndPreviousA,
     }[source]
-    console.log(handler)
     // 获取产量数据
-    // console.log('qqqqqq',handler)
+    let { data: factoryList, type } = await fetcher(period,than)
-    let { data: factoryList, type } = await fetcher(period)
+    // let targetList = null;
-    console.log(factoryList,type);
+    // if (source === "yield" || source === "efficiency") {
-    let targetList = null;
+    //   // 获取目标数据
-    if (source === "yield" || source === "efficiency") {
+    //   let { data } = await fetcher(period,than, true)
-      // 获取目标数据
+    //   targetList = data
-      let { data } = await fetcher(period, true)
+    // }
-      // console.log('11111',data)
+    // if (source == "energy") {
-      targetList = data
+    //   let factoryData = factoryList
-    }
+    //   const payload = handler(factoryData)
-    let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
+    //   commit("SET_COPILOT_INFO", { type, payload });
-    let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO
+    // } else {
-    console.log(factoryList.ProdOutputDO)
+      let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
-    console.log('ryf',factoryList)
+      let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
-    const payload = handler(factoryData, targetData)
+      let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
-    console.log(payload)
+      let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
+      let targetData = factoryList.prodTargetOutputDO ? factoryList.prodTargetOutputDO : factoryList.prodTargetRateDO
+      const payload = handler(factoryData,targetData,prodOutputFtoDO,preData,preFtoData)
     commit("SET_COPILOT_INFO", { type, payload });
+
+    // }
+
   },
 };
 
@@ -128,12 +145,151 @@ export default {
   actions,
 };
 
-function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
+function splitCurrentAndPreviousB(factoryListResponse) {
-  console.log('工厂',factoryListResponse);
+ let  factoryArr = [
-  // console.log('工厂',factoryListResponse);
+        {
+          id: 0,
+          name: '瑞昌中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 1,
+          name: '邯郸中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 2,
+          name: '中建材株洲光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 3,
+          name: '佳木斯中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 4,
+          name: '成都中建材光电材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 5,
+          name: '凯盛光伏材料有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+        {
+          id: 6,
+          name: '蚌埠兴科玻璃有限公司',
+          stockData: [],
+          waterData: [],
+          elsData: [],
+          gasData: [],
+        },
+      ]
+  if (factoryListResponse) {
+       for (let i in factoryListResponse.stockDO) {
+        const index = factoryArr.findIndex(item => item.id == factoryListResponse.stockDO[i].factory)
+        if (index != -1) {
+          factoryListResponse.stockDO[i].stockInfo.forEach(ele => {
+            factoryArr[index].stockData.push(ele)
+          });
+        }
+
+       }
+      let stockDOData = []
+    factoryArr.forEach((ele, index) => [
+      stockDOData[index] = [],
+      ele.stockData.forEach((item) => {
+        let obj = {}
+        obj.name = item.glassType == 0 ? '玻璃芯片' : item.glassType == 1 ? '标准组件' : item.glassType == 2 ? 'BIPV' : '定制组件'
+        obj.value = item.stockNumber
+        stockDOData[index].push(obj)
+      }),
+    ])
+     let gasList = []
+    // if (factoryListResponse.gasDO) {
+       factoryListResponse.gasDO.forEach((ele) => {
+      gasList[ele.factory] = ele.totalEnergyValue
+    })
+    // }
+
+    // console.log(factoryListResponse.gasDO);
+    let waterObj = Object.groupBy(factoryListResponse.waterDO, ({ groupName }) => groupName)
+    let waterList = {
+      times: [],
+      0: [],
+      1: [],
+      2: [],
+      3: [],
+      4: [],
+      5: [],
+      6: [],
+    }
+    for (let i in waterObj) {
+      waterList.times.push(i)
+      waterObj[i].forEach((ele, index) => {
+        waterList[ele.factory].push(ele.totalEnergyValue)
+      })
+    }
+     let elecObj = Object.groupBy(factoryListResponse.elecDO, ({ groupName }) => groupName)
+    let elecList = {
+      times: [],
+      0: [],
+      1: [],
+      2: [],
+      3: [],
+      4: [],
+      5: [],
+      6: [],
+    }
+    for (let i in elecObj) {
+      elecList.times.push(i)
+      elecObj[i].forEach((ele, index) => {
+        elecList[ele.factory].push(ele.totalEnergyValue)
+      })
+    }
+
+    return {
+      stockDOData,
+      waterList,
+      gasList,
+      elecList,
+    };
+  } else {
+    let stockDOData = Array[7].fill([])
+    let waterList = {}
+    return {
+      stockDOData,
+      waterList,
+      gasList,
+      elecList
+    };
+  }
+}
+
+function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
+  console.log('工厂',targetListResponse);
 
   // 初始数据
-  const { chipOee, transformRate, chipRate, stdRate } = initA();
+  const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
   // factoryListResponse = [
   //   {
   //     factory: 0,
@@ -184,11 +340,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
   //     componentYieldRate: 0.73,
   //   },
   // ];
+  if (preData && preData[0] != null) {
+    for (const factory of preData) {
+      const fId = getPreFactoryId(factory);
+         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      // chipOeeRate.current[fId] = factory.oee;
+      chipOeeRate.previous[fId] = factory.previousYearOee;
+      // 转化效率
+      transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
+      // 芯片良率 与 标准组件良率
+      if (![0, 1].includes(factory.glassType)) continue;
+      const _t = [chipRate, stdRate][factory.glassType]
+      // _t.current[fId] = factory.yieldRate ;
+      _t.previous[fId] = factory.previousYearYieldRate ;
+      // }
+      // debugger;
+    }
+  }
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
-        if (factory.glassType === 1) {
-        console.log(factory.yieldRate)
-      }
       const fId = getFactoryId(factory);
       // 获取目标值
       if (targetListResponse) {
@@ -197,27 +367,28 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
           componentYieldRate,
           chipOee,
           componentConversionEfficiency,
-        } = getFactoryTargetValueA(targetListResponse, fId);
+          componentYield
-        stdRate.target[fId] = chipYieldRate;
+        } = getFactoryTargetValueA(targetListResponse, fId)
-        chipRate.target[fId] = componentYieldRate;
+        stdRate.target[fId] =  componentYieldRate
+        chipRate.target[fId] = chipYieldRate
+        chipOeeRate.target[fId] = chipOee
+        transformRate.target[fId] = componentConversionEfficiency
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee * 100 || random_default();
+      chipOeeRate.current[fId] = factory.oee;
-      chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
+      // chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
-      transformRate.current[fId] =
+      transformRate.current[fId] = factory.componentConversionEfficiency;
-        factory.componentConversionEfficiency * 100 || random_default();
+      // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
-      transformRate.previous[fId] =
-        factory.previousYearComponentConversionEfficiency * 100 || random_default();
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
-      const _t = [chipRate, stdRate][factory.glassType];
+      const _t = [chipRate, stdRate][factory.glassType]
-      _t.current[fId] = factory.yieldRate || random_default();
+      _t.current[fId] = factory.yieldRate ;
-      _t.previous[fId] = factory.previousYearYieldRate || random_default();
+      // _t.previous[fId] = factory.previousYearYieldRate ;
     }
-
+    // console.log('chipOeeRate',chipOeeRate);
     return {
-      chipOee,
+      chipOeeRate,
       transformRate,
       chipRate,
       stdRate,
@@ -225,15 +396,57 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
   }
 }
 
-function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
+function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  console.log('工厂',factoryListResponse);
+  console.log('prodOutputFtoListRes',preData);
-
   // 初始数据
-  const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
+  const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
-  if (factoryListResponse) {
+   if (prodOutputFtoListRes) {
-    for (const factory of factoryListResponse) {
+    for (const factory of prodOutputFtoListRes) {
-
+      console.log(factory);
       const fId = getFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
+      ftoInvest.current[fId] = factory.chipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+    }
+   }
+   if (preFtoData) {
+    for (const factory of preFtoData) {
+      console.log(factory);
+      const fId = getPreFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
+      ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+    }
+   }
+    if (preData && preData[0] != null) {
+    for (const factory of preData) {
+      const fId = getPreFactoryId(factory);
+         chipInvest.previous[fId] = factory.previousYearInputNumber;
+      if (![0, 1, 2].includes(factory.previousGlassType)) continue;
+      const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType];
+      // if (fId) {
+        // _t.current[fId] = factory.outputNumber;
+      // }
+      // if (preFId) {
+          _t.previous[fId] = factory.previousYearOutputNumber
+      // }
+      // debugger;
+    }
+  }
+    // console.log('ftoInvest',ftoInvest)
+  if (factoryListResponse && factoryListResponse[0] != null) {
+    for (const factory of factoryListResponse) {
+      const fId = getFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+
       // 获取目标值
       if (targetListResponse) {
         const { chipYield, componentYield, bipvProductOutput } =
@@ -244,47 +457,54 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
       }
       // 芯片投入
           chipInvest.current[fId] = factory.inputNumber;
-      chipInvest.previous[fId] = factory.previousYearInputNumber;
+
-      // FTO投入
-      ftoInvest.current[fId] = factory.chipInput;
-      ftoInvest.previous[fId] = factory.previousYearChipInput;
       // 产出数据, 0 - （玻璃）芯片产出， 1 - 标准组件产出， 2 - BIPV产出
       // 因为后端写的垃圾数据，所以这里要做一下判断
       if (![0, 1, 2].includes(factory.glassType)) continue;
       const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
         _t.current[fId] = factory.outputNumber;
-      _t.previous[fId] = factory.previousYearOutputNumber;
-      // debugger;
     }
-
     return {
       chipInvest,
+      // ftoInvest,
       ftoInvest,
       chipOutput,
       stdOutput,
       bipvOutput,
     };
+  }else{
+      return {
+      chipInvest,
+      // ftoInvest,
+      ftoInvest,
+      chipOutput,
+      stdOutput,
+      bipvOutput,
+    }
   }
 }
 
 function getFactoryId(factory) {
   return factory.factory;
 }
+function getPreFactoryId(factory) {
+  return factory.previousFactory;
+}
 
 function getFactoryTargetValue(targetList, factoryId) {
   const target = targetList.find((item) => item.factory === factoryId);
   if (target) {
     return {
       // 自带模拟数据了.... random_default
-      chipYield: target.chipYield ?? random_default(),
+      chipYield: target.chipYield ?? 0,
-      componentYield: target.componentYield ?? random_default(),
+      componentYield: target.componentYield ?? 0,
-      bipvProductOutput: target.bipvProductOutput ?? random_default(),
+      bipvProductOutput: target.bipvProductOutput ?? 0,
     };
   }
   return {
-    chipYield: random_default(),
+    chipYield: 0,
-    componentYield: random_default(),
+    componentYield: 0,
-    bipvProductOutput: random_default(),
+    bipvProductOutput: 0,
   };
 }
 
@@ -295,16 +515,21 @@ 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(),
+      chipYieldRate: target.chipYieldRate ?? 0,
-      componentYieldRate: target.componentYieldRate ?? random_default(),
+      componentYieldRate: target.componentYieldRate ?? 0,
+      componentYield: target.componentYield ?? 0,
+      // componentYield: target.componentYield ?? 0,
+      chipOee: target.chipOee ?? 0,
     };
   }
   return {
-    chipYieldRate: random_default(),
+    chipYieldRate:0,
-    componentYieldRate: random_default(),
+    componentYieldRate:0,
+    componentYield: 0,
+    chipOee:0,
   };
 }
 
@@ -318,18 +543,18 @@ function initA() {
     previous: Array(7).fill(0),
   };
   // 芯片OEE
-  const chipOee = deepClone(t_);
   // 转化效率
-  const transformRate = deepClone(t_);
   // 标准组件良率
   const stdRate = {
     ...deepClone(t_),
     target: Array(7).fill(0),
   };
   // 芯片良率
+  const transformRate = deepClone(stdRate);
   const chipRate = deepClone(stdRate);
+  const chipOeeRate = deepClone(stdRate);
   return {
-    chipOee,
+    chipOeeRate,
     transformRate,
     chipRate,
     stdRate,
@@ -382,6 +607,7 @@ async function getHomeInfo() {
   const { code, data } = await axios.post("ip/prod-output/cockpitData", {
     factorys: [],
     date: 4,
+    mode:0
   });
   if (code == 0) {
     return data;
@@ -407,7 +633,7 @@ function getUrl(copilot_module) {
     // 对比数据的 URL
     comparison: "",
     // 目标数据的 URL
-    target: "",
+    // target: "",
   };
   switch (copilot_module) {
     case "yield":
@@ -415,6 +641,7 @@ function getUrl(copilot_module) {
       // url.target = "/ip/prod-target/query-by-date";
       break;
     case "energy":
+       url.comparison = "ip/prod-output/cockpitComprehensiveDataMonitor";
       break;
     case "efficiency":
       url.comparison = "ip/prod-output/cockpitDataRate";
@@ -446,16 +673,16 @@ async function doFetch(copilot_module = "yield", fetch_target, params) {
  * @param {*} target 是否获取目标数据
  * @returns
  */
-function getCopilotYield(period, target = false) {
+function getCopilotYield(period,than,target = false) {
-  return getCopilotData("yield", period, target);
+  return getCopilotData("yield", period,than, target);
 }
 
 function getCopilotEnergy(period, target = false) {
-  return getCopilotData("energy", period, target);
+  return getCopilotData("energy", period,than, target);
 }
 
-function getCopilotEfficiency(period, target = false) {
+function getCopilotEfficiency(period,than, target = false) {
-  return getCopilotData("efficiency", period, target);
+  return getCopilotData("efficiency", period,than, target);
 }
 
 /**
@@ -464,12 +691,13 @@ function getCopilotEfficiency(period, target = false) {
  * @param {*} target 是否获取目标数据：默认 否
  * @returns
  */
-async function getCopilotData(copilot_module, period, target = false) {
+async function getCopilotData(copilot_module, period,than, target = false) {
   if (!copilot_module) copilot_module = "yield";
   // 请求参数，直接一次性获取所有工厂
   let queryParams = {
     factorys: [],
     date: 4,
+    mode:0
   };
 
   switch (period) {
@@ -489,7 +717,14 @@ async function getCopilotData(copilot_module, period, target = false) {
       queryParams.date = 1;
       break;
   }
-
+ switch (than) {
+    case "同比":
+      queryParams.mode = 0;
+      break;
+    case "环比":
+      queryParams.mode = 1;
+      break;
+  }
   return {
     data: await doFetch(copilot_module, target ? true : false, queryParams),
     type: copilot_module,

src/utils/constants.js

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

src/utils/dict.js

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

src/views/copilot/components/BarChartBase.vue

@@ -8,33 +8,25 @@
 <template>
   <chart-container class="bar-chart-base">
     <div class="legend">
-      <span
+      <span v-for="item in legend" :key="item.label" class="legend-item"
-        v-for="item in legend"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
     </div>
-    <div
+    <div ref="chart" style="height:94%;width:100%"></div>
-      ref="chart"
-      style="max-width: 40vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></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 chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
 export default {
   name: "BarChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -59,6 +51,7 @@ export default {
   },
   data() {
     return {
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -182,8 +175,17 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isOpen(val) {
+      // console.log(val)
+      this.canvasReset()
+    },
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
@@ -191,11 +193,19 @@ 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);
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.initChart(this.actualOptions);
+      this.canvasReset()
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -205,18 +215,41 @@ 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;
       });
     }
+    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>

src/views/copilot/components/CopilotHeader.vue

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

src/views/copilot/components/FactoryDataHeader.vue

@@ -1,39 +1,30 @@
 <template>
   <div class="factory-header">
     <section class="menu1">
-      <FactorySelect
+      <!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
-        :companyName="companyName"
+        @click="() => $emit('update:active', i)" />
-        :companyId="companyId"
+      <div class="type-name"></div> -->
-        @updateCompany="updateCompany"
+      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
-      />
+        @click="() => $emit('update:than', i)" />
-    </section>
-    <section class="menu2">
-      <CopilotButton
-        v-for="i in ['日', '周', '月', '年']"
-        :key="i"
-        :label="i"
-        :active="i === period"
-        @click="() => $emit('update:period', i)"
-      />
       <div class="btn-group">
         <button type="button" class="export-btn" />
-        <button
+        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          type="button"
+          @click="toggleFullScreen" />
-          class="fullscreen-btn"
-          :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          @click="toggleFullScreen"
-        />
       </div>
     </section>
     <div class="page-title">{{ companyName }}</div>
+    <section class="menu2">
+      <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
+        @click="() => $emit('update:period', i.id)" />
+    </section>
   </div>
 </template>
 
 <script>
-import CopilotButton from "./button.vue";
+// import CopilotButton from "./button.vue";
 import FactorySelect from "./FactorySelect.vue";
 import screenfull from "screenfull";
-
+import CopilotButton from "./button.vue";
 export default {
   name: "FactoryDataHeader",
   components: { CopilotButton, FactorySelect },
@@ -42,15 +33,24 @@ export default {
       type: String,
     },
     companyId: {
-      type: String,
+      type: Number,
     },
     period: {
+      type: Number,
+    },
+    than: {
       type: String,
     },
   },
   data() {
     return {
       isFullscreen: false,
+      dataList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
     };
   },
   computed: {},
@@ -84,13 +84,13 @@ export default {
 }
 
 .factory-header > .menu1 {
-  width: 24vw;
+  width: 20vw;
-  /* display: flex;
+  display: flex;
   align-items: center;
-  gap: 8px; */
+  gap: 8px;
 }
 .factory-header > .menu2 {
-  width: 30vw;
+  width: 26vw;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -119,13 +119,14 @@ export default {
 }
 
 .page-title {
-  flex: 1;
+  flex: 1 1 auto;
   font-size: 40px;
   line-height: 70px;
   letter-spacing: 5px;
   font-family: 优设标题黑;
   color: #6db6ff;
-  text-align: right;
+  text-align: center;
   user-select: none;
+  background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
 }
 </style>

src/views/copilot/components/FactorySelect.vue

@@ -26,20 +26,20 @@ export default {
       type: String,
     },
     companyId: {
-      type: String,
+      type: Number,
     },
   },
   data() {
     return {
       isOpen: false,
       company: [
-        { id: "1", name: "瑞昌中建材光电材料有限公司" },
+        { id: 0, name: "瑞昌中建材光电材料有限公司" },
-        { id: "2", name: "邯郸中建材光电材料有限公司" },
+        { id: 1, name: "邯郸中建材光电材料有限公司" },
-        { id: "3", name: "株洲中建材光电材料有限公司" },
+        { id: 2, name: "株洲中建材光电材料有限公司" },
-        { id: "4", name: "佳木斯中建材光电材料有限公司" },
+        { id: 3, name: "佳木斯中建材光电材料有限公司" },
-        { id: "5", name: "成都中建材光电材料有限公司" },
+        { id: 4, name: "成都中建材光电材料有限公司" },
-        { id: "6", name: "凯盛中建材光电材料有限公司" },
+        { id: 5, name: "凯盛中建材光电材料有限公司" },
-        { id: "7", name: "蚌埠中建材光电材料有限公司" },
+        { id: 6, name: "蚌埠中建材光电材料有限公司" },
       ],
     };
   },

src/views/copilot/components/LineChartBase.vue

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

src/views/copilot/components/NotMsg.vue

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

src/views/copilot/components/ftoBarChartBase.vue

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

src/views/copilot/components/gasBarChartBase.vue

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

src/views/copilot/container.vue

@@ -1,4 +1,3 @@
-
 <!--
     filename: container.vue
     author: liubin
@@ -7,12 +6,14 @@
 -->
 
 <template>
-  <div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]">
+  <!-- <div class="copilot-layout" ref="copilot-layout"> -->
-    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
+  <div class="copilot-layout produce" ref="copilot-layout">
+    <CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" @update:period="period = $event"
+      @update:than="updateThan" />
 
-    <YieldCopilot v-if="page == '产量'" :period="period" />
+    <YieldCopilot :period="period"  :than="than"  />
-    <EnergyCopilot v-if="page == '综合'" :period="period" />
+    <!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
-    <EfficiencyCopilot v-if="page == '效率'" :period="period" />
+    <!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
 </template>
@@ -20,24 +21,55 @@
 <script>
 import CopilotHeaderVue from "./components/CopilotHeader.vue";
 import YieldCopilot from "./yield/index.vue";
-import EnergyCopilot from "./energy/index.vue";
+// import EnergyCopilot from "./energy/index.vue";
-import EfficiencyCopilot from "./efficiency/index.vue";
+// import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
   name: "CopilotContainer",
   components: {
     CopilotHeaderVue,
     YieldCopilot,
-    EnergyCopilot,
+    // EnergyCopilot,
-    EfficiencyCopilot,
+    // EfficiencyCopilot,
   },
   data() {
     return {
       page: "产量",
       period: "日",
+      than:'同比',
       currentsStyles: '',
     };
   },
+  methods: {
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updateActive(val, oldVal) {
+      console.log(val)
+      if (val === '效率') {
+        this.$router.push({
+          path: 'efficiency-container',
+          query: {
+            name: '效率'
+          }
+        })
+        // this.page = oldVal
+      } else if (val === '产量') {
+        this.$router.push({
+          path: 'main',
+          query: {
+            name: '产量'
+          }
+        })
+        // this.page = oldVal
+      }
+    }
+  },
+  // mounted() {
+  //   this.page = this.$route.query.name
+  // },
   // watch: {
   //   page(val) {
   //     if (val === '产量') {
@@ -64,13 +96,13 @@ export default {
 };
 </script>
 <style>
-
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;
   left: -16px;
   /* top: -8px; */
+  /* height: calc(100% + 38px); */
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -82,9 +114,11 @@ export default {
 .produce {
   height: calc(100% + 38px);
 }
+
 .other {
-  height: 100vh + 50px;
+  height: calc(100% + 240px);
 }
+
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/

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

@@ -25,6 +25,14 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
+    chipOeeRate: {
+      type: Object,
+      default:{}
+    }
   },
   data() {
     // 城市数组的顺序必须是固定的
@@ -35,79 +43,239 @@ export default {
   },
   computed: {
     legend() {
-      switch (this.period) {
+      let items = [];
-        case "日":
+      var day1 = new Date();
-          return [{ label: "昨日", color: "#12f7f1" }];
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        case "周":
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
-          return [{ label: "本周", color: "#12f7f1" }];
+      //今天的时间
-        case "月": {
+      // var day2 = new Date();
-          const year = new Date().getFullYear();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
       const month = new Date().getMonth() + 1;
-          return [
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
       const year = new Date().getFullYear();
-          return [
+      if (this.period === '日' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `上周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          ];
-        }
-        default:
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
           { label:  `${year}年`, color: "#58adfa" },
+
+          // { label: `${year}年目标`, value: valueTuple[2] },
         ];
       }
+      return items
+      // switch (this.period) {
+      //   case "日":
+      //     return [{ label: "昨日", color: "#12f7f1" }];
+      //   case "周":
+      //     return [{ label: "本周", color: "#12f7f1" }];
+      //   case "月": {
+      //     const year = new Date().getFullYear();
+      //     const month = new Date().getMonth() + 1;
+      //     return [
+      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+      //       { label: `${year}年${month}月`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   case "年": {
+      //     const year = new Date().getFullYear();
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   default:
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      // }
     },
+    // chipOeeRate() {
+    //    return  this.$store.getters.copilot.efficiency.chipOeeRate
+    // },
     series() {
       // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
-      const { chipOee } = this.$store.getters.copilot.efficiency;
+      const chipOeeRate = this.chipOeeRate
-      let dataList = null;
+      // console.log('chipOee', chipOeeRate)
+      let dataList = null
       switch (this.period) {
         case "日":
+          dataList = [];
+          dataList[0] = chipOeeRate?.previous;
+          dataList[1] = chipOeeRate?.current;
         case "周":
-          dataList = chipOee?.current;
+          dataList = [];
-        case "周":
+          dataList[0] = chipOeeRate?.previous;
-          dataList = chipOee?.current;
+          dataList[1] = chipOeeRate?.current;
-          break;
           default:
           dataList = [];
-          dataList[0] = chipOee?.previous;
+          dataList[0] = chipOeeRate?.previous;
-          dataList[1] = chipOee?.current;
+          dataList[1] = chipOeeRate?.current
+          dataList[2] = chipOeeRate?.target
       }
-      // console.log(dataList)
+      console.log(dataList)
-      return getTemplate(this.period, dataList);
+      return getTemplate(this.period, dataList,this.than);
     },
   },
   methods: {},
 };
 
-function getTemplate(period, dataList) {
+function getTemplate(period, dataList, than) {
-  const year = new Date().getFullYear();
+  // console.log('dataList',dataList);
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  //今天的时间
+  // var day2 = new Date();
+  // day2.setTime(day2.getTime());
+  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+  const today = new Date().getDate();
+  // let yesterday = new Date().getDate() -1;
   const month = new Date().getMonth() + 1;
-  // console.log('11111', dataList);
+  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-  return period == "日" || period == "周"
+  const year = new Date().getFullYear();
-    ? [
+  if (period === '日' && than === '同比') {
+    items = [
       {
-          name: period == "日" ? "昨日" : "本周",
+        name: `去年${month}月${today}日`,
-          data: dataList ?? [],
-        },
-      ]
-    : [
-        {
-          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {
-          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+        name: `${month}月${today}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
     ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${year}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  }
+  return items
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+
+</style>

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

@@ -1,22 +1,15 @@
 <!--
-    filename: ChipRate.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-10 11:10:54
-    date: 2024-04-29 08:50:54
+ * @LastEditTime: 2024-05-30 13:23:03
-    description: 芯片良率
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="chip-rate">
-    <ChipRateItem
+    <ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
-      :period="period"
+    <ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
-      :cities="['成都', '邯郸', '株洲', '瑞昌']"
-      :color="1"
-    />
-    <ChipRateItem
-      :period="period"
-      :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
-      :color="2"
-    />
   </div>
 </template>
 
@@ -30,6 +23,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: '同比',
+    }
   },
   data() {
     return {};

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

@@ -1,18 +1,19 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:44:21
+ * @LastEditTime: 2024-05-30 11:19:51
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
-  <div class="std-rate">
+  <!-- <div class="order"> -->
+    <div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px">
       <div class="span-2">
         <StdRateItem :period="period" :city="cities[5]" />
       </div>
-    <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
+      <div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
-      <StdRateItem :period="period" :city="item" />
+        <StdRateItem :period="period" :than="than" :city="item" />
       </div>
     </div>
 </template>
@@ -27,22 +28,73 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
+  },
+  computed: {
+    cities() {
+      console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
+      // let getterName = "";
+      // switch (this.dataSource) {
+      //   case "标准组件产出":
+      //     getterName = "stdOutput";
+      //     break;
+      //   case "芯片产出":
+      //     getterName = "chipOutput";
+      //     break;
+      //   case "BIPV产出":
+      //     getterName = "bipvOutput";
+      //     break;
+      // }
+      const _cities = [
+        { name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
+        { name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+      ]
+      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
+        this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
+          (v, idx) => {
+            _cities[idx].previous = v ?? 0;
+          }
+        );
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
+        this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
+          (v, idx) => {
+            _cities[idx].target = v ?? 0;
+          }
+        )
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
+        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+          (v, idx) => {
+            _cities[idx].current = v ?? 0;
+          }
+        );
+      }
+      // 删掉凯盛光伏
+      // _cities.splice(4, 1);
+      return _cities;
+    },
   },
   data() {
     return {
-      cities: [
+      // cities: [
-        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
+      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
-        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
+      //   { name: "邯郸", target: 200, total: 300, current: 20 },
-        { name: "株洲", target: 300, total: 400, thisYear: 20 },
+      //   { name: "株洲", target: 300, total: 400, current: 20 },
-        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
+      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
-        { name: "成都", target: 500, total: 600, thisYear: 20 },
+      //   { name: "成都", target: 500, total: 600, current: 20 },
-        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
+      //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
-        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
+      //   { name: "蚌埠", target: 500, total: 600, current: 20 },
-      ],
+      // ],
     };
-  },
-  computed: {
-
   },
   methods: {},
 };
@@ -50,13 +102,25 @@ export default {
 
 <style scoped lang="scss">
 .std-rate {
-  display: grid;
+  display: flex;
-  gap: 8px;
+  // gap: 1px;
-  grid-template-columns: repeat(2, 1fr);
+  // flex: 1 1 auto;
-  grid-template-rows: repeat(4, 1fr);
-}
 
+  // display: -webkit-box;
+  flex-wrap: wrap;
+  align-items: center;
+  // grid-template-columns: repeat(2, 1fr);
+  // grid-template-rows: repeat(4, 1fr);
+}
+.std-rate::-webkit-scrollbar {
+  display: none;
+}
+.flex-item{
+  // flex: 1 1 auto;
+  width: 50%;
+}
 .span-2 {
-  grid-column: span 2;
+  // flex: 1 1 auto;
+  flex-basis: 100%;
 }
 </style>

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
 export default {
   name: "TransformRate",
   components: { BarChartBase },
@@ -25,6 +25,14 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: '同比',
+    },
+    transformRate: {
+      type: Object,
+      default: {}
+    }
   },
   data() {
     // 城市数组的顺序必须是固定的
@@ -35,75 +43,227 @@ export default {
   },
   computed: {
     legend() {
-      switch (this.period) {
+      let items = [];
-        case "日":
+      var day1 = new Date();
-          return [{ label: "昨日", color: "#12f7f1" }];
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        case "周":
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
-          return [{ label: "本周", color: "#12f7f1" }];
+      //今天的时间
-        case "月": {
+      // var day2 = new Date();
-          const year = new Date().getFullYear();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
       const month = new Date().getMonth() + 1;
-          return [
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
       const year = new Date().getFullYear();
-          return [
+      if (this.period === '日' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月${today}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `上周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          { label: `${month}月目标`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          ];
-        }
-        default:
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
-          ];
-      }
-    },
-    series() {
-      const { transformRate } = this.$store.getters.copilot.efficiency;
-      let dataList = null;
 
+          // { label: `${year}年目标`, value: valueTuple[2] },
+        ];
+      }
+      return items
+    },
+    // transformRate() {
+    //   return this.$store.getters.copilot.efficiency.transformRate
+    // },
+    series() {
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      const transformRate = this.transformRate
+      // console.log('chipOee', chipOeeRate)
+      let dataList = null;
       switch (this.period) {
         case "日":
+          dataList = [];
+          dataList[0] = transformRate.previous;
+          dataList[1] = transformRate.current;
         case "周":
-          dataList = transformRate?.current;
+          dataList = [];
-          break;
+          dataList[0] = transformRate.previous;
+          dataList[1] = transformRate.current;
         default:
           dataList = [];
-          dataList[0] = transformRate?.previous;
+          dataList[0] = transformRate.previous;
-          dataList[1] = transformRate?.current;
+          dataList[1] = transformRate.current
+          dataList[2] = transformRate.target
       }
-
+      console.log('transformRate', dataList)
-      return getTemplate(this.period, dataList);
+      return getTemplate(this.period, dataList, this.than);
     },
+    // series() {
+    //   const { transformRate } = this.$store.getters.copilot.efficiency;
+    //   let dataList = null;
+
+    //   switch (this.period) {
+    //     case "日":
+    //     case "周":
+    //       dataList = transformRate?.current;
+    //       break;
+    //     default:
+    //       dataList = [];
+    //       dataList[0] = transformRate?.previous;
+    //       dataList[1] = transformRate?.current;
+    //   }
+
+    //   return getTemplate(this.period, dataList);
+    // },
   },
   methods: {},
 };
 
-function getTemplate(period, dataList) {
+function getTemplate(period, dataList,than) {
-  const year = new Date().getFullYear();
+  // console.log('dataList',dataList);
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  //今天的时间
+  // var day2 = new Date();
+  // day2.setTime(day2.getTime());
+  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+  const today = new Date().getDate();
+  // let yesterday = new Date().getDate() -1;
   const month = new Date().getMonth() + 1;
-  return period == "日" || period == "周"
+  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-    ? [
+  const year = new Date().getFullYear();
+  if (period === '日' && than === '同比') {
+    items = [
       {
-          name: period == "日" ? "昨日" : "本周",
+        name: `去年${month}月${today}日`,
-          data: dataList ?? [],
-        },
-      ]
-    : [
-        {
-          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {
-          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+        name: `${month}月${today}日`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
     ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${month}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+      {
+        name: `${year}目标`,
+        data: dataList ? dataList[2] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  }
+  return items
 }
 </script>
 

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

@@ -1,40 +1,32 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-09 16:22:24
+ * @LastEditTime: 2024-05-29 14:09:08
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <chart-container class="bar-chart-base">
     <div class="legend">
-      <span
+      <span v-for="(item,index) in legend" :key="index" class="legend-item"
-        v-for="item in legend"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
     </div>
-    <div
+    <div ref="oeeChart" style="height:96%;width:100%"></div>
-      ref="chart"
-      style="max-width: 40vw"
-      :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";
+// import chartMixin from "@/mixins/chart.js";
-
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
   name: "BarChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -59,12 +51,13 @@ export default {
   },
   data() {
     return {
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
         grid: {
           left: "5%",
-          right: "4%",
+          right: "0%",
           bottom: "3%",
           top: "15%",
           containLabel: true,
@@ -178,11 +171,54 @@ export default {
             },
             data: [], // this.series[1].data,
           },
+          {
+            name: "", // "2024年目标值",
+            type: "line",
+            lineStyle: {
+              color: "#f3c000",
+            },
+            itemStyle: {
+              color: "#f3c000",
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#f3c000", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.55,
+                    color: "#f3c00033",
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
         ],
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
+    isOpen(val) {
+      this.canvasReset()
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -191,33 +227,78 @@ 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);
+      // if (val === false && this.isOpen === true) {
+      //   console.log(val)
+      //   this.width = 97 + '%'
+      //   this.canvasReset()
+      // } else if (val === false && this.isOpen === false) {
+      //   this.width = 100 + '%'
+      //   this.canvasReset()
+      // }
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.actualOptions)
+      this.canvasReset()
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
-      console.log(val)
+      // console.log('val', val)
       const actualOptions = JSON.parse(JSON.stringify(this.options))
+      console.log(actualOptions)
       actualOptions.series[0].data = val[0].data;
       actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
+      actualOptions.series[1].data = val?.[1]?.data;
-      actualOptions.series[1].name = val?.[1]?.name || "";
+      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);
+      this.initChart(actualOptions);
     },
   },
   mounted() {
-    this.actualOptions = this.options;
+    // if (screenfull.isEnabled) {
-    this.initOptions(this.options);
+    //   screenfull.on("change", () => {
-
+    //     this.isFullscreen = screenfull.isFullscreen;
-    if (screenfull.isEnabled) {
+    //   });
-      screenfull.on("change", () => {
+    // }
-        this.isFullscreen = screenfull.isFullscreen;
+    // if (screenfull.isEnabled) {
-      });
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
     }
   },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.oeeChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>
 
@@ -234,7 +315,7 @@ export default {
   .legend-item {
     position: relative;
     // font-size: 12px;
-    margin-right: 0.67vw;
+    margin-right: 1.3vw;
 
     &::before {
       content: "";
@@ -246,7 +327,34 @@ export default {
       margin-right: 0.22vw;
     }
   }
+ .legend-item:nth-child(3):before {
+   // width: 12px;
+   // height: 2px;
+   width: 1vw;
+   height: 0.1064vw;
+   background-color: #f3c000;
+   position: absolute;
+   top: 50%;
+   // left: -16px;
+   left: -0.951vw;
+   transform: translateY(-50%);
+ }
 
+ .legend-item:nth-child(3):after {
+   background-color: #f3c000;
+   content: "";
+   display: inline-block;
+   position: absolute;
+   // width: 6px;
+   // height: 6px;
+   width: 0.3191vw;
+   height: 0.3191vw;
+   border-radius: 100%;
+   top: 50%;
+   left: -0.851vw;
+   // left: -16px;
+   transform: translateY(-50%) translateX(50%);
+ }
   .legend-item:nth-child(1):before {
     background-color: #12f7f1;
   }

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

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

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

@@ -13,7 +13,7 @@
     <!-- <div style="flex:1;padding: 0 20%;"> -->
     <div class="chart" ref="chart"></div>
     <!-- </div> -->
-    <div class="legend" v-if="period == '月' || period == '年'">
+    <div class="legend" >
       <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
         <span class="legend-item__value">{{ lgd.value }}</span>
         <span class="legend-item__label">{{ lgd.label }}</span>
@@ -46,6 +46,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: '同比',
+    }
   },
   data() {
     return {
@@ -59,7 +63,7 @@ export default {
     },
     valueTuple() {
       const getter = this.chipRate;
-      console.log(getter)
+      // console.log(getter)
       if (this.period === "日" || this.period === "周") {
         return [
           getter.previous[this.factoryId],
@@ -103,21 +107,72 @@ export default {
       return t;
     },
     legend() {
-      const year = new Date().getFullYear();
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      //今天的时间
+      // var day2 = new Date();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
       const month = new Date().getMonth() + 1;
-      return [
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-        {
+      const year = new Date().getFullYear();
-          label:
+      if (this.period === '日' && this.than === '同比') {
-            this.period == "月"
+        items = [
-              ? `${year - 1}年${month}月良率`
+          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
-              : `${year - 1}年良率`,
+          { label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
-          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
-        },
-        {
-          label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
-          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
-        },
         ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+        ];
+      } else {
+        items = [
+          { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
+          { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null  ? 0 + "%" : (this.valueTuple[0]) + "%" },
+          { label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
+        ];
+      }
+      return items
+      // [
+      //   {
+      //     label:
+      //       this.period == "月"
+      //         ? `${year - 1}年${month}月良率`
+      //         : `${year - 1}年良率`,
+      //     value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
+      //   },
+      //   {
+      //     label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
+      //     value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
+      //   },
+      // ];
     },
   },
   mounted() {
@@ -145,6 +200,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .chip-rate-item {
     flex: 1;
     display: flex;
@@ -153,16 +209,22 @@ export default {
     justify-content: center;
     gap: 3px;
     backdrop-filter: blur(24px);
-
   .cities {
     height: 40px;
   }
 
     .chart {
+      // margin-left: 5%;
+      // width: 290px;
       align-self: stretch;
-    height: 280px;
+      // flex: 1 1 auto;
+    // align-items: center;
+      // margin:0 auto;
+      // padding: 0 10%;;
+      /* margin: 10%; */
+      /* min-width: 300px; */
+      height: 200px;
     }
-
   .legend {
     height: 80px;
     display: flex;

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" :data-title="title" :data-rate="value + '%'">
-    <div
+    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
-      class="progress-bar__rate"
-      :style="{ width: dataRate == '-' ? 0 : dataRate }"
-    ></div>
   </div>
 </template>
 
@@ -23,10 +20,10 @@ export default {
       type: Number,
       default: 0,
     },
-    total: {
+    // total: {
-      type: Number,
+    //   type: Number,
-      default: 0,
+    //   default: 0,
-    },
+    // },
     title: {
       type: String,
       default: "",
@@ -37,9 +34,11 @@ export default {
   },
   computed: {
     dataRate() {
-      return this.total == 0
+      return this.value == 0
         ? "-"
-        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+        : this.value > 1
+          ?  100 + '%'
+          : `${(parseFloat(this.value)).toFixed(0)}%`;
     },
   },
   methods: {},
@@ -78,6 +77,7 @@ export default {
       color: #11eae3;
     }
   }
+
   &:nth-child(2) {
     &:after {
       color: #0e65fd;
@@ -90,17 +90,20 @@ export default {
     height: 100%;
     width: 0;
     border-radius: 4px;
+     background: linear-gradient(to right,
+          #004c5e11 10%,
+          #004c5e,
+          #0ac0c0,
+          #11eae3);
   }
 
   &:first-child {
     .progress-bar__rate {
-      background: linear-gradient(
+      background: linear-gradient(to right,
-        to right,
           #004c5e11 10%,
           #004c5e,
           #0ac0c0,
-        #11eae3
+          #11eae3);
-      );
     }
   }
 

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 09:04:07
+ * @LastEditTime: 2024-05-29 17:03:00
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,29 +10,31 @@
   <div v-if="period == '日'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
-      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
     </div>
   </div>
   <div v-else-if="period == '周'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
-      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
     </div>
   </div>
   <div v-else-if="period == '月'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
     </div>
   </div>
   <div v-else="period == '年'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
     </div>
   </div>
 </template>
@@ -52,7 +54,11 @@ export default {
     period: {
       type: String,
       default: "日",
-    }
+    },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
     return {
@@ -60,45 +66,66 @@ export default {
     };
   },
   computed: {
-    title() {
+    titlePre() {
-      switch (this.period) {
+      console.log(this.city);
-        case "日":
+      var day1 = new Date();
-          return "今日"
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        case "周":
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
-          return  "本周"
+      const today = new Date().getDate();
-        case "月":
-          const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
-          return `${year - 1}年${month}月累计`
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-        case "年": {
       const year = new Date().getFullYear();
-          // return [
+      if (this.period === '日' && this.than === '同比') {
-           return `${year - 1}年累计`
+        return `去年${month}月${today}日`
-          // ];
+      } else if (this.period === '日' && this.than === '环比') {
-        }
+        return `${yesterday}日`
-        default:
+      } else if (this.period === '周' && this.than === '同比') {
-         return "今日"
+        return `去年本周`
+      } else if (this.period === '周' && this.than === '环比') {
+        return `上周`
+      } else if (this.period === '月' && this.than === '同比') {
+        return `去年${month}月`
+      } else if (this.period === '月' && this.than === '环比') {
+        return `${lastMonth}月`
+      } else {
+        return `${year - 1}年`
       }
     },
-    titleEnd() {
+    title() {
-      switch (this.period) {
+      var day1 = new Date();
-        // case "日":
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        //   return "今日"
+      const today = new Date().getDate();
-        // case "周":
-        //   return "本周"
-        case "月":
-          const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
-          return  `${year}年${month}月目标`
-        case "年": {
       const year = new Date().getFullYear();
-          // return [
+      if (this.period === '日' && this.than === '同比') {
+        return `${month}月${today}日`
+      } else if (this.period === '日' && this.than === '环比') {
+        return `${month}月${today}日`
+      } else if (this.period === '周' && this.than === '同比') {
+        return `本周`
+      } else if (this.period === '周' && this.than === '环比') {
+        return `本周`
+      } else if (this.period === '月' && this.than === '同比') {
+        return `${month}月`
+      } else if (this.period === '月' && this.than === '环比') {
+        return `${month}月`
+      } else {
+        return `${year}年`
+      }
+    },
+    titleTarget() {
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      const today = new Date().getDate();
+      const month = new Date().getMonth() + 1;
+      const year = new Date().getFullYear();
+      if (this.period === '月') {
+        return `${month}月目标`
+      } else if (this.period === '年') {
         return `${year}年目标`
-          // ];
-        }
-      }
       }
     },
+  },
 };
 </script>
 
@@ -109,15 +136,16 @@ export default {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1 1 auto;
   padding: 12px;
 }
 
 .std-rate-item__value {
-  flex: 1;
+  flex: 1 1 auto;
   margin: 6px;
   display: flex;
   gap: 12px;
-  height: 60px;
+  // height: auto;
   flex-direction: column;
   justify-content: center;
 }

src/views/copilot/efficiency/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-05-09 08:56:44
+ * @LastEditTime: 2024-05-30 11:13:01
  * @LastEditors: zhp
  * @Description:
 -->
@@ -9,16 +9,16 @@
 <template>
   <div class="efficiency-copilot">
     <Container title="芯片良率" icon="chip2">
-      <ChipRate :period="period" />
+      <ChipRate :period="period" :than="than" />
     </Container>
     <Container title="标准组件良率" icon="std">
-      <StdRate :period="period" />
+      <StdRate :period="period" :than="than" />
     </Container>
     <Container title="芯片OEE" icon="chip">
-      <ChipOee :period="period" />
+      <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
     </Container>
     <Container title="转化效率" icon="cube">
-      <TransformRate :period="period" />
+      <TransformRate :transformRate="transformRate" :period="period" :than="than" />
     </Container>
   </div>
 </template>
@@ -44,25 +44,45 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
-    return {};
+    return {
+      chipOeeRate: {},
+      transformRate:{}
+    };
   },
   watch: {
     period: {
       handler(val) {
-        val && this.fetchData(val);
+        val && this.fetchData(val,this.than);
+      },
+      immediate: true,
+    },
+    than: {
+      handler(val) {
+        console.log(val)
+        val && this.fetchData(this.period, val);
       },
       immediate: true,
     },
   },
   methods: {
-    fetchData(period = "日") {
+    fetchData(period = "日",than) {
       console.log(`效率驾驶舱，获取${period}数据`);
       this.$store.dispatch("copilot/initCopilot", {
         period,
         source: "efficiency",
-      });
+        than
+      }).then(() => {
+        this.$nextTick(() => {
+          this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
+          this.transformRate = this.$store.getters.copilot.efficiency.transformRate
+        })
+      })
     },
   },
 };

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

@@ -6,7 +6,7 @@ export default ({
   targetSum,
 }) => ({
   grid: {
-    left: 0,
+    left: '50%',
     right: 0,
     bottom: 0,
     top: 0,

src/views/copilot/efficiencyContainer.vue

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

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

@@ -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,81 +43,67 @@ 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() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
-      const { ftoInvest } = this.$store.getters.copilot.yield;
+     return this.$store.getters.copilot.energy.elecList;
-      let dataList = null;
+      // let dataList = null;
 
-      switch (this.period) {
+      // switch (this.period) {
-        case "日":
+      //   case "日":
-        case "周":
+      //   case "周":
-          dataList = ftoInvest?.current;
+      //     dataList = ftoInvest?.current;
-          break;
+      //     break;
-        default:
+      //   default:
-          dataList = [];
+      //     dataList = [];
-          dataList[0] = ftoInvest?.pervious;
+      //     dataList[0] = ftoInvest?.pervious;
-          dataList[1] = ftoInvest?.current;
+      //     dataList[1] = ftoInvest?.current;
-      }
+      // }
 
-      return getTemplate(this.period, dataList);
+      // return getTemplate(this.period, dataList);
     },
   },
   methods: {},
 };
-
-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>
 
 <style scoped lang="scss">

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

@@ -1,3 +1,11 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-14 08:48:34
+ * @LastEditTime: 2024-05-17 09:42:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+
 <!--
     filename: NatGas.vue
     author: liubin
@@ -7,7 +15,6 @@
 
 <template>
   <BarChartBase
-    :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="nat-gas"
@@ -16,7 +23,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";
 
 export default {
   name: "NatGasCost",
@@ -31,81 +38,37 @@ export default {
     // 城市数组的顺序必须是固定的
     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
+      // series: [],
       xAxis: cities,
     };
   },
+  // watch: {
+  //   period() {
+  //     this.series = this.$store.getters.copilot.energy.stockDOData;
+  //   }
+  // },
   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;
+      console.log('this.$store.getters.copilot.energy.gasList', this.$store.getters.copilot.energy.gasList);
-      let dataList = null;
+      return this.$store.getters.copilot.energy.gasList;
+      // let dataList = null;
+      // let  dataList = gasList
+      // switch (this.period) {
+      //   case "日":
+      //   case "周":
+      //     dataList = ftoInvest?.current;
+      //     break;
+      //   default:
+      //     dataList = [];
+      //     dataList[0] = ftoInvest?.pervious;
+      //     dataList[1] = ftoInvest?.current;
+      // }
 
-      switch (this.period) {
+      // return gasList
-        case "日":
-        case "周":
-          dataList = ftoInvest?.current;
-          break;
-        default:
-          dataList = [];
-          dataList[0] = ftoInvest?.pervious;
-          dataList[1] = ftoInvest?.current;
-      }
-
-      return getTemplate(this.period, dataList);
     },
   },
   methods: {},
 };
-
-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>
 
 <style scoped lang="scss">

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

@@ -1,18 +1,15 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 09:39:15
+ * @LastEditTime: 2024-05-17 10:34:51
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <div class="stock-monitor">
-    <MonitorItem
+    <MonitorItem :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" :stockDOData="stockDOData" />
-      :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']"
+    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :stockDOData="stockDOData" />
-      :legendList="dhgList"
-    />
-    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" />
   </div>
 </template>
 
@@ -22,23 +19,33 @@ import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
 export default {
   name: "StockMonitor",
   components: { MonitorItem: MonitorItemVue },
-  props: {},
+  props: {
+    stockDOData: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
-      dhgList: [
+      // dhgList: [
-        { name: "总库存", value: 1000 },
+      //   { name: "总库存", value: 1000 },
-        { name: "已用库存", value: 500 },
+      //   { name: "已用库存", value: 500 },
-        { name: "剩余库存", value: 500 },
+      //   { name: "剩余库存", value: 500 },
-      ],
+      // ],
-      otherList: [
+      // otherList: [
-        { name: "分类1", value: 1000 },
+      //   { name: "分类1", value: 1000 },
-        { name: "分类2", value: 1000 },
+      //   { name: "分类2", value: 1000 },
-        { name: "分类3", value: 1000 },
+      //   { name: "分类3", value: 1000 },
-        { name: "分类4", value: 1000 },
+      //   { name: "分类4", value: 1000 },
-      ],
+      // ],
     };
   },
-  computed: {},
+  computed: {
+    dhgList() {
+      console.log(this.stockDOData);
+      // console.log()
+    }
+  },
   methods: {},
 };
 </script>

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 BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
-import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
 
 export default {
   name: "WaterCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -45,80 +44,54 @@ 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() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
-      const { ftoInvest } = this.$store.getters.copilot.yield;
+      console.log('this.$store.getters.copilot.energy.waterList', this.$store.getters.copilot.energy.waterList.times);
-      let dataList = null;
+      return this.$store.getters.copilot.energy.waterList
-
+      // return getTemplate(this.period, dataList);
-      switch (this.period) {
-        case "日":
-        case "周":
-          dataList = ftoInvest?.current;
-          break;
-        default:
-          dataList = [];
-          dataList[0] = ftoInvest?.pervious;
-          dataList[1] = ftoInvest?.current;
-      }
-
-      return getTemplate(this.period, dataList);
     },
   },
   methods: {},
 };
-
-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>
 
 <style scoped lang="scss">

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

@@ -10,7 +10,9 @@
     <div class="cities">
       <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
     </div>
+    <!-- <div style="width: 90%;"> -->
       <div class="chart" ref="chart"></div>
+    <!-- </div> -->
     <div class="legend" v-if="1">
       <div class="legend-item" v-for="(lgd, index) in legendList" :key="lgd.name">
         <div>
@@ -38,10 +40,10 @@ export default {
       type: Array,
       default: () => [],
     },
-    legendList: {
+    // legendList: {
-      type: Array,
+    //   type: Array,
-      default: () => [],
+    //   default: () => [],
-    },
+    // },
     color: {
       type: Number,
       default: 1,
@@ -50,42 +52,95 @@ export default {
   data() {
     return {
       period: "月",
+      factoryId: 0,
+      // legendList:[],
       colors: ['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
-      valueTuple: [100, 100, 200],
+      // valueTuple: [100, 100, 200],
     };
   },
   computed: {
+    data() {
+      console.log('ztl', this.$store.getters.copilot.energy.gasList)
+      return this.$store.getters.copilot.energy.stockDOData
+    },
+    valueTuple() {
+      return this.data[this.factoryId]
+    },
+    legendList() {
+      // if (this.valueTuple) {
+      // if (this.valueTuple.length == 0) {
+      return this.valueTuple
+      // } else {
+      // return []
+      // }
+      // console.log(this.valueTuple)
+      // } else {
+      // return []
+      // }
+    },
     options() {
-      const year = new Date().getFullYear();
+      // const year = new Date().getFullYear();
-      const month = new Date().getMonth() + 1;
+      // const month = new Date().getMonth() + 1;
       let arr = []
+      let titleValue = ''
+      if (this.legendList != 0) {
         this.legendList.forEach(ele => {
           arr.push(ele.value)
         });
         let vt = arr
-      console.log(arr)
+        titleValue = vt.reduce(function (prev, cur, index, arr) {
-      let titleValue = vt.reduce(function (prev, cur, index, arr) {
           return prev + cur
         })
-      let subtitle = `总计/片`;
+      } else {
+        titleValue = ''
+        // this.legendList = []
+      }
 
+      let subtitle = `总计/片`;
       return getOptions({
-        single: true,
+        // single: true,
-        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        // color: this.color == 1 ? "#4CF0E8" : "#1065ff",
         titleValue,
         subtitle,
-        dataList:this.legendList,
+        dataList: this.data[this.factoryId],
-        previousSum: this.valueTuple[0],
+        // previousSum: this.valueTuple[0],
-        currentSum: this.valueTuple[1],
+        // currentSum: this.valueTuple[1],
-        targetSum: this.valueTuple[2],
+        // targetSum: this.valueTuple[2],
       });
     },
   },
+  watch: {
+    period() {
+      this.initOptions(this.options);
+    },
+    legendList() {
+      this.initOptions(this.options);
+    },
+    factoryId(newVal, oldVal) {
+      console.log(newVal);
+      // if (newVal) {
+      // this.legendList = this.data[newVal]
+      // if ( == 0) {
+      //   this.initOptions(this.options)
+      // }
+      // console.log(this.valueTuple.length)
+      // console.log(this.options)
+      this.initOptions(this.options)
+      // }
+    },
+    // chipRate() {
+    //   this.initOptions(this.options);
+    // },
+  },
   mounted() {
+    // console.log(this.legendList)
     this.initOptions(this.options);
   },
   methods: {
-    handleCityUpdate() {},
+    handleCityUpdate(id) {
+      console.log(id)
+      this.factoryId = id;
+    },
     fullscreenCallback(isFullscreen) {
       console.log("isFullscreen--->", isFullscreen);
     },
@@ -108,8 +163,14 @@ export default {
   }
 
   .chart {
+    // margin-left: 5%;
+    // width: 290px;
     align-self: stretch;
-    height: 280px;
+    flex: 1 1 auto;
+    // padding: 0 10%;
+    /* margin: 10%; */
+    /* min-width: 300px; */
+    height: 0;
   }
 
   .legend {
@@ -128,6 +189,7 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     gap: 3px;
+
     .legend-item__chart {
       display: inline-block;
       width: 14px;
@@ -136,9 +198,11 @@ export default {
       border-radius: 2px;
       // margin-right: 8px;
     }
+
     .legend-item__label {
       margin-left: 8px;
     }
+
     // }
   }
 
@@ -148,4 +212,3 @@ export default {
   }
 }
 </style>
-l

src/views/copilot/energy/index.vue

@@ -1,25 +1,29 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:41:11
+ * @LastEditTime: 2024-05-16 15:31:20
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <div class="energy-copilot">
+    <section class="top flex">
       <Container title="仓库监控·当前" icon="ware">
-      <StockMonitorVue :period="period" />
+        <StockMonitorVue :stockDOData="stockDOData" :period="period" />
       </Container>
       <Container title="天然气能耗" icon="gas">
         <NatGasVue :period="period" />
       </Container>
+    </section>
+    <section class="bottom flex">
       <Container title="电能耗" icon="flash">
         <ElecCostVue :period="period" />
       </Container>
       <Container title="水能耗" icon="water">
         <WaterCostVue :period="period" />
       </Container>
+    </section>
   </div>
 </template>
 
@@ -29,7 +33,6 @@ import StockMonitorVue from "./components/StockMonitor.vue";
 import ElecCostVue from "./components/ElecCost.vue";
 import NatGasVue from "./components/NatGas.vue";
 import WaterCostVue from "./components/WaterCost.vue";
-
 export default {
   name: "EnergyCopilot",
   components: {
@@ -46,7 +49,9 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+     stockDOData:[],
+    };
   },
   watch: {
     period: {
@@ -56,13 +61,21 @@ export default {
       immediate: true,
     },
   },
+
   methods: {
     fetchData(period = "日") {
-      console.log(`效率驾驶舱，获取${period}数据`);
+      // console.log(this.width);
+      // console.log('sidebar', this.$store.getters.sidebar);
+      console.log(`综合驾驶舱，获取${period}数据`);
+      // this.getData(this.period)
       this.$store.dispatch("copilot/initCopilot", {
         period,
-        source: "comprehensive",
+        source: "energy",
       });
+      // this.$store.dispatch("copilot/initCopilot", {
+      //   period,
+      //   source: "comprehensive",
+      // });
     },
   },
 };
@@ -71,13 +84,19 @@ export default {
 <style scoped>
 .energy-copilot {
   flex: 1;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 16px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
 }
 
-.energy-copilot > div {
+.flex {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.top>div,
+.bottom>div {
   height: 100%;
 }
 </style>

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

@@ -1,19 +1,16 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 10:30:06
+ * @LastEditTime: 2024-05-16 13:35:50
  * @LastEditors: zhp
  * @Description:
  */
 export default function ({
-  single = false,
+  // single = false,
   colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
   titleValue,
   subtitle,
   dataList,
-  previousSum,
-  currentSum,
-  targetSum,
 }) {
   return {
   grid: {
@@ -26,7 +23,7 @@ export default function ({
   // tooltip: {},
   title: {
     text: titleValue,
-    left: "49%",
+    left: "47%",
     top: "39%",
     textAlign: "center",
     textStyle: {
@@ -50,8 +47,8 @@ export default function ({
     {
       name: 'Access From',
       type: 'pie',
-    	// center: ['50%', '40%'],
+    	center: ['50%', '50%'],
-			radius: ['60%', '90%'],
+			radius: ['50%', '80%'],
       avoidLabelOverlap: false,
         labelLine: {
         show: false
@@ -62,7 +59,6 @@ export default function ({
       data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
 						name:item.name,
             value: item.value,
-
 						itemStyle:{
 							color:{
 								type: 'linear',

src/views/copilot/factoryData/bbIndex.vue

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

src/views/copilot/factoryData/cdIndex.vue

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

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

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

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

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

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

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

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

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

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

@@ -18,19 +18,11 @@ import * as echarts from "echarts";
 export default {
   name: "Energy",
   props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
     legend: {
       type: Array,
       required: true,
     },
-    xAxis: {
+    energyCockpits: {
-      type: Array,
-      required: true,
-    },
-    series: {
       type: Array,
       required: true,
     },
@@ -43,11 +35,10 @@ export default {
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
         grid: {
-          left: "3%",
+          left: "7%",
-          right: "4%",
+          right: "7%",
-          bottom: "0",
+          bottom: "8%",
           top: "15%",
-          containLabel: true,
         },
         tooltip: {
           trigger: "axis",
@@ -65,7 +56,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: [
           {
@@ -190,6 +181,11 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
@@ -216,6 +212,12 @@ export default {
     //   this.actualOptions = actualOptions;
     //   this.initOptions(actualOptions);
     // },
+    energyCockpits() {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
   },
   mounted() {
     // if (screenfull.isEnabled) {
@@ -241,17 +243,60 @@ export default {
       }, 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) {
+        let dataArr = this.energyCockpits.map((item) => {
+          return item.groupName;
+        });
+        energyxAxis = Array.from(new Set(dataArr));
+        n = energyxAxis.length;
+        seriesArr[0].data = Array.from({ length: n }, () => 0);
+        seriesArr[1].data = Array.from({ length: n }, () => 0);
+        seriesArr[2].data = Array.from({ length: n }, () => 0);
+        for (let i = 0; i < this.energyCockpits.length; i++) {
+          for (let j = 0; j < energyxAxis.length; j++) {
+            if (this.energyCockpits[i].groupName === energyxAxis[j]) {
+              if (this.energyCockpits[i].energyType === 1) {
+                seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 2) {
+                seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 3) {
+                seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
+              }
+            }
+          }
+        }
+      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.xAxis.data = energyxAxis;
-      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[0].data = seriesArr[0].data;
-      actualOptions.series[1].data = this.series[1].data;
+      actualOptions.series[0].name = seriesArr[0].name;
-      actualOptions.series[1].name = this.series[1].name;
+      actualOptions.series[1].data = seriesArr[1].data;
-      actualOptions.series[2].data = this.series[2].data;
+      actualOptions.series[1].name = seriesArr[1].name;
-      actualOptions.series[2].name = this.series[2].name;
+      actualOptions.series[2].data = seriesArr[2].data;
+      actualOptions.series[2].name = seriesArr[2].name;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

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

@@ -1,77 +1,189 @@
 <template>
-  <dv-scroll-board
+  <div class="order-container">
-    v-if="aa"
+    <div class="table">
-    :config="config"
+      <dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" />
-    style="width: 100%; height: 100%"
+    </div>
-  />
+    <div class="chart">
+      <div class="chart-title">
+        <span class="title">生产情况</span>
+        <span class="line"></span>
+      </div>
+      <barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
+    </div>
+  </div>
+
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
+import barChartBase from './BarChartBase'
 export default {
   name: "Order",
+  components: {
+    barChartBase,
+  },
   data() {
     return {
-      aa: true,
+      showTable: true,
       config: {
-        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
+        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],
+        columnWidth: [100],
         align: ["center"],
         carousel: "page",
       },
     };
   },
-  mounted() {
+  props: {
-    this.getTableList();
+    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.aa = false;
+      this.showTable = false;
       debounce(() => {
         this.initTable();
       }, 500)();
     },
     initTable() {
-      this.aa = true;
+      this.showTable = true;
     },
     getTableList() {
-      let _this = this;
+      let outArr = [];
-      setTimeout(
+      if (this.prodOrder.length > 0) {
-        (function name() {
+        for (let i = 0; i < this.prodOrder.length; i++) {
-          _this.config.data = [
+          let arr = [];
-            ["1", "行1列1", "行1列2", "行1列3", "50%"],
+          // arr.push(i + 1);
-            ["2", "行2列1", "行2列2", "行2列3", "50%"],
+          arr.push(
-            ["3", "行3列1", "行3列2", "行3列3", "50%"],
+            `<span title=${this.prodOrder[i].workOrderNumber || ""}>${
-            ["4", "行4列1", "行4列2", "行4列3", "50%"],
+            this.prodOrder[i].workOrderNumber || ""
-            ["5", "行5列1", "行5列2", "行5列3", "50%"],
+            }</span>`
-            ["6", "行6列1", "行6列2", "行6列3", "50%"],
-            ["7", "行7列1", "行7列2", "行7列3", "50%"],
-            ["8", "行8列1", "行8列2", "行8列3", "50%"],
-            ["9", "行9列1", "行9列2", "行9列3", "50%"],
-            ["10", "行10列1", "行10列2", "行10列3", "50%"],
-            ["11", "行11列1", "行11列2", "行11列3", "50%"],
-            ["12", "行12列1", "行12列2", "行12列3", "50%"],
-            ["13", "行13列1", "行13列2", "行13列3", "50%"],
-            ["14", "行14列1", "行14列2", "行14列3", "50%"],
-            ["15", "行15列1", "行15列2", "行15列3", "50%"],
-            ["16", "行16列1", "行16列2", "行16列3", "50%"],
-            ["17", "行17列1", "行17列2", "行17列3", "50%"],
-            ["18", "行18列1", "行18列2", "行18列3", "50%"],
-            ["19", "行19列1", "行19列2", "行19列3", "50%"],
-            ["20", "行20列1", "行20列2", "行20列3", "50%"],
-          ];
-        })(),
-        2000
           );
-      this.initTable();
+          arr.push(
+            `<span title=${this.prodOrder[i].inStatus || ""}>${
+            this.prodOrder[i].inStatus || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].plannedInvestment || ""}>${
+            this.prodOrder[i].plannedInvestment || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
+            }</span>`
+          );
+          arr.push(`<span style="display:inline-block;width:45px;">${
+            this.prodOrder[i].productionProgress
+            ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+              : "0%"
+          }</span>
+            <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>
+<style lang="scss" scoped>
+.order-container{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .table{
+    flex: 1;
+  }
+        .chart {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          // gap: 6px;
+          .chart-title {
+            margin-top: 5px;
+            // flex: 1;
+            // gap: 6px;
+            height: 1.5vw;
+            width: 100%;
+            display: flex;
+            align-items: center;
+
+            // flex-direction: column;
+            // flex-wrap: nowrap;
+            // justify-content: end
+            // margin-top: 10px;
+            .title {
+              // flex: 1;
+              font-weight: 400;
+              font-size: 24px;
+              // width: 5vw;
+              color: #FFFFFF;
+              line-height: 24px;
+              text-align: left;
+              font-style: normal;
+              display: inline-block;
+            }
+
+            .line {
+              flex: 1;
+              // width: 80%;
+              height: 1px; // display: inline-block;
+              border: 1px solid;
+              // display: inline-block;
+              border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
+              backdrop-filter: blur(3px);
+            }
+          }
+        }
+}
+</style>

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

@@ -1,12 +1,10 @@
 <template>
   <div class="prod-monitor">
+
+    <div class="data">
       <div class="fto-box">
         <div class="icon">
-        <img
+          <img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
-          src="./../assets/images/fto.png"
-          alt=""
-          style="width: 2.1875vw; height: 2.2875vw"
-        />
         </div>
         <div class="middle-box">
           <span class="type">玻璃类型</span>
@@ -14,16 +12,12 @@
         </div>
         <div class="right-box">
           <span class="type">投入数量</span>
-        <span class="num">8391222</span>
+          <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
         </div>
       </div>
       <div class="std-box">
         <div class="icon">
-        <img
+          <img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
-          src="./../assets/images/std.png"
-          alt=""
-          style="width: 2.1875vw; height: 2.1875vw"
-        />
         </div>
         <div class="middle-box">
           <div class="separate">
@@ -33,7 +27,9 @@
             </div>
             <div>
               <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+              <span class="type-name">{{
+              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
+              }}</span>
             </div>
           </div>
         </div>
@@ -41,22 +37,20 @@
           <div class="separate">
             <div>
               <span class="type">生产数量</span>
-            <span class="num">783</span>
+              <span class="num">{{
+              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
+              }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num">96%</span>
+              <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
             </div>
           </div>
         </div>
       </div>
       <div class="chip-box">
         <div class="icon">
-        <img
+          <img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
-          src="./../assets/images/chip.png"
-          alt=""
-          style="width: 2.1875vw; height: 2.1875vw"
-        />
         </div>
         <div class="middle-box">
           <div class="separate">
@@ -66,7 +60,9 @@
             </div>
             <div>
               <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+              <span class="type-name">{{
+              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
+              }}</span>
             </div>
           </div>
         </div>
@@ -74,22 +70,20 @@
           <div class="separate">
             <div>
               <span class="type">生产数量</span>
-            <span class="num">783</span>
+              <span class="num">{{
+              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
+              }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num">96%</span>
+              <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
             </div>
           </div>
         </div>
       </div>
-    <div class="bipv-box">
+      <div class="bipv-box" v-if="companyId != 0">
         <div class="icon">
-        <img
+          <img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
-          src="./../assets/images/bipv.png"
-          alt=""
-          style="width: 2.1875vw; height: 2.1875vw"
-        />
         </div>
         <div class="middle-box">
           <div class="separate">
@@ -99,7 +93,9 @@
             </div>
             <div>
               <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+              <span class="type-name">{{
+              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
+              }}</span>
             </div>
           </div>
         </div>
@@ -107,25 +103,154 @@
           <div class="separate">
             <div>
               <span class="type">生产数量</span>
-            <span class="num">783</span>
+              <span class="num">{{
+              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
+              }}</span>
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num">96%</span>
+              <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="chart">
+      <div class="chart-title">
+        <span class="title">生产情况</span>
+        <span class="line"></span>
+      </div>
+      <barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
+        style="height: 0;flex:1">
+      </barChartBase>
+    </div>
+  </div>
 </template>
 <script>
+import { number } from 'echarts';
+import barChartBase from './ChipOee'
+
 export default {
   name: "ProdMonitor",
+  components: {
+    barChartBase,
+  },
+  data() {
+    return {
+      bipvVis:false,
+      msgObj: {
+        stand: {},
+        chip: {},
+        bipv: {},
+      },
+    };
+  },
+  props: {
+    period: {
+      type: Number,
+      default: 1,
+    },
+    companyId: {
+      type: Number,
+      default:0
+    },
+    than: {
+      type: String,
+      default: '同比',
+    },
+    prodOutPut: {
+      type: Array,
+      default: [],
+    },
+    prodFto: {
+      type: Array,
+      default: [],
+    },
+    factoryData: {
+      type: Object,
+      default: {},
+    },
+    showBipv: {
+      type: Boolean,
+      default:true,
+    }
+  },
+  watch: {
+    prodOutPut() {
+      this.makeData();
+    },
+  },
+  mounted() {
+    this.makeData();
+  },
+  methods: {
+    makeData() {
+      console.log('msgObj', this.msgObj);
+      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;
+  flex-direction: column;
+  .chart{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    // gap: 6px;
+    .chart-title{
+      margin-top: 5px;
+      // flex: 1;
+      // gap: 6px;
+      height: 1.5vw;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      // flex-direction: column;
+      // flex-wrap: nowrap;
+      // justify-content: end
+      // margin-top: 10px;
+      .title{
+        // flex: 1;
+         font-weight: 400;
+          font-size: 24px;
+          // width: 5vw;
+          color: #FFFFFF;
+          line-height: 24px;
+          text-align: left;
+          font-style: normal;
+          display: inline-block;
+      }
+      .line{
+        flex: 1;
+        // width: 80%;
+        height: 1px;        // display: inline-block;
+        border: 1px solid;
+        // display: inline-block;
+        border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
+        backdrop-filter: blur(3px);
+      }
+    }
+  }
+  .data{
+      flex: 1;
       display: flex;
         gap: 6px;
         flex-direction: column;
@@ -137,18 +262,22 @@ export default {
           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;
@@ -159,6 +288,7 @@ export default {
             letter-spacing: 2px;
             width: 6.25vw;
           }
+
           .type1 {
             display: inline-block;
             font-size: 0.9375vw;
@@ -171,6 +301,7 @@ export default {
             text-align: justify;
             text-align-last: justify;
           }
+
           .type-name {
             font-size: 1.042vw;
             color: #fff;
@@ -178,22 +309,21 @@ export default {
             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(
+            border-image: linear-gradient(180deg,
-          180deg,
                 rgba(0, 176, 243, 0),
-          rgba(31, 143, 255, 1)
+                rgba(31, 143, 255, 1)) 2 2;
-        )
-        2 2;
             position: absolute;
             left: 0;
             top: 4px;
           }
+
           .num {
             font-size: 1.042vw;
             color: #fff;
@@ -201,52 +331,53 @@ export default {
             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(
+            border-image: linear-gradient(180deg,
-          180deg,
                 rgba(0, 176, 243, 0),
-          rgba(31, 143, 255, 1)
+                rgba(31, 143, 255, 1)) 2 2;
-        )
-        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(
+            border-image: linear-gradient(135deg,
-          135deg,
                 rgba(0, 176, 243, 0),
                 rgba(31, 143, 255, 1),
-          rgba(31, 143, 255, 0)
+                rgba(31, 143, 255, 0)) 2 2;
-        )
-        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 {
@@ -256,17 +387,16 @@ export default {
             width: 1px;
             height: 3.125vw;
             border: 1px solid;
-      border-image: linear-gradient(
+            border-image: linear-gradient(135deg,
-          135deg,
                 rgba(0, 176, 243, 0),
                 rgba(31, 143, 255, 1),
-          rgba(31, 143, 255, 0)
+                rgba(31, 143, 255, 0)) 2 2;
-        )
-        2 2;
             position: absolute;
             left: 0;
             top: -2px;
           }
         }
   }
+
+}
 </style>

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

@@ -0,0 +1,342 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-21 14:25:19
+ * @LastEditTime: 2024-05-21 14:25:19
+ * @LastEditors: zhp
+ * @Description:
+-->
+<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

@@ -7,17 +7,14 @@ import * as echarts from "echarts";
 export default {
   name: "Store",
   props: {
-    vHeight: {
+    stock: {
-      type: Number,
+      type: Object,
-      default: 34,
-    },
-    xAxis: {
-      type: Array,
       required: true,
     },
-    series: {
+  },
-      type: Array,
+  computed: {
-      required: true,
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
     },
   },
   data() {
@@ -27,11 +24,10 @@ export default {
       chart: "",
       options: {
         grid: {
-          left: "3%",
+          left: "8%",
           right: "1%",
-          bottom: "0",
+          bottom: "8%",
-          top: "10%",
+          top: "15%",
-          containLabel: true,
         },
         tooltip: {},
         xAxis: {
@@ -47,7 +43,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: {
           name: "单位/片",
@@ -116,18 +112,11 @@ export default {
     };
   },
   watch: {
-    series(val) {
+    stock(val) {
-      if (!val) {
+      this.initChart();
-        this.initOptions(this.options);
+    },
-        return;
+    isOpen(val) {
-      }
+      this.canvasReset();
-      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() {
@@ -154,13 +143,20 @@ export default {
       }, 500)();
     },
     initChart() {
+      let xAxis = Object.keys(this.stock) || [];
+      let data = [];
+      if (xAxis.length > 0) {
+        data = xAxis.map((item) => {
+          return this.stock[item].total;
+        });
+      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryStoreChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.xAxis.data = xAxis;
-      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[0].data = data;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/hdIndex.vue

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

src/views/copilot/factoryData/index.vue

@@ -1,33 +1,25 @@
 <template>
   <div class="factory-layout">
-    <FactoryDataHeader
+    <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
-      :companyName="companyName"
+      @update:than="updateThan" @update:period="updatePeriod" />
-      :companyId="companyId"
-      :period="period"
-      @updateCompany="updateCompany"
-      @update:period="period = $event"
-    />
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor />
+          <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
+            :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
         </db-container>
-        <db-container title="仓库监控.当前" icon="store">
+        <db-container title="工单监控" icon="order">
-          <store :series="series" :xAxis="xAxis" />
+          <order :prodOrder="prodOrder" />
-        </db-container>
-      </section>
-      <section class="bottom flex">
-        <db-container title="能源监控" icon="energy">
-          <energy
-            :legend="energyLegend"
-            :series="energySeries"
-            :xAxis="energyxAxis"
-          />
-        </db-container>
-        <db-container title="订单监控" icon="order">
-          <order />
         </db-container>
+        <!-- <db-container title="" icon="store"> -->
+        <!-- <store :stock="stock" /> -->
+        <!-- </db-container> -->
       </section>
+      <!-- <section class="bottom flex"> -->
+      <!-- <db-container title="" icon="energy"> -->
+      <!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
+      <!-- </db-container> -->
+      <!-- </section> -->
     </div>
     <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
   </div>
@@ -36,104 +28,137 @@
 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 { deepClone } from "@/utils";
-import Energy from "./components/Energy.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",
+  name: "factoryData",
   components: {
     FactoryDataHeader,
     DbContainer: Container,
     ProdMonitor,
-    Store,
+    // Store,
-    Energy,
+    // Energy,
     Order,
   },
   data() {
-    const year = new Date().getFullYear();
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
-      companyId: "1",
+      companyId: 0,
       companyName: "瑞昌中建材光电材料有限公司",
-      period: "日",
+      period: 1,
-
+      show:false,
+      than: '同比',
+      data:{},
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      factoryData: {
+        preDataDetail: [],
+        currentDataDetail: {},
+        targetDataDetail: [],
+      },
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
       energyLegend: [
         { label: "电", color: "#FFD160" },
         { label: "水", color: "#2760FF" },
         { label: "气", color: "#12FFF5" },
       ],
-      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
-
-      legend: [
-        { label: `${year - 1}年`, color: "#12f7f1" },
-        // { label: `${year}年`, color: "#58adfa" },
-      ],
-      xAxis: cities,
     };
   },
-  computed: {
-    energySeries() {
-      return [
-        {
-          name: "电",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-        {
-          name: "水",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-        {
-          name: "气",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-      ];
-    },
-    series() {
-      // const ftoInvest = this.$store.getters.home.ftoInvest;
-      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
-      return [
-        {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-      ];
-      // }
-
-      // return [
-      //   {
-      //     name: `${new Date().getFullYear() - 1}年`,
-      //     data: ftoInvest.previous,
-      //   },
-      //   {
-      //     name: `${new Date().getFullYear()}年`,
-      //     data: ftoInvest.current,
-      //   },
-      // ];
-    },
-  },
   mounted() {
-    this.getMes1();
+    this.getMes();
   },
   methods: {
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;
+      this.getMes();
     },
-    getMes1() {
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
       cockpitDataMonitor({
-        factorys: [1],
+        factorys: [this.companyId],
-        date: 4,
+        date: this.period,
+        mode:this.than === '同比' ? 0 : 1
       }).then((res) => {
         console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.prodOrder = res.data.prodWorkOrderDO || [];
+        let prodOutputFtoListRes = res.data.prodOutputFtoDO || [];
+        let preFtoData = res.data.previousProdOutputFtoDO || [];
+        let preData = res.data.previousProdOutputMonitorShDO || [];
+        let factoryListResponse = res.data.prodOutputMonitorShDO || [];
+        let targetListResponse = res.data.prodTargetMonitorDO || [];
+        let preDataDetail = []
+        let currentDataDetail = []
+        let targetDataDetail = []
+        if (prodOutputFtoListRes) {
+          for (const factory of prodOutputFtoListRes) {
+            console.log(factory);
+            currentDataDetail[0] = factory.chipInput
+          }
+        }
+        if (preFtoData) {
+          for (const factory of preFtoData) {
+            console.log(factory);
+            // const fId = this.getPreFactoryId(factory);
+            // const preFId = getPreFactoryId(factory);
+            // if (fId) {
+            preDataDetail[0] = factory.previousYearChipInput
+            // }
+            // if (preFId) {
+            // ftoInvest.previous[fId] = factory.previousYearChipInput;
+            // }
+          }
+        }
+        if (preData && preData[0] != null) {
+          for (const factory of preData) {
+            if (factory.previousGlassType === 0) {
+              preDataDetail[1] = factory.previousYearOutputNumber
+            } else if (factory.previousGlassType === 1) {
+              preDataDetail[2] = factory.previousYearOutputNumber
+            }
+          }
+        }
+        if (targetListResponse && targetListResponse[0] != null) {
+          for (const factory of targetListResponse) {
+            targetDataDetail[0] = factory.ftoInput
+            // if (factory.previousGlassType === 0) {
+              targetDataDetail[1] = factory.chipYield
+            // } else if (factory.previousGlassType === 1) {
+            targetDataDetail[2] = factory.componentYield
+
+            // }
+          }
+        }
+        // console.log('ftoInvest',ftoInvest)
+        if (factoryListResponse && factoryListResponse[0] != null) {
+          for (const factory of factoryListResponse) {
+            // targetDataDetail[0] = factory.ftoInput
+            if (factory.glassType === 0) {
+              currentDataDetail[1] = factory.outputNumber
+            } else if (factory.glassType === 1) {
+              currentDataDetail[2] = factory.outputNumber
+            }
+          }
+        }
+        this.factoryData.preDataDetail = preDataDetail
+        this.factoryData.currentDataDetail = currentDataDetail
+        this.factoryData.targetDataDetail = targetDataDetail
+        console.log(' this.factoryData', this.factoryData);
       });
     },
   },

src/views/copilot/factoryData/jmsIndex.vue

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

src/views/copilot/factoryData/ksIndex.vue

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

src/views/copilot/factoryData/oldIndex.vue

@@ -0,0 +1,146 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-21 13:24:03
+ * @LastEditTime: 2024-05-21 13:24:03
+ * @LastEditors: zhp
+ * @Description:
+-->
+<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/factoryData/zzIndex.vue

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

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

@@ -1,28 +1,37 @@
 <!--
-    filename: BipvOutput.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-07 10:04:53
-    date: 2024-04-17 09:55:12
+ * @LastEditTime: 2024-05-29 13:17:38
-    description: 
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
-  <DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
+  <noDoubleRingWrapper data-source="BIPV产出" :period="period" :than="than" />
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+// import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+import noDoubleRingWrapper from "./sub/ring/noDoubleRingWrapper.vue";
+
 
 export default {
   name: "BipvOutput",
-  components: { DoubleRingWrapperVue },
+  components: { noDoubleRingWrapper },
   props: {
     period: {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
-    return {};
+    return {
+      show: false,
+    };
   },
 };
 </script>

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

@@ -33,74 +33,215 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   computed: {
     legend() {
-      switch (this.period) {
+      let items = [];
-        case "日":
+      var day1 = new Date();
-          return [{ label: "昨日", color: "#12f7f1" }];
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        case "周":
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
-          return [{ label: "本周", color: "#12f7f1" }];
+      //今天的时间
-        case "月": {
+      // var day2 = new Date();
-          const year = new Date().getFullYear();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
       const month = new Date().getMonth() + 1;
-          return [
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
       const year = new Date().getFullYear();
-          return [
+      if (this.period === '日' && this.than === '同比') {
-            { label: `${year - 1}年`, color: "#12f7f1" },
+        items = [
-            { label: `${year}年`, color: "#58adfa" },
+          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          ];
+          { label: `${month}月${today}日`, color: "#58adfa" },
-        }
+        ];
-        default:
+      } else if (this.period === '日' && this.than === '环比') {
-          return [
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `上周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
+          // { label: `${year}年目标`, value: valueTuple[2] },
         ];
       }
+      return items
+      // switch (this.period) {
+      //   case "日":
+      //     return [{ label: "昨日", color: "#12f7f1" }];
+      //   case "周":
+      //     return [{ label: "本周", color: "#12f7f1" }];
+      //   case "月": {
+      //     const year = new Date().getFullYear();
+      //     const month = new Date().getMonth() + 1;
+      //     return [
+      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+      //       { label: `${year}年${month}月`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   case "年": {
+      //     const year = new Date().getFullYear();
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   default:
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      // }
     },
     series() {
       const { chipInvest } = this.$store.getters.copilot.yield;
       let dataList = null;
       switch (this.period) {
         case "日":
+          dataList = [];
+          dataList[0] = chipInvest?.previous;
+          dataList[1] = chipInvest?.current;
         case "周":
-          dataList = chipInvest?.current;
+          dataList = []
+          dataList[0] = chipInvest?.previous;
+          dataList[1] = chipInvest?.current;
           break;
         default:
           dataList = [];
           dataList[0] = chipInvest?.previous;
           dataList[1] = chipInvest?.current;
       }
-      return getTemplate(this.period, dataList);
+      return getTemplate(this.period, dataList,this.than);
     },
   },
 };
 
-function getTemplate(period, dataList) {
+function getTemplate(period, dataList,than) {
-  const year = new Date().getFullYear();
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  //今天的时间
+  // var day2 = new Date();
+  // day2.setTime(day2.getTime());
+  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+  const today = new Date().getDate();
+  // let yesterday = new Date().getDate() -1;
   const month = new Date().getMonth() + 1;
-  return period == "日" || period == "周"
+  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-    ? [
+  const year = new Date().getFullYear();
+  if (period === '日' && than === '同比') {
+    items = [
       {
-          name: period == "日" ? "昨日" : "本周",
+        name: `去年${month}月${today}日`,
-          data: dataList ?? [],
-        },
-      ]
-    : [
-        {
-          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {
-          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
     ];
   }
+  return items
+}
 </script>

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

@@ -1,12 +1,13 @@
 <!--
-    filename: ChipOutput.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-07 10:04:53
-    date: 2024-04-17 09:55:12
+ * @LastEditTime: 2024-05-27 16:36:29
-    description: 
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
-  <DoubleRingWrapperVue data-source="芯片产出" :period="period" />
+  <DoubleRingWrapperVue data-source="芯片产出" :period="period" :than="than" />
 </template>
 
 <script>
@@ -20,6 +21,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
     return {};

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

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/ftoBarChartBase.vue";
 
 export default {
   name: "FtoInvest",
@@ -33,76 +33,217 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   computed: {
     legend() {
-      switch (this.period) {
+      let items = [];
-        case "日":
+      var day1 = new Date();
-          return [{ label: "昨日", color: "#12f7f1" }];
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
-        case "周":
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
-          return [{ label: "本周", color: "#12f7f1" }];
+      //今天的时间
-        case "月": {
+      // var day2 = new Date();
-          const year = new Date().getFullYear();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
       const month = new Date().getMonth() + 1;
-          return [
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
       const year = new Date().getFullYear();
-          return [
+      if (this.period === '日' && this.than === '同比') {
-            { label: `${year - 1}年`, color: "#12f7f1" },
+        items = [
-            { label: `${year}年`, color: "#58adfa" },
+          { label: `去年${month}月${today}日`, color: "#12f7f1" },
-          ];
+          { label: `${month}月${today}日`, color: "#58adfa" },
-        }
+        ];
-        default:
+      } else if (this.period === '日' && this.than === '环比') {
-          return [
+        items = [
+          { label: `${yesterday}日`, color: "#12f7f1" },
+          { label: `${month}月${today}日`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `去年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `上周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `去年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${lastMonth}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
+          // { label: `${month}月目标`, value: valueTuple[2] },
+        ];
+      } else {
+        items = [
           { label: `${year - 1}年`, color: "#12f7f1" },
           { label: `${year}年`, color: "#58adfa" },
+          // { label: `${year}年目标`, value: valueTuple[2] },
         ];
       }
+      return items
+      // switch (this.period) {
+      //   case "日":
+      //     return [{ label: "昨日", color: "#12f7f1" }];
+      //   case "周":
+      //     return [{ label: "本周", color: "#12f7f1" }];
+      //   case "月": {
+      //     const year = new Date().getFullYear();
+      //     const month = new Date().getMonth() + 1;
+      //     return [
+      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+      //       { label: `${year}年${month}月`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   case "年": {
+      //     const year = new Date().getFullYear();
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      //   }
+      //   default:
+      //     return [
+      //       { label: `${year - 1}年`, color: "#12f7f1" },
+      //       { label: `${year}年`, color: "#58adfa" },
+      //     ];
+      // }
     },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
+      // console.log('ftoInvest', this.$store.getters.copilot.yield);
       let dataList = null;
-
+      // console.log(ftoInvest)
       switch (this.period) {
         case "日":
+          dataList = [];
+          dataList[0] = ftoInvest?.previous;
+          dataList[1] = ftoInvest?.current;
         case "周":
-          dataList = ftoInvest?.current;
+          dataList = [];
+          dataList[0] = ftoInvest?.previous;
+          dataList[1] = ftoInvest?.current;
           break;
         default:
           dataList = [];
           dataList[0] = ftoInvest?.previous;
           dataList[1] = ftoInvest?.current;
       }
-
+      return getTemplate(this.period, dataList,this.than);
-      return getTemplate(this.period, dataList);
     },
   },
 };
 
-function getTemplate(period, dataList) {
+function getTemplate(period, dataList,than) {
-  const year = new Date().getFullYear();
+  let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  //今天的时间
+  // var day2 = new Date();
+  // day2.setTime(day2.getTime());
+  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+  const today = new Date().getDate();
+  // let yesterday = new Date().getDate() -1;
   const month = new Date().getMonth() + 1;
-  return period == "日" || period == "周"
+  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
-    ? [
+  const year = new Date().getFullYear();
+  if (period === '日' && than === '同比') {
+    items = [
       {
-          name: period == "日" ? "昨日" : "本周",
+        name: `去年${month}月${today}日`,
-          data: dataList ?? [],
-        },
-      ]
-    : [
-        {
-          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
         data: dataList ? dataList[0] : [],
       },
       {
-          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '日' && than === '环比') {
+    items = [
+      {
+        name: `${yesterday}日`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月${today}日`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '同比') {
+    items = [
+      {
+        name: `去年本周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '周' && than === '环比') {
+    items = [
+      {
+        name: `上周`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `本周`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '同比') {
+    items = [
+      {
+        name: `去年${month}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else if (period === '月' && than === '环比') {
+    items = [
+      {
+        name: `${lastMonth}月`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${month}月`,
+        data: dataList ? dataList[1] : [],
+        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+      },
+    ];
+  } else {
+    items = [
+      {
+        name: `${year - 1}年`,
+        data: dataList ? dataList[0] : [],
+      },
+      {
+        name: `${year}年`,
         data: dataList ? dataList[1] : [],
         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
       },
     ];
   }
+  return items
+}
 </script>

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

@@ -1,12 +1,13 @@
 <!--
-    filename: StdOutput.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-07 10:04:53
-    date: 2024-04-17 09:55:12
+ * @LastEditTime: 2024-05-27 14:25:57
-    description: 
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
-  <DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
+  <DoubleRingWrapperVue data-source="标准组件产出" :period="period" :than="than" />
 </template>
 
 <script>
@@ -20,6 +21,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
     return {};

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

@@ -1,15 +1,16 @@
 <!--
-    filename: DoubleRingChart.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-20 13:32:59
-    date: 2024-04-17 11:01:55
+ * @LastEditTime: 2024-05-30 13:35:00
-    description:
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="double-ring-chart">
-    <div class="double-ring-chart__container">
+    <!-- <div> -->
-      <div ref="chart" style="height: 90%;"></div>
+      <div ref="chart" class="double-ring-chart__container"></div>
-    </div>
+    <!-- </div> -->
     <!-- style="{ height: vHeight + 'vh' }" -->
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
@@ -22,12 +23,12 @@
 
 <script>
 import chartMixin from "@/mixins/chart.js";
-import fullscreenMixin from "@/mixins/fullscreen.js";
+import screenfull from "screenfull";
 import getOptions from "../../../options/double-ring-chart-options";
 
 export default {
   name: "DoubleRingChart",
-  mixins: [chartMixin, fullscreenMixin],
+  mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -45,9 +46,15 @@ export default {
       type: String,
       default: null,
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
-    return {};
+    return {
+      isFullscreen: false,
+    };
   },
   filters: {
     numberFilter(val) {
@@ -87,78 +94,177 @@ export default {
     },
 
     options() {
+      const today = new Date().getDate();
       const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
       const vt = this.valueTuple;
+      let items = [];
+      var day1 = new Date();
+      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+      //今天的时间
+      // var day2 = new Date();
+      // day2.setTime(day2.getTime());
+      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
+      // const today = new Date().getDate();
+      // let yesterday = new Date().getDate() -1;
+      // const month = new Date().getMonth() + 1;
+      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
+      // const year = new Date().getFullYear();
+      if (this.period === '日' && this.than === '同比') {
+        items = [
+          { label: `${month}月${today}日累计`,},
+          { label: `去年${month}月${today}日累计` },
+        ];
+      } else if (this.period === '日' && this.than === '环比') {
+        items = [
+          { label: `${month}月${today}日累计`},
+          { label: `${yesterday}日累计`},
+        ];
+      } else if (this.period === '周' && this.than === '同比') {
+        items = [
+          { label: `本周累计`,},
+          { label: `去年本周累计`},
+        ];
+      } else if (this.period === '周' && this.than === '环比') {
+        items = [
+          { label: `本周累计`,},
+          { label: `上周累计`,},
+        ];
+      } else if (this.period === '月' && this.than === '同比') {
+        items = [
+          { label: `${month}月累计`,},
+          { label: `去年${month}月累计`, },
+          { label: `${month}月目标`,},
+        ];
+      } else if (this.period === '月' && this.than === '环比') {
+        items = [
+          { label: `${month}月累计`,  },
+          { label: `${lastMonth}月累计`,},
+          { label: `${month}月目标`, },
+        ];
+      } else {
+        items = [
+          { label: `${year}年累计`, },
+          { label: `${year - 1}年累计` },
+          { label: `${year}年目标` },
+        ];
+      }
       let titleValue =
           vt[0] != null && vt[2] != null && vt[2] !== 0
             ? `${vt[1] / vt[2]}%`
             : "0%",
         subtitle =
-          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+      this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
-
+      console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
+      console.log(items)
       return getOptions({
         titleValue,
         subtitle,
+        currentName: items[0].label,
+        preName: items[1].label,
         previousSum: this.valueTuple[0],
         currentSum: this.valueTuple[1],
-        targetSum: this.valueTuple[2],
+        targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
       });
     },
 
     legendItems() {
-      return calculateItems(this.period, this.valueTuple);
+      return calculateItems(this.period, this.valueTuple,this.than);
     },
   },
   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.options)
+    },
     legendItems() {
       this.initOptions(this.options);
     },
   },
   mounted() {
     this.initOptions(this.options);
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
   },
   methods: {
     // fullscreen mixin 需要的回调
-    fullscreenCallback(isFullscreen) {
+    // fullscreenCallback(isFullscreen) {
-      console.log("isFullscreen--->", isFullscreen);
+    //   console.log("isFullscreen--->", isFullscreen);
-    },
+    // },
   },
 };
 
-function calculateItems(period, valueTuple) {
+function calculateItems(period, valueTuple,than) {
   let items = [];
+  var day1 = new Date();
+  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
+  //今天的时间
+  // var day2 = new Date();
+  // day2.setTime(day2.getTime());
+  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
   const today = new Date().getDate();
+  // let yesterday = new Date().getDate() -1;
   const month = new Date().getMonth() + 1;
+  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 -1;
   const year = new Date().getFullYear();
-  switch (period) {
+  if (period === '日' && than === '同比') {
-    case "日":
     items = [
       { label: `${month}月${today}日累计`, value: valueTuple[1] },
       { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
     ];
-      break;
+  } else if (period === '日' && than === '环比') {
-    case "周":
+    items = [
+      { label: `${month}月${today}日累计`, value: valueTuple[1] },
+      { label: `${yesterday}日累计`, value: valueTuple[0] },
+    ];
+  } else if (period === '周' && than === '同比') {
     items = [
       { label: `本周累计`, value: valueTuple[1] },
       { label: `去年本周累计`, value: valueTuple[0] },
     ];
-      break;
+  } else if (period === '周' && than === '环比') {
-    case "月":
+    items = [
+      { label: `本周累计`, value: valueTuple[1] },
+      { label: `上周累计`, value: valueTuple[0] },
+    ];
+  } else if (period === '月' && than === '同比') {
     items = [
       { label: `${month}月累计`, value: valueTuple[1] },
       { label: `去年${month}月累计`, value: valueTuple[0] },
       { label: `${month}月目标`, value: valueTuple[2] },
     ];
-      break;
+  } else if (period === '月' && than === '环比') {
-    case "年":
+    items = [
+      { label: `${month}月累计`, value: valueTuple[1] },
+      { label: `${lastMonth}月累计`, value: valueTuple[0] },
+      { label: `${month}月目标`, value: valueTuple[2] },
+    ];
+  } else {
     items = [
       { label: `${year}年累计`, value: valueTuple[1] },
       { label: `${year - 1}年累计`, value: valueTuple[0] },
       { label: `${year}年目标`, value: valueTuple[2] },
     ];
-      break;
   }
+  // switch (period) {
+  //   case "年":
+  //     items = [
+  //       { label: `${year}年累计`, value: valueTuple[1] },
+  //       { label: `${year - 1}年累计`, value: valueTuple[0] },
+  //       { label: `${year}年目标`, value: valueTuple[2] },
+  //     ];
+  //     break;
+  // }
   return items;
 }
 </script>
@@ -171,10 +277,11 @@ function calculateItems(period, valueTuple) {
 }
 
 .double-ring-chart__container {
-  flex:1;
+  flex:1 1 auto;
   padding: 0 10%;
   /* margin: 10%; */
   /* min-width: 300px; */
+  align-self: stretch;
   height: 0;
 }
 

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

@@ -7,22 +7,12 @@
 
 <template>
   <div class="double-ring-wrapper">
-    <template v-if="period == '月' || period == '年'">
+    <template>
-      <copilot-select
+      <copilot-select @update:active="handleActiveUpdate" :options="cityOptions" />
-        @update:active="handleActiveUpdate"
-        :options="cityOptions"
-      />
       <div class="flex-1 stretch">
-        <DoubleRingChartVue
+        <DoubleRingChartVue :data-source="dataSource" :period="period" :than="than" :factoryId="factoryId" />
-          :data-source="dataSource"
-          :period="period"
-          :factoryId="factoryId"
-        />
       </div>
     </template>
-    <template v-else>
-      <CityData :data-source="dataSource" :period="period" />
-    </template>
   </div>
 </template>
 
@@ -43,6 +33,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
     return {

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

@@ -0,0 +1,91 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-24 15:15:00
+ * @LastEditTime: 2024-05-28 08:42:36
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="double-ring-wrapper">
+    <template >
+      <copilot-select
+        @update:active="handleActiveUpdate"
+        :options="cityOptions"
+      />
+      <div class="flex-1 stretch">
+        <DoubleRingChartVue
+          :data-source="dataSource"
+          :than="than"
+          :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: "日",
+    },
+    than: {
+      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/yield/index.vue

@@ -1,29 +1,30 @@
 <!--
-    filename: index.vue
+ * @Author: zhp
-    author: liubin
+ * @Date: 2024-05-10 11:10:54
-    date: 2024-04-16 14:40:15
+ * @LastEditTime: 2024-05-28 13:36:07
-    description: 产量驾驶舱
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
   <div class="yield-copilot">
     <section class="top flex">
       <db-container class="std-yield" title="标准组件产出" icon="std">
-        <std-output :period="period" />
+        <std-output v-if="show" :period="period" :than="than" />
       </db-container>
       <db-container class="chip-yield" title="芯片产出" icon="chip2">
-        <chip-output :period="period" />
+        <chip-output v-if="show" :period="period" :than="than" />
       </db-container>
       <db-container class="bipv-yield" title="BIPV产出" icon="bipv">
-        <bipv-output :period="period" />
+        <bipv-output v-if="show" :period="period" :than="than" />
       </db-container>
     </section>
     <section class="bottom flex">
       <db-container class="fto-involve" title="FTO投入">
-        <fto-invest :period="period" />
+        <fto-invest :period="period" :than="than" />
       </db-container>
       <db-container class="chip-involve" title="芯片投入" icon="chip">
-        <chip-invest :period="period" />
+        <chip-invest :period="period" :than="than" />
       </db-container>
     </section>
   </div>
@@ -52,22 +53,40 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
-    return {};
+    return {
+      show:false,
+    };
   },
   watch: {
     period: {
       handler(val) {
-        val && this.fetchData(val);
+        val && this.fetchData(val,this.than);
+      },
+      immediate: true,
+    },
+    than: {
+      handler(val) {
+        console.log(val)
+        val && this.fetchData(this.period,val);
       },
       immediate: true,
     },
   },
   methods: {
-    fetchData(period = "日") {
+    fetchData(period = "日", than) {
+      // this.$store.commit('copilot/clearState')
       console.log(`产量驾驶舱，获取${period}数据`);
-      this.$store.dispatch("copilot/initCopilot", { period, source: "yield" });
+      this.$store.dispatch("copilot/initCopilot", { period, source: "yield", than }).then(() => {
+        this.$nextTick(() => {
+          this.show = true
+        })
+      })
     },
   },
 };

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

@@ -4,6 +4,8 @@ export default ({
   previousSum,
   currentSum,
   targetSum,
+  currentName,
+  preName,
 }) => ({
   grid: {
     left: 0,
@@ -57,7 +59,7 @@ export default ({
       data: [
         {
           value: currentSum,
-          name: "当前累计产出",
+          name: currentName,
           selected: false,
           itemStyle: {
             borderJoin: "round",
@@ -108,7 +110,7 @@ export default ({
       data: [
         {
           value: previousSum,
-          name: "上期累计产出",
+          name: preName,
           selected: false,
           itemStyle: {
             borderJoin: "round",

src/views/dashboard/components/CompanyInfo.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="company-info" :style="styles">
+  <div class="company-info" @click="handleChangeRoute()" :style="styles">
     <div class="corner bl"></div>
     <div class="corner br"></div>
     <h2>{{ info.companyName }}</h2>
@@ -31,7 +31,7 @@ export default {
     position: {
       type: Object,
       required: true,
-      default: () => ({ x: 0, y: 0 }),
+      default: () => ({ tx: 0, ty: 0 }),
     },
   },
   filters: {
@@ -49,16 +49,23 @@ export default {
   computed: {
     styles() {
       return {
-        left: `${this.position.x}%`,
+        left: `${this.position.tx}%`,
-        top: `${this.position.y}%`,
+        top: `${this.position.ty}%`,
       };
     },
   },
-  methods: {},
+  methods: {
+    handleChangeRoute() {
+      this.$router.push({
+        path: this.position.path
+      })
+    }
+  },
 };
 </script>
 
 <style scoped lang="scss">
+
 @font-face {
   font-family: 优设标题黑;
   src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
@@ -71,18 +78,25 @@ export default {
   z-index: 9999;
   // padding: 14px;
   padding: 0.745vw;
-  backdrop-filter: blur(2px);
+  // padding: 0 vw;
-  border-radius: 4px;
+  cursor: pointer;
+  // backdrop-filter: blur(2px);
+  // border-radius: 4px;
   transform: translate(-50%, -100%);
   box-shadow: inset 0 0 12px 2px #fff3;
+  background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
+    // background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7)  10%, #021842 30%);
   // 在这里设置一个总的字体大小 不失为一个好的选择
   font-size: 1vw;
+  // filter: blur(13);
 }
 
 h2 {
+  padding: 0 1vw;
   margin: 6px 0;
   font-family: 优设标题黑;
   color: #fff;
+  letter-spacing:5px;
   // font-size: 24px;
   font-size: 1.276em;
 }

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 left">{{ this.weather }}</span>
-    <span class="side right">23:12|星期一|2023.12.13</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,74 @@ export default {
       };
     },
   },
+  mounted() {
+    this.getTimes()
+    this.getWeather()
+    this.getTimesInterval()
+    this.weatherInterval = setInterval(() => {
+      this.getWeather()
+    }, 1800000)
+  },
+  destroyed() {
+    // console.log(1111)
+    clearInterval(this.weatherInterval)
+  },
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 60000);
+    },
+    getTimesInterval() {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+        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/index.vue

@@ -1,60 +1,50 @@
 <template>
   <div class="dashboard-factory-all">
     <div id="map-container">
+      <div v-if="visible" class="cdLine"></div>
+      <div v-if="visible" class="zzLine"></div>
+      <div v-if="visible" class="rcLine"></div>
+      <div v-if="visible" class="rcLineTwo"></div>
+      <div v-if="visible" class="hdLine"></div>
+      <div v-if="visible" class="hdLineTwo"></div>
+      <div v-if="visible" class="ksLine"></div>
+      <div v-if="visible" class="bbLine"></div>
+      <div v-if="visible" class="bbLineTwo"></div>
+      <div v-if="visible" class="bbLineThree"></div>
+      <div v-if="visible" class="jmsLine"></div>
+      <div v-if="visible" class="jmsLineTwo"></div>
       <div class="databoard">
         <db-header class="db-header"></db-header>
         <div class="db-body">
           <div class="db-left">
-            <db-container
+            <db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
-              icon="cube"
-              title="FTO投入"
-              @refresh="() => (ftoKey = Math.random())"
-            >
               <fto-chart :key="ftoKey" />
             </db-container>
-            <db-container
+            <db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
-              icon="chip2"
-              title="芯片投入"
-              @refresh="() => (chipInvestKey = Math.random())"
-            >
               <chip-invest-chart :key="chipInvestKey" />
             </db-container>
           </div>
           <div class="db-right">
-            <db-container
+            <db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
-              side="right"
-              icon="chip"
-              title="芯片产出"
-              @refresh="() => (chipYieldKey = Math.random())"
-            >
               <chip-yield-chart :key="chipYieldKey" />
             </db-container>
-            <db-container
+            <db-container side="right" icon="std" title="标准组件产出" @refresh="() => (stdKey = Math.random())">
-              side="right"
-              icon="std"
-              title="标准组件产出"
-              @refresh="() => (stdKey = Math.random())"
-            >
               <std-chart :key="stdKey" />
             </db-container>
-            <db-container
+            <db-container side="right" icon="bipv" title="BIPV产出" @refresh="() => (bipvKey = Math.random())">
-              side="right"
-              icon="bipv"
-              title="BIPV产出"
-              @refresh="() => (bipvKey = Math.random())"
-            >
               <bipv-chart :key="bipvKey" />
             </db-container>
           </div>
         </div>
       </div>
     </div>
-    <company-info
+    <company-info v-if="visible" :info="info" :position="rcHintPosition" />
-      v-if="visible"
+    <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
-      :info="info"
+    <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
-      :position="hintPosition"
+    <hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
-      @close="closeHint"
+    <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
-    />
+    <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
+    <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
   </div>
 </template>
 
@@ -71,25 +61,31 @@ import StdChart from "./dashboard/charts/StdChart.vue";
 
 const LOCATIONS = [
   // 佳木斯
-  { x: 67, y: 20 },
+  { x: 67, y: 20, tx: 60, ty: 29,  path: 'copilot/jmsIndex' },
   // 成都
-  { x: 46, y: 56 },
+  { x: 46, y: 56,tx:46,ty:93, path: 'copilot/cdIndex' },
   // 蚌埠1
-  { x: 60, y: 52 },
+  { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'copilot/bbIndex' },
   // 蚌埠2
-  { x: 61, y: 53 },
+  { x: 61, y: 53,tx:39,ty:68, path: 'copilot/ksIndex' },
   // 江西 瑞昌
-  { x: 60, y: 58 },
+  { x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
   // 湖南 株洲
-  { x: 56, y: 60 },
+  { x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
   // 邯郸
-  { x: 58, y: 45 },
+  { x: 58, y: 45, tx: 47, ty: 34, path: 'copilot/hdIndex' },
 ];
 
 export default {
   name: "Index",
   components: {
     CompanyInfo,
+    ksCompanyInfo: CompanyInfo,
+    hdCompanyInfo: CompanyInfo,
+    bbCompanyInfo: CompanyInfo,
+    cdCompanyInfo: CompanyInfo,
+    zzCompanyInfo: CompanyInfo,
+    jmsCompanyInfo: CompanyInfo,
     DbHeader: DashboardHeader,
     DbContainer: Container,
     FtoChart,
@@ -100,8 +96,15 @@ export default {
   },
   data() {
     return {
+      // homeStore:undefined,
       visible: false,
       hintPosition: null,
+      zzHintPosition: null,
+      ksHintPosition: null,
+      bbHintPosition: null,
+      hdHintPosition: null,
+      cdHintPosition: null,
+      jmsHintPosition: null,
       ftoKey: Math.random(),
       chipInvestKey: Math.random(),
       chipYieldKey: Math.random(),
@@ -109,15 +112,28 @@ export default {
       bipvKey: Math.random(),
     };
   },
+  computed: {
+    homeStore() {
+      return this.$store.getters.home
+    }
+  },
   mounted() {
-    this.$store.dispatch("copilot/initHome");
+    // var w = window.screen.width;
-
+    // var zoom = w / 1920;
+    // let screen = document.getElementById("map-container")
+    // console.log(screen);
+    // screen.style.zoom = zoom
+    //   // "zoom": ,
+    // screen.style.transform = `scale(" + ${zoom} + ")`
+    // };
+    this.$store.dispatch("copilot/initHome").then((res) => {
       this.$nextTick(() => {
         this.initPins();
-
         // 调整 echarts 大小
         window.onresize = () => { };
-    });
+      })
+    })
+
   },
   beforeRouteEnter(to, from, next) {
     next((vm) => {
@@ -126,17 +142,60 @@ export default {
   },
   methods: {
     initPins() {
+      // const cdLine = document.createElement("div");
+      // const zzLine = document.createElement("div");
+      // const rcLine = document.createElement("div");
+      // const rcLineTwo = document.createElement("div");
+      // const hdLine = document.createElement("div");
+      // const ksLine = document.createElement("div");
+      // const bbLine = document.createElement("div");
+      // const bbLineTwo = document.createElement("div");
+      // const bbLineThree = document.createElement("div");
+      // cdLine.className = "cdLine";
+      // cdLine.style.left = `46.71%`;
+      // cdLine.style.top = `59%`;
+      // zzLine.className = "zzLine";
+      // zzLine.style.left = `56.8%`;
+      // zzLine.style.top = `60.8%`;
+      // rcLine.className = "rcLine";
+      // rcLine.style.left = `66.8%`;
+      // rcLine.style.top = `52%`;
+      // rcLineTwo.className = "rcLineTwo";
+      // rcLineTwo.style.left = `58.7%`;
+      // rcLineTwo.style.top = `34%`;
+      // hdLine.className = "hdLine";
+      // ksLine.className = "ksLine";
+      // bbLine.className = "bbLine";
+      // bbLineTwo.className = "bbLineTwo";
+      // bbLineThree.className = "bbLineThree";
+
+      // document.getElementById("map-container").appendChild(cdLine);
+      // document.getElementById("map-container").appendChild(zzLine);
+      // document.getElementById("map-container").appendChild(rcLine);
+      // document.getElementById("map-container").appendChild(rcLineTwo);
+      // document.getElementById("map-container").appendChild(hdLine);
+      // document.getElementById("map-container").appendChild(ksLine);
+      // document.getElementById("map-container").appendChild(bbLine);
+      // document.getElementById("map-container").appendChild(bbLineTwo);
+      // document.getElementById("map-container").appendChild(bbLineThree);
+      // console.log(" this.homeStore", this.$store.getters.home);
       LOCATIONS.map((loc) => {
+        console.log("loc", loc);
         const pin = document.createElement("div");
         pin.className = "pin";
         pin.style.left = `${loc.x}%`;
         pin.style.top = `${loc.y}%`;
-        pin.addEventListener("mouseenter", () => {
+        // pin.addEventListener("mouseenter", () => {
           this.showHint(loc);
-        });
+        // });
-        pin.addEventListener("mouseleave", () => {
+        // pin.addEventListener("mouseleave", () => {
-          this.closeHint();
+        //   this.closeHint();
-        });
+        // });
+        // pin.addEventListener("click", () => {
+        //   this.$router.push({
+        //     path:loc.path
+        //   })
+        // });
         document.getElementById("map-container").appendChild(pin);
       });
     },
@@ -145,8 +204,6 @@ export default {
       this.hintPosition = null;
     },
     showHint(position) {
-      const homeStore = this.$store.getters.home;
-      this.hintPosition = position;
       const templateInfo = {
         companyName: "",
         items: [
@@ -156,53 +213,63 @@ export default {
           { label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
         ],
       };
-
       if (position === LOCATIONS[0]) {
-        templateInfo.companyName = "佳木斯中建材光电材料有限公司";
+        templateInfo.companyName = "佳木斯中建材";
-        templateInfo.items[0].value = homeStore.ftoInvest.current[3];
+        this.jmsHintPosition = position;
-        templateInfo.items[2].value = homeStore.chipInvest.current[3];
+        templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
-        templateInfo.items[1].value = homeStore.chipOutput.current[3];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
-        templateInfo.items[3].value = homeStore.stdOutput.current[3];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
+        this.jmsInfo = templateInfo;
       } else if (position === LOCATIONS[1]) {
-        templateInfo.companyName = "成都中建材光电材料有限公司";
+        this.cdHintPosition = position;
-        templateInfo.items[0].value = homeStore.ftoInvest.current[4];
+        templateInfo.companyName = "成都中建材";
-        templateInfo.items[2].value = homeStore.chipInvest.current[4];
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
-        templateInfo.items[1].value = homeStore.chipOutput.current[4];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
-        templateInfo.items[3].value = homeStore.stdOutput.current[4];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
+        this.cdInfo = templateInfo;
       } else if (position === LOCATIONS[2]) {
-        templateInfo.companyName = "蚌埠兴科玻璃有限公司";
+        this.bbHintPosition = position;
-        templateInfo.items[0].value = homeStore.ftoInvest.current[6];
+        templateInfo.companyName = "蚌埠兴科";
-        templateInfo.items[2].value = homeStore.chipInvest.current[6];
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
-        templateInfo.items[1].value = homeStore.chipOutput.current[6];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
-        templateInfo.items[3].value = homeStore.stdOutput.current[6];
+        templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
+        this.bbInfo = templateInfo;
       } else if (position === LOCATIONS[3]) {
-        templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
+        this.ksHintPosition = position;
-        templateInfo.items[0].value = homeStore.ftoInvest.current[5];
+        templateInfo.companyName = "凯盛光伏";
-        templateInfo.items[2].value = homeStore.chipInvest.current[5];
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
-        templateInfo.items[1].value = homeStore.chipOutput.current[5];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
-        templateInfo.items[3].value = homeStore.stdOutput.current[5];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
+        this.ksInfo = templateInfo;
       } else if (position === LOCATIONS[4]) {
-        templateInfo.companyName = "瑞昌中建材光电材料有限公司";
+        this.rcHintPosition = position;
-        templateInfo.items[0].value = homeStore.ftoInvest.current[0];
+        templateInfo.companyName = "瑞昌中建材";
-        templateInfo.items[2].value = homeStore.chipInvest.current[0];
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
-        templateInfo.items[1].value = homeStore.chipOutput.current[0];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[0];
-        templateInfo.items[3].value = homeStore.stdOutput.current[0];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
-      } else if (position === LOCATIONS[5]) {
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
-        templateInfo.companyName = "中建材（株洲）光电材料有限公司";
-        templateInfo.items[0].value = homeStore.ftoInvest.current[2];
-        templateInfo.items[2].value = homeStore.chipInvest.current[2];
-        templateInfo.items[1].value = homeStore.chipOutput.current[2];
-        templateInfo.items[3].value = homeStore.stdOutput.current[2];
-      } else if (position === LOCATIONS[6]) {
-        templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
-        templateInfo.items[0].value = homeStore.ftoInvest.current[1];
-        templateInfo.items[2].value = homeStore.chipInvest.current[1];
-        templateInfo.items[1].value = homeStore.chipOutput.current[1];
-        templateInfo.items[3].value = homeStore.stdOutput.current[1];
-      }
-
         this.info = templateInfo;
-
+      } else if (position === LOCATIONS[5]) {
+        this.zzHintPosition = position;
+        templateInfo.companyName = "株洲中建材";
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
+        this.zzInfo = templateInfo;
+      } else if (position === LOCATIONS[6]) {
+        this.hdHintPosition = position;
+        templateInfo.companyName = "邯郸中建材";
+        templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
+        templateInfo.items[2].value = this.homeStore.chipInvest.current[1];
+        templateInfo.items[1].value = this.homeStore.chipOutput.current[1];
+        templateInfo.items[3].value = this.homeStore.stdOutput.current[1];
+        this.hdInfo = templateInfo
+      }
       this.$nextTick(() => {
         this.visible = true;
       });
@@ -225,8 +292,8 @@ export default {
 #map-container {
   height: 100%;
   background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
+  // background-size: cover;
   position: relative;
-
   .databoard {
     position: absolute;
     top: 0;
@@ -257,6 +324,133 @@ export default {
 </style>
 
 <style>
+.cdLine {
+  display: inline-block;
+  position: absolute;
+  left: 46.71%;
+  width: 2px;
+  top: 59%;
+  height: 148px;
+  border: 2px dashed #FFCF00;
+}
+
+.zzLine {
+  display: inline-block;
+  position: absolute;
+  left: 56.8%;
+  width: 2px;
+  top: 60.8%;
+  /* x: 60, y: 58, */
+  height: 148px;
+  border: 2px dashed #FFCF00;
+}
+
+.rcLine {
+  display: inline-block;
+  position: absolute;
+  left: 61%;
+  width: 100px;
+  top: 61.5%;
+  /* x: 60, y: 58, */
+    height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.rcLineTwo {
+  position: absolute;
+  left: 66.8%;
+  width: 1px;
+  top: 52%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 90px;
+  border: 2px dashed #FFCF00;
+}
+
+.hdLine {
+  position: absolute;
+  left: 58.7%;
+  width: 1px;
+  top: 34%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 100px;
+  border: 2px dashed #FFCF00;
+}
+.hdLineTwo {
+  position: absolute;
+  left: 53%;
+  width: 90px;
+  top: 34%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+.ksLine {
+  position: absolute;
+  left: 43.2%;
+  width: 350px;
+  top: 56.8%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.bbLine {
+  position: absolute;
+  left: 42.4%;
+  width: 350px;
+  top: 55.5%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+
+.bbLineTwo {
+  position: absolute;
+  left: 42.4%;
+  width: 1px;
+  top: 48%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 70px;
+  border: 2px dashed #FFCF00;
+}
+
+.jmsLine {
+  position: absolute;
+  left: 67.8%;
+  width: 1px;
+  top: 24%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 40px;
+  border: 2px dashed #FFCF00;
+}
+
+.jmsLineTwo {
+  position: absolute;
+  left: 65.4%;
+  width: 50px;
+  top: 28.5%;
+  display: inline-block;
+    /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
+.bbLineThree {
+  position: absolute;
+  left: 40%;
+  width: 40px;
+  top: 48%;
+  display: inline-block;
+  /* // x: 60, y: 58, */
+  height: 1px;
+  border: 2px dashed #FFCF00;
+}
 .pin {
   display: inline-block;
   position: absolute;

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

@@ -1,12 +1,12 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-05-07 09:31:54
+ * @LastEditTime: 2024-05-20 18:02:10
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="50%">
+  <el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
     <small-title slot="title" :no-padding="true">
       {{ '碲化镉工厂生产数据详情' }}
     </small-title>
@@ -14,15 +14,15 @@
       <el-row :gutter="24">
         <el-col :span="8">
           <p class="title">工厂名称</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.factory }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间维度</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ date }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.reportDate.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p>
         </el-col>
       </el-row>
       <el-divider></el-divider>
@@ -36,43 +36,43 @@
         </el-col>
         <el-col :span="6">
           <p class="title">芯片良率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.yieldRate }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片良率</p>
+          <p class="title">芯片BOM</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.bom }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片总功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.totalPower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">FTO投入量</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.chipInput }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">CSS稼动率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.marriageRate }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片段OEE</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.oee }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片平均功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.averagePower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">芯片人均产量</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.annualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.capacityUtilizationRate }}</p>
         </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
@@ -81,19 +81,20 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">封装BOM</p>
-          <p class="text">{{ }}</p>
+          <!-- 没参数 -->
+          <!-- <p class="text">{{ dataForm.bom }}</p> -->
         </el-col>
         <el-col :span="6">
           <p class="title">封装线OEE</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <!-- <p class="text">{{ dataForm.code }}</p> -->
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件良率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
       </el-row>
       <el-row :gutter="24">
@@ -103,15 +104,15 @@
         </el-col>
         <el-col :span="6">
           <p class="title">封装产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <!-- <p class="text">{{ dataForm.code }}</p> -->
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件人均产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件人均产量</p>
+          <p class="title">标准组件平均功率</p>
-          <p class="text">{{ dataForm.productName }}</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">
@@ -166,6 +167,12 @@ export default {
     SmallTitle,
   },
   // mixins: [basicAdd],
+  props: {
+    date: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
       urlOptions: {
@@ -224,8 +231,12 @@ export default {
   methods: {
     init(id) {
       this.visible = true
+      console.log('打印', id)
       if (id) {
-        getProduceDataDetail()
+        getProduceDataDetail(id).then(res => {
+          this.dataForm = res.data
+          console.log('你好', res.data)
+        })
       }
     },
     // getCurrentTime() {

src/views/produce/data/index.vue

@@ -1,53 +1,53 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-07 09:18:01
+ * @LastEditTime: 2024-05-22 15:25:11
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
   <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;">
       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
-        <el-form-item label="时间维度" prop="reportTime">
+        <el-form-item label="时间维度" prop="date">
-          <el-select clearable v-model="listQuery.date" placeholder="请选择">
+          <el-select size="small" 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="listQuery.date === 0" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
-          <el-date-picker clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
-            start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期">
+            start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
         <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="选择周"
+          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
           至
-          <el-date-picker clearable v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
-          <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px">
+          <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
             {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
           </span>
         </el-form-item>
         <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
-          <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至"
             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
           </el-date-picker>
         </el-form-item>
         <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"
+          <el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year"
             placeholder="开始时间">
           </el-date-picker>
           ~
-          <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
+          <el-date-picker size="small" clearable v-model="listQuery.end" format="yyyy-MM-dd" value-format="timestamp" type="year" placeholder="结束时间"
             @change="getYear">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="工厂名称" prop="factorys">
-          <el-select clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
+          <el-select size="small" 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>
@@ -59,7 +59,7 @@
           </el-select>
         </el-form-item> -->
         <el-form-item label="玻璃类型" prop="type">
-          <el-select clearable v-model="listQuery.type" placeholder="请选择玻璃类型">
+          <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择玻璃类型">
             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
@@ -69,23 +69,32 @@
           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
         </el-form-item>
       </el-form>
+    </div>
+    <div class="app-container" style="margin-top: 8px;padding: 16px; height: auto; flex-grow: 1;">
       <!-- <el-row :gutter="24"> -->
       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> -->
+      <search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" />
       <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
       <!-- </el-col> -->
       <!-- <el-col :span="12">
             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
           </el-col> -->
     </div>
-    <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
-      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" />
-      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+      <base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
         :table-data="tableData">
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
+      <pagination
+        :limit.sync="listQuery.size"
+        :page.sync="listQuery.current"
+        :total="listQuery.total"
+        @pagination="getDataList"
+      />
     </div>
-    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
+    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
       :type="listQuery.reportType" @refreshDataList="getDataList" /> -->
     <!-- <pagination
@@ -98,7 +107,7 @@
 
 <script>
 // import { parseTime } from '../../core/mixins/code-filter';
-import { getProduceDataPage } from '@/api/produceData';
+import { getProduceDataPage, exportOutPutExcel } from '@/api/produceData';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -114,7 +123,7 @@ export default {
 	data() {
     return {
       listQuery: {
-        size: 10,
+        size: 20,
         current: 1,
         factorys: [],
         total: 0,
@@ -123,7 +132,9 @@ export default {
         // reportType: 2,
         beginTime: undefined,
         endTime:undefined,
-        reportTime: []
+        reportTime: [],
+        start: undefined,
+        end: undefined
       },
       detailOrUpdateVisible:false,
       date1: undefined,
@@ -177,88 +188,16 @@ export default {
 				// getDataListURL: getGlassPage,
 				// exportURL: exportGlasscExcel
       },
-      mainFormConfig: [
-      	{
-          type: 'select',
-          label: '工单',
-          placeholder: '请选择工单',
-          param: 'workOrderId',
-          selectOptions: [],
-        },
-        // {
-        // 	type: 'select',
-        // 	label: '产线',
-        // 	placeholder: '请选择产线',
-        // 	param: 'lineId',
-        // 	selectOptions: [],
-        // },
-        // 选项切换
-        // {
-        // 	type: 'select',
-        // 	label: '时间类型',
-        // 	param: 'dateFilterType',
-        // 	defaultSelect: 0,
-        // 	selectOptions: [
-        // 		{ id: 0, name: '按时间段' },
-        // 		{ id: 1, name: '按日期' },
-        // 	],
-        // 	index: 2,
-        // 	extraOptions: [
-        {
-          // parent: 'dateFilterType',
-          // 时间段选择
-          type: 'datePicker',
-          label: '时间段',
-          // dateType: 'datetimerange',
-          dateType: 'datetimerange',
-          format: 'yyyy-MM-dd HH:mm:ss',
-          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
-          rangeSeparator: '-',
-          rangeSeparator: '-',
-          startPlaceholder: '开始时间',
-          endPlaceholder: '结束时间',
-          param: 'recordTime',
-        },
-        // 		{
-        // 			parent: 'dateFilterType',
-        // 			// 日期选择
-        // 			type: 'datePicker',
-        // 			// label: '日期',
-        // 			dateType: 'date',
-        // 			placeholder: '选择日期',
-        // 			format: 'yyyy-MM-dd',
-        // 			valueFormat: 'yyyy-MM-dd',
-        // 			param: 'timeday',
-        // 		},
-        // 	],
-        // },
-        {
-          type:'button',
-          btnName: '查询',
-          name: 'search',
-          color: 'primary',
-        },
-         {
-          type:'separate'
-        },
-        // {
-        //   type: this.$auth.hasPermi(
-        //     'analysis:equipment:export'
-        //   )
-        //     ? 'separate'
-        //     : '',
-        // },
-        {
-          type:'button',
-          btnName: '导出',
-          name: 'export',
-          color: 'warning',
-        },
-      ],
       formConfig: [
         {
           type: 'title',
-          label: '生产数据管理',
+          label: '工厂信息',
+        },
+      ],
+      formConfig1: [
+        {
+          type: 'title',
+          label: '良品数量',
         },
       ],
       timeList: [
@@ -281,24 +220,52 @@ export default {
       ],
       factoryList: [
         {
-          name: '测试',
+          name: '瑞昌中建材光电材料有限公司',
+          id: 0
+        },
+        {
+          name: '邯郸中建材光电材料有限公司',
           id: 1
+        },
+        {
+          name: '中建材株洲光电材料有限公司',
+          id: 2
+        },
+        {
+          name:  '佳木斯中建材光电材料有限公司',
+          id: 3
+        },
+        {
+          name:  '成都中建材光电材料有限公司',
+          id: 4
+        },
+        {
+          name:  '凯盛光伏材料有限公司',
+          id: 5
+        },
+        {
+          name:  '蚌埠兴科玻璃有限公司',
+          id: 6
         }
       ],
       tableProps: [
         {
-          prop: 'createTime',
+          prop: 'tableTime',
           label: '日期',
+          minWidth: 100,
+          showOverflowtooltip: true
         },
         {
           prop: 'factory',
           label: '工厂名称',
-          filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val]
+          filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val],
+          minWidth: 200,
+          showOverflowtooltip: true
         },
         {
           prop: 'glassType',
           label: '玻璃类型',
-          filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val]
+          filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
         },
         {
           prop: 'inputNumber',
@@ -318,19 +285,18 @@ export default {
         },
       ],
       tableData: [],
+      xAxis: []
 			// proLineList: [],
 			// all: {}
 		};
   },
   computed: {
     weekNum() {
-      return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
+      return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
     },
   },
 	mounted() {
-    this.getDict()
+    this.getDataList()
-    // this.getCurrentYearFirst()
-    // this.getDataList()
 	},
   methods: {
     otherMethods(val) {
@@ -340,32 +306,41 @@ export default {
         this.$refs.detailOrUpdate.init(val.data.id);
       });
     },
-    buttonClick() {
+    // buttonClick() {
 
-    },
+    // },
     getYear(e) {
-      if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
+      if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
         this.$message({
           message: '年份起止时间不能超过十年',
           type: 'warning'
         });
+        this.listQuery.reportTime = []
+        this.listQuery.start = undefined
+        this.listQuery.end = undefined
         // console.log();
+      } else {
+        this.listQuery.beginTime = this.listQuery.start
+        this.listQuery.endTime = this.listQuery.end
       }
       // console.log(e);
     },
     onValueChange(picker, k) { // 选中近k周后触发的操作
-      if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) {
+      // console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
-        console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000)
+      if (this.listQuery.start && this.listQuery.end) {
-        this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        console.log(this.listQuery.reportTime)
-        // this.onValueChange()   // 这里为我们希望value改变时触发的方法
+        this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
-        this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
-        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); if (numDays > 168) {
+        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
+        if (numDays > 168) {
           console.log(numDays)
           this.$message({
             message: '周范围不能超过24周',
             type: 'warning'
           });
-          // this.onValueChange()
+        } else {
+          this.listQuery.beginTime = this.listQuery.start.getTime() - 24 * 60 * 60 * 1000
+          this.listQuery.endTime = this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000
         }
       }
     },
@@ -374,103 +349,42 @@ export default {
         // 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');
         console.log(this.listQuery.reportTime[1])
-        const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) {
+        const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
+        if (numDays > 30) {
           this.$message({
             message: '时间范围不能超过30天',
             type: 'warning'
           });
           this.listQuery.reportTime = [];
+        } else {
+          this.listQuery.beginTime = this.listQuery.reportTime[0]
+          this.listQuery.endTime = this.listQuery.reportTime[1]
         }
       } else {
       }
     },
     changeTime(value) {
       if (this.listQuery.reportTime) {
-        const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳，毫秒级别
+        const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0];
-        const fullyear = this.listQuery.reportTime[1].getFullYear()
+        if (numDays > 2*365*24*60*60*1000) {
-        let days = 0
-        switch (timeStamp) {
-          case 0:
-          case 2:
-          case 4:
-          case 6:
-          case 7:
-          case 9:
-          case 11:
-            days = 31
-            break
-          case 3:
-          case 4:
-          case 8:
-          case 10:
-            days = 30
-            break
-          case 1:
-            if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) {
-              days = 29
-            } else {
-              days = 28
-            }
-            break
-        }
-        let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
-        // this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间
-        let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间
-        // console.log(endTimeStamp);
-        // let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD");
-        // console.log(endTime);
-        // console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss'))
-        // console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss'))
-
-        // 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(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
           this.$message({
             message: '时间范围不能超过24个月',
             type: 'warning'
           });
           this.listQuery.reportTime = [];
         } else {
-          this.listQuery.reportTime[0] = startTime
+          this.listQuery.beginTime = this.listQuery.reportTime[0]
-          this.listQuery.reportTime[1] = endTime
+          this.listQuery.endTime = this.listQuery.reportTime[1]
         }
       } else {
         console.log(this.listQuery.reportTime[0])
       }
     },
-    // handleTime() {
+    // async getDict() {
-    //   this.$forceUpdate()
-    //   // this.$nextTick(() => [
-
-    //   // ])
-    // },
-    // getCurrentYearFirst() {
-    //   let date = new Date();
-    //   date.setDate(1);
-    //   date.setMonth(0);
-    //   this.reportTime = date;
-    //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
-    //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
-    //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
-    // },
-    // changeTime(val) {
-    //   if (val) {
-    //     // let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
-    //     // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
-    //     // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
-    //     // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //     // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-    //   } else {
-    //     this.listQuery.reportTime = []
-    //   }
-    // },
-    async getDict() {
-      this.$refs.lineChart.initChart()
 			// 产线列表
 			// const res = await getCorePLList();
 			// this.proLineList = res.data;
-		},
+		// },
     // 获取数据列表
     multipliedByHundred(str) {
       console.log(str);
@@ -498,36 +412,50 @@ export default {
       const res = await getProduceDataPage(this.listQuery)
       console.log(res)
       this.tableData = res.data.records
+      this.tableData.forEach(item => {
+        item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
+      })
+      this.listQuery.total = res.data.total
+      this.buildChart(this.tableData)
     },
-    add0(m) {
+    buildChart(list) {
-      return m < 10 ? '0' + m : m
+      const chartList = Object.groupBy(list, (item) => item.tableTime)
+      this.xAxis = []
+      this.seriesList = []
+      for (const keyIndex in chartList) {
+        // X坐标轴数据
+        this.xAxis.push(keyIndex)
+      }
+      // y轴数据
+      for (const y of this.factoryList) {
+        // y: {name: , id: }
+        const seriesItem = {
+          name: y.name,
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
             },
-    format(shijianchuo) {
+          data: Array(this.xAxis.length).fill(0)
-      //shijianchuo是整数，否则要parseInt转换
+        }
-      var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
+        for (const a in chartList) {
-      // console.log(time)
+          for (const z of chartList[a]) {
-      // var y = time.getFullYear();
+            this.xAxis.forEach((item, index) => {
-      // var m = time.getMonth() + 1;
+              if (z.factory === y.id && a === item) {
-      // var d = time.getDate();
+                seriesItem.data[index] = z.goodNumber
-      // var h = time.getHours();
+              }
-      // var mm = time.getMinutes();
+            })
-      // var s = time.getSeconds();
+          }
-      return time
+        }
-    },
+        this.seriesList.push(seriesItem)
-		//时间戳转为yy-mm-dd hh:mm:ss
+      }
-		timeFun(unixtimestamp) {
+      this.$refs.lineChart.initChart(this.xAxis, this.seriesList)
-				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.current = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.size = 20;
 					this.getDataList();
 					break;
 				case 'export':
@@ -539,6 +467,17 @@ export default {
 		},
 		/** 导出按钮操作 */
     handleExport() {
+      this.$modal.confirm('是否确认导出生产数据?').then(() => {
+        // 处理查询参数
+        let params = {...this.listQuery};
+        params.current = 1;
+        params.size = 999;
+        this.exportLoading = true;
+        return exportOutPutExcel(params);
+      }).then(response => {
+        this.$download.excel(response, '生产数据.xls');
+        this.exportLoading = false;
+      }).catch(() => {});
       // 处理查询参数
       // var xlsxParam = { raw: true };
       // /* 从表生成工作簿对象 */
@@ -591,7 +530,7 @@ export default {
   margin-top: 8px;
 }
 .app-container {
-  margin: 0 16px 0;
+  margin: 0 0px 0;
   background-color: #fff;
   border-radius: 4px;
   padding: 16px 16px 0;

src/views/produce/data/lineChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
- * @LastEditors: zhp
+ * @LastEditors: DY
- * @LastEditTime: 2024-04-17 10:03:39
+ * @LastEditTime: 2024-05-22 13:48:58
  * @Description:
 -->
 <template>
@@ -58,11 +58,11 @@ export default {
       chart: null
     }
   },
-  mounted() {
+  // mounted() {
-    this.$nextTick(() => {
+  //   this.$nextTick(() => {
-      this.initChart()
+  //     this.initChart()
-    })
+  //   })
-  },
+  // },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -71,8 +71,7 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(xAxis, seriesList) {
-      console.log(1111)
       this.chart = echarts.init(document.getElementById(this.id))
       console.log(this.$parent);
       this.chart.setOption({
@@ -85,7 +84,7 @@ export default {
         },
         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         legend: {
-          data: ['工厂1', '工厂2'],
+          // data: ['工厂1', '工厂2'],
           right: '90px',
           top: '0%',
           icon: 'rect',
@@ -107,7 +106,7 @@ export default {
           {
             type: 'category',
             // prettier-ignore
-            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+            data: xAxis
           }
         ],
         yAxis: [
@@ -122,39 +121,8 @@ export default {
           bottom: "1%",
           containLabel: true
         },
-        series: [
+        series: seriesList
-          {
+      }, true)
-            name: '工厂1',
-            type: 'bar',
-            itemStyle: {
-              normal: {
-                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
-                lineStyle: {
-                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
-                }
-              }
-            },
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ],
-          },
-          {
-            name: '工厂2',
-            type: 'bar',
-            itemStyle: {
-              normal: {
-                color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
-                lineStyle: {
-                  color: 'rgba(142, 240, 171, 1)' //改变折线颜色
-                }
-              }
-            },
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ],
-          },
-        ]
-      })
     }
   }
 }

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

@@ -1,40 +1,49 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-04-17 17:01:14
+ * @LastEditTime: 2024-05-20 18:09:09
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="50%">
+  <el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
     <small-title slot="title" :no-padding="true">
-      {{ '新增' }}
+      {{ dataForm.id ? '编辑' : '新增' }}
     </small-title>
     <div class="detailBox">
       <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-form-item v-if="ftype === 0" label="工厂名称" prop="factory">
-              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+              <el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
-                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+                <el-option v-for="(item, index) in dhgfactoryList" :key="index" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-else label="工厂名称" prop="factory">
+              <el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
+                <el-option v-for="(item, index) in tyjxfactoryList" :key="index" :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-form-item label="时间维度" prop="targetType">
-              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+              <el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime">
-                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+                <!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> -->
-                </el-option>
+                <el-option label="月" :value="0" />
+                <el-option label="年" :value="1" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="工厂名称" prop="factoryId">
+            <el-form-item v-show="dataForm.targetType !== 1" label="时间" prop="reportTime">
-              <el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
+              <el-date-picker v-model="dataForm.reportTime" value-format="yyyy-MM" type="month" placeholder="选择月份">
-                <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
+              </el-date-picker>
-                </el-option>
+            </el-form-item>
-              </el-select>
+            <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="targetYear">
+              <el-date-picker clearable v-model="dataForm.showYear" value-format="yyyy" type="year" placeholder="开始时间">
+              </el-date-picker>
             </el-form-item>
           </el-col>
         </el-row>
@@ -44,59 +53,63 @@
         </small-title>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="芯片产量" prop="factoryId">
+            <el-form-item label="芯片产量" prop="chipYield">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片产量"></el-input>
+              <el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片良率" prop="factoryId">
+            <el-form-item label="芯片良率" prop="chipYieldRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片良率"></el-input>
+              <el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" />
-
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片BOM" prop="factoryId">
+            <el-form-item label="芯片BOM" prop="chipBom">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片BOM"></el-input>
+              <el-input-number v-model="dataForm.chipBom" :precision="2" controls-position="right" placeholder="请输入芯片BOM" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片总功率" prop="factoryId">
+            <el-form-item label="芯片总功率" prop="chipTotalPower">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片总功率"></el-input>
+              <el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" />
             </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-form-item v-if="ftype === 0" label="FTO投入量" prop="ftoInput">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入FTO投入量"></el-input>
+              <el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
+            </el-form-item>
+            <el-form-item v-else label="钼电极投入量" prop="molybdenumElectrodeInput">
+              <el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="CSS稼动率" prop="factoryId">
+            <el-form-item v-if="ftype === 0" label="CSS稼动率" prop="chipCssMarriageRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入CSS稼动率"></el-input>
+              <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
-
+            </el-form-item>
+            <el-form-item v-else label="PID6稼动率" prop="chipCssMarriageRate">
+              <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片段OEE" prop="factoryId">
+            <el-form-item label="芯片段OEE" prop="chipOee">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片段OEE"></el-input>
+              <el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片平均功率" prop="factoryId">
+            <el-form-item label="芯片平均功率" prop="chipAveragePower">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片平均功率"></el-input>
+              <el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" />
             </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-form-item label="芯片人均产量" prop="chipAnnualAverageProduction">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
+              <el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片人均产量" prop="factoryId">
+            <el-form-item label="芯片产能利用率" prop="chipCapacityUtilizationRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
+              <el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -106,45 +119,45 @@
         </small-title>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="封装BOM" prop="factoryId">
+            <el-form-item label="封装BOM" prop="componentBom">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入封装BOM"></el-input>
+              <el-input-number v-model="dataForm.componentBom" :precision="2" controls-position="right" placeholder="请输入封装BOM" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="封装线OEE" prop="factoryId">
+            <el-form-item label="封装线OEE" prop="componentOee">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入封装线OEE"></el-input>
+              <el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件良率" prop="factoryId">
+            <el-form-item label="标准组件良率" prop="componentYieldRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
+              <el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件良率" prop="factoryId">
+            <el-form-item label="标准组件产量" prop="componentYield">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
+              <el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" />
             </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-form-item label="标准组件总功率" prop="componentTotalPower">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
+              <el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件总功率" prop="factoryId">
+            <el-form-item label="封装产能利用率" prop="componentCapacityUtilizationRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
+              <el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件人均产量" prop="factoryId">
+            <el-form-item label="标准组件人均产量" prop="componentAnnualAverageProduction">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件人均产量"></el-input>
+              <el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件平均功率" prop="factoryId">
+            <el-form-item label="标准组件平均功率" prop="componentAveragePower">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入标准组件平均功率"></el-input>
+              <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -155,47 +168,47 @@
         </small-title>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="产品产量" prop="factoryId">
+            <el-form-item label="产品产量" prop="bipvProductOutput">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入产品产量"></el-input>
+              <el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="人均产量" prop="factoryId">
+            <el-form-item label="人均产量" prop="bipvAnnualAverageProduction">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入人均产量"></el-input>
+              <el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片使用量" prop="factoryId">
+            <el-form-item label="芯片使用量" prop="bipvChipUsage">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片使用量"></el-input>
+              <el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片利用率" prop="factoryId">
+            <el-form-item label="芯片利用率" prop="bipvChipUtilizationRate">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入芯片利用率"></el-input>
+              <el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" />
             </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-form-item label="内部材料成本" prop="bipvInsideMaterialCost">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入内部材料成本"></el-input>
+              <el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="OEM及委外材料成本" prop="factoryId">
+            <el-form-item label="OEM及委外材料成本" prop="bipvOeeMaterialCost">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入OEM及委外材料成本"></el-input>
+              <el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="综合材料成本" prop="factoryId">
+            <el-form-item label="综合材料成本" prop="bipvComprehensiveMaterialCost">
-              <el-input v-model="dataForm.factoryId" placeholder="请输入综合材料成本"></el-input>
+              <el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </div>
     <div class="footer">
-      <el-button @click="cancelForm">取 消</el-button>
+      <el-button @click="visible = false">取 消</el-button>
       <el-button type="primary" @click="handleClose()">确 定</el-button>
     </div>
   </el-drawer>
@@ -210,20 +223,25 @@
 // } from "@/api/base/qualityScrapLog";
 // import { getList, } from "@/api/base/qualityScrapType";
 import SmallTitle from './SmallTitle';
+import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData';
+import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants";
+
 export default {
   components: {
     SmallTitle,
   },
   // mixins: [basicAdd],
+  props: {
+    ftype: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
-      urlOptions: {
+      factoryList,
-        isGetCode: false,
+      dhgfactoryList,
-        // codeURL: getCode,
+      tyjxfactoryList,
-        // createURL: createQualityScrapLog,
-        // updateURL: updateQualityScrapLog,
-        // infoURL: getQualityScrapLog,
-      },
       lineList: [],
       typeList: [],
       workOrderList: [],
@@ -239,138 +257,166 @@ export default {
           name: '自动',
         }
       ],
-      factoryList:[],
+      // factoryList: [
+      //   {
+      //     name: '瑞昌中建材光电材料有限公司',
+      //     id: 0
+      //   },
+      //   {
+      //     name: '邯郸中建材光电材料有限公司',
+      //     id: 1
+      //   },
+      //   {
+      //     name: '中建材株洲光电材料有限公司',
+      //     id: 2
+      //   },
+      //   {
+      //     name: '佳木斯中建材光电材料有限公司',
+      //     id: 3
+      //   },
+      //   {
+      //     name: '成都中建材光电材料有限公司',
+      //     id: 4
+      //   },
+      //   {
+      //     name: '凯盛光伏材料有限公司',
+      //     id: 5
+      //   },
+      //   {
+      //     name: '蚌埠兴科玻璃有限公司',
+      //     id: 6
+      //   }
+      // ],
       sectionList: [],
       visible: false,
       dataForm: {
+        factoryType: 0,
         id: undefined,
-        logTime: undefined,
+        reportTime: undefined, // 月时间
-        source: 1,
+        factory: undefined,
-        detId: undefined,
+        targetType: undefined,
-        workOrderId: null,
+        targetYear: undefined,
-        teamId: undefined,
+        showYear: undefined,
-        num: undefined,
+        targetMonth: undefined,
-        lineId: undefined,
+        chipYield: undefined,
-        description: undefined,
+        chipYieldRate: undefined,
-        // description: undefined,
+        chipBom: undefined,
-        remark: undefined,
+        chipTotalPower: undefined,
+        ftoInput: undefined,
+        chipCssMarriageRate: undefined,
+        chipOee: undefined,
+        chipAveragePower: undefined,
+        chipAnnualAverageProduction: undefined,
+        chipCapacityUtilizationRate: undefined,
+        componentBom: undefined,
+        componentOee: undefined,
+        componentYieldRate: undefined,
+        componentYield: undefined,
+        componentTotalPower: undefined,
+        componentCapacityUtilizationRate: undefined,
+        componentAnnualAverageProduction: undefined,
+        componentAveragePower: undefined,
+        bipvProductOutput: undefined,
+        bipvAnnualAverageProduction: undefined,
+        bipvChipUsage: undefined,
+        bipvChipUtilizationRate: undefined,
+        bipvInsideMaterialCost: undefined,
+        bipvOeeMaterialCost: undefined,
+        bipvComprehensiveMaterialCost: undefined,
+        molybdenumElectrodeInput: undefined
       },
       // materialList: [],
       dataRule: {
         // materialId: [{ required: true, message: "", trigger: "blur" }],
-        workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
+        // workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
-        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
+        // num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
-        detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
+        // detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
 
-        logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
+        // logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
       }
     };
   },
   mounted() {
-    this.getDict()
-    console.log('我看看', this.dataForm)
     // this.getCurrentTime()
   },
   methods: {
-    init() {
+    formClear() {
-      this.visible = true
+      if (this.$refs.dataForm !== undefined) {
+        this.$refs.dataForm.resetFields()
+      }
     },
-    // getCurrentTime() {
+    clearTime() {
-    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
+      this.dataForm.targetYear = undefined
-    //   this.dataForm.logTime = new Date()
+      this.dataForm.targetMonth = undefined
-    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
+    },
-    //   console.log(this.dataForm.logTime);
+    handleClose() {
-    // },
+      // 新增
-    async getDict() {
+      if (this.dataForm.targetType === 0) {
-    //   // 物料列表
+        const timeArray = this.dataForm.reportTime.split('-')
-    //   const res = await getList()
+        this.dataForm.targetYear = Number(timeArray[0])
-    //   this.typeList = res.data
+        this.dataForm.targetMonth = Number(timeArray[1])
-    //   getWorkOrderList().then((res) => {
+      }
-    //     console.log(res);
+      if (this.dataForm.targetType === 1) {
-    //     // console.log(response);
+        this.dataForm.targetYear = Number(this.dataForm.showYear)
-    //     this.workOrderList = res.data.map((item) => {
+      }
-    //       return {
+      // if (this.dataForm.factory === 5) {
-    //         name: item.name,
+      //   this.dataForm.factoryType = 1
-    //         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({
+      //   this.dataForm.factoryType = 0
-    //       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,
-    //         };
-    //       });
-    //     })
       // }
+      if (this.dataForm.id) {
+        // 修改
+        updateProduceTarget({
+          ...this.dataForm,
+          showYear: undefined,
+          reportTime: undefined
+        }).then(res => {
+          if (res.code === 0) {
+            this.$message.success('修改成功！')
+            this.visible = false
+            this.$emit('refreshDataList')
+          }
+        })
+      } else {
+        // 新增
+        createProduce({
+          ...this.dataForm,
+          showYear: undefined,
+          reportTime: undefined
+        }).then(res => {
+          if (res.code === 0) {
+            this.$message.success('新增成功！')
+            this.visible = false
+            this.$emit('refreshDataList')
+          }
+        })
+      }
     },
-  },
+    init(id) {
+      this.dataForm.id = id || undefined
+      this.dataForm.factoryType = this.ftype
+      this.visible = true
+      if (this.dataForm.id) {
+        getProduceTargetDetail(this.dataForm.id).then(res => {
+          this.dataForm = res.data
+          if (this.dataForm.targetType === 1) {
+            if (this.dataForm.targetYear) {
+              this.$set(this.dataForm, 'showYear', String(this.dataForm.targetYear))
+            }
+          }
+          if (this.dataForm.targetType === 0) {
+            if (this.dataForm.targetYear && this.dataForm.targetMonth !== null) {
+              if (this.dataForm.targetMonth < 10) {
+                this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-0' + String(this.dataForm.targetMonth))
+              } else {
+                this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-' + String(this.dataForm.targetMonth))
+              }
+            }
+          }
+        })
+      }
+    }
+  }
 };
 </script>
 <style scoped>

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

@@ -1,28 +1,28 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-04-17 16:40:01
+ * @LastEditTime: 2024-05-22 15:29:18
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="50%">
+  <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
     <small-title slot="title" :no-padding="true">
-      {{ '碲化镉工厂生产数据详情' }}
+      {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
     </small-title>
     <div class="detailBox">
       <el-row :gutter="24">
         <el-col :span="8">
           <p class="title">工厂名称</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ factoryList[dataForm.factory] }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间维度</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.targetType === 0 ? '月' : '年' }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.targetType === 1 ? dataForm.targetYear + '年' : dataForm.targetYear + '年' + dataForm.targetMonth + '月'}}</p>
         </el-col>
       </el-row>
       <el-divider></el-divider>
@@ -32,47 +32,47 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">芯片产量</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.chipYield }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片良率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.chipYieldRate }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片良率</p>
+          <p class="title">芯片BOM</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.chipBom }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片总功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.chipTotalPower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">FTO投入量</p>
+          <p class="title">{{ ftype === 0 ? 'FTO投入量' : '钼电极投入量' }}</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ ftype === 0 ? dataForm.ftoInput : dataForm.molybdenumElectrodeInput }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">CSS稼动率</p>
+          <p class="title">{{ ftype === 0 ? 'CSS稼动率' : 'PID6稼动率' }}</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.chipCssMarriageRate }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片段OEE</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.chipOee }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片平均功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.chipAveragePower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">芯片人均产量</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
         </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
@@ -81,37 +81,37 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">封装BOM</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.componentBom }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">封装线OEE</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.componentOee }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件良率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.componentYieldRate }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.componentYield }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">标准组件总功率</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.componentTotalPower }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">封装产能利用率</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件人均产量</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件人均产量</p>
+          <p class="title">标准组件平均功率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.componentAveragePower }}</p>
         </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
@@ -120,33 +120,33 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">产品产量</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.bipvProductOutput }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">人均产量</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片使用量</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.bipvChipUsage }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片使用量</p>
+          <p class="title">芯片利用率</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">内部材料成本</p>
-          <p class="text">{{ }}</p>
+          <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">内部材料成本</p>
+          <p class="title">OEM及委外材料成本</p>
-          <p class="text">{{ dataForm.code }}</p>
+          <p class="text">{{ dataForm.bipvOeeMaterialCost }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">内部材料成本</p>
+          <p class="title">综合材料成本</p>
-          <p class="text">{{ dataForm.productName }}</p>
+          <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
         </el-col>
       </el-row>
     </div>
@@ -155,20 +155,24 @@
 </template>
 
 <script>
-// import basicAdd from './basic-add';
+import { getProduceTargetDetail } from '@/api/produceData';
-// import {
-//   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList,
-//   getTeamList, getDetList, getLineList
-// } from "@/api/base/qualityScrapLog";
-// import { getList, } from "@/api/base/qualityScrapType";
 import SmallTitle from './SmallTitle';
+import { factoryList } from "@/utils/constants";
+
 export default {
   components: {
     SmallTitle,
   },
+  props: {
+    ftype: {
+      type: Number,
+      default: 0
+    }
+  },
   // mixins: [basicAdd],
   data() {
     return {
+      factoryList,
       urlOptions: {
         isGetCode: false,
         // codeURL: getCode,
@@ -223,8 +227,14 @@ export default {
     // this.getCurrentTime()
   },
   methods: {
-    init() {
+    init(id) {
       this.visible = true
+      console.log('打印', id)
+      if (id) {
+        getProduceTargetDetail(id).then(res => {
+          this.dataForm = res.data
+        })
+      }
     },
     // getCurrentTime() {
     //   // new Date().Format("yyyy-MM-dd HH:mm:ss")

src/views/produce/target/index.vue

@@ -1,18 +1,30 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-04-17 16:37:35
+ * @LastEditTime: 2024-05-22 16:22:57
- * @LastEditors: zhp
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
   <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;">
+    <ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
-      <ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="currentMenu = $event">
     </ButtonNav>
+    <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-form-item v-if="facType === 0" label="工厂名称" prop="factorys">
-          <el-select clearable v-model="timeSelect" placeholder="请选择">
+          <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
+            <el-option v-for="item in dhgfactoryList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-else label="工厂名称" prop="factorys">
+          <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
+            <el-option v-for="item in tyjxfactoryList" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间维度" prop="date">
+          <el-select size="small" 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>
@@ -34,26 +46,20 @@
             {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
           </span>
         </el-form-item> -->
-        <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date !== 4" label="时间值" prop="reportTime">
-          <el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份"
+          <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" 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 === 4" label="时间值" prop="reportTime">
-          <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
+          <el-date-picker size="small" clearable v-model="start" value-format="timestamp" type="year"
             placeholder="开始时间">
           </el-date-picker>
           ~
-          <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
+          <el-date-picker size="small" clearable v-model="end" value-format="timestamp" type="year" placeholder="结束时间"
             @change="getYear">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="工厂名称" prop="factoryId">
-          <el-select v-model="listQuery.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-form-item label="玻璃类型" prop="type">
           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
@@ -68,28 +74,62 @@
         </el-form-item> -->
         <el-form-item>
           <el-button type="primary" size="small" @click="getDataList">查询</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="primary" size="small" plain @click="handleImport">导入</el-button>
           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
+          <el-button type="success" size="small" plain @click="addFactory">新增</el-button>
         </el-form-item>
       </el-form>
       <!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> -->
-      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
+      <base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
         :table-data="tableData">
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
-      <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
+      <pagination
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="successSubmit" />
+        :limit.sync="listQuery.size"
-
+        :page.sync="listQuery.current"
-      <!-- <el-row :gutter="24"> -->
+        :total="listQuery.total"
-      <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> -->
+        @pagination="getDataList"
-      <!-- <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> -->
+      />
-      <!-- </el-col> -->
+      <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :ftype="facType" @destroy="detailOrUpdateVisible = false" />
-      <!-- <el-col :span="12">
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :ftype="facType" @refreshDataList="getDataList" @destroy="addOrUpdateVisible = false" />
-            <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
-          </el-col> -->
 
     </div>
 
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url"
+        :file-list="fileList"
+        :disabled="upload.isUploading"
+        :on-success="handleFileSuccess"
+        :on-progress="handleFileUploadProgress"
+        :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <span>仅允许导入xls、xlsx格式文件。</span>
+        </div>
+      </el-upload>
+      <!-- <el-upload
+        ref="upload"
+        class="upload-demo"
+        action="#"
+        :limit="1"
+        :file-list="fileList"
+        :auto-upload="false"
+        :http-request="handleFileSuccess"> -->
+        <!-- <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">只能上传.xlsx, .xls文件，且不超过500kb</div>
+      </el-upload> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
       :type="listQuery.reportType" @refreshDataList="getDataList" /> -->
     <!-- <pagination
@@ -101,8 +141,8 @@
 </template>
 
 <script>
-// import { parseTime } from '../../core/mixins/code-filter';
+import { parseTime } from '@/utils/ruoyi';
-// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
+import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -110,6 +150,8 @@ import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
 import detailOrUpdate from './detail-or-updata';
 import addOrUpdate from './add-or-updata';
+import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants";
+import {getBaseHeader} from "@/utils/request";
 
 
 // import FileSaver from 'file-saver'
@@ -119,19 +161,42 @@ export default {
   mixins: [basicPage],
 	data() {
     return {
+      factoryList,
+      dhgfactoryList,
+      tyjxfactoryList,
+      currentMenu: '碲化镉工厂',
+      fileList: [],
+      start: undefined,
+      end: undefined,
       listQuery: {
-        pageSize: 10,
+        size: 10,
-        pageNo: 1,
+        current: 1,
-        factoryId: null,
+        factorys: null,
         total: 0,
-        type: null,
+        date: undefined,
-        // reportType: 2,
+        beginTime: undefined,
+        endTime: undefined,
         reportTime: []
       },
       detailOrUpdateVisible: false,
       addOrUpdateVisible:false,
       date1: undefined,
       date2: undefined,
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "导入",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        // updateSupport: 0,
+        // 设置上传的请求头部
+        headers: getBaseHeader(),
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
+      },
       tableBtn: [
         {
             type: 'detail',
@@ -144,7 +209,7 @@ export default {
         {
           type: 'delete',
           btnName: '删除',
-          },
+        }
       ].filter((v) => v),
       typeList: [
         {
@@ -159,27 +224,6 @@ export default {
           name: 'BIPV产品',
           id: 2,
         },
-      ],
-      // weekNum: undefined,
-      dataList: [
-        {
-          id:'first',
-        },
-         {
-          id: 'second',
-        },
-         {
-          id: 'third',
-        },
-         {
-          id: 'fourth',
-        },
-         {
-          id: 'fifth',
-        },
-         {
-          id: 'sixth',
-        },
       ],
 			urlOptions: {
 				// getDataListURL: getGlassPage,
@@ -270,135 +314,220 @@ export default {
         },
       ],
       timeList: [
-        // {
-        //   value: 'day',
-        //   label: '日'
-        // },
-        // {
-        //   value: 'week',
-        //   label: '周'
-        // },
         {
-          value: 'month',
+          value: 3,
           label:'月'
         },
         {
-          value: 'year',
+          value: 4,
           label: '年'
         }
       ],
-      factoryList: [
-        {
-          name: '测试',
-          id:1
-        },
-        {
-          name: '测试2',
-          id: 2
-        }
-      ],
       tableProps: [
-        // {
-        // 	prop: 'createTime',
-        // 	label: '添加时间',
-        // 	fixed: true,
-        // 	width: 180,
-        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
-        // },
-
         {
-          prop: 'nickName',
+          prop: 'factory',
           label: '工厂名称',
+          filter: (val) => factoryList[val],
+          minWidth: 200,
+          showOverflowtooltip: true
         },
         {
-          prop: 'userName',
+          prop: 'tagertTime',
           label: '目标时间',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'type',
+          prop: 'createTime',
           label: '提交时间',
+          filter: parseTime,
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'inNum',
+          prop: 'ftoInput',
-          label: '钼电极投入量(片)',
+          label: 'FTO投入量(片)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'putNum',
+          prop: 'chipYield',
           label: '芯片产量(片)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodNum',
+          prop: 'chipAveragePower',
           label: '芯片平均功率(W)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipYieldRate',
           label: '芯片良率(%)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipTotalPower',
           label: '芯片总功率(KW)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipCssMarriageRate',
-          label: 'PID6稼动率(%)',
+          label: 'CSS稼动率(%)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipOee',
           label: '芯片段OEE(%)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipCapacityUtilizationRate',
           label: '芯片产能利用率(%)',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipAnnualAverageProduction',
           label: '芯片人均产量（片/人）',
+          minWidth: 180,
+          showOverflowtooltip: true
         },
         {
-          prop: 'goodYelid',
+          prop: 'chipBom',
           label: '芯片BOM',
+          minWidth: 150,
+          showOverflowtooltip: true
         },
       ],
-      timeSelect:'month',
+      // timeSelect:'month',
       startTimeStamp:null, //开始时间
       endTimeStamp:null, //结束时间
       // date:'凯盛玻璃控股成员企业2024生产数据',
 			// reportTime: '',
 			startTimeStamp: '',
 			endTimeStamp: '',
-      tableData: [
+      tableData: [],
-        {
+      facType: 0
-          userName: 'userName',
-          nickName: '用户名',
-          datas:'111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-        },
-        {
-          userName: 'userName',
-          nickName: '用户名',
-          datas: '111111'
-          // subcomponent: row
-        }
-      ],
 			// proLineList: [],
 			// all: {}
 		};
   },
-  computed: {
+  // computed: {
-    weekNum() {
+  //   weekNum() {
-      return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
+  //     return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
-    },
+  //   },
+  // },
+  watch: {
+    facType(value) {
+      if (value === 0) {
+        this.$set(this.tableProps, 3, {
+          prop: 'ftoInput',
+          label: 'FTO投入量(片)',
+          minWidth: 150,
+          showOverflowtooltip: true
+        })
+        this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
+      } else {
+        this.$set(this.tableProps, 3, {
+          prop: 'molybdenumElectrodeInput',
+          label: '钼电极投入量(片)',
+          minWidth: 150,
+          showOverflowtooltip: true
+        })
+        this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
+      }
+      console.log(112, this.tableProps)
+    }
   },
 	mounted() {
-    this.getDict()
+    // this.getDict()
     // this.getCurrentYearFirst()
-    // this.getDataList()
+    this.getDataList()
 	},
   methods: {
+    handleImport() {
+      this.upload.title = "生产目标导入";
+      this.upload.open = true;
+      this.fileList = []
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    // handleFileSuccess(param, type) {
+    //   console.log('带的', param.file)
+    //   const formData = new FormData()
+    //   formData.append('multipartFile', param.file)
+    //   console.log('送送', param)
+    //   importDiTarget(formData).then(res => {
+    //     console.log(res)
+    //     if (res.code !== 0) {
+    //       this.$modal.msgError(response.msg)
+    //       return;
+    //     }
+    //     this.upload.open = false;
+    //     this.upload.isUploading = false;
+    //     this.$refs.upload.clearFiles();
+    //   }).catch(() => {
+    //     this.upload.open = false
+    //     this.upload.isUploading = false
+    //   })
+    //   // 拼接提示语
+    //   // let data = response.data;
+    //   // let text = '创建成功数量：' + data.createUsernames.length;
+    //   // for (const username of data.createUsernames) {
+    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+    //   // }
+    //   // text += '<br />更新成功数量：' + data.updateUsernames.length;
+    //   // for (const username of data.updateUsernames) {
+    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+    //   // }
+    //   // text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
+    //   // for (const username in data.failureUsernames) {
+    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
+    //   // }
+    //   this.$message.success('导入成功！');
+    //   this.getDataList();
+    // },
+        // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.$modal.msgError(response.msg)
+        return;
+      }
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$message.success('导入成功！')
+      this.getDataList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+    addFactory() {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init();
+      });
+    },
+    changeFactory($event) {
+      this.currentMenu = $event
+      this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1
+      // if (this.facType === 0) {
+      //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
+      // } else {
+      //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
+      // }
+      this.getDataList()
+    },
     handleClick(val) {
       if (val.type === "edit") {
         this.addOrUpdateVisible = true;
@@ -407,11 +536,33 @@ export default {
           this.$refs.addOrUpdate.init(val.data.id);
         });
       } else if (val.type === "delete") {
-        this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
+        console.log('啊啊', val)
+        this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex)
       } else {
         this.otherMethods(val)
       }
     },
+    // 删除
+    deleteHandle(id, name, index) {
+      this.$confirm('是否确认删除工厂名称为' + factoryList[name] + '的数据项?', "系统提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delTarget(id).then(({ data }) => {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          });
+        })
+        .catch(() => { });
+    },
     otherMethods(val) {
       this.detailOrUpdateVisible = true;
       this.addOrEditTitle = "详情";
@@ -423,133 +574,34 @@ export default {
 
     },
     getYear(e) {
-      if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
+      if (this.end && e - this.start > 10 * 365*24*60*60*1000) {
         this.$message({
           message: '年份起止时间不能超过十年',
           type: 'warning'
         });
         // console.log();
+      } else {
+        if (this.end < this.start) {
+          this.$message({
+            message: '结束年份不能小于开始年份',
+            type: 'warning'
+          });
+        }
       }
       // console.log(e);
     },
-    onValueChange(picker, k) { // 选中近k周后触发的操作
+    changeTime() {
-      if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) {
-        console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000)
-        this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
-        // this.onValueChange()   // 这里为我们希望value改变时触发的方法
-        this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
-        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); if (numDays > 168) {
-          console.log(numDays)
-          this.$message({
-            message: '周范围不能超过24周',
-            type: 'warning'
-          });
-          // this.onValueChange()
-        }
-    }
-    },
-    changeDayTime() {
       if (this.listQuery.reportTime) {
-        // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
+        const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0]
-        // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
+        if (numDays > 2*365*24*60*60*1000) {
-        console.log(this.listQuery.reportTime[1])
-        const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) {
-          this.$message({
-            message: '时间范围不能超过30天',
-            type: 'warning'
-          });
-          this.listQuery.reportTime = [];
-        }
-      } else {
-      }
-    },
-    changeTime(value) {
-      if (this.listQuery.reportTime) {
-        const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳，毫秒级别
-        const fullyear = this.listQuery.reportTime[1].getFullYear()
-        let days = 0
-        switch (timeStamp) {
-          case 0:
-          case 2:
-          case 4:
-          case 6:
-          case 7:
-          case 9:
-          case 11:
-            days = 31
-            break
-          case 3:
-          case 4:
-          case 8:
-          case 10:
-            days = 30
-            break
-          case 1:
-            if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) {
-              days = 29
-            } else {
-              days = 28
-            }
-            break
-        }
-        let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
-        // this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间
-        let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间
-        // console.log(endTimeStamp);
-        // let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD");
-        // console.log(endTime);
-        // console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss'))
-        // console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss'))
-
-        // 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(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
           this.$message({
             message: '时间范围不能超过24个月',
             type: 'warning'
           });
           this.listQuery.reportTime = [];
-        } else {
-          this.listQuery.reportTime[0] = startTime
-          this.listQuery.reportTime[1] = endTime
         }
-      } else {
-        console.log(this.listQuery.reportTime[0])
       }
     },
-    // handleTime() {
-    //   this.$forceUpdate()
-    //   // this.$nextTick(() => [
-
-    //   // ])
-    // },
-    // getCurrentYearFirst() {
-    //   let date = new Date();
-    //   date.setDate(1);
-    //   date.setMonth(0);
-    //   this.reportTime = date;
-    //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
-    //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
-    //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
-    // },
-    // changeTime(val) {
-    //   if (val) {
-    //     // let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
-    //     // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
-    //     // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
-    //     // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
-    //     // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
-    //   } else {
-    //     this.listQuery.reportTime = []
-    //   }
-    // },
-    async getDict() {
-      this.$refs.lineChart.initChart()
-			// 产线列表
-			// const res = await getCorePLList();
-			// this.proLineList = res.data;
-		},
     // 获取数据列表
     multipliedByHundred(str) {
       console.log(str);
@@ -574,36 +626,50 @@ export default {
 
     },
     async getDataList() {
-    },
+      if (this.listQuery.date === 3) {
-    add0(m) {
+        if (this.listQuery.reportTime?.length > 0) {
-      return m < 10 ? '0' + m : m
+          this.listQuery.beginTime = this.listQuery.reportTime[0] ? this.listQuery.reportTime[0] : undefined
-    },
+          this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined
-    format(shijianchuo) {
+        }
-      //shijianchuo是整数，否则要parseInt转换
+      }
-      var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
+      if (this.listQuery.date === 4) {
-      // console.log(time)
+        if (this.listQuery.reportTime?.length > 0) {
-      // var y = time.getFullYear();
+          this.listQuery.beginTime = this.start ? this.start : undefined
-      // var m = time.getMonth() + 1;
+          this.listQuery.endTime = this.end ? this.end : undefined
-      // var d = time.getDate();
+        }
-      // var h = time.getHours();
+      }
-      // var mm = time.getMinutes();
+      if (this.currentMenu === '碲化镉工厂') {
-      // var s = time.getSeconds();
+        await prodTargetDiPage(this.listQuery).then(res => {
-      return time
+          if (res.code === 0) {
-    },
+            this.tableData = res.data.records
-		//时间戳转为yy-mm-dd hh:mm:ss
+            this.tableData.forEach(item => {
-		timeFun(unixtimestamp) {
+                const year = item.targetYear ? item.targetYear + '年' : ''
-				var unixtimestamp = new Date(unixtimestamp);
+                const month = item.targetMonth ? item.targetMonth + '月' : ''
-				var year = 1900 + unixtimestamp.getYear();
+                item.tagertTime = year + month
-				var month = "0" + (unixtimestamp.getMonth() + 1);
+            })
-				var date = "0" + unixtimestamp.getDate();
+            this.listQuery.total = res.data.total
-				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
+          }
+        })
+      } else {
+        await prodTargetToPage(this.listQuery).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data.records
+            this.tableData.forEach(item => {
+              const year = item.targetYear ? item.targetYear + '年' : ''
+              const month = item.targetMonth ? item.targetMonth + '月' : ''
+              item.tagertTime = year + month
+            })
+            this.listQuery.total = res.data.total
+          }
+        })
+      }
     },
 		buttonClick(val) {
 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
 			switch (val.btnName) {
 				case 'search':
-					this.listQuery.pageNo = 1;
+					this.listQuery.current = 1;
-					this.listQuery.pageSize = 10;
+					this.listQuery.size = 10;
 					this.getDataList();
 					break;
 				case 'export':
@@ -615,38 +681,27 @@ export default {
 		},
 		/** 导出按钮操作 */
     handleExport() {
-      // 处理查询参数
+      const queryParams = this.listQuery;
-      // var xlsxParam = { raw: true };
+      queryParams.current = 1
-      // /* 从表生成工作簿对象 */
+      queryParams.size = 999
-      // import('xlsx').then(excel => {
+      if (this.facType === 0) {
-      //   var wb = excel.utils.table_to_book(
+        this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-      //     document.querySelector("#exportTable"),
+          this.exportLoading = true;
-      //     xlsxParam
+          return exportDiTargetExcel(queryParams);
-      //   );
+        }).then(response => {
-      //   /* 获取二进制字符串作为输出 */
+          this.$download.excel(response, '碲化镉工厂生产目标数据.xls');
-      //   var wbout = excel.write(wb, {
+          this.exportLoading = false;
-      //     bookType: "xlsx",
+        }).catch(() => {});
-      //     bookSST: true,
+      } else {
-      //     type: "array",
+        this.$modal.confirm('是否确认导出所有数据项?').then(() => {
-      //   });
+          this.exportLoading = true;
-      //   try {
+          return exportToTargetExcel(queryParams);
-      //     FileSaver.saveAs(
+        }).then(response => {
-      //       //Blob 对象表示一个不可变、原始数据的类文件对象。
+          this.$download.excel(response, '铜铟镓硒工厂生产目标数据.xls');
-      //       //Blob 表示的不一定是JavaScript原生格式的数据。
+          this.exportLoading = false;
-      //       //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
+        }).catch(() => {});
-      //       //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+      }
-      //       new Blob([wbout], { type: "application/octet-stream" }),
+    }
-      //       //设置导出文件名称
-      //       "许昌安彩日原片生产汇总.xlsx"
-      //     );
-      //   } catch (e) {
-      //     if (typeof console !== "undefined") console.log(e, wbout);
-      //   }
-      //   return wbout;
-      //   //do something......
-      // })
-
-    },
 	},
 };
 </script>
@@ -667,7 +722,7 @@ export default {
   margin-top: 8px;
 }
 .app-container {
-  margin: 0 16px 0;
+  margin: 0;
   background-color: #fff;
   border-radius: 4px;
   padding: 16px 16px 0;

src/views/system/components/statusBtn2.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: "StatusBtn2",
+  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/components/statusBtn3.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <span
+      class="dot"
+      :class="injectData.resultCode === 0 ? 'green' : 'red'"
+    ></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.resultCode === 0 ? "成功" : "失败";
+    },
+  },
+};
+</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/components/statusBtn4.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <span class="dot" :class="injectData.result === 0 ? 'green' : 'red'"></span>
+    <span>{{ state }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "StatusBtn3",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    state() {
+      return this.injectData.result === 0 ? "成功" : "失败";
+    },
+  },
+};
+</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/components/statusBtn5.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-switch
+    v-model="status"
+    type="text"
+    size="small"
+    @change="changeHandler"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      status: false,
+    };
+  },
+  mounted() {
+    this.mapToState();
+  },
+  methods: {
+    mapToState() {
+      this.status = this.injectData.status === 0 ? true : false;
+    },
+    changeHandler() {
+      let params = {};
+      params.id = this.injectData.id;
+      params.status = this.status ? "0" : "1";
+      params.username = this.injectData.username;
+      this.$emit("emitData", params);
+    },
+  },
+};
+</script>

src/views/system/loginlog/index.vue

@@ -1,80 +1,144 @@
 <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
-      <el-form-item label="登录地址" prop="userIp">
+      :formConfigs="formConfig"
-        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
+      ref="searchBarForm"
-                  @keyup.enter.native="handleQuery"/>
+      @headBtnClick="buttonClick"
-      </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-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>
-      </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-form-item>
-      <el-form-item>
-        <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">
+    <base-table
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+      :page="queryParams.pageNo"
-                   v-hasPermi="['system:login-log:export']">导出</el-button>
+      :limit="queryParams.pageSize"
-      </el-col>
+      :table-props="tableProps"
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      :table-data="list"
-    </el-row>
+      :max-height="tableH"
+    />
 
-    <el-table v-loading="loading" :data="list">
+    <pagination
-      <el-table-column label="访问编号" align="center" prop="id" />
+      :page.sync="queryParams.pageNo"
-      <el-table-column label="日志类型" align="center" prop="logType" width="120">
+      :limit.sync="queryParams.pageSize"
-        <template v-slot="scope">
+      :total="total"
-          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+      @pagination="getList"
-        </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="status">
-        <template v-slot="scope">
-          <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">
-        <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"/>
   </div>
 </template>
 
 <script>
 import { list, exportLoginLog } from "@/api/system/loginlog";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { parseTime } from "@/utils/ruoyi";
+import { DICT_TYPE, publicFormatter } from "@/utils/dict";
+import statusBtn4 from "./../components/statusBtn4.vue";
+const tableProps = [
+  {
+    prop: "id",
+    label: "访问编号",
+  },
+  {
+    prop: "logType",
+    label: "日志类型",
+    filter: publicFormatter(DICT_TYPE.SYSTEM_LOGIN_TYPE),
+  },
+  {
+    prop: "username",
+    label: "用户名称",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "userIp",
+    label: "登录地址",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "userAgent",
+    label: "userAgent",
+    minWidth: 300,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "result",
+    label: "结果",
+    minWidth: 80,
+    // filter: publicFormatter(DICT_TYPE.SYSTEM_LOGIN_RESULT),
+    subcomponent: statusBtn4,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "createTime",
+    label: "登录日期",
+    minWidth: 150,
+    filter: parseTime,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemLoginLog",
+  mixins: [tableHeightMixin],
   data() {
     return {
-      // 遮罩层
+      formConfig: [
-      loading: true,
+        {
+          type: "input",
+          label: "登录地址",
+          placeholder: "登录地址",
+          param: "userIp",
+        },
+        {
+          type: "input",
+          label: "用户名称",
+          placeholder: "用户名称",
+          param: "username",
+        },
+        {
+          type: "select",
+          label: "状态",
+          selectOptions: [
+            { id: true, name: "成功" },
+            { id: false, name: "失败" },
+          ],
+          param: "status",
+        },
+        {
+          type: "datePicker",
+          label: "登录时间",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "createTime",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: this.$auth.hasPermi("system:login-log:export")
+            ? "separate"
+            : "",
+        },
+        {
+          type: this.$auth.hasPermi("system:login-log:export") ? "button" : "",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableProps,
       // 导出遮罩层
       exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
       // 总条数
       total: 0,
       // 表格数据
@@ -82,12 +146,12 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
         userIp: undefined,
         username: undefined,
         status: undefined,
-        createTime: []
+        createTime: [],
-      }
+      },
     };
   },
   created() {
@@ -96,39 +160,50 @@ export default {
   methods: {
     /** 查询登录日志列表 */
     getList() {
-      this.loading = true;
+      list(this.queryParams).then((response) => {
-      list(this.queryParams).then(response => {
         this.list = response.data.list;
         this.total = response.data.total;
-          this.loading = false;
+      });
-        }
-      );
     },
-    /** 搜索按钮操作 */
+    buttonClick(val) {
-    handleQuery() {
+      this.queryParams.userIp = val.userIp;
+      this.queryParams.username = val.username;
+      this.queryParams.status = val.status;
+      this.queryParams.createTime = val.createTime;
+      if (val.btnName === "search") {
         this.queryParams.pageNo = 1;
         this.getList();
-    },
+      } else {
-    /** 重置按钮操作 */
+        this.handleExport();
-    resetQuery() {
+      }
-      this.resetForm("queryForm");
-      this.handleQuery();
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
           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,93 +1,199 @@
 <template>
   <div class="app-container">
-    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <!-- <doc-alert
-    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
+      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">
+    <search-bar
-      <el-form-item label="菜单名称" prop="name">
+      :formConfigs="formConfig"
-        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+      ref="searchBarForm"
-      </el-form-item>
+      @headBtnClick="buttonClick"
-      <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>
-      </el-form-item>
-      <el-form-item>
-        <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">
+    <!-- 列表 -->
+    <base-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :table-props="tableProps"
+      :table-data="menuList"
+      :row-key="'id'"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="120"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+
+    <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+        <el-button
-                   v-hasPermi="['system:menu:create']">新增</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
-    </el-row>
+        :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"
+    <!-- <el-table
-              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      v-if="refreshTable"
-      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
+      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
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
+        prop="permission"
-      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
+        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" />
         </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)"
+          <el-button
-                     v-hasPermi="['system:menu:update']">修改</el-button>
+            size="mini"
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
+            type="text"
-                     v-hasPermi="['system:menu:create']">新增</el-button>
+            icon="el-icon-edit"
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:menu:delete']">删除</el-button>
+            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>
+    </el-table> -->
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+    <base-dialog :dialogTitle="title" :dialogVisible="open" width="50%">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
-              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
+              <treeselect
-                          placeholder="选择上级菜单"/>
+                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)">
+                <el-radio
-                  {{dict.label}}</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-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>
+                <el-input
-                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
+                  slot="reference"
-                            style="height: 32px;width: 16px;"/>
+                  v-model="form.icon"
-                  <i v-else slot="prefix" class="el-icon-search el-input__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>
-          </el-col>
+          </el-col> -->
           <el-col :span="12">
             <el-form-item label="菜单名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入菜单名称" />
@@ -95,13 +201,20 @@
           </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">
+                <el-tooltip
+                  content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 路由地址
@@ -112,42 +225,65 @@
           <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-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.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-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)"
+                <el-radio
-                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</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,7 +297,10 @@
           <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>
                 总是显示
@@ -175,7 +314,10 @@
           <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>
                 是否缓存
@@ -192,25 +334,130 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
   </div>
 </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 { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE, publicFormatter } from "@/utils/dict";
 import { isExternal } from "@/utils/validate";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import statusBtn2 from "./../components/statusBtn2.vue";
+const tableProps = [
+  {
+    prop: "name",
+    label: "菜单名称",
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "sort",
+    label: "排序",
+    width: 100,
+  },
+  {
+    prop: "permission",
+    label: "权限标识",
+    minWidth: 80,
+  },
+  {
+    prop: "component",
+    label: "组件路径",
+    minWidth: 80,
+  },
+  {
+    prop: "componentName",
+    label: "组件名称",
+    minWidth: 80,
+  },
+  {
+    prop: "status",
+    label: "状态",
+    // filter: publicFormatter(DICT_TYPE.COMMON_STATUS),
+    subcomponent: statusBtn2,
+    width: 100,
+  },
+];
 
 export default {
   name: "SystemMenu",
+  mixins: [tableHeightMixin],
   components: { Treeselect, IconSelect },
   data() {
     return {
+      formConfig: [
+        {
+          type: "input",
+          label: "菜单名称",
+          placeholder: "菜单名称",
+          param: "name",
+        },
+        {
+          type: "select",
+          label: "菜单状态",
+          selectOptions: this.getDictDatas(this.DICT_TYPE.COMMON_STATUS),
+          labelField: "label",
+          valueField: "value",
+          param: "status",
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: this.$auth.hasPermi("system:menu:create") ? "button" : "",
+          btnName: "新增",
+          name: "addNew",
+          color: "success",
+          plain: true,
+        },
+        {
+          type: "button",
+          btnName: "展开/折叠",
+          name: "expandAll",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableBtn: [
+        this.$auth.hasPermi("system:menu:update")
+          ? {
+              type: "edit",
+              btnName: "编辑",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:menu:delete")
+          ? {
+              type: "delete",
+              btnName: "删除",
+            }
+          : undefined,
+        this.$auth.hasPermi("system:menu:create")
+          ? {
+              type: "add",
+              btnName: "新增",
+            }
+          : undefined,
+      ].filter((v) => v),
+      tableProps,
+      heightNum: 210,
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -230,24 +477,22 @@ export default {
       // 查询参数
       queryParams: {
         name: undefined,
-        visible: undefined
+        status: 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: [
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
-          { required: true, message: "状态不能为空", trigger: "blur" }
-        ]
       },
 
       // 枚举
@@ -255,13 +500,34 @@ export default {
       CommonStatusEnum: CommonStatusEnum,
       // 数据字典
       menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleClick(val) {
+      console.log(val);
+      if (val.type === "edit") {
+        this.handleUpdate(val.data);
+      } else if (val.type === "delete") {
+        this.handleDelete(val.data);
+      } else {
+        this.handleAdd(val.data);
+      }
+    },
+    buttonClick(val) {
+      this.queryParams.name = val.name;
+      this.queryParams.status = val.status;
+      if (val.btnName === "search") {
+        this.getList();
+      } else if (val.btnName === "addNew") {
+        this.handleAdd();
+      } else {
+        this.toggleExpandAll();
+      }
+    },
     // 选择图标
     selected(name) {
       this.form.icon = name;
@@ -269,7 +535,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 +548,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);
       });
@@ -315,15 +581,6 @@ export default {
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     /** 展开/折叠操作 */
     toggleExpandAll() {
       this.refreshTable = false;
@@ -348,7 +605,7 @@ 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 = "修改菜单";
@@ -356,34 +613,36 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           // 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
-          if (this.form.type === SystemMenuTypeEnum.DIR
+          if (
-            || this.form.type === SystemMenuTypeEnum.MENU) {
+            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) !== '/') {
+              if (this.form.parentId === 0 && path.charAt(0) !== "/") {
-                this.$modal.msgSuccess('前端必须以 / 开头')
+                this.$modal.msgSuccess("前端必须以 / 开头");
-                return
+                return;
-              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
+              } else if (this.form.parentId !== 0 && path.charAt(0) === "/") {
-                this.$modal.msgSuccess('前端不能以 / 开头')
+                this.$modal.msgSuccess("前端不能以 / 开头");
-                return
+                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 +653,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,44 @@
 <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
-      <el-form-item label="系统模块" prop="module">
+      :formConfigs="formConfig"
-        <el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
+      ref="searchBarForm"
-                  @keyup.enter.native="handleQuery"/>
+      @headBtnClick="buttonClick"
-      </el-form-item>
+    />
-      <el-form-item label="操作人员" prop="userNickname">
+    <!-- 列表 -->
-        <el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
+    <base-table
-                  @keyup.enter.native="handleQuery"/>
+      :page="queryParams.pageNo"
-      </el-form-item>
+      :limit="queryParams.pageSize"
-      <el-form-item label="类型" prop="type">
+      :table-props="tableProps"
-        <el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
+      :table-data="list"
-          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
+      :max-height="tableH"
-                     :label="dict.label" :value="parseInt(dict.value)"/>
+    >
-        </el-select>
+      <method-btn
-      </el-form-item>
+        v-if="tableBtn.length"
-      <el-form-item label="状态" prop="status">
+        slot="handleBtn"
-        <el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
+        :width="80"
-          <el-option :key="true" label="成功" :value="true"/>
+        label="操作"
-          <el-option :key="false" label="失败" :value="false"/>
+        :method-list="tableBtn"
-        </el-select>
+        @clickBtn="handleClick"
-      </el-form-item>
+      />
-      <el-form-item label="操作时间" prop="startTime">
+    </base-table>
-        <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 icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <pagination
-      <el-col :span="1.5">
+      :page.sync="queryParams.pageNo"
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+      :limit.sync="queryParams.pageSize"
-                   v-hasPermi="['system:operate-log:export']">导出</el-button>
+      :total="total"
-      </el-col>
+      @pagination="getList"
-      <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="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"/>
-        </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>
-        </template>
-      </el-table-column>
-      <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>
-        </template>
-      </el-table-column>
-      <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>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList" />
 
     <!-- 操作日志详细 -->
-    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
+    <base-dialog
+      dialogTitle="访问日志详细"
+      :dialogVisible="open"
+      width="50%"
+      @close="open = false"
+    >
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="24">
@@ -88,24 +48,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"/>
+              <dict-tag
-              <br /> {{ form.content }}
+                :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
-              <br /> {{ form.exts }}
+                :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 +85,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="操作结果：">
-              <div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
+              <div v-if="form.resultCode === 0">
-              <div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
+                正常 | {{ form.resultData }}
+              </div>
+              <div v-else-if="form.resultCode > 0">
+                失败 | {{ form.resultCode }} || {{ form.resultMsg }}
+              </div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -123,19 +98,120 @@
       <div slot="footer" class="dialog-footer">
         <el-button @click="open = false">关 闭</el-button>
       </div>
-    </el-dialog>
+    </base-dialog>
   </div>
 </template>
 
 <script>
 import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import statusBtn3 from "./../components/statusBtn3.vue";
+const tableProps = [
+  {
+    prop: "id",
+    label: "日志编号",
+  },
+  {
+    prop: "module",
+    label: "操作模块",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "操作名",
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "userNickname",
+    label: "操作人",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "resultCode",
+    label: "操作结果",
+    subcomponent: statusBtn3,
+  },
+  {
+    prop: "duration",
+    label: "执行时长",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemOperateLog",
+  mixins: [tableHeightMixin],
   data() {
     return {
-      // 遮罩层
+      formConfig: [
-      loading: true,
+        {
+          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: this.$auth.hasPermi("system:operate-log:export")
+            ? "separate"
+            : "",
+        },
+        {
+          type: this.$auth.hasPermi("system:operate-log:export")
+            ? "button"
+            : "",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableProps,
       // 导出遮罩层
       exportLoading: false,
       // 显示搜索条件
@@ -144,6 +220,12 @@ export default {
       total: 0,
       // 表格数据
       list: [],
+      tableBtn: [
+        {
+          type: "detail",
+          btnName: "详情",
+        },
+      ],
       // 是否显示弹出层
       open: false,
       // 类型数据字典
@@ -153,12 +235,12 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
         module: undefined,
         userNickname: undefined,
         businessType: undefined,
-        status: undefined,
+        success: undefined,
-        startTime: []
+        startTime: [],
       },
     };
   },
@@ -168,24 +250,16 @@ export default {
   methods: {
     /** 查询登录日志 */
     getList() {
-      this.loading = true;
+      listOperateLog(this.queryParams).then((response) => {
-      listOperateLog(this.queryParams).then( response => {
         this.list = response.data.list;
         this.total = response.data.total;
-          this.loading = false;
+      });
-        }
-      );
     },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     /** 详细按钮操作 */
     handleView(row) {
       this.open = true;
@@ -193,19 +267,47 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
           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) {
+      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;
+      if (val.btnName === "search") {
+        this.queryParams.pageNo = 1;
+        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>

src/views/system/post/index.vue

@@ -1,162 +1,243 @@
 <template>
-  <div class="user-manager">
+  <div class="app-container">
-    <InPageLeftNav />
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-    <div
+      <el-form-item label="岗位编码" prop="code">
-      class="table-area"
+        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
-      :class="{
+      </el-form-item>
-        'table-area-w': sidebar.opened,
+      <el-form-item label="岗位名称" prop="name">
-        'table-area-ws': !sidebar.opened,
+        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
-      }"
+      </el-form-item>
-    >
+      <el-form-item label="状态" prop="status">
-      <SearchBarTop @emitFun="emitFun" />
+        <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)"/>
-      <base-table
+        </el-select>
-        :page="queryParams.pageNo"
+      </el-form-item>
-        :limit="queryParams.pageSize"
+      <el-form-item>
-        :table-props="tableProps"
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        :table-data="list"
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        :max-height="tableH"
+      </el-form-item>
-      >
+    </el-form>
-        <method-btn
+
-          v-if="tableBtn.length"
+    <el-row :gutter="10" class="mb8">
-          slot="handleBtn"
+      <el-col :span="1.5">
-          :width="120"
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          label="操作"
+                   v-hasPermi="['system:post:create']">新增</el-button>
-          :method-list="tableBtn"
+      </el-col>
-          @clickBtn="handleClick"
+      <el-col :span="1.5">
-        />
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-      </base-table>
+                   v-hasPermi="['system:post:export']">导出</el-button>
-      <pagination
+      </el-col>
-        :page.sync="queryParams.pageNo"
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        :limit.sync="queryParams.pageSize"
+    </el-row>
-        :total="total"
+
-        @pagination="getList"
+    <el-table v-loading="loading" :data="postList">
-      />
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <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:post:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:post:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="岗位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
       </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
-import InPageLeftNav from "./components/InPageLeftNav";
+
-import SearchBarTop from "./components/SearchBarTop";
+import {CommonStatusEnum} from '@/utils/constants'
-import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-import { listUser } from "@/api/system/user";
+
-const tableProps = [
-  {
-    prop: "username",
-    label: "用户名",
-    minWidth: 120,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "email",
-    label: "邮箱",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "mobile",
-    label: "手机号",
-    minWidth: 120,
-  },
-  {
-    prop: "deptName",
-    label: "组织",
-    minWidth: 120,
-  },
-  {
-    prop: "role",
-    label: "角色名称",
-  },
-  {
-    prop: "workno",
-    label: "工号",
-  },
-  {
-    prop: "status",
-    label: "状态",
-  },
-  {
-    prop: "remark",
-    label: "备注",
-    showOverflowtooltip: true,
-  },
-];
 export default {
   name: "SystemPost",
-  components: { InPageLeftNav, SearchBarTop },
-  mixins: [tableHeightMixin],
-  computed: {
-    ...mapGetters(["sidebar"]),
-  },
   data() {
     return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 20,
+        pageSize: 10,
-        name: null,
+        code: undefined,
-        status: null,
+        name: undefined,
-        planFinishTime: [],
+        status: undefined
-      },
-      total: 0,
-      tableProps,
-      list: [{ username: "111" }],
-      tableBtn: [
-        {
-          type: "authorization",
-          btnName: "授权",
-        },
-        {
-          type: "edit",
-          btnName: "编辑",
-        },
-        {
-          type: "delete",
-          btnName: "删除",
       },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
         ],
+        code: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    /** 查询用户列表 */
+    /** 查询岗位列表 */
     getList() {
-      listUser(this.queryParams).then((response) => {
+      this.loading = true;
-        this.list = response.data.list;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.data.list;
         this.total = response.data.total;
+        this.loading = false;
       });
     },
-    emitFun(val) {
+    // 取消按钮
-      if (val.btn === "onSearch") {
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
       this.queryParams.pageNo = 1;
       this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
+        }
+      });
     },
-    handleClick() {},
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
+          return delPost(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
     },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
+          this.exportLoading = true;
+          return exportPost(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '岗位数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.user-manager {
-  display: flex;
-  .table-area {
-    display: inline-block;
-    height: calc(100vh - 120px - 8px);
-    background-color: #fff;
-    margin-left: 8px;
-    border-radius: 8px;
-    padding: 8px;
-  }
-  .table-area-w {
-    width: calc(100vw - 542px);
-  }
-  .table-area-ws {
-    width: calc(100vw - 348px);
-  }
-}
-</style>

src/views/system/post/index1.vue

@@ -1,243 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="岗位编码" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="岗位名称" prop="name">
-        <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>
-      </el-form-item>
-      <el-form-item>
-        <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:post:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:post:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="postList">
-      <el-table-column label="岗位编号" align="center" prop="id" />
-      <el-table-column label="岗位编码" align="center" prop="code" />
-      <el-table-column label="岗位名称" align="center" prop="name" />
-      <el-table-column label="岗位排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <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:post:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:post:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="岗位名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入岗位名称" />
-        </el-form-item>
-        <el-form-item label="岗位编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入编码名称" />
-        </el-form-item>
-        <el-form-item label="岗位顺序" prop="sort">
-          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="岗位状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-              {{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
-
-import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-
-export default {
-  name: "SystemPost",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 岗位表格数据
-      postList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        code: undefined,
-        name: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "岗位名称不能为空", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" }
-        ],
-        sort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
-        ]
-      },
-
-      // 枚举
-      CommonStatusEnum: CommonStatusEnum,
-      // 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询岗位列表 */
-    getList() {
-      this.loading = true;
-      listPost(this.queryParams).then(response => {
-        this.postList = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        code: undefined,
-        name: undefined,
-        sort: 0,
-        status: CommonStatusEnum.ENABLE,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加岗位";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id
-      getPost(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改岗位";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updatePost(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPost(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id;
-      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
-          return delPost(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
-          this.exportLoading = true;
-          return exportPost(queryParams);
-        }).then(response => {
-          this.$download.excel(response, '岗位数据.xls');
-          this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
-};
-</script>

src/views/system/post/index2.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="user-manager">
+    <InPageLeftNav />
+    <div
+      class="table-area"
+      :class="{
+        'table-area-w': sidebar.opened,
+        'table-area-ws': !sidebar.opened,
+      }"
+    >
+      <SearchBarTop @emitFun="emitFun" />
+      <!-- 列表 -->
+      <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="120"
+          label="操作"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination
+        :page.sync="queryParams.pageNo"
+        :limit.sync="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import InPageLeftNav from "./components/InPageLeftNav";
+import SearchBarTop from "./components/SearchBarTop";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { listUser } from "@/api/system/user";
+const tableProps = [
+  {
+    prop: "username",
+    label: "用户名",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "email",
+    label: "邮箱",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mobile",
+    label: "手机号",
+    minWidth: 120,
+  },
+  {
+    prop: "deptName",
+    label: "组织",
+    minWidth: 120,
+  },
+  {
+    prop: "role",
+    label: "角色名称",
+  },
+  {
+    prop: "workno",
+    label: "工号",
+  },
+  {
+    prop: "status",
+    label: "状态",
+  },
+  {
+    prop: "remark",
+    label: "备注",
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "SystemPost",
+  components: { InPageLeftNav, SearchBarTop },
+  mixins: [tableHeightMixin],
+  computed: {
+    ...mapGetters(["sidebar"]),
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null,
+        status: null,
+        planFinishTime: [],
+      },
+      total: 0,
+      tableProps,
+      list: [{ username: "111" }],
+      tableBtn: [
+        {
+          type: "authorization",
+          btnName: "授权",
+        },
+        {
+          type: "edit",
+          btnName: "编辑",
+        },
+        {
+          type: "delete",
+          btnName: "删除",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      listUser(this.queryParams).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
+    },
+    emitFun(val) {
+      if (val.btn === "onSearch") {
+        this.queryParams.pageNo = 1;
+        this.getList();
+      } else {
+      }
+    },
+    handleClick() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user-manager {
+  display: flex;
+  .table-area {
+    display: inline-block;
+    height: calc(100vh - 120px - 8px);
+    background-color: #fff;
+    margin-left: 8px;
+    border-radius: 8px;
+    padding: 8px;
+  }
+  .table-area-w {
+    width: calc(100vw - 542px);
+  }
+  .table-area-ws {
+    width: calc(100vw - 348px);
+  }
+}
+</style>

src/views/system/role/index.vue

@@ -124,10 +124,10 @@ export default {
           color: "primary",
         },
         {
-          type: "separate",
+          type: this.$auth.hasPermi("system:role:create") ? "separate" : "",
         },
         {
-          type: "button",
+          type: this.$auth.hasPermi("system:role:create") ? "button" : "",
           btnName: "新增",
           name: "add",
           color: "success",
@@ -142,25 +142,32 @@ export default {
       tableProps,
       list: [],
       tableBtn: [
-        {
+        this.$auth.hasPermi("system:permission:assign-role-menu")
+          ? {
               type: "menuAuth",
               btnName: "菜单权限",
-          // showTip: "新增工单",
+            }
-        },
+          : undefined,
-        {
+        this.$auth.hasPermi("system:permission:assign-role-data-scope")
+          ? {
               type: "dataAuth",
               btnName: "数据权限",
               // showTip: "新增工单",
-        },
+            }
-        {
+          : undefined,
+        this.$auth.hasPermi("system:role:update")
+          ? {
               type: "edit",
               btnName: "编辑",
-        },
+            }
-        {
+          : undefined,
+        this.$auth.hasPermi("system:role:delete")
+          ? {
               type: "delete",
               btnName: "删除",
-        },
+            }
-      ],
+          : undefined,
+      ].filter((v) => v),
       addOrEditTitle: "",
       centervisible: false,
       // 菜单权限