From bda097fe8cbbd213f6253bf2fa015d4c8c9552d2 Mon Sep 17 00:00:00 2001
From: gtz217 <535262213@qq.com>
Date: Fri, 26 Nov 2021 17:15:20 +0800
Subject: [PATCH] update

---
 package-lock.json                   |  22 ++
 package.json                        |   1 +
 src/components/Charts/LineChart.vue |  32 +--
 src/components/Charts/PieChart.vue  |  13 +-
 src/components/Charts/RingChart.vue | 112 ++++++++
 src/views/energy/electric.vue       | 405 +++++++++++++++++++++++++++-
 6 files changed, 535 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Charts/RingChart.vue

diff --git a/package-lock.json b/package-lock.json
index 7202edb..212ea45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3834,6 +3834,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz",
+      "integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -19252,6 +19261,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz",
+      "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -20978,6 +20992,14 @@
       "version": "20.2.9",
       "resolved": "https://registry.nlark.com/yargs-parser/download/yargs-parser-20.2.9.tgz?cache=0&sync_timestamp=1624233514145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyargs-parser%2Fdownload%2Fyargs-parser-20.2.9.tgz",
       "integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4="
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
+      "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
+      "requires": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index a0915f8..f49e47e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "0.17.1",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",
+    "echarts": "^5.2.2",
     "element-ui": "2.8.2",
     "gulp": "3.9.1",
     "gulp-concat": "2.6.1",
diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
index 3a4e26b..ea9a990 100644
--- a/src/components/Charts/LineChart.vue
+++ b/src/components/Charts/LineChart.vue
@@ -6,21 +6,6 @@
           <div id="J_chartLineBox" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="24">
-        <el-card>
-          <div id="J_chartBarBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card>
-          <div id="J_chartPieBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card>
-          <div id="J_chartScatterBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -30,32 +15,17 @@
   export default {
     data () {
       return {
-        chartLine: null,
-        chartBar: null,
-        chartPie: null,
-        chartScatter: null
+        chartLine: null
       }
     },
     mounted () {
       this.initChartLine()
-      this.initChartBar()
-      this.initChartPie()
-      this.initChartScatter()
     },
     activated () {
       // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
       if (this.chartLine) {
         this.chartLine.resize()
       }
-      if (this.chartBar) {
-        this.chartBar.resize()
-      }
-      if (this.chartPie) {
-        this.chartPie.resize()
-      }
-      if (this.chartScatter) {
-        this.chartScatter.resize()
-      }
     },
     methods: {
       // 折线图
diff --git a/src/components/Charts/PieChart.vue b/src/components/Charts/PieChart.vue
index cc359db..477c784 100644
--- a/src/components/Charts/PieChart.vue
+++ b/src/components/Charts/PieChart.vue
@@ -1,12 +1,7 @@
 <template>
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-card>
-          <div id="J_chartPieBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
+    <div class="mod-demo-echarts">
+      <div id="J_chartPieBox" class="chart-box"></div>
+    </div>
 </template>
 
 <script>
@@ -121,7 +116,7 @@
       }
     }
     .chart-box {
-      min-height: 400px;
+      min-height: 120px;
     }
   }
 </style>
diff --git a/src/components/Charts/RingChart.vue b/src/components/Charts/RingChart.vue
new file mode 100644
index 0000000..a433bb1
--- /dev/null
+++ b/src/components/Charts/RingChart.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-11-22 19:03:01
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-11-26 11:31:58
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue
+-->
+<template>
+  <div class="mod-demo-echarts">
+    <div :id="'J_chartRingBox' + id" class="chart-box"></div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    props: {
+      id: {
+        type: Number,
+        default: 1
+      },
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    },
+    data () {
+      return {
+        chartRing: null
+      }
+    },
+    mounted () {
+      this.initChartRing()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartRing) {
+        this.chartRing.resize()
+      }
+    },
+    methods: {
+      // 折线图
+      initChartRing () {
+        var option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            top: '5%',
+            left: 'center'
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 1048, name: 'Search Engine' },
+                { value: 735, name: 'Direct' },
+                { value: 580, name: 'Email' },
+                { value: 484, name: 'Union Ads' },
+                { value: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        }
+        this.chartRing = echarts.init(document.getElementById('J_chartRingBox' + this.id))
+        this.chartRing.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartRing.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 120px;
+    }
+  }
+</style>
diff --git a/src/views/energy/electric.vue b/src/views/energy/electric.vue
index abc1a40..3ac199d 100644
--- a/src/views/energy/electric.vue
+++ b/src/views/energy/electric.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-11-25 19:30:06
+ * @LastEditTime: 2021-11-26 16:53:20
  * @Description:
 -->
 <template>
