server/dao/tunnel.go

@@ -20,7 +20,7 @@ type Tunnel struct {
 	Users       []SysUser     `json:"users" gorm:"many2many:user_tunnel"`
 	Devices     []Device      `json:"devices" gorm:"foreignKey:TunnelId"`
 	EnvData     []EnvData     `json:"envData" gorm:"foreignKey:TunnelSn;references:TunnelSn"`
-	OpticalData []OpticalData `json:"opticalData" gorm:"foreignKey:Sn;references:TunnelSn"`
+	OpticalData []OpticalData `json:"opticalData" gorm:"foreignKey:TunnelSn;references:TunnelSn"`
 }
 
 func (Tunnel) TableName() string {

web/src/router/index.js

@@ -4,11 +4,6 @@ const routes = [{
   path: '/',
   redirect: '/login'
 },
-{
-  path: '/init',
-  name: 'Init',
-  component: () => import('@/view/init/index.vue')
-},
 {
   path: '/login',
   name: 'Login',

web/src/view/admin/tunnel/tunnel.vue

@@ -125,6 +125,12 @@
             >
               控制面板
             </el-button>
+            <el-button
+              type="success"
+              @click="tunnelDataPanel(scope.row)"
+            >
+              数据面板
+            </el-button>
             <el-button
               type="primary"
               size="small"
@@ -410,6 +416,40 @@
         </el-collapse-item>
       </el-collapse>
     </el-drawer>
+    <!--    数据面板-->
+    <el-drawer
+      v-model="isDataPanel"
+      title="控制面板"
+      direction="rtl"
+      size="80%"
+    >
+      <el-collapse
+        v-model="dataNames"
+      >
+        <el-collapse-item
+          title="环境"
+          name="1"
+        >
+          <div
+            v-for="[sn, data] in Array.from(groupedBySn)"
+            :id="'chart-' + sn"
+            :key="sn"
+            style="width: 600px; height: 400px; margin: 10px;"
+          />
+        </el-collapse-item>
+        <el-collapse-item
+          title="光感"
+          name="2"
+        >
+          <div
+            v-for="[sn, data] in Array.from(lightBySn)"
+            :id="'chart-' + sn"
+            :key="sn"
+            style="width: 600px; height: 400px; margin: 10px;"
+          />
+        </el-collapse-item>
+      </el-collapse>
+    </el-drawer>
   </el-container>
 </template>
 
@@ -425,7 +465,9 @@ import {
   updateTunnelTime
 } from '@/api/tunnel'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { nextTick } from 'vue'
 import { deviceSwitch, generateDeviceFile } from '@/api/device'
+import * as echarts from 'echarts'
 import { useUserStore } from '@/pinia/modules/user'
 const userData = useUserStore()
 const userInfo = userData.userInfo
@@ -704,6 +746,154 @@ const lampSet = async(val) => {
   })
 }
 
+// 数据面板
+
+const isDataPanel = ref(false)
+const dataNames = ref(['1'])
+
+const groupedBySn = ref()
+const lightBySn = ref()
+
+const tunnelDataPanel = (val) => {
+  isDataPanel.value = true
+  tunnelTimeData.value = val
+  console.log(val)
+  groupedBySn.value = tunnelTimeData.value.envData.reduce((acc, current) => {
+    const { sn } = current
+    // 如果 acc（累加器）中没有当前 sn 对应的数组，则创建一个新的数组
+    if (!acc.has(sn)) {
+      acc.set(sn, [])
+    }
+    // 将当前对象添加到对应 sn 的数组中
+    acc.get(sn).push(current)
+    return acc
+  }, new Map())
+  lightBySn.value = tunnelTimeData.value.opticalData.reduce((acc, current) => {
+    const { sn } = current
+    // 如果 acc（累加器）中没有当前 sn 对应的数组，则创建一个新的数组
+    if (!acc.has(sn)) {
+      acc.set(sn, [])
+    }
+    // 将当前对象添加到对应 sn 的数组中
+    acc.get(sn).push(current)
+    return acc
+  }, new Map())
+  nextTick(() => {
+    groupedBySn.value.forEach((data, index) => {
+      initChart(index, data)
+    })
+    lightBySn.value.forEach((data, index) => {
+      initLightBySnChart(index, data)
+    })
+  })
+}
+// 环境
+function initChart(index, data) {
+  const chartDom = document.getElementById('chart-' + index)
+  if (!chartDom) {
+    console.error(`无法找到元素: chart-${index}`)
+    return
+  }
+
+  const myChart = echarts.init(chartDom)
+
+  const option = {
+    title: {
+      text: '环境监测'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['温度', '湿度', '光照度']
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '温度',
+        type: 'line',
+        data: data.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
+      },
+      {
+        name: '湿度',
+        type: 'line',
+        data: data.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
+      },
+      {
+        name: '光照度',
+        type: 'line',
+        data: data.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条型数据区域缩放组件
+        start: 0, // 默认显示数据的起始百分比
+        end: 100 // 默认显示数据的结束百分比
+      },
+      {
+        type: 'inside', // 支持鼠标滚轮和双指缩放
+        start: 0,
+        end: 100
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+}
+
+// 光感
+function initLightBySnChart(index, data) {
+  const chartDom = document.getElementById('chart-' + index)
+  if (!chartDom) {
+    console.error(`无法找到元素: chart-${index}`)
+    return
+  }
+
+  const myChart = echarts.init(chartDom)
+
+  const option = {
+    title: {
+      text: '光感监测'
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['光照度']
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '光照度',
+        type: 'line',
+        data: data.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条型数据区域缩放组件
+        start: 0, // 默认显示数据的起始百分比
+        end: 100 // 默认显示数据的结束百分比
+      },
+      {
+        type: 'inside', // 支持鼠标滚轮和双指缩放
+        start: 0,
+        end: 100
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+}
 // 开关
 const switchButton = async(device, relay) => {
   console.log(device, relay)