From 80da3c78bf9297e07e78d29169adf41178543d3f Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 13 Mar 2024 10:49:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                        |   2 +-
 src/views/homePage/Echarts/index.vue          | 198 ++++++++++++
 src/views/homePage/arrester/index.vue         | 103 ++++++-
 src/views/homePage/clamp/index.vue            | 104 ++++++-
 src/views/homePage/index.vue                  |  56 +++-
 .../homePage/oilChromatography/index.vue      | 107 ++++++-
 .../homePage/partialDischarges/index.vue      | 282 ++++++++++++++++++
 src/views/homePage/sf6/index.vue              | 103 ++++++-
 .../homePage/windingTemperature/index.vue     | 104 ++++++-
 9 files changed, 1037 insertions(+), 22 deletions(-)
 create mode 100644 src/views/homePage/Echarts/index.vue
 create mode 100644 src/views/homePage/partialDischarges/index.vue

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 3648d437..d6183ebd 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -14,7 +14,7 @@ export function userloginApi(data) {
 //装置总数
 export function getlistAllCountApi(data) {
   return request({
-    url: "/modevtype/listAllCount",
+    url: "/modevtype/sensorCount",
     method: "get",
     data,
   });
diff --git a/src/views/homePage/Echarts/index.vue b/src/views/homePage/Echarts/index.vue
new file mode 100644
index 00000000..1ebd00b1
--- /dev/null
+++ b/src/views/homePage/Echarts/index.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="homechart">
+    <h3>{{ echartData.tendencyChartTitle }}-实时数据趋势图</h3>
+
+    <div id="tendencyChart"></div>
+    <!-- <div id="noDataBox" v-show="echartData.legendData.length == 0">
+      <div class="noPic">
+        <i class="el-icon-data-line"></i>
+        <p>暂无数据</p>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Echarts",
+  props: {
+    echartData: {
+      type: Object,
+      default: () => ({
+        tendencyChartTitle: "",
+        legendData: [],
+        xAxisData: [],
+        seriesData: [],
+      }),
+    },
+  },
+  data() {
+    return {
+      xFontColor: "rgba(256,256,256,1)",
+    };
+  },
+  created() {},
+  watch: {
+    echartData: {
+      //深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        this.echart();
+      },
+      deep: true, //true 深度监听
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.echart();
+    });
+  },
+  methods: {
+    // 绘制图标
+    echart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("tendencyChart")
+      );
+      myChart.clear();
+      // 绘制图表
+      myChart.setOption({
+        color: [
+          "#ee6666",
+          "#91cc75",
+          "#fac858",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+          "#03bcff",
+        ],
+
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            var relVal = params[0].name;
+            for (var i = 0; i < params.length; i++) {
+              relVal +=
+                "<br/>" + params[i].seriesName + " : " + params[i].value;
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          icon: "circle",
+          data: this.echartData.legendData,
+          textStyle: {
+            color: this.xFontColor,
+          },
+          lineStyle: {
+            width: 2.5,
+          },
+        },
+        grid: {
+          left: "10%",
+          right: "10%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        dataZoom: [
+          {
+            id: "dataZoomX",
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter",
+            start: 0,
+            end: 5,
+            startValue: 0,
+            endValue: 10,
+            textStyle: {
+              color: this.xFontColor,
+            },
+          },
+        ],
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.echartData.xAxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+            show: false,
+          },
+        },
+        series: this.echartData.seriesData,
+        // series: this.echartData.seriesData,
+      });
+      window.onresize = function () {
+        myChart.resize();
+      };
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less">
+.homechart {
+  width: 100%;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+  }
+  #tendencyChart {
+    height: 320px;
+  }
+  #noDataBox {
+    height: 320px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .noPic {
+      text-align: center;
+      i {
+        font-size: 120px;
+        color: #27546f;
+        margin-bottom: 24px;
+      }
+      p {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+}
+
+/* @media screen and (max-width: 1440px) {
+  #tendencyChart {
+    height: 230px;
+  }
+} */
+</style>
diff --git a/src/views/homePage/arrester/index.vue b/src/views/homePage/arrester/index.vue
index 3c2a375d..d24fb6c2 100644
--- a/src/views/homePage/arrester/index.vue
+++ b/src/views/homePage/arrester/index.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { monitoringListApi } from "@/utils/api/index";
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
 
 export default {
   name: "arrester",
@@ -29,6 +29,22 @@ export default {
     return {
       pageCardTitle: "避雷器",
       arresterData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
     };
   },
   created() {
@@ -48,8 +64,91 @@ export default {
         });
     },
     //点击当前行
-    handleRowClick(row, column, event) {
+    handleRowClick(row) {
       console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
   },
 };
diff --git a/src/views/homePage/clamp/index.vue b/src/views/homePage/clamp/index.vue
index 7e15e6f6..8e5d0751 100644
--- a/src/views/homePage/clamp/index.vue
+++ b/src/views/homePage/clamp/index.vue
@@ -21,13 +21,29 @@
 </template>
 
 <script>
-import { monitoringListApi } from "@/utils/api/index";
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
 export default {
   name: "clamp",
   data() {
     return {
       pageCardTitle: "铁芯",
       clmpData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
     };
   },
   created() {
@@ -47,8 +63,92 @@ export default {
         });
     },
     //点击当前行
-    handleRowClick(row, column, event) {
+    //点击当前行
+    handleRowClick(row) {
       console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
   },
 };
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 5a5eeead..71cbe7c3 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -3,15 +3,19 @@
     <div class="homeLeft">
       <div class="pageleftBox">
         <!-- <div class="divTop">我是上面</div> -->
-        <oilChromatography></oilChromatography>
-        <clamp></clamp>
-        <windingTemperature></windingTemperature>
+        <oilChromatography @dataDispose="dataDispose"></oilChromatography>
+        <clamp @dataDispose="dataDispose"></clamp>
+        <windingTemperature @dataDispose="dataDispose"></windingTemperature>
       </div>
     </div>
     <div class="homeCenter">
       <div class="pagecenterBox">
-        <div class="divTop"></div>
-        <div class="divcenter"></div>
+        <div class="divTop">
+          <homeChart :echartData="echartData"></homeChart>
+        </div>
+        <div class="divcenter">
+          <partialDischarges @dataDispose="dataDispose"></partialDischarges>
+        </div>
         <div class="divBottom">
           <warnMessage></warnMessage>
         </div>
@@ -23,10 +27,10 @@
           <monitoringDevice></monitoringDevice>
         </div>
         <div class="divcenter">
-          <sf6></sf6>
+          <sf6 @dataDispose="dataDispose"></sf6>
         </div>
         <div class="divBottom">
-          <arrester></arrester>
+          <arrester @dataDispose="dataDispose"></arrester>
         </div>
       </div>
     </div>
@@ -41,7 +45,9 @@
 // import pageCenter from "./components/pageCenter";
 import oilChromatography from "./oilChromatography/index.vue"; //油色谱
 import clamp from "./clamp/index.vue"; //铁芯夹件
-import windingTemperature from "./windingTemperature/index.vue"; //绕组测温
+import windingTemperature from "./windingTemperature/index.vue"; //夹件
+import homeChart from "./Echarts/index"; //折线图
+import partialDischarges from "./partialDischarges/index.vue"; //局放
 
 import monitoringDevice from "./monitoringDevice/index.vue"; //装置总数
 import sf6 from "./sf6/index.vue"; //sf6环境
@@ -54,18 +60,42 @@ export default {
     oilChromatography,
     clamp,
     windingTemperature,
+    partialDischarges,
+    homeChart,
     monitoringDevice,
     sf6,
     arrester,
     warnMessage,
   },
   data() {
-    return {};
+    return {
+      echartData: {
+        // 默认的图表数据
+        legendData: [],
+        xAxisData: [],
+        tendencyChartTitle: "",
+        seriesData: [],
+      },
+    };
   },
   created() {},
   mounted() {},
   watch: {},
-  methods: {},
+  methods: {
+    dataDispose(legendData, xAxisData, seriesData, title) {
+      console.log(legendData);
+      console.log(xAxisData);
+      console.log(seriesData);
+      console.log(title);
+      this.echartData = {
+        legendData: legendData,
+        xAxisData: xAxisData,
+        seriesData: seriesData,
+        tendencyChartTitle: title,
+      };
+      console.log(this.echartData);
+    },
+  },
 };
 </script>
 <style lang="less">
