产量和效率

2024-05-29 17:05:55 +08:00
parent 5c05e6c2e4 ab4d7a8e4b
commit dc1667cdb7
83 changed files with 17006 additions and 10610 deletions
--- a/src/views/copilot/components/BarChartBase.vue
+++ b/src/views/copilot/components/BarChartBase.vue
@@ -11,7 +11,7 @@
      <span v-for="item in legend" :key="item.label" class="legend-item"
        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
    </div>
-    <div ref="chart" :style="{ height: '95%',width: width}"></div>
+    <div ref="chart" style="height:94%;width:100%"></div>
  </chart-container>
 </template>

@@ -51,7 +51,7 @@ export default {
  },
  data() {
    return {
-      width: '',
+      width: '100%',
      isFullscreen: false,
      actualOptions: null,
      options: {
@@ -184,16 +184,7 @@ export default {
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isOpen(val) {
      // console.log(val)
-      if (val === true) {
-        console.log('ztl')
-        this.width = 95 + '%'
-        this.canvasReset()
-
-        console.log(this.width)
-      } else {
-        this.watch = 100 + '%'
-        this.canvasReset()
-      }
+      this.canvasReset()
    },
    isFullscreen(val) {
      this.actualOptions.series.map((item) => {
@@ -203,21 +194,14 @@ export default {
      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
      this.initChart(this.actualOptions);
-      if (val === false && this.isOpen === true) {
-        console.log(val)
-        this.width = 97 + '%'
-        this.canvasReset()
-      } else if (val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
-        this.canvasReset()
-      }
      // this.actualOptions.series.map((item) => {
      //   item.barWidth = val ? 18 : 12;
      // });
      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions);
+      // this.initChart(this.actualOptions);
+      this.canvasReset()
    },
    series(val) {
      if (!val) {
--- a/src/views/copilot/components/CopilotHeader.vue
+++ b/src/views/copilot/components/CopilotHeader.vue
@@ -10,15 +10,19 @@
    <section class="menu">
      <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
        @click="() => $emit('update:active', i)" />
+      <div class="type-name"></div>
+      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+        @click="() => $emit('update:than', i)" />
    </section>
    <div class="page-title">{{ active }}驾驶舱</div>
-    <section class="menu">
+    <section class="menu" style="width: 24vw;float: right;">
      <CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
        @click="() => $emit('update:period', i)" />
      <div class="btn-group">
        <button type="button" class="export-btn" />
        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
          @click="toggleFullScreen" />
+        <!-- <button class="times-btn"> {{ times }} </button> -->
      </div>
    </section>
  </div>
@@ -38,14 +42,61 @@ export default {
    period: {
      type: String,
    },
+    than: {
+      type: String,
+    },
  },
  data() {
    return {
+      times:'',
      isFullscreen: false,
    };
  },
+  mounted () {
+    this.getTimes()
+    this.getTimesInterval();
+  },
  computed: {},
  methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 60000);
+    },
+    getTimesInterval() {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+
+        year +
+        '.' +
+        month +
+        '.' +
+      day +
+      "  " + hours +
+      '.' +
+      minutes +
+      '.' +
+      week
+    },
    toggleFullScreen() {
      this.isFullscreen = !this.isFullscreen;
      screenfull.toggle(document.querySelector(".copilot-layout"))
@@ -68,10 +119,11 @@ export default {
  display: flex;
  gap: 12px;
  align-items: center;
+  justify-content: space-between;
 }

 .copilot-header > section {
-  width: 24vw;
+  width: 26vw;
  display: flex;
  align-items: center;
  gap: 8px;
@@ -85,6 +137,17 @@ export default {
  cursor: pointer;
 }

+.times-btn {
+  width: 240px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  line-height: 30px;
+  float: right;
+  /* margin-bottom: 20px; */
+}
 .export-btn {
  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
    no-repeat;
@@ -98,9 +161,20 @@ export default {
  background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
    no-repeat;
 }
-
+    .type-name {
+      /* content: ""; */
+      display: inline-block;
+      width: 1px;
+    height: 59px;
+    border: 1px solid;
+    opacity: 0.9;
+    border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
+      /* position: absolute; */
+      /* left: 0; */
+      /* top: 10px; */
+    }
 .page-title {
-  flex: 1;
+  width: 25vw;
  font-size: 54px;
  line-height: 70px;
  letter-spacing: 5px;
@@ -108,5 +182,6 @@ export default {
  color: #6db6ff;
  text-align: center;
  user-select: none;
+  background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
 }
 </style>
--- a/src/views/copilot/components/FactoryDataHeader.vue
+++ b/src/views/copilot/components/FactoryDataHeader.vue
@@ -1,39 +1,30 @@
 <template>
  <div class="factory-header">
    <section class="menu1">
-      <FactorySelect
-        :companyName="companyName"
-        :companyId="companyId"
-        @updateCompany="updateCompany"
-      />
-    </section>
-    <section class="menu2">
-      <CopilotButton
-        v-for="i in ['日', '周', '月', '年']"
-        :key="i"
-        :label="i"
-        :active="i === period"
-        @click="() => $emit('update:period', i)"
-      />
+      <!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
+        @click="() => $emit('update:active', i)" />
+      <div class="type-name"></div> -->
+      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
+        @click="() => $emit('update:than', i)" />
      <div class="btn-group">
        <button type="button" class="export-btn" />
-        <button
-          type="button"
-          class="fullscreen-btn"
-          :class="[isFullscreen ? 'exit-fullscreen' : '']"
-          @click="toggleFullScreen"
-        />
+        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
+          @click="toggleFullScreen" />
      </div>
    </section>
    <div class="page-title">{{ companyName }}</div>
+    <section class="menu2">
+      <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
+        @click="() => $emit('update:period', i.id)" />
+    </section>
  </div>
 </template>

 <script>
-import CopilotButton from "./button.vue";
+// import CopilotButton from "./button.vue";
 import FactorySelect from "./FactorySelect.vue";
 import screenfull from "screenfull";
-
+import CopilotButton from "./button.vue";
 export default {
  name: "FactoryDataHeader",
  components: { CopilotButton, FactorySelect },
@@ -42,15 +33,24 @@ export default {
      type: String,
    },
    companyId: {
-      type: String,
+      type: Number,
    },
    period: {
+      type: Number,
+    },
+    than: {
      type: String,
    },
  },
  data() {
    return {
      isFullscreen: false,
+      dataList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
    };
  },
  computed: {},
@@ -84,13 +84,13 @@ export default {
 }

 .factory-header > .menu1 {
-  width: 24vw;
-  /* display: flex;
+  width: 20vw;
+  display: flex;
  align-items: center;
-  gap: 8px; */
+  gap: 8px;
 }
 .factory-header > .menu2 {
-  width: 30vw;
+  width: 26vw;
  display: flex;
  align-items: center;
  gap: 8px;
@@ -119,13 +119,14 @@ export default {
 }

 .page-title {
-  flex: 1;
+  flex: 1 1 auto;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: 5px;
  font-family: 优设标题黑;
  color: #6db6ff;
-  text-align: right;
+  text-align: center;
  user-select: none;
+  background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
 }
 </style>
--- a/src/views/copilot/components/FactorySelect.vue
+++ b/src/views/copilot/components/FactorySelect.vue
@@ -26,20 +26,20 @@ export default {
      type: String,
    },
    companyId: {
-      type: String,
+      type: Number,
    },
  },
  data() {
    return {
      isOpen: false,
      company: [
-        { id: "1", name: "瑞昌中建材光电材料有限公司" },
-        { id: "2", name: "邯郸中建材光电材料有限公司" },
-        { id: "3", name: "株洲中建材光电材料有限公司" },
-        { id: "4", name: "佳木斯中建材光电材料有限公司" },
-        { id: "5", name: "成都中建材光电材料有限公司" },
-        { id: "6", name: "凯盛中建材光电材料有限公司" },
-        { id: "7", name: "蚌埠中建材光电材料有限公司" },
+        { id: 0, name: "瑞昌中建材光电材料有限公司" },
+        { id: 1, name: "邯郸中建材光电材料有限公司" },
+        { id: 2, name: "株洲中建材光电材料有限公司" },
+        { id: 3, name: "佳木斯中建材光电材料有限公司" },
+        { id: 4, name: "成都中建材光电材料有限公司" },
+        { id: 5, name: "凯盛中建材光电材料有限公司" },
+        { id: 6, name: "蚌埠中建材光电材料有限公司" },
      ],
    };
  },
--- a/src/views/copilot/components/LineChartBase.vue
+++ b/src/views/copilot/components/LineChartBase.vue
@@ -367,7 +367,7 @@ export default {
        this.canvasReset()
        console.log(this.width)
      } else {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()

      }
@@ -378,7 +378,7 @@ export default {
        this.width = 97 + '%'
        this.canvasReset()
      } else if (val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()

      }
--- a/src/views/copilot/components/LineChartWater.vue
+++ b/src/views/copilot/components/LineChartWater.vue
@@ -365,7 +365,7 @@ export default {

        console.log(this.width)
      } else {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()
      }
    },
@@ -376,7 +376,7 @@ export default {
        this.width = 97 + '%'
        this.canvasReset()
      } else if(val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()
      }
      // this.actualOptions.series.map((item) => {
--- a/src/views/copilot/components/NotMsg.vue
+++ b/src/views/copilot/components/NotMsg.vue
@@ -0,0 +1,27 @@
+<template>
+	<div class="notmsg">暂无数据</div>
+</template>
+
+<script>
+export default {
+	name: 'NotMsg',
+	components: {},
+	data() {
+		return {
+		};
+	},
+	computed: {
+	},
+	methods: {
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.notmsg {
+	padding-top: 72px;
+	color: rgba(255, 255, 255, 0.4);
+	text-align: center;
+	font-size: 24px;
+}
+</style>
--- a/src/views/copilot/components/ftoBarChartBase.vue
+++ b/src/views/copilot/components/ftoBarChartBase.vue
@@ -0,0 +1,298 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-23 15:49:14
+ * @LastEditTime: 2024-05-29 10:56:21
+ * @LastEditors: zhp
+ * @Description:
+-->
+<!--
+    filename: BarChartBase.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="bar-chart-base">
+    <div class="legend">
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+    </div>
+    <div ref="ftoChart" style="height:94%;width:100%"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+import { debounce } from "@/utils/debounce";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        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: "", // this.series[0].name,
+            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,
+          },
+          {
+            name: "", // this.series[1].name,
+            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: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isOpen(val) {
+      // console.log(val)
+      this.canvasReset()
+    },
+    isFullscreen(val) {
+      this.actualOptions.series.map((item) => {
+        item.barWidth = val ? 18 : 12;
+      });
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.actualOptions);
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.initChart(this.actualOptions);
+      this.canvasReset()
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        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;
+      actualOptions.series[1].name = val[1].name;
+      this.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.ftoChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>
--- a/src/views/copilot/components/gasBarChartBase.vue
+++ b/src/views/copilot/components/gasBarChartBase.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-13 14:08:51
- * @LastEditTime: 2024-05-17 09:37:01
+ * @LastEditTime: 2024-05-23 15:18:53
 * @LastEditors: zhp
 * @Description:
 -->
@@ -191,7 +191,7 @@ export default {
        console.log(this.width)
      } else {
        console.log('ryf')
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()
      }
    },
@@ -201,7 +201,7 @@ export default {
        this.width = 97 + '%'
        this.canvasReset()
      } else if (val === false && this.isOpen === false) {
-        this.watch = 100 + '%'
+        this.width = 100 + '%'
        this.canvasReset()
      }
      // this.actualOptions.series.map((item) => {