diff --git a/psdc-ui/src/views/analyse/nhfx/index.vue b/psdc-ui/src/views/analyse/nhfx/index.vue
index 8e60d74..4115d83 100644
--- a/psdc-ui/src/views/analyse/nhfx/index.vue
+++ b/psdc-ui/src/views/analyse/nhfx/index.vue
@@ -1,24 +1,289 @@
 <template>
   <div class="app-container home">
-    <div class="btnBox">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="同比分析" name="first">
+        <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="日期："><el-date-picker v-model="dateValue1" type="date" placeholder="请选择日期" size="default"/></el-form-item>
+            <el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item>
+            <el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item>
+            <el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item>
+        </el-form>
+        <div class="chartBox">
+          <div id="chart"></div>
+        </div>
+        <div class="tableBox1">
+          <el-table :data="tbfxDataTable" height="400px">
+            <el-table-column label="月份" align="center" prop="month" width="100"/>
+            <el-table-column label="本期" align="center" prop="currentPeriod"/>
+            <el-table-column label="同期" align="center" prop="theSameTerm"/>
+            <el-table-column label="同比(%)" align="center" prop="yearOnYear"/>
+            <el-table-column label="累计同比(%)" align="center" prop="totalYearOnYear"/>
+          </el-table>
+          <el-pagination
+              v-model:current-page="tbfxCurrentPage"
+              v-model:page-size="tbfxPageSize"
+              :page-sizes="[5, 10, 20, 50]"
+              :small="tbfxSmall"
+              :disabled="tbfxDisabled"
+              :background="tbfxBackground"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tbfxDataTable.length"
+              @size-change="tbfxHandleSizeChange"
+              @current-change="tbfxHandleCurrentChange"/>
+        </div>
+      </el-tab-pane>
 
-    </div>
 
 
 
+      <el-tab-pane label="环比分析" name="second">
+<!--        @submit.native.prevent阻止默认提交事件-->
+        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
+          <el-form-item class="mr0"><button class="myBtn btn1" :class="{active : activeIndex === 0}" @click="handleDaily">按日</button></el-form-item>
+          <el-form-item ><button class="myBtn btn2" :class="{active : activeIndex === 1}" @click="handleMonthly">按月</button></el-form-item>
+          <el-form-item label="日期："><el-date-picker v-model="dateValue2" :type="dateType" :format="format" :value-format="valueFormat" placeholder="请选择日期" size="default"/></el-form-item>
+          <el-form-item><el-button type="primary" icon="Search" @click="handleQuery2">查询</el-button></el-form-item>
+        </el-form>
+        <div class="tableBox2">
+          <el-table :data="hbfxDataTable">
+            <el-table-column label="用能设备" align="center" prop="type"/>
+            <el-table-column :label="label1" align="center" :prop="prop1"/>
+            <el-table-column :label="label2" align="center" :prop="prop2"/>
+            <el-table-column label="增加值" align="center" prop="addValue"/>
+            <el-table-column label="环比(%)" align="center" prop="relative"/>
+            <el-table-column label="操作" align="center">
+              <template v-slot="scope">
+                <el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+              v-model:current-page="hbfxCurrentPage"
+              v-model:page-size="hbfxPageSize"
+              :page-sizes="[5, 10, 20, 50]"
+              :small="hbfxSmall"
+              :disabled="hbfxDisabled"
+              :background="hbfxBackground"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="hbfxDataTable.length"
+              @size-change="hbfxHandleSizeChange"
+              @current-change="hbfxHandleCurrentChange"/>
+        </div>
+        <!-- 生成图表弹出窗 -->
+        <el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body>
+          <div class="chartBox">
+            <div id="chart"></div>
+          </div>
+        </el-dialog>
+      </el-tab-pane>
+
+    </el-tabs>
   </div>
 </template>
 
 <script setup name="Index">
+import {Histogram} from '@element-plus/icons-vue'
 import {ref,reactive} from "vue";
 
 
