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] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BEdashboard\big\LineIn?=
 =?UTF-8?q?dex.vue=20=E6=8A=98=E7=BA=BF=E5=9B=BEdashboard\big\lineChart.vu?=
 =?UTF-8?q?e=20=E5=90=8E=E7=BB=AD=EF=BC=9AlineChart.vue=E9=87=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=9A=82=E6=97=B6=E7=94=A8=E7=94=9F=E6=88=90=E7=9A=84=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=8F=AF=E8=A7=86=E5=8C=96=E5=90=8E=E9=9D=A2=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E6=94=B9=E6=88=90=E5=90=91=E5=90=8E=E7=AB=AF=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E6=95=B0=E6=8D=AE=20=E8=BF=99=E9=87=8C=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E6=96=B0=E5=8A=A0=E4=BA=86=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=89=80=E4=BB=A5=E5=BD=B1=E5=93=8D?=
 =?UTF-8?q?=E4=BA=86=E5=89=8D=E7=AB=AF=E8=B7=AF=E7=94=B1=20=E9=A1=BA?=
 =?UTF-8?q?=E4=BE=BF=E5=AE=8C=E5=96=84=E4=BA=86=E4=B8=80=E4=B8=8Bindex.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