Merge branch 'master' of http://git.picaiba.com/mt-ck/mt-qj-wms-ui

src/components/Charts/MixChart.vue

@@ -29,23 +29,31 @@ export default {
       type: String,
       default: 'Mix-Chart'
     },
-    nameData: {
-      type: Array,
-      default: []
-    },
     dataList: {
       type: Array,
-      default: []
+      default: () => {
+        return []
+      }
+    },
+    lastDataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    chartType: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   data () {
     return {
-      chart: null
+      chart: null,
+      series: []
     }
   },
-  mounted () {
-    this.initChart()
-  },
   beforeDestroy () {
     if (!this.chart) {
       return
@@ -53,20 +61,232 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  watch: {
+    dataList: {
+      handler (val) {
+        if (val) {
+          this.series = []
+          if (this.chartType.indexOf('柱状') >= 0) {
+            this.series.push({
+              name: '本' + this.title,
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(255,144,128,1)',
+                  label: {
+                    show: true,
+                    textStyle: {
+                      color: '#fff'
+                    },
+                    position: 'insideTop',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+            this.series.push({
+              name: '上' + this.title,
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(0,191,183,1)',
+                  label: {
+                    show: true,
+                    textStyle: {
+                      color: '#fff'
+                    },
+                    position: 'insideTop',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.lastDataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          if (this.chartType.indexOf('折线') >= 0) {
+            this.series.push({
+              name: '本' + this.title,
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(255,144,128,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+            this.series.push({
+              name: '上' + this.title,
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(0,191,183,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.lastDataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          this.initChart()
+        }
+      },
+      deep: true
+    },
+    chartType: {
+      handler (val) {
+        console.log(val)
+        if (val.length) {
+          this.series = []
+          if (val.indexOf('柱状') >= 0) {
+            this.series.push({
+              name: '本' + this.title,
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(255,144,128,1)',
+                  label: {
+                    show: true,
+                    textStyle: {
+                      color: '#fff'
+                    },
+                    position: 'insideTop',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+            this.series.push({
+              name: '上' + this.title,
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(0,191,183,1)',
+                  label: {
+                    show: true,
+                    textStyle: {
+                      color: '#fff'
+                    },
+                    position: 'insideTop',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.lastDataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          if (val.indexOf('折线') >= 0) {
+            this.series.push({
+              name: '本' + this.title,
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(255,144,128,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+            this.series.push({
+              name: '上' + this.title,
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: 'rgba(0,191,183,1)',
+                  barBorderRadius: 0,
+                  label: {
+                    show: true,
+                    position: 'top',
+                    formatter (p) {
+                      return p.value > 0 ? p.value : ''
+                    }
+                  }
+                }
+              },
+              data: this.lastDataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          this.initChart()
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     initChart () {
+      if (this.chart) {
+        this.chart.dispose()
+      }
       this.chart = echarts.init(document.getElementById(this.id))
-      const xData = (function () {
-        const data = []
-        for (let i = 1; i < 13; i++) {
-          data.push(i + 'month')
-        }
-        return data
-      })()
+      const xData = this.dataList.map(item => {
+        return item.time
+      })
       this.chart.setOption({
         backgroundColor: '#344b58',
         title: {
-          text: this.title,
+          text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.title + '用电量',
           x: '20',
           top: '20',
           textStyle: {
@@ -102,7 +322,9 @@ export default {
           textStyle: {
             color: '#90979c'
           },
-          data: this.nameData
+          data: this.series.map(item => {
+            return item.name
+          })
         },
         calculable: true,
         xAxis: [
@@ -156,8 +378,8 @@ export default {
             height: 30,
             xAxisIndex: [0],
             bottom: 30,
-            start: 10,
-            end: 80,
+            start: 0,
+            end: 100,
             handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
             handleSize: '110%',
             handleStyle: {
@@ -176,71 +398,7 @@ export default {
             end: 35
           }
         ],
-        series: [
-          {
-            name: 'female',
-            type: 'bar',
-            stack: 'total',
-            barMaxWidth: 35,
-            barGap: '10%',
-            itemStyle: {
-              normal: {
-                color: 'rgba(255,144,128,1)',
-                label: {
-                  show: true,
-                  textStyle: {
-                    color: '#fff'
-                  },
-                  position: 'insideTop',
-                  formatter (p) {
-                    return p.value > 0 ? p.value : ''
-                  }
-                }
-              }
-            },
-            data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
-          },
-          {
-            name: 'male',
-            type: 'bar',
-            stack: 'total',
-            itemStyle: {
-              normal: {
-                color: 'rgba(0,191,183,1)',
-                barBorderRadius: 0,
-                label: {
-                  show: true,
-                  position: 'top',
-                  formatter (p) {
-                    return p.value > 0 ? p.value : ''
-                  }
-                }
-              }
-            },
-            data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
-          },
-          {
-            name: 'average',
-            type: 'line',
-            stack: 'total',
-            symbolSize: 10,
-            symbol: 'circle',
-            itemStyle: {
-              normal: {
-                color: 'rgba(252,230,48,1)',
-                barBorderRadius: 0,
-                label: {
-                  show: true,
-                  position: 'top',
-                  formatter (p) {
-                    return p.value > 0 ? p.value : ''
-                  }
-                }
-              }
-            },
-            data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
-          }
-        ]
+        series: this.series
       })
     }
   }

src/views/energy/electric.vue

@@ -2,21 +2,341 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-11-22 19:36:14
+ * @LastEditTime: 2021-11-25 19:30:06
  * @Description:
 -->
 <template>
   <div class="chart-container">
-    <chart height="100%" width="100%" />
+    <el-row>
+      <el-row style="margin: 20px 0" :gutter="20">
+        <el-col>
+          <h3>用电分析</h3>
+        </el-col>
+      </el-row>
+      <el-row style="margin: 20px 0" :gutter="20">
+        <el-col style="width: 300px">
+          <el-card>
+            <p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
+            <p>昨日用电量(KW)：1145</p>
+          </el-card>
+        </el-col>
+        <el-col style="width: 300px">
+          <el-card>
+            <p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p>
+            <p>昨日用电流（A）：1145</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-row>
+    <el-row style="margin: 20px 0" :gutter="20">
+      <el-col style="margin: 20px 0">
+        <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+          <el-checkbox-button label="折线" />
+          <el-checkbox-button label="柱状" />
+        </el-checkbox-group>
+        <el-row style="float: right">
+          <el-radio-group v-model="eleType" @change="changeEleType">
+            <el-radio-button label="日"></el-radio-button>
+            <el-radio-button label="周"></el-radio-button>
+            <el-radio-button label="月"></el-radio-button>
+            <el-radio-button label="年"></el-radio-button>
+          </el-radio-group>
+          <el-date-picker
+            v-model="date"
+            :type="datePickerType[eleType].type"
+            :format="datePickerType[eleType].format"
+            :placeholder="'选择' + datePickerType[eleType].placeholder"
+          />
+        </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-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import Chart from '@/components/Charts/MixChart'
 
+// 日发电数据
+const eleDayList = [
+  { time: '01:00', value: 22 },
+  { time: '02:00', value: 12 },
+  { time: '03:00', value: 32 },
+  { time: '04:00', value: 52 },
+  { time: '05:00', value: 22 },
+  { time: '06:00', value: 12 },
+  { time: '07:00', value: 42 },
+  { time: '08:00', value: 32 },
+  { time: '09:00', value: 22 },
+  { time: '10:00', value: 12 },
+  { time: '11:00', value: 12 },
+  { time: '12:00', value: 52 },
+  { time: '13:00', value: 62 },
+  { time: '14:00', value: 62 },
+  { time: '15:00', value: 32 },
+  { time: '16:00', value: 22 },
+  { time: '17:00', value: 12 },
+  { time: '18:00', value: 2 },
+  { time: '19:00', value: 92 },
+  { time: '20:00', value: 12 },
+  { time: '21:00', value: 52 },
+  { time: '22:00', value: 26 },
+  { time: '23:00', value: 21 },
+  { time: '24:00', value: 28 }
+]
+
+// 前日发电数据
+const lastEleDayList = [
+  { time: '01:00', value: 22 },
+  { time: '02:00', value: 62 },
+  { time: '03:00', value: 23 },
+  { time: '04:00', value: 25 },
+  { time: '05:00', value: 72 },
+  { time: '06:00', value: 21 },
+  { time: '07:00', value: 24 },
+  { time: '08:00', value: 23 },
+  { time: '09:00', value: 20 },
+  { time: '10:00', value: 14 },
+  { time: '11:00', value: 18 },
+  { time: '12:00', value: 72 },
+  { time: '13:00', value: 22 },
+  { time: '14:00', value: 12 },
+  { time: '15:00', value: 62 },
+  { time: '16:00', value: 72 },
+  { time: '17:00', value: 22 },
+  { time: '18:00', value: 46 },
+  { time: '19:00', value: 52 },
+  { time: '20:00', value: 22 },
+  { time: '21:00', value: 25 },
+  { time: '22:00', value: 62 },
+  { time: '23:00', value: 12 },
+  { time: '24:00', value: 82 }
+]
+
+// 周发电数据
+const eleWeekList = [
+  { time: '周日', value: 22 },
+  { time: '周一', value: 12 },
+  { time: '周二', value: 32 },
+  { time: '周三', value: 52 },
+  { time: '周四', value: 22 },
+  { time: '周五', value: 12 },
+  { time: '周六', value: 42 }
+]
+
+// 上周发电数据
+const lastEleWeekList = [
+  { time: '周日', value: 111 },
+  { time: '周一', value: 72 },
+  { time: '周二', value: 312 },
+  { time: '周三', value: 52 },
+  { time: '周四', value: 82 },
+  { time: '周五', value: 152 },
+  { time: '周六', value: 52 }
+]
+
+// 月发电数据
+const eleMonthList = [
+  { time: '1日', value: 12 },
+  { time: '2日', value: 12 },
+  { time: '3日', value: 32 },
+  { time: '4日', value: 52 },
+  { time: '5日', value: 22 },
+  { time: '6日', value: 12 },
+  { time: '7日', value: 42 },
+  { time: '8日', value: 32 },
+  { time: '9日', value: 75 },
+  { time: '10日', value: 124 },
+  { time: '11日', value: 234 },
+  { time: '12日', value: 542 },
+  { time: '13日', value: 644 },
+  { time: '14日', value: 62 },
+  { time: '15日', value: 32 },
+  { time: '16日', value: 565 },
+  { time: '17日', value: 12 },
+  { time: '18日', value: 2 },
+  { time: '19日', value: 92 },
+  { time: '20日', value: 12 },
+  { time: '21日', value: 52 },
+  { time: '22日', value: 176 },
+  { time: '23日', value: 21 },
+  { time: '24日', value: 64 },
+  { time: '25日', value: 92 },
+  { time: '26日', value: 124 },
+  { time: '27日', value: 44 },
+  { time: '28日', value: 226 },
+  { time: '29日', value: 17 },
+  { time: '30日', value: 28 }
+]
+
+// 上月发电数据
+const lastEleMonthList = [
+  { time: '1日', value: 22 },
+  { time: '2日', value: 236 },
+  { time: '3日', value: 32 },
+  { time: '4日', value: 312 },
+  { time: '5日', value: 22 },
+  { time: '6日', value: 12 },
+  { time: '7日', value: 42 },
+  { time: '8日', value: 32 },
+  { time: '9日', value: 22 },
+  { time: '10日', value: 84 },
+  { time: '11日', value: 25 },
+  { time: '12日', value: 52 },
+  { time: '13日', value: 122 },
+  { time: '14日', value: 62 },
+  { time: '15日', value: 32 },
+  { time: '16日', value: 22 },
+  { time: '17日', value: 12 },
+  { time: '18日', value: 2 },
+  { time: '19日', value: 92 },
+  { time: '20日', value: 12 },
+  { time: '21日', value: 52 },
+  { time: '22日', value: 26 },
+  { time: '23日', value: 81 },
+  { time: '24日', value: 28 },
+  { time: '25日', value: 52 },
+  { time: '26日', value: 12 },
+  { time: '27日', value: 47 },
+  { time: '28日', value: 12 },
+  { time: '29日', value: 21 },
+  { time: '30日', value: 28 }
+]
+
+// 年发电数据
+const eleYearList = [
+  { time: '1月', value: 256 },
+  { time: '2月', value: 12 },
+  { time: '3月', value: 32 },
+  { time: '4月', value: 52 },
+  { time: '5月', value: 22 },
+  { time: '6月', value: 12 },
+  { time: '7月', value: 42 },
+  { time: '8月', value: 32 },
+  { time: '9月', value: 22 },
+  { time: '10月', value: 12 },
+  { time: '11月', value: 12 },
+  { time: '12月', value: 52 }
+]
+
+// 去年发电数据
+const lastEleYearList = [
+  { time: '1月', value: 22 },
+  { time: '2月', value: 12 },
+  { time: '3月', value: 42 },
+  { time: '4月', value: 52 },
+  { time: '5月', value: 224 },
+  { time: '6月', value: 12 },
+  { time: '7月', value: 42 },
+  { time: '8月', value: 32 },
+  { time: '9月', value: 44 },
+  { time: '10月', value: 12 },
+  { time: '11月', value: 168 },
+  { time: '12月', value: 51 }
+]
+
+// 日期类型
+const datePickerType = {
+  '日': {
+    type: 'date',
+    format: '',
+    placeholder: '日期'
+  },
+  '周': {
+    type: 'date',
+    format: 'yyyy 第 W 周',
+    placeholder: '周'
+  },
+  '月': {
+    type: 'month',
+    format: '',
+    placeholder: '月'
+  },
+  '年': {
+    type: 'year',
+    format: '',
+    placeholder: '年'
+  }
+}
+
+// 窑炉列表
+const yaoluList = [
+  {
+    id: 1,
+    name: '窑炉1',
+    value: 56,
+    data: [
+      {  }
+    ]
+  }
+]
+
 export default {
   name: 'electric',
-  components: { Chart }
+  components: { Chart },
+  data () {
+    return {
+      eleDayList,
+      eleWeekList,
+      eleMonthList,
+      eleYearList,
+      lastEleDayList,
+      lastEleWeekList,
+      lastEleMonthList,
+      lastEleYearList,
+      datePickerType,
+      yaoluList,
+      date: new Date(),
+      dataList: [],
+      lastDataList: [],
+      chartType: ['柱状'],
+      eleType: '年'
+    }
+  },
+  mounted () {
+    this.dataList = this.eleYearList
+    this.lastDataList = this.lastEleYearList
+  },
+  methods: {
+    changeEleType (v) {
+      switch (v) {
+        case '日':
+          this.dataList = this.eleDayList
+          this.lastDataList = this.lastEleDayList
+          this.date = new Date()
+          break
+        case '周':
+          this.dataList = this.eleWeekList
+          this.lastDataList = this.lastEleWeekList
+          this.date = new Date()
+          break
+        case '月':
+          this.dataList = this.eleMonthList
+          this.lastDataList = this.lastEleMonthList
+          this.date = new Date()
+          break
+        case '年':
+          this.dataList = this.eleYearList
+          this.lastDataList = this.lastEleYearList
+          this.date = new Date()
+          break
+      }
+    }
+  }
 }
 </script>
 
@@ -24,7 +344,7 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  height: calc(100vh - 84px);
+  min-height: calc(100vh - 124px);
 }
 </style>