update公用工程

2022-12-05 11:22:18 +08:00 · 2022-12-05 11:22:18 +08:00 · 4200801c7b
commit 4200801c7b
parent f4ba65a25f
5 changed files with 167 additions and 79 deletions
--- a/src/views/3DOverview/components/DianChart.vue
+++ b/src/views/3DOverview/components/DianChart.vue
@ -6,6 +6,7 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'

 class ChartOption {
  constructor() {
@ -50,16 +51,18 @@ class ChartOption {
      formatter: params => {
        return `
            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
-              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
+              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
+  params[0].axisValue
+}</h2>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+  this.color[2]
+}"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span>
            </div>
            `
      }
@ -67,7 +70,15 @@ class ChartOption {

    this.xAxis = {
      type: 'category',
-      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      // boundaryGap: false,
+      data: Array(7)
+        .fill(1)
+        .map((_, idx) => {
+          const d = moment()
+          const day = idx ? d.subtract(idx, 'd') : d
+          return day.format('M-DD')
+        })
+        .reverse(),
      axisTick: { show: false },
      axisLabel: {
        color: '#fff9',
@ -100,10 +111,11 @@ class ChartOption {
        },
        axisLabel: {
          color: '#fff9',
-          fontSize: 10
+          fontSize: 10,
+          formatter: '{value}%'
        },
        splitLine: {
-          show: true,
+          show: false,
          lineStyle: {
            color: '#fff1',
            type: 'dotted'
@ -133,7 +145,7 @@ class ChartOption {
        splitLine: {
          show: true,
          lineStyle: {
-            color: '#fff1',
+            color: '#fff3',
            type: 'dotted'
          }
        }
@ -149,10 +161,13 @@ class ChartOption {
            width: 1
          }
        },
+        // min: 'dataMin',
+        min: 20,
+        max: 50,
        type: 'value',
        splitNumber: 4,
        splitLine: {
-          show: true,
+          show: false,
          lineStyle: {
            color: '#fff1',
            type: 'dotted'
@ -160,41 +175,84 @@ class ChartOption {
        },
        axisLabel: {
          color: '#fff9',
-          fontSize: 10
+          fontSize: 10,
+          formatter: '{value}°C'
        }
      }
    ]

    this.series = [
      {
-        name: 'ABC三相电压/v',
-        type: 'line',
-        yAxisIndex: 0,
-        // smooth: true,
-        emphasis: {
-          focus: 'series'
-        },
-        data: Array(12)
-          .fill(1)
-          .map(_ => Random.integer(30, 100)),
-        symbol: 'circle',
-        symbolSize: 0.2,
-        showSymbol: false
-      },
-      {
-        name: 'ABC三相电流/a',
+        name: '电压',
        type: 'line',
        yAxisIndex: 1,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
-        data: Array(12)
+        data: Array(7)
          .fill(1)
-          .map(_ => Random.integer(30, 100)),
+          // .map(_ => Random.integer(30, 100)),
+          .map(_ => Random.integer(360, 390)),
        symbol: 'circle',
        symbolSize: 0.2,
-        showSymbol: false
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#E0209466' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      },
+      {
+        name: '电流',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(7)
+          .fill(1)
+          .map(_ => Random.integer(76, 85)),
+        // .map(_ => Random.integer(30, 100)),
+        symbol: 'circle',
+        symbolSize: 0.2,
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#F0D63C66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
      },
      {
        name: '电缆温度',
@ -204,12 +262,33 @@ class ChartOption {
        emphasis: {
          focus: 'series'
        },
-        data: Array(12)
+        data: Array(7)
          .fill(1)
-          .map(_ => Random.integer(30, 100)),
+          // .map(_ => Random.integer(20, 55)),
+          .map(_ => Random.integer(36, 45)),
        symbol: 'circle',
        symbolSize: 0.2,
-        showSymbol: false
+        showSymbol: false,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#1A99FF66' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
      }
    ]
  }
@ -232,7 +311,7 @@ class ChartOption {
        if (key === 'colorStops') newOption[key] = option[key]
        else if (
          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
-          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+          ['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
        ) {
          newOption[key] = calcSize(option[key])
        } else newOption[key] = this.optionFilter(option[key], calcSize)
@ -291,8 +370,8 @@ export default {
      return num * beilv
    },
    setChartOption() {
-      let chartOption = new ChartOption()
-      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+      const cOption = new ChartOption()
+      this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize))
    }
  }
 }
--- a/src/views/3DOverview/components/LeftContentPublicConsume.vue
+++ b/src/views/3DOverview/components/LeftContentPublicConsume.vue
@ -1,9 +1,9 @@
 <template>
  <div class="public-consume__inner">
-    <div>
+    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
      <TechyBox class="water-consume">
        <div class="header-part">
-          <img src="./assets/consume/s.png" width="32" height="32" alt="water" />
+          <img src="./assets/consume/s.png" width="32" height="32" alt="water">
          <span>水</span>
        </div>
        <div class="content-part">
@ -35,10 +35,10 @@
      </TechyBox>
    </div>

-    <div>
+    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
      <TechyBox class="gas-consume">
        <div class="header-part  ">
-          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi" />
+          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
          <span>气</span>
        </div>
        <div class="content-part">
@ -67,10 +67,10 @@
      </TechyBox>
    </div>

-    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
+    <div style="min-height: calc(168px * var(--beilv)); flex: 1;">
      <TechyBox class="dian-consume">
        <div class="header-part">
-          <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
+          <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
          <span>电</span>
        </div>
        <div style="height: 100%; flex: 1; overflow: hidden">
@ -94,14 +94,14 @@
 </template>

 <script>
-import TechyBarChart from './TechyBarChart.vue'
-import TechyLineChart from './TechyLineChart.vue'
+// import TechyBarChart from './TechyBarChart.vue'
+// import TechyLineChart from './TechyLineChart.vue'
 import TechyBox from './TechyBox.vue'
-import FadianChart from './FadianChart.vue'
+// import FadianChart from './FadianChart.vue'
 import DianChart from './DianChart.vue'
 export default {
  name: 'LeftContentPublicConsume',
-  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
+  components: { TechyBox, DianChart },
  data() {
    return {}
  },
@ -152,17 +152,23 @@ export default {
 .header-part > span {
  color: #fffc;
  font-size: calc(12px * var(--beilv));
+  line-height: calc(12px * var(--beilv));
  white-space: nowrap;
 }

 .content-part {
  display: flex;
  flex-direction: column;
-  font-size: calc(12px * var(--beilv));
-  color: #fff9;
-  height: calc(48px * var(--beilv));
+  justify-content: center;
+  /* height: calc(48px * var(--beilv)); */
  flex: 1 1;
-  gap: calc(4px * var(--beilv));
+  gap: calc(10px * var(--beilv));
+  color: #fff9;
+}
+
+.content-part span.name {
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
 }

 .row {
--- a/src/views/3DOverview/components/RightContentProductRate.vue
+++ b/src/views/3DOverview/components/RightContentProductRate.vue
@ -6,6 +6,7 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'

 class ChartOption {
  constructor() {
@ -61,29 +62,31 @@ class ChartOption {
        return `
            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
-                params[0].axisValue
-              }</h2>
+  params[0].axisValue
+}</h2>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
            </div>
            `
      }
    }

-    let d = new Date()
    this.xAxis = {
      type: 'category',
-      boundaryGap: false,
+      // boundaryGap: false,
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: Array(7)
        .fill(0)
        .map((_, idx) => {
-          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
-        }),
+          const d = moment()
+          const day = idx ? d.subtract(idx, 'd') : d
+          return day.format('M-DD')
+        })
+        .reverse(),
      axisTick: {
        show: false
      },
@ -244,7 +247,7 @@ export default {
      return num * beilv
    },
    setChartOption() {
-      let chartOption = new ChartOption()
+      const chartOption = new ChartOption()
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
    }
  }
--- a/src/views/3DOverview/components/RightContentRealtimeProduction.vue
+++ b/src/views/3DOverview/components/RightContentRealtimeProduction.vue
@ -9,7 +9,7 @@
          list: [32, 65, 65, 54, 37, 77]
        }
      ]" /> -->
-  <div class="techy-chart" ref="realtimeLineChart"></div>
+  <div ref="realtimeLineChart" class="techy-chart" />
 </template>

 <script>
@ -61,20 +61,20 @@ class ChartOption {
        return `
            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
-                params[0].axisValue
-              }</h2>
+  params[0].axisValue
+}</h2>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+  this.color[0]
+}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+  this.color[1]
+}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+  this.color[2]
+}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[3]
-              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+  this.color[3]
+}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
            </div>
            `
      }
@ -85,7 +85,7 @@ class ChartOption {
      data: Array(7)
        .fill(1)
        .map((_, idx) => {
-          let d = new moment()
+          const d = moment()
          const day = idx ? d.subtract(idx, 'd') : d
          return day.format('M-DD')
        })
@ -382,7 +382,7 @@ export default {
      return num * beilv
    },
    setChartOption() {
-      let chartOption = new ChartOption()
+      const chartOption = new ChartOption()
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
    }
  }
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@ -1,9 +1,9 @@
 <template>
  <div id="v3d-outter" ref="v3d-outter">
-    <!-- <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
+    <div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
    <V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
-    <div v-if="showPage" id="v3d-main-content"> -->
-      <div v-if="true" id="v3d-main-content">
+    <div v-if="showPage" id="v3d-main-content">
+      <!-- <div v-if="true" id="v3d-main-content"> -->
      <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />

      <section id="techy-body-part">