update yield copilot

src/views/dashboard/components/ChartContainer.vue → src/views/components/ChartContainer.vue

@@ -3,7 +3,7 @@
     author: liubin
     date: 2024-04-10 08:54:33
     description: 
-    todo: 实现滑动条 和动态宽高
+    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
 -->
 
 <template>

src/views/copilot/components/Container.vue

@@ -0,0 +1,213 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description: 
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button
+      style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      "
+      @click="$emit('refresh')"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        style="width: 24px; height: 24px"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+        />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div v-if="side == 'left'" class="corner bl"></div>
+    <div v-if="side == 'right'" class="corner br"></div>
+    <!-- content  -->
+    <div
+      class="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
+    >
+      <Icon :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div
+      class="container-body"
+      :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.copilot-container {
+  height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: inset 0 0 20px 1px #fff1;
+  backdrop-filter: blur(4px);
+
+  // &::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/components/ContainerIcon.vue

@@ -0,0 +1,58 @@
+<!-- 
+    filename: ContainerIcon.vue
+    author: liubin
+    date: 2024-04-09 16:41:36
+    description: 
+-->
+
+<template>
+  <div class="container-icon" :style="bgStyle"></div>
+</template>
+
+<script>
+import cube from "@/assets/images/homeindex/fto-icon.png";
+import chip from "@/assets/images/homeindex/chip-icon.png";
+import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
+import bipv from "@/assets/images/homeindex/bipv-icon.png";
+import std from "@/assets/images/homeindex/std-icon.png";
+
+export default {
+  name: "ContainerIcon",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "cube",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    bgStyle() {
+      return {
+        cube:
+          "background: url(" + cube + ") no-repeat center center / 100% 100%",
+        chip:
+          "background: url(" + chip + ") no-repeat center center / 100% 100%",
+        chip2:
+          "background: url(" + chip2 + ") no-repeat center center / 100% 100%",
+        bipv:
+          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
+        std: "background: url(" + std + ") no-repeat center center / 100% 100%",
+      }[this.icon];
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.container-icon {
+  //   width: 32px;
+  //   height: 32px;
+  width: 1.701vw;
+  height: 1.701vw;
+  background: #ccc2;
+}
+</style>

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

@@ -0,0 +1,64 @@
+<!-- 
+    filename: StdOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="std-output">
+    <copilot-select :options="cityOptions" />
+    <div class="flex-1 stretch">f</div>
+  </div>
+</template>
+
+<script>
+import CopilotSelect from "../select.vue";
+import fetcher from "./std-output-data";
+
+export default {
+  name: "StdOutput",
+  components: { CopilotSelect },
+  props: {},
+  data() {
+    return {
+      cityOptions: [
+        "成都",
+        "邯郸",
+        "株洲",
+        "瑞昌",
+        "佳木斯",
+        "凯盛光伏",
+        "蚌埠兴科",
+      ],
+    };
+  },
+  computed: {},
+  mounted() {
+    fetcher.getData().then((res) => {
+      console.log("getData--->", res, fetcher.options);
+    });
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.std-output {
+  height: 100%;
+  padding: 12px 24px;
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-1 {
+  flex: 1;
+  background: #f001;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

src/views/copilot/components/charts/double-ring-chart-options.js

@@ -0,0 +1,122 @@
+export default {
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "0",
+    top: "15%",
+    containLabel: true,
+  },
+  tooltip: {},
+  xAxis: {
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#4561AE",
+      },
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+    // data: this.xAxis,
+    data: [],
+  },
+  yAxis: {
+    name: "单位/片",
+    nameTextStyle: {
+      color: "#fff",
+      fontSize: 12,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#4561AE",
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#4561AE",
+      },
+    },
+  },
+  series: [
+    {
+      name: "2023年",
+      type: "bar",
+      barWidth: 12,
+      itemStyle: {
+        borderRadius: [10, 10, 0, 0],
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#12f7f1", // 0% 处的颜色
+            },
+            {
+              offset: 0.35,
+              color: "#12f7f177", // 100% 处的颜色
+            },
+            {
+              offset: 0.75,
+              color: "#12f7f133", // 100% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "transparent", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
+      //   data: this.series[0].data,
+      data: [],
+    },
+    {
+      name: "2024年",
+      type: "bar",
+      barWidth: 12,
+      // tooltip: {
+      //   valueFormatter: function (value) {
+      //     return value + " ml";
+      //   },
+      // },
+      itemStyle: {
+        borderRadius: [10, 10, 0, 0],
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#57abf8", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#364BFE66", // 100% 处的颜色
+            },
+          ],
+          global: false, // 缺省为 false
+        },
+      },
+      data: [],
+      //   data: this.series[1].data,
+    },
+  ],
+};

src/views/copilot/components/charts/std-output-data.js

@@ -0,0 +1,13 @@
+import options from './double-ring-chart-options';
+
+export default {
+  options,
+  getData: async function (url) {
+    //
+    return await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve([90119, 40801, 44028]);
+      }, 1200);
+    });
+  },
+};

