From b357bc793ce98cc14d32db09d85a57d011186643 Mon Sep 17 00:00:00 2001
From: tingzi <2693633308@qq.com>
Date: Mon, 5 May 2025 16:50:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E5=9B=BEdashboard\big\he?=
 =?UTF-8?q?atmap.vue=20=E5=90=8E=E7=BB=AD=EF=BC=9Aheatmap=E9=87=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=9A=82=E6=97=B6=E7=94=A8=E7=94=9F=E6=88=90=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8F=AF=E8=A7=86=E5=8C=96=E5=90=8E=E9=9D=A2?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E6=94=B9=E6=88=90=E5=90=91=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 readme.md                                  |  69 ++++--
 src/App.vue                                |   2 +-
 src/views/common/dashboard/big/heatmap.vue | 210 ++++++++++++++++++
 src/views/common/dashboard/big/index.vue   | 238 +++++++++++----------
 4 files changed, 386 insertions(+), 133 deletions(-)
 create mode 100644 src/views/common/dashboard/big/heatmap.vue

diff --git a/readme.md b/readme.md
index 0ad61db..30820ab 100644
--- a/readme.md
+++ b/readme.md
@@ -70,24 +70,59 @@
 ### **常见项目结构模板（供对照）**
 ```
 src/
-├── main.js        # 入口文件
+├── main.js        # 入口文件  
+├── api/           # 接口请求
+│   └── system/
+│   └── atvApi.ts
+│   └── fcrudApi.ts
+│   └── fileApi.ts
 ├── router/        # 路由
-│   └── index.js
-├── store/         # 状态管理（Vuex/Pinia）
-│   ├── index.js
-│   └── modules/
-├── views/         # 页面组件（路由级）
-│   ├── Home.vue
-│   └── list/
+│   └── backEnd.ts
+│   └── index.ts
+│   └── frontEnd.ts  
+│   └── router.ts  
+├── stores/         # 状态管理（Vuex/Pinia）
+│   ├── interface/ 
+│   └── index.ts/
+├── views/         # 页面组件
+│   ├── atv  #活动 
+│   ├── common #公共组件
+│   ├── facade #门面
+│   ├── monitor #监控中心   
+│   └── system  #系统
 ├── components/    # 公共组件
-│   ├── BaseTable.vue
-│   └── SelectDict.vue
+│   ├── auth  权限
+│   │   ├── auth.vue
+│   │   ├── AuthAll.vue
+│   │   └── Auths.vue
+│   ├── cropper  #头像剪裁
+│   │   └── index.vue
+│   ├── editor  #富文本编辑器  
+│   │   └── index.vue 
+│   ├── iconSelect  #图标选择
+│   │   └── index.vue
+│   ├── sam #核心组件
+│   ├── svgIcon  #svg图标
+│   └── noticeBar  通知栏
+│       └── index.vue
+├── assets/        # 静态资源
+│   ├── images/
+│   ├── style/ 
+│   └── font/
 ├── utils/         # 工具函数
-│   └── request.js # axios封装
-├── styles/        # 全局样式
-│   ├── variables.scss
-│   └── reset.scss
-└── layout/        # 全局布局
-    └── AppLayout.vue
+│   └── ajax/  
+│   └── echarts/
+│   └── sam/
+│   └── *.ts
+├──  layout/        # 全局布局
+│   └── component/
+│   └── footer/   #底部
+│   └── lockScreen/ #锁屏
+│   └── logo/     #logo
+│   └── main/       
+│   └── navBars/   #导航栏
+│   └── navMenu/   #导航菜单
+│   └── routerView/  #路由视图
 ```
-
+重要的文件
+src/views/common/dashboard/big/index.vue dashboard仪表盘
diff --git a/src/App.vue b/src/App.vue
index 5262b0a..58282f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@ import { storeToRefs } from 'pinia';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
-import { Local, Session } from '/@/utils/storage';
+import { Local, Session    } from '/@/utils/storage';
 import setIntroduction from '/@/utils/setIconfont';
 import LockScreen from '/@/layout/lockScreen/index.vue';
 import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
