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

Reviewed-on: #23

.env.dev

@@ -1,8 +1,8 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-22 16:29:35
+ # @LastEditTime: 2024-05-29 17:06:55
- # @LastEditors: DY
+ # @LastEditors: zhp
  # @Description:
 ###
 # 开发环境配置
@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
+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/mixins/chart.js

@@ -4,16 +4,16 @@ function __resizeHandler(entries) {
   console.log(entries)
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-    // const contentBoxSize = Array.isArray(entry.contentBoxSize)
+    const contentBoxSize = Array.isArray(entry.contentBoxSize)
-    //       ? entry.contentBoxSize[0]
+          ? entry.contentBoxSize[0]
-    //       : entry.contentBoxSize;
+          : entry.contentBoxSize;
-    //     this.chart_mixin_chartInstance.resize({
+        this.chart_mixin_chartInstance.resize({
-    //       width:
+          width:
-    //         contentBoxSize.inlineSize < this.MIN_WIDTH
+            contentBoxSize.inlineSize < this.MIN_WIDTH
-    //           ? this.MIN_WIDTH
+              ? this.MIN_WIDTH
-    //           : contentBoxSize.inlineSize,
+              : contentBoxSize.inlineSize,
-    //       height: contentBoxSize.blockSize,
+          height: contentBoxSize.blockSize,
-    //     });
+        });
     } else {
       // manipulate contentRect
       this.chart_mixin_chartInstance.resize({

src/store/modules/home.js

@@ -1,4 +1,3 @@
-
 import axios from "@/utils/request";
 import { deepClone } from "../../utils";
 
@@ -25,10 +24,12 @@ const state = {
       chipOee: {
         current: [],
         previous: [],
+        target:[]
       },
       transformRate: {
         current: [],
         previous: [],
+        target:[]
       },
       chipRate: {
         target: [],
@@ -39,6 +40,7 @@ const state = {
       stdRate: {
         target: [],
         current: [],
+        previous: [],
         outputNumber:[]
       },
     },
@@ -77,7 +79,7 @@ const mutations = {
         state.copilot.energy.elecList = payload.elecList;
         break;
       case "efficiency":
-        state.copilot.efficiency.chipOee = payload.chipOee;
+        state.copilot.efficiency.chipOeeRate = payload.chipOeeRate;
         state.copilot.efficiency.transformRate = payload.transformRate;
         state.copilot.efficiency.chipRate = payload.chipRate;
         state.copilot.efficiency.stdRate = payload.stdRate;
@@ -97,7 +99,7 @@ const actions = {
     commit("SET_HOME_INFO", payload);
   },
   /** 初始化驾驶舱数据 */
-  async initCopilot({ commit }, { period, source }) {
+  async initCopilot({ commit }, { period,source,than}) {
     // if (source == "energy") return;
 
     const fetcher = {
@@ -111,25 +113,27 @@ const actions = {
       efficiency: splitCurrentAndPreviousA,
     }[source]
     // 获取产量数据
-    let { data: factoryList, type } = await fetcher(period)
+    let { data: factoryList, type } = await fetcher(period,than)
-    let targetList = null;
+    // let targetList = null;
-    if (source === "yield" || source === "efficiency") {
+    // if (source === "yield" || source === "efficiency") {
-      // 获取目标数据
+    //   // 获取目标数据
-      let { data } = await fetcher(period, true)
+    //   let { data } = await fetcher(period,than, true)
-      targetList = data
+    //   targetList = data
-    }
+    // }
-    if (source == "energy") {
+    // if (source == "energy") {
-      let factoryData = factoryList
+    //   let factoryData = factoryList
-      const payload = handler(factoryData)
+    //   const payload = handler(factoryData)
-      commit("SET_COPILOT_INFO", { type, payload });
+    //   commit("SET_COPILOT_INFO", { type, payload });
-    } else {
+    // } else {
       let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
+      let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
+      let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
       let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
-      let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
+      let targetData = factoryList.prodTargetOutputDO ? factoryList.prodTargetOutputDO : factoryList.prodTargetRateDO
-      const payload = handler(factoryData, targetData,prodOutputFtoDO)
+      const payload = handler(factoryData,targetData,prodOutputFtoDO,preData,preFtoData)
     commit("SET_COPILOT_INFO", { type, payload });
 
-    }
+    // }
 
   },
 };
@@ -281,11 +285,11 @@ function splitCurrentAndPreviousB(factoryListResponse) {
   }
 }
 
-function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
+function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  // console.log('工厂',factoryListResponse);
+  console.log('工厂',targetListResponse);
 
   // 初始数据
-  const { chipOee, transformRate, chipRate, stdRate } = initA();
+  const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
   // factoryListResponse = [
   //   {
   //     factory: 0,
@@ -336,6 +340,23 @@ 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) {
       const fId = getFactoryId(factory);
@@ -347,27 +368,27 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
           chipOee,
           componentConversionEfficiency,
           componentYield
-        } = getFactoryTargetValueA(targetListResponse, fId);
+        } = getFactoryTargetValueA(targetListResponse, fId)
         stdRate.target[fId] =  componentYieldRate
         chipRate.target[fId] = chipYieldRate
+        chipOeeRate.target[fId] = chipOee
+        transformRate.target[fId] = componentConversionEfficiency
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee * 100 ;
+      chipOeeRate.current[fId] = factory.oee;
-      chipOee.previous[fId] = factory.previousYearOee * 100 ;
+      // chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
-      transformRate.current[fId] =
+      transformRate.current[fId] = factory.componentConversionEfficiency;
-        factory.componentConversionEfficiency * 100 ;
+      // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
-      transformRate.previous[fId] =
-        factory.previousYearComponentConversionEfficiency * 100 ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
       const _t = [chipRate, stdRate][factory.glassType]
       _t.current[fId] = factory.yieldRate ;
-      _t.previous[fId] = factory.previousYearYieldRate ;
+      // _t.previous[fId] = factory.previousYearYieldRate ;
     }
-
+    // console.log('chipOeeRate',chipOeeRate);
     return {
-      chipOee,
+      chipOeeRate,
       transformRate,
       chipRate,
       stdRate,
@@ -375,21 +396,57 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
   }
 }
 
-function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes) {
+function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  console.log('prodOutputFtoListRes',prodOutputFtoListRes);
+  console.log('prodOutputFtoListRes',preData);
   // 初始数据
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
    if (prodOutputFtoListRes) {
     for (const factory of prodOutputFtoListRes) {
       console.log(factory);
       const fId = getFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
       ftoInvest.current[fId] = factory.chipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+    }
+   }
+   if (preFtoData) {
+    for (const factory of preFtoData) {
+      console.log(factory);
+      const fId = getPreFactoryId(factory);
+      // const preFId = getPreFactoryId(factory);
+      // if (fId) {
       ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
+      // if (preFId) {
+      // ftoInvest.previous[fId] = factory.previousYearChipInput;
+      // }
     }
    }
-  if (factoryListResponse) {
+    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 } =
@@ -400,22 +457,13 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       }
       // 芯片投入
           chipInvest.current[fId] = factory.inputNumber;
-      chipInvest.previous[fId] = factory.previousYearInputNumber;
-      // FTO投入
-      // if (factory.chipInput || factory.previousYearChipInput) {
-      //     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,
@@ -424,27 +472,39 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
       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,
   };
 }
 
