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

src/assets/styles/common.scss

@@ -86,3 +86,27 @@
     }
   }
 }
+
+//公共表格样式
+.common-table.el-table{
+  color:#333333;
+  .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
+    background: #f1f5fc;
+    border-bottom: none;
+    .table-head {
+      color: #515a6e;
+    }
+  }
+  .warning-status{
+    color:#FC6B69;
+    &.circle::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #FC6B69;
+      margin-right: 8px;
+    }
+  }
+}

src/router/ems.js

@@ -37,12 +37,12 @@ export const dzjk=[
         redirect: '/dzjk/home',
         hidden: true,
         children: [
-            {
-              path: '/dzjk/home',
-              component: () => import('@/views/ems/dzjk/home/index.vue'),
-              name: 'DjzkHome',
-              meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
-            },
+          {
+            path: '/dzjk/home',
+            component: () => import('@/views/ems/dzjk/home/index.vue'),
+            name: 'DjzkHome',
+            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
+          },
           {
             path: '/dzjk/sbjk',
             component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
@@ -93,6 +93,27 @@ export const dzjk=[
                 meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
               }
             ]
+          },
+          {
+            path: '/dzjk/gzgj',
+            component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
+            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'},
+              }
+            ]
           }
         ]
       }

src/views/ems/dzjk/gzgj/index.vue

@@ -1,14 +1,171 @@
-<script setup lang="ts">
-
-</script>
 
 <template>
-  <div>第二层路由 单站监控=>故障告警
-  <div>没有下级路由 页面直接展示</div>
-  </div>
-
+  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="设备类型">
+          <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></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 gjdjOptions" :key="index+'gjdjOptions'"></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 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+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--表格-->
+      <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="name"
+            width="200"
+            label="设备名称">
+          </el-table-column>
+          <el-table-column
+            label="告警等级"
+          >
+            <template slot-scope="scope">
+              <span>{{scope.row.gjdj}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="告警内容">
+            <template slot-scope="scope">
+              <span>{{scope.row.gjnr}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            label="告警发生时间">
+          </el-table-column>
+          <el-table-column
+            prop="finishTime"
+            label="告警结束时间">
+          </el-table-column>
+          <el-table-column
+            label="状态">
+            <template slot-scope="scope">
+              <span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+    </div>
+  </el-card>
 </template>
 
-<style scoped lang="scss">
 
+<script>
+export default {
+  name:'DzjkGzgj',
+  data() {
+    return {
+      btnList:[
+        {name:'今日告警',id:'today'},
+        {name:'历史告警',id:'yesterday'},
+      ],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      activeBtn:'today',
+      loading:false,
+      search:{sblx:'',gjdj:''},
+      sblxOptions:[
+        {name:'类型一',id:1},
+        {name:'类型二',id:2},
+        {name:'类型三',id:3},
+      ],
+      gjdjOptions:[
+        {name:'严重',id:1},
+        {name:'普通',id:2},
+      ],
+      tableData:[
+        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
+        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search.dcd=''
+      this.search.dcc=''
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+
+  },
+  mounted(){
+    this.getData()
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    // this.dateRange = [lastMonth, now];
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
 </style>

src/views/ems/dzjk/home/index.vue

@@ -24,6 +24,7 @@
           </div>
           <div class="ssgj-container">
             <el-table
+              class="common-table"
               :data="tableData"
               height="100%"
               stripe
@@ -36,7 +37,7 @@
                 label="状态"
                 >
                   <template slot-scope="scope">
-                    <span class="warning-status">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
+                    <span class="warning-status circle">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
                   </template>
               </el-table-column>
               <el-table-column
@@ -135,25 +136,6 @@ export default {
     ::v-deep{
       .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
         background:#FFF2CB ;
-        border-bottom: none;
-      }
-      .warning-status{
-        color:#FC6B69;
-        &::before {
-          content: "";
-          display: inline-block;
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          background-color: #FC6B69;
-          margin-right: 8px;
-        }
-      }
-      .table-head{
-        color:#515a6e;
-      }
-      .alarm-content{
-        color:#333333;
       }
     }
   }

src/views/ems/dzjk/sbjk/bmsdcc/index.vue

@@ -25,12 +25,12 @@
           </div>
         </div>
     </el-card>
-    <div class="table-container">
-      <el-table
+    <el-table
+        class="common-table"
         :data="tableData"
         stripe
         max-height="500"
-        style="width: 100%">
+        style="width: 100%;margin-top:25px;">
         <el-table-column
           prop="name"
           width="190"
@@ -84,7 +84,6 @@
         </el-table-column>
 
       </el-table>
-    </div>
   </div>
 </template>
 
@@ -158,20 +157,4 @@ export default {
   }
 }
 
-
-//表格样式
-.table-container{
-  margin-top:25px;
-  ::v-deep{
-    .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
-      border-bottom: none;
-    }
-    .el-table .el-table__header-wrapper th{
-      background-color: #f1f5fc;
-    }
-    .table-head{
-      color:#515a6e;
-    }
-  }
-}
 </style>

src/views/ems/dzjk/sbjk/bmszl/index.vue

@@ -25,11 +25,11 @@
         </div>
       </div>
     </el-card>
-    <div class="table-container">
-      <el-table
+    <el-table
+        class="common-table"
         :data="tableData"
         stripe
-        style="width: 100%;">
+        style="width: 100%;margin-top:25px;">
         <el-table-column
           prop=""
           label="名称">
@@ -58,8 +58,7 @@
           prop="maxID"
           label="单体最大值ID">
         </el-table-column>
-      </el-table>
-    </div>
+  </el-table>
   </div>
 </template>
 
@@ -138,16 +137,4 @@ export default {
   }
 }
 
-//表格样式
-.table-container{
-  margin-top:25px;
-  ::v-deep{
-    .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
-      border-bottom: none;
-    }
-    .table-head{
-      color:#515a6e;
-    }
-  }
-}
 </style>

src/views/ems/dzjk/sbjk/db/index.vue

@@ -10,7 +10,8 @@
               </div>
           </div>
           <el-table
-              :data="zbTableData"
+            class="common-table"
+            :data="zbTableData"
               stripe
               style="width: 100%;">
               <el-table-column
@@ -49,6 +50,7 @@
             </div>
           </div>
           <el-table
+            class="common-table"
             :data="cnbTableData"
             stripe
             style="width: 100%;">

src/views/ems/dzjk/sbjk/yl/index.vue

@@ -16,7 +16,7 @@
 
       <div class="yl-item-container yl-warn-item-container">
         <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">2#液冷</div>
           <div>工作模式：<span class="header-values">运行</span></div>
           <div>当前温度：<span class="header-values">12&#8451;</span></div>
         </div>
@@ -28,7 +28,7 @@
       </div>
       <div class="yl-item-container">
         <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">3#液冷</div>
           <div>工作模式：<span class="header-values">运行</span></div>
           <div>当前温度：<span class="header-values">12&#8451;</span></div>
         </div>
@@ -41,7 +41,7 @@
 
       <div class="yl-item-container yl-warn-item-container">
         <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">4#液冷</div>
           <div>工作模式：<span class="header-values">运行</span></div>
           <div>当前温度：<span class="header-values">12&#8451;</span></div>
         </div>

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>

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>

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>

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>
+