更新

src/api/home.ts

@@ -1,3 +1,5 @@
+import request from "@/utils/request";
+
 /**
  * 水文测站实时信息
  */

src/api/weather.ts

@@ -1,28 +1,30 @@
+import request from "@/utils/request";
+
 /**
  * 水质自动站多站最新数据
  */
 export async function getWeather() {
-  // const jiaxinWeather = await request({
-  //   url: '/nmc_api/rest/weather?stationid=pxfeS',
-  //   method: 'get'
-  // }).then(res => res.data.real.weather)
-  // const huangshanWeather = await request({
-  //   url: '/nmc_api/rest/weather?stationid=dFIpc',
-  //   method: 'get'
-  // }).then(res => res.data.real.weather)
-  // const ningdeWeather = await request({
-  //   url: '/nmc_api/rest/weather?stationid=uKfig',
-  //   method: 'get'
-  // }).then(res => res.data.real.weather)
-  // return Promise.resolve([
-  //   {city: '嘉兴市', weather: `${jiaxinWeather.info} ${jiaxinWeather.temperature}℃`},
-  //   {city: '黄山市', weather: `${huangshanWeather.info} ${huangshanWeather.temperature}℃`},
-  //   {city: '宁德市', weather: `${ningdeWeather.info} ${ningdeWeather.temperature}℃`},
-  // ])
-
+  const jiaxinWeather = await request({
+    url: '/nmc_api/rest/weather?stationid=pxfeS',
+    method: 'get'
+  }).then(res => res.data.real.weather)
+  const huangshanWeather = await request({
+    url: '/nmc_api/rest/weather?stationid=dFIpc',
+    method: 'get'
+  }).then(res => res.data.real.weather)
+  const ningdeWeather = await request({
+    url: '/nmc_api/rest/weather?stationid=uKfig',
+    method: 'get'
+  }).then(res => res.data.real.weather)
   return Promise.resolve([
-    {city: '嘉兴市', weather: `晴 23℃`},
-    {city: '黄山市', weather: `多云 21℃`},
-    {city: '宁德市', weather: `晴 18℃`},
+    {city: '嘉兴市', weather: `${jiaxinWeather.info} ${jiaxinWeather.temperature}℃`},
+    {city: '黄山市', weather: `${huangshanWeather.info} ${huangshanWeather.temperature}℃`},
+    {city: '宁德市', weather: `${ningdeWeather.info} ${ningdeWeather.temperature}℃`},
   ])
+
+  // return Promise.resolve([
+  //   {city: '嘉兴市', weather: `晴 23℃`},
+  //   {city: '黄山市', weather: `多云 21℃`},
+  //   {city: '宁德市', weather: `晴 18℃`},
+  // ])
 }

src/components/DeviceComponent/flow.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Chart from "@/components/Chart.vue";
+import {getWaterLevelAndFlowListOfPageByStcd} from "@/api/gx";
+import {formatd} from "@/utils/ruoyi";
+
+const route = useRoute()
+const chartRef = ref(null)
+
+async function reloadChart() {
+  const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
+  const flowData = await getWaterLevelAndFlowListOfPageByStcd({
+    stcd: route.params.stcd,
+    startTime: formatd(sevenDayAgo),
+    endTime: formatd(new Date())
+  }).then(res => {
+    return res.rows
+  })
+  const option = {
+    // backgroundColor: "#0B2D55",
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '13%',
+      left: '2%',
+      right: '2%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf'
+      },
+      axisTick: {show: false},
+      data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
+    }],
+    yAxis: [{
+      name: 'm³/s',
+      nameTextStyle: {
+        color: '#02cacf'
+      },
+      min: value => (value.min - 10).toFixed(0),
+      max: value => (value.max + 10).toFixed(0),
+      axisLabel: {
+        color: '#02cacf'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLine: {
+        show: true
+      }
+    }],
+    series: [{
+      name: '流量',
+      type: 'line',
+      areaStyle: {},
+      smooth: true, //是否平滑曲线显示
+      lineStyle: {
+        color: '#3deaff'
+      },
+      // barWidth: 18,
+      // label: {
+      //   show: true,
+      //   position: 'top'
+      // },
+      data: flowData.map(item => item.q)
+    }
+    ]
+  }
+  chartRef.value.loadChart(option)
+}
+
+onMounted(() => {
+  reloadChart()
+})
+</script>
+<template>
+  <chart ref="chartRef"></chart>
+</template>