@@ -458,15 +518,18 @@ function getFactoryTargetValueA(targetList, 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 ?? random_default(),
+      componentYield: target.componentYield ?? 0,
+      // componentYield: target.componentYield ?? 0,
+      chipOee: target.chipOee ?? 0,
     };
   }
   return {
     chipYieldRate:0,
     componentYieldRate:0,
     componentYield: 0,
+    chipOee:0,
   };
 }
 
@@ -480,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,
@@ -544,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;
@@ -609,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);
 }
 
 /**
@@ -627,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) {
@@ -652,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/views/copilot/components/BarChartBase.vue

@@ -11,7 +11,7 @@
       <span v-for="item in legend" :key="item.label" class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
     </div>
-    <div ref="chart" :style="{ height: '95%',width: width}"></div>
+    <div ref="chart" style="height:94%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -51,7 +51,7 @@ export default {
   },
   data() {
     return {
-      width: '',
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -184,16 +184,7 @@ export default {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isOpen(val) {
       // console.log(val)
-      if (val === true) {
-        console.log('ztl')
-        this.width = 95 + '%'
       this.canvasReset()
-
-        console.log(this.width)
-      } else {
-        this.watch = 100 + '%'
-        this.canvasReset()
-      }
     },
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -203,21 +194,14 @@ export default {
       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
       this.initChart(this.actualOptions);
-      if (val === false && this.isOpen === true) {
-        console.log(val)
-        this.width = 97 + '%'
-        this.canvasReset()
-      } else if (val === false && this.isOpen === false) {
-        this.watch = 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.initChart(this.actualOptions);
+      this.canvasReset()
     },
     series(val) {
       if (!val) {

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,14 +42,61 @@ 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"))
@@ -82,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;
@@ -99,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;
@@ -112,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 dataList"
-        :key="i.id"
-        :label="i.name"
-        :active="i.id === period"
-        @click="() => $emit('update:period', i.id)"
-      />
       <div class="btn-group">
         <button type="button" class="export-btn" />
-        <button
+        <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 },
@@ -47,6 +38,9 @@ export default {
     period: {
       type: Number,
     },
+    than: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -90,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;
@@ -125,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/LineChartBase.vue

@@ -367,7 +367,7 @@ export default {
         this.canvasReset()
         console.log(this.width)
       } else {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
 
       }
@@ -378,7 +378,7 @@ export default {
         this.width = 97 + '%'
         this.canvasReset()
       } else if (val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
 
       }

src/views/copilot/components/LineChartWater.vue

@@ -365,7 +365,7 @@ export default {
 
         console.log(this.width)
       } else {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
       }
     },
@@ -376,7 +376,7 @@ export default {
         this.width = 97 + '%'
         this.canvasReset()
       } else if(val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
       }
       // this.actualOptions.series.map((item) => {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-13 14:08:51
- * @LastEditTime: 2024-05-17 09:37:01
+ * @LastEditTime: 2024-05-23 15:18:53
  * @LastEditors: zhp
  * @Description:
 -->
@@ -191,7 +191,7 @@ export default {
         console.log(this.width)
       } else {
         console.log('ryf')
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
       }
     },
@@ -201,7 +201,7 @@ export default {
         this.width = 97 + '%'
         this.canvasReset()
       } else if (val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
         this.canvasReset()
       }
       // this.actualOptions.series.map((item) => {

src/views/copilot/container.vue

@@ -1,4 +1,3 @@
-
 <!--
     filename: container.vue
     author: liubin
@@ -8,12 +7,13 @@
 
 <template>
   <!-- <div class="copilot-layout" ref="copilot-layout"> -->
-  <div class="copilot-layout" ref="copilot-layout" :class="[page == '效率' ? 'other' : 'produce' ]">
+  <div class="copilot-layout produce" ref="copilot-layout">
-    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
+    <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>
@@ -21,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 === '产量') {
@@ -65,7 +96,6 @@ export default {
 };
 </script>
 <style>
-
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
@@ -84,9 +114,11 @@ export default {
 .produce {
   height: calc(100% + 38px);
 }
+
 .other {
   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,78 +43,236 @@ 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>
 

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-20 10:04:03
+ * @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 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,6 +28,10 @@ export default {
       type: String,
       default: "日",
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   computed: {
     cities() {
@@ -99,7 +104,7 @@ export default {
 .std-rate {
   display: flex;
   // gap: 1px;
-  flex: 1 1 auto;
+  // flex: 1 1 auto;
 
   // display: -webkit-box;
   flex-wrap: wrap;
@@ -107,6 +112,9 @@ export default {
   // 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%;

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,17 +1,17 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-14 08:32:44
+ * @LastEditTime: 2024-05-29 14:09:08
  * @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"
+      <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="chart" :style="{ height: '100%',width: width}"></div>
+    <div ref="oeeChart" style="height:96%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -171,6 +171,41 @@ 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,
+          },
         ],
       },
     };
@@ -182,13 +217,7 @@ export default {
   },
   watch: {
     isOpen(val) {
-      if (val === true) {
-        this.width = '100%-128px'
       this.canvasReset()
-      } else {
-        this.watch = 100 + '%'
-        this.canvasReset()
-      }
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
@@ -198,24 +227,47 @@ 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.initChart(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.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.initChart(actualOptions);
     },
   },
   mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
     // if (screenfull.isEnabled) {
     //   screenfull.on("change", () => {
     //     this.isFullscreen = screenfull.isFullscreen;
@@ -243,7 +295,7 @@ export default {
       if (this.chart) {
         this.chart.dispose();
       }
-      this.chart = echarts.init(this.$refs.chart);
+      this.chart = echarts.init(this.$refs.oeeChart);
       this.chart.setOption(this.actualOptions);
     },
   },
@@ -263,7 +315,7 @@ export default {
   .legend-item {
     position: relative;
     // font-size: 12px;
-    margin-right: 0.67vw;
+    margin-right: 1.3vw;
 
     &::before {
       content: "";
@@ -275,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 {
@@ -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: 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) + "%"
-        },
         ];
+      } 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() {
@@ -163,7 +218,9 @@ export default {
       // width: 290px;
       align-self: stretch;
       // flex: 1 1 auto;
-      // padding: 0 10%;
+    // align-items: center;
+      // margin:0 auto;
+      // padding: 0 10%;;
       /* margin: 10%; */
       /* min-width: 300px; */
       height: 200px;

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

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="progress-bar" :data-title="titleYear" :data-rate="number">
+  <div class="progress-bar" :data-title="title" :data-rate="value + '%'">
     <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
   </div>
 </template>
