调整

src/components/CardList.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-
 defineProps({
   data: {type: Array, default: []},
 })
-
 </script>
 
 <template>
@@ -20,7 +18,6 @@ defineProps({
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
-  //align-items: center;
+  justify-content: space-between;
 }
 </style>

src/components/UePlayer.vue

@@ -15,8 +15,8 @@ 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",
       AutoConnect: true,
       AutoPlayVideo: true,

src/layout/index.vue

@@ -34,6 +34,9 @@ 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;

src/utils/tdInstruction/view.ts

@@ -65,6 +65,10 @@ export function changeDeviceView(type = "转跳", stcd: any, name: any = null) {
 }
 
 export function closeDeviceView(stcd: any) {
+  if (!deviceView) {
+    return
+  }
+
   let descriptor = {
     "command": "ShowInstrument",
     "data": {

src/views/Device.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import {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} from '@/utils/device'
 import Chart from '@/components/Chart.vue'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
+import {View} from "@/utils/tdInstruction";
 
 const route = useRoute()
 const right3Ref = ref(null)
@@ -14,41 +15,41 @@ const device = ref(getDeviceByName('COD分析仪'))
 
 
 const deviceStatusColumns = [
-  { label: '维护信息', prop: 'deviceName', width: '100' },
-  { label: '维护人员', prop: 'woker', width: '90' },
-  { label: '维护日期‌', prop: 'updateTm' },
-  { label: '状态', prop: 'status',width: '70' }
+  {label: '维护信息', prop: 'deviceName', width: '100'},
+  {label: '维护人员', prop: 'woker', width: '90'},
+  {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: '正常' },
-  { deviceName: '水位计', woker: '张孝荣', updateTm: '11-20 15:00:00', status: '正常' },
-  { deviceName: '氨氮分析仪', woker: '张孝荣', updateTm: '11-20 15:00:00', status: '正常' }
+  {deviceName: '总磷分析仪', woker: '陈标', updateTm: '11-20 15:00:00', status: '正常'},
+  {deviceName: '总氮分析仪', woker: '于奇', updateTm: '11-20 15:00:00', status: '正常'},
+  {deviceName: '水位计', woker: '张孝荣', updateTm: '11-20 15:00:00', status: '正常'},
+  {deviceName: '氨氮分析仪', woker: '张孝荣', updateTm: '11-20 15:00:00', status: '正常'}
 ]
 const accessoriesColumns = [
-  { label: '耗材名称', prop: 'name', width: '110' },
-  { label: '剩余有效期', prop: 'days', width: '110' },
-  { label: '到期时间', prop: 'updateTm' }
+  {label: '耗材名称', prop: 'name', width: '110'},
+  {label: '剩余有效期', prop: 'days', width: '110'},
+  {label: '到期时间', prop: 'updateTm'}
 ]
 const accessoriesData = [
-  { name: '1-16泵管', days: 120, updateTm: '11-20 15:00:00' },
-  { name: '试管', days: 20, updateTm: '11-20 15:00:00' },
-  { name: '滴定管', days: 90, updateTm: '11-20 15:00:00' },
-  { name: '3-16泵管', days: 65, updateTm: '11-20 15:00:00' },
-  { name: '瓶子', days: 102, updateTm: '11-20 15:00:00' }
+  {name: '1-16泵管', days: 120, updateTm: '11-20 15:00:00'},
+  {name: '试管', days: 20, updateTm: '11-20 15:00:00'},
+  {name: '滴定管', days: 90, updateTm: '11-20 15:00:00'},
+  {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' },
-  { label: '更换时间', prop: 'updateTm', width: '110' }
+  {label: '试剂名称', prop: 'name'},
+  {label: '添加体积', prop: 'volume', width: '110'},
+  {label: '更换时间', prop: 'updateTm', width: '110'}
 ]
 const reagentData = [
-  { name: '硫酸溶液', volume: 2, updateTm: '11-20 15:00:00' },
-  { name: '高锰酸钾溶液', volume: 1, updateTm: '11-20 15:00:00' },
-  { name: '草酸钠溶液', volume: 3, updateTm: '11-20 15:00:00' },
-  { name: '去离子水', volume: 2, updateTm: '11-20 15:00:00' }
+  {name: '硫酸溶液', volume: 2, updateTm: '11-20 15:00:00'},
+  {name: '高锰酸钾溶液', volume: 1, updateTm: '11-20 15:00:00'},
+  {name: '草酸钠溶液', volume: 3, updateTm: '11-20 15:00:00'},
+  {name: '去离子水', volume: 2, updateTm: '11-20 15:00:00'}
 ]
 
 // function reloadRight3(list) {
@@ -189,7 +190,7 @@ function reloadRight3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: ['1-16氯管', 'p3-16氯管', '3-16氯管']
     }],
     yAxis: [{
@@ -217,7 +218,7 @@ function reloadRight3() {
       name: '数量',
       type: 'bar',
       itemStyle: {
-        color: function(params) {
+        color: function (params) {
           // 根据params的
           const colorsMap = [
             '#4768ec',
@@ -243,7 +244,10 @@ function reloadRight3() {
 onMounted(() => {
   // reloadRight3([])
   reloadRight3()
+})
 
+onUnmounted(() => {
+  View.closeDeviceView(route.params.stcd)
 })
 </script>
 
@@ -257,7 +261,7 @@ onMounted(() => {
             <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" />
+            <img v-if="device.img" :src="device.img" alt="" class="introduce-float-img"/>
           </el-col>
         </el-row>
         <h4 style="color: #00ccff">维护记录</h4>

src/views/IntellOper.vue

@@ -11,7 +11,7 @@ import {getPie3DSimple} from "@/utils/chart";
 import {View} from "@/utils/tdInstruction";
 import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
 import {getDeviceByName} from "@/utils/device";
-import { getAlarmInfo } from '@/api/alarm'
+import {getAlarmInfo} from '@/api/alarm'
 
 const route = useRoute()
 
@@ -40,12 +40,12 @@ const deviceData = reactive([])
 
 const alarmColumns = [
   {
-    label: '报警类型', prop: 'deviceName', width: '100',convertFn: (data) => {
+    label: '报警类型', prop: 'deviceName', width: '100', convertFn: (data) => {
       return data ? data.trim() : ''
     }
   },
   {
-    label: '时间', prop: 'tm',  convertFn: (data) => {
+    label: '时间', prop: 'tm', convertFn: (data) => {
       return data ? data.substring(5, 16) : ''
     }
   },
@@ -56,6 +56,7 @@ const alarmColumns = [
   },
 ]
 const alarmData = reactive([])
+
 function getAlarmList() {
   getAlarmInfo().then(res => {
     alarmData.push(...res)
@@ -152,7 +153,11 @@ onMounted(() => {
 function handleDeviceClick(row) {
   const device = getDeviceByName(row.deviceName);
   if (device) {
-    View.changeView(`${route.params.stcd}_${device.ueDeviceName}`)
+    if (device["deviceType"] === "水质测验设备") {
+      View.changeDeviceView('打开模型', route.params.stcd, device.ueDeviceName)
+    } else {
+      View.changeView(`${route.params.stcd}_${device.ueDeviceName}`)
+    }
   }
 }
 </script>

src/views/Situational.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import {computed, onMounted, reactive, ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
-import { getStation, stationList } from '@/utils/station'
+import {getStation, stationList} from '@/utils/station'
 import ColorTag from '@/components/tag/ColorTag.vue'
 import Chart from '@/components/Chart.vue'
 import DataTag from '@/components/tag/DataTag.vue'
@@ -13,13 +13,13 @@ import {
   getWaterLevelAndFlowListOfPageByStcd,
   getWaterQualityLatest
 } from '@/api/gx'
-import { formatd } from '@/utils/ruoyi'
-import { filterWaterQualitys } from '@/utils/unit'
-import { getLatestTimeWithMinuteMultipleOfFive } from '@/utils/date'
+import {formatd} from '@/utils/ruoyi'
+import {filterWaterQualitys} from '@/utils/unit'
+import {getLatestTimeWithMinuteMultipleOfFive} from '@/utils/date'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
-import { useStationStore } from '@/stores/station'
-import { Operate } from '@/utils/tdInstruction'
-import { jumpPage } from '@/utils'
+import {useStationStore} from '@/stores/station'
+import {Operate} from '@/utils/tdInstruction'
+import {jumpPage} from '@/utils'
 
 const route = useRoute()
 const store = useStationStore()
@@ -31,7 +31,7 @@ const left2Ref = ref(null)
 const left3Ref = ref(null)
 const right1Ref = ref(null)
 const right3Ref = ref(null)
-const wqData = ref({ d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20' })
+const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
 const station = computed(() => getStation(route.params.stcd))
 const wlData = reactive({
   ss: '0',
@@ -108,7 +108,7 @@ async function reloadLeft2() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -154,7 +154,7 @@ async function reloadLeft2() {
 async function reloadLeft3() {
   const stcds = stationList.map(s => s.stcd).join(',')
   const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterLevelAndFlowLatest({ stcds, tm }).then(res => res.data)
+  const waterData = await getWaterLevelAndFlowLatest({stcds, tm}).then(res => res.data)
   const currentStationData = waterData.find(d => d.stcd === route.params.stcd)
   if (currentStationData) {
     store.setZ(currentStationData.z)
@@ -190,7 +190,7 @@ async function reloadLeft3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: stationList.map(s => s.stnm)
     }],
     yAxis: [{
@@ -265,7 +265,7 @@ async function reloadRight1() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: rainfallData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -306,7 +306,7 @@ async function reloadRight1() {
 async function reloadRight3() {
   const stcds = stationList.map(s => s.stcd).join(',')
   const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterQualityLatest({ stcds }).then(res => res.data)
+  const waterData = await getWaterQualityLatest({stcds}).then(res => res.data)
   const list = []
 
   stationList.forEach(s => {
@@ -355,7 +355,7 @@ async function reloadRight3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: list.map(s => s.stnm)
     }],
     yAxis: [{
@@ -398,7 +398,7 @@ async function reloadRight3() {
  * 获取最新水质数据
  */
 function getLatestWaterQuality() {
-  getWaterQualityLatest({ stcds: route.params.stcd }).then(res => {
+  getWaterQualityLatest({stcds: route.params.stcd}).then(res => {
     const data = res.data[0]
     wqData.value = {
       d1: data.ph,
@@ -413,12 +413,8 @@ function getLatestWaterQuality() {
   })
 }
 
-function handleSetWaterLevel(value) {
-  Operate.setWaterLevel(route.params.stcd, value)
-}
-
 function handleControlWaterLevel(value) {
-  waterLevel.value = value * 0.05
+  waterLevel.value = value / 0.05
 }
 
 function jumpTo(value) {
@@ -450,8 +446,8 @@ onMounted(() => {
 })
 
 watch(() => waterLevel, (value) => {
-  handleSetWaterLevel(value.value * 0.05)
-}, { deep: true })
+  Operate.setWaterLevel(route.params.stcd, value.value * 0.05)
+}, {deep: true})
 </script>
 <template>
   <right-frame>
@@ -459,36 +455,36 @@ watch(() => waterLevel, (value) => {
       <card01 style="height: 33%;" title="特征水位">
         <el-row :gutter="10" justify="space-around" style="height: 100%;">
           <el-col :span="16" style="height: 66%;margin-bottom: 1%;position: relative;"
-                  @click="handleSetWaterLevel(wlData.ss)">
+                  @click="handleControlWaterLevel(wlData.ss)">
             <div class="difang-water-level">
               <span class="difang-water-level-value">{{ wlData.ss }}m</span>
             </div>
-            <img :src="dibaImage" alt="" class="difang-image" />
+            <img :src="dibaImage" alt="" class="difang-image"/>
           </el-col>
           <el-col :span="8"
                   style="height: 66%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: space-between;">
             <color-tag :value="wlData.ss" label="实时水位" style="height: 48%;" unit="m"
-                       @click="handleControlWaterLevel(wlData.ss)" />
+                       @click="handleControlWaterLevel(wlData.ss)"/>
             <color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"
-                       @click="handleSetWaterLevel(wlData.zg)" />
+                       @click="handleControlWaterLevel(wlData.zg)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.bz" backgroundColor="#bb232f" label="保证水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.bz)" />
+                       @click="handleControlWaterLevel(wlData.bz)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.jj" backgroundColor="#b38b30" label="警戒水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.jj)" />
+                       @click="handleControlWaterLevel(wlData.jj)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.zd" backgroundColor="#adcbe0" label="历史最低水位" unit="m"
-                       @click="handleSetWaterLevel(wlData.zd)" />
+                       @click="handleControlWaterLevel(wlData.zd)"/>
           </el-col>
         </el-row>
         <div :style="{'background-image': `url(${waterSliderBackground})`}" class="water-level-slider-container">
           <div class="water-level-slider-main">
             <el-slider v-model="waterLevel" :format-tooltip="formatWaterLevelTooltip" :marks="waterLevelMarks"
-                       height="90%" placement="right" tooltip-class="slider-tooltip" vertical />
+                       height="90%" placement="right" tooltip-class="slider-tooltip" vertical/>
             <span class="water-level-slider-title">水位动态模拟</span>
           </div>
         </div>

src/views/StationHouse.vue

@@ -18,6 +18,8 @@ import {Operate} from "@/utils/tdInstruction";
 import {getDeviceByType} from "@/utils/device";
 import {getDeviceStatus} from "@/api/nanshui";
 import {HexToRgb} from "@/utils/color";
+import instrument from "@/assets/svg/instrument.svg";
+import bus from "@/utils/bus";
 
 const route = useRoute()
 const videoSrc = ref(new URL('@/assets/images/video.png', import.meta.url).href)
@@ -73,6 +75,9 @@ function handleTestSimulation(mode) {
   }
 }
 
+function jumpDevicePage(name) {
+  // View.changeDeviceView('打开模型', route.params.stcd, name)
+}
 
 /**
  * 获取设备状态
@@ -227,6 +232,14 @@ onUnmounted(() => {
     handleTestSimulation('stop')
   }
 })
+
+// 底板回调监听
+bus.on('test_simulation', (data) => {
+  if (data.Category && data.Category === 'ClickMesh' && data.Data.Type === '动画结束') {
+    // 动画结束，修改状态
+    testSimulationStatus.value = 0
+  }
+})
 </script>
 <template>
   <right-frame>
@@ -259,15 +272,19 @@ onUnmounted(() => {
         <card-list :data="deviceList" style="height: calc(100% - 86px);margin-bottom: 10px;">
           <template #default="scope">
             <div
-              :style="{'background-image': scope.row.status === 'open' ? `linear-gradient(100deg, ${LIGHT_GREEN} 0%, ${GREEN} 70%)`:`linear-gradient(100deg, ${LIGHT_RED} 0%, ${RED} 70%)`}"
-              style="padding: 12px 20px;display: flex;justify-content: space-between;align-items: center;">
-              <div style="font-weight: bolder;cursor: pointer;">{{ scope.row.deviceName }}</div>
+                :style="{'background-image': scope.row.status === 'open' ? `linear-gradient(100deg, ${LIGHT_GREEN} 0%, ${GREEN} 70%)`:`linear-gradient(100deg, ${LIGHT_RED} 0%, ${RED} 70%)`}"
+                style="padding: 12px 20px;display: flex;justify-content: space-between;align-items: center;">
+              <div style="font-weight: bolder;cursor: pointer;"
+                   @click="jumpDevicePage(scope.row.ueDeviceName)">
+                <icon :data="instrument"/>&nbsp;
+                {{ scope.row.deviceName }}
+              </div>
               <div>
                 <el-switch
-                  v-model="scope.row.status"
-                  active-value="open"
-                  inactive-value="close"
-                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                    v-model="scope.row.status"
+                    active-value="open"
+                    inactive-value="close"
+                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                 />
               </div>
             </div>