diff --git a/src/views/common/dashboard/big/heatmap.vue b/src/views/common/dashboard/big/heatmap.vue
new file mode 100644
index 0000000..bd834e2
--- /dev/null
+++ b/src/views/common/dashboard/big/heatmap.vue
@@ -0,0 +1,210 @@
+<template>
+  <div ref="chartContainer" style="width: 100%; height: 800px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'Heatmap',
+  props: {
+    timeRange: {
+      type: Array,
+      default: () => []
+    },// 时间范围
+    gratingIdRange: {
+      type: Array,
+      default: () => []
+    },// 光栅编号范围
+    timeGranularity: {
+      type: String,
+      default: 'hour'
+    },//  时间粒度
+    picType: {
+      type: String,
+      default: 'temperature'
+    }//  可视化类型
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  watch: {
+    // 深度监听 timeRange 变化
+    timeRange: {
+      handler() {
+        this.initChart();
+      },
+      deep: true
+    },
+    // 深度监听 gratingIdRange 变化
+    gratingIdRange: {
+      handler() {
+        this.initChart();
+      },
+      deep: true
+    },
+    // 监听 timeGranularity 变化
+    timeGranularity() {
+      this.initChart();
+    },
+    // 监听 picType 变化
+    picType() {
+      this.initChart();
+    }
+  },
+  methods: {
+    initChart() {
+      // 先销毁旧的 ECharts 实例
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      console.log("picType:", this.picType);
+      // 获取 DOM 元素
+      const chartDom = this.$refs.chartContainer;
+      // 重新初始化 ECharts 实例
+      this.chart = echarts.init(chartDom);
+      console.log('timeGranularity:', this.timeGranularity);
+      // 生成时间范围数据
+      let timeData = [];
+      if (this.timeGranularity === 'quarterHour') {
+        timeData = this.generateQuarterHourData();
+        console.log('timeData:', timeData);
+      } else if (this.timeGranularity === 'minute') {
+        timeData = this.generateMinuteData();
+        console.log('timeData:', timeData);
+      } else {
+        timeData = this.generateHourData();
+        console.log('timeData:', timeData);
+      }
+      // 生成光栅编号数据
+      const gratingIdData = this.generateGratingIdData();
+      console.log('gratingIdData:', gratingIdData);
+
+      // 配置热力图选项
+      const option = {
+        tooltip: {
+          position: 'top'
+        },
+        animation: false,
+        grid: {
+          height: '50%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: timeData,
+          splitArea: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: gratingIdData,
+          splitArea: {
+            show: true
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: 100,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%'
+        },
+        series: [
+          {
+            name: '数值',
+            type: 'heatmap',
+            data: this.getGatingData(gratingIdData.length, timeData.length),
+            label: {
+              show: false
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+
+      // 使用配置项显示图表
+      this.chart.setOption(option);
+    },
+    // 生成按小时划分的时间点数组
+    generateHourData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setHours(currentTime.getHours() + 1);
+      }
+      return timeData;
+    },
+    // 生成按照 15 分钟划分的时间点数组
+    generateQuarterHourData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setMinutes(currentTime.getMinutes() + 15);
+      }
+      return timeData;
+    },
+    // 生成按照 1 分钟划分的时间点数组
+    generateMinuteData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setMinutes(currentTime.getMinutes() + 1);
+      }
+      return timeData;
+    },
+    // 生成光栅编号数据
+    generateGratingIdData() {
+      const [min, max] = this.gratingIdRange;
+      const gratingIdData = [];
+      for (let i = min; i <= max; i++) {
+        gratingIdData.push(i.toString());
+      }
+      return gratingIdData;
+    },
+    // 向后端请求数据，参数就看props，处理后的数据和data格式一样即可
+    getGatingData(rows, cols) {
+      const data = [];
+      for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+          data.push([j, i, Math.floor(Math.random() * 100)]);
+        }
+      }
+      return data;
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 组件样式 */
+</style>
\ No newline at end of file
diff --git a/src/views/common/dashboard/big/index.vue b/src/views/common/dashboard/big/index.vue
index 9feaac0..bd6a80c 100644
--- a/src/views/common/dashboard/big/index.vue
+++ b/src/views/common/dashboard/big/index.vue
@@ -1,7 +1,30 @@
 <template>
   <div class="home">
+<!--    这个单选框不知道为啥一直有问题-->
+<!--    <div class="mb-2 ml-4">-->
+<!--      <el-radio-group v-model="picRadio">-->
+<!--        <el-radio value="1" size="large">温度监测图</el-radio>-->
+<!--        <el-radio value="2" size="large">湿度监测图</el-radio>-->
+<!--        <el-radio value="3" size="large">应力监测图</el-radio>-->
+<!--      </el-radio-group>-->
+<!--    </div>-->
     <!-- 查询时间范围和按钮 -->
     <div class="form-container">