@@ -103,7 +133,11 @@ export default {
       .divcenter {
         height: 190px;
         margin-bottom: 10px;
-        background: url(../../assets/card3Bg.png) no-repeat center;
+        background: rgba(8, 9, 36, 0.28);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: inset 0 4px 44px 0 #106cde;
+        //background: url(../../assets/card2Bg.png) no-repeat center;
         background-size: 100% 100%;
       }
       .divBottom {
diff --git a/src/views/homePage/oilChromatography/index.vue b/src/views/homePage/oilChromatography/index.vue
index b61d1e53..cf2c7496 100644
--- a/src/views/homePage/oilChromatography/index.vue
+++ b/src/views/homePage/oilChromatography/index.vue
@@ -5,6 +5,7 @@
     <div class="cardContent">
       <el-table
         :data="oilData"
+        ref="oilTableref"
         height="100%"
         border
         highlight-current-row
@@ -21,18 +22,35 @@
 </template>
 
 <script>
-import { monitoringListApi } from "@/utils/api/index";
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
 export default {
   name: "oil",
   data() {
     return {
       pageCardTitle: "油色谱",
       oilData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
     };
   },
   created() {
     this.getoildata();
   },
+  mounted() {},
   methods: {
     getoildata() {
       monitoringListApi({
@@ -41,14 +59,99 @@ export default {
         .then((res) => {
           console.log(res);
           this.oilData = res.data.content;
+          this.handleRowClick(this.oilData[0]);
+          this.$refs.oilTableref.setCurrentRow(this.oilData[0]);
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
         });
     },
     //点击当前行
-    handleRowClick(row, column, event) {
+    handleRowClick(row) {
       console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
   },
 };
diff --git a/src/views/homePage/partialDischarges/index.vue b/src/views/homePage/partialDischarges/index.vue
new file mode 100644
index 00000000..db75cee6
--- /dev/null
+++ b/src/views/homePage/partialDischarges/index.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="partialDischargesbox">
+    <h3>
+      <span>{{ pageCardTitle }}</span>
+      <el-select
+        v-model="partialValue"
+        placeholder="请选择"
+        @change="changePartial"
+      >
+        <el-option
+          v-for="item in partialOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </h3>
+    <div class="cardContent">
+      <el-table
+        :data="partialDischargesData"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
+
+export default {
+  name: "arrester",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "局放",
+      partialDischargesData: [],
+      partialValue: 10,
+      partialOptions: [
+        {
+          value: 10,
+          label: "局部放电A相",
+        },
+        {
+          value: 25,
+          label: "局部放电B相",
+        },
+        {
+          value: 26,
+          label: "局部放电C相",
+        },
+      ],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
+    };
+  },
+  created() {
+    this.getarresterdata();
+  },
+  methods: {
+    changePartial(val) {
+      console.log(val);
+      this.partialValue = val;
+      this.getarresterdata();
+    },
+    getarresterdata() {
+      monitoringListApi({
+        typeId: this.partialValue,
+      })
+        .then((res) => {
+          console.log(res);
+          this.partialDischargesData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.partialDischargesbox {
+  height: 100%;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    //justify-content: space-between;
+    align-items: center;
+    .el-select {
+      margin-left: 12px;
+      .el-input__inner {
+        background-color: transparent;
+        background-image: none;
+        border-radius: 4px;
+        border: 1px solid #03bcff;
+        color: #03bcff;
+      }
+    }
+  }
+  .cardContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/homePage/sf6/index.vue b/src/views/homePage/sf6/index.vue
index f42206f8..a9ca0434 100644
--- a/src/views/homePage/sf6/index.vue
+++ b/src/views/homePage/sf6/index.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 <script>
-import { monitoringListApi } from "@/utils/api/index";
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
 export default {
   name: "sf6",
   components: {},
@@ -28,6 +28,22 @@ export default {
       pageCardTitle: "SF6环境",
       devArr: "",
       sf6Data: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
     };
   },
   mounted() {
@@ -58,8 +74,91 @@ export default {
         });
     },
     //点击当前行
-    handleRowClick(row, column, event) {
+    handleRowClick(row) {
       console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
   },
 };
diff --git a/src/views/homePage/windingTemperature/index.vue b/src/views/homePage/windingTemperature/index.vue
index c4cf9851..00ff256c 100644
--- a/src/views/homePage/windingTemperature/index.vue
+++ b/src/views/homePage/windingTemperature/index.vue
@@ -21,13 +21,29 @@
 </template>
 
 <script>
-import { monitoringListApi } from "@/utils/api/index";
+import { monitoringListApi, getDetailApi } from "@/utils/api/index";
 export default {
   name: "windingTemperature",
   data() {
     return {
       pageCardTitle: "夹件",
       windData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
     };
   },
   created() {
@@ -47,8 +63,92 @@ export default {
         });
     },
     //点击当前行
-    handleRowClick(row, column, event) {
+    //点击当前行
+    handleRowClick(row) {
       console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
   },
 };