新增概率统计报表=>电表报表、电池温度

src/views/ems/dzjk/tjbb/pcsqx/index.vue

@@ -0,0 +1,167 @@
+
+<template>
+  <div>
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="Pcs">
+          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'sblxOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            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 style="margin:30px 0;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group>
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--echart-->
+      <div id="pcsEchart" style="height:360px;"></div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  name:'DzjkTjbbPcsqx',
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      pcs:'',
+      pcsOptions: [
+        {name:'Pcs1',id:1},
+        {name:'Pcs2',id:2},
+      ],
+      activeBtn:'yggl',
+      btnList:[
+        {name:'有功功率',id:'yggl'},
+        {name:'无功功率',id:'wggl'},
+        {name:'温度',id:'wd'},
+        {name:'三相电压',id:'sxdy'},
+        {name:'三相电流',id:'sxdl'},
+      ],
+
+    }
+  },
+  methods: {
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.pcs = ''
+      this.dateRange=[]
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      this.chart.showLoading()
+      //接口调用完成之后 设置图表、结束loading
+      this.setOption()
+      this.loading=false;
+      this.chart.hideLoading()
+    },
+    setOption() {
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name:this.btnList.find(item=>item.id===this.activeBtn).name,
+            data: [80,92,1,34,90,130,320,80,9,91,34,90,80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'scatter',
+          }
+          // ,{
+          //   name:'实时电池平均SOC',
+          //   data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+          //   type: 'scatter',
+          // }
+          ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#pcsEchart'));
+    }
+  },
+  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">
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</style>