+      <el-form-item label="可视化类型：" class="form-item">
+      <el-select
+        v-model="typeValue"
+        placeholder="Select"
+        size="large"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in typeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      </el-form-item>
       <el-form-item label="查询时间范围：" class="form-item">
         <el-date-picker
           v-model="timeValue"
@@ -13,136 +36,143 @@
           style="width: 380px"
         />
       </el-form-item>
-      <el-form-item label="光栅编号：" class="form-item">
-        <el-input
-          v-model="gratingId"
-          placeholder="请输入光栅编号"
-          style="width: 200px;"
+      <el-form-item label="光栅编号范围：" class="form-item">
+        <el-input-number
+          v-model="gratingIdMin"
+          :min="1"
+          :max="1399"
+          @change="validateRange"
+          placeholder="最小值"
+          style="width: 150px;"
         />
+        <span style="margin: 0 5px;"> - </span>
+        <el-input-number
+          v-model="gratingIdMax"
+          :min="10"
+          :max="1400"
+          @change="validateRange"
+          placeholder="最大值"
+          style="width: 150px;"
+        />
+        <el-cascader
+          v-model="value"
+          :options="options"
+          style="width: 150px; margin-left: 10px;"
+          placeholder="其他选项"
+          @change="handleOtherChange"
+        />
+<!--        <el-button type="primary" @click="updateXYRange" style="margin: 0 30px;">查询</el-button>-->
       </el-form-item>
-      <el-button type="primary" @click="updateIframe">查询</el-button>
-    </div>
-
-    <!-- iframe 容器 -->
-    <div class="iframe-container">
-      <iframe
-        v-if="iframeUrl1"
-        class="embedded-iframe large"
-        :src="iframeUrl1"
-        frameborder="0"
-      ></iframe>
-      <div class="iframe-row">
-        <iframe
-          v-if="iframeUrl2"
-          class="embedded-iframe small"
-          :src="iframeUrl2"
-          frameborder="0"
-        ></iframe>
-        <iframe
-          v-if="iframeUrl3"
-          class="embedded-iframe small"
-          :src="iframeUrl3"
-          frameborder="0"
-        ></iframe>
-        <iframe
-          v-if="iframeUrl4"
-          class="embedded-iframe small"
-          :src="iframeUrl4"
-          frameborder="0"
-        ></iframe>
-      </div>
     </div>
