设备简介调整

src/assets/styles/introduce.scss

@@ -20,6 +20,7 @@
 
 .introduce-float-img {
   float: right;
+  max-width: 100%;
   height: 200px;
   border-radius: 6px;
 }

src/components/DeviceIntroduce.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {getDeviceByName} from "@/utils/device";
+import {useRoute} from "vue-router";
+
+const route = useRoute()
+const device = ref(getDeviceByName(route.params.deviceid) || {})
+const deviceDetail = computed(() => device.value.detail ? device.value.detail.split('\n') : [])
+
+</script>
+
+<template>
+  <div v-if="deviceDetail && deviceDetail.length > 0">
+    <h4 style="color: #00ccff">设备简介</h4>
+    <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img" style="padding: 0 0 10px 10px;"/>
+    <p v-for="text in deviceDetail" class="introduce-text" v-html="text"></p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "@/assets/styles/introduce.scss";
+</style>

src/utils/device.ts

@@ -4,12 +4,16 @@ const deviceDetailList = [
     "deviceName": "控制单元",
     "ueDeviceName": "控制单元",
     "nanshuiDevId": "D1",
+    img: new URL('@/assets/images/device/控制单元.png', import.meta.url).href,
+    detail: ''
   },
   {
     "deviceType": "水质测验设备",
-    "deviceName": "氨氮",
+    "deviceName": "氨氮分析仪",
     "ueDeviceName": "氨氮",
     "nanshuiDevId": "D2",
+    img: new URL('@/assets/images/device/氨氮分析仪.png', import.meta.url).href,
+    detail: '在线氨氮分析仪是一种高性能的水质监测设备，能够实时监测水体中的氨氮含量，并支持监测多种其他水质参数，如pH值、溶解氧和电导率等。它具备数据记录与导出功能，方便用户分析历史数据，并通过RS485接口和MODBUS-RTU通讯协议，可以轻松与PLC、DCS等系统连接，实现数据的远程传输‌。'
   },
   {
     "deviceType": "水质测验设备",
@@ -17,7 +21,8 @@ const deviceDetailList = [
     "ueDeviceName": "总磷总氮",
     "nanshuiDevId": "D3",
     idx: ['TN', 'NH3N'],
-    detail: '仪表选型来自国产仪表厂商宝仪环境科技（上海）有限公司。\n总氮测量原理：碱性过硫酸盐消解紫外分光光度法；\n氨氮测量原理：水杨酸分光光度法。'
+    img: new URL('@/assets/images/device/总磷总氮.png', import.meta.url).href,
+    detail: '多参数自动分析，测量顺序和间隔可任意设定，自动清洗；自动校准，手动校准；二极管阵列全光谱测量技术，包括从紫外到可见光谱各个波段；可靠的浊度干扰修正技术；模块化设计，维护简便，量程可调可扩展；触摸屏显示，操作简单易学；故障报警，出错报警，来电自启动功能。'
   },
   {
     "deviceType": "水质测验设备",
@@ -25,8 +30,9 @@ const deviceDetailList = [
     "ueDeviceName": "CODmn",
     "nanshuiDevId": "D4",
     idx: ['CODMN'],
-    img: new URL('@/assets/images/detail2.jpg', import.meta.url).href,
-    detail: '仪表选型来自水利部南京水利水文自动化研究所自研的NSY-CODmn型智能高锰酸盐指数在线分析仪。\n检测方法：高锰酸盐氧化法，光度滴定测量法。',
+    img: new URL('@/assets/images/device/COD分析仪.png', import.meta.url).href,
+    detail: '仪器是一种在线自动测试系统，仪器结构由水样采集装置、试样计量器、试剂计量器、氧化反应器、反应终点测定装置、数据显示装置、药液输送装置、试液排出装置、自动清洗装置、程序控制装置、数据传输装置（通信接口）以及机箱、面板等部件组成。 \n' +
+      '仪器采用温度传感器用于加热器控制，终点判定采用光度法检测颜色变化；采用 PLC 技术实现滴定过程控制以及数据计算、记录、显示、远程传输，仪器在测量周期间隙可调，使用已知浓度的标准溶液可进行自动标定。同时，根据需要可在任意时间进行手动校准。采用多种安全报警措施，包括电子切换装置，自动校准程序，为用户提供了一个简单的菜单设置程序，以满足使用要求。',
     list: [{}]
   },
   {
@@ -35,53 +41,62 @@ const deviceDetailList = [
     "ueDeviceName": "多参数采样器",
     "nanshuiDevId": "D5",
     idx: ['WT', 'PH', 'COND', 'REDOX', 'TURB'],
-    img: new URL('@/assets/images/detail2.jpg', import.meta.url).href,
-    detail: '监测指标：\n水温（工作原理：热电阻温度传感器是利用导体或半导体的电阻值随温度变化而变化的原理进行测温的）；\n' +
-      'pH/ORP（工作原理：利用玻璃电极对水溶液中氢离子浓度变化的选择性响应，与Ag/AgCl参比电极一起在溶液中组合形成“化学电池”。通过对其电动势变化的测量，确定溶液的pH值。）\n' +
-      '电导率（四极式电导率电极。相比2极式电导率，多了另外两个极板，这两个极板之间没有电流流过，只负责提供稳定不变的参考电位。当系统有变化时，如电极受到 污染了，电极根据感测到的信号自动调节加在电流极板上的电压大小，从而自动实现背景补偿。）\n' +
-      '溶解氧（荧光法溶解氧探头在顶端的薄膜上覆盖了一层荧光染料。 当一束短波长的光照射到荧光染料时，荧光染料从应激态回到基态时会发射长波长的红光，红光就是测试信号。溶解氧的浓度越高，红光持续的时间越短，通过测试红光的持续时间就可以知道溶解氧的浓度。）\n' +
-      '浊度（浊度是由水中的悬浮颗粒引起的，悬浮颗粒会漫 反射入射光，通常采用 90 度那个方向的散射光做为 测试信号，这样测试出来的单位称为 NTU。）'
+    img: new URL('@/assets/images/device/多参数采样器.png', import.meta.url).href,
+    detail: '五参数分析仪由控制器、pH 传感器、电导率传感器、溶解氧传感器、浊度传感器组成。传感器输出RS485 信号，现场应用时，抗干扰能力更强。控制器可同时接入 4 个传感器，同时有模拟量、数字量、开关量等多种输出接口。'
   },
   {
     "deviceType": "水质测验设备",
     "deviceName": "预处理单元",
     "ueDeviceName": "预处理单元",
     "nanshuiDevId": "D6",
+    detail: ''
   },
   {
     "deviceType": "水位测验设备",
-    "deviceName": "浮子水位计",
+    "deviceName": "浮子式水位",
     "ueDeviceName": "水位计",
+    img: new URL('@/assets/images/device/浮子式水位.png', import.meta.url).href,
+    detail: '浮子式水位计用于感测天然水体水位的变化，同时通过轴角编码器将水位模拟量转换为数字信息量，以满足信息传输、处理、记录和显示的需要。\nWFH-2A型全量机械编码水位计（包括传感器部分和显示器部分）可有线遥测、数显实时水位，供国家水文站网，或防汛、科研和用水部门的水位观测。'
   },
   {
     "deviceType": "流量测验设备",
     "deviceName": "H-ADCP在线测流系统",
     "ueDeviceName": "H-ADCP",
+    detail: ''
   },
   {
     "deviceType": "流量测验设备",
     "deviceName": "走航式ADCP率定",
     "ueDeviceName": "走航式ADCP率定",
+    detail: ''
   },
   {
     "deviceType": "流量测验设备",
     "deviceName": "ADCP遥控船",
     "ueDeviceName": "无人船",
+    detail: ''
   },
   {
     "deviceType": "流量测验设备",
     "deviceName": "探照灯",
     "ueDeviceName": "探照灯",
+    detail: ''
   },
   {
     "deviceType": "降雨观测设备",
-    "deviceName": "翻斗式雨量计",
+    "deviceName": "翻斗式雨量传感器",
     "ueDeviceName": "翻斗式雨量桶",
+    img: new URL('@/assets/images/device/翻斗式雨量传感器.png', import.meta.url).href,
+    detail: '翻斗式雨量传感器 是一种水文、气象仪器，用以测量自然界降雨量，同时将降雨量转换为以开关量形式表示的数字信息量输出，以满足信息传输、处理、记录和显示等的需要。 国内首先研制成功的0.2、0.5mm翻斗式雨量计，可用于国家水文、气象站网雨量数据长期收集的雨量传感器。翻斗式雨量计是降水量测量一次仪表，其性能符合国家标准GB/T11832-2002《翻斗式雨量计》和国家标准GB/T11831-2002《水文测报装置遥测雨量计》相关要求。\n' +
+      '该仪器与记录或显示部分配套，可进行有线雨量数据传输、显示、自记。与无线水情自动测报系统配套，作为专设站雨情遥测报汛的传感器。 广泛用于全国各水文站，并且批量出口东西方国家，获国家实用新型专利。该型雨量传感器经中国气象局产业发展与装备部选型试验、考核，证明性能稳定性，性能达到国际先进水平。'
   },
   {
     "deviceType": "降雨观测设备",
-    "deviceName": "称重式雨量计",
+    "deviceName": "称重式自记雨量计",
     "ueDeviceName": "称重式雨量桶",
+    img: new URL('@/assets/images/device/翻斗式雨量传感器.png', import.meta.url).href,
+    detail: '称重式自记雨量计利用一个弹簧装置或一个重量平衡系统，将储水器连同其中积存的降水的总重量作连续记录。没有自动倒水，固定容积，需减小蒸发损失(加油或其他蒸发抑制剂)，特别适合测量固体降水。\n' +
+      '称重式自记雨量计可以连续记录接雨杯上的以及存储在其内的降水的重量。记录方式可以用机械发条装置或平衡锤系统，将全部降水量的重量如数记录下来，并能够记录雪、冰雹及雨雪混合降水。用以连续测量记录降雨量、降雨历时和降雨强度。适用于气象台(站)、水文站、环保、防汛排涝以及农、林等有关部门用来测量降水量。'
   },
   {
     "deviceType": "监控",

src/views/Device.vue

@@ -15,13 +15,13 @@ import WaterLevel from "@/components/DeviceComponent/WaterLevel.vue";
 import Rainfall from "@/components/DeviceComponent/Rainfall.vue";
 import AdcpFlow from "@/components/DeviceComponent/AdcpFlow.vue";
 import WaterFlow from "@/components/DeviceComponent/WaterFlow.vue";
+import DeviceIntroduce from "@/components/DeviceIntroduce.vue";
 
 const route = useRoute()
 const right3Ref = ref(null)
 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
@@ -275,15 +275,7 @@ onUnmounted(() => {
     <template #leftModule>
       <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>
+          <device-introduce></device-introduce>
           <h4 style="color: #00ccff">维护记录</h4>
           <p>维护日期‌：2024年11月20日</p>
           <p>维护内容：</p>
@@ -297,15 +289,7 @@ onUnmounted(() => {
       </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>
+          <device-introduce></device-introduce>
           <h4 style="color: #00ccff">维护记录</h4>
           <p>维护日期‌：2024年11月20日</p>
           <p>维护内容：</p>
@@ -321,15 +305,7 @@ onUnmounted(() => {
     <template #rightModule>
       <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>
+          <device-introduce></device-introduce>
           <h4 style="color: #00ccff">维护记录</h4>
           <p>维护日期‌：2024年11月20日</p>
           <p>维护内容：</p>
@@ -380,5 +356,4 @@ onUnmounted(() => {
   </right-frame>
 </template>
 <style lang="scss" scoped>
-@use "@/assets/styles/introduce.scss";
 </style>