From 7145afd5a001c7f2f464444199df722772c77676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:52:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A6=82=E7=8E=87=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=8A=A5=E8=A1=A8=3D>=E7=94=B5=E8=A1=A8=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E3=80=81=E7=94=B5=E6=B1=A0=E6=B8=A9=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/ems.js                       |  30 ++++
 src/views/ems/dzjk/tjbb/dbbb/index.vue  | 177 ++++++++++++++++++++++++
 src/views/ems/dzjk/tjbb/dcdqx/index.vue | 166 ++++++++++++++++++++++
 src/views/ems/dzjk/tjbb/dcwd/index.vue  | 149 ++++++++++++++++++++
 src/views/ems/dzjk/tjbb/glqx/index.vue  | 166 ++++++++++++++++++++++
 src/views/ems/dzjk/tjbb/gltj/index.vue  |   1 +
 src/views/ems/dzjk/tjbb/index.vue       |   1 +
 src/views/ems/dzjk/tjbb/pcsqx/index.vue | 167 ++++++++++++++++++++++
 8 files changed, 857 insertions(+)
 create mode 100644 src/views/ems/dzjk/tjbb/dbbb/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/dcdqx/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/dcwd/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/glqx/index.vue
 create mode 100644 src/views/ems/dzjk/tjbb/pcsqx/index.vue

diff --git a/src/router/ems.js b/src/router/ems.js
index 3be3c32..044119c 100644
--- a/src/router/ems.js
+++ b/src/router/ems.js
@@ -112,6 +112,36 @@ export const dzjk=[
                 component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
                 name: 'DjzkTjbbGltj',
                 meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'glqx',
+                component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
+                name: 'DjzkTjbbGlqx',
+                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'pcsqx',
+                component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
+                name: 'DjzkTjbbPcsqx',
+                meta: { title: 'Pcs曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dcdqx',
+                component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
+                name: 'DjzkTjbbDcdqx',
+                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dcwd',
+                component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
+                name: 'DjzkTjbbDcwd',
+                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              },
+              {
+                path: 'dbbb',
+                component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
+                name: 'DjzkTjbbDbbb',
+                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
               }
             ]
           }
