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

Reviewed-on: #25

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() {

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]
+  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]
+  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]
+  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',
+        name: '电压',
-        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',
         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()
+      const cOption = new ChartOption()
-      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+      this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize))
     }
   }
 }

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 TechyBarChart from './TechyBarChart.vue'
-import TechyLineChart from './TechyLineChart.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));
+  justify-content: center;
-  color: #fff9;
+  /* height: calc(48px * var(--beilv)); */
-  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 {

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
+  params[0].axisValue
-              }</h2>
+}</h2>
               <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
-                this.color[0]
+  this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+}"></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]
+  this.color[1]
-              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
+}"></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))
     }
   }

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,32 +60,36 @@ 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]
+  this.color[0]
-              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
+}"></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]
+  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]
+  this.color[2]
-              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
+}"></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]
+  this.color[3]
-              }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
+}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
             </div>
             `
       }
     }
 
-    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))
     }
   }

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('/')
         }