总览、智慧运维优化

src/api/device.ts

@@ -0,0 +1,99 @@
+/**
+ * 设备一览表
+ */
+export function getDeviceInfo() {
+  // return request({
+  //   url: '/tbazmw_api/tbazmw/thdata/getRVandDrpMaxDate',
+  //   method: 'get'
+  // })
+  return Promise.resolve([
+    {
+      "deviceType": "水位测验设备",
+      "deviceId": "0012356T01",
+      "deviceName": "浮子水位计",
+      "state": "正常",
+      "online": "运行中",
+    },
+    {
+      "deviceType": "降水观测设备",
+      "deviceId": "0012356T02",
+      "deviceName": "翻斗式雨量计",
+      "state": "异常",
+      "online": "维修",
+    },
+    {
+      "deviceType": "降水观测设备",
+      "deviceId": "0012356T03",
+      "deviceName": "称重式雨量计",
+      "state": "正常",
+      "online": "运行中",
+    }, {
+      "deviceType": "流量测验设备",
+      "deviceId": "0012356T04",
+      "deviceName": "ADCP遥控船",
+      "state": "正常",
+      "online": "运行中",
+    },
+    {
+      "deviceType": "安防监控设备",
+      "deviceId": "0012356T05",
+      "deviceName": "视频监控摄像机",
+      "state": "异常",
+      "online": "故障",
+    },{
+      "deviceType": "水质测验设备",
+      "deviceId": "0012356T06",
+      "deviceName": "总磷总氮",
+      "state": "正常",
+      "online": "运行中",
+    },{
+      "deviceType": "水质测验设备",
+      "deviceId": "0012356T07",
+      "deviceName": "多参数采样器",
+      "state": "正常",
+      "online": "运行中",
+    },{
+      "deviceType": "水质测验设备",
+      "deviceId": "0012356T08",
+      "deviceName": "COD分析仪",
+      "state": "正常",
+      "online": "运行中",
+    },{
+      "deviceType": "水质测验设备",
+      "deviceId": "0012356T09",
+      "deviceName": "氨氮",
+      "state": "正常",
+      "online": "运行中",
+    },
+  ])
+}
+
+/**
+ * 设备耗材信息
+ */
+export function getDetailInfo() {
+  // return request({
+  //   url: '/tbazmw_api/tbazmw/thdata/getRVandDrpMaxDate',
+  //   method: 'get'
+  // })
+  return Promise.resolve([
+    {
+      "partsName": "1-16泵管",
+      "useDate": "160",
+      "offDate": "2025-03-16",
+    },{
+      "partsName": "1-16泵管",
+      "useDate": "160",
+      "offDate": "2025-03-16",
+    },{
+      "partsName": "1-16泵管",
+      "useDate": "160",
+      "offDate": "2025-03-16",
+    },{
+      "partsName": "1-16泵管",
+      "useDate": "160",
+      "offDate": "2025-03-16",
+    }
+  ])
+}
+

src/api/home.ts

