From f556105030ce85ad0c2c93a70445711657415e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Mon, 23 Jun 2025 19:51:17 +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=BB=9F=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/ems.js                      |  15 +++
 src/views/ems/dzjk/tjbb/gltj/Dlzb.vue  | 158 +++++++++++++++++++++++++
 src/views/ems/dzjk/tjbb/gltj/Syzb.vue  | 155 ++++++++++++++++++++++++
 src/views/ems/dzjk/tjbb/gltj/index.vue |  15 ++-
 src/views/ems/dzjk/tjbb/index.vue      |  77 ++++++++++--
 5 files changed, 407 insertions(+), 13 deletions(-)
 create mode 100644 src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
 create mode 100644 src/views/ems/dzjk/tjbb/gltj/Syzb.vue

diff --git a/src/router/ems.js b/src/router/ems.js
index ab8a59d..3be3c32 100644
--- a/src/router/ems.js
+++ b/src/router/ems.js
@@ -100,6 +100,21 @@ export const dzjk=[
             name: 'DjzkGzgj',
             meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
           },
+          {
+            path: '/dzjk/tjbb',
+            component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
+            name: 'DjzkTjbb',
+            meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
+            redirect: '/dzjk/tjbb/gltj',
+            children: [
+              {
+                path: 'gltj',
+                component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
+                name: 'DjzkTjbbGltj',
+                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+              }
+            ]
+          }
         ]
       }
     ]
diff --git a/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue b/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
new file mode 100644
index 0000000..0a0dc29
--- /dev/null
+++ b/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>
diff --git a/src/views/ems/dzjk/tjbb/gltj/Syzb.vue b/src/views/ems/dzjk/tjbb/gltj/Syzb.vue
new file mode 100644
index 0000000..a182af8
--- /dev/null
+++ b/src/views/ems/dzjk/tjbb/gltj/Syzb.vue
@@ -0,0 +1,155 @@
+<template>
+  <el-card shadow="always" class="common-card-container">
+    <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">22345元</span></div>
+      </div>
+      <div id="syzbChart" 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('#syzbChart'));
+    }
+  },
+  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;
+    .point{
+      color: #05AEA3;
+      font-weight: 500;
+      font-size: 18px;
+    }
+  }
+}
+</style>
diff --git a/src/views/ems/dzjk/tjbb/gltj/index.vue b/src/views/ems/dzjk/tjbb/gltj/index.vue
index 742fb79..073ade4 100644
--- a/src/views/ems/dzjk/tjbb/gltj/index.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/index.vue
@@ -1,11 +1,18 @@
-<script setup lang="ts">
-
-</script>
 
 <template>
-  <div>第三层路由 单站监控=>统计报表=>概览统计</div>
+  <div class="ems-dashboard-editor-container">
+    <syzb/>
+    <dlzb/>
+  </div>
 </template>
 
+<script>
+import Syzb from "./Syzb.vue";
+import Dlzb from "./Dlzb.vue";
+export default {
+  components: {Syzb,Dlzb}
+}
+</script>
 <style scoped lang="scss">
 
 </style>
diff --git a/src/views/ems/dzjk/tjbb/index.vue b/src/views/ems/dzjk/tjbb/index.vue
index c31a510..492c1f9 100644
--- a/src/views/ems/dzjk/tjbb/index.vue
+++ b/src/views/ems/dzjk/tjbb/index.vue
@@ -1,15 +1,74 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <div>第二层路由 单站监控=>统计报表</div>
-    有三级路由 页面使用router-view组件
-    <router-view></router-view>
+  <div class="ems-dashboard-editor-container tjbb-ems-dashboard-editor-container">
+    <div class="router-container">
+      <div>
+        <div class="route-link" :class="{'active':item.name === $route.name}" v-for="(item,index) in childrenRoute" :key="index+'tjbbChildrenRoute'">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+            {{item.meta.title}}
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div class="ems-content-container ems-content-container-padding tjbb-ems-content-container">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </div>
   </div>
+
 </template>
 
-<style scoped lang="scss">
+<script>
+import { dzjk } from '@/router/ems'
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前统计报表页面路由',this.$route)
+  }
 
+}
+</script>
+
+<style scoped lang="scss">
+.tjbb-ems-dashboard-editor-container{
+  display: flex;
+  padding:0;
+  background: #FFFFFF;
+}
+.router-container{
+  &>div{
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    display: flex;
+    flex-direction: column;
+  }
+  .route-link{
+    width: 104px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #ffffff;
+    color: #666666;
+    font-size: 14px;
+    text-align: center;
+  }
+  .route-link.active{
+    background-color: #FFBE29 ;
+    color: #333333;
+    font-weight: 500;
+  }
+}
+.tjbb-ems-content-container{
+  margin-top:0;
+  padding-top:0;
+  padding-right: 0;
+  flex: 1;
+}
 </style>
+