update 产量驾驶舱

2024-04-25 14:55:23 +08:00
parent 30af8faa49
commit bb399835e7
11 changed files with 371 additions and 52 deletions
--- a/src/views/copilot/components/charts/BipvOutput.vue
+++ b/src/views/copilot/components/charts/BipvOutput.vue
@@ -6,7 +6,7 @@
 -->

 <template>
-  <DoubleRingWrapperVue />
+  <DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
 </template>

 <script>
@@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
 export default {
  name: "BipvOutput",
  components: { DoubleRingWrapperVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
  data() {
-    return {};
+    return { dataBundle: null };
  },
 };
 </script>
--- a/src/views/copilot/components/charts/ChipInvest.vue
+++ b/src/views/copilot/components/charts/ChipInvest.vue
@@ -0,0 +1,121 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <bar-chart-base
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    class="fto-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./base/BarChartBase.vue";
+
+export default {
+  name: "ChipInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  computed: {
+    legend() {
+      switch (this.period) {
+        case "日":
+          return [{ label: "昨日", color: "#12f7f1" }];
+        case "周":
+          return [{ label: "本周", color: "#12f7f1" }];
+        case "月": {
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return [
+            { label: `${year}年${month}月`, color: "#12f7f1" },
+            { label: `${year - 1}年${month}月`, color: "#58adfa" },
+          ];
+        }
+        case "年": {
+          const year = new Date().getFullYear();
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+        }
+        default:
+          return [
+            { label: `${year - 1}年`, color: "#12f7f1" },
+            { label: `${year}年`, color: "#58adfa" },
+          ];
+      }
+    },
+    series() {
+      const template =
+        this.period == "日" || this.period == "周"
+          ? [
+              {
+                name: "样例数据--2023年",
+                data: Array.from({ length: 7 }, () =>
+                  Math.floor(Math.random() * 1000)
+                ),
+              },
+            ]
+          : [
+              {
+                name: "样例数据--2023年",
+                data: Array.from({ length: 7 }, () =>
+                  Math.floor(Math.random() * 1000)
+                ),
+              },
+              {
+                name: "样例数据--2024年",
+                data: Array.from({ length: 7 }, () =>
+                  Math.floor(Math.random() * 1000)
+                ),
+              },
+            ];
+      const ftoInvest = this.$store.getters.home.ftoInvest;
+      if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
+        return [
+          {
+            name: "样例数据--2023年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+        ];
+      }
+
+      return [
+        {
+          name: `${new Date().getFullYear() - 1}年`,
+          data: ftoInvest.previous,
+        },
+        {
+          name: `${new Date().getFullYear()}年`,
+          data: ftoInvest.current,
+        },
+      ];
+    },
+  },
+};
+</script>
--- a/src/views/copilot/components/charts/ChipOutput.vue
+++ b/src/views/copilot/components/charts/ChipOutput.vue
@@ -6,7 +6,7 @@
 -->

 <template>
-  <DoubleRingWrapperVue />
+  <DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
 </template>

 <script>
@@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
 export default {
  name: "ChipOutput",
  components: { DoubleRingWrapperVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
  data() {
-    return {};
+    return { dataBundle: null };
  },
 };
 </script>
--- a/src/views/copilot/components/charts/base/CityData.vue
+++ b/src/views/copilot/components/charts/base/CityData.vue
@@ -9,7 +9,10 @@
  <div class="city-data">
    <div class="headquarter">
      <div class="inner-shadow w-1"></div>
-      <div class="inner-shadow flex-1">凯盛光伏</div>
+      <div class="inner-shadow flex-1 flex">
+        <CityName value="凯盛光伏" />
+        <CityValue value="32212" horizontal :period="period" />
+      </div>
      <div class="inner-shadow w-1"></div>
    </div>

@@ -27,9 +30,16 @@

 <script>
 import CityItemVue from "./CityItem.vue";
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
+
 export default {
  name: "CityData",
-  components: { CityItem: CityItemVue },
+  components: {
+    CityItem: CityItemVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
  props: {
    dataSource: {
      type: Object,
@@ -77,6 +87,10 @@ export default {
  width: 70px;
 }

+.flex {
+  display: flex;
+}
+
 .flex-1 {
  flex: 1;
 }
@@ -90,7 +104,6 @@ export default {
  flex: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
-  background: #ccc3;
  gap: 8px;
 }
 </style>
--- a/src/views/copilot/components/charts/base/CityItem.vue
+++ b/src/views/copilot/components/charts/base/CityItem.vue
@@ -7,44 +7,22 @@

 <template>
  <div class="city-item inner-shadow">
-    <div class="item-location">
-      <img src="#" alt="" />
-      <span>{{ location }}</span>
-    </div>
-    <div class="item-value" style="position: relative; flex: 1">
-      <div
-        class=""
-        style="
-          width: 100%;
-          position: absolute;
-          top: 12%;
-          left: 50%;
-          transform: translateX(-25%);
-          overflow: hidden;
-        "
-      >
-        <GradientTextVue :text="'' + value" />
-      </div>
-      <span
-        style="
-          width: 100%;
-          font-size: 14px;
-          line-height: 16px;
-          position: absolute;
-          top: 56%;
-          left: 24%;
-        "
-        >{{ period == "日" ? "今日产出" : "本周产出" }}</span
-      >
-    </div>
+    <CityName :value="location" />
+    <CityValue :value="value+''" :period="period" />
  </div>
 </template>

 <script>
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
 import GradientTextVue from "./GradientText.vue";
 export default {
  name: "CityItem",
-  components: { GradientTextVue },
+  components: {
+    GradientTextVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
  props: {
    location: {
      type: String,
@@ -71,7 +49,6 @@ export default {
 <style scoped lang="scss">
 .city-item {
  display: flex;
-  gap: 8px;
 }

 .inner-shadow {
--- a/src/views/copilot/components/charts/base/CityName.vue
+++ b/src/views/copilot/components/charts/base/CityName.vue
@@ -0,0 +1,55 @@
+<!-- 
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "./icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 1;
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>
--- a/src/views/copilot/components/charts/base/CityValue.vue
+++ b/src/views/copilot/components/charts/base/CityValue.vue
@@ -0,0 +1,127 @@
+<!-- 
+    filename: CityValue.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-value" :class="[horizontal ? 'horizontal' : '']">
+    <span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
+      period == "周" ? "本周产出" : "今日产出"
+    }}</span>
+    <span class="value" :class="[horizontal ? 'horizontal' : '']">{{
+      value | numberFilter
+    }}</span>
+    <!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
+  </div>
+</template>
+
+<script>
+import GradientTextVue from "./GradientText.vue";
+
+export default {
+  name: "CityValue",
+  components: { GradientTextVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  filters: {
+    numberFilter(value) {
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return value;
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.city-value {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 2;
+  position: relative;
+}
+
+.city-value.horizontal {
+  flex-direction: row;
+}
+
+.city-value::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent 20%,
+    #fff 50%,
+    transparent 80%
+  );
+}
+
+span.hint {
+  margin: 0 0.77vw;
+  font-size: 0.77vw;
+  order: 2;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+span.hint.horizontal {
+  margin: 0 1.235vw;
+  width: 1.543vw;
+  order: 1;
+  font-size: 0.77vw;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+.value {
+  color: #4dd2fe;
+  text-align: center;
+  font-size: 1.132vw;
+  order: 1;
+}
+.value.horizontal {
+  text-align: left;
+  flex: 1;
+  font-size: 1.543vw;
+  order: 2;
+}
+
+svg,
+.value {
+  width: 100px;
+  order: 1;
+}
+
+.value.horizontal,
+svg.horizontal {
+  order: 2;
+}
+</style>
--- a/src/views/copilot/components/charts/base/GradientText.vue
+++ b/src/views/copilot/components/charts/base/GradientText.vue
@@ -6,7 +6,7 @@
 -->

 <template>
-  <svg height="32" width="100%">
+  <svg :height="size + 8" width="100%">
    <defs>
      <linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
@@ -15,9 +15,13 @@
    </defs>
    <text
      x="0"
-      y="24"
+      :y="size"
      fill="url(#smoke-text)"
-      :style="{ fontSize: '24px', letterSpacing: spacing || '2px' }"
+      :style="{
+        fontSize: `${size}px`,
+        letterSpacing: spacing || '2px',
+        fontFamily: 'Calibri, Verdana, sans-serif',
+      }"
    >
      {{ text | numberFilter }}
    </text>
@@ -37,6 +41,10 @@ export default {
      type: String,
      default: "1px",
    },
+    size: {
+      type: Number,
+      default: 24,
+    },
  },
  filters: {
    numberFilter(value) {
--- a/src/views/copilot/components/charts/base/icon.png
+++ b/src/views/copilot/components/charts/base/icon.png
--- a/src/views/copilot/container.vue
+++ b/src/views/copilot/container.vue
@@ -42,6 +42,14 @@ export default {
      period: "日",
    };
  },
+  // mounted() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
+  // destroyed() {
+  //   document.body.style.minHeight = "1024px";
+  //   document.body.style.minWidth = "1550px";
+  // },
 };
 </script>

--- a/src/views/copilot/yield/index.vue
+++ b/src/views/copilot/yield/index.vue
@@ -12,21 +12,19 @@
        <std-output :period="period" />
      </db-container>
      <db-container class="chip-yield" title="芯片产出" icon="chip2">
-        <chip-output />
+        <chip-output :period="period" />
      </db-container>
      <db-container class="bipv-yield" title="BIPV产出" icon="bipv">
-        <bipv-output />
+        <bipv-output :period="period" />
      </db-container>
    </section>
    <section class="bottom flex">
      <db-container class="fto-involve" title="FTO投入">
        <fto-invest :period="period" />
      </db-container>
-      <db-container
-        class="chip-involve"
-        title="芯片投入"
-        icon="chip"
-      ></db-container>
+      <db-container class="chip-involve" title="芯片投入" icon="chip">
+        <chip-invest :period="period" />
+      </db-container>
    </section>
  </div>
 </template>
@@ -37,6 +35,7 @@ import StdOutputVue from "../components/charts/StdOutput.vue";
 import ChipOutputVue from "../components/charts/ChipOutput.vue";
 import FtoInvestVue from "../components/charts/FtoInvest.vue";
 import BipvOutputVue from "../components/charts/BipvOutput.vue";
+import ChipInvestVue from "../components/charts/ChipInvest.vue";

 export default {
  name: "YieldCopilot",
@@ -45,7 +44,8 @@ export default {
    StdOutput: StdOutputVue,
    ChipOutput: ChipOutputVue,
    BipvOutput: BipvOutputVue,
-    FtoInvest: FtoInvestVue
+    FtoInvest: FtoInvestVue,
+    ChipInvest: ChipInvestVue,
  },
  props: {
    period: {