新增概率统计报表=>统计页面

src/views/ems/dzjk/tjbb/gltj/Dlzb.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-card shadow="always" class="common-card-container" style="margin-top:20px">
+    <div slot="header">
+      <span class="card-title">电量指标</span>
+    </div>
+    <div class="card-main">
+      <!--    搜索栏-->
+      <div class="select-container">
+        <el-form :inline="true">
+          <el-form-item label="设备类型">
+            <el-select v-model="sjwd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+              <el-option :label="item.name" :value="item.id" v-for="(item,index) in sjwdOptions" :key="index+'syzbSjwdOptions'"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="时间选择">
+            <el-date-picker
+              v-model="dateRange"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              :picker-options="pickerOptions"
+              :default-value="defaultDateRange"
+              end-placeholder="结束时间">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onReset" native-type="button">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="total-data">
+        <div>总充电量:<span class="point">1390988kWh</span></div>
+        <div>总放电量:<span class="point">988kWh</span></div>
+        <div>总效益:<span class="point">99%</span></div>
+      </div>
+      <div id="dlzbChart" style="height: 310px"></div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      sjwd:'',
+      sjwdOptions:[
+        {name:'时间一',id:1},
+        {name:'时间二',id:2},
+      ],
+      loading:false,
+      chart: null
+
+    }
+  },
+  methods: {
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.dateRange=[]
+      this.sjwd=''
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    setOption(data){
+      // const source = [['日期','充电量','放电量']]
+      // data.forEach(item=>{
+      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      // })
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        // legend: {
+        //   left: 'right',
+        //   bottom: '10',
+        // },
+        tooltip: {},
+        xAxis: { type: 'category' },
+        yAxis: { type: 'value' },
+        grid:{top:30},
+        dataset:{
+          // source
+          source:[//格式
+            ['product','收益1','收益2'],
+            ['今天',10,20],
+            ['昨天',20,30],
+          ]
+        },
+        series: [
+          {
+            type: 'bar',//柱状图
+          },
+          {
+            type: 'bar',//柱状图
+          }
+        ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dlzbChart'));
+    }
+  },
+  mounted(){
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+
+<style scoped lang="scss">
+.total-data{
+  line-height: 18px;
+  color: #333333;
+  font-size: 16px;
+  padding:10px 0;
+  >div{
+    display: inline-block;
+    margin-right: 20px;
+    .point{
+      color: #05AEA3;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
+}
+</style>