+/** 切换按钮操作*/
+const activeName = ref('first')
+
+/** ----------同比分析----------*/
+/** 过滤查询*/
+const dateValue1 = ref(new Date())
+function lastDay(){
+  const current = dateValue1.value;
+  const previous = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+  dateValue1.value = previous;
+}
+function nextDay(){
+  const current = dateValue1.value;
+  const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+  dateValue1.value = next;
+}
+function handleQuery1(){}
+
+/** 数据表格处理*/
+//内容
+const tbfxDataTable = reactive([
+  {
+    month:'01月',
+    currentPeriod: '1265',
+    theSameTerm:'3254',
+    yearOnYear:'30',
+    totalYearOnYear:'32',
+  }
+])
+const tbfxCurrentPage = ref(1)
+const tbfxPageSize = ref(5)
+const tbfxSmall = ref(false)
+const tbfxBackground = ref(false)
+const tbfxDisabled = ref(false)
+const tbfxHandleSizeChange = (val) => {
+  console.log(`${val}`)
+}
+const tbfxHandleCurrentChange = (val) => {
+  console.log(`${val}`)
+}
+
+
+/** ----------环比分析----------*/
+/** 过滤查询*/
+const activeIndex = ref(0)
+const dateValue2 = ref()
+const dateType = ref('date')
+const format = ref('YYYY-MM-DD')
+const valueFormat = ref('YYYY-MM-DD')
+function handleDaily(){
+  activeIndex.value = 0;
+  prop1.value = 'toDay'
+  label1.value = '当日用电/kWh'
+  prop2.value = 'lastDay'
+  label2.value = '上日用电/kWh';
+  dateType.value = 'date'
+  format.value = 'YYYY-MM-DD'
+  valueFormat.value = 'YYYY-MM-DD'
+}
+function handleMonthly(){
+  activeIndex.value = 1;
+  prop1.value = 'toMonth'
+  label1.value = '当月用电/kWh'
+  prop2.value = 'lastMonth'
+  label2.value = '上月用电/kWh';
+  dateType.value = 'month'
+  format.value = 'YYYY-MM'
+  valueFormat.value = 'YYYY-MM'
+}
+function handleQuery2(){}
+
+/** 数据表格处理*/
+//内容
+const hbfxDataTable = reactive([
+  {month:'01月', currentPeriod: '1265', theSameTerm:'3254', yearOnYear:'30', totalYearOnYear:'32'}
+])
+const prop1 = ref('toDay')
+const label1 = ref('当日用电/kWh')
+const prop2 = ref('lastDay')
+const label2 = ref('上日用电/kWh')
+const hbfxCurrentPage = ref(1)
+const hbfxPageSize = ref(5)
+const hbfxSmall = ref(false)
+const hbfxBackground = ref(false)
+const hbfxDisabled = ref(false)
+const hbfxHandleSizeChange = (val) => {
+  console.log(`${val}`)
+}
+const hbfxHandleCurrentChange = (val) => {
+  console.log(`${val}`)
+}
+
+/** 生成图表按鈕操作*/
+const title = ref()
+const open = ref(false)
+function handleChart(){
+  open.value = true;
+  console.log('图表按钮')
+};
+
+
 
 
 
 </script>
 
 <style scoped lang="scss">