src/components/DeviceComponent/rainfall.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Chart from "@/components/Chart.vue";
+import {getRainfallListOfPageByStcd, getWaterLevelAndFlowListOfPageByStcd} from "@/api/gx";
+import {formatd} from "@/utils/ruoyi";
+
+const route = useRoute()
+const chartRef = ref(null)
+
+async function reloadChart() {
+  const sevenDayAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
+  const rainfallData = await getRainfallListOfPageByStcd({
+    stcd: route.params.stcd,
+    startTime: formatd(sevenDayAgo),
+    endTime: formatd(new Date())
+  }).then(res => {
+    return res.rows
+  })
+
+  const option = {
+    // backgroundColor: "#0B2D55",
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '14%',
+      left: '2%',
+      right: '4%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf'
+      },
+      axisTick: {show: false},
+      data: rainfallData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
+    }],
+    yAxis: [{
+      name: 'mm',
+      nameTextStyle: {
+        color: '#02cacf'
+      },
+      min: value => (value.min).toFixed(0),
+      max: value => (value.max).toFixed(0),
+      axisLabel: {
+        margin: 20,
+        color: '#02cacf'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLine: {
+        show: true
+      }
+    }],
+    series: [{
+      name: '雨量',
+      type: 'bar',
+      itemStyle: {
+        color: '#3deaff'
+      },
+      shading: 'color',
+      data: rainfallData.map(item => item.drp)
+    }
+    ]
+  }
+  chartRef.value.loadChart(option)
+}
+
+onMounted(() => {
+  reloadChart()
+})
+</script>
+<template>
+  <chart ref="chartRef"></chart>
+</template>

src/components/DeviceComponent/waterLevel.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Chart from "@/components/Chart.vue";
+import {getWaterLevelAndFlowListOfPageByStcd} from "@/api/gx";
+import {formatd} from "@/utils/ruoyi";
+
+const route = useRoute()
+const chartRef = ref(null)
+
+async function reloadChart() {
+  const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
+  const flowData = await getWaterLevelAndFlowListOfPageByStcd({
+    stcd: route.params.stcd,
+    startTime: formatd(sevenDayAgo),
+    endTime: formatd(new Date())
+  }).then(res => {
+    return res.rows
+  })
+  const option = {
+    // backgroundColor: "#0B2D55",
+    tooltip: {
+      trigger: 'axis'
+    },
+    grid: {
+      top: '13%',
+      left: '2%',
+      right: '2%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLabel: { // 坐标轴刻度标签的相关设置
+        color: '#02cacf',
+        formatter: value => value ? value.substring(11, 16) + '\n' + value.substring(5, 10) : ''
+      },
+      axisTick: {show: false},
+      data: flowData.map(item => item.tm)
+    }],
+    yAxis: [{
+      name: 'm',
+      nameTextStyle: {
+        color: '#02cacf'
+      },
+      min: value => (value.min - 0.5).toFixed(2),
+      max: value => (value.max + 0.5).toFixed(2),
+      axisLabel: {
+        color: '#02cacf'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+      axisLine: {
+        show: true
+      }
+    }],
+    series: [{
+      name: '水位',
+      type: 'line',
+      smooth: true, //是否平滑曲线显示
+      lineStyle: {
+        color: '#3deaff'
+      },
+      // barWidth: 18,
+      // label: {
+      //   show: true,
+      //   position: 'top'
+      // },
+      data: flowData.map(item => item.z)
+    }
+    ]
+  }
+  chartRef.value.loadChart(option)
+}
+
+onMounted(() => {
+  reloadChart()
+})
+</script>
+<template>
+  <chart ref="chartRef"></chart>
+</template>

src/components/UePlayer.vue

