Merge pull request 'lb' (#25 ) from lb into master

Reviewed-on: #25
update remote url
2022-12-16 09:02:44 +08:00 · 2022-12-16 08:38:32 +08:00 · 2022-12-15 16:50:59 +08:00 · 2022-12-05 11:22:18 +08:00 · 2022-12-02 16:44:12 +08:00
6 changed files with 177 additions and 83 deletions
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -248,7 +248,8 @@ export default {
      const password = Cookie.get('password')

      if (username && password) {
-        window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
+        window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
+        // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
      }
    },
    winBlur() {
--- 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>
+}"></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>
+}"></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>
+}"></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">
@ -79,30 +79,29 @@
      </TechyBox>
    </div>

-    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
+    <!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
      <TechyBox class="elec-consume">
        <div class="header-part">
          <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
          <span>发电</span>
        </div>
        <div style="height: 100%; flex: 1; overflow: hidden">
-          <!-- <FadianChart /> -->
          <DianChart id="fa-dian" key="fa-dian" />
        </div>
      </TechyBox>
-    </div>
+    </div> -->
  </div>
 </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 {}
  },
@ -153,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() {
@ -74,16 +75,18 @@ class ChartOption {
      }
    }

-    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,13 +9,14 @@
          list: [32, 65, 65, 54, 37, 77]
        }
      ]" /> -->
-  <div class="techy-chart" ref="realtimeLineChart"></div>
+  <div ref="realtimeLineChart" class="techy-chart" />
 </template>

 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
+import moment from 'moment'

 class ChartOption {
  constructor() {
@ -59,7 +60,9 @@ 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>
@ -77,14 +80,16 @@ class ChartOption {
      }
    }

-    let d = new Date()
    this.xAxis = {
      type: 'category',
      data: Array(7)
        .fill(1)
        .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 },
      axisLabel: {
        color: '#fff9',
@ -377,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/components/TechyHeader.vue
+++ b/src/views/3DOverview/components/TechyHeader.vue
@ -1,6 +1,6 @@
 <template>
  <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <img class="logo-img" src="./logo.png" alt="cnbm">
    <span class="techy-header__title">{{ headTitle }}</span>

    <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
@ -90,7 +90,8 @@ export default {
        const password = Cookie.get('password')

        if (username && password) {
-          window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
+          window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
+          // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
        } else {
          this.$router.push('/')
        }
Author	SHA1	Message	Date
高天泽	4d7d2e0c3d	Merge pull request 'lb' (#25 ) from lb into master Reviewed-on: #25	2022-12-16 09:02:44 +08:00
lb	50670208c1	update remote url	2022-12-16 08:38:32 +08:00
SanDiego	f0714123b7	update gotoHome	2022-12-15 16:50:59 +08:00
lb	4200801c7b	update公用工程	2022-12-05 11:22:18 +08:00
lb	f4ba65a25f	update 实时产量和能耗时间为近7天	2022-12-02 16:44:12 +08:00