@@ -518,118 +518,16 @@ export function getRStLLMaxDate() {
       "swz": null
     },
     {
-      "stcd": "63313001",
-      "stnm": "梅台港桥",
-      "title": "梅台港桥",
-      "tm": "2024-10-30 14:00:00",
-      "lgtd": "120.774598",
-      "lttd": "30.99626",
-      "shuxing": "预警站",
-      "xzqh": "浙江嘉兴",
-      "z": "3.11",
-      "q": "-66.298",
-      "drp": null,
-      "dyp": null,
-      "stjl": null,
-      "xsa": null,
-      "xsavv": null,
-      "xsmxv": null,
-      "flwchrcd": null,
-      "wptn": null,
-      "msqmt": null,
-      "msamt": null,
-      "msvmt": null,
-      "grz": null,
-      "wrz": null,
-      "avz": null,
-      "avq": null,
-      "maxz": null,
-      "minz": null,
-      "maxq": null,
-      "minq": null,
-      "maxztm": null,
-      "minztm": null,
-      "maxqtm": null,
-      "minqtm": null,
-      "day": null,
-      "mnth": null,
-      "ohmaxr": null,
-      "ohbgtm": null,
-      "twhmaxr": null,
-      "shmaxr": null,
-      "shbgtm": null,
-      "twemaxr": null,
-      "twbgtm": null,
-      "odbgtm": null,
-      "tedmaxr": null,
-      "tedbgtm": null,
-      "odmaxr": null,
-      "mydavz": null,
-      "mydavq": null,
-      "swz": null
-    },
-    {
-      "stcd": "63312411",
-      "stnm": "陶庄枢纽",
-      "title": "陶庄枢纽",
-      "tm": "2024-10-30 14:00:00",
-      "lgtd": "120.829083",
-      "lttd": "31.002328",
-      "shuxing": "预警站",
-      "xzqh": "浙江嘉兴",
-      "z": "3.09",
-      "q": "-116.508",
-      "drp": null,
-      "dyp": null,
-      "stjl": null,
-      "xsa": null,
-      "xsavv": null,
-      "xsmxv": null,
-      "flwchrcd": null,
-      "wptn": null,
-      "msqmt": null,
-      "msamt": null,
-      "msvmt": null,
-      "grz": null,
-      "wrz": null,
-      "avz": null,
-      "avq": null,
-      "maxz": null,
-      "minz": null,
-      "maxq": null,
-      "minq": null,
-      "maxztm": null,
-      "minztm": null,
-      "maxqtm": null,
-      "minqtm": null,
-      "day": null,
-      "mnth": null,
-      "ohmaxr": null,
-      "ohbgtm": null,
-      "twhmaxr": null,
-      "shmaxr": null,
-      "shbgtm": null,
-      "twemaxr": null,
-      "twbgtm": null,
-      "odbgtm": null,
-      "tedmaxr": null,
-      "tedbgtm": null,
-      "odmaxr": null,
-      "mydavz": null,
-      "mydavq": null,
-      "swz": null
-    },
-    {
-      "stcd": "63312340",
-      "stnm": "大舜枢纽",
-      "title": "大舜枢纽",
+      "stcd": "701T0001",
+      "stnm": "新安江水文实验站",
+      "title": "丁栅闸",
       "tm": "2024-10-30 14:00:00",
-      "lgtd": "120.906514",
-      "lttd": "31.017386",
+      "lgtd": "120.9528",
+      "lttd": "31.018267",
       "shuxing": "预警站",
       "xzqh": "浙江嘉兴",
-      "z": "3.16",
-      "q": "-36.413",
+      "z": "3.22",
+      "q": "-3.014",
       "drp": null,
       "dyp": null,
       "stjl": null,
@@ -671,16 +569,16 @@ export function getRStLLMaxDate() {
       "swz": null
     },
     {
-      "stcd": "63312300",
-      "stnm": "丁栅闸",
-      "title": "丁栅闸",
-      "tm": "2024-10-30 14:00:00",
-      "lgtd": "120.9528",
-      "lttd": "31.018267",
-      "shuxing": "预警站",
-      "xzqh": "浙江嘉兴",
-      "z": "3.22",
-      "q": "-3.014",
+      "stcd": "71501011",
+      "stnm": "双港",
+      "title": "马蹄岙电站",
+      "tm": "2024-10-28 00:00:00",
+      "lgtd": "118.91861",
+      "lttd": "27.61917",
+      "shuxing": null,
+      "xzqh": null,
+      "z": null,
+      "q": "12.69",
       "drp": null,
       "dyp": null,
       "stjl": null,
@@ -771,57 +669,6 @@ export function getRStLLMaxDate() {
       "mydavz": null,
       "mydavq": null,
       "swz": null
-    },
-    {
-      "stcd": "71111530",
-      "stnm": "马蹄岙电站",
-      "title": "马蹄岙电站",
-      "tm": "2024-10-28 00:00:00",
-      "lgtd": "118.91861",
-      "lttd": "27.61917",
-      "shuxing": null,
-      "xzqh": null,
-      "z": null,
-      "q": "12.69",
-      "drp": null,
-      "dyp": null,
-      "stjl": null,
-      "xsa": null,
-      "xsavv": null,
-      "xsmxv": null,
-      "flwchrcd": null,
-      "wptn": null,
-      "msqmt": null,
-      "msamt": null,
-      "msvmt": null,
-      "grz": null,
-      "wrz": null,
-      "avz": null,
-      "avq": null,
-      "maxz": null,
-      "minz": null,
-      "maxq": null,
-      "minq": null,
-      "maxztm": null,
-      "minztm": null,
-      "maxqtm": null,
-      "minqtm": null,
-      "day": null,
-      "mnth": null,
-      "ohmaxr": null,
-      "ohbgtm": null,
-      "twhmaxr": null,
-      "shmaxr": null,
-      "shbgtm": null,
-      "twemaxr": null,
-      "twbgtm": null,
-      "odbgtm": null,
-      "tedmaxr": null,
-      "tedbgtm": null,
-      "odmaxr": null,
-      "mydavz": null,
-      "mydavq": null,
-      "swz": null
     }
   ])
 }

