Merge pull request '优化驾驶舱代码结构' (#11) from projects/mescc/lb into projects/mescc/develop

Reviewed-on: #11

.env.dev

@@ -5,8 +5,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+VUE_APP_BASE_API = 'http://192.168.1.61:48080'
-VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/store/modules/home.js

@@ -18,6 +18,7 @@ const state = {
     efficiency: {},
   },
   home: {
+    /** 主页状态 */
     ftoInvest: null,
     chipInvest: null,
     chipOutput: null,
@@ -65,13 +66,13 @@ const actions = {
   async initCopilot({ commit }, { period, source }) {
     const fetcher = {
       yield: getCopilotYield,
-      energy: null,
+      energy: getCopilotEnergy,
-      efficiency: null,
+      efficiency: getCopilotEfficiency,
     }[source];
     // 获取产量数据
     let { data: factoryList, type } = await fetcher(period);
     let targetList = null;
-    if (source === "yield") {
+    if (source === "yield" || source === "efficiency") {
       // 获取目标数据
       let { data } = await fetcher(period, true);
       targetList = data;
@@ -88,8 +89,8 @@ export default {
   actions,
 };
 
-// utils function
 function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
+  // 初始数据 
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
@@ -148,6 +149,10 @@ function getFactoryTargetValue(targetList, factoryId) {
   };
 }
 
+/**
+ * 
+ * @returns 初始化状态值
+ */
 function init() {
   const t_ = {
     current: Array(7).fill(0),
@@ -168,11 +173,11 @@ function init() {
   const bipvOutput = deepClone(chipOutput);
 
   return {
-    chipInvest,
+    chipInvest, // 芯片投入
-    ftoInvest,
+    ftoInvest, // FTO投入
-    chipOutput,
+    chipOutput, // 芯片产出
-    stdOutput,
+    stdOutput, // 标准组件产出
-    bipvOutput,
+    bipvOutput, // BIPV产出
   };
 }
 
@@ -210,13 +215,33 @@ async function getHomeTarget() {
   return null;
 }
 
-async function fetcher(type = "yield", params) {
+function getUrl(copilot_module) {
+  let url = {
+    // 对比数据的 URL
+    comparison: "",
+    // 目标数据的 URL
+    target: "",
+  };
+  switch (copilot_module) {
+    case "yield":
+      url.comparison = "/ip/prod-output/query-by-date";
+      url.target = "/ip/prod-target/query-by-date";
+      break;
+    case "energy":
+      break;
+    case "efficiency":
+      url.comparison = "/ip/prod-output/query-Rate-List";
+      url.target = "/ip/prod-target/query-rate-target";
+      break;
+  }
+
+  return url;
+}
+
+async function doFetch(copilot_module = "yield", fetch_target, params) {
+  const url = getUrl(copilot_module);
   const { code, data } = await axios.post(
-    type == "yield"
+    fetch_target ? url.target : url.comparison,
-      ? // 产量 数据
-        "/ip/prod-output/query-by-date"
-      : // 目标数据
-        "/ip/prod-target/query-by-date",
     {
       ...params,
     }
@@ -224,17 +249,36 @@ async function fetcher(type = "yield", params) {
   if (code == 0) {
     return data;
   }
-  console.warn("getCopilotYield failed, code: ", code);
+  console.warn("[doFetch] failed, code: ", code);
   return null;
 }
 
+/**
+ * 
+ * @param {*} period 日周月年1,2,3,4
+ * @param {*} target 是否获取目标数据
+ * @returns 
+ */
+function getCopilotYield(period, target = false) {
+  return getCopilotData("yield", period, target);
+}
+
+function getCopilotEnergy(period, target = false) {
+  return getCopilotData("energy", period, target);
+}
+
+function getCopilotEfficiency(period, target = false) {
+  return getCopilotData("efficiency", period, target);
+}
+
 /**
  *
  * @param {*} period 周期： 日周月年
  * @param {*} target 是否获取目标数据：默认 否
  * @returns
  */
-async function getCopilotYield(period, target = false) {
+async function getCopilotData(copilot_module, period, target = false) {
+  if (!copilot_module) copilot_module = "yield";
   // 请求参数，直接一次性获取所有工厂
   let queryParams = {
     factorys: [],
@@ -260,7 +304,7 @@ async function getCopilotYield(period, target = false) {
   }
 
   return {
-    data: await fetcher(target ? "target" : "yield", queryParams),
+    data: await doFetch(copilot_module, target ? true : false, queryParams),
-    type: "yield",
+    type: copilot_module,
   };
 }

src/views/copilot/components/ChartContainer.vue

@@ -0,0 +1,69 @@
+<!-- 
+    filename: ChartContainer.vue
+    author: liubin
+    date: 2024-04-10 08:54:33
+    description: 
+    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
+-->
+
+<template>
+  <div class="chart-container" :class="{ 'no-scroll': noScroll }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartContainer",
+  components: {},
+  props: {
+    noScroll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-container {
+  height: 0;
+  flex: 1;
+  overflow-x: scroll;
+}
+
+.no-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  //   width: 10px;
+  //   height: 10px;
+  //   background: #14305f;
+}
+
+::-webkit-scrollbar-track {
+  background: #14305f;
+  border: 0 none;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #004798;
+  border: 0 none;
+  border-radius: 6px;
+}
+</style>

src/views/copilot/components/charts/base/fetcherDoubleRing.js

@@ -1,10 +0,0 @@
-export default {
-  getData: async function (url) {
-    //
-    return await new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve([90119, 40801, 44028]);
-      }, 1200);
-    });
-  },
-};

src/views/copilot/efficiency/index.vue

@@ -7,23 +7,41 @@
 
 <template>
   <div class="efficiency-copilot">
-    <db-container title="芯片良率" icon="chip2"></db-container>
+    <Container title="芯片良率" icon="chip2"></Container>
-    <db-container title="标准组件良率" icon="std"></db-container>
+    <Container title="标准组件良率" icon="std"></Container>
-    <db-container title="芯片OEE" icon="chip"></db-container>
+    <Container title="芯片OEE" icon="chip"></Container>
-    <db-container title="转化效率" icon="cube"></db-container>
+    <Container title="转化效率" icon="cube"></Container>
   </div>
 </template>
 
 <script>
-import Container from "../../dashboard/components/Container.vue";
+import Container from "@/views/copilot/components/Container.vue";
 export default {
   name: "EfficiencyCopilot",
-  components: { DbContainer: Container },
+  components: { Container },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
   data() {
     return {};
   },
-  computed: {},
+  watch: {
-  methods: {},
+    period: {
+      handler(val) {
+        val && this.fetchData(val);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    fetchData(period = "日") {
+      console.log(`效率驾驶舱，获取${period}数据`);
+      this.$store.dispatch("copilot/initCopilot", { period, source: "efficiency" });
+    },
+  },
 };
 </script>
 

src/views/copilot/yield/components/BipvOutput.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "BipvOutput",

src/views/copilot/yield/components/ChipInvest.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <bar-chart-base
+  <BarChartBase
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "./base/BarChartBase.vue";
+import BarChartBase from "./sub/bar/BarChartBase.vue";
 
 export default {
   name: "ChipInvest",

src/views/copilot/yield/components/ChipOutput.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "ChipOutput",

src/views/copilot/yield/components/FtoInvest.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <bar-chart-base
+  <BarChartBase
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "./base/BarChartBase.vue";
+import BarChartBase from "./sub/bar/BarChartBase.vue";
 
 export default {
   name: "FtoInvest",

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
 
 export default {
   name: "StdOutput",

src/views/copilot/yield/components/sub/bar/BarChartBase.vue

@@ -26,13 +26,13 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainerVue from "../../../../components/ChartContainer.vue";
+import ChartContainer from "../../../../components/ChartContainer.vue";
 import chartMixin from "@/mixins/chart.js";
 
 export default {
   name: "BarChartBase",
   components: {
-    ChartContainer: ChartContainerVue,
+    ChartContainer,
   },
   mixins: [chartMixin],
   props: {

src/views/copilot/yield/components/sub/city/CityData.vue

@@ -98,6 +98,7 @@ export default {
           _cities[idx].value = v ?? 0;
         }
       );
+      // 删掉凯盛光伏
       _cities.splice(4, 1);
       return _cities;
     },

src/views/copilot/yield/components/sub/city/CityItem.vue

@@ -15,7 +15,8 @@
 <script>
 import CityNameVue from "./CityName.vue";
 import CityValueVue from "./CityValue.vue";
-import GradientTextVue from "./GradientText.vue";
+import GradientTextVue from "../gradient/GradientText.vue";
+
 export default {
   name: "CityItem",
   components: {

src/views/copilot/yield/components/sub/city/CityName.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Icon from "./icon.png";
+import Icon from "../../../assets/icon.png";
 
 export default {
   name: "CityName",

src/views/copilot/yield/components/sub/city/CityValue.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import GradientTextVue from "./GradientText.vue";
+import GradientTextVue from "../gradient/GradientText.vue";
 
 export default {
   name: "CityValue",

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

@@ -8,7 +8,7 @@
 <template>
   <div class="double-ring-chart">
     <div ref="chart" class="double-ring-chart__container"></div>
-    <!--   :style="{ height: vHeight + 'vh' }" -->
+    <!-- style="{ height: vHeight + 'vh' }" -->
     <div class="double-ring-chart__legend">
       <div v-for="item in legendItems" :key="item.label" class="legend-item">
         <span class="legend-item__label">{{ item.label }}</span>
@@ -21,7 +21,7 @@
 <script>
 import chartMixin from "@/mixins/chart.js";
 import fullscreenMixin from "@/mixins/fullscreen.js";
-import getOptions from "./double-ring-chart-options";
+import getOptions from "../../../options/double-ring-chart-options";
 
 export default {
   name: "DoubleRingChart",
@@ -75,6 +75,7 @@ export default {
           getter.current[this.factoryId],
         ];
       }
+      // [100, 200, 200]
       return [
         getter.previous[this.factoryId],
         getter.current[this.factoryId],

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

@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import CopilotSelect from "../../select.vue";
+import CopilotSelect from "@/views/copilot/components/select.vue";
 import DoubleRingChartVue from "./DoubleRingChart.vue";
-import CityData from "./CityData.vue";
+import CityData from "../city/CityData.vue";
 
 export default {
   name: "DoubleRingWrapper",

src/views/copilot/yield/index.vue

@@ -30,22 +30,22 @@
 </template>
 
 <script>
-import Container from "../components/Container.vue";
+import Container from "@/views/copilot/components/Container.vue";
-import StdOutputVue from "../components/charts/StdOutput.vue";
+import StdOutput from "./components/StdOutput.vue";
-import ChipOutputVue from "../components/charts/ChipOutput.vue";
+import ChipOutput from "./components/ChipOutput.vue";
-import FtoInvestVue from "../components/charts/FtoInvest.vue";
+import FtoInvest from "./components/FtoInvest.vue";
-import BipvOutputVue from "../components/charts/BipvOutput.vue";
+import BipvOutput from "./components/BipvOutput.vue";
-import ChipInvestVue from "../components/charts/ChipInvest.vue";
+import ChipInvest from "./components/ChipInvest.vue";
 
 export default {
   name: "YieldCopilot",
   components: {
     DbContainer: Container,
-    StdOutput: StdOutputVue,
+    StdOutput,
-    ChipOutput: ChipOutputVue,
+    ChipOutput,
-    BipvOutput: BipvOutputVue,
+    BipvOutput,
-    FtoInvest: FtoInvestVue,
+    FtoInvest,
-    ChipInvest: ChipInvestVue,
+    ChipInvest,
   },
   props: {
     period: {

src/views/dashboard/components/CompanyInfo.vue

@@ -12,7 +12,7 @@
     <h2>{{ info.companyName }}</h2>
     <ul>
       <li v-for="item in info.items" :key="item.label">
-        {{ item.label }} {{ item.value | currency }}
+        {{ item.label }} {{ item.value | numberFilter }}
       </li>
     </ul>
   </div>
@@ -35,8 +35,12 @@ export default {
     },
   },
   filters: {
-    currency(value) {
+    numberFilter(value) {
-      return value.toLocaleString();
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return '-';
+      }
     },
   },
   data() {