|
@@ -1,20 +1,22 @@
|
|
|
<script lang="ts" setup>
|
|
|
-import {computed, onMounted, onUnmounted, ref} from 'vue'
|
|
|
-import {useRoute} from 'vue-router'
|
|
|
+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, getDeviceTypeByName} from '@/utils/device'
|
|
|
+import { getDeviceByName, getDeviceTypeByName } from '@/utils/device'
|
|
|
import Chart from '@/components/Chart.vue'
|
|
|
import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
|
|
|
-import {Label, View} from "@/utils/tdInstruction";
|
|
|
-import GwVideo from "@/components/Video/index.vue";
|
|
|
-import {getVideoCodeByMark} from "@/components/Video/video";
|
|
|
-import WaterQualityAnalysis from "@/components/DeviceComponent/WaterQualityAnalysis.vue";
|
|
|
-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 { Label, View } from '@/utils/tdInstruction'
|
|
|
+import GwVideo from '@/components/Video/index.vue'
|
|
|
+import { getVideoCodeByMark } from '@/components/Video/video'
|
|
|
+import WaterQualityAnalysis from '@/components/DeviceComponent/WaterQualityAnalysis.vue'
|
|
|
+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 { getMaintenanceScheduleTask, getMaintenanceTaskLog, getSparePart } from '@/api/device'
|
|
|
+import moment from 'moment'
|
|
|
|
|
|
const route = useRoute()
|
|
|
const right3Ref = ref(null)
|
|
@@ -25,43 +27,54 @@ const deviceDetail = computed(() => device && device.detail ? device.detail.spli
|
|
|
// 视频图片
|
|
|
const videoImageSrc = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
|
|
|
// 获取视频CODE
|
|
|
-const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', "室外"))
|
|
|
+const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', '室外'))
|
|
|
|
|
|
|
|
|
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 = ref([])
|
|
|
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'}
|
|
|
-]
|
|
|
-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'}
|
|
|
+ { label: '耗材名称', prop: 'partName', width: '110' },
|
|
|
+ {
|
|
|
+ label: '剩余有效期', prop: 'warranty', width: '110', convertFn: (data) => {
|
|
|
+ var formatDate = 'yyyy-MM-DD'
|
|
|
+ var curday = moment().format(formatDate)
|
|
|
+ var outday = moment(data)
|
|
|
+ return outday.diff(curday, 'days')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '到期时间', prop: 'warranty'
|
|
|
+ }
|
|
|
]
|
|
|
+const accessoriesData=ref([])
|
|
|
+// const accessoriesData = [
|
|
|
+// { name: '1-16泵管', days: 120, warranty: '2025-11-20' }
|
|
|
+// // { name: '试管', days: 20, warranty: '11-20 15:00:00' },
|
|
|
+// // { name: '滴定管', days: 90, warranty: '11-20 15:00:00' },
|
|
|
+// // { name: '3-16泵管', days: 65, warranty: '11-20 15:00:00' },
|
|
|
+// // { name: '瓶子', days: 102, warranty: '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) {
|
|
|
// if (!list || list.length === 0) {
|
|
@@ -175,7 +188,7 @@ const reagentData = [
|
|
|
// }
|
|
|
// right3Ref.value.loadChart(option)
|
|
|
// }
|
|
|
-function reloadRight3() {
|
|
|
+async function reloadRight3() {
|
|
|
const option = {
|
|
|
// backgroundColor: "#0B2D55",
|
|
|
tooltip: {
|
|
@@ -201,8 +214,8 @@ function reloadRight3() {
|
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- axisTick: {show: false},
|
|
|
- data: ['1-16氯管', 'p3-16氯管', '3-16氯管']
|
|
|
+ axisTick: { show: false },
|
|
|
+ data: sparePart.value["xdata"]
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
name: '个',
|
|
@@ -229,7 +242,7 @@ function reloadRight3() {
|
|
|
name: '数量',
|
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
|
- color: function (params) {
|
|
|
+ color: function(params) {
|
|
|
// 根据params的
|
|
|
const colorsMap = [
|
|
|
'#4768ec',
|
|
@@ -245,25 +258,86 @@ function reloadRight3() {
|
|
|
show: true,
|
|
|
position: 'top'
|
|
|
},
|
|
|
- data: [3, 5, 6]
|
|
|
+ data: sparePart.value["ydata"]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
right3Ref.value.loadChart(option)
|
|
|
}
|
|
|
|
|
|
+const maintainRecord = ref({})
|
|
|
+
|
|
|
+// 设备运维记录
|
|
|
+function getMaintainRecordData() {
|
|
|
+ var data = {
|
|
|
+ 'page': 1,
|
|
|
+ 'pageSize': 1,
|
|
|
+ 'stationCode': route.params.stcd,
|
|
|
+ 'equipmentName': route.params.equipmentName ? route.params.equipmentName : ''
|
|
|
+ }
|
|
|
+ getMaintenanceTaskLog(data).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (res.data.length != 0) {
|
|
|
+ maintainRecord.value = res.data.records[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 设备维护任务(接口有问题)
|
|
|
+function getMaintainTaskData() {
|
|
|
+ var data = {
|
|
|
+ 'page': 1,
|
|
|
+ 'pageSize': 1,
|
|
|
+ 'stationCode': route.params.stcd,
|
|
|
+ 'equipmentName': route.params.equipmentName ? route.params.equipmentName : ''
|
|
|
+ }
|
|
|
+ getMaintenanceScheduleTask(data).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (res.data.length != 0) {
|
|
|
+ // deviceStatusData.value = res.data.records
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const sparePart = ref({})
|
|
|
+// 配件运维信息(需要提供测站id和设备id)
|
|
|
+function getSparePartData() {
|
|
|
+ var data = {
|
|
|
+ 'page': 1,
|
|
|
+ 'pageSize': 1
|
|
|
+ }
|
|
|
+ getSparePart(data).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (res.data.length != 0) {
|
|
|
+ accessoriesData.value = res.data.records
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var xdata=[]
|
|
|
+ var ydata=[]
|
|
|
+ accessoriesData.value.forEach(d=>{
|
|
|
+ xdata.push(d["partName"])
|
|
|
+ ydata.push(d["partTotal"])
|
|
|
+ })
|
|
|
+ sparePart.value["xdata"]=xdata
|
|
|
+ sparePart.value["ydata"]=ydata
|
|
|
+ reloadRight3()
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- // reloadRight3([])
|
|
|
- // reloadRight3()
|
|
|
+ getMaintainRecordData()
|
|
|
+ getMaintainTaskData()
|
|
|
+ getSparePartData()
|
|
|
})
|
|
|
-
|
|
|
onUnmounted(() => {
|
|
|
// 关闭水质仪器视角
|
|
|
if (deviceType.value === 'waterQuality') {
|
|
|
View.closeDeviceView(route.params.stcd)
|
|
|
}
|
|
|
// 关闭 adcp 特效与弹窗
|
|
|
- if (device.value.ueDeviceName === "H-ADCP") {
|
|
|
+ if (device.value.ueDeviceName === 'H-ADCP') {
|
|
|
Label.setStationLabel(route.params.stcd, 'ADCP弹框', false)
|
|
|
Label.adcpfx(route.params.stcd, false)
|
|
|
}
|
|
@@ -281,15 +355,13 @@ onUnmounted(() => {
|
|
|
<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"/>
|
|
|
+ <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>维护日期:{{ maintainRecord.handleTime }}</p>
|
|
|
<p>维护内容:</p>
|
|
|
- <p>·清洗采样过滤头及管路,检查位置确保采样顺利。</p>
|
|
|
- <p>·检查电源线路,确保干燥和稳定。</p>
|
|
|
- <p>·校准仪器,确保测量准确性。</p>
|
|
|
+ <p>{{ maintainRecord.warnContent }}</p>
|
|
|
</card01>
|
|
|
<card01 style="height: 40%" title="设备维护情况">
|
|
|
<stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
|
|
@@ -303,15 +375,13 @@ onUnmounted(() => {
|
|
|
<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"/>
|
|
|
+ <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>维护日期:{{ maintainRecord.handleTime }}</p>
|
|
|
<p>维护内容:</p>
|
|
|
- <p>·清洗采样过滤头及管路,检查位置确保采样顺利。</p>
|
|
|
- <p>·检查电源线路,确保干燥和稳定。</p>
|
|
|
- <p>·校准仪器,确保测量准确性。</p>
|
|
|
+ <p>{{ maintainRecord.warnContent }}</p>
|
|
|
</card01>
|
|
|
<card01 style="height: 40%" title="水质监测">
|
|
|
<water-quality-analysis></water-quality-analysis>
|
|
@@ -327,15 +397,13 @@ onUnmounted(() => {
|
|
|
<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"/>
|
|
|
+ <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>维护日期:{{ maintainRecord.handleTime }}</p>
|
|
|
<p>维护内容:</p>
|
|
|
- <p>·清洗采样过滤头及管路,检查位置确保采样顺利。</p>
|
|
|
- <p>·检查电源线路,确保干燥和稳定。</p>
|
|
|
- <p>·校准仪器,确保测量准确性。</p>
|
|
|
+ <p>{{ maintainRecord.warnContent }}</p>
|
|
|
</card01>
|
|
|
<card01 style="height: 40%" title="设备维护情况">
|
|
|
<stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
|
|
@@ -358,8 +426,8 @@ onUnmounted(() => {
|
|
|
</template>
|
|
|
<template v-if="deviceType=== 'flow'">
|
|
|
<card01 style="height: 36%" title="流量监测">
|
|
|
- <adcp-flow v-if="device.ueDeviceName === '无人船'"/>
|
|
|
- <water-flow v-else/>
|
|
|
+ <adcp-flow v-if="device.ueDeviceName === '无人船'" />
|
|
|
+ <water-flow v-else />
|
|
|
</card01>
|
|
|
</template>
|
|
|
<template v-if="deviceType=== 'waterQuality'">
|