src/views/copilot/components/select.vue

@@ -0,0 +1,75 @@
+<!-- 
+    filename: select.vue
+    author: liubin
+    date: 2024-04-17 09:50:03
+    description: 
+-->
+
+<template>
+  <div style="display: inline-block; text-align: center">
+    <div class="copilot-select">
+      <button
+        type="button"
+        v-for="item in options"
+        :key="item"
+        @click="currentActive = item"
+        :class="[item == currentActive ? 'active' : '']"
+      >
+        {{ item }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CopilotSelect",
+  components: {},
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      currentActive: '',
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.copilot-select {
+  display: flex;
+  align-items: center;
+  background: #01306c;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+button {
+  color: #fff;
+  padding: 8px 12px;
+  cursor: pointer;
+  position: relative;
+  transition: all .3s;
+}
+
+button.active,
+button:hover {
+  background: #1d74d8;
+}
+
+button:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: -1px;
+  width: 2px;
+  height: 60%;
+  background: #02236d;
+}
+</style>

src/views/copilot/container.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="copilot-container">
+  <div class="copilot-layout">
     <CopilotHeaderVue
       :active="page"
       :period="period"
@@ -46,7 +46,7 @@ export default {
 </script>
 
 <style>
-.copilot-container {
+.copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;

src/views/copilot/yield/index.vue

@@ -8,11 +8,9 @@
 <template>
   <div class="yield-copilot">
     <section class="top flex">
-      <db-container
-        class="std-yield"
-        title="标准组件产出"
-        icon="std"
-      ></db-container>
+      <db-container class="std-yield" title="标准组件产出" icon="std">
+        <std-output />
+      </db-container>
       <db-container
         class="chip-yield"
         title="芯片产出"
@@ -36,11 +34,12 @@
 </template>
 
 <script>
-import Container from "@/views/dashboard/components/Container.vue";
+import Container from "../components/Container.vue";
+import StdOutputVue from "../components/charts/StdOutput.vue";
 
 export default {
   name: "YieldCopilot",
-  components: { DbContainer: Container },
+  components: { DbContainer: Container, StdOutput: StdOutputVue },
   props: {},
   data() {
     return {};

src/views/dashboard/charts/ChipYieldChart.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 import screenfull from "screenfull";
 
 export default {

src/views/dashboard/charts/LeftChartBase.vue

@@ -26,8 +26,8 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 
 export default {
   name: "LeftChartBase",

src/views/dashboard/charts/RightChartBase.vue

@@ -26,8 +26,8 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 
 export default {
   name: "RightChartBase",

src/views/index.vue

@@ -63,7 +63,6 @@ import store from "@/store";
 import DashboardHeader from "./dashboard/components/Header.vue";
 import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
 import Container from "./dashboard/components/Container.vue";
-import ChartContainer from "./dashboard/components/ChartContainer.vue";
 import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 import BipvChart from "./dashboard/charts/Bipv.vue";
@@ -91,7 +90,6 @@ export default {
     CompanyInfo,
     DbHeader: DashboardHeader,
     DbContainer: Container,
-    ChartContainer,
     FtoChart,
     ChipInvestChart,
     ChipYieldChart,