+.home{
+  width: 100%;
+  height: calc(100vh - 84px);
+  overflow: auto;
+}
+.chartBox{
+  width: 100%;
+  height: 300px;
+  border: 1px solid #fff;
+  margin-bottom: 18px;
+  overflow: hidden;
+  #chart{
+    width: 100%;
+    height: 100%;
+  }
+}
+.tableBox1{
+  width: 100%;
+  height: 402px;
+  overflow: hidden;
+}
+.tableBox2{
+  width: 100%;
+  height: 717px;
+  background-color: #2F3D8A;
+  overflow: hidden;
+}
+
+.mr0{
+  margin-right: 0px !important;
+}
+.myBtn{
+  padding: 7px 25px;
+  background-color: #1B2965;
+  border: 1px solid #409EFF;
+  color: #fff;
+  cursor: pointer;
+}
+.btn1{
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.btn2{
+  margin-left: -1px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.active{
+  background-color: #409EFF !important;
+  color: #fff !important;
+}
+
+
+
+::v-deep .el-tabs__item{
+  color: #fff;
+}
+::v-deep .el-tabs__item.is-active{
+  color: #409EFF;
+}
+::v-deep .el-tabs__nav-wrap::after{
+  background-color: #313d70;
+}
+
 
+::v-deep .el-button{
+  border-radius: 2px;
+}
+::v-deep .el-pagination{
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+::v-deep .el-pagination__total{
+  color: #f3ffff;
+}
+::v-deep .el-pagination__jump{
+  color: #f3ffff;
+}
+::v-deep .el-pager{
+  margin: 0 5px;
+}
+::v-deep .el-table .el-table__body-wrapper{
+  background-color: #2F3D8A;
+}
+::v-deep .el-form--inline .el-form-item{
+  margin-right: 12px;
+}
+::v-deep .el-input__inner{
+  color: #f3ffff;
+}
 </style>
 
diff --git a/psdc-ui/src/views/analyse/nhtj/index.vue b/psdc-ui/src/views/analyse/nhtj/index.vue
index acd80fc..1141e4d 100644
--- a/psdc-ui/src/views/analyse/nhtj/index.vue
+++ b/psdc-ui/src/views/analyse/nhtj/index.vue
@@ -229,7 +229,7 @@ function handleMonth() {
 };
 
 
-/** 生成表格按鈕操作*/
+/** 生成图表按鈕操作*/
 const title = ref()
 const open = ref(false)
 function handleChart(){
@@ -310,5 +310,12 @@ const { filterForm } = toRefs(data);
 ::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right{
   background-color: #2F3D8A;
 }
+
+::v-deep .el-input__inner{
+  color: #f3ffff;
+}
+::v-deep .el-date-editor .el-range-input{
+  color: #f3ffff;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index f48ef9e..09e2b14 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -35,7 +35,7 @@
         <div class="mid1-1">
           当前功率
         </div>
-        <div id="myEcharts" style="width: 100%; height: 88.6%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
       <div class="mid2">
         <div class="mid2-1">
@@ -56,17 +56,16 @@
 </template>
 
 <script  name="Index">
-import { onMounted } from "vue";
+import { onMounted ,onUnmounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "db",
   setup() {
+
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      let myChart = echarts.init(document.getElementById("myEcharts"));
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      // 绘制图表
-      myChart.setOption({
+      echarts.init(document.getElementById("myEcharts1")).dispose()
+      let myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      let option1 = {
         series: [
           {
             type: 'gauge',
@@ -118,11 +117,16 @@ export default {
             ]
           }
         ]
-      });
+      }
+      myChart1.setOption(option1);
       window.onresize = function () {//自适应大小
-        myChart.resize();
+        myChart1.resize();
       };
-      myChart3.setOption({
+
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      // 绘制图表
+      myChart2.setOption({
         title: {},
         tooltip: {},
         textStyle:{
@@ -139,7 +143,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: "kWh",
+          name: "kW",
           splitLine:{
             show:true,
             lineStyle:{
@@ -157,8 +161,8 @@ export default {
         },
         series: [
           {
-            name: "今日用电量",
-            type: "bar",
+            name: "当前功率",
+            type: "line",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
               color:'#2F8EE0'
@@ -167,9 +171,12 @@ export default {
         ],
       });
       window.onresize = function () {//自适应大小
-        myChart3.resize();
+        myChart2.resize();
       };
-      myChart2.setOption({
+
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      myChart3.setOption({
         title: {},
         tooltip: {},
         textStyle:{
@@ -186,7 +193,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: "kW",
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -204,8 +211,8 @@ export default {
         },
         series: [
           {
-            name: "当前功率",
-            type: "line",
+            name: "今日用电量",
+            type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
               color:'#2F8EE0'
@@ -214,8 +221,9 @@ export default {
         ],
       });
       window.onresize = function () {//自适应大小
-        myChart2.resize();
+        myChart3.resize();
       };
+
     });
   },
   components: {},
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index 9a84059..d5a2f4d 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -73,6 +73,10 @@ export default {
   name: "drgl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index a14818e..090fdba 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -69,6 +69,10 @@ export default {
   name: "frdl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index 3dcb56c..05ac5ad 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -73,6 +73,10 @@ export default {
   name: "kqyrb",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index 289628b..cb28e63 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -77,6 +77,7 @@ export default {
   name: "wdcgq",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       // 绘制图表
       myChart.setOption({
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index b9f77d5..486b547 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -73,6 +73,10 @@ export default {
   name: "xrgl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));