+    <!-- 热力图的容器 -->
+    <Heatmap
+      :timeRange="timeValue"
+      :gratingIdRange="[gratingIdMin, gratingIdMax]"
+      :time-granularity="value[1]"
+      :picType="typeValue"
+    />
+    <div class="heatmap-container"></div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import Heatmap from "/@/views/common/dashboard/big/heatmap.vue"; // 导入热力图组件
 
 export default {
+  components: { Heatmap },
   data() {
     return {
+      typeValue: "temperature", // 类型
+      typeOptions: [
+        {
+          value: "temperature",
+          label: "温度监测图",
+        },
+        {
+          value: "humidity",
+          label: "湿度监测图",
+        },
+        {
+          value: "stress",
+          label: "应力监测图",
+        }
+      ],
+      // picType: "temperature", // 可视化类型
       timeValue: [], // 时间范围
-      gratingId: "1", // 默认光栅编号为 1
-      iframeUrl1: "", // 第一个 iframe 的链接
-      iframeUrl2: "", // 第二个 iframe 的链接
-      iframeUrl3: "", // 第三个 iframe 的链接
-      iframeUrl4: "", // 新增的第四个 iframe 的链接
-      baseUrl1:
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=2&__feature.dashboardSceneSolo",
-      baseUrl2:
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=1&__feature.dashboardSceneSolo",
-      baseUrl3:
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=4&__feature.dashboardSceneSolo",
-      baseUrl4:
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=3&__feature.dashboardSceneSolo", 
+      gratingIdMin:1 , // 光栅编号最小值
+      gratingIdMax: 12, // 光栅编号最大值
+      value: [], // 级联选择器的值
+      options: [
+        {
+          value: "timeGranularity",
+          label: "时间粒度",
+          children: [
+            {
+              value: "hour",
+              label: "每小时",
+            },
+            {
+              value: "quarterHour",
+              label: "每15分钟",
+            },
+            {
+              value: "minute",
+              label: "每分钟",
+            }
+          ],
+        }
+      ]
     };
   },
   methods: {
     handleDateChange() {
       console.log("选中的时间范围：", this.timeValue);
     },
-    async updateIframe() {
+    validateRange() {
+      if (this.gratingIdMax - this.gratingIdMin < 9) {
+        this.$message.error("至少选择10个光栅！");
+      }
+    },
+    // 更新时间范围和光栅编号范围
+  updateXYRange() {
       // 检查是否选择了时间范围
       if (this.timeValue.length !== 2) {
         this.$message.error("请选择完整的时间范围！");
         return;
       }
 
-      if (!this.gratingId) {
-        this.$message.error("请输入光栅编号！");
+      if (this.gratingIdMax - this.gratingIdMin < 9) {
+        this.$message.error("至少选择10个光栅！");
         return;
       }
-
       const from = new Date(this.timeValue[0]).getTime(); // 开始时间的时间戳
       const to = new Date(this.timeValue[1]).getTime(); // 结束时间的时间戳
-
-      try {
-        // 调用后端 API 获取光栅编号数据
-        const response = await axios.get(`/api/file/getGratingData/${this.gratingId}`);
-        const gratingData = response.data?.data;
-
-        if (!gratingData) {
-          this.$message.error(`未找到光栅编号为 ${this.gratingId} 的数据！`);
-          return;
-        }
-
-        // 解析返回的光栅数据
-        const temperature_wavelenth = gratingData["温度波长基准值"] || "1550.0";
-        const stress_wavelenth = gratingData["应变波长基准值"] || "1550.0";
-        const temperature_sensitivity = gratingData["温敏系数"] || "0.01";
-        const temperature_sensitivity2 = gratingData["温湿系数"] || "0.01";
-        const stress_sensitivity = gratingData["应变系数"] || "0.01";
-        const stress_base = gratingData["应变基准值"] || "0.01";
-        const temperature_base = gratingData["温度基准值"] || "25.0";
-        const humidity_base = gratingData["湿度基准值"] || "25.0";
-        const humidity_sensitivity = gratingData["湿敏系数"] || "25.0";
-
-        // 动态更新 iframe 链接，加入时间范围和后端返回的数据
-        this.iframeUrl1 = `${this.baseUrl1}&from=${from}&to=${to}&var-start_wavelength=${temperature_wavelenth}&var-temperature_sensitivity=${temperature_sensitivity}&var-temperature_base=${temperature_base}`;
-        this.iframeUrl2 = `${this.baseUrl2}&from=${from}&to=${to}&var-start_wavelength=${temperature_wavelenth}&var-temperature_sensitivity=${temperature_sensitivity}&var-sensor=${this.gratingId-1}&var-temperature_base=${temperature_base}`;
-        this.iframeUrl3 = `${this.baseUrl3}&from=${from}&to=${to}&var-temperature_sensitivity=${temperature_sensitivity}&var-start_wavelength=${temperature_wavelenth}&var-sensor=${this.gratingId-1}&var-humidity_sensitivity=${humidity_sensitivity}&var-humidity_base=${humidity_base}&var-temperature_sensitivity2=${temperature_sensitivity2}`;
-        this.iframeUrl4 = `${this.baseUrl4}&from=${from}&to=${to}&var-stress_wavelenth=${stress_wavelenth}&var-stress_sensitivity=${stress_sensitivity}&var-sensor=${this.gratingId-1}&var-stress_base=${stress_base}`; // 新增的第四个 iframe 链接
-      } catch (error) {
-        console.error("获取光栅数据失败：", error);
-        this.$message.error("获取光栅数据失败，请检查光栅编号或服务状态！");
-      }
     },
-    setDefaultIframe() {
+    setDefaultXYRange() {
       // 设置默认时间范围为最近 1 天
       const now = new Date();
       const oneDayAgo = new Date();
       oneDayAgo.setDate(now.getDate() - 1);
 
       this.timeValue = [oneDayAgo, now];
-
+      // 设置默认光栅编号范围为 1 到 12
+      this.gratingIdMin = 1;
+      this.gratingIdMax = 12;
       // 自动触发默认查询
-      this.updateIframe();
+      this.updateXYRange();
     },
+    handleOtherChange(value) {
+      console.log("级联选择器的值：", value);
+      console.log("时间粒度：", value[1]);
+    }
   },
   mounted() {
-    // 页面加载时设置默认时间范围和默认光栅编号
-    this.setDefaultIframe();
+
   },
+  beforeMount() {
+    this.setDefaultXYRange();
+  }
 };
 </script>
 
@@ -160,7 +190,9 @@ export default {
   display: flex;
   align-items: center; /* 垂直居中对齐 */
   flex-wrap: wrap; /* 当屏幕宽度不足时自动换行 */
-  margin-bottom: 20px; /* 和 iframe 的间距 */
+  margin-top: 10px; /* 与顶部的间距 */
+  margin-bottom: 10px; /* 和 iframe 的间距 */
+  margin-left: 10px;
   width: 100%;
   justify-content: flex-start;
 }
@@ -169,28 +201,4 @@ export default {
   margin-right: 10px; /* 按钮和输入框之间的间距 */
 }
 
-.iframe-container {
-  width: 100%;
-}
-
-.iframe-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px; /* 三个 iframe 之间的间距 */
-  margin-top: 10px;
-}
-
-.embedded-iframe {
-  border: 1px solid #ccc;
-}
-
-.embedded-iframe.large {
-  width: 100%; /* 上方 iframe 占整行 */
-  height: 400px; /* 高度根据需求调整 */
-}
-
-.embedded-iframe.small {
-  width: 32%; /* 下方三个 iframe 各占三分之一宽度 */
-  height: 300px; /* 高度根据需求调整 */
-}
-</style>
+</style>
\ No newline at end of file

From 30520ffafa0b8d0c1ea5a6b94cd68fc4ea9d9f89 Mon Sep 17 00:00:00 2001
From: tingzi <2693633308@qq.com>
Date: Tue, 6 May 2025 16:14:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BEdashboard\big\Li?=
 =?UTF-8?q?neIndex.vue=20=E6=8A=98=E7=BA=BF=E5=9B=BEdashboard\big\lineChar?=
 =?UTF-8?q?t.vue=20=E5=90=8E=E7=BB=AD=EF=BC=9AlineChart.vue=E9=87=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=9A=82=E6=97=B6=E7=94=A8=E7=94=9F=E6=88=90=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8F=AF=E8=A7=86=E5=8C=96=E5=90=8E=E9=9D=A2?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E6=94=B9=E6=88=90=E5=90=91=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE=20=E8=BF=99=E9=87=8C?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=96=B0=E5=8A=A0=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=89=80=E4=BB=A5=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D=E4=BA=86=E5=89=8D=E7=AB=AF=E8=B7=AF=E7=94=B1=20?=
 =?UTF-8?q?=E9=A1=BA=E4=BE=BF=E5=AE=8C=E5=96=84=E4=BA=86=E4=B8=80=E4=B8=8B?=
 =?UTF-8?q?index.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 readme.md                                    |   3 +
 src/router/route.ts                          |  15 +-
 src/views/common/dashboard/big/LineIndex.vue | 204 +++++++++++++++++
 src/views/common/dashboard/big/index.vue     |  18 +-
 src/views/common/dashboard/big/lineChart.vue | 225 +++++++++++++++++++
 5 files changed, 446 insertions(+), 19 deletions(-)
 create mode 100644 src/views/common/dashboard/big/LineIndex.vue
 create mode 100644 src/views/common/dashboard/big/lineChart.vue

diff --git a/readme.md b/readme.md
index 30820ab..484c49e 100644
--- a/readme.md
+++ b/readme.md
@@ -125,4 +125,7 @@ src/
 │   └── routerView/  #路由视图
 ```
 重要的文件
+G:\Projects\VueProject\SamATV\src\views\common
 src/views/common/dashboard/big/index.vue dashboard仪表盘
+
+前端路由：G:\Projects\VueProject\SamATV\src\router\route.ts
diff --git a/src/router/route.ts b/src/router/route.ts
index 9853d9b..6ff36b3 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -19,7 +19,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				path: '/home', name: 'home',
 				component: () => import('/@/views/common/dashboard/atv/index.vue'),
 				meta: {
-					title: 'message.router.home',
+					title: '首页',
 					isLink: '', isHide: false, isKeepAlive: true,
 					isAffix: true, isIframe: false,
 					roles: ['admin', 'common'], icon: 'fa fa-home',
@@ -33,7 +33,16 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				path: '/big', name: 'grafana',
 				component: () => import('/@/views/common/dashboard/big/index.vue'),
 				meta: {
-					title: 'message.router.bigscreen', isIframe: false, isLink: '/big',
+					title: '数据监测', isIframe: false, isLink: '/big',
+					isHide: false, isKeepAlive: false, isAffix: false,
+					roles: ['admin'], icon: 'fa fa-window-restore'
+				},
+			},
+			{
+				path: '/line', name: 'line',
+				component: () => import('/@/views/common/dashboard/big/LineIndex.vue'),
+				meta: {
+					title: '具体传感器', isIframe: false, isLink: '/line',
 					isHide: false, isKeepAlive: false, isAffix: false,
 					roles: ['admin'], icon: 'fa fa-window-restore'
 				},
@@ -42,7 +51,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				path: '/set_config', name: 'config',
 				component: () => import('/@/views/common/dashboard/config_page/index.vue'),
 				meta: {
-					title: 'message.router.set_config', isIframe: false, isLink: '/set_config',
+					title: '配置管理', isIframe: false, isLink: '/set_config',
 					isHide: false, isKeepAlive: false, isAffix: false,
 					roles: ['admin'], icon: 'fa fa-window-restore'
 				},
diff --git a/src/views/common/dashboard/big/LineIndex.vue b/src/views/common/dashboard/big/LineIndex.vue
new file mode 100644
index 0000000..2a5c3a5
--- /dev/null
+++ b/src/views/common/dashboard/big/LineIndex.vue
@@ -0,0 +1,204 @@
+<template>
+  <div className="home">
+    <!--    这个单选框不知道为啥一直有问题-->
+    <!--    <div class="mb-2 ml-4">-->
+    <!--      <el-radio-group v-model="picRadio">-->
+    <!--        <el-radio value="1" size="large">温度监测图</el-radio>-->
+    <!--        <el-radio value="2" size="large">湿度监测图</el-radio>-->
+    <!--        <el-radio value="3" size="large">应力监测图</el-radio>-->
+    <!--      </el-radio-group>-->
+    <!--    </div>-->
+    <!-- 查询时间范围和按钮 -->
+    <div className="form-container">
+      <el-form-item label="可视化类型：" className="form-item">
+        <el-select
+          v-model="typeValue"
+          placeholder="Select"
+          size="large"
+          style="width: 130px"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询时间范围：" className="form-item">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="到"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="handleDateChange"
+          style="width: 380px"
+        />
+      </el-form-item>
+      <el-form-item label="光栅编号范围：" className="form-item">
+        <el-input-number
+          v-model="gratingIdMin"
+          :min="1"
+          :max="1399"
+          @change="updateSeries"
+          placeholder="最小值"
+          style="width: 150px;"
+        />
+        <span style="margin: 0 5px;"> - </span>
+        <el-input-number
+          v-model="gratingIdMax"
+          :min="1"
+          :max="1400"
+          @change="updateSeries"
+          placeholder="最大值"
+          style="width: 150px;"
+        />
+        <el-cascader
+          v-model="value"
+          :options="options"
+          style="width: 150px; margin-left: 10px;"
+          placeholder="其他选项"
+          @change="handleOtherChange"
+        />
+      </el-form-item>
+    </div>
+    <div className="heatmap-container"></div>
+    <line-chart
+      :gratingIdArray="gratingIdArray"
+      :timeRange="timeValue"
+      :time-granularity="value[1]"
+      :picType="typeValue"
+    />
+    <!--    折线图-->
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import LineChart from "/@/views/common/dashboard/big/lineChart.vue"; // 导入折线图组件
+
+export default {
+  components: { LineChart },
+  data() {
+    return {
+      typeValue: "temperature", // 类型
+      typeOptions: [
+        {
+          value: "temperature",
+          label: "温度监测图",
+        },
+        {
+          value: "humidity",
+          label: "湿度监测图",
+        },
+        {
+          value: "stress",
+          label: "应力监测图",
+        }
+      ],
+      // picType: "temperature", // 可视化类型
+      timeValue: [], // 时间范围
+      gratingIdMin: 1, // 光栅编号最小值
+      gratingIdMax: 12, // 光栅编号最大值
+      gratingIdArray: [], // 光栅编号数组
+      value: [], // 级联选择器的值
+      options: [
+        {
+          value: "timeGranularity",
+          label: "时间粒度",
+          children: [
+            {
+              value: "hour",
+              label: "每小时",
+            },
+            {
+              value: "quarterHour",
+              label: "每15分钟",
+            },
+            {
+              value: "minute",
+              label: "每分钟",
+            }
+          ],
+        }
+      ]
+    };
+  },
+  methods: {
+    handleDateChange() {
+      console.log("选中的时间范围：", this.timeValue);
+    },
+    // 验证输入的光栅编号范围是否合法
+    updateSeries() {
+      if (this.gratingIdMax - this.gratingIdMin < 0) {
+        this.$message.error("请输入正确的光栅编号范围！");
+      }
+      else if (this.gratingIdMax - this.gratingIdMin >=20) {
+        this.$message.error(  "请选择20个以内的光栅！");
+      }
+      else{
+        //   生成连续光栅编号的数组
+        this.gratingIdArray = Array.from(
+          { length: this.gratingIdMax - this.gratingIdMin + 1 },
+          (_, i) => this.gratingIdMin + i
+        )
+      }
+    },
+    // 设置默认的时间范围和光栅编号范围,触发的生命周期：beforeMount()
+    setDefaultXYRange() {
+      // 设置默认时间范围为最近 1 天
+      const now = new Date();
+      const oneDayAgo = new Date();
+      oneDayAgo.setDate(now.getDate() - 1);
+
+      this.timeValue = [oneDayAgo, now];
+      // 设置默认光栅编号范围为 1 到 12
+      this.gratingIdMin = 1;
+      this.gratingIdMax = 12;
+      // 自动触发默认查询
+      this.gratingIdArray = Array.from(
+        { length: this.gratingIdMax - this.gratingIdMin + 1 },
+        (_, i) => this.gratingIdMin + i
+      )
+    },
+    handleOtherChange(value) {
+      console.log("级联选择器的值：", value);
+      console.log("时间粒度：", value[1]);
+    }
+  },
+  mounted() {
+
+  },
+  beforeMount() {
+    this.setDefaultXYRange();
+  }
+};
+</script>
+
+<style scoped>
+.home {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.form-container {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  flex-wrap: wrap; /* 当屏幕宽度不足时自动换行 */
+  margin-top: 10px; /* 与顶部的间距 */
+  margin-bottom: 10px; /* 和 iframe 的间距 */
+  margin-left: 10px;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.form-item {
+  margin-right: 10px; /* 按钮和输入框之间的间距 */
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/common/dashboard/big/index.vue b/src/views/common/dashboard/big/index.vue
index bd6a80c..0dee947 100644
--- a/src/views/common/dashboard/big/index.vue
+++ b/src/views/common/dashboard/big/index.vue
@@ -61,7 +61,6 @@
           placeholder="其他选项"
           @change="handleOtherChange"
         />
-<!--        <el-button type="primary" @click="updateXYRange" style="margin: 0 30px;">查询</el-button>-->
       </el-form-item>
     </div>
     <!-- 热力图的容器 -->
@@ -72,12 +71,14 @@
       :picType="typeValue"
     />
     <div class="heatmap-container"></div>
+<!--    折线图-->
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import Heatmap from "/@/views/common/dashboard/big/heatmap.vue"; // 导入热力图组件
+import LineChart from "/@/views/common/dashboard/big/lineChart.vue"; // 导入折线图组件
 
 export default {
   components: { Heatmap },
@@ -135,20 +136,6 @@ export default {
       }
     },
     // 更新时间范围和光栅编号范围
-  updateXYRange() {
-      // 检查是否选择了时间范围
-      if (this.timeValue.length !== 2) {
-        this.$message.error("请选择完整的时间范围！");
-        return;
-      }
-
-      if (this.gratingIdMax - this.gratingIdMin < 9) {
-        this.$message.error("至少选择10个光栅！");
-        return;
-      }
-      const from = new Date(this.timeValue[0]).getTime(); // 开始时间的时间戳
-      const to = new Date(this.timeValue[1]).getTime(); // 结束时间的时间戳
-    },
     setDefaultXYRange() {
       // 设置默认时间范围为最近 1 天
       const now = new Date();
@@ -160,7 +147,6 @@ export default {
       this.gratingIdMin = 1;
       this.gratingIdMax = 12;
       // 自动触发默认查询
-      this.updateXYRange();
     },
     handleOtherChange(value) {
       console.log("级联选择器的值：", value);
diff --git a/src/views/common/dashboard/big/lineChart.vue b/src/views/common/dashboard/big/lineChart.vue
new file mode 100644
index 0000000..8d017f3
--- /dev/null
+++ b/src/views/common/dashboard/big/lineChart.vue
@@ -0,0 +1,225 @@
+<template>
+  <div ref="chartContainer" style="width: 100%; height: 800px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+import { markRaw } from 'vue'
+
+export default {
+  name: 'LineChart',
+  props: {
+    timeRange: {
+      type: Array,
+      default: () => []
+    },// 时间范围
+    gratingIdArray: {
+      type: Array,
+      default: () => []
+    },// 光栅编号数组
+    timeGranularity: {
+      type: String,
+      default: 'hour'
+    },//  时间粒度
+    picType: {
+      type: String,
+      default: 'temperature'
+    }//  可视化类型
+  },
+  data() {
+    return {
+      chart: null,
+      seriesData: [] // 存储折线图数据
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  watch: {
+    // 深度监听 timeRange 变化
+    timeRange: {
+      handler() {
+        this.initChart();
+      },
+      deep: true
+    },
+    // 深度监听 gratingIdArray 变化
+    gratingIdArray: {
+      handler() {
+        this.initChart();
+      },
+      deep: true
+    },
+    // 监听 timeGranularity 变化
+    timeGranularity() {
+      this.initChart();
+    },
+    // 监听 picType 变化
+    picType() {
+      this.initChart();
+    }
+  },
+  methods: {
+    initChart() {
+      // 先销毁旧的 ECharts 实例
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      console.log("picType:", this.picType);
+      // 获取 DOM 元素
+      const chartDom = this.$refs.chartContainer;
+      // 重新初始化 ECharts 实例
+      this.chart = markRaw(echarts.init(chartDom));
+      console.log('timeGranularity:', this.timeGranularity);
+      // 生成时间范围数据
+      let timeData = [];
+      if (this.timeGranularity === 'quarterHour') {
+        timeData = this.generateQuarterHourData();
+        //console.log('timeData:', timeData);
+      } else if (this.timeGranularity === 'minute') {
+        timeData = this.generateMinuteData();
+        //console.log('timeData:', timeData);
+      } else {
+        timeData = this.generateHourData();
+        //console.log('timeData:', timeData);
+      }
+      // 请求光栅数据
+      this.seriesData = this.getGatingData(this.gratingIdArray.length, timeData.length);
+      // 配置折线图选项
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          formatter: function (params) {
+            // params 是当前坐标轴位置所有系列的数据数组
+            let tip = `<div style="font-size: 14px;">${params[0].name}</div>`; // x轴时间
+            tip += params.map(item => {
+              return `<div style="color: ${item.color}; margin: 4px 0;">${item.seriesName}: ${item.value}</div>`;
+            }).join('');
+            return tip;
+          }
+        },
+        legend: {
+          data: this.$props.gratingIdArray.map(id => `光栅 ${id}`)
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: timeData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: this.seriesData
+      };
+
+      console.log('seriesData:', this.seriesData);
+      // 使用配置项显示图表
+      // console.log('option:', option)
+      // console.log('Legend Data:', option.legend.data);
+      // console.log('Series Names:', option.series.map(s => s.name));
+      this.chart.setOption(option);
+    },
+    // 生成按小时划分的时间点数组
+    generateHourData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setHours(currentTime.getHours() + 1);
+      }
+      return timeData;
+    },
+    // 生成按照 15 分钟划分的时间点数组
+    generateQuarterHourData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setMinutes(currentTime.getMinutes() + 15);
+      }
+      return timeData;
+    },
+    // 生成按照 1 分钟划分的时间点数组
+    generateMinuteData() {
+      const [start, end] = this.timeRange;
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const timeData = [];
+      const currentTime = new Date(startTime);
+      while (currentTime < endTime) {
+        timeData.push(currentTime.toLocaleString());
+        currentTime.setMinutes(currentTime.getMinutes() + 1);
+      }
+      return timeData;
+    },
+    // 生成光栅编号数据
+    // 向后端请求数据，参数就看props，处理后的数据和data格式一样即可
+    getGatingData(rows, cols) {
+      let data = [];
+      console.log('cols:', cols, 'rows:', rows);
+      for (let i = 0; i < rows; i++) {
+        let oneLine = [];
+        for (let j = 0; j < cols; j++) {
+          oneLine.push(Math.floor(Math.random() * 100));
+        }
+        data.push(oneLine);
+      }
+      console.log("data", data);
+      return this.processSeriesData(data);
+    },
+    // 处理后端返回的数据，将二维数组转换为 ECharts 所需的格式
+    // processSeriesData(seriesData) {
+    //   const rows = seriesData.length;
+    //   const cols = seriesData[0].length;
+    //   const data = [];
+    //   let legendData = this.gratingIdArray.map(id => `光栅 ${id}`);
+    //   for (let i = 0; i < rows; i++) {
+    //     let oneLine = {};
+    //     oneLine['name'] = legendData[i];
+    //     oneLine['type'] = 'line';
+    //     // oneLine['stack'] = 'Total';
+    //     oneLine['data'] = seriesData[i];
+    //     data.push(oneLine);
+    //   }
+    //
+    //   return data;
+    // }
+    processSeriesData(data) {
+      const legendData = this.gratingIdArray.map(id => `光栅 ${id}`);
+      return data.map((rowData, index) => ({
+        name: legendData[index],
+        type: 'line',
+        // 删除 stack: 'Total'
+        data: rowData
+      }));
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 组件样式 */
+</style>
\ No newline at end of file