修改
This commit is contained in:
		@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: BarChartBase.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-10 08:59:28
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -18,7 +18,7 @@
 | 
			
		||||
    </div>
 | 
			
		||||
    <div
 | 
			
		||||
      ref="chart"
 | 
			
		||||
      style="max-width: 50vw"
 | 
			
		||||
      style="max-width: 40vw"
 | 
			
		||||
      :style="{ height: vHeight + 'vh' }"
 | 
			
		||||
    ></div>
 | 
			
		||||
  </chart-container>
 | 
			
		||||
@@ -199,6 +199,7 @@ export default {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
      const actualOptions = JSON.parse(JSON.stringify(this.options));
 | 
			
		||||
      console.log('actualOptions', this.options)
 | 
			
		||||
      actualOptions.series[0].data = val[0].data;
 | 
			
		||||
      actualOptions.series[0].name = val[0].name;
 | 
			
		||||
      actualOptions.series[1].data = val?.[1]?.data || [];
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: Container.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-09 10:44:09
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,9 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: ContainerIcon.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-09 16:41:36
 | 
			
		||||
    description: 
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-04-28 13:42:51
 | 
			
		||||
 * @LastEditTime: 2024-05-07 16:54:54
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -14,8 +15,13 @@ 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 water from "@/assets/images/homeindex/water-icon.png";
 | 
			
		||||
import gas from "@/assets/images/homeindex/gas-icon.png";
 | 
			
		||||
import ware from "@/assets/images/homeindex/ware-icon.png";
 | 
			
		||||
import flash from "@/assets/images/homeindex/flash-icon.png";
 | 
			
		||||
import std from "@/assets/images/homeindex/std-icon.png";
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "ContainerIcon",
 | 
			
		||||
  components: {},
 | 
			
		||||
@@ -40,6 +46,10 @@ export default {
 | 
			
		||||
        bipv:
 | 
			
		||||
          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
 | 
			
		||||
        std: "background: url(" + std + ") no-repeat center center / 100% 100%",
 | 
			
		||||
        water: "background: url(" + water + ") no-repeat center center / 100% 100%",
 | 
			
		||||
        gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
 | 
			
		||||
        flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
 | 
			
		||||
        ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
 | 
			
		||||
      }[this.icon];
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: CopilotHeader.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-16 15:14:01
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -63,7 +63,7 @@ export default {
 | 
			
		||||
    toggleFullScreen() {
 | 
			
		||||
      this.isFullscreen = !this.isFullscreen;
 | 
			
		||||
 | 
			
		||||
      screenfull.toggle(document.querySelector(".copilot-layout"));
 | 
			
		||||
      screenfull.toggle(document.querySelector(".copilot-layout"))
 | 
			
		||||
      // 矫正宽度
 | 
			
		||||
      // const el = document.querySelector(".copilot-layout");
 | 
			
		||||
      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
 | 
			
		||||
 
 | 
			
		||||
@@ -1,18 +1,14 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
 | 
			
		||||
<!--
 | 
			
		||||
    filename: container.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-16 14:51:25
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="copilot-layout">
 | 
			
		||||
    <CopilotHeaderVue
 | 
			
		||||
      :active="page"
 | 
			
		||||
      :period="period"
 | 
			
		||||
      @update:active="page = $event"
 | 
			
		||||
      @update:period="period = $event"
 | 
			
		||||
    />
 | 
			
		||||
  <div class="copilot-layout" ref="copilot-layout">
 | 
			
		||||
    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
 | 
			
		||||
 | 
			
		||||
    <YieldCopilot v-if="page == '产量'" :period="period" />
 | 
			
		||||
    <EnergyCopilot v-if="page == '综合'" :period="period" />
 | 
			
		||||
@@ -52,8 +48,8 @@ export default {
 | 
			
		||||
  // },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
 | 
			
		||||
.copilot-layout {
 | 
			
		||||
  padding: 16px;
 | 
			
		||||
  background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
 | 
			
		||||
 
 | 
			
		||||
@@ -63,20 +63,22 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    series() {
 | 
			
		||||
      const { ftoInvest } = this.$store.getters.copilot.efficiency.chipOee;
 | 
			
		||||
      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
 | 
			
		||||
      const { chipOee } = this.$store.getters.copilot.efficiency;
 | 
			
		||||
      let dataList = null;
 | 
			
		||||
 | 
			
		||||
      switch (this.period) {
 | 
			
		||||
        case "日":
 | 
			
		||||
        case "周":
 | 
			
		||||
          dataList = ftoInvest?.current;
 | 
			
		||||
          dataList = chipOee?.current;
 | 
			
		||||
        case "周":
 | 
			
		||||
          dataList = chipOee?.current;
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          dataList = [];
 | 
			
		||||
          dataList[0] = ftoInvest?.pervious;
 | 
			
		||||
          dataList[1] = ftoInvest?.current;
 | 
			
		||||
          dataList[0] = chipOee?.previous;
 | 
			
		||||
          dataList[1] = chipOee?.current;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      // console.log(dataList)
 | 
			
		||||
      return getTemplate(this.period, dataList);
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
@@ -86,6 +88,7 @@ export default {
 | 
			
		||||
function getTemplate(period, dataList) {
 | 
			
		||||
  const year = new Date().getFullYear();
 | 
			
		||||
  const month = new Date().getMonth() + 1;
 | 
			
		||||
  console.log('11111', dataList);
 | 
			
		||||
  return period == "日" || period == "周"
 | 
			
		||||
    ? [
 | 
			
		||||
        {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,20 +1,18 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: StdRate.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 08:50:43
 | 
			
		||||
    description: 标准组件良率
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:25:10
 | 
			
		||||
 * @LastEditTime: 2024-05-08 15:55:24
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="std-rate">
 | 
			
		||||
    <div class="span-2">
 | 
			
		||||
      <StdRateItem :city="cities[5]" />
 | 
			
		||||
      <StdRateItem :period="period" :city="cities[5]" />
 | 
			
		||||
    </div>
 | 
			
		||||
    <div
 | 
			
		||||
      v-for="item in cities.filter((val, index) => index != 5)"
 | 
			
		||||
      :key="item.name"
 | 
			
		||||
    >
 | 
			
		||||
      <StdRateItem :city="item" />
 | 
			
		||||
    <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
 | 
			
		||||
      <StdRateItem :period="period" :city="item" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -24,7 +22,12 @@ import StdRateItem from "./sub/std/StdRateItem.vue";
 | 
			
		||||
export default {
 | 
			
		||||
  name: "StdRate",
 | 
			
		||||
  components: { StdRateItem },
 | 
			
		||||
  props: {},
 | 
			
		||||
  props: {
 | 
			
		||||
    period: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: "日",
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      cities: [
 | 
			
		||||
@@ -38,7 +41,9 @@ export default {
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  computed: {},
 | 
			
		||||
  computed: {
 | 
			
		||||
 | 
			
		||||
  },
 | 
			
		||||
  methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
@@ -48,7 +53,7 @@ export default {
 | 
			
		||||
  display: grid;
 | 
			
		||||
  gap: 8px;
 | 
			
		||||
  grid-template-columns: repeat(2, 1fr);
 | 
			
		||||
  grid-template-rows: repeat(4, 1fr);
 | 
			
		||||
  grid-template-rows: repeat(1, 1fr);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.span-2 {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,4 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: TransformRate.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 08:50:34
 | 
			
		||||
@@ -16,7 +16,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
 | 
			
		||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
 | 
			
		||||
export default {
 | 
			
		||||
  name: "TransformRate",
 | 
			
		||||
  components: { BarChartBase },
 | 
			
		||||
@@ -63,18 +63,18 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    series() {
 | 
			
		||||
      const { ftoInvest } = this.$store.getters.copilot.yield;
 | 
			
		||||
      const { transformRate } = this.$store.getters.copilot.efficiency;
 | 
			
		||||
      let dataList = null;
 | 
			
		||||
 | 
			
		||||
      switch (this.period) {
 | 
			
		||||
        case "日":
 | 
			
		||||
        case "周":
 | 
			
		||||
          dataList = ftoInvest?.current;
 | 
			
		||||
          dataList = transformRate?.current;
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          dataList = [];
 | 
			
		||||
          dataList[0] = ftoInvest?.pervious;
 | 
			
		||||
          dataList[1] = ftoInvest?.current;
 | 
			
		||||
          dataList[0] = transformRate?.previous;
 | 
			
		||||
          dataList[1] = transformRate?.current;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      return getTemplate(this.period, dataList);
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 13:22:43
 | 
			
		||||
 * @LastEditTime: 2024-05-07 13:29:55
 | 
			
		||||
 * @LastEditTime: 2024-05-08 15:52:09
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -18,7 +18,7 @@
 | 
			
		||||
    </div>
 | 
			
		||||
    <div
 | 
			
		||||
      ref="chart"
 | 
			
		||||
      style="max-width: 50vw"
 | 
			
		||||
      style="max-width: 40vw"
 | 
			
		||||
      :style="{ height: vHeight + 'vh' }"
 | 
			
		||||
    ></div>
 | 
			
		||||
  </chart-container>
 | 
			
		||||
@@ -198,7 +198,8 @@ export default {
 | 
			
		||||
        this.initOptions(this.options);
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
      const actualOptions = JSON.parse(JSON.stringify(this.options));
 | 
			
		||||
      console.log(val)
 | 
			
		||||
      const actualOptions = JSON.parse(JSON.stringify(this.options))
 | 
			
		||||
      actualOptions.series[0].data = val[0].data;
 | 
			
		||||
      actualOptions.series[0].name = val[0].name;
 | 
			
		||||
      actualOptions.series[1].data = val?.[1]?.data || [];
 | 
			
		||||
 
 | 
			
		||||
@@ -192,4 +192,4 @@ export default {
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
l
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: CityName.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-10 08:59:28
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: ProgressBar.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 09:18:30
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,20 +1,38 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: StdRateItem.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 08:59:33
 | 
			
		||||
    description: 
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:25:10
 | 
			
		||||
 * @LastEditTime: 2024-05-08 14:54:24
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="std-rate-item">
 | 
			
		||||
  <div v-if="period == '日'" class="std-rate-item">
 | 
			
		||||
    <CityName :value="city.name" />
 | 
			
		||||
    <div class="std-rate-item__value">
 | 
			
		||||
      <ProgressBar title="24年目标" :total="city.target" :value="city.target" />
 | 
			
		||||
      <ProgressBar
 | 
			
		||||
        title="24年累计"
 | 
			
		||||
        :total="city.target"
 | 
			
		||||
        :value="city.thisYear"
 | 
			
		||||
      />
 | 
			
		||||
      <ProgressBar :title="title" :total="city.target" :value="city.target" />
 | 
			
		||||
      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div v-else-if="period == '周'" class="std-rate-item">
 | 
			
		||||
    <CityName :value="city.name" />
 | 
			
		||||
    <div class="std-rate-item__value">
 | 
			
		||||
      <ProgressBar :title="title" :total="city.target" :value="city.target" />
 | 
			
		||||
      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div v-else-if="period == '月'" class="std-rate-item">
 | 
			
		||||
    <CityName :value="city.name" />
 | 
			
		||||
    <div class="std-rate-item__value">
 | 
			
		||||
      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
 | 
			
		||||
      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div v-else="period == '年'" class="std-rate-item">
 | 
			
		||||
    <CityName :value="city.name" />
 | 
			
		||||
    <div class="std-rate-item__value">
 | 
			
		||||
      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
 | 
			
		||||
      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -31,9 +49,55 @@ export default {
 | 
			
		||||
      type: Object,
 | 
			
		||||
      required: true,
 | 
			
		||||
    },
 | 
			
		||||
    period: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: "日",
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {};
 | 
			
		||||
    return {
 | 
			
		||||
      showDay:true,
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    title() {
 | 
			
		||||
      switch (this.period) {
 | 
			
		||||
        case "日":
 | 
			
		||||
          return "今日"
 | 
			
		||||
        case "周":
 | 
			
		||||
          return  "本周"
 | 
			
		||||
        case "月":
 | 
			
		||||
          const year = new Date().getFullYear();
 | 
			
		||||
          const month = new Date().getMonth() + 1;
 | 
			
		||||
          return `${year - 1}年${month}月累计`
 | 
			
		||||
        case "年": {
 | 
			
		||||
          const year = new Date().getFullYear();
 | 
			
		||||
          // return [
 | 
			
		||||
           return `${year - 1}年累计`
 | 
			
		||||
          // ];
 | 
			
		||||
        }
 | 
			
		||||
        default:
 | 
			
		||||
         return "今日"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    titleEnd() {
 | 
			
		||||
      switch (this.period) {
 | 
			
		||||
        // case "日":
 | 
			
		||||
        //   return "今日"
 | 
			
		||||
        // case "周":
 | 
			
		||||
        //   return "本周"
 | 
			
		||||
        case "月":
 | 
			
		||||
          const year = new Date().getFullYear();
 | 
			
		||||
          const month = new Date().getMonth() + 1;
 | 
			
		||||
          return  `${year}年${month}月目标`
 | 
			
		||||
        case "年": {
 | 
			
		||||
          const year = new Date().getFullYear();
 | 
			
		||||
          // return [
 | 
			
		||||
          return  `${year}年目标`
 | 
			
		||||
          // ];
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:04:53
 | 
			
		||||
 * @LastEditTime: 2024-05-07 10:25:55
 | 
			
		||||
 * @LastEditTime: 2024-05-08 15:58:14
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
@@ -74,7 +74,7 @@ export default {
 | 
			
		||||
  display: grid;
 | 
			
		||||
  gap: 16px;
 | 
			
		||||
  grid-template-columns: 1fr 1fr;
 | 
			
		||||
  grid-template-rows: 1fr 1fr;
 | 
			
		||||
  grid-template-rows: .5fr .5fr;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.efficiency-copilot > div {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,9 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: StockMonitor.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 16:35:40
 | 
			
		||||
    description: 仓库监控·当前
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:25:10
 | 
			
		||||
 * @LastEditTime: 2024-05-08 09:39:15
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -25,15 +26,15 @@ export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      dhgList: [
 | 
			
		||||
        { name: "总库存", value: "1000" },
 | 
			
		||||
        { name: "已用库存", value: "500" },
 | 
			
		||||
        { name: "剩余库存", value: "500" },
 | 
			
		||||
        { name: "总库存", value: 1000 },
 | 
			
		||||
        { name: "已用库存", value: 500 },
 | 
			
		||||
        { name: "剩余库存", value: 500 },
 | 
			
		||||
      ],
 | 
			
		||||
      otherList: [
 | 
			
		||||
        { name: "分类1", value: "1000" },
 | 
			
		||||
        { name: "分类2", value: "1000" },
 | 
			
		||||
        { name: "分类3", value: "1000" },
 | 
			
		||||
        { name: "分类4", value: "1000" },
 | 
			
		||||
        { name: "分类1", value: 1000 },
 | 
			
		||||
        { name: "分类2", value: 1000 },
 | 
			
		||||
        { name: "分类3", value: 1000 },
 | 
			
		||||
        { name: "分类4", value: 1000 },
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: ChipRateItem.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-29 14:25:18
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -12,9 +12,12 @@
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="chart" ref="chart"></div>
 | 
			
		||||
    <div class="legend" v-if="1">
 | 
			
		||||
      <div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
 | 
			
		||||
        <span class="legend-item__label">{{ lgd.name }}</span>
 | 
			
		||||
        <span class="legend-item__value">{{ lgd.value }}</span>
 | 
			
		||||
      <div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
 | 
			
		||||
        <div >
 | 
			
		||||
          <span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
 | 
			
		||||
          <span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
@@ -47,6 +50,7 @@ export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      period: "月",
 | 
			
		||||
      colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
 | 
			
		||||
      valueTuple: [100, 100, 200],
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
@@ -54,19 +58,23 @@ export default {
 | 
			
		||||
    options() {
 | 
			
		||||
      const year = new Date().getFullYear();
 | 
			
		||||
      const month = new Date().getMonth() + 1;
 | 
			
		||||
      const vt = this.valueTuple;
 | 
			
		||||
      let titleValue =
 | 
			
		||||
          vt[0] != null && vt[2] != null && vt[2] !== 0
 | 
			
		||||
            ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
 | 
			
		||||
            : "0%",
 | 
			
		||||
        subtitle =
 | 
			
		||||
          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
 | 
			
		||||
      let arr = []
 | 
			
		||||
      this.legendList.forEach(ele => {
 | 
			
		||||
        arr.push(ele.value)
 | 
			
		||||
      });
 | 
			
		||||
      let vt = arr
 | 
			
		||||
      console.log(arr)
 | 
			
		||||
      let titleValue = vt.reduce(function (prev, cur, index, arr) {
 | 
			
		||||
        return prev + cur
 | 
			
		||||
      })
 | 
			
		||||
      let subtitle = `总计/片`;
 | 
			
		||||
 | 
			
		||||
      return getOptions({
 | 
			
		||||
        single: true,
 | 
			
		||||
        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
 | 
			
		||||
        titleValue,
 | 
			
		||||
        subtitle,
 | 
			
		||||
        dataList:this.legendList,
 | 
			
		||||
        previousSum: this.valueTuple[0],
 | 
			
		||||
        currentSum: this.valueTuple[1],
 | 
			
		||||
        targetSum: this.valueTuple[2],
 | 
			
		||||
@@ -107,27 +115,31 @@ export default {
 | 
			
		||||
  .legend {
 | 
			
		||||
    height: 80px;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    gap: 40px;
 | 
			
		||||
    gap: 20px;
 | 
			
		||||
    justify-content: space-around;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .legend-item {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    // width: 90px;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    // justify-content: space-around;
 | 
			
		||||
    // justify-content: space-between;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    flex-wrap: wrap;
 | 
			
		||||
    gap: 3px;
 | 
			
		||||
 | 
			
		||||
    &:first-child {
 | 
			
		||||
      .legend-item__value {
 | 
			
		||||
        color: #0e61f5;
 | 
			
		||||
      }
 | 
			
		||||
    .legend-item__chart{
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      width: 14px;
 | 
			
		||||
      height: 14px;
 | 
			
		||||
      background: #2760FF;
 | 
			
		||||
      border-radius: 2px;
 | 
			
		||||
      // margin-right: 8px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:nth-child(2) {
 | 
			
		||||
      .legend-item__value {
 | 
			
		||||
        color: #0fd5d1;
 | 
			
		||||
      }
 | 
			
		||||
   .legend-item__label {
 | 
			
		||||
      margin-left: 8px;
 | 
			
		||||
    }
 | 
			
		||||
    // }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .legend-item__value {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,22 +1,23 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: index.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-16 14:40:15
 | 
			
		||||
    description: 综合驾驶舱
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:25:10
 | 
			
		||||
 * @LastEditTime: 2024-05-08 15:29:28
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="energy-copilot">
 | 
			
		||||
    <Container title="仓库监控·当前" icon="chip2">
 | 
			
		||||
    <Container title="仓库监控·当前" icon="ware">
 | 
			
		||||
      <StockMonitorVue :period="period" />
 | 
			
		||||
    </Container>
 | 
			
		||||
    <Container title="天然气能耗" icon="std">
 | 
			
		||||
    <Container title="天然气能耗" icon="gas">
 | 
			
		||||
      <NatGasVue :period="period" />
 | 
			
		||||
    </Container>
 | 
			
		||||
    <Container title="电能耗" icon="chip">
 | 
			
		||||
    <Container title="电能耗" icon="flash">
 | 
			
		||||
      <ElecCostVue :period="period" />
 | 
			
		||||
    </Container>
 | 
			
		||||
    <Container title="水能耗" icon="cube">
 | 
			
		||||
    <Container title="水能耗" icon="water">
 | 
			
		||||
      <WaterCostVue :period="period" />
 | 
			
		||||
    </Container>
 | 
			
		||||
  </div>
 | 
			
		||||
@@ -73,7 +74,7 @@ export default {
 | 
			
		||||
  display: grid;
 | 
			
		||||
  gap: 16px;
 | 
			
		||||
  grid-template-columns: 1fr 1fr;
 | 
			
		||||
  grid-template-rows: 1fr 1fr;
 | 
			
		||||
  /* grid-template-rows: 1fr 1fr; */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.energy-copilot > div {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,156 +1,84 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: zhp
 | 
			
		||||
 * @Date: 2024-05-07 10:25:10
 | 
			
		||||
 * @LastEditTime: 2024-05-08 10:30:06
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default function ({
 | 
			
		||||
  single = false,
 | 
			
		||||
  color,
 | 
			
		||||
  colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
 | 
			
		||||
  titleValue,
 | 
			
		||||
  subtitle,
 | 
			
		||||
  dataList,
 | 
			
		||||
  previousSum,
 | 
			
		||||
  currentSum,
 | 
			
		||||
  targetSum,
 | 
			
		||||
}) {
 | 
			
		||||
  return {
 | 
			
		||||
    grid: {
 | 
			
		||||
      left: 0,
 | 
			
		||||
      right: 0,
 | 
			
		||||
      bottom: 0,
 | 
			
		||||
      top: 0,
 | 
			
		||||
      containLabel: true,
 | 
			
		||||
  grid: {
 | 
			
		||||
    left: 0,
 | 
			
		||||
    right: 0,
 | 
			
		||||
    bottom: 0,
 | 
			
		||||
    top: 0,
 | 
			
		||||
    containLabel: true,
 | 
			
		||||
  },
 | 
			
		||||
  // tooltip: {},
 | 
			
		||||
  title: {
 | 
			
		||||
    text: titleValue,
 | 
			
		||||
    left: "49%",
 | 
			
		||||
    top: "39%",
 | 
			
		||||
    textAlign: "center",
 | 
			
		||||
    textStyle: {
 | 
			
		||||
      fontWeight: 600,
 | 
			
		||||
      fontSize: 32,
 | 
			
		||||
      color: "#fffd",
 | 
			
		||||
    },
 | 
			
		||||
    tooltip: {},
 | 
			
		||||
    title: {
 | 
			
		||||
      text: titleValue,
 | 
			
		||||
      left: "49%",
 | 
			
		||||
      top: "39%",
 | 
			
		||||
      textAlign: "center",
 | 
			
		||||
      textStyle: {
 | 
			
		||||
        fontWeight: 600,
 | 
			
		||||
        fontSize: 32,
 | 
			
		||||
        color: "#fffd",
 | 
			
		||||
      },
 | 
			
		||||
      subtext: `\u2002${subtitle}\u2002`,
 | 
			
		||||
      subtextStyle: {
 | 
			
		||||
        fontSize: 14,
 | 
			
		||||
        fontWeight: 100,
 | 
			
		||||
        color: "#fffd",
 | 
			
		||||
        align: "right",
 | 
			
		||||
      },
 | 
			
		||||
    subtext: `\u2002${subtitle}\u2002`,
 | 
			
		||||
    subtextStyle: {
 | 
			
		||||
      fontSize: 14,
 | 
			
		||||
      fontWeight: 100,
 | 
			
		||||
      color: "#fffd",
 | 
			
		||||
      align: "right",
 | 
			
		||||
    },
 | 
			
		||||
    series: [
 | 
			
		||||
      // 背景 series
 | 
			
		||||
      {
 | 
			
		||||
        type: "pie",
 | 
			
		||||
        name: "当前目标",
 | 
			
		||||
        radius: ["70%", "85%"],
 | 
			
		||||
        center: ["50%", "52%"],
 | 
			
		||||
        emptyCircleStyle: {
 | 
			
		||||
          color: "#040c5f45",
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      // 数据 series
 | 
			
		||||
      {
 | 
			
		||||
        type: "pie",
 | 
			
		||||
        radius: ["70%", "85%"],
 | 
			
		||||
        center: ["50%", "52%"],
 | 
			
		||||
        avoidLabelOvervlap: false,
 | 
			
		||||
        label: {
 | 
			
		||||
          show: false,
 | 
			
		||||
        },
 | 
			
		||||
  },
 | 
			
		||||
  // legend: {
 | 
			
		||||
  //   top: '5%',
 | 
			
		||||
  //   left: 'center'
 | 
			
		||||
  // },
 | 
			
		||||
  series: [
 | 
			
		||||
    {
 | 
			
		||||
      name: 'Access From',
 | 
			
		||||
      type: 'pie',
 | 
			
		||||
    	// center: ['50%', '40%'],
 | 
			
		||||
			radius: ['60%', '90%'],
 | 
			
		||||
      avoidLabelOverlap: false,
 | 
			
		||||
        labelLine: {
 | 
			
		||||
          show: false,
 | 
			
		||||
        },
 | 
			
		||||
        data: [
 | 
			
		||||
          {
 | 
			
		||||
            value: currentSum,
 | 
			
		||||
            name: "当前累计产出",
 | 
			
		||||
            selected: false,
 | 
			
		||||
            itemStyle: {
 | 
			
		||||
              borderJoin: "round",
 | 
			
		||||
              borderCap: "round",
 | 
			
		||||
              borderWidth: 12,
 | 
			
		||||
              borderRadius: "50%",
 | 
			
		||||
              // color: {
 | 
			
		||||
              //   type: "linear",
 | 
			
		||||
              //   x: 1,
 | 
			
		||||
              //   y: 0,
 | 
			
		||||
              //   x2: 0,
 | 
			
		||||
              //   y2: 1,
 | 
			
		||||
              //   colorStops: single
 | 
			
		||||
              //     ? [
 | 
			
		||||
              //         { offset: 0, color: `${color}11` },
 | 
			
		||||
              //         { offset: 1, color: `${color}` },
 | 
			
		||||
              //       ]
 | 
			
		||||
              //     : [
 | 
			
		||||
              //         { offset: 0, color: "#4CF0E811" },
 | 
			
		||||
              //         { offset: 1, color: "#4CF0E8" },
 | 
			
		||||
              //       ],
 | 
			
		||||
              // },
 | 
			
		||||
            },
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            value:
 | 
			
		||||
              targetSum > currentSum
 | 
			
		||||
                ? targetSum - currentSum
 | 
			
		||||
                : targetSum == 0
 | 
			
		||||
                ? currentSum == 0
 | 
			
		||||
                  ? 1
 | 
			
		||||
                  : 0
 | 
			
		||||
                : 0,
 | 
			
		||||
 | 
			
		||||
            name: "未达成累计",
 | 
			
		||||
            itemStyle: { color: "transparent" },
 | 
			
		||||
            label: { show: false },
 | 
			
		||||
          },
 | 
			
		||||
        ],
 | 
			
		||||
        show: false
 | 
			
		||||
      },
 | 
			
		||||
      // 数据 series2 - 2023累计
 | 
			
		||||
      single
 | 
			
		||||
        ? null
 | 
			
		||||
        : {
 | 
			
		||||
            type: "pie",
 | 
			
		||||
            radius: ["55%", "70%"],
 | 
			
		||||
            center: ["50%", "52%"],
 | 
			
		||||
            avoidLabelOvervlap: false,
 | 
			
		||||
            label: {
 | 
			
		||||
              show: false,
 | 
			
		||||
            },
 | 
			
		||||
            labelLine: {
 | 
			
		||||
              show: false,
 | 
			
		||||
            },
 | 
			
		||||
            data: [
 | 
			
		||||
              {
 | 
			
		||||
                value: previousSum,
 | 
			
		||||
                name: "上期累计产出",
 | 
			
		||||
                selected: false,
 | 
			
		||||
                itemStyle: {
 | 
			
		||||
                  borderJoin: "round",
 | 
			
		||||
                  borderCap: "round",
 | 
			
		||||
                  borderWidth: 12,
 | 
			
		||||
                  borderRadius: "50%",
 | 
			
		||||
                  // color: {
 | 
			
		||||
                  //   type: "linear",
 | 
			
		||||
                  //   x: 1,
 | 
			
		||||
                  //   y: 0,
 | 
			
		||||
                  //   x2: 0,
 | 
			
		||||
                  //   y2: 1,
 | 
			
		||||
                  //   colorStops: [
 | 
			
		||||
                  //     { offset: 0, color: "#1065ff66" },
 | 
			
		||||
                  //     { offset: 1, color: "#1065ff" },
 | 
			
		||||
                  //   ],
 | 
			
		||||
                  // },
 | 
			
		||||
                },
 | 
			
		||||
              },
 | 
			
		||||
              {
 | 
			
		||||
                value:
 | 
			
		||||
                  targetSum > previousSum
 | 
			
		||||
                    ? targetSum - previousSum
 | 
			
		||||
                    : previousSum == 0
 | 
			
		||||
                    ? 1
 | 
			
		||||
                    : 0,
 | 
			
		||||
                name: "-",
 | 
			
		||||
                itemStyle: { color: "transparent" },
 | 
			
		||||
                label: { show: false },
 | 
			
		||||
              },
 | 
			
		||||
            ],
 | 
			
		||||
          },
 | 
			
		||||
    ],
 | 
			
		||||
      label: {
 | 
			
		||||
        show: false
 | 
			
		||||
      },
 | 
			
		||||
      data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
 | 
			
		||||
						name:item.name,
 | 
			
		||||
            value: item.value,
 | 
			
		||||
 | 
			
		||||
						itemStyle:{
 | 
			
		||||
							color:{
 | 
			
		||||
								type: 'linear',
 | 
			
		||||
								x: 0,
 | 
			
		||||
								y: 0,
 | 
			
		||||
								x2: 0,
 | 
			
		||||
								y2: 1,
 | 
			
		||||
								global: false,
 | 
			
		||||
								colorStops:[
 | 
			
		||||
									{offset: 0,color:colors[index%5]},
 | 
			
		||||
									{offset: 1,color:colors[index%5]+'33'}
 | 
			
		||||
								]
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
            }))
 | 
			
		||||
    }
 | 
			
		||||
  ]
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: FtoInvest.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-10 08:59:28
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -73,7 +73,7 @@ export default {
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          dataList = [];
 | 
			
		||||
          dataList[0] = chipInvest?.pervious;
 | 
			
		||||
          dataList[0] = chipInvest?.previous;
 | 
			
		||||
          dataList[1] = chipInvest?.current;
 | 
			
		||||
      }
 | 
			
		||||
      return getTemplate(this.period, dataList);
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: FtoInvest.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-10 08:59:28
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -74,7 +74,7 @@ export default {
 | 
			
		||||
          break;
 | 
			
		||||
        default:
 | 
			
		||||
          dataList = [];
 | 
			
		||||
          dataList[0] = ftoInvest?.pervious;
 | 
			
		||||
          dataList[0] = ftoInvest?.previous;
 | 
			
		||||
          dataList[1] = ftoInvest?.current;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: DoubleRingChart.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-17 11:01:55
 | 
			
		||||
    description: 
 | 
			
		||||
    description:
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
@@ -70,6 +70,7 @@ export default {
 | 
			
		||||
      // [previousValue, currentValue, sumValue?]
 | 
			
		||||
      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
 | 
			
		||||
      if (this.period === "日" || this.period === "周") {
 | 
			
		||||
        console.log(this.period)
 | 
			
		||||
        return [
 | 
			
		||||
          getter.previous[this.factoryId],
 | 
			
		||||
          getter.current[this.factoryId],
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,4 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
<!--
 | 
			
		||||
    filename: index.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2024-04-16 14:40:15
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user