src/layout/index.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
-import {AppMain, Navbar} from '@/layout/components/index.js'
+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, watch} from "vue";
-import {useRoute} from "vue-router";
+import UePlayer from '@/components/UePlayer.vue'
+import { useAppStore } from '@/stores/app'
+import { onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 
 let navbarHeight = '12vh'
 
 let theme = ''
-let navbarStyle = {height: navbarHeight}
+let navbarStyle = { height: navbarHeight }
 
 const appStore = useAppStore()
 const route = useRoute()
@@ -17,6 +18,9 @@ const route = useRoute()
 function changeFloorType(path) {
   if (path === '/index') {
     appStore.changeFloorType('map')
+    // appStore.changeFloorType('img')
+  } else if (path.indexOf('/detail') > -1) {
+    appStore.changeFloorType('detail')
   } else {
     appStore.changeFloorType('ue')
   }
@@ -29,11 +33,17 @@ watch(() => route.path, path => {
 onMounted(() => {
   changeFloorType(route.path)
 })
+
+const yztSrc = ref(new URL('@/assets/images/yzt.png', import.meta.url).href)
+const detailSrc = ref(new URL('@/assets/images/detail.png', import.meta.url).href)
+
 </script>
 
 <template>
   <div :style="{ '--current-color': theme }" class="app-wrapper">
 
+    <div v-show="appStore.floorType === 'img'" class="floor-container"><img :src="yztSrc"></div>
+    <div v-show="appStore.floorType === 'detail'" class="floor-container"><img :src="detailSrc"></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>
 
@@ -49,9 +59,9 @@ onMounted(() => {
     <!-- 主页 -->
     <div class="main-container">
       <!-- 顶部 -->
-      <navbar :style="navbarStyle"/>
+      <navbar :style="navbarStyle" />
       <!-- 展示页 -->
-      <app-main/>
+      <app-main />
     </div>
   </div>
 </template>

src/router/index.ts

@@ -27,7 +27,7 @@ const router = createRouter({
           name: 'intelloper',
           component: () => import('@/views/IntellOper.vue'),
         },{
-          path: 'detail',
+          path: 'detail/:stcd',
           name: 'detail',
           component: () => import('@/views/Detail.vue'),
         },

src/stores/app.ts

@@ -4,6 +4,7 @@ import {defineStore} from 'pinia'
 export const useAppStore = defineStore('app', () => {
   // 底板类型
   const floorType = ref('map')
+  // const floorType = ref('img')
 
   function changeFloorType(type: string) {
     floorType.value = type

src/utils/mapConfig.ts

@@ -100,8 +100,8 @@ function loadRiverLayer() {
   scene.addLayer(river4Layer);
   const river5Layer=new PolygonLayer().source(river5Data).shape('line').size(0.5).color('#aed5f3')
   scene.addLayer(river5Layer);
-  // const thLayer=new PolygonLayer().source(thData).shape('line').size(2).color('#d7a8d0')
-  // scene.addLayer(thLayer);
+  const thLayer=new PolygonLayer().source(thData).shape('line').size(2).color('#d7a8d0')
+  scene.addLayer(thLayer);
 
 }
 

src/utils/station.ts

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

src/views/Home.vue

@@ -7,11 +7,13 @@ import Chart from '@/components/chart.vue'
 import StripeTable from '@/components/StripeTable.vue'
 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'
 
 const zmwjianjie = new URL('@/assets/images/zmw_jieshao.jpg', import.meta.url).href
+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 left2Ref = ref(null)
 
@@ -295,6 +297,7 @@ const showTool = ref(false)
 function showTools() {
   showTool.value = true
 }
+
 function closeTool() {
   showTool.value = false
 }
@@ -330,16 +333,40 @@ bus.on('point_click', (data: any) => {
 <template>
   <right-frame>
     <template #leftModule>
-      <card01 title="简介">
-        <h3 class="introduce-title">浙闽皖水文水资源监测中心</h3>
-        <p class="introduce-text">
-          位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
-        </p>
-        <p class="introduce-text">
-          浙闽皖水文水资源监测中心主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
-          浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心、宁德水文水资源监测分中心。
-        </p>
-        <img :src="zmwjianjie" alt="" class="introduce-img" />
+      <card01 title="简介" style="height: 69%">
+        <el-carousel :interval="5000" arrow="never" trigger="click" :autoplay="true" style="width: 100%;height: 100%;">
+          <el-carousel-item>
+            <h2 class="introduce-title">嘉兴监测中心</h2>
+            <p class="introduce-text">
+              位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
+            </p>
+            <p class="introduce-text">
+              浙闽皖水文水资源监测中心主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
+              浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心、宁德水文水资源监测分中心。
+            </p>
+            <img :src="zmwjianjie" alt="" class="introduce-img" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <h2 class="introduce-title">宁德水文水资源监测分中心</h2>
+            <p class="introduce-text">
+              位于福建省宁德市蕉城区金涵畲族乡金漳路10号，征地3亩，建筑面积1800平方米。紧邻福建省福建省宁德水文水资源勘测分中心管理的蕉城水文站。
+            </p>
+            <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" />
+          </el-carousel-item>
+          <el-carousel-item>
+            <h2 class="introduce-title">黄山水文水资源监测分中心</h2>
+            <p class="introduce-text">
+              位于安徽省黄山市高新区蓬莱路3号，占地4亩，基地建成684平方米实验室及附属办公设施。
+            </p>
+            <p class="introduce-text">
+              黄山分中心业务工作主要为水文水资源和生态监测，配有雨量计、激光水位计、浮子水位计、雷达水位计、走航ADCP、固定ADCP、流速仪、侧扫雷达、OBS浊度仪等各类水文监测仪器设备70余套；配有气相色谱仪、液相色谱仪、原子吸收分光光度计、原子荧光光度计、紫外可见分光光度仪、连续流动分析仪、核酸蛋白分析仪、通用突变检测系统等各类监测仪器设备60台套。
+            </p>
+            <img :src="zmwhs" alt="" class="introduce-img" />
+          </el-carousel-item>
+        </el-carousel>
       </card01>
       <card01 style="height: 30%" title="站点统计">
         <chart ref="left2Ref"></chart>
@@ -384,4 +411,8 @@ bus.on('point_click', (data: any) => {
 </template>
 <style lang="scss" scoped>
 @use "@/assets/styles/introduce.scss";
+
+.el-carousel :deep(.el-carousel__container) {
+  height: 500px;
+}
 </style>

src/views/IntellOper.vue

@@ -7,7 +7,7 @@ import {stations} from '@/utils/station'
 import StripeTable from '@/components/StripeTable.vue'
 import ColorTag from '@/components/tag/ColorTag.vue'
 import ImageTag from '@/components/tag/ImageTag.vue'
-import { getRStLLMaxDate } from '@/api/home'
+import { getDetailInfo, getDeviceInfo } from '@/api/device'
 import Chart from '@/components/Chart.vue'
 
 const route = useRoute()
@@ -41,18 +41,18 @@ const wlData = reactive({ ss: '3.80', zg: '4.65', zd: '4.65', bz: '4.65', jj: '4
 
 const moduleTableColumns = [
   {
-    label: '耗材名称', prop: 'stnm', width: '100', convertFn: (data) => {
+    label: '耗材名称', prop: 'partsName', width: '100', convertFn: (data) => {
       return data ? data.trim() : ''
     }
   },
   {
-    label: '剩余有效期', prop: 'z', width: '100', convertFn: (data) => {
-      return Number(data).toFixed(2)
+    label: '剩余有效期', prop: 'useDate', width: '100', convertFn: (data) => {
+      return Number(data).toFixed(0)
     }
   },
   {
-    label: '时间', prop: 'tm', width: '190', convertFn: (data) => {
-      return data ? data.substring(5, 16) : ''
+    label: '时间', prop: 'offDate', width: '190', convertFn: (data) => {
+      return data
     }
   }
 ]
@@ -75,17 +75,26 @@ const reagentTableColumns = [
 ]
 const deviceTableColumns = [
   {
-    label: '设备类型', prop: 'stnm', width: '110', convertFn: (data) => {
+    label: '设备类型', prop: 'deviceType', width: '110', convertFn: (data) => {
       return data ? data.trim() : ''
     }
   },
   {
-    label: '设备名称', prop: 'z', width: '280', convertFn: (data) => {
+    label: '设备名称', prop: 'deviceName', width: '110', convertFn: (data) => {
+      return data ? data.trim() : ''
+    }
+  },{
+    label: '运行状态', prop: 'state', width: '90', convertFn: (data) => {
+      return data ? data.trim() : ''
+    }
+  },
+  {
+    label: '运行情况', prop: 'online', width: '100', convertFn: (data) => {
       return data ? data.trim() : ''
     }
   }
 ]
-const tableData = reactive([])
+const operationTableData = reactive([])
 const deviceTableData = reactive([])
 
 const right3Ref = ref(null)
@@ -167,9 +176,14 @@ function reloadRight3() {
   right3Ref.value.loadChart(option)
 }
 
-function getStationList() {
-  getRStLLMaxDate().then(res => {
-    tableData.push(...res)
+function getDeviceInfoList() {
+  getDeviceInfo().then(res => {
+    deviceTableData.push(...res)
+  })
+}
+function getDeviceDetailInfoList() {
+  getDetailInfo().then(res => {
+    operationTableData.push(...res)
   })
 }
 
@@ -195,7 +209,8 @@ onMounted(() => {
     { label: '总氮', value: '22.3', unit: 'mg/L', imgSrc: new URL('@/assets/images/sz-tn.png', import.meta.url).href },
     { label: '氨氮', value: '22.3', unit: 'mg/L', imgSrc: new URL('@/assets/images/sz-ad.png', import.meta.url).href }
   ]
-  getStationList()
+  getDeviceInfoList()
+  getDeviceDetailInfoList()
   reloadRight3()
 })
 </script>
@@ -208,7 +223,7 @@ onMounted(() => {
           <el-col :span="7">
             <div class="device_num">
               <span class="background-image">设备管理</span>
-              <span style="font-size: 26px;font-weight: bold;">36</span>
+              <span style="font-size: 26px;font-weight: bold;">31</span>
             </div>
           </el-col>
           <el-col :span="10">
@@ -220,22 +235,19 @@ onMounted(() => {
           <el-col :span="7">
             <div class="device_num">
               <span class="background-image">在线设备</span>
-              <span style="font-size: 26px;font-weight: bold;">36</span>
+              <span style="font-size: 26px;font-weight: bold;">30</span>
             </div>
           </el-col>
         </el-row>
         <el-row style="height: calc(100% - 120px)">
-          <stripe-table :columns="deviceTableColumns" :data="tableData"></stripe-table>
+          <stripe-table :columns="deviceTableColumns" :data="deviceTableData"></stripe-table>
         </el-row>
 
       </card01>
     </template>
     <template #rightModule>
       <card01 style="height: 33%" title="配件运维信息">
-        <stripe-table :columns="moduleTableColumns" :data="tableData"></stripe-table>
-      </card01>
-      <card01 style="height: 33%" title="试剂运维信息">
-        <stripe-table :columns="reagentTableColumns" :data="tableData"></stripe-table>
+        <stripe-table :columns="moduleTableColumns" :data="operationTableData"></stripe-table>
       </card01>
       <card01 style="height: 33%" title="耗材余量监控">
         <chart ref="right3Ref"></chart>