From fc02dca087aa5403c775b904856057fa7591ab9c Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 30 Oct 2024 15:59:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar.vue                    |  13 +-
 src/router/index.js                           |  10 +-
 src/views/icdConfig/index.vue                 |   4 +-
 src/views/iceserver/index.vue                 |  15 +-
 .../realTimeData/components/historyDialog.vue | 779 ++++++++++++++++++
 src/views/realTimeData/components/line.vue    | 119 +++
 src/views/realTimeData/index.vue              | 488 +++++++++++
 src/views/serverIcd/index.vue                 |   4 +-
 8 files changed, 1423 insertions(+), 9 deletions(-)
 create mode 100644 src/views/realTimeData/components/historyDialog.vue
 create mode 100644 src/views/realTimeData/components/line.vue
 create mode 100644 src/views/realTimeData/index.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a19d5f20..c620efb7 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -43,8 +43,19 @@ export default {
         },
         {
           path: "/dataReport",
-          name: "数据报表",
+          name: "数据展示",
+          subs: [
+            {
+              path: "/dataReport",
+              name: "数据报表",
+            },
+            {
+              path: "/realtimeData",
+              name: "实时数据",
+            },
+          ],
         },
+
         {
           path: "/equipment",
           name: "设备台账管理",
diff --git a/src/router/index.js b/src/router/index.js
index d5165f12..2bddaff8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,11 +25,19 @@ const routes = [
       {
         path: "/dataReport",
         component: () => import("../views/dataReport/index.vue"),
-        name: "dataR1eport",
+        name: "dataReport",
         meta: {
           title: "数据报表",
         },
       },
+      {
+        path: "/realtimeData",
+        component: () => import("../views/realTimeData/index.vue"),
+        name: "realtimeData",
+        meta: {
+          title: "实时数据",
+        },
+      },
       {
         path: "/equipment",
         component: () => import("../views/equipment/index.vue"),
diff --git a/src/views/icdConfig/index.vue b/src/views/icdConfig/index.vue
index 79e88112..48b645fe 100644
--- a/src/views/icdConfig/index.vue
+++ b/src/views/icdConfig/index.vue
@@ -2,7 +2,7 @@
   <div class="icdConfig">
     <div class="configHead">
       <div class="upgradeBox">
-        <h3 class="lableBox">文件上传：</h3>
+        <h3 class="lableBox">客户端ICD上传：</h3>
         <el-upload
           class="upload-demo"
           ref="upload"
@@ -436,7 +436,7 @@ export default {
       .lableBox {
         font-size: 14px;
         font-weight: normal;
-        width: 78px;
+        width: 114px;
       }
       .upload-demo {
         position: relative;
diff --git a/src/views/iceserver/index.vue b/src/views/iceserver/index.vue
index 7881f034..0cdc9241 100644
--- a/src/views/iceserver/index.vue
+++ b/src/views/iceserver/index.vue
@@ -16,7 +16,7 @@
           </div>
           <div class="concard">
             <p>
-              filename：<span class="filename" :title="item.filename">{{
+              icd文件：<span class="filename" :title="item.filename">{{
                 item.filename
               }}</span>
             </p>
@@ -58,14 +58,14 @@
       >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span> 订阅转发</span>
+            <span> 订阅数据到服务端</span>
           </div>
           <div class="concard">
             <el-table
               :data="ledList"
               border
               style="width: 100%"
-              max-height="400px"
+              height="calc(100% - 0px)"
             >
               <el-table-column prop="name" label="名称" width="150px">
               </el-table-column>
@@ -320,6 +320,7 @@ export default {
     margin-top: 20px;
     //height: 184px;
     margin-right: 16px;
+
     .el-card__header {
       padding: 12px;
     }
@@ -363,12 +364,20 @@ export default {
     width: 560px;
     margin-top: 20px;
     margin-left: 12px;
+    height: calc(100% - 40px);
     //height: 472px;
+    .el-card {
+      height: 100%;
+    }
     .el-card__header {
       padding: 12px;
     }
     .el-card__body {
       padding: 12px;
+      height: calc(100% - 70px);
+      .concard {
+        height: 100%;
+      }
     }
   }
 }
diff --git a/src/views/realTimeData/components/historyDialog.vue b/src/views/realTimeData/components/historyDialog.vue
new file mode 100644
index 00000000..9e6bd3a1
--- /dev/null
+++ b/src/views/realTimeData/components/historyDialog.vue
@@ -0,0 +1,779 @@
+<template>
+  <el-dialog
+    title="数据展示"
+    :visible.sync="dialogVisible"
+    :fullscreen="true"
+    class="dataDialog"
+  >
+    <div class="dataReport">
+      <div class="reportTable">
+        <div class="reportHead">
+          <h3>数据展示</h3>
+          <div class="searchMain">
+            <el-form :inline="true" :model="formdata" class="demo-form-inline">
+              <el-form-item label="开始日期">
+                <el-date-picker
+                  @change="changestartdate"
+                  v-model="formdata.starttime"
+                  :picker-options="pickerOptions"
+                  :clearable="false"
+                  type="date"
+                  placeholder="开始日期"
+                  :default-time="['00:00:00']"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="结束日期">
+                <el-date-picker
+                  @change="changeenddate"
+                  v-model="formdata.endtime"
+                  :clearable="false"
+                  :picker-options="pickerOptions"
+                  type="date"
+                  :default-time="['23:59:59']"
+                  placeholder="结束日期"
+                  class="ml10"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-select v-model="formdata.dayValue" placeholder="请选择">
+                  <el-option
+                    v-for="item in dayOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  class="searchBtn"
+                  @click="handleSearch"
+                  >查询</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="reportContain">
+          <el-tabs
+            v-model="activeName"
+            type="border-card"
+            @tab-click="handleClick"
+          >
+            <el-tab-pane label="数据" name="dataTab">
+              <div class="dataTabHead">
+                <h3>{{ crrrentName }}</h3>
+                <div class="exportbtn">
+                  <el-button
+                    type="primary"
+                    class="export"
+                    @click="handleExport"
+                    :disabled="tableData.length == 0"
+                    >导出全部</el-button
+                  >
+                  <el-button
+                    type="primary"
+                    class="export"
+                    @click="handleCurrentExport"
+                    :disabled="tableData.length == 0"
+                    >导出当前</el-button
+                  >
+                </div>
+              </div>
+              <div class="tableBox" v-loading="tableLoading">
+                <div class="leftTable">
+                  <el-checkbox
+                    :indeterminate="isIndeterminate"
+                    v-model="checkAll"
+                    @change="handleCheckAllChange"
+                    >全选</el-checkbox
+                  >
+
+                  <el-checkbox-group
+                    v-model="checkedList"
+                    @change="handleCheckedCitiesChange"
+                  >
+                    <el-checkbox
+                      v-for="item in optionList"
+                      :label="item"
+                      :key="item"
+                      >{{ item }}</el-checkbox
+                    >
+                  </el-checkbox-group>
+                </div>
+                <div class="rightTable">
+                  <el-table
+                    :data="tableData"
+                    border
+                    stripe
+                    height="calc(100% - 40px)"
+                  >
+                    <!-- <el-table-column type="index" width="50"> </el-table-column> -->
+                    <el-table-column
+                      prop="acquisitionTime"
+                      label="采集时间"
+                      width="148"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                      min-width="120"
+                      v-for="(column, index) in columns"
+                      :key="index"
+                      :label="
+                        column.fieldDesc +
+                        (column.unit == null ? '' : '(' + column.unit + ')')
+                      "
+                      :prop="column.field"
+                    ></el-table-column>
+                  </el-table>
+                  <div class="pageNation">
+                    <el-pagination
+                      @current-change="handleCurrentChange"
+                      @size-change="handleSizeChange"
+                      :current-page="page"
+                      :page-size="pageSize"
+                      :page-sizes="[20, 40, 100]"
+                      layout="sizes, prev, pager, next, jumper,total"
+                      :total="total"
+                    >
+                    </el-pagination>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="图表" name="chartTab">
+              <div class="dataTabHead">
+                <h3>{{ crrrentName }}</h3>
+              </div>
+              <div class="echartsBox">
+                <div
+                  id="deviceEchart"
+                  class="chartClass"
+                  v-if="chartDataArr.total !== 0"
+                  v-loading="chartLoading"
+                >
+                  <lineChart :chartdata="chartDataArr"></lineChart>
+                </div>
+
+                <el-empty v-else description="暂无图表数据"></el-empty>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getTreeApi, getDetailApi, getexportApi } from "@/utils/api/index";
+import lineChart from "./line";
+export default {
+  components: { lineChart },
+  data() {
+    return {
+      dialogVisible: false,
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
+      currentId: "", //选择的id
+      crrrentName: "",
+      formdata: {
+        dayValue: -1,
+      }, //查询定义的form数据
+      dayOptions: [
+        {
+          value: -1,
+          label: "全部数据",
+        },
+        {
+          value: 1,
+          label: "每日最多1条",
+        },
+        {
+          value: 2,
+          label: "每日最多2条",
+        },
+        {
+          value: 4,
+          label: "每日最多4条",
+        },
+        {
+          value: 6,
+          label: "每日最多6条",
+        },
+      ],
+      activeName: "dataTab",
+      tableLoading: false, //loading
+      checkAll: true, //是否全选
+      optionList: [], //左侧check列表
+      checkedList: [], //选中
+      formTheadOptions: [],
+      isIndeterminate: false,
+      key: 1,
+      tableData: [], //表格数据
+      columns: [], //表头数据
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      tabName: "dataTab",
+      //图表所有数据
+      chartDataArr: [], //数据
+      chartLoading: false,
+    };
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+    checkedList(valArr) {
+      console.log("我是监听的", valArr);
+      this.columns = this.formTheadOptions.filter(
+        (i) => valArr.indexOf(i.fieldDesc) >= 0
+      );
+      this.key = this.key + 1; // 为了保证table 每次都会重渲
+    },
+  },
+  created() {
+    const thirtyDaysAgo = new Date();
+    this.$set(
+      this.formdata,
+      "starttime",
+      new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+    );
+    console.log(this.formdata.starttime);
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.$set(this.formdata, "endtime", currentDate);
+    console.log("我是开始时间", this.formdata.starttime);
+    console.log("我是结束时间", currentDate);
+  },
+  methods: {
+    display(value) {
+      this.dialogVisible = true;
+      this.currentId = value.id;
+      this.crrrentName = value.name;
+      this.getAllTimeTable();
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        val.setHours(23); // 设置小时为23
+        val.setMinutes(59); // 设置分钟为59
+        val.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
+    getAllTimeTable() {
+      getDetailApi({
+        id: this.currentId,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            if (res.data.content.length == 0) {
+              // this.formdata.endtime = new Date();
+              // const thirtyDaysAgo = new Date(this.formdata.endtime);
+              // this.$set(
+              //   this.formdata,
+              //   "starttime",
+              //   new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+              // );
+              const thirtyDaysAgo = new Date();
+              this.$set(
+                this.formdata,
+                "starttime",
+                new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+              );
+              console.log(this.formdata.starttime);
+              const currentDate = new Date(); // 获取当前时间
+              console.log("asddddadadadadadasd", currentDate);
+              currentDate.setHours(23); // 设置小时为23
+              currentDate.setMinutes(59); // 设置分钟为59
+              currentDate.setSeconds(59); // 设置秒数为59
+              this.$set(this.formdata, "endtime", currentDate);
+              console.log("我是开始时间", this.formdata.starttime);
+              console.log("我是结束时间", currentDate);
+            } else {
+              console.log(res.data.content[0].acquisitionTime);
+              this.formdata.endtime = res.data.content[0].acquisitionTime;
+              const qet = new Date(this.formdata.endtime);
+              qet.setHours(23); // 设置小时为23
+              qet.setMinutes(59); // 设置分钟为59
+              qet.setSeconds(59); // 设置秒数为59
+              this.$set(this.formdata, "endtime", qet);
+
+              const thirtyDaysAgo = new Date(this.formdata.endtime);
+              thirtyDaysAgo.setHours(0); // 设置小时为23
+              thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+              thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+              this.$set(
+                this.formdata,
+                "starttime",
+                new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+              );
+            }
+
+            this.handleSearch();
+          } else {
+            this.tableData = [];
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //查询日期数据
+    handleSearch() {
+      //开始时间和结束时间
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      console.log(this.formdata.starttime);
+      console.log(this.formdata.endtime);
+      if (
+        this.formdata.starttime == "Invalid date" ||
+        this.formdata.endtime == "Invalid date"
+      ) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "请选择开始时间和结束时间",
+          type: "warning",
+        });
+      }
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+
+      console.log(this.tabName);
+      if (this.tabName == "dataTab") {
+        this.getDetailTable(
+          this.currentId,
+          this.formdata.dayValue,
+          this.formdata.starttime,
+          this.formdata.endtime
+        );
+      } else if (this.tabName == "chartTab") {
+        this.getEchartData(
+          this.currentId,
+          this.formdata.starttime,
+          this.formdata.endtime
+        );
+      }
+    },
+    //获取数据接口
+    getDetailTable(id, dayval, stime, eTime) {
+      console.log(id, stime, eTime);
+      this.tableLoading = true;
+      // 创建一个空对象来存储API的参数
+      const apiParams = {
+        id: id,
+        startTime: stime,
+        endTime: eTime,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      };
+
+      // 如果dayval不等于-1，则添加numPerDay参数
+      if (dayval !== -1) {
+        apiParams.numPerDay = dayval;
+      }
+      getDetailApi(apiParams)
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.total = res.data.total; //总共多少页
+            this.tableData = res.data.content; //表格数据
+            this.columns = res.data.points; //表头数据
+            console.log(this.columns);
+            this.formTheadOptions = res.data.points;
+
+            //左侧checkbox数据
+            this.optionList = res.data.points.map((i) => {
+              console.log(i);
+              return i.fieldDesc;
+            });
+            console.log(this.optionList);
+            this.checkedList = this.optionList;
+            this.tableLoading = false;
+          } else {
+            this.tableLoading = false;
+            this.tableData = [];
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          this.tableLoading = false;
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //左侧全选
+    handleCheckAllChange(val) {
+      console.log(val, this.optionList);
+      this.checkedList = val ? this.optionList : [];
+      this.isIndeterminate = false;
+      console.log(val, "点击了全选");
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.optionList.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.optionList.length;
+      console.log(value, "点击了某个");
+    },
+    //图表切换
+    handleClick(tab, event) {
+      console.log(tab, event);
+      this.tabName = tab.name;
+      if (this.tabName === "chartTab") {
+        this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
+        this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
+        this.getEchartData(
+          this.currentId,
+          this.formdata.starttime,
+          this.formdata.endtime
+        );
+      } else {
+        this.getDetailTable(
+          this.currentId,
+          this.formdata.dayValue,
+          this.formdata.starttime,
+          this.formdata.endtime
+        );
+      }
+    },
+    //导出数据
+    handleExport() {
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      window.location.href =
+        "/cac-api/nsensor/export?id=" +
+        this.currentId +
+        "&numPerDay=" +
+        this.formdata.dayValue +
+        "&startTime=" +
+        this.formdata.starttime +
+        "&endTime=" +
+        this.formdata.endtime;
+      // getexportApi({
+      //   id: this.currentId,
+      //   startTime: this.formdata.starttime,
+      //   endTime: this.formdata.endtime,
+      //   // pageNum: this.page,
+      //   // pageSize: this.pageSize,
+      // })
+      //   .then((res) => {
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err); //代码错误、请求失败捕获
+      //   });
+    },
+    //导出当前
+    handleCurrentExport() {
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      window.location.href =
+        "/cac-api/nsensor/export?id=" +
+        this.currentId +
+        "&numPerDay=" +
+        this.formdata.dayValue +
+        "&startTime=" +
+        this.formdata.starttime +
+        "&endTime=" +
+        this.formdata.endtime +
+        "&pageNum=" +
+        this.page +
+        "&pageSize=" +
+        this.pageSize;
+    },
+
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.tableData = [];
+      this.getDetailTable(
+        this.currentId,
+        this.formdata.dayValue,
+        this.formdata.starttime,
+        this.formdata.endtime
+      );
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.tableData = [];
+      this.getDetailTable(
+        this.currentId,
+        this.formdata.dayValue,
+        this.formdata.starttime,
+        this.formdata.endtime
+      );
+    },
+    //获取折线图
+    getEchartData(id, stime, eTime) {
+      this.chartLoading = true;
+      this.chartDataArr = [];
+      getDetailApi({
+        id: id,
+        timeAsc: 1,
+        startTime: stime,
+        endTime: eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.chartLoading = false;
+            this.chartDataArr = res.data; //表格数据
+            console.log("获取全部数据", this.chartDataArr);
+            //获取数据之后执行绘制echarts图
+          } else {
+            this.chartLoading = false;
+            this.chartDataArr = [];
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.dataDialog {
+  .el-dialog {
+    background-image: url(../../../assets/bg_CAC.png);
+    background-size: cover;
+    background-position: center center;
+    .el-dialog__title {
+      color: #fff;
+    }
+    .el-dialog__headerbtn {
+      background: #337ab7;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 12px;
+    height: calc(100% - 78px);
+  }
+  .dataReport {
+    height: 100%;
+
+    .reportTable {
+      height: 100%;
+      overflow-x: hidden;
+      background: rgba(8, 9, 36, 0.28);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      box-shadow: inset 0 4px 44px 0 #106cde;
+      padding: 0px 12px;
+      .reportHead {
+        height: 40px;
+        line-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        h3 {
+          font-size: 14px;
+          color: #fff;
+          font-weight: normal;
+          height: 40px;
+          line-height: 40px;
+          .exporBtn {
+            margin-left: 12px;
+          }
+        }
+        .searchMain {
+          display: flex;
+          align-items: center;
+          .el-form {
+            display: flex;
+            align-items: center;
+            .el-form-item--small.el-form-item {
+              margin-bottom: 0px;
+              display: flex;
+              align-items: center;
+              .el-form-item__label {
+                font-size: 14px;
+                color: #fff;
+              }
+              .el-input {
+                width: 150px;
+              }
+            }
+          }
+        }
+      }
+      .reportContain {
+        height: calc(100% - 52px);
+        //background: #fcc;
+        margin-top: 12px;
+        .el-tabs--border-card {
+          height: calc(100% - 2px);
+          .el-tabs__content {
+            padding: 0px;
+            height: calc(100% - 38px);
+            // background: #fcc;
+            .el-tab-pane {
+              height: 100%;
+            }
+          }
+          .dataTabHead {
+            height: 36px;
+            line-height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #fff;
+            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+            -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+            padding: 0px 12px;
+            margin-top: 12px;
+            h3 {
+              font-size: 14px;
+              color: #333;
+              font-weight: normal;
+            }
+            .exportbtn {
+              display: flex;
+            }
+          }
+          .tableBox {
+            // padding: 0 12px;
+            height: calc(100% - 50px);
+            display: flex;
+            .leftTable {
+              width: 250px;
+              //background: #fcc;
+              height: 100%;
+              padding-left: 12px;
+              .el-checkbox {
+                white-space: inherit;
+                margin-top: 12px;
+                margin-right: 0px;
+                display: flex;
+                align-items: center;
+              }
+            }
+            .rightTable {
+              margin-left: 8px;
+              flex-grow: 1; /* 右边内容自适应剩余空间 */
+              overflow-x: hidden;
+              .el-table {
+                thead {
+                  color: #333;
+                }
+                color: #333;
+                .el-table__cell {
+                  text-align: center;
+                }
+              }
+              //分页
+              .pageNation {
+                margin-top: 6px;
+                display: flex;
+                justify-content: flex-end;
+              }
+            }
+          }
+          .echartsBox {
+            width: calc(100% - 32px);
+            height: calc(100% - 80px);
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333;
+            .chartClass {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/realTimeData/components/line.vue b/src/views/realTimeData/components/line.vue
new file mode 100644
index 00000000..ef5fc28d
--- /dev/null
+++ b/src/views/realTimeData/components/line.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="lineChart" ref="lineChart"></div>
+</template>
+<script>
+export default {
+  props: ["chartdata"],
+  data() {
+    return {};
+  },
+  watch: {
+    chartdata: function (newValue, oldValue) {
+      this.$nextTick(() => {
+        // 通过 DOM API 更新文本
+        if (this.chartdata.length !== 0) {
+          this.drawLine();
+        }
+      });
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 通过 DOM API 更新文本
+      console.log(this.chartdata);
+      if (this.chartdata.length !== 0) {
+        this.drawLine();
+      }
+    });
+  },
+  methods: {
+    drawLine() {
+      console.log("我是曲线图");
+      console.log(this.chartdata.points);
+      var pointsData = this.chartdata.points;
+      var legendData = [];
+      var xData = this.chartdata.content.map((item) => item.acquisitionTime);
+      var seriseData = [];
+      var yAxisData = [];
+
+      for (var i = 0; i < pointsData.length; i++) {
+        console.log(pointsData[i]);
+        console.log(pointsData[i].fieldDesc);
+        seriseData.push({
+          name: pointsData[i].fieldDesc,
+          type: "line",
+          yAxisIndex: i,
+          data: pointsData[i].data,
+          smooth: true,
+        });
+        legendData.push(pointsData[i].fieldDesc);
+        console.log(legendData);
+        yAxisData.push({
+          name: pointsData[i].fieldDesc,
+          type: "value",
+          position: i % 2 == 0 ? "left" : "right",
+          offset: i + 1 <= 2 ? 0 : (Math.ceil((i + 1) / 2) - 1) * 40,
+          // 整条y轴
+          axisLine: {
+            show: true,
+          },
+          // y轴上的小横线
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            formatter: "{value}",
+          },
+        });
+      }
+      let myChart = this.$echarts.init(this.$refs.lineChart);
+      //myChart.removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance
+      if (this.$refs.lineChart.hasAttribute("_echarts_instance_")) {
+        console.log(this.$refs.lineChart);
+        this.$refs.lineChart.removeAttribute("_echarts_instance_");
+      }
+      // 绘制图表
+      myChart.setOption({
+        //animation: false,
+        legend: {
+          data: legendData,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 80,
+            end: 100,
+          },
+          {
+            start: 80,
+            end: 100,
+          },
+        ],
+        grid: {
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          name: "时间",
+          boundaryGap: false,
+          data: xData,
+        },
+        yAxis: yAxisData,
+        series: seriseData,
+      });
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+.lineChart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/realTimeData/index.vue b/src/views/realTimeData/index.vue
new file mode 100644
index 00000000..a3c6e94d
--- /dev/null
+++ b/src/views/realTimeData/index.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="realtimeData">
+    <div class="realHead">
+      <div class="greyBox">
+        <div class="selectBox">
+          <h4>选择区域</h4>
+          <el-radio-group
+            v-model="areaVal"
+            size="mini"
+            @input="handleAreaChange"
+          >
+            <el-radio
+              v-for="item in areaAllList"
+              :key="item.id"
+              :label="item.id"
+              border
+            >
+              {{ item.mc }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+        <div class="selectBox">
+          <h4>选择主设备</h4>
+          <div class="zsbBox" v-if="zsbAllList.length !== 0">
+            <el-radio-group
+              v-model="zsbVal"
+              size="mini"
+              @input="handlezsbChange"
+            >
+              <el-radio
+                v-for="item in zsbAllList"
+                :key="item.id"
+                :label="item.id"
+                border
+              >
+                {{ item.mc }}
+              </el-radio>
+            </el-radio-group>
+          </div>
+          <div class="zsbBox" v-else>
+            <p class="empytBox">暂无数据</p>
+          </div>
+        </div>
+        <!-- <div class="selectBox">
+          <h4>选则监控设备</h4>
+          <el-radio-group
+            v-model="jksbVal"
+            size="small"
+            @change="handlejksbChange"
+          >
+            <el-radio
+              v-for="item in jksbAllList"
+              :key="item.id"
+              :label="item.id"
+              border
+            >
+              {{ item.name }}
+            </el-radio>
+          </el-radio-group>
+        </div> -->
+      </div>
+    </div>
+    <div class="realcontain">
+      <div class="loadingbox" v-loading="dataLoading">
+        <div class="cardBox" v-if="jksbAllList.length !== 0">
+          <el-card
+            class="box-card"
+            v-for="(item, index) in jksbAllList"
+            :key="index"
+          >
+            <div slot="header" class="clearfix">
+              <span class="headTitle" :title="item.name">{{ item.name }}</span>
+              <el-button
+                style="float: right; padding: 3px 0"
+                type="text"
+                @click="handlehistory(item)"
+                >历史数据</el-button
+              >
+            </div>
+            <el-tooltip placement="top-start">
+              <div slot="content">
+                <div class="textitem">
+                  <h3 class="headTitle" :title="item.name">{{ item.name }}</h3>
+                  <p>
+                    采集时间：
+                    <span v-if="item.lastData" class="timeclass">
+                      {{ item.lastData.acquisitionTime }}
+                    </span>
+                    <span v-else class="timeclass"> -- </span>
+                  </p>
+                  <!-- 遍历 typePoints 显示数据 -->
+                  <div
+                    class="dataclass"
+                    v-for="fieldDesc in item.typePoints"
+                    :key="fieldDesc.field"
+                  >
+                    <strong
+                      >{{ fieldDesc.fieldDesc || fieldDesc.field }}:</strong
+                    >
+                    <span
+                      v-if="item.lastData && fieldDesc.field in item.lastData"
+                    >
+                      {{ getDataByField(item, fieldDesc.field) }}
+                    </span>
+                    <span v-else> -- </span>
+                  </div>
+                  <!-- 显示 lastData 中有但 typePoints 中没有的字段 -->
+                  <div
+                    class="dataclass"
+                    v-for="(value, key) in item.lastData"
+                    :key="key"
+                    v-if="
+                      !item.typePoints.some((fd) => fd.field === key) &&
+                      key !== 'acquisitionTime'
+                    "
+                  >
+                    <strong>{{ key }}:</strong>
+                    {{ value }}
+                  </div>
+                </div>
+              </div>
+              <div class="textitem">
+                <p>
+                  采集时间：
+                  <span v-if="item.lastData" class="timeclass">
+                    {{ item.lastData.acquisitionTime }}
+                  </span>
+                  <span v-else class="timeclass"> -- </span>
+                </p>
+                <!-- 遍历 typePoints 显示数据 -->
+                <div
+                  class="dataclass"
+                  v-for="fieldDesc in item.typePoints"
+                  :key="fieldDesc.field"
+                >
+                  <strong>{{ fieldDesc.fieldDesc || fieldDesc.field }}:</strong>
+                  <span
+                    v-if="item.lastData && fieldDesc.field in item.lastData"
+                  >
+                    {{ getDataByField(item, fieldDesc.field) }}
+                  </span>
+                  <span v-else> -- </span>
+                </div>
+                <!-- 显示 lastData 中有但 typePoints 中没有的字段 -->
+                <div
+                  class="dataclass"
+                  v-for="(value, key) in item.lastData"
+                  :key="key"
+                  v-if="
+                    !item.typePoints.some((fd) => fd.field === key) &&
+                    key !== 'acquisitionTime'
+                  "
+                >
+                  <strong>{{ key }}:</strong>
+                  {{ value }}
+                </div>
+              </div>
+            </el-tooltip>
+          </el-card>
+        </div>
+        <div class="emptyBox" v-else>
+          <el-empty description="暂无数据"></el-empty>
+        </div>
+      </div>
+    </div>
+    <historyDialog ref="historyDialogRef"></historyDialog>
+  </div>
+</template>
+<script>
+import {
+  areaListAllApi,
+  zsbListAllApi,
+  monitoringListAllApi,
+  getDetailApi,
+} from "@/utils/api/index";
+import historyDialog from "./components/historyDialog";
+export default {
+  name: "realtimeData",
+  components: { historyDialog },
+  data() {
+    return {
+      areaVal: null,
+      areaAllList: [],
+      zsbVal: null,
+      zsbAllList: [],
+
+      jksbAllList: [],
+      dataLoading: false,
+      intervalId: null, // 用于保存 setInterval 的 ID
+    };
+  },
+
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.areaVal = JSON.parse(localStorage.getItem("areaVal"));
+      this.zsbVal = JSON.parse(localStorage.getItem("zsbVal"));
+      this.getAreaAllList();
+    });
+  },
+  methods: {
+    //获取所有区间间隔
+    getAreaAllList() {
+      areaListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.areaAllList = res.data;
+
+          // 尝试从 localStorage 获取 areaVal
+          const storedAreaVal = localStorage.getItem("areaVal");
+          if (storedAreaVal) {
+            // 如果 localStorage 中有 areaVal，则将其解析为数字（假设 id 是数字）并赋值给 this.areaVal
+            this.areaVal = JSON.parse(storedAreaVal);
+          } else {
+            // 否则，使用 res.data[0].id
+            this.areaVal = res.data[0]?.id; // 使用可选链操作符避免 res.data[0] 为 undefined 的情况
+
+            // 同时，将新获取的 areaVal 存储到 localStorage 中
+            localStorage.setItem("areaVal", JSON.stringify(this.areaVal));
+          }
+
+          this.getzsbAllList();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleAreaChange(value) {
+      this.areaVal = value;
+      localStorage.setItem("areaVal", JSON.stringify(value));
+      localStorage.removeItem("zsbVal");
+      this.jksbAllList = [];
+      this.getzsbAllList();
+    },
+    //获取主设备
+    getzsbAllList() {
+      zsbListAllApi({ jgid: this.areaVal })
+        .then((res) => {
+          console.log(res);
+          this.zsbAllList = res.data;
+          //  this.zsbVal = res.data[0].id;
+          // 尝试从 localStorage 获取 zsbVal
+          const storedzsbVal = localStorage.getItem("zsbVal");
+          if (storedzsbVal) {
+            this.zsbVal = JSON.parse(storedzsbVal);
+          } else {
+            // 否则，使用 res.data[0].id
+            this.zsbVal = res.data[0].id; // 使用可选链操作符避免 res.data[0] 为 undefined 的情况
+
+            localStorage.setItem("zsbVal", JSON.stringify(this.zsbVal));
+          }
+          //  localStorage.setItem("zsbVal", JSON.stringify(res.data[0].id));
+          // 调用 getjcsbAllList 方法获取监测设备列表
+          this.getjcsbAllList();
+
+          // 启动定时器（如果尚未启动）
+          this.startIntervalIfNeeded();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handlezsbChange(value) {
+      this.zsbVal = value;
+      localStorage.setItem("zsbVal", JSON.stringify(value));
+      // 调用 getjcsbAllList 方法获取监测设备列表
+      this.getjcsbAllList();
+
+      // 启动定时器（如果尚未启动）
+      this.startIntervalIfNeeded();
+    },
+    //获取所有监测设备
+    getjcsbAllList() {
+      //this.dataLoading = true;
+      monitoringListAllApi({ zsbid: this.zsbVal })
+        .then((res) => {
+          console.log(res);
+          this.jksbAllList = res.data;
+          this.dataLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    startIntervalIfNeeded() {
+      // 如果定时器尚未启动，则启动它
+      if (this.intervalId === null) {
+        this.intervalId = setInterval(this.getjcsbAllList, 10000);
+      }
+    },
+    stopInterval() {
+      // 停止定时器
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+      }
+    },
+    getDataByField(value, fieldName) {
+      return value.lastData[fieldName] || "--"; // 如果字段不存在，则返回'N/A'
+    },
+    //查看历史数据
+    handlehistory(item) {
+      console.log(item);
+      this.$refs.historyDialogRef.display(item);
+    },
+  },
+  beforeDestroy() {
+    // 在组件销毁前停止定时请求
+    this.stopInterval();
+  },
+};
+</script>
+<style lang="less">
+.realtimeData {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  .realHead {
+    height: 200px;
+    background: rgba(8, 9, 36, 0.28);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    margin-bottom: 20px;
+    .greyBox {
+      background: rgba(8, 9, 36, 0.28);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      box-shadow: inset 0 4px 44px 0 #106cde;
+      color: #fff;
+      margin-top: 12px;
+      margin-bottom: 12px;
+      padding: 8px 0px;
+
+      height: calc(100% - 40px);
+      .selectBox {
+        display: flex;
+        //align-items: center;
+        margin-bottom: 12px;
+
+        h4 {
+          color: #fff;
+          margin-right: 12px;
+          font-weight: normal;
+          width: 100px;
+          height: 28px;
+          line-height: 28px;
+          margin-left: 12px;
+        }
+        .el-radio-group {
+          display: flex;
+          flex-wrap: wrap;
+          flex: 1;
+          color: #fff;
+          .el-radio {
+            margin-bottom: 12px;
+            margin-right: 12px;
+            color: #fff;
+          }
+          .el-radio.is-bordered.is-checked {
+            border-color: #66e6ff;
+          }
+          .el-radio__input.is-checked + .el-radio__label {
+            color: #66e6ff;
+          }
+          .el-radio__input.is-checked .el-radio__inner {
+            border-color: #66e6ff;
+            background: #66e6ff;
+          }
+        }
+        .zsbBox {
+          display: flex;
+          flex-wrap: wrap;
+          flex: 1;
+          .empytBox {
+            text-align: center;
+            line-height: 28px;
+            height: 28px;
+            color: #000;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .realcontain {
+    height: calc(100% - 220px);
+    background: rgba(8, 9, 36, 0.28);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    overflow: auto;
+    .loadingbox {
+      height: 100%;
+    }
+    .cardBox {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 12px 0px;
+
+      .el-card {
+        margin-right: 24px;
+        margin-bottom: 24px;
+        background: rgba(8, 9, 36, 0.28);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: inset 0 4px 44px 0 #106cde;
+        color: #fff;
+        width: 280px;
+        border: 1px solid #66e6ff;
+        .el-card__header {
+          padding: 4px 8px;
+          border-bottom: 1px solid #66e6ff;
+          .headTitle {
+            font-weight: bold;
+            width: 180px;
+            display: inline-block;
+            overflow: hidden; /*超出部分隐藏*/
+            text-overflow: ellipsis; /*超出部分省略号表示*/
+            white-space: nowrap; /*强制单行显示*/
+          }
+          .el-button--text {
+            color: #66e6ff;
+          }
+        }
+        .el-card__body {
+          padding: 8px;
+          height: 78px;
+          .textitem {
+            height: 100%;
+            overflow: hidden;
+            p {
+              font-size: 14px;
+            }
+            .timeclass {
+              font-size: 14px;
+            }
+            .dataclass {
+              strong {
+                font-weight: normal;
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .emptyBox {
+      height: 100%;
+      background: #eee;
+      .el-empty {
+        height: 100%;
+      }
+    }
+    // .el-table {
+    //   margin-top: 12px;
+    //   strong {
+    //     font-weight: normal;
+    //   }
+    //   .timeclass {
+    //     border-right: 1px solid #ebeef5;
+    //     display: inline-block;
+    //     padding-right: 12px;
+    //     margin-right: 12px;
+    //   }
+    //   .dataclass {
+    //     border-right: 1px solid #ebeef5;
+    //     display: inline-block;
+    //     padding-right: 12px;
+    //     margin-right: 12px;
+    //   }
+    // }
+  }
+}
+.el-tooltip__popper {
+  .textitem {
+    h3 {
+      margin-bottom: 12px;
+    }
+    strong {
+      font-weight: normal;
+    }
+    .dataclass {
+      margin-top: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/views/serverIcd/index.vue b/src/views/serverIcd/index.vue
index 7c9c0c19..07b09968 100644
--- a/src/views/serverIcd/index.vue
+++ b/src/views/serverIcd/index.vue
@@ -2,7 +2,7 @@
   <div class="icdConfigBox">
     <div class="configHead">
       <div class="upgradeBox">
-        <h3 class="lableBox">文件上传：</h3>
+        <h3 class="lableBox">服务端ICD上传：</h3>
         <el-upload
           class="upload-demo"
           ref="upload"
@@ -168,7 +168,7 @@ export default {
       .lableBox {
         font-size: 14px;
         font-weight: normal;
-        width: 78px;
+        width: 114px;
       }
       .upload-demo {
         position: relative;