@@ -20,52 +20,25 @@ export default {
       type: Number,
       default: 0,
     },
-    target: {
+    // total: {
-      type: Number,
+    //   type: Number,
-      default: 0,
+    //   default: 0,
-    },
+    // },
-    goodNumber: {
-      type: Number,
-      default:0
-    },
-    componentYield: {
-      type: Number,
-      default:0
-    },
-    period: {
-      type: String,
-      default:'日',
-    },
     title: {
       type: String,
       default: "",
     },
-    city: {
-      type: String,
-      default:""
-    }
   },
   data() {
-    return {
+    return {};
-      number: 0,
-      titleYear:'',
-    };
   },
   computed: {
     dataRate() {
-      if ((this.period === '年' || this.period === '月') && this.target != 0) {
-        // console.log(this.componentYield)
-        this.titleYear = this.title + '  ' + `${(this.target * 100).toFixed(0)}%`
-      } else {
-        this.titleYear = this.title
-      }
-      this.number = this.value == 0
-        ? "-"
-        : `${(this.value * 100).toFixed(0)}%`
-      // console.log(this.period)
       return this.value == 0
         ? "-"
-        : this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
+        : this.value > 1
+          ?  100 + '%'
+          : `${(parseFloat(this.value)).toFixed(0)}%`;
     },
   },
   methods: {},
