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

Reviewed-on: #89
2024-07-10 10:01:27 +08:00 · 2024-07-10 10:01:27 +08:00 · 8d524a71a6
commit 8d524a71a6
parent 30e04d641f 4fa58b62fc
44 changed files with 1413 additions and 225 deletions
--- a/src/views/components/ChartContainer.vue
+++ b/src/views/components/ChartContainer.vue
@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-09 15:59:41
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
    filename: ChartContainer.vue
    author: liubin
    date: 2024-04-10 08:54:33
-    description: 
+    description:
    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
 -->

@ -43,7 +50,7 @@ export default {
 }

 ::-webkit-scrollbar {
-  width: 8px;
+  width: 80%;
  height: 8px;
 }

--- a/src/views/copilot/components/Container.vue
+++ b/src/views/copilot/components/Container.vue
@ -122,7 +122,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/components/ContainerIcon.vue
+++ b/src/views/copilot/components/ContainerIcon.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-05-07 16:54:54
+ * @LastEditTime: 2024-07-09 16:55:58
 * @LastEditors: zhp
 * @Description:
 -->
@ -61,8 +61,8 @@ export default {
 .container-icon {
  //   width: 32px;
  //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
  background: #ccc2;
 }
 </style>
--- a/src/views/copilot/components/bottomLeftContainer.vue
+++ b/src/views/copilot/components/bottomLeftContainer.vue
@ -0,0 +1,226 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-09 15:07:50
+ * @LastEditTime: 2024-07-09 15:41:38
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-05 09:43:51
+ * @LastEditTime: 2024-07-09 15:06: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 style="margin-left: 16px;" :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;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 90%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 8%;
+    bottom: 0;
+    background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      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>
--- a/src/views/copilot/components/bottomRightContainer.vue
+++ b/src/views/copilot/components/bottomRightContainer.vue
@ -0,0 +1,219 @@
+<!--
+    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 style="margin-left: 16px;" :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;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 95%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 3%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      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>
--- a/src/views/copilot/components/efficiencyLeftContainer.vue
+++ b/src/views/copilot/components/efficiencyLeftContainer.vue
@ -0,0 +1,219 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-09 15:15:00
+ * @LastEditTime: 2024-07-09 15:36:49
+ * @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 style="margin-left: 16px;" :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;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 5%,
+        #024798 10%,
+        transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    right: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 5%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 90%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 10%;
+    bottom: 0;
+    background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      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>
--- a/src/views/copilot/components/efficiencyRightContainer.vue
+++ b/src/views/copilot/components/efficiencyRightContainer.vue
@ -0,0 +1,219 @@
+<!--
+    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 style="margin-left: 16px;" :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;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 5%,
+    #024798 10%,
+    transparent 90%) 1;
+  backdrop-filter: blur(4px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 92%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 100%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 95%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    right: 3%;
+    bottom: 0;
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1vw;
+      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>
--- a/src/views/copilot/components/leftContainer.vue
+++ b/src/views/copilot/components/leftContainer.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-05 09:43:51
- * @LastEditTime: 2024-06-05 09:43:52
+ * @LastEditTime: 2024-07-09 15:35:19
 * @LastEditors: zhp
 * @Description:
 -->
@ -80,23 +80,25 @@ export default {
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+        #024798 20%,
+        transparent 90%) 1;
  backdrop-filter: blur(4px);

  &::before {
    content: "";
    position: absolute;
    display: inline-block;
-    height: 100%;
+    height: 92%;
    width: 0.11415vw;
    border-radius: 2px;
    top: 0%;
-    left: 0;
-    background: radial-gradient(
-      circle at center,
-      #024798 2%,
-      #024798 30%,
-      transparent
-    );
+    right: 0;
+    background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
    z-index: 1;
  }

@ -104,12 +106,12 @@ export default {
    content: "";
    position: absolute;
    display: inline-block;
-    width: 60%;
+    width: 90%;
    height: 0.31415vh;
    border-radius: 2px;
-    left: 8%;
+    left: 7%;
    bottom: 0;
-    background: linear-gradient(to right, #024798, transparent);
+    background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
    z-index: 0;
  }

@ -122,7 +124,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/components/rightContainer.vue
+++ b/src/views/copilot/components/rightContainer.vue
@ -73,6 +73,7 @@ export default {
 </script>

 <style scoped lang="scss">
+
 .copilot-container {
  height: 0;
  flex: 1;
@ -80,13 +81,17 @@ export default {
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 10%,
+    #024798 20%,
+    transparent 90%) 1;
  backdrop-filter: blur(4px);

  &::before {
    content: "";
    position: absolute;
    display: inline-block;
-    height: 100%;
+    height: 92%;
    width: 0.11415vw;
    border-radius: 2px;
    top: 0%;
@ -94,7 +99,7 @@ export default {
    background: radial-gradient(
      circle at center,
      #024798 2%,
-      #024798 30%,
+      #024798 100%,
      transparent
    );
    z-index: 1;
@ -104,12 +109,12 @@ export default {
    content: "";
    position: absolute;
    display: inline-block;
-    width: 60%;
+    width: 95%;
    height: 0.31415vh;
    border-radius: 2px;
-    left: 8%;
+    right: 1%;
    bottom: 0;
-    background: linear-gradient(to right, #024798, transparent);
+    background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
    z-index: 0;
  }

@ -122,7 +127,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/components/twoContainer.vue
+++ b/src/views/copilot/components/twoContainer.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-05 09:48:37
- * @LastEditTime: 2024-06-05 09:53:49
+ * @LastEditTime: 2024-07-09 15:35:04
 * @LastEditors: zhp
 * @Description:
 -->
@ -99,6 +99,7 @@ export default {
 </script>

 <style scoped lang="scss">
+
 .copilot-container {
  height: 0;
  flex: 1;
@ -106,23 +107,25 @@ export default {
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 10%,
+          #024798 20%,
+          transparent 90%) 1;
  backdrop-filter: blur(4px);

  &::before {
    content: "";
    position: absolute;
    display: inline-block;
-    height: 100%;
+    height: 92%;
    width: 0.11415vw;
    border-radius: 2px;
    top: 0%;
    left: 0;
-    background: radial-gradient(
-      circle at center,
-      #024798 2%,
-      #024798 30%,
-      transparent
-    );
+    background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
    z-index: 1;
  }

@ -133,7 +136,7 @@ export default {
    width: 60%;
    height: 0.31415vh;
    border-radius: 2px;
-    left: 8%;
+    left: 6%;
    bottom: 0;
    background: linear-gradient(to right, #024798, transparent);
    z-index: 0;
@ -148,7 +151,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/efficiency/components/ChipOee.vue
+++ b/src/views/copilot/efficiency/components/ChipOee.vue
@ -63,49 +63,47 @@ export default {
      const year = new Date().getFullYear();
      if (this.period === '日' && this.than === '同比') {
        items = [
+          { label: `${yesterday}日目标`, color: "#58adfa" },
          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
          { label: `${yesterday}日`, color: "#58adfa" },
-          { label: `${yesterday}日目标`, color: "#58adfa" },
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
+          { label: `${yesterday}日目标`, color: "#58adfa" },
          { label: `${dayBeYes}日`, color: "#12f7f1" },
          { label: `${yesterday}日`, color: "#58adfa" },
-          { label: `${yesterday}日目标`, color: "#58adfa" },
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
-          { label: `${year-1}年本周`, color: "#12f7f1" },
-          { label: `本周`, color: "#58adfa" },
          { label: `本周目标`, color: "#58adfa" },
-
+          { label: `${year - 1}年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
+          { label: `本周目标`, color: "#58adfa" },
          { label: `上周`, color: "#12f7f1" },
          { label: `本周`, color: "#58adfa" },
-          { label: `本周目标`, color: "#58adfa" },
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
-          { label: `${year-1}年${month}月`, color: "#12f7f1" },
-          { label: `${month}月`, color: "#58adfa" },
          { label: `${month}月目标`, color: "#58adfa" },
+          { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
          // { label: `${month}月目标`, value: valueTuple[2] },
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
+          { label: `${month}月目标`, color: "#58adfa" },
          { label: `${lastMonth}月`, color: "#12f7f1" },
          { label: `${month}月`, color: "#58adfa" },
-          { label: `${month}月目标`, color: "#58adfa" },
          // { label: `${month}月目标`, value: valueTuple[2] },
        ];
      } else {
        items = [
+          { label: `${year}年目标`, color: "#58adfa" },
          { label: `${year - 1}年`, color: "#12f7f1" },
          { label: `${year}年`, color: "#58adfa" },
-          { label:  `${year}年目标`, color: "#58adfa" },
-
          // { label: `${year}年目标`, value: valueTuple[2] },
        ];
      }
--- a/src/views/copilot/efficiency/components/TransformRate.vue
+++ b/src/views/copilot/efficiency/components/TransformRate.vue
@ -63,49 +63,47 @@ export default {
      const year = new Date().getFullYear();
      if (this.period === '日' && this.than === '同比') {
        items = [
+          { label: `${yesterday}日目标`, color: "#58adfa" },
          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
          { label: `${yesterday}日`, color: "#58adfa" },
-          { label: `${yesterday}日目标`, color: "#58adfa" },
-
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
+          { label: `${yesterday}日目标`, color: "#58adfa" },
          { label: `${dayBeYes}日`, color: "#12f7f1" },
          { label: `${yesterday}日`, color: "#58adfa" },
-          { label: `${yesterday}日目标`, color: "#58adfa" },
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
-          { label: `${year-1}年本周`, color: "#12f7f1" },
-          { label: `本周`, color: "#58adfa" },
          { label: `本周目标`, color: "#58adfa" },
+          { label: `${year - 1}年本周`, color: "#12f7f1" },
+          { label: `本周`, color: "#58adfa" },
        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
+          { label: `本周目标`, color: "#58adfa" },
          { label: `上周`, color: "#12f7f1" },
          { label: `本周`, color: "#58adfa" },
-          { label: `本周目标`, color: "#58adfa" },
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
-          { label: `${year-1}年${month}月`, color: "#12f7f1" },
-          { label: `${month}月`, color: "#58adfa" },
          { label: `${month}月目标`, color: "#58adfa" },
+          { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+          { label: `${month}月`, color: "#58adfa" },
          // { label: `${month}月目标`, value: valueTuple[2] },
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
+          { label: `${month}月目标`, color: "#58adfa" },
          { label: `${lastMonth}月`, color: "#12f7f1" },
          { label: `${month}月`, color: "#58adfa" },
-          { label: `${month}月目标`, color: "#58adfa" },
          // { label: `${month}月目标`, value: valueTuple[2] },
        ];
      } else {
        items = [
+          { label: `${year}年目标`, color: "#58adfa" },
          { label: `${year - 1}年`, color: "#12f7f1" },
          { label: `${year}年`, color: "#58adfa" },
-          { label: `${year}年目标`, color: "#58adfa" },
-
          // { label: `${year}年目标`, value: valueTuple[2] },
        ];
      }
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-07-08 14:10:08
+ * @LastEditTime: 2024-07-09 14:51:21
 * @LastEditors: zhp
 * @Description:
 -->
@ -356,10 +356,10 @@ export default {
      margin-right: 0.22vw;
    }
  }
-     .legend-item:nth-child(3) {
+     .legend-item:nth-child(1) {
       margin-left: 1vw;
     }
- .legend-item:nth-child(3):before {
+ .legend-item:nth-child(1):before {
   // width: 12px;
   // height: 2px;
   width: 1vw;
@ -368,11 +368,11 @@ export default {
   position: absolute;
   top: 50%;
   // left: -16px;
-   left: -0.951vw;
+   left: -1.3vw;
   transform: translateY(-50%);
 }

- .legend-item:nth-child(3):after {
+ .legend-item:nth-child(1):after {
   background-color: #f3c000;
   content: "";
   display: inline-block;
@ -383,15 +383,15 @@ export default {
   height: 0.3191vw;
   border-radius: 100%;
   top: 50%;
-   left: -0.851vw;
+   left: -1.13vw;
   // left: -16px;
   transform: translateY(-50%) translateX(50%);
 }
-  .legend-item:nth-child(1):before {
+  .legend-item:nth-child(2):before {
    background-color: #12f7f1;
  }

-  .legend-item:nth-child(2):before {
+  .legend-item:nth-child(3):before {
    background-color: #58adfa;
  }
 }
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-23 15:50:44
- * @LastEditTime: 2024-07-05 09:49:35
+ * @LastEditTime: 2024-07-09 14:57:49
 * @LastEditors: zhp
 * @Description:
 -->
@ -355,43 +355,43 @@ export default {
      margin-right: 0.22vw;
    }
  }
- .legend-item:nth-child(3) {
+ .legend-item:nth-child(1) {
   margin-left: 1vw;
 }
-  .legend-item:nth-child(1):before {
+  .legend-item:nth-child(2):before {
    background-color: #12f7f1;
  }

-  .legend-item:nth-child(2):before {
+  .legend-item:nth-child(3):before {
    background-color: #58adfa;
  }
-    .legend-item:nth-child(3):before {
-      // width: 12px;
-      // height: 2px;
-      width: 1vw;
-      height: 0.1064vw;
-      background-color: #f3c000;
-      position: absolute;
-      top: 50%;
-      // left: -16px;
-      left: -0.951vw;
-      transform: translateY(-50%);
-    }
+ .legend-item:nth-child(1):before {
+   // width: 12px;
+   // height: 2px;
+   width: 1vw;
+   height: 0.1064vw;
+   background-color: #f3c000;
+   position: absolute;
+   top: 50%;
+   // left: -16px;
+   left: -1.3vw;
+   transform: translateY(-50%);
+ }

-    .legend-item:nth-child(3):after {
-      background-color: #f3c000;
-      content: "";
-      display: inline-block;
-      position: absolute;
-      // width: 6px;
-      // height: 6px;
-      width: 0.3191vw;
-      height: 0.3191vw;
-      border-radius: 100%;
-      top: 50%;
-      left: -0.851vw;
-      // left: -16px;
-      transform: translateY(-50%) translateX(50%);
-    }
+ .legend-item:nth-child(1):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: -1.13vw;
+   // left: -16px;
+   transform: translateY(-50%) translateX(50%);
+ }
 }
 </style>
--- a/src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
+++ b/src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
@ -52,7 +52,7 @@ export default {
          ? 0
        : this.current != 0 && this.target != 0
          ? `${((this.current / this.target) * 100).toFixed(2)}%`
-          : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : 0 + '%'
+          : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? parseFloat(this.current).toFixed(2) + '%' : 0 + '%'
      // } else if(this.previous != 0) {
      //   return this.previous + '%'
      // }
--- a/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-06-27 09:13:38
+ * @LastEditTime: 2024-07-09 15:04:24
 * @LastEditors: zhp
 * @Description:
 -->
@ -150,7 +150,7 @@ export default {
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
-  padding: 12px;
+  padding: 16px;
 }

 .std-rate-item__value {
--- a/src/views/copilot/efficiency/components/sub/std/preProgressBar.vue
+++ b/src/views/copilot/efficiency/components/sub/std/preProgressBar.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-27 09:12:54
- * @LastEditTime: 2024-06-27 09:14:21
+ * @LastEditTime: 2024-07-09 15:02:46
 * @LastEditors: zhp
 * @Description:
 -->
@ -49,7 +49,7 @@ export default {
    dataRate() {
      // if (this.current != 0 && this.target != 0) {
        // console.log( '1111111111', this.current, this.target,this.previous);
-      return this.previous >=100 ? 100 + '%' : this.previous + '%';
+      return this.previous >= 100 ? 100 + '%' : parseFloat(this.previous).toFixed(2) + '%';
      // } else if(this.previous != 0) {
      //   return this.previous + '%'
      // }
--- a/src/views/copilot/efficiency/index.vue
+++ b/src/views/copilot/efficiency/index.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-07-01 12:27:45
+ * @LastEditTime: 2024-07-09 15:16:43
 * @LastEditors: zhp
 * @Description:
 -->
@ -30,8 +30,9 @@
 </template>

 <script>
-import Container from "@/views/copilot/components/rightContainer.vue";
-import leftContainer from "@/views/copilot/components/leftContainer.vue";
+import Container from "@/views/copilot/components/efficiencyRightContainer.vue";
+import leftContainer from "@/views/copilot/components/efficiencyLeftContainer.vue";
+
 import ChipOeeVue from "./components/ChipOee.vue";
 import ChipRateVue from "./components/ChipRate.vue";
 import StdRateVue from "./components/StdRate.vue";
--- a/src/views/copilot/factoryData/components/ContainerIcon.vue
+++ b/src/views/copilot/factoryData/components/ContainerIcon.vue
@ -1,8 +1,15 @@
-<!-- 
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-03 15:38:31
+ * @LastEditTime: 2024-07-09 16:49:22
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
    filename: ContainerIcon.vue
    author: liubin
    date: 2024-04-09 16:41:36
-    description: 
+    description:
 -->

 <template>
@ -49,8 +56,8 @@ export default {
 .container-icon {
  //   width: 32px;
  //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
  background: #ccc2;
 }
 </style>
--- a/src/views/copilot/factoryData/components/leftContainer.vue
+++ b/src/views/copilot/factoryData/components/leftContainer.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-05 09:36:07
- * @LastEditTime: 2024-06-05 09:38:23
+ * @LastEditTime: 2024-07-09 16:54:24
 * @LastEditors: zhp
 * @Description:
 -->
@ -80,6 +80,7 @@ export default {
 </script>

 <style scoped lang="scss">
+
 .copilot-container {
  height: 0;
  flex: 1;
@ -87,21 +88,23 @@ export default {
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
+  border-left: 0.11415vw solid;
+  border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
  backdrop-filter: blur(4px);

  &::before {
    content: "";
    position: absolute;
    display: inline-block;
-    height: 100%;
+    height: 96%;
    width: 0.11415vw;
    border-radius: 2px;
    top: 0%;
-    left: 0;
+    right: 0;
    background: radial-gradient(
      circle at center,
      #024798 2%,
-      #024798 30%,
+      #024798 100%,
      transparent
    );
    z-index: 1;
@ -111,17 +114,12 @@ export default {
    content: "";
    position: absolute;
    display: inline-block;
-    width: 60%;
+    width: 80%;
    height: 0.31415vh;
    border-radius: 2px;
-    left: 8%;
+    right: 4%;
    bottom: 0;
-     background: radial-gradient(
-      circle at center,
-      #024798 2%,
-      #024798 30%,
-      transparent
-    );
+    background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%);
    z-index: 0;
  }

@ -134,7 +132,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/factoryData/components/rightContainer.vue
+++ b/src/views/copilot/factoryData/components/rightContainer.vue
@ -33,7 +33,7 @@
    <!-- content  -->
    <div class="container-head" ref="container-head"
      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
-      <Icon  :icon="icon"></Icon>
+      <Icon style="margin-left: 16px;" :icon="icon"></Icon>
      <h2 class="container-title">{{ title }}</h2>
    </div>
    <div class="container-body" :class="[
@ -78,6 +78,7 @@ export default {
 </script>

 <style scoped lang="scss">
+
 .copilot-container {
  height: 100%;
  flex: 1;
@ -85,22 +86,22 @@ export default {
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;
+  border-right: 0.11415vw solid;
+  border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
  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
-    );
+    height: 96%;
+      width: 0.11415vw;
+      border-radius: 2px;
+      top: 0%;
+      left: 0;
+      background: radial-gradient(circle at center,
+          #024798 2%,
+          #024798 100%,
+          transparent);
    z-index: 1;
  }

@ -108,12 +109,12 @@ export default {
    content: "";
    position: absolute;
    display: inline-block;
-    width: 60%;
+    width: 80%;
    height: 0.31415vh;
    border-radius: 2px;
-    left: 8%;
+    left: 3%;
    bottom: 0;
-    background: linear-gradient(to right, #024798, transparent);
+    background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%);
    z-index: 0;
  }

@ -126,7 +127,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/copilot/yield/index.vue
+++ b/src/views/copilot/yield/index.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-10 11:10:54
- * @LastEditTime: 2024-06-05 09:49:46
+ * @LastEditTime: 2024-07-09 15:09:27
 * @LastEditors: zhp
 * @Description:
 -->
@ -20,12 +20,12 @@
      </left-container>
    </section>
    <section class="bottom flex">
-      <right-container class="fto-involve" title="FTO投入">
+      <bottom-right-container class="fto-involve" title="FTO投入">
        <fto-invest :period="period" :than="than" />
-      </right-container>
-      <left-container class="chip-involve" title="芯片投入" icon="chip">
+      </bottom-right-container>
+      <bottom-left-container class="chip-involve" title="芯片投入" icon="chip">
        <chip-invest :period="period" :than="than" />
-      </left-container>
+        </bottom-left-container>
    </section>
  </div>
 </template>
@ -34,7 +34,8 @@
 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 bottomRightContainer from "@/views/copilot/components/bottomRightContainer.vue";
+import bottomLeftContainer from "@/views/copilot/components/bottomLeftContainer.vue";
 import StdOutput from "./components/StdOutput.vue";
 import ChipOutput from "./components/ChipOutput.vue";
 import FtoInvest from "./components/FtoInvest.vue";
@ -45,6 +46,8 @@ export default {
  name: "YieldCopilot",
  components: {
    DbContainer: twoContainer,
+    bottomRightContainer,
+    bottomLeftContainer,
    leftContainer,
    rightContainer,
    StdOutput,
--- a/src/views/dashboard/components/Container.vue
+++ b/src/views/dashboard/components/Container.vue
@ -112,7 +112,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/dashboard/components/ContainerIcon.vue
+++ b/src/views/dashboard/components/ContainerIcon.vue
@ -1,8 +1,8 @@
-<!-- 
+<!--
    filename: ContainerIcon.vue
    author: liubin
    date: 2024-04-09 16:41:36
-    description: 
+    description:
 -->

 <template>
@ -51,8 +51,8 @@ export default {
 .container-icon {
  //   width: 32px;
  //   height: 32px;
-  width: 1.701vw;
-  height: 1.701vw;
+  width: 1.4vw;
+  height: 1.4vw;
  background: #ccc2;
 }
 </style>
--- a/src/views/dashboard/components/Header.vue
+++ b/src/views/dashboard/components/Header.vue
@ -153,7 +153,7 @@ h1 {

 .side {
  position: absolute;
-  font-size: 1.18vw;
+  font-size: 1vw;
  // line-height: 24px;
  line-height: 1.277vw;
  letter-spacing: 2px;
--- a/src/views/dashboard/components/leftContainer.vue
+++ b/src/views/dashboard/components/leftContainer.vue
@ -113,7 +113,7 @@ export default {
    gap: 8px;

    .container-title {
-      font-size: 1.18vw;
+      font-size: 1vw;
      line-height: 1.39vw;
      font-weight: normal;
      letter-spacing: 2px;
--- a/src/views/produce/data/index.vue
+++ b/src/views/produce/data/index.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-08 14:38:25
+ * @LastEditTime: 2024-07-10 09:58:59
 * @LastEditors: zhp
 * @Description:
 -->
@ -402,8 +402,10 @@ export default {
      }

      // y轴数据
-      arr.forEach(fac => {
-        let i =  0
+      arr.forEach((fac,index) => {
+        console.log('fac',fac);
+        let i = 0
+        let position = fac.id == 1 ? [1, -16,] : [-8, -16,]
        while ( i < 3) {
          // 下标
          const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
@ -422,6 +424,8 @@ export default {
                label: {
                  show: i === 2 ? true : false,
                  position: 'top',
+                  // fontSize:10,
+                  position: position,
                  formatter(params) {
                    return fac.name.substring(0, 2)
                  }
@ -448,6 +452,7 @@ export default {
                    label: {
                      show: true,
                      position: 'top',
+                      position: position,
                      formatter(params) {
                        if (params.value === 0) {
                          return ''
--- a/src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue
+++ b/src/views/produce/workOrder/dayReportComponents/ExportDayReport.vue
@ -57,7 +57,7 @@ export default {
    },
    beProcessObj: {
      type: Object,
-      default: () => { }
+      default: () => {}
    },
  },
  data() {
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/beProcessed.vue
@ -1,10 +1,3 @@
-<!--
- * @Author: zhp
- * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-09 09:34:38
- * @LastEditors: zhp
- * @Description:
-->
 <template>
  <div id="chipPowerExpChart" style="width:552px;height:200px;" />
 </template>
@ -18,7 +11,7 @@ export default {
  props: {
    beProcessObj: {
      type: Object,
-      default: () => {}
+      default: () => { }
    }
  },
  data() {
--- a/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue
+++ b/src/views/produce/workOrder/dayReportComponents/dayReportExportChart/productYield.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-07-08 14:51:47
- * @LastEditTime: 2024-07-09 09:58:43
+ * @LastEditTime: 2024-07-09 11:07:47
 * @LastEditors: zhp
 * @Description:
 -->
@ -66,7 +66,8 @@ export default {
        },
        legend: {
          bottom: 0,
-          left: 'center'
+          left: 'center',
+          itemGap:40,
        },
        series: [
          {
--- a/src/views/produce/workOrder/index.vue
+++ b/src/views/produce/workOrder/index.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-09 10:17:41
+ * @LastEditTime: 2024-07-09 11:08:43
 * @LastEditors: zhp
 * @Description:
 -->
@ -338,7 +338,7 @@ export default {
        }
      })
    },
-    async otherMethods(val) {
+    otherMethods(val) {
      console.log(val)
      if (val.type === 'detail') {
        this.detailOrUpdateVisible = true;
@ -347,33 +347,37 @@ export default {
          this.$refs.detailOrUpdate.init(val.data.id);
        });
      } else {
-        const res = await getWorkOrderDetail(val.data.id)
-        if (res.code === 0) {
-          // this.loading = false
-          ;const data = res.data.prodWorkOrderDO
-          const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
-          const seriesList = []
-          const dateList = []
-          res.data.his.forEach(element => {
-            seriesList.push(element.actualProduction)
-            dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
+        getWorkOrderDetail(val.data.id).then((res) => {
+          if (res.code === 0) {
+            // this.loading = false
+
+            const xAxisList = Object.keys(res.data.inProcessDis)
+            const yAxisList = Object.values(res.data.inProcessDis)
+            this.beProcessObj.xAxisList = xAxisList
+            this.beProcessObj.yAxisList = yAxisList
+            // console.log(this.beProcessObj)
+              ; const data = res.data.prodWorkOrderDO
+            const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
+            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.hisObj.seriesList = seriesList
+            this.hisObj.dateList = dateList
+            this.produceData = barList
+            this.pieList = [
+              { value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
+              { value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
+              { value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
+            ]
+          }
+          this.$nextTick(() => {
+            this.exportPDF()
          })
-          this.hisObj.seriesList = seriesList
-          this.hisObj.dateList = dateList
-          const xAxisList = Object.keys(res.data.inProcessDis)
-          const yAxisList = Object.values(res.data.inProcessDis)
-          this.beProcessObj.xAxisList = xAxisList
-          this.beProcessObj.yAxisList = yAxisList
-          this.produceData = barList
-           this.pieList = [
-            { value: data.actualProduction ? data.actualProduction : 0, name: '实际产出' },
-            { value: data.wasteNum ? data.wasteNum : 0, name: '废品数量' },
-            { value: data.reworkNum ? data.reworkNum : 0, name: '待再加工数量' }
-          ]
-        }
-        this.$nextTick(() => {
-          this.exportPDF()
        })
+
      }
    },
    async getDataList() {
--- a/src/views/report/chipOEEBM/index.vue
+++ b/src/views/report/chipOEEBM/index.vue
@ -187,19 +187,19 @@ export default {
            {
              prop: "yoy",
              label: msg.yoyColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
            {
              prop: "queryValue",
              label: msg.queryColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
            {
              prop: "target",
              label: msg.targetColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
          ];
--- a/src/views/report/completionStatusIntrBM/index.vue
+++ b/src/views/report/completionStatusIntrBM/index.vue
@ -222,6 +222,7 @@ export default {
      });
    },
    setChartMsg(val) {
+      console.log(val);
      let xData1 = [];
      let xData2 = [];
      let barData1 = [];
@ -231,12 +232,12 @@ export default {
      for (let i = 0; i < val.length; i++) {
        if (val[i].unit !== "㎡") {
          xData1.push(val[i].item);
-          barData1.push(parseFloat(val[i].target.toFixed(2)) || 0);
-          barData2.push(parseFloat(val[i].queryValue.toFixed(2)) || 0);
+          barData1.push(val[i].target ? parseFloat(val[i].target.toFixed(2)) : 0);
+          barData2.push(val[i].queryValue ?  parseFloat(val[i].queryValue.toFixed(2)) : 0);
        } else {
          xData2.push(val[i].item);
-          barData3.push(parseFloat(val[i].target.toFixed(2)) || 0);
-          barData4.push(parseFloat(val[i].queryValue.toFixed(2)) || 0);
+          barData3.push(val[i].target ? parseFloat(val[i].target.toFixed(2)) : 0);
+          barData4.push(val[i].queryValue ? parseFloat(val[i].queryValue.toFixed(2)) : 0);
        }
      }
      this.chartMsg1.xData = xData1;
--- a/src/views/report/components/produceLineBar.vue
+++ b/src/views/report/components/produceLineBar.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-19 15:28:34
- * @LastEditTime: 2024-07-08 14:19:57
+ * @LastEditTime: 2024-07-09 16:14:37
 * @LastEditors: zhp
 * @Description:
 -->
@ -238,7 +238,7 @@ export default {
  text-align: right;
  position: relative;
  // right: 30;
-  top: -10px;
+  top: 0px;
  .itemData {
    display: inline-block;
    margin-right: 10px;
--- a/src/views/report/components/produceLineBarTarget.vue
+++ b/src/views/report/components/produceLineBarTarget.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-20 16:13:36
- * @LastEditTime: 2024-07-05 13:47:02
+ * @LastEditTime: 2024-07-09 16:15:10
 * @LastEditors: zhp
 * @Description:
 -->
@ -237,7 +237,7 @@ export default {
  position: relative;
  // right: 30;
  // top: 10px;
-  top: -10px;
+  top: 0px;
  .itemData {
    display: inline-block;
    margin-right: 10px;
--- a/src/views/report/components/produceLineBarYearTarget.vue
+++ b/src/views/report/components/produceLineBarYearTarget.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-20 16:13:52
- * @LastEditTime: 2024-07-05 13:48:12
+ * @LastEditTime: 2024-07-09 16:14:43
 * @LastEditors: zhp
 * @Description:
 -->
@ -215,7 +215,7 @@ export default {
  text-align: right;
  position: relative;
  // right: 30;
-  top: -10px;
+  top: 0px;
  // top: -10px;
  .itemData {
    display: inline-block;
--- a/src/views/report/components/produceLineYieldBar.vue
+++ b/src/views/report/components/produceLineYieldBar.vue
@ -0,0 +1,277 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-07-09 16:06:13
+ * @LastEditTime: 2024-07-09 16:14:54
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
+ * @Author: zhp
+ * @Date: 2024-06-19 15:28:34
+ * @LastEditTime: 2024-07-08 14:19:57
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- 暂无数据 -->
+    <div class="no-data-bg" style="position: relative; left: 50%; transform: translateX(-50%)"
+      v-show="this.chartMsg.series[0].data.length === 0"></div>
+    <!-- 图例 -->
+    <div v-show="this.chartMsg.series[0].data.length > 0 ">
+      <div class="legendData" v-if="show">
+        <span class="itemData" 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="chartId" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
+    </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: 30,
+          right: 50,
+          bottom: 30,
+          top: 30,
+          containLabel:true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          formatter: function (params) {
+            console.log('params', params)
+            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res +=
+                "<br/>" +
+              `${params[i].seriesType === "line"
+                ? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
+                : `<span style="display:inline-block;margin-right:4px;border-radius:2px;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].seriesName === "综合良率"
+                  ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
+                : params[i].seriesName === "转化效率"
+                    ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
+                  : params[i].seriesName.search('总功率') != -1
+                    ? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "MW"
+                    : params[i].seriesName.search('BIPV') != -1
+                      ? (params[i].value ? parseFloat(params[i].value.toFixed(2)) : 0) + "㎡" : (params[i].value ? params[i].value : 0) + "片"
+                }</span>`;
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisTick: {
+            show: false,
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        dataZoom: [//滚动条
+          {
+            // 设置滚动条的隐藏与显示
+            show: true,
+            // 设置滚动条类型
+            type: "slider",
+            // 设置背景颜色
+            backgroundColor: "#F7F7F7",
+            // handleStyle: {
+            //   color: '#D6D6D6'
+            // },
+            handleStyle: {
+              borderColor: '#EBEBEB',
+              color: '#EBEBEB'
+            },
+            moveHandleStyle: {
+              borderColor: '#EBEBEB',
+              color: '#EBEBEB'
+            },
+            emphasis: {
+              handleStyle: {
+                borderColor: '#D6D6D6',
+                color: '#D6D6D6'
+              },
+              moveHandleStyle: {
+                borderColor: '#D6D6D6',
+                color: '#D6D6D6'
+              }
+            },
+            // 设置选中范围的填充颜色
+            fillerColor: "#F7F7F7",
+            // 设置边框颜色
+            borderColor: "#F7F7F7",
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 数据窗口范围的起始数值
+            startValue: 0,
+            // 数据窗口范围的结束数值（一页显示多少条数据）
+            endValue: 5,
+            // empty：当前数据窗口外的数据，被设置为空。
+            // 即不会影响其他轴的数据范围
+            filterMode: "empty",
+            // 设置滚动条宽度，相对于盒子宽度
+            width: "100%",
+            // 设置滚动条高度
+            height: 3,
+            // 设置滚动条显示位置
+            left: "center",
+            // 是否锁定选择区域（或叫做数据窗口）的大小
+            zoomLoxk: true,
+            // 控制手柄的尺寸
+            handleSize: 0,
+            // dataZoom-slider组件离容器下侧的距离
+            bottom: 14,
+          },
+          {
+            // 没有下面这块的话，只能拖动滚动条，
+            // 鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            // 滚轮是否触发缩放
+            zoomOnMouseWheel: false,
+            // 鼠标滚轮触发滚动
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+          },
+        ],
+        yAxis:undefined,
+        series: [],
+      },
+    };
+  },
+  props: {
+    chartHeight: {
+      type: Number,
+      default: 300,
+    },
+    type: {
+      type: Number,
+      default: 2,
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    legendList: {
+      type: Array,
+      default: () => [],
+    },
+    chartMsg: {
+      type: Object,
+      default: () => {},
+    },
+    chartId: {
+      type: String,
+      default: "bmChart",
+    },
+    chartNum: {
+      type: Number,
+      default: 1,
+    },
+  },
+  watch: {
+    chartHeight: {
+      handler(newVal) {
+        this.chartHeight = newVal;
+      },
+    },
+    type() {
+      this.canvasReset();
+    },
+    chartNum(val) {
+      this.canvasReset();
+    },
+    chartMsg: {
+      handler(newVal) {
+        this.canvasReset();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.canvasReset();
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.getMes();
+      }, 500)();
+    },
+    getMes() {
+      console.log('222222', this.chartMsg.series);
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      var chartDom = document.getElementById(this.chartId);
+      this.myChart = echarts.init(chartDom);
+      this.option.color = this.chartMsg.color;
+      this.option.xAxis.data = this.chartMsg.xData;
+      // this.option.yAxis.name = this.chartMsg.yName;
+
+      // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
+      this.option.series = this.chartMsg.series;
+      this.option.yAxis = this.chartMsg.yAxis;
+
+      this.myChart.setOption(this.option);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.legendData {
+  text-align: right;
+  position: relative;
+  // right: 30;
+  top: 0px;
+  .itemData {
+    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>
--- a/src/views/report/components/produceLineYieldBarTarget.vue
+++ b/src/views/report/components/produceLineYieldBarTarget.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-06-21 09:05:14
- * @LastEditTime: 2024-07-05 13:49:59
+ * @LastEditTime: 2024-07-09 16:15:04
 * @LastEditors: zhp
 * @Description:
 -->
@ -227,7 +227,7 @@ export default {
 .legendData {
  text-align: right;
  position: relative;
-  top: -10px;
+  top: 0px;
  // right: 30;
  // top: 10px;
  .itemData {
--- a/src/views/report/comprehensiveData.vue
+++ b/src/views/report/comprehensiveData.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-08 13:39:32
+ * @LastEditTime: 2024-07-09 16:16:14
 * @LastEditors: zhp
 * @Description:
 -->
@ -344,7 +344,7 @@ export default {
    },
    async getDataList() {
      console.log(this.listQuery.type);
-      if (this.listQuery.type == null) {
+      if (this.listQuery.type == null || this.listQuery.type == '') {
        return this.$message('请选择时间维度')
      }
      if (!this.listQuery.startDate && !this.listQuery.endDate) {
--- a/src/views/report/packageOEEBM/index.vue
+++ b/src/views/report/packageOEEBM/index.vue
@ -187,19 +187,19 @@ export default {
            {
              prop: "yoy",
              label: msg.yoyColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
            {
              prop: "queryValue",
              label: msg.queryColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
            {
              prop: "target",
              label: msg.targetColumn,
-              filter: (val) => (val || val === 0 ? val : "-"),
+              filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
              minWidth: 150,
            },
          ];
--- a/src/views/report/produceConversion.vue
+++ b/src/views/report/produceConversion.vue
@ -96,7 +96,7 @@
 <script>
 import { getProduceTransData, exportProduceTransData } from '@/api/report';
 import bmSearchBar from "./components/bmSearchBar";
-import BmLineBar from "./components/produceLineBar.vue";
+import BmLineBar from "./components/produceLineYieldBar.vue";
 import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";

 import ButtonNav from '@/components/ButtonNav'
@ -546,7 +546,7 @@ export default {
      this.chartMsgYearTarget.series[0].data = []
      this.chartMsgYearTarget.series[1].data = []
      this.title = ''
-      if (this.listQuery.date == null) {
+      if (this.listQuery.date == null || this.listQuery.date == '') {
        return this.$message('请选择时间维度')
      }
      if (!this.listQuery.beginTime && !this.listQuery.endTime) {
@ -583,7 +583,7 @@ export default {
          this.chartMsg.xData.push(ele.reportTimep)
          this.otherProps.push({
            label: ele.reportTimep,
-            filter: (val) => (val || val === 0 ? val : "-"),
+            filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
            prop: 'value' + i
          })
        })
@ -779,7 +779,7 @@ export default {
  height: calc((100vh - 170px));
  background-color: #fff;
  border-radius: 8px;
-  padding: 16px;
+  padding: 4px 16px 16px 16px;
 }

 .blueTip::before {
--- a/src/views/report/productionSituationMW.vue
+++ b/src/views/report/productionSituationMW.vue
@ -517,7 +517,7 @@ export default {
      this.chartMsgYearTarget.series[0].data = []
      this.chartMsgYearTarget.series[1].data = []
      console.log(this.listQuery);
-      if (this.listQuery.type == null) {
+      if (this.listQuery.type == null || this.listQuery.type == '') {
        return this.$message('请选择时间维度')
      }
      if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -959,6 +959,7 @@ export default {
 </script>

 <style lang="scss" scoped>
+
 .search {
  // height: calc((100px));
  background-color: #fff;
@ -971,7 +972,7 @@ export default {
  height: calc((100vh - 170px));
  background-color: #fff;
  border-radius: 8px;
-  padding: 16px;
+  padding: 4px 16px 16px 16px;
 }

 .blueTip::before {
--- a/src/views/report/productionSituationTablets.vue
+++ b/src/views/report/productionSituationTablets.vue
@ -649,7 +649,7 @@ export default {
        this.chartMsgYearTarget.series[3].data = []
      }
      // console.log(this.listQuery);
-      if (this.listQuery.type == null) {
+      if (this.listQuery.type == null || this.listQuery.type == '') {
        return this.$message('请选择时间维度')
      }
      if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -664,7 +664,7 @@ export default {
        // this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
        this.otherProps.push({
          label: ele.titleValue,
-          filter: (val) => (val || val === 0 ? val : "-"),
+          filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
          prop: 'value' + i
        })
      })
@ -1351,7 +1351,7 @@ export default {
  height: calc((100vh - 170px));
  background-color: #fff;
  border-radius: 8px;
-  padding: 16px;
+  padding: 4px 16px 16px 16px;
 }

 .blueTip::before {
--- a/src/views/report/productionYield.vue
+++ b/src/views/report/productionYield.vue
@ -96,7 +96,7 @@
 <script>
 import { getProductionYieldSituationMWData, exportProductionYieldSituationMWData } from '@/api/report';
 import bmSearchBar from "./components/bmSearchBar";
-import BmLineBar from "./components/produceLineBar.vue";
+import BmLineBar from "./components/produceLineYieldBar.vue";
 import produceLineBarYearTarget from "./components/produceLineYieldBarTarget.vue";
 import ButtonNav from '@/components/ButtonNav'
 import moment from 'moment'
@ -567,7 +567,7 @@ export default {
      this.chartMsgYearTarget.xData = []
      this.chartMsgYearTarget.series[0].data = []
      this.chartMsgYearTarget.series[1].data = []
-      if (this.listQuery.type == null) {
+      if (this.listQuery.type == null || this.listQuery.type == '') {
        return this.$message('请选择时间维度')
      }
      if (!this.listQuery.startDate && !this.listQuery.endDate) {
@ -603,7 +603,7 @@ export default {
          // this.chartMsg.xData.push(ele.titleValue)
          this.otherProps.push({
            label: ele.titleValue,
-            filter: (val) => (val || val === 0 ? val : "-"),
+            filter: (val) => (val || val === 0 ? parseFloat(val.toFixed(2)) : "-"),
            prop: 'value' + i
          })
        })
@ -855,7 +855,7 @@ export default {
  height: calc((100vh - 170px));
  background-color: #fff;
  border-radius: 8px;
-  padding: 16px;
+  padding: 4px 16px 16px 16px;
 }

 .blueTip::before {