@@ -49,17 +49,28 @@
           />
         </el-row>
       </el-col>
-      <el-col style="height: 500px">
-        <chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
-      </el-col>
-      
       <el-col style="height: 500px">
         <chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
       </el-col>
       <el-col style="margin: 20px 0">
         <el-tabs type="border-card">
           <el-tab-pane v-for="item in yaoluList" :key="item.id">
-            <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+            <el-row style="width: 200px; height: 120px" slot="label">
+              <el-col :span="12">
+                <el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
+                  {{ item.name }}(KW)
+                </el-row>
+                <el-row style="line-height: 24px; height: 24px; font-size: 18px; font-weight: bold">
+                  {{ item.value }}KW
+                </el-row>
+                <el-row style="line-height: 24px; height: 24px; font-size: 14px; font-weight: bold">
+                  {{ item.percent }}%
+                </el-row>
+              </el-col>
+              <el-col :span="12">
+                <ring-chart :id="item.id" />
+              </el-col>
+            </el-row>
             我的行程
           </el-tab-pane>
         </el-tabs>
@@ -70,6 +81,7 @@
 
 <script>
 import Chart from '@/components/Charts/MixChart'
+import ringChart from '@/components/Charts/RingChart'
 
 // 日发电数据
 const eleDayList = [
@@ -278,16 +290,382 @@ const yaoluList = [
   {
     id: 1,
     name: '窑炉1',
-    value: 56,
+    value: 63,
+    percent: 11,
     data: [
-      {  }
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 2,
+    name: '窑炉2',
+    value: 44,
+    percent: 8,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 3,
+    name: '窑炉3',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 4,
+    name: '窑炉4',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 5,
+    name: '窑炉5',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 6,
+    name: '窑炉6',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 7,
+    name: '窑炉7',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 8,
+    name: '窑炉8',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 9,
+    name: '窑炉9',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 10,
+    name: '窑炉10',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
+    ]
+  },
+  {
+    id: 11,
+    name: '窑炉11',
+    value: 56,
+    percent: 9,
+    data: [
+      { time: '0:00', value: 24 },
+      { time: '2:00', value: 43 },
+      { time: '4:00', value: 33 },
+      { time: '6:00', value: 25 },
+      { time: '8:00', value: 44 },
+      { time: '10:00', value: 46 },
+      { time: '12:00', value: 16 },
+      { time: '14:00', value: 47 },
+      { time: '16:00', value: 86 },
+      { time: '18:00', value: 22 },
+      { time: '20:00', value: 25 },
+      { time: '22:00', value: 27 }
+    ],
+    lastData: [
+      { time: '0:00', value: 54 },
+      { time: '2:00', value: 13 },
+      { time: '4:00', value: 63 },
+      { time: '6:00', value: 85 },
+      { time: '8:00', value: 14 },
+      { time: '10:00', value: 26 },
+      { time: '12:00', value: 56 },
+      { time: '14:00', value: 37 },
+      { time: '16:00', value: 36 },
+      { time: '18:00', value: 12 },
+      { time: '20:00', value: 35 },
+      { time: '22:00', value: 17 }
     ]
   }
 ]
 
 export default {
   name: 'electric',
-  components: { Chart },
+  components: { Chart, ringChart },
   data () {
     return {
       eleDayList,
@@ -348,4 +726,11 @@ export default {
 }
 </style>
 
-
+<style lang="scss">
+.el-tabs__item{
+  height: 120px;
+}
+.el-tabs__nav-next, .el-tabs__nav-prev {
+  line-height: 120px;
+}
+</style>