@@ -95,7 +68,7 @@ export default {
     color: #fff;
     position: absolute;
     bottom: -200%;
-    right: 10px;
+    right: 0;
     font-size: 12px;
   }
 
@@ -104,6 +77,7 @@ export default {
       color: #11eae3;
     }
   }
+
   &:nth-child(2) {
     &:after {
       color: #0e65fd;
@@ -116,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-20 09:46:19
+ * @LastEditTime: 2024-05-29 17:03:00
  * @LastEditors: zhp
  * @Description:
 -->
@@ -11,28 +11,30 @@
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
       <ProgressBar :period="period" :title="title" :value="city.current" />
-      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
     </div>
   </div>
   <div v-else-if="period == '周'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
       <ProgressBar :period="period" :title="title" :value="city.current" />
-      <!-- <ProgressBar 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 :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
+      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :period="period" :title="title" :value="city.previous" />
+      <ProgressBar :period="period" :title="titlePre" :value="city.previous" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
     </div>
   </div>
   <div v-else="period == '年'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
+      <ProgressBar :period="period" :title="titleTarget" :value="city.target" />
-      <ProgressBar :period="period" :title="title" :value="city.previous" />
+      <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>
 

src/views/copilot/efficiency/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-05-17 17:05:36
+ * @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/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/Order.vue

@@ -1,27 +1,38 @@
 <template>
-  <dv-scroll-board
+  <div class="order-container">
-    v-if="showTable"
+    <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>
-    ref="orderScrollBoard"
+    <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 {
       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",
       },
@@ -64,20 +75,32 @@ export default {
       if (this.prodOrder.length > 0) {
         for (let i = 0; i < this.prodOrder.length; i++) {
           let arr = [];
-          arr.push(i + 1);
+          // arr.push(i + 1);
           arr.push(
-            `<span title=${this.prodOrder[i].customerName || ""}>${
+            `<span title=${this.prodOrder[i].workOrderNumber || ""}>${
-              this.prodOrder[i].customerName || ""
+            this.prodOrder[i].workOrderNumber || ""
             }</span>`
           );
           arr.push(
-            `<span title=${this.prodOrder[i].productName || ""}>${
+            `<span title=${this.prodOrder[i].inStatus || ""}>${
-              this.prodOrder[i].productName || ""
+            this.prodOrder[i].inStatus || ""
             }</span>`
           );
           arr.push(
-            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
+            `<span title=${this.prodOrder[i].plannedInvestment || ""}>${
-              this.prodOrder[i].plannedProductionQuantity || ""
+            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;">${
@@ -112,3 +135,55 @@ export default {
   },
 };
 </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>
@@ -19,11 +17,7 @@
       </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">
@@ -49,20 +43,14 @@
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num"
+              <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
-              >{{ 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">
@@ -88,20 +76,14 @@
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num"
+              <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
-              >{{ 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">
@@ -127,20 +109,35 @@
             </div>
             <div>
               <span class="type1">良品率</span>
-            <span class="num"
+              <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
-              >{{ 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: {},
@@ -149,6 +146,18 @@ export default {
     };
   },
   props: {
+    period: {
+      type: Number,
+      default: 1,
+    },
+    companyId: {
+      type: Number,
+      default:0
+    },
+    than: {
+      type: String,
+      default: '同比',
+    },
     prodOutPut: {
       type: Array,
       default: [],
@@ -157,6 +166,14 @@ export default {
       type: Array,
       default: [],
     },
+    factoryData: {
+      type: Object,
+      default: {},
+    },
+    showBipv: {
+      type: Boolean,
+      default:true,
+    }
   },
   watch: {
     prodOutPut() {
@@ -168,6 +185,7 @@ export default {
   },
   methods: {
     makeData() {
+      console.log('msgObj', this.msgObj);
       this.msgObj.chip = {};
       this.msgObj.stand = {};
       this.msgObj.bipv = {};
@@ -189,6 +207,50 @@ export default {
 <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;
@@ -200,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;
@@ -222,6 +288,7 @@ export default {
             letter-spacing: 2px;
             width: 6.25vw;
           }
+
           .type1 {
             display: inline-block;
             font-size: 0.9375vw;
@@ -234,6 +301,7 @@ export default {
             text-align: justify;
             text-align-last: justify;
           }
+
           .type-name {
             font-size: 1.042vw;
             color: #fff;
@@ -241,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;
@@ -264,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 {
@@ -319,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/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,29 +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="updatePeriod"
-    />
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
+          <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 :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>
+        <!-- <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>
@@ -32,8 +28,9 @@
 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 {
@@ -42,8 +39,8 @@ export default {
     FactoryDataHeader,
     DbContainer: Container,
     ProdMonitor,
-    Store,
+    // Store,
-    Energy,
+    // Energy,
     Order,
   },
   data() {
@@ -51,10 +48,18 @@ export default {
       companyId: 0,
       companyName: "瑞昌中建材光电材料有限公司",
       period: 1,
+      show:false,
+      than: '同比',
+      data:{},
       // 接口获取的数据
       prodOutPut: [], //生产
       prodFto: [], //生产
       stock: {}, //仓库
+      factoryData: {
+        preDataDetail: [],
+        currentDataDetail: {},
+        targetDataDetail: [],
+      },
       energyCockpits: [], //能源
       prodOrder: [], //订单
       energyLegend: [
@@ -73,6 +78,11 @@ export default {
       this.companyName = obj.companyName;
       this.getMes();
     },
+    updateThan(val) {
+      console.log(val);
+      this.than = val;
+      // this.getMes();
+    },
     updatePeriod(val) {
       this.period = val;
       this.getMes();
@@ -81,13 +91,74 @@ export default {
       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.stock = res.data.stockDO || {};
+        this.prodOrder = res.data.prodWorkOrderDO || [];
-        this.energyCockpits = res.data.energyCockpitsDO || [];
+        let prodOutputFtoListRes = res.data.prodOutputFtoDO || [];
-        this.prodOrder = res.data.prodOrderMonitorDO || [];
+        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,77 +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);
+      // 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/ring/DoubleRingChart.vue

@@ -1,8 +1,9 @@
 <!--
-    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>
@@ -45,6 +46,10 @@ export default {
       type: String,
       default: null,
     },
+    than: {
+      type: String,
+      default: "同比",
+    },
   },
   data() {
     return {
@@ -89,27 +94,83 @@ 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: {
@@ -142,39 +203,68 @@ export default {
   },
 };
 
-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>
@@ -191,6 +281,7 @@ function calculateItems(period, valueTuple) {
   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/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;