产量对标FTo

Reviewed-on: #35

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-06-04 08:56:35
+ # @LastEditTime: 2024-06-05 16:07:26
  # @LastEditors: DY
  # @Description:
 ###

src/store/modules/home.js

@@ -96,7 +96,8 @@ const actions = {
       let preData = dataArr.previousProdOutputOutDO
       let preFtoData = dataArr.previousProdOutputFtoDO
     // const targetArr = await getHomeInfo();
-    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO,preData,preFtoData);
+    // factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData
+    const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,preData,preFtoData);
     commit("SET_HOME_INFO", payload);
   },
   /** 初始化驾驶舱数据 */
@@ -345,7 +346,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
   if (preData && preData[0] != null) {
     for (const factory of preData) {
       const fId = getPreFactoryId(factory);
-         chipInvest.previous[fId] = factory.previousYearInputNumber;
+        //  chipInvest.previous[fId] = factory.previousYearInputNumber;
       // chipOeeRate.current[fId] = factory.oee;
       chipOeeRate.previous[fId] = factory.previousYearOee;
       // 转化效率
@@ -399,7 +400,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
 }
 
 function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
-  console.log('prodOutputFtoListRes',preData);
+  console.log('prodOutputFtoListRes',preFtoData);
   // 初始数据
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
    if (prodOutputFtoListRes) {

src/views/copilot/components/BarChartBase.vue

@@ -83,6 +83,7 @@ export default {
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
+            align: "right",
           },
           axisTick: {
             show: false,

src/views/copilot/components/FactoryDataHeader.vue

@@ -7,9 +7,13 @@
       <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
         @click="() => $emit('update:than', i)" />
       <div class="btn-group">
+        <el-tooltip class="item" effect="dark" content="导出" placement="top">
           <button type="button" class="export-btn" @click="handleExport" />
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="isFullscreen  === false ? '退出全屏' : '全屏'" placement="top">
           <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
             @click="toggleFullScreen" />
+        </el-tooltip>
       </div>
     </section>
     <div class="page-title">{{ companyName }}</div>
@@ -46,7 +50,8 @@ export default {
   },
   data() {
     return {
-      isFullscreen: false,
+      // isFullscreen: false,
+      content:'全屏',
       dataList: [
         { id: 1, name: "日" },
         { id: 2, name: "周" },
@@ -61,6 +66,7 @@ export default {
       exportFactoryDataExcel({
         factoryId: this.companyId,
         timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
+        compare: this.than === '同比' ? 1 : 2
       }).then(response => {
         this.$download.excel(response, `${this.companyName}生产数据.xls`);
       // this.exportLoading = false;

src/views/copilot/components/ftoBarChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:49:14
- * @LastEditTime: 2024-05-31 16:06:50
+ * @LastEditTime: 2024-06-04 08:54:10
  * @LastEditors: zhp
  * @Description:
 -->
@@ -84,6 +84,7 @@ export default {
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
+            align: "right",
           },
           axisTick: {
             show: false,

src/views/copilot/components/leftContainer.vue

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

src/views/copilot/components/rightContainer.vue

@@ -41,8 +41,8 @@
     <!-- decoration  -->
     <div class="corner tl"></div>
     <div class="corner tr"></div>
-    <div v-if="side == 'left'" class="corner bl"></div>
+    <div  class="corner bl"></div>
-    <div v-if="side == 'right'" class="corner br"></div>
+    <div  class="corner br"></div>
     <!-- content  -->
     <div
       class="container-head"
@@ -207,10 +207,11 @@ export default {
     // border-bottom: 10px solid #0175dc;
     // border-top: 10px solid transparent;
     // border-right: 10px solid #0175dc;
+    // transform: rotate(-90deg);
     border-left: 0.532vw solid transparent;
-    border-bottom: 0.532vw solid #0175dc;
+    border-bottom: .6vw solid #0175dc;
     border-top: 0.532vw solid transparent;
-    border-right: 0.532vw solid #0175dc;
+    border-right: 0.532vw solid transparent;
   }
 
   .gradient-to-right {

src/views/copilot/components/twoContainer.vue

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

src/views/copilot/container.vue

@@ -25,7 +25,7 @@ import YieldCopilot from "./yield/index.vue";
 // import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
-  name: "CopilotContainer",
+  name: "copilotContainer",
   components: {
     CopilotHeaderVue,
     YieldCopilot,

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-06-03 16:40:45
+ * @LastEditTime: 2024-06-04 14:18:52
  * @LastEditors: zhp
  * @Description:
 -->
@@ -33,7 +33,15 @@ export default {
       default: "同比",
     },
   },
+  data() {
+    return {
+      // data: null
+    }
+  },
   computed: {
+    data() {
+      return this.$store.getters.copilot.efficiency.stdRate
+    },
     cities() {
       console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
       // let getterName = "";
@@ -57,22 +65,22 @@ export default {
         { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
         { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
       ]
-      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
+      if (this.data?.previous) {
-        this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
+        this.data?.previous.forEach(
           (v, idx) => {
             _cities[idx].previous = v ?? 0;
           }
         );
       }
-      if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
+      if (this.data?.target) {
-        this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
+        this.data?.target.forEach(
           (v, idx) => {
             _cities[idx].target = v ?? 0;
           }
         )
       }
-      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
+      if (this.data?.current) {
-        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+        this.data?.current.forEach(
           (v, idx) => {
             _cities[idx].current = v ?? 0;
           }
@@ -86,19 +94,24 @@ export default {
       return arr;
     },
   },
-  data() {
+  watch: {
-    return {
+    period() {
-      // cities: [
+      this.data = this.$store.getters.copilot.efficiency.stdRate
-      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
+    }
-      //   { name: "邯郸", target: 200, total: 300, current: 20 },
-      //   { name: "株洲", target: 300, total: 400, current: 20 },
-      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
-      //   { name: "成都", target: 500, total: 600, current: 20 },
-      //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
-      //   { name: "蚌埠", target: 500, total: 600, current: 20 },
-      // ],
-    };
   },
+  // data() {
+  //   return {
+  //     // cities: [
+  //     //   { name: "瑞昌", target: 100, total: 200, current: 20 },
+  //     //   { name: "邯郸", target: 200, total: 300, current: 20 },
+  //     //   { name: "株洲", target: 300, total: 400, current: 20 },
+  //     //   { name: "佳木斯", target: 400, total: 500, current: 20 },
+  //     //   { name: "成都", target: 500, total: 600, current: 20 },
+  //     //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
+  //     //   { name: "蚌埠", target: 500, total: 600, current: 20 },
+  //     // ],
+  //   };
+  // },
   methods: {},
 };
 </script>

src/views/copilot/efficiency/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-06-03 16:08:27
+ * @LastEditTime: 2024-06-05 09:45:47
  * @LastEditors: zhp
  * @Description:
 -->
@@ -12,17 +12,17 @@
       <Container title="芯片良率" icon="chip2">
         <ChipRate :period="period" :than="than" />
       </Container>
-      <Container title="标准组件良率" icon="std">
+      <left-container title="标准组件良率" icon="std">
         <StdRate :period="period" :than="than" />
-      </Container>
+      </left-container>
     </section>
     <section class="bottom flex">
       <Container title="芯片OEE" icon="chip">
         <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
       </Container>
-      <Container title="转化效率" icon="cube">
+      <left-container title="转化效率" icon="cube">
         <TransformRate :transformRate="transformRate" :period="period" :than="than" />
-      </Container>
+      </left-container>
     </section>
 
 
@@ -30,7 +30,8 @@
 </template>
 
 <script>
-import Container from "@/views/copilot/components/Container.vue";
+import Container from "@/views/copilot/components/rightContainer.vue";
+import leftContainer from "@/views/copilot/components/leftContainer.vue";
 import ChipOeeVue from "./components/ChipOee.vue";
 import ChipRateVue from "./components/ChipRate.vue";
 import StdRateVue from "./components/StdRate.vue";
@@ -40,6 +41,7 @@ export default {
   name: "efficiencyCopilot",
   components: {
     Container,
+    leftContainer,
     ChipOee: ChipOeeVue,
     ChipRate: ChipRateVue,
     StdRate: StdRateVue,

src/views/copilot/efficiencyContainer.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 16:04:18
- * @LastEditTime: 2024-06-03 15:45:58
+ * @LastEditTime: 2024-06-03 16:46:11
  * @LastEditors: zhp
  * @Description:
 -->
@@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue";
 import EfficiencyCopilot from "./efficiency/index.vue";
 
 export default {
-  name: "CopilotContainer",
+  name: "copilotEfficiencyContainer",
   components: {
     CopilotHeaderVue,
     EfficiencyCopilot,

src/views/copilot/factoryData/bbIndex.vue

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

src/views/copilot/factoryData/cdIndex.vue

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

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

@@ -232,6 +232,12 @@ export default {
       let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
       // let n = 0;
       let seriesArr = []
+      // let arr = []
+      // if (this.energyCockpits) {
+      //   this.energyCockpits.forEach(ele => {
+      //     arr.push()
+      //   });
+      // }
       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

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-30 08:58:39
- * @LastEditTime: 2024-05-31 15:52:28
+ * @LastEditTime: 2024-06-05 09:15:03
  * @LastEditors: zhp
  * @Description:
 -->
@@ -83,6 +83,7 @@ export default {
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
+            align: "right",
           },
           axisTick: {
             show: false,
@@ -173,32 +174,11 @@ export default {
           },
           {
             name: "", // "2024年目标值",
-            type: "bar",
+            type: "line",
             barWidth: 12,
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
-              color: {
+              color:'#f3c000'
-                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,
           },
@@ -337,7 +317,32 @@ export default {
     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/factoryData/components/ProdMonitor.vue

@@ -23,7 +23,7 @@
           <div class="separate">
             <div>
               <span class="type">玻璃类型</span>
-              <span class="type-name">标准组检产量</span>
+              <span class="type-name">标准组件产量</span>
             </div>
             <div>
               <span class="type">良品数量</span>

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

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

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

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

src/views/copilot/factoryData/hdIndex.vue

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

src/views/copilot/factoryData/index.vue

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

src/views/copilot/factoryData/jmsIndex.vue

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

src/views/copilot/factoryData/ksIndex.vue

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

src/views/copilot/factoryData/oldIndex.vue

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

src/views/copilot/factoryData/zzIndex.vue

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

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 13:32:59
- * @LastEditTime: 2024-06-03 16:26:24
+ * @LastEditTime: 2024-06-05 13:43:13
  * @LastEditors: zhp
  * @Description:
 -->
@@ -115,21 +115,25 @@ export default {
         items = [
           { label: `${month}月${today}日累计`,},
           { label: `去年${month}月${today}日累计` },
+          { label: `${month}月${today}日目标`, },
         ];
       } else if (this.period === '日' && this.than === '环比') {
         items = [
           { label: `${month}月${today}日累计`},
           { label: `${yesterday}日累计` },
+          { label: `${month}月${today}日目标`, },
         ];
       } else if (this.period === '周' && this.than === '同比') {
         items = [
           { label: `本周累计`,},
           { label: `去年本周累计` },
+          { label: `本周目标`, },
         ];
       } else if (this.period === '周' && this.than === '环比') {
         items = [
           { label: `本周累计`,},
           { label: `上周累计`, },
+          { label: `本周目标`, },
         ];
       } else if (this.period === '月' && this.than === '同比') {
         items = [
@@ -156,9 +160,9 @@ export default {
           : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
             ? "100%" : '0%',
         subtitle =
-      this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : 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)
+      console.log(this.valueTuple[2]- this.valueTuple[1])
       return getOptions({
         titleValue,
         subtitle,
@@ -214,6 +218,7 @@ export default {
 };
 
 function calculateItems(period, valueTuple, than) {
+  console.log('valueTuple', valueTuple);
   let items = [];
   var day1 = new Date();
   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
@@ -231,21 +236,25 @@ function calculateItems(period, valueTuple,than) {
     items = [
       { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
       { label: `${month}月${today}日累计`, value: valueTuple[1] },
+      { label: `${month}月${today}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '日' && than === '环比') {
     items = [
       { label: `${yesterday}日累计`, value: valueTuple[0] },
       { label: `${month}月${today}日累计`, value: valueTuple[1] },
+      { label: `${month}月${today}日目标`, value: valueTuple[2] },
     ];
   } else if (period === '周' && than === '同比') {
     items = [
       { label: `去年本周累计`, value: valueTuple[0] },
       { label: `本周累计`, value: valueTuple[1] },
+      { label: `本周目标`, value: valueTuple[2] },
     ];
   } else if (period === '周' && than === '环比') {
     items = [
       { label: `上周累计`, value: valueTuple[0] },
       { label: `本周累计`, value: valueTuple[1] },
+      { label: `本周目标`, value: valueTuple[2] },
     ];
   } else if (period === '月' && than === '同比') {
     items = [

src/views/copilot/yield/index.vue

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

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

@@ -61,6 +61,9 @@ export default ({
           value: currentSum,
           name: currentName,
           selected: false,
+           tooltip: {
+            formatter: `${currentName} : ${currentSum}`
+          },
           itemStyle: {
             borderJoin: "round",
             borderCap: "round",
@@ -80,10 +83,11 @@ export default ({
           },
         },
         {
-            value:currentSum == 0
+          value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
-              ? 1
+          name: currentName,
-              : 0,
+          tooltip: {
-          name: "未达成累计",
+            formatter: `${currentName} : ${currentSum}`
+          },
           itemStyle: { color: "transparent" },
           label: { show: false },
         },
@@ -106,6 +110,9 @@ export default ({
           value: previousSum,
           name: preName,
           selected: false,
+          tooltip: {
+            formatter: `${preName} : ${previousSum}`
+          },
           itemStyle: {
             borderJoin: "round",
             borderCap: "round",
@@ -125,10 +132,12 @@ export default ({
           },
         },
         {
-          value:previousSum == 0
+
-              ? 1
+          value:previousSum === 0 ? 1 : 0,
-              : 0,
+          name: preName,
-          name: "-",
+           tooltip: {
+            formatter: `${preName} : ${previousSum}`
+          },
           itemStyle: { color: "transparent" },
           label: { show: false },
         },

src/views/dashboard/charts/ChipYieldChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-05-31 16:11:56
+ * @LastEditTime: 2024-06-05 14:12:31
  * @LastEditors: zhp
  * @Description:
 -->
@@ -98,9 +98,12 @@ export default {
             },
             data: [
               {
-                value: 90,
+                value: 0,
                 name: `${year}累计产出`,
                 selected: false,
+                tooltip: {
+                  formatter: null,
+                },
                 itemStyle: {
                   borderJoin: "round",
                   borderCap: "round",
@@ -120,8 +123,11 @@ export default {
                 },
               },
               {
-                value: 20,
+                value: 0,
-                name: "-",
+                name: `${year}目标`,
+                tooltip: {
+                  formatter: null,
+                },
                 itemStyle: { color: "transparent" },
                 label: { show: false },
               },
@@ -141,9 +147,12 @@ export default {
             },
             data: [
               {
-                value: 90,
+                value: 0,
                 name: `${year - 1}累计产出`,
                 selected: false,
+                tooltip: {
+                  formatter: null,
+                },
                 itemStyle: {
                   borderJoin: "round",
                   borderCap: "round",
@@ -164,7 +173,10 @@ export default {
               },
               {
                 value: 0,
-                name: "-",
+                name: `${year - 1}累计产出`,
+                tooltip: {
+                  formatter:null,
+                },
                 itemStyle: { color: "transparent" },
                 label: { show: false },
               },
@@ -209,7 +221,9 @@ export default {
       };
     },
     actualOptions() {
+      const year = new Date().getFullYear()
       const options = JSON.parse(JSON.stringify(this.options));
+      // console.log('options', options);
       // 标题
       if (!this.output.target) options.title.text = "0%";
       else
@@ -221,20 +235,29 @@ export default {
         this.output.current == 0
       ) {
         options.series[1].data[0].value = 0;
-        options.series[1].data[1].value = 100;
+        options.series[1].data[1].value = 1;
+        options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
+        options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
       } else {
         options.series[1].data[0].value = this.output.current;
         options.series[1].data[1].value =
           this.output.target - this.output.current;
+        options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
+        options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
       }
       // 内环
       if (this.output.previous == 0) {
         options.series[2].data[0].value = 0;
-        options.series[2].data[1].value = 100;
+        options.series[2].data[1].value = 1;
+        options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
+        options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
       } else {
         options.series[2].data[0].value = this.output.previous;
         options.series[2].data[1].value = 0;
+        options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
+        options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
       }
+      console.log('options', options);
       return options;
     },
   },

src/views/dashboard/charts/LeftChartBase.vue

@@ -86,6 +86,7 @@ export default {
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
+            align:'right'
           },
           axisTick: {
             show: false,
@@ -113,10 +114,11 @@ export default {
             barWidth: 12,
             label: {
               show: true, //开启显示
+              align: 'right', //在上方显示
               position: 'top', //在上方显示
               textStyle: { //数值样式
                 color: '#DFF1FE',
-                fontSize: 16
+                fontSize: 12
               }
             },
             itemStyle: {
@@ -156,10 +158,11 @@ export default {
             barWidth: 12,
             label: {
               show: true, //开启显示
+              align: 'left', //在上方显示
               position: 'top', //在上方显示
               textStyle: { //数值样式
                 color: '#DFF1FE',
-                fontSize: 16
+                fontSize: 12
               }
             },
             itemStyle: {

src/views/dashboard/charts/RightChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-05-31 16:13:47
+ * @LastEditTime: 2024-06-04 15:35:54
  * @LastEditors: zhp
  * @Description:
 -->
@@ -92,6 +92,7 @@ export default {
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
+            align: 'right'
           },
           axisTick: {
             show: false,

src/views/index.vue

@@ -5,8 +5,8 @@
       <!-- <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="hdLine"></div> -->
-      <div v-if="visible" class="hdLineTwo"></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> -->
@@ -69,11 +69,11 @@ const LOCATIONS = [
   // 蚌埠2
   // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
   // 江西 瑞昌
-  { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' },
+  { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
   // 湖南 株洲
   // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
   // 邯郸
-  { x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' },
+  { x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
 ];
 // rcLine.style.left = `66.8%`;
 // rcLine.style.top = `52%`;
@@ -395,9 +395,9 @@ export default {
 
 .hdLine {
   position: absolute;
-  left: 58.7%;
+  /* left: 58.7%; */
   width: 1px;
-  top: 34%;
+  /* top: 34%; */
   display: inline-block;
   /* // x: 60, y: 58, */
   height: 6vw;
@@ -405,9 +405,9 @@ export default {
 }
 .hdLineTwo {
   position: absolute;
-  left: 53%;
+  /* left: 53%; */
   width: 5vw;
-  top: 34%;
+  /* top: 34%; */
   display: inline-block;
   /* // x: 60, y: 58, */
   height: 1px;

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-05-20 18:02:10
+ * @LastEditTime: 2024-06-05 15:28:07
  * @LastEditors: DY
  * @Description:
 -->
@@ -31,11 +31,11 @@
       </small-title>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">芯片产量</p>
+          <p class="title">芯片产量(片)</p>
           <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片良率</p>
+          <p class="title">芯片良率(%)</p>
           <p class="text">{{ dataForm.yieldRate }}</p>
         </el-col>
         <el-col :span="6">
@@ -43,17 +43,17 @@
           <p class="text">{{ dataForm.bom }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片总功率</p>
+          <p class="title">芯片总功率(MW)</p>
           <p class="text">{{ dataForm.totalPower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">FTO投入量</p>
+          <p class="title">FTO投入量(片)</p>
           <p class="text">{{ dataForm.chipInput }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">CSS稼动率</p>
+          <p class="title">CSS稼动率(%)</p>
           <p class="text">{{ dataForm.marriageRate }}</p>
         </el-col>
         <el-col :span="6">
@@ -61,17 +61,17 @@
           <p class="text">{{ dataForm.oee }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片平均功率</p>
+          <p class="title">芯片平均功率(W)</p>
           <p class="text">{{ dataForm.averagePower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">芯片人均产量</p>
+          <p class="title">芯片人均产量(片/人)</p>
           <p class="text">{{ dataForm.annualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片产能利用率</p>
+          <p class="title">芯片产能利用率(%)</p>
           <p class="text">{{ dataForm.capacityUtilizationRate }}</p>
         </el-col>
       </el-row>
@@ -85,25 +85,25 @@
           <!-- <p class="text">{{ dataForm.bom }}</p> -->
         </el-col>
         <el-col :span="6">
-          <p class="title">封装线OEE</p>
+          <p class="title">封装线OEE(%)</p>
           <!-- <p class="text">{{ dataForm.code }}</p> -->
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件良率</p>
+          <p class="title">标准组件良率(%)</p>
           <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件产量</p>
+          <p class="title">标准组件产量(片)</p>
           <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">标准组件总功率</p>
+          <p class="title">标准组件总功率(MW)</p>
           <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">封装产能利用率</p>
+          <p class="title">封装产能利用率(%)</p>
           <!-- <p class="text">{{ dataForm.code }}</p> -->
         </el-col>
         <el-col :span="6">

src/views/produce/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-31 19:14:05
+ * @LastEditTime: 2024-06-04 14:13:23
  * @LastEditors: DY
  * @Description:
 -->
@@ -197,7 +197,7 @@ export default {
       ],
       tableProps: [
         {
-          prop: 'tableTime',
+          prop: 'groupTime',
           label: '日期',
           minWidth: 100,
           showOverflowtooltip: true
@@ -229,7 +229,7 @@ export default {
         {
           prop: 'yieldRate',
           label: '良品率%',
-          filter: (val) => val + '%'
+          filter: (val) => (val * 100) + '%'
         },
       ],
       tableData: [],
@@ -334,17 +334,17 @@ export default {
       }
     },
     async getDataList() {
-      // const res = await getProduceDataPage(this.listQuery)
+      const res = await getProduceDataPage(this.listQuery)
-      // console.log(res)
+      console.log(res)
-      // if (res.code === 0) {
+      if (res.code === 0) {
-      //   this.tableData = res.data.records
+        this.tableData = res.data.records
-      //   this.listQuery.total = res.data.total
+        this.listQuery.total = res.data.total
         // if (this.listQuery.total > 0) {
         //   this.tableData.forEach(item => {
         //     item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
         //   })
         // }
-      // }
+      }
 
       // 图表
       await prodOutputDataList({

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-05-29 14:06:16
+ * @LastEditTime: 2024-06-04 16:45:52
  * @LastEditors: DY
  * @Description:
 -->
@@ -63,12 +63,12 @@
         </small-title>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="芯片产量" prop="chipYield">
+            <el-form-item label="芯片产量(片)" prop="chipYield">
               <el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片良率" prop="chipYieldRate">
+            <el-form-item label="芯片良率(%)" prop="chipYieldRate">
               <el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" />
             </el-form-item>
           </el-col>
@@ -78,47 +78,47 @@
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片总功率" prop="chipTotalPower">
+            <el-form-item label="芯片总功率(MW)" prop="chipTotalPower">
               <el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item v-if="ftype === 0" label="FTO投入量" prop="ftoInput">
+            <el-form-item v-if="ftype === 0" label="FTO投入量(片)" prop="ftoInput">
               <el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
             </el-form-item>
-            <el-form-item v-else label="钼电极投入量" prop="molybdenumElectrodeInput">
+            <el-form-item v-else label="钼电极投入量(片)" prop="molybdenumElectrodeInput">
               <el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item v-if="ftype === 0" label="CSS稼动率" prop="chipCssMarriageRate">
+            <el-form-item v-if="ftype === 0" label="CSS稼动率(%)" prop="chipCssMarriageRate">
               <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
             </el-form-item>
-            <el-form-item v-else label="PID6稼动率" prop="chipCssMarriageRate">
+            <el-form-item v-else label="PID6稼动率(%)" prop="chipCssMarriageRate">
               <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片段OEE" prop="chipOee">
+            <el-form-item label="芯片段OEE(%)" prop="chipOee">
               <el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片平均功率" prop="chipAveragePower">
+            <el-form-item label="芯片平均功率(W)" prop="chipAveragePower">
               <el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="芯片人均产量" prop="chipAnnualAverageProduction">
+            <el-form-item label="芯片人均产量(片/人)" prop="chipAnnualAverageProduction">
               <el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片产能利用率" prop="chipCapacityUtilizationRate">
+            <el-form-item label="芯片产能利用率(%)" prop="chipCapacityUtilizationRate">
               <el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" />
             </el-form-item>
           </el-col>
@@ -134,39 +134,39 @@
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="封装线OEE" prop="componentOee">
+            <el-form-item label="封装线OEE(%)" prop="componentOee">
               <el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件良率" prop="componentYieldRate">
+            <el-form-item label="标准组件良率(%)" prop="componentYieldRate">
               <el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件产量" prop="componentYield">
+            <el-form-item label="标准组件产量(片)" prop="componentYield">
               <el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="标准组件总功率" prop="componentTotalPower">
+            <el-form-item label="标准组件总功率(MW)" prop="componentTotalPower">
               <el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="封装产能利用率" prop="componentCapacityUtilizationRate">
+            <el-form-item label="封装产能利用率(%)" prop="componentCapacityUtilizationRate">
               <el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件人均产量" prop="componentAnnualAverageProduction">
+            <el-form-item label="标准组件人均产量(片/人)" prop="componentAnnualAverageProduction">
               <el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="标准组件平均功率" prop="componentAveragePower">
+            <el-form-item label="标准组件平均功率(W)" prop="componentAveragePower">
               <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
             </el-form-item>
           </el-col>
@@ -178,39 +178,39 @@
         </small-title>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="产品产量" prop="bipvProductOutput">
+            <el-form-item label="产品产量(㎡)" prop="bipvProductOutput">
               <el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="人均产量" prop="bipvAnnualAverageProduction">
+            <el-form-item label="人均产量(㎡/人)" prop="bipvAnnualAverageProduction">
               <el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片使用量" prop="bipvChipUsage">
+            <el-form-item label="芯片使用量(片)" prop="bipvChipUsage">
               <el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="芯片利用率" prop="bipvChipUtilizationRate">
+            <el-form-item label="芯片利用率(%)" prop="bipvChipUtilizationRate">
               <el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item label="内部材料成本" prop="bipvInsideMaterialCost">
+            <el-form-item label="内部材料成本(元/㎡)" prop="bipvInsideMaterialCost">
               <el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="OEM及委外材料成本" prop="bipvOeeMaterialCost">
+            <el-form-item label="OEM及委外材料成本(元/㎡)" prop="bipvOeeMaterialCost">
               <el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="综合材料成本" prop="bipvComprehensiveMaterialCost">
+            <el-form-item label="综合材料成本(元/㎡)" prop="bipvComprehensiveMaterialCost">
               <el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" />
             </el-form-item>
           </el-col>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-03 15:42:47
+ * @LastEditTime: 2024-06-04 16:54:46
  * @LastEditors: DY
  * @Description:
 -->
@@ -31,11 +31,11 @@
       </small-title>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">芯片产量</p>
+          <p class="title">芯片产量(片)</p>
           <p class="text">{{ dataForm.chipYield }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片良率</p>
+          <p class="title">芯片良率(%)</p>
           <p class="text">{{ dataForm.chipYieldRate }}</p>
         </el-col>
         <el-col :span="6">
@@ -43,35 +43,35 @@
           <p class="text">{{ dataForm.chipBom }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片总功率</p>
+          <p class="title">芯片总功率(MW)</p>
           <p class="text">{{ dataForm.chipTotalPower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">{{ ftype === 0 ? 'FTO投入量' : '钼电极投入量' }}</p>
+          <p class="title">{{ ['FTO投入量(片)', '钼电极投入量(片)'][ftype] }}</p>
-          <p class="text">{{ ftype === 0 ? dataForm.ftoInput : dataForm.molybdenumElectrodeInput }}</p>
+          <p class="text">{{ [dataForm.ftoInput, dataForm.molybdenumElectrodeInput][ftype] }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">{{ ftype === 0 ? 'CSS稼动率' : 'PID6稼动率' }}</p>
+          <p class="title">{{ ['CSS稼动率(%)', 'PID6稼动率(%)'][ftype] }}</p>
           <p class="text">{{ dataForm.chipCssMarriageRate }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片段OEE</p>
+          <p class="title">芯片段OEE(%)</p>
           <p class="text">{{ dataForm.chipOee }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片平均功率</p>
+          <p class="title">芯片平均功率(W)</p>
           <p class="text">{{ dataForm.chipAveragePower }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">芯片人均产量</p>
+          <p class="title">芯片人均产量(片/人)</p>
           <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片产能利用率</p>
+          <p class="title">芯片产能利用率(%)</p>
           <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
         </el-col>
       </el-row>
@@ -84,33 +84,33 @@
           <p class="text">{{ dataForm.componentBom }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">封装线OEE</p>
+          <p class="title">封装线OEE(%)</p>
           <p class="text">{{ dataForm.componentOee }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件良率</p>
+          <p class="title">标准组件良率(%)</p>
           <p class="text">{{ dataForm.componentYieldRate }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件产量</p>
+          <p class="title">标准组件产量(片)</p>
           <p class="text">{{ dataForm.componentYield }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">标准组件总功率</p>
+          <p class="title">标准组件总功率(MW)</p>
           <p class="text">{{ dataForm.componentTotalPower }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">封装产能利用率</p>
+          <p class="title">封装产能利用率(%)</p>
           <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件人均产量</p>
+          <p class="title">标准组件人均产量(片/人)</p>
           <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件平均功率</p>
+          <p class="title">标准组件平均功率(W)</p>
           <p class="text">{{ dataForm.componentAveragePower }}</p>
         </el-col>
       </el-row>
@@ -119,33 +119,33 @@
       </small-title>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">产品产量</p>
+          <p class="title">产品产量(㎡)</p>
           <p class="text">{{ dataForm.bipvProductOutput }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">人均产量</p>
+          <p class="title">人均产量(㎡/人)</p>
           <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片使用量</p>
+          <p class="title">芯片使用量(片)</p>
           <p class="text">{{ dataForm.bipvChipUsage }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片利用率</p>
+          <p class="title">芯片利用率(%)</p>
           <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">内部材料成本</p>
+          <p class="title">内部材料成本(元/㎡)</p>
           <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">OEM及委外材料成本</p>
+          <p class="title">OEM及委外材料成本(元/㎡)</p>
           <p class="text">{{ dataForm.bipvOeeMaterialCost }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">综合材料成本</p>
+          <p class="title">综合材料成本(元/㎡)</p>
           <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
         </el-col>
       </el-row>

src/views/produce/target/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-06-03 16:02:56
+ * @LastEditTime: 2024-06-05 16:19:04
  * @LastEditors: DY
  * @Description:
 -->
@@ -30,7 +30,7 @@
           </el-select>
         </el-form-item>
         <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
-          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
+          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
             start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
@@ -565,8 +565,9 @@ export default {
     },
     changeTime() {
       if (this.listQuery.reportTime) {
-        const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
+        const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
-        if (numDays > 24) {
+        const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
+        if (years * 12 + months > 24) {
           this.$message({
             message: '时间范围不能超过24个月',
             type: 'warning'

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-03 10:17:33
+ * @LastEditTime: 2024-06-05 15:39:35
  * @LastEditors: DY
  * @Description:
 -->
@@ -94,7 +94,7 @@
 // import basicAdd from './basic-add';
 import * as echarts from 'echarts'
 import resize from '@/mixins/resize'
-import { getWorkOrderDetail, getEqNum, getDailyTrend } from '@/api/produceData/order';
+import { getWorkOrderDetail } from '@/api/produceData/order';
 import SmallTitle from './SmallTitle';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
@@ -167,19 +167,33 @@ export default {
       })
       if (id) {
         getWorkOrderDetail(id).then(res => {
-          this.dataForm = res.data
+          if (res.code === 0) {
+            this.dataForm = res.data.prodWorkOrderDO
             this.buildChart(this.dataForm)
-          if (this.dataForm.orderStatus === 1) {
+            // 在制品
-            this.trend()
+            const xAxisList = Object.keys(res.data.inProcessDis)
-          }
+            const yAxisList = Object.values(res.data.inProcessDis)
-        })
-        getEqNum(id).then(response => {
-          if (response.code === 0) {
-            const xAxisList = Object.keys(response.data)
-            const yAxisList = Object.values(response.data)
             this.initEqLineChart(xAxisList, yAxisList)
-          }
+            // 趋势图
+            const seriesList = []
+            const dateList = []
+            res.data.his.forEach(element => {
+              seriesList.push(element.actualProduction)
+              dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
             })
+            this.initLineChart(dateList, seriesList)
+          }
+          // if (this.dataForm.orderStatus === 1) {
+          //   this.trend()
+          // }
+        })
+        // getEqNum(id).then(response => {
+        //   if (response.code === 0) {
+        //     const xAxisList = Object.keys(response.data)
+        //     const yAxisList = Object.values(response.data)
+        //     this.initEqLineChart(xAxisList, yAxisList)
+        //   }
+        // })
         
       }
     },

src/views/report/components/bmLineBar.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <!-- 图例 -->
+    <div class="legend">
+      <span class="item" v-for="item in legendList" :key="item.id">
+        <span
+          v-if="item.type === 1"
+          class="block"
+          :style="{ backgroundColor: item.color }"
+        ></span>
+        <span
+          v-if="item.type === 2"
+          class="line"
+          :style="{ backgroundColor: item.color }"
+        >
+          <span
+            class="line-block"
+            :style="{ backgroundColor: item.color }"
+          ></span>
+        </span>
+        {{ item.name }}</span
+      >
+    </div>
+    <div id="main" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { debounce } from "@/utils/debounce";
+export default {
+  name: "bmLineBar",
+  data() {
+    return {
+      myChart: "",
+      option: {
+        color: [],
+        // color: ["#8EF0AB", "#63BDFF", "#288AFF"],
+        grid: {
+          left: 100,
+          right: 10,
+          bottom: 30,
+          top: 30,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          formatter: function (params) {
+            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].value}</span>`;
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisTick: {
+            show: false,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [],
+      },
+    };
+  },
+  props: {
+    chartHeight: {
+      type: Number,
+      default: 300,
+    },
+    legendList: {
+      type: Array,
+      default: () => [],
+    },
+    chartMsg: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  watch: {
+    chartHeight: {
+      handler(newVal) {
+        this.chartHeight = newVal;
+      },
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
+    chartMsg: {
+      handler(newVal) {
+        this.getMes();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  mounted() {
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.myChart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.getMes();
+      }, 500)();
+    },
+    getMes() {
+      if (this.myChart) {
+        this.myChart.dispose();
+        this.myChart = "";
+      }
+      var chartDom = document.getElementById("main");
+      this.myChart = echarts.init(chartDom);
+      this.option.color = this.chartMsg.color;
+      this.option.xAxis.data = this.chartMsg.xData;
+      this.option.series = this.chartMsg.series;
+      this.myChart.setOption(this.option);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.legend {
+  text-align: right;
+  .item {
+    display: inline-block;
+    margin-right: 10px;
+    font-size: 14px;
+    color: #8c8c8c;
+    .block {
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      margin-right: 4px;
+    }
+    .line {
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      display: inline-block;
+      margin-right: 4px;
+      position: relative;
+      .line-block {
+        position: absolute;
+        width: 20px;
+        height: 2px;
+        left: -5px;
+        top: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/report/components/bmSearchBar.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip">
+    <el-form-item label="时间维度" prop="type">
+      <el-select
+        size="small"
+        v-model="form.type"
+        placeholder="请选择"
+        style="width: 100px"
+      >
+        <el-option
+          v-for="item in typeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item v-show="form.type === 1" label="时间" prop="dayTime">
+      <el-date-picker
+        size="small"
+        clearable
+        v-model="form.dayTime"
+        type="date"
+        placeholder="选择日期"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 2" label="时间" prop="weekTime">
+      <el-date-picker
+        v-model="form.weekTime"
+        type="week"
+        format="yyyy 第 WW 周"
+        placeholder="选择周"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 3" label="时间" prop="monthTime">
+      <el-date-picker
+        v-model="form.monthTime"
+        type="month"
+        placeholder="选择月份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item v-show="form.type === 4" label="时间" prop="yearTime">
+      <el-date-picker
+        v-model="form.yearTime"
+        type="year"
+        placeholder="选择年份"
+        style="width: 150px"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item label="工厂" prop="factory">
+      <el-select
+        size="small"
+        multiple
+        v-model="form.factory"
+        placeholder="请选择"
+        style="width: 250px"
+      >
+        <el-option
+          v-for="item in factoryList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="small" @click="getDataList"
+        >查询</el-button
+      >
+      <el-divider direction="vertical"></el-divider>
+      <el-button type="primary" size="small" plain @click="handleExport"
+        >导出</el-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  name: "bmSearchBar",
+  data() {
+    return {
+      form: {
+        type: 1,
+        dayTime: "",
+        weekTime: "",
+        monthTime: "",
+        yearTime: "",
+        factory: "",
+      },
+      typeList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
+      factoryList: [
+        { id: 1, name: "瑞昌" },
+        { id: 2, name: "邯郸" },
+      ],
+    };
+  },
+  methods: {
+    getDataList() {
+      console.log(this.form);
+      this.$emit("getSearch", this.form);
+    },
+    handleExport() {
+      this.$emit("handleExport");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-divider--vertical {
+  height: 24px;
+}
+.blueTip::before {
+  display: inline-block;
+  content: "";
+  width: 4px;
+  height: 18px;
+  background: #0b58ff;
+  border-radius: 1px;
+  margin-right: 8px;
+  margin-top: 8px;
+}
+</style>

src/views/report/ftoOutputBM/index.vue

@@ -0,0 +1,192 @@
+<!-- 产量对标FTO -->
+<template>
+  <div>
+    <div class="containerTop">
+      <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+      <bm-line-bar
+        :chartHeight="chartHeight"
+        :legendList="legendList"
+        :chartMsg="chartMsg"
+      />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">产量对标FTO</div>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-data="tableData"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bmSearchBar from "../components/bmSearchBar.vue";
+import BmLineBar from "../components/bmLineBar.vue";
+const tableProps = [
+  {
+    prop: "factory",
+    label: "工厂名称",
+    // filter: (val) => factoryList[val],
+    minWidth: 200,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "科目",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "unit",
+    label: "单位",
+    minWidth: 80,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time1",
+    label: "时间1",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "time2",
+    label: "时间2",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mubiao",
+    label: "目标值",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "FtoOutputBM",
+  data() {
+    return {
+      tableProps,
+      listQuery: {
+        current: 1,
+        size: 1000,
+      },
+      tableData: [
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+        { factory: "工厂1" },
+      ],
+      chartHeight: this.tableHeight(137) / 2 - 111,
+      tableH: this.tableHeight(137) / 2 - 70,
+      legendList: [
+        { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
+        { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
+        { id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
+      ],
+      chartMsg: {
+        color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
+        xData: ["成都", "邯郸", "瑞昌"],
+        series: [
+          {
+            name: "2024年4月目标值",
+            data: [70000, 80000, 90000],
+            type: "line",
+            symbol: "circle",
+            symbolSize: 6,
+          },
+          {
+            name: "2023年4月",
+            data: [12000, 20000, 150000],
+            type: "bar",
+            barWidth: 20,
+          },
+          {
+            name: "2024年4月",
+            data: [60000, 70000, 80000],
+            type: "bar",
+            barWidth: 20,
+          },
+        ],
+      },
+    };
+  },
+  components: {
+    bmSearchBar,
+    BmLineBar,
+  },
+  created() {
+    this.tableH = this.tableHeight(137) / 2 - 70;
+    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    window.addEventListener("resize", this._setTableHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this._setTableHeight);
+  },
+  methods: {
+    _setTableHeight() {
+      this.tableH = this.tableHeight(137) / 2 - 70;
+      this.chartHeight = this.tableHeight(137) / 2 - 111;
+    },
+    getSearch(val) {
+      console.log(val);
+      console.log("=========================");
+    },
+    handleExport() {
+      console.log("导出");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.containerTop,
+.containerBottom {
+  height: calc((100vh - 137px) / 2);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+.containerBottom {
+  margin-top: 8px;
+  .smallTitle {
+    font-size: 16px;
+    color: #000;
+    margin-bottom: 15px;
+  }
+  .smallTitle::before {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #0b58ff;
+    content: "";
+    margin-right: 8px;
+    vertical-align: -3px;
+  }
+}
+</style>