热力图dashboard\big\heatmap.vue

后续：heatmap里面暂时用生成的数据可视化后面可以改成向后端请求数据

readme.md

@@ -70,24 +70,59 @@
 ### **常见项目结构模板（供对照）**
 ```
 src/
-├── main.js        # 入口文件
+├── main.js        # 入口文件  
+├── api/           # 接口请求
+│   └── system/
+│   └── atvApi.ts
+│   └── fcrudApi.ts
+│   └── fileApi.ts
 ├── router/        # 路由
-│   └── index.js
+│   └── backEnd.ts
-├── store/         # 状态管理（Vuex/Pinia）
+│   └── index.ts
-│   ├── index.js
+│   └── frontEnd.ts  
-│   └── modules/
+│   └── router.ts  
-├── views/         # 页面组件（路由级）
+├── stores/         # 状态管理（Vuex/Pinia）
-│   ├── Home.vue
+│   ├── interface/ 
-│   └── list/
+│   └── index.ts/
+├── views/         # 页面组件
+│   ├── atv  #活动 
+│   ├── common #公共组件
+│   ├── facade #门面
+│   ├── monitor #监控中心   
+│   └── system  #系统
 ├── components/    # 公共组件
-│   ├── BaseTable.vue
+│   ├── auth  权限
-│   └── SelectDict.vue
+│   │   ├── 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封装
+│   └── ajax/  
-├── styles/        # 全局样式
+│   └── echarts/
-│   ├── variables.scss
+│   └── sam/
-│   └── reset.scss
+│   └── *.ts
-└── layout/        # 全局布局
+├──  layout/        # 全局布局
-    └── AppLayout.vue
+│   └── component/
+│   └── footer/   #底部
+│   └── lockScreen/ #锁屏
+│   └── logo/     #logo
+│   └── main/       
+│   └── navBars/   #导航栏
+│   └── navMenu/   #导航菜单
+│   └── routerView/  #路由视图
 ```
-
+重要的文件
+src/views/common/dashboard/big/index.vue dashboard仪表盘

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';

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>

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-form-item label="光栅编号范围：" class="form-item">
-        <el-input
+        <el-input-number
-          v-model="gratingId"
+          v-model="gratingIdMin"
-          placeholder="请输入光栅编号"
+          :min="1"
-          style="width: 200px;"
+          :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
+      gratingIdMin:1 , // 光栅编号最小值
-      iframeUrl1: "", // 第一个 iframe 的链接
+      gratingIdMax: 12, // 光栅编号最大值
-      iframeUrl2: "", // 第二个 iframe 的链接
+      value: [], // 级联选择器的值
-      iframeUrl3: "", // 第三个 iframe 的链接
+      options: [
-      iframeUrl4: "", // 新增的第四个 iframe 的链接
+        {
-      baseUrl1:
+          value: "timeGranularity",
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=2&__feature.dashboardSceneSolo",
+          label: "时间粒度",
-      baseUrl2:
+          children: [
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=1&__feature.dashboardSceneSolo",
+            {
-      baseUrl3:
+              value: "hour",
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=4&__feature.dashboardSceneSolo",
+              label: "每小时",
-      baseUrl4:
+            },
-        "http://b40-4.com:13001/d-solo/ee6lox8dz1zb4a/test-normal?orgId=1&timezone=browser&panelId=3&__feature.dashboardSceneSolo", 
+            {
+              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) {
+      if (this.gratingIdMax - this.gratingIdMin < 9) {
-        this.$message.error("请输入光栅编号！");
+        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 {
+</style>
-  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>