diff --git a/src/views/ems/dzjk/tjbb/dbbb/index.vue b/src/views/ems/dzjk/tjbb/dbbb/index.vue
new file mode 100644
index 0000000..f99309a
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/dbbb/index.vue
@@ -0,0 +1,177 @@
+
+<template>
+  <div>
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="电表">
+          <el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :key="index+'dbOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日报">
+          <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="search.date"
+            type="date"
+            :picker-options="pickerOptions"
+            :default-value="defaultDate">
+          </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>
+    <!--表格-->
+    <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          show-summary
+          sum-text="汇总"
+          style="width: 100%;margin-top:25px;">
+<!--      todo汇总数据  :summary-method="getSummaries"-->
+<!--        汇总列-->
+          <el-table-column label="汇总">
+            <el-table-column
+              prop="time"
+              label="日期"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+<!--充电量列-->
+          <el-table-column  label="充电量">
+            <el-table-column
+              prop="cdlJian"
+              label="尖">
+            </el-table-column>
+            <el-table-column
+              prop="cdlFeng"
+              label="峰">
+            </el-table-column>
+            <el-table-column
+              prop="cdlPing"
+              label="平">
+            </el-table-column>
+            <el-table-column
+              prop="cdlGu"
+              label="谷">
+            </el-table-column>
+            <el-table-column
+              prop="cdlZong"
+              label="总">
+            </el-table-column>
+          </el-table-column>
+        <!--充电量列-->
+          <el-table-column  label="放电量">
+            <el-table-column
+              prop="fdlJian"
+              label="尖">
+            </el-table-column>
+            <el-table-column
+              prop="fdlFeng"
+              label="峰">
+            </el-table-column>
+            <el-table-column
+              prop="fdlPing"
+              label="平">
+            </el-table-column>
+            <el-table-column
+              prop="fdlGu"
+              label="谷">
+            </el-table-column>
+            <el-table-column
+              prop="fdlZong"
+              label="总">
+            </el-table-column>
+          </el-table-column>
+<!--        效率-->
+          <el-table-column label="效率(%)">
+            <el-table-column
+              prop="efficiency">
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkTjbbDbbb',
+  data() {
+    return {
+      loading:false,
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDate:'',//默认展示的时间
+      search:{db:'',rb:'',date:''},
+      dbOptions:[
+        {name:'电表1',id:1},
+        {name:'电表2',id:2},
+        {name:'电表3',id:3},
+      ],
+      rbOptions:[
+        {name:'日报1',id:1},
+        {name:'日报2',id:2},
+      ],
+      tableData:[
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search={
+        db:'',rb:'',date:''
+      }
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+    getSummaries(){
+
+    }
+  },
+  mounted(){
+    this.getData()
+    this.defaultDate = new Date()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+::v-deep{
+  .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
+    border-bottom: 1px solid #dfe6ec;
+  }
+}
+
+</style>
diff --git a/src/views/ems/dzjk/tjbb/dcdqx/index.vue b/src/views/ems/dzjk/tjbb/dcdqx/index.vue
new file mode 100644
index 0000000..c63c74d
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/dcdqx/index.vue
@@ -0,0 +1,166 @@
+
+<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="dcdEchart" 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:'dpjwd',
+      btnList:[
+        {name:'堆平均维度',id:'dpjwd'},
+        {name:'堆电压',id:'ddy'},
+        {name:'堆电流',id:'dll'},
+        {name:'堆soc',id:'dsoc'},
+      ],
+
+    }
+  },
+  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('#dcdEchart'));
+    }
+  },
+  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>
diff --git a/src/views/ems/dzjk/tjbb/dcwd/index.vue b/src/views/ems/dzjk/tjbb/dcwd/index.vue
new file mode 100644
index 0000000..e6cb299
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/dcwd/index.vue
@@ -0,0 +1,149 @@
+
+<template>
+  <div>
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="电池堆">
+          <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电池簇">
+          <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="search.date"
+            type="date"
+            :picker-options="pickerOptions"
+            :default-value="defaultDate">
+          </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-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="time"
+            width="100"
+            label="时间">
+          </el-table-column>
+          <el-table-column
+            prop="maxTemp"
+            label="最高温（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="maxTempDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="minTemp"
+            label="最低温（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="minTempDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="maxPressure"
+            label="最高压（V）">
+          </el-table-column>
+          <el-table-column
+            prop="maxPressureDtId"
+            label="单体ID">
+          </el-table-column>
+          <el-table-column
+            prop="minTemp"
+            label="最低压（V）">
+          </el-table-column>
+          <el-table-column
+            prop="minPressureDtId"
+            label="单体ID">
+          </el-table-column>
+        </el-table>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkTjbbDcwd',
+  data() {
+    return {
+      loading:false,
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDate:'',//默认展示的时间
+      search:{dcd:'',dcc:'',date:''},
+      dcdOptions:[
+        {name:'电池堆1',id:1},
+        {name:'电池堆2',id:2},
+        {name:'电池堆3',id:3},
+      ],
+      dccOptions:[
+        {name:'电池簇1',id:1},
+        {name:'电池簇2',id:2},
+      ],
+      tableData:[
+        {time:'00:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'01:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'02:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'03:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'04:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'05:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'06:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+        {time:'07:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search={
+        dcd:'',dcc:'',date:''
+      }
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+  },
+  mounted(){
+    this.getData()
+    this.defaultDate = new Date()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+
+</style>
diff --git a/src/views/ems/dzjk/tjbb/glqx/index.vue b/src/views/ems/dzjk/tjbb/glqx/index.vue
new file mode 100644
index 0000000..cdf772b
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/glqx/index.vue
@@ -0,0 +1,166 @@
+
+<template>
+  <div>
+    <div class="select-container">
+      <el-form :inline="true">
+<!--        <el-form-item label="网点">-->
+<!--          <el-select v-model="wd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
+<!--            <el-option :label="item.name" :value="item.id" v-for="(item,index) in wdOptions" :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="glqxEchart" style="height:360px;"></div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts'
+import resize from "@/mixins/ems/resize";
+export default {
+  name:'DzjkTjbbGlqx',
+  mixins: [resize],
+  data() {
+    return {
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      loading:false,
+      // todo delete
+      // wd:'',
+      // wdOptions: [
+      //   {name:'网点一',id:1},
+      //   {name:'网点二',id:2},
+      // ],
+      activeBtn:'dwgl',
+      btnList:[
+        {name:'电网功率',id:'dwgl'},
+        {name:'负载功率',id:'fzgl'},
+        {name:'电储能功率',id:'cngl'},
+        {name:'光伏功率',id:'gfgl'},
+      ],
+
+    }
+  },
+  methods: {
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      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('#glqxEchart'));
+    }
+  },
+  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>
diff --git a/src/views/ems/dzjk/tjbb/gltj/index.vue b/src/views/ems/dzjk/tjbb/gltj/index.vue
index 7323e3b..82e2edf 100644
--- a/src/views/ems/dzjk/tjbb/gltj/index.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/index.vue
@@ -10,6 +10,7 @@
 import Syzb from "./Syzb.vue";
 import Dlzb from "./Dlzb.vue";
 export default {
+  name:'DzjkTjbbGltj',
   components: {Syzb,Dlzb}
 }
 </script>
diff --git a/src/views/ems/dzjk/tjbb/index.vue b/src/views/ems/dzjk/tjbb/index.vue
index 492c1f9..c17550e 100644
--- a/src/views/ems/dzjk/tjbb/index.vue
+++ b/src/views/ems/dzjk/tjbb/index.vue
@@ -23,6 +23,7 @@ import { dzjk } from '@/router/ems'
 const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
 console.log('设备监控子路由',childrenRoute)
 export default {
+  name:'DzjkTjbb',
   data(){
     return {
       childrenRoute,
diff --git a/src/views/ems/dzjk/tjbb/pcsqx/index.vue b/src/views/ems/dzjk/tjbb/pcsqx/index.vue
new file mode 100644
index 0000000..aa08f12
--- /dev/null
+++ b/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>