@@ -15,9 +15,10 @@ onMounted(() => {
   const config = new Config({
     useUrlParams: true,
     initialSettings: {
-      // ss: "ws://192.168.0.136:85",
-      ss: "ws://192.168.0.120:85",
+      ss: "ws://192.168.0.136:85",
+      // ss: "ws://192.168.0.120:85",
       // ss: "ws://192.168.0.121:85",
+      // ss: "ws://10.8.48.235:85",
       AutoConnect: true,
       AutoPlayVideo: true,
       StartVideoMuted: false,

src/layout/index.vue

@@ -3,7 +3,7 @@ import {AppMain, Navbar} from '@/layout/components/index.js'
 import AntvMap from '@/components/AntvMap/index.vue'
 import UePlayer from '@/components/UePlayer.vue'
 import {useAppStore} from '@/stores/app'
-import {onMounted, reactive, ref, watch} from 'vue'
+import {onMounted, reactive, ref} from 'vue'
 import {useRoute} from 'vue-router'
 import {useStationStore} from "@/stores/station";
 import bus from "@/utils/bus";
@@ -34,9 +34,6 @@ const sthouseSrc = ref(new URL('@/assets/images/sthouse.jpg', import.meta.url).h
 
 // 底板回调监听
 bus.on('handle_ue_response', (data) => {
-  debugger
-  //   // 跳转仪器详情界面
-  // jumpPage(`/device/${route.params.stcd}/${name}`)
   if (data.Category && data.Category === 'ClickMesh') {
     if (!data.Data.Name) {
       return;
@@ -84,10 +81,10 @@ onMounted(() => {
     <!--    <div v-show="appStore.floorType === 'sthouse'" class="floor-container"><img :src="sthouseSrc"-->
     <!--                                                                               style="width: 100%;height: 100%;"></div>-->
     <div v-show="appStore.floorType === 'ss_sw'" class="floor-container">
-<!--      <img :src="swSrc" style="width: 100%;height: 100%;">-->
+      <!--      <img :src="swSrc" style="width: 100%;height: 100%;">-->
     </div>
-    <antv-map v-show="appStore.floorType === 'map'" class="floor-container"></antv-map>
-    <ue-player v-show="appStore.floorType === 'ue'" class="floor-container"></ue-player>
+    <antv-map v-if="appStore.floorType === 'map'" class="floor-container"></antv-map>
+    <ue-player v-if="appStore.floorType === 'ue'" class="floor-container"></ue-player>
 
     <!-- 顶部阴影 -->
     <div class="header-shade"></div>

src/utils/device.ts

@@ -48,21 +48,11 @@ const deviceDetailList = [
     "ueDeviceName": "预处理单元",
     "nanshuiDevId": "D6",
   },
-  // {
-  //   "deviceType": "水质测验设备",
-  //   "deviceName": "专用取水浮台",
-  //   "ueDeviceName": "专用取水浮台",
-  // },
   {
     "deviceType": "水位测验设备",
     "deviceName": "浮子水位计",
     "ueDeviceName": "水位计",
   },
-  {
-    "deviceType": "水位测验设备",
-    "deviceName": "视频水位观测系统1",
-    "ueDeviceName": "监控1",
-  },
   {
     "deviceType": "流量测验设备",
     "deviceName": "H-ADCP在线测流系统",
@@ -76,7 +66,7 @@ const deviceDetailList = [
   {
     "deviceType": "流量测验设备",
     "deviceName": "ADCP遥控船",
-    "ueDeviceName": "ADCP遥控船",
+    "ueDeviceName": "无人船",
   },
   {
     "deviceType": "流量测验设备",
@@ -94,23 +84,44 @@ const deviceDetailList = [
     "ueDeviceName": "称重式雨量桶",
   },
   {
-    "deviceType": "安防监控设备",
-    "deviceName": "视频监控摄像机",
-    "ueDeviceName": "监控2",
+    "deviceType": "监控",
+    "deviceName": "视频水位观测系统1",
+    "ueDeviceName": "监控1",
   },
   {
-    "deviceType": "安防监控设备",
-    "deviceName": "硬盘录像机",
-    "ueDeviceName": "硬盘录像机",
+    "deviceType": "监控",
+    "deviceName": "视频监控摄像机",
+    "ueDeviceName": "监控2",
   },
 ]
 
-function getDeviceByName(name: string) {
-  return deviceDetailList.find(item => item.deviceName === name)
+function getDeviceByName(name: any) {
+  return deviceDetailList.find(item => item.ueDeviceName === name)
+}
+
+function getDeviceTypeByName(name: any) {
+  const device = deviceDetailList.find(item => item.ueDeviceName === name)
+  if (device) {
+    switch (device.deviceType) {
+      case "监控":
+        return 'video'
+      case "降雨观测设备":
+        return 'rainfall'
+      case "流量测验设备":
+        return 'flow'
+      case "水质测验设备":
+        return 'waterQuality'
+      case "水位测验设备":
+        return 'waterLevel'
+      default:
+        return 'default'
+    }
+  }
+  return 'default'
 }
 
 function getDeviceByType(type: string) {
   return deviceDetailList.filter(item => item.deviceType === type)
 }
 
-export {deviceDetailList, getDeviceByName, getDeviceByType}
+export {deviceDetailList, getDeviceByName, getDeviceByType, getDeviceTypeByName}

src/utils/index.ts

@@ -7,7 +7,6 @@ import router from '@/router/index';
  * @param isBlank 是否新页面打开
  */
 export function jumpPage(path: string, query: any = null, isBlank = false) {
-  debugger
   if (path) {
     if (!isBlank) {
       router.push({path, query})

src/utils/mapConfig.ts

@@ -13,7 +13,7 @@ import thRiverData from '@/assets/json/thly2.json'
 export let scene: Scene;
 // 加载状态
 export let loadedStatus = false;
-export const imageMap = new Map()
+export let imageMap = new Map()
 
 function loadImage(images: any[]) {
   images.forEach((item: any) => {
@@ -28,6 +28,8 @@ function loadImage(images: any[]) {
  * 初始化地图
  */
 export function init(config: any) {
+  loadedStatus = false;
+  imageMap = new Map();
   scene = new Scene({
     id: 'mapDiv',
     map: new AntvMap({
@@ -84,11 +86,12 @@ function loadBaseLayer() {
   // );
   // scene.addLayer(baseLayer);
 }
+
 // 加载行政区划边界线
 function loadBoundaryLayer() {
-  const boundaryLayer=new PolygonLayer().source(boundary).shape('line').size(3).color('#dff619')
+  const boundaryLayer = new PolygonLayer().source(boundary).shape('line').size(3).color('#dff619')
   scene.addLayer(boundaryLayer);
-  const thLayer=new PolygonLayer().source(thData).shape('line').size(3).color('#dff619')
+  const thLayer = new PolygonLayer().source(thData).shape('line').size(3).color('#dff619')
   scene.addLayer(thLayer);
 
 }
@@ -101,7 +104,7 @@ function loadRiverLayer() {
   // scene.addLayer(river4Layer);
   // const river5Layer=new PolygonLayer().source(river5Data).shape('line').size(0.5).color('#aed5f3')
   // scene.addLayer(river5Layer);
-  const thRiverLayer=new PolygonLayer().source(thRiverData).shape('line').size(0.8).color('#08DAF1')
+  const thRiverLayer = new PolygonLayer().source(thRiverData).shape('line').size(0.8).color('#08DAF1')
   scene.addLayer(thRiverLayer);
 
 }
@@ -125,32 +128,44 @@ export function setCenter(center: Point, zoom: number, pitch = 0, padding = {})
 }
 
 export function loadMap(option: any) {
-  if (option.view) {
-    setCenter(option.view.center, option.view.zoom)
+  const loadMapFun = (option: any) => {
+    if (option.view) {
+      setCenter(option.view.center, option.view.zoom)
+    }
+    if (option.layers) {
+      // 清空图层
+      scene.removeAllLayer();
+      // 加载地图
+      loadBaseLayer()
+
+      option.layers.forEach((layer: any) => {
+        switch (layer.type) {
+          case 'point':
+            createPointByCongfig(layer)
+            break
+          // case 'line':
+          //   createLineByCongfig(layer, mapJson)
+          //   break
+          // case 'polygon':
+          //   createPolygonByCongfig(layer, mapJson)
+          //   break
+          // case 'mark':
+          //     setMark(config)
+          //   break
+        }
+      })
+    }
   }
-  if (option.layers) {
-    // 清空图层
-    scene.removeAllLayer();
-    // 加载地图
-    loadBaseLayer()
 
-    option.layers.forEach((layer: any) => {
-      switch (layer.type) {
-        case 'point':
-          createPointByCongfig(layer)
-          break
-        // case 'line':
-        //   createLineByCongfig(layer, mapJson)
-        //   break
-        // case 'polygon':
-        //   createPolygonByCongfig(layer, mapJson)
-        //   break
-        // case 'mark':
-        //     setMark(config)
-        //   break
-      }
-    })
+  function checkStatus(option: any) {
+    if (loadedStatus) {
+      loadMapFun(option)
+    } else {
+      setTimeout(() => checkStatus(option), 1000)
+    }
   }
+
+  checkStatus(option)
 }
 
 function createPointByCongfig(config: any) {

src/utils/station.ts

@@ -12,7 +12,7 @@ export const stations = [
     path: '',
     sttp: '水文站',
     detail: '东经：120°29′38.8″北纬：30°45′46.1″\n太师桥水文站是国家基本水文站，位于江苏省苏州市吴江区桃源镇前窑村，在江南运河（澜溪塘）干流江苏~浙江省际边界上，属太湖流域杭嘉湖区水系。\n2015年11月设站至今，主要监测项目有降水、水位、流量、水质（水温、pH、电导率、溶解氧、浊度、氧化还原电位、氨氮、高锰酸盐指数、总磷、总氮等10项指标）。配备翻斗式雨量计、称重式雨量计、浮子式水位计、视频识别水位系统、H-ADCP等测流仪器，采用指标流速关系等测流手段。',
-    img: '/src/assets/images/station_taishiqiao.png',
+    img: new URL('@/assets/images/station_taishiqiao.png', import.meta.url).href,
   },
   {
     stcd: '63304650',
@@ -27,7 +27,7 @@ export const stations = [
     path: '',
     sttp: '',
     detail: '东经：120°32′45.6″北纬：30°49′25.9″\n思源水文站位于江苏省苏州市吴江区贤胡村，在江南运河大德塘（严墓塘）干流江苏~浙江省际边界上，属太湖流域杭嘉湖区水系。2015年11月设站至今，主要监测项目有降水、水位、流量、水质（水温、pH、电导率、溶解氧、浊度、氧化还原电位、氨氮、高锰酸盐指数、总磷、总氮等10项指标）。配备翻斗式雨量计、称重式雨量计、浮子式水位计、视频识别水位系统、H-ADCP等测流仪器，采用指标流速关系等测流手段。',
-    img: '/src/assets/images/station_siyuan.png',
+    img: new URL('@/assets/images/station_siyuan.png', import.meta.url).href,
   },
   {
     stcd: '70111400',

src/views/Device.vue

@@ -1,17 +1,30 @@
 <script lang="ts" setup>
-import {onMounted, onUnmounted, ref} from 'vue'
+import {computed, onMounted, onUnmounted, ref} from 'vue'
 import {useRoute} from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
 import StripeTable from '@/components/StripeTable.vue'
-import {getDeviceByName} from '@/utils/device'
+import {getDeviceByName, getDeviceTypeByName} from '@/utils/device'
 import Chart from '@/components/Chart.vue'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
 import {View} from "@/utils/tdInstruction";
+import GwVideo from "@/components/Video/index.vue";
+import {getVideoCodeByMark} from "@/components/Video/video";
+import Flow from "@/components/DeviceComponent/flow.vue";
+import WaterQualityAnalysis from "@/components/DeviceComponent/WaterQualityAnalysis.vue";
+import WaterLevel from "@/components/DeviceComponent/waterLevel.vue";
+import Rainfall from "@/components/DeviceComponent/rainfall.vue";
 
 const route = useRoute()
 const right3Ref = ref(null)
-const device = ref(getDeviceByName('COD分析仪'))
+const device = ref(getDeviceByName(route.params.deviceid) || {})
+// 根据仪器类型展示信息 video、waterLevel、flow、rainfall、waterQuality、default
+const deviceType = computed(() => getDeviceTypeByName(route.params.deviceid))
+const deviceDetail = computed(() => device && device.detail ? device.detail.split('\n') : [])
+// 视频图片
+const videoImageSrc = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
+// 获取视频CODE
+const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室外"))
 
 
 const deviceStatusColumns = [
@@ -20,7 +33,6 @@ const deviceStatusColumns = [
   {label: '维护日期‌', prop: 'updateTm'},
   {label: '状态', prop: 'status', width: '70'}
 ]
-
 const deviceStatusData = [
   {deviceName: '总磷分析仪', woker: '陈标', updateTm: '11-20 15:00:00', status: '正常'},
   {deviceName: '总氮分析仪', woker: '于奇', updateTm: '11-20 15:00:00', status: '正常'},
@@ -39,7 +51,6 @@ const accessoriesData = [
   {name: '3-16泵管', days: 65, updateTm: '11-20 15:00:00'},
   {name: '瓶子', days: 102, updateTm: '11-20 15:00:00'}
 ]
-
 const reagentColumns = [
   {label: '试剂名称', prop: 'name'},
   {label: '添加体积', prop: 'volume', width: '110'},
@@ -51,7 +62,6 @@ const reagentData = [
   {name: '草酸钠溶液', volume: 3, updateTm: '11-20 15:00:00'},
   {name: '去离子水', volume: 2, updateTm: '11-20 15:00:00'}
 ]
-
 // function reloadRight3(list) {
 //   if (!list || list.length === 0) {
 //     return
@@ -243,7 +253,7 @@ function reloadRight3() {
 
 onMounted(() => {
   // reloadRight3([])
-  reloadRight3()
+  // reloadRight3()
 })
 
 onUnmounted(() => {
@@ -254,37 +264,105 @@ onUnmounted(() => {
 <template>
   <right-frame>
     <template #leftModule>
-      <card01 :title="device.deviceName" style="height: 65%">
-        <h4 style="color: #00ccff">设备简介</h4>
-        <el-row>
-          <el-col :span="16">
-            <p v-for="text in device.detail.split('\n')" class="introduce-text" v-html="text"></p>
-          </el-col>
-          <el-col :span="8">
-            <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img"/>
-          </el-col>
-        </el-row>
-        <h4 style="color: #00ccff">维护记录</h4>
-        <p>维护日期‌：2024年11月20日</p>
-        <p>维护内容：</p>
-        <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
-        <p>·检查电源线路，确保干燥和稳定。</p>
-        <p>·校准仪器，确保测量准确性。</p>
-      </card01>
-      <card01 style="height: 40%" title="设备维护情况">
-        <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
-      </card01>
+      <template v-if="['rainfall', 'flow','waterLevel'].includes(deviceType)">
+        <card01 :title="device.deviceName" style="height: 65%">
+          <h4 style="color: #00ccff">设备简介</h4>
+          <el-row>
+            <el-col :span="16">
+              <p v-for="text in deviceDetail" class="introduce-text" v-html="text"></p>
+            </el-col>
+            <el-col :span="8">
+              <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img"/>
+            </el-col>
+          </el-row>
+          <h4 style="color: #00ccff">维护记录</h4>
+          <p>维护日期‌：2024年11月20日</p>
+          <p>维护内容：</p>
+          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
+          <p>·检查电源线路，确保干燥和稳定。</p>
+          <p>·校准仪器，确保测量准确性。</p>
+        </card01>
+        <card01 style="height: 40%" title="设备维护情况">
+          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
+        </card01>
+      </template>
+      <template v-if="deviceType === 'waterQuality'">
+        <card01 :title="device.deviceName" style="height: 65%">
+          <h4 style="color: #00ccff">设备简介</h4>
+          <el-row>
+            <el-col :span="16">
+              <p v-for="text in deviceDetail" class="introduce-text" v-html="text"></p>
+            </el-col>
+            <el-col :span="8">
+              <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img"/>
+            </el-col>
+          </el-row>
+          <h4 style="color: #00ccff">维护记录</h4>
+          <p>维护日期‌：2024年11月20日</p>
+          <p>维护内容：</p>
+          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
+          <p>·检查电源线路，确保干燥和稳定。</p>
+          <p>·校准仪器，确保测量准确性。</p>
+        </card01>
+        <card01 style="height: 40%" title="水质监测">
+          <water-quality-analysis></water-quality-analysis>
+        </card01>
+      </template>
     </template>
     <template #rightModule>
-      <card01 style="height: 33%" title="配件运维信息">
-        <stripe-table :columns="accessoriesColumns" :data="accessoriesData"></stripe-table>
-      </card01>
-      <card01 style="height: 33%" title="试剂运维信息">
-        <stripe-table :columns="reagentColumns" :data="reagentData"></stripe-table>
-      </card01>
-      <card01 style="height: 33%" title="耗材余量监控">
-        <chart ref="right3Ref"></chart>
-      </card01>
+      <template v-if="deviceType=== 'default'">
+        <card01 :title="device.deviceName" style="height: 65%">
+          <h4 style="color: #00ccff">设备简介</h4>
+          <el-row>
+            <el-col :span="16">
+              <p v-for="text in deviceDetail" class="introduce-text" v-html="text"></p>
+            </el-col>
+            <el-col :span="8">
+              <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img"/>
+            </el-col>
+          </el-row>
+          <h4 style="color: #00ccff">维护记录</h4>
+          <p>维护日期‌：2024年11月20日</p>
+          <p>维护内容：</p>
+          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
+          <p>·检查电源线路，确保干燥和稳定。</p>
+          <p>·校准仪器，确保测量准确性。</p>
+        </card01>
+        <card01 style="height: 40%" title="设备维护情况">
+          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
+        </card01>
+      </template>
+      <template v-if="deviceType=== 'video'">
+        <card01 :title="device.deviceName" style="height: 40%">
+          <gw-video :code="videoCode" :imageSrc="videoImageSrc"></gw-video>
+        </card01>
+      </template>
+      <template v-if="deviceType=== 'waterLevel'">
+        <card01 :title="device.deviceName" style="height: 36%">
+          <water-level></water-level>
+        </card01>
+      </template>
+      <template v-if="deviceType=== 'rainfall'">
+        <card01 :title="device.deviceName" style="height: 36%">
+          <rainfall></rainfall>
+        </card01>
+      </template>
+      <template v-if="deviceType=== 'flow'">
+        <card01 :title="device.deviceName" style="height: 36%">
+          <flow></flow>
+        </card01>
+      </template>
+      <template v-if="deviceType=== 'waterQuality'">
+        <card01 style="height: 33%" title="设备维护情况">
+          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
+        </card01>
+        <card01 style="height: 33%" title="配件运维信息">
+          <stripe-table :columns="accessoriesColumns" :data="accessoriesData"></stripe-table>
+        </card01>
+        <card01 style="height: 33%" title="耗材余量监控">
+          <chart ref="right3Ref"></chart>
+        </card01>
+      </template>
     </template>
     <template #btnGroup>
       <station-right-button-group></station-right-button-group>

src/views/Home.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
-import { useMapStore } from '@/stores/map'
+import {onMounted, reactive, ref} from 'vue'
+import {useMapStore} from '@/stores/map'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
 import Chart from '@/components/chart.vue'
 import StripeTable from '@/components/StripeTable.vue'
-import { getRStLLMaxDate } from '@/api/home'
+import {getRStLLMaxDate} from '@/api/home'
 import bus from '@/utils/bus'
-import { stations } from '@/utils/station'
-import { jumpPage } from '@/utils'
+import {stations} from '@/utils/station'
+import {jumpPage} from '@/utils'
 import {copyObj} from '@/utils/ruoyi'
 import {View} from "@/utils/tdInstruction";
 
@@ -16,7 +16,37 @@ const zmwjianjie = new URL('@/assets/images/zmw_jieshao.jpg', import.meta.url).h
 const zmwnd = new URL('@/assets/images/zmw_nd.jpg', import.meta.url).href
 const zmwhs = new URL('@/assets/images/zmw_hs.jpg', import.meta.url).href
 
+const mapStore = useMapStore()
 const left2Ref = ref(null)
+const right1Ref = ref(null)
+const tableColumns = [
+  {
+    label: '站名', prop: 'stnm', convertFn: (data) => {
+      return data ? data.trim() : ''
+    }
+  },
+  {
+    label: '时间', prop: 'tm', width: '90', convertFn: (data) => {
+      return data ? data.substring(5, 16) : ''
+    }
+  },
+  {
+    label: '水位(m)', prop: 'z', width: '80', convertFn: (data) => {
+      return Number(data).toFixed(2)
+    }
+  },
+  {
+    label: '流量', prop: 'q', width: '70', convertFn: (data) => {
+      return Number(data).toFixed(2)
+    }
+  },
+  {
+    label: '雨量', prop: 'drp', width: '65', convertFn: (data) => {
+      return data | 0
+    }
+  }
+]
+const tableData = reactive([])
 
 function reloadLeft2() {
   const option = {
@@ -37,9 +67,9 @@ function reloadLeft2() {
           color: '#fff'
         },
         data: [
-          { value: 6, name: '水文站' },
-          { value: 5, name: '河道水文站' },
-          { value: 1, name: '实验站' }
+          {value: 6, name: '水文站'},
+          {value: 5, name: '河道水文站'},
+          {value: 1, name: '实验站'}
         ]
       }
     ]
@@ -47,8 +77,6 @@ function reloadLeft2() {
   left2Ref.value.loadChart(option)
 }
 
-const right1Ref = ref(null)
-
 function reloadRight1() {
   const option = {
     color: ['#fac858', '#ee6666'],
@@ -135,108 +163,14 @@ function reloadRight1() {
   right1Ref.value.loadChart(option)
 }
 
-const tableColumns = [
-  {
-    label: '站名', prop: 'stnm', convertFn: (data) => {
-      return data ? data.trim() : ''
-    }
-  },
-  {
-    label: '时间', prop: 'tm', width: '90', convertFn: (data) => {
-      return data ? data.substring(5, 16) : ''
-    }
-  },
-  {
-    label: '水位(m)', prop: 'z', width: '80', convertFn: (data) => {
-      return Number(data).toFixed(2)
-    }
-  },
-  {
-    label: '流量', prop: 'q', width: '70', convertFn: (data) => {
-      return Number(data).toFixed(2)
-    }
-  },
-  {
-    label: '雨量', prop: 'drp', width: '65', convertFn: (data) => {
-      return data | 0
-    }
-  }
-]
-const tableData = reactive([])
-
 function getStationList() {
   getRStLLMaxDate().then(res => {
     tableData.push(...res)
     initPoints()
+  }).catch(() => {
   })
 }
 
-const right3Ref = ref(null)
-
-function reloadRight3() {
-  const option = {
-    // backgroundColor: "#0B2D55",
-    tooltip: {
-      axisPointer: {
-        type: 'cross'
-      }
-    },
-    grid: {
-      top: '14%',
-      left: '2%',
-      right: '4%',
-      bottom: '5%',
-      containLabel: true
-    },
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
-        show: true,
-        lineStyle: {
-          color: '#233e64'
-        }
-      },
-      axisLabel: { // 坐标轴刻度标签的相关设置
-        color: '#02cacf'
-      },
-      axisTick: { show: false },
-      data: ['太师桥', '文桥', '双林桥', '思源', '太平桥']
-    }],
-    yAxis: [{
-      name: '℃',
-      nameTextStyle: {
-        color: '#02cacf'
-      },
-      min: value => (value.min - 1).toFixed(0),
-      max: value => (value.max + 1).toFixed(0),
-      axisLabel: {
-        margin: 20,
-        color: '#02cacf'
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: '#233e64'
-        }
-      }
-    }],
-    series: [{
-      name: '太湖水位',
-      type: 'line',
-      smooth: true, //是否平滑曲线显示
-      lineStyle: {
-        color: '#3deaff'
-      },
-      data: [23.1, 22.7, 22.9, 23, 22.6]
-    }
-    ]
-  }
-  right3Ref.value.loadChart(option)
-}
-
-const mapStore = useMapStore()
-
 /**
  * 初始化测站点位
  */
@@ -296,7 +230,6 @@ onMounted(() => {
   reloadLeft2()
   reloadRight1()
   getStationList()
-  // reloadRight3()
 })
 
 // 订阅一个具体的事件
@@ -317,8 +250,8 @@ bus.on('point_click', (data: any) => {
 <template>
   <right-frame>
     <template #leftModule>
-      <card01 title="简介" style="height: 69%">
-        <el-carousel :interval="5000" arrow="never" trigger="click" :autoplay="true" style="width: 100%;height: 100%;">
+      <card01 style="height: 69%" title="简介">
+        <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;" trigger="click">
           <el-carousel-item>
             <h2 class="introduce-title">嘉兴监测中心</h2>
             <p class="introduce-text">
@@ -328,7 +261,7 @@ bus.on('point_click', (data: any) => {
               浙闽皖水文水资源监测中心主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
               浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心、宁德水文水资源监测分中心。
             </p>
-            <img :src="zmwjianjie" alt="" class="introduce-img" />
+            <img :src="zmwjianjie" alt="" class="introduce-img"/>
           </el-carousel-item>
           <el-carousel-item>
             <h2 class="introduce-title">宁德水文水资源监测分中心</h2>
@@ -338,7 +271,7 @@ bus.on('point_click', (data: any) => {
             <p class="introduce-text">
               宁德水文水资源监测分中心拥有甲类实验室1个，配备气相色谱仪1台、多功能自动进样系统1套、原子吸收分光光度计1台、电感耦合等离子体发射光谱仪1台、原子荧光光度计1台、离子色谱仪1台、紫外可见分光光度仪（带自动进样器）2台、连续流动分析仪（氰化物、挥发酚、阴离子表面活性剂）1台、连续流动分析仪（硫化物、氨氮、总氮）1台、微波消解仪1台、便携式多参数监测仪1台等各类监测仪器设备40台。
             </p>
-            <img :src="zmwnd" alt="" class="introduce-img" />
+            <img :src="zmwnd" alt="" class="introduce-img"/>
           </el-carousel-item>
           <el-carousel-item>
             <h2 class="introduce-title">黄山水文水资源监测分中心</h2>
@@ -348,7 +281,7 @@ bus.on('point_click', (data: any) => {
             <p class="introduce-text">
               黄山分中心业务工作主要为水文水资源和生态监测，配有雨量计、激光水位计、浮子水位计、雷达水位计、走航ADCP、固定ADCP、流速仪、侧扫雷达、OBS浊度仪等各类水文监测仪器设备70余套；配有气相色谱仪、液相色谱仪、原子吸收分光光度计、原子荧光光度计、紫外可见分光光度仪、连续流动分析仪、核酸蛋白分析仪、通用突变检测系统等各类监测仪器设备60台套。
             </p>
-            <img :src="zmwhs" alt="" class="introduce-img" />
+            <img :src="zmwhs" alt="" class="introduce-img"/>
           </el-carousel-item>
         </el-carousel>
       </card01>

src/views/Situational.vue

@@ -418,7 +418,6 @@ function handleControlWaterLevel(value) {
 }
 
 function jumpTo(value) {
-  debugger
   switch (value) {
     case 'flow':
       jumpPage(`/sw/${route.params.stcd}/flow`)

src/views/StationHouse.vue

@@ -228,7 +228,6 @@ onMounted(() => {
 
 onUnmounted(() => {
   if (testSimulationStatus.value !== 0) {
-    debugger
     handleTestSimulation('stop')
   }
 })

src/views/Sw.vue

@@ -6,7 +6,6 @@ const imgSrc = ref(null)
 const route = useRoute()
 
 onMounted(() => {
-  debugger
   var srcType = route.params.type
   switch (srcType) {
     case 'sw':