|
@@ -1,22 +1,22 @@
|
|
<script lang="ts" setup>
|
|
<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 RightFrame from '@/components/RightFrame.vue'
|
|
import Card01 from '@/components/card/Card01.vue'
|
|
import Card01 from '@/components/card/Card01.vue'
|
|
import StripeTable from '@/components/StripeTable.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 Chart from '@/components/Chart.vue'
|
|
import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
|
|
import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
|
|
|
|
|
|
-import { Label, View } from '@/utils/tdInstruction'
|
|
|
|
|
|
+import {Label, View} from '@/utils/tdInstruction'
|
|
import GwVideo from '@/components/Video/index.vue'
|
|
import GwVideo from '@/components/Video/index.vue'
|
|
-import { getVideoCodeByMark } from '@/components/Video/video'
|
|
|
|
|
|
+import {getVideoCodeByMark} from '@/components/Video/video'
|
|
import WaterQualityAnalysis from '@/components/DeviceComponent/WaterQualityAnalysis.vue'
|
|
import WaterQualityAnalysis from '@/components/DeviceComponent/WaterQualityAnalysis.vue'
|
|
import WaterLevel from '@/components/DeviceComponent/WaterLevel.vue'
|
|
import WaterLevel from '@/components/DeviceComponent/WaterLevel.vue'
|
|
import Rainfall from '@/components/DeviceComponent/Rainfall.vue'
|
|
import Rainfall from '@/components/DeviceComponent/Rainfall.vue'
|
|
import AdcpFlow from '@/components/DeviceComponent/AdcpFlow.vue'
|
|
import AdcpFlow from '@/components/DeviceComponent/AdcpFlow.vue'
|
|
import WaterFlow from '@/components/DeviceComponent/WaterFlow.vue'
|
|
import WaterFlow from '@/components/DeviceComponent/WaterFlow.vue'
|
|
-import { getMaintenanceScheduleTask, getMaintenanceTaskLog, getSparePart } from '@/api/device'
|
|
|
|
|
|
+import {getMaintenanceScheduleTask, getMaintenanceTaskLog, getSparePart} from '@/api/device'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import DeviceIntroduce from '@/components/DeviceIntroduce.vue'
|
|
import DeviceIntroduce from '@/components/DeviceIntroduce.vue'
|
|
|
|
|
|
@@ -32,20 +32,20 @@ const videoCode = ref(getVideoCodeByMark(route.params.stcd + '', '室外'))
|
|
|
|
|
|
|
|
|
|
const deviceStatusColumns = [
|
|
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 = ref([])
|
|
const deviceStatusData = [
|
|
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 = [
|
|
const accessoriesColumns = [
|
|
- { label: '耗材名称', prop: 'partName', width: '110' },
|
|
|
|
|
|
+ {label: '耗材名称', prop: 'partName', width: '110'},
|
|
{
|
|
{
|
|
label: '剩余有效期', prop: 'warranty', width: '110', convertFn: (data) => {
|
|
label: '剩余有效期', prop: 'warranty', width: '110', convertFn: (data) => {
|
|
var formatDate = 'yyyy-MM-DD'
|
|
var formatDate = 'yyyy-MM-DD'
|
|
@@ -67,15 +67,15 @@ const accessoriesData = ref([])
|
|
// // { name: '瓶子', days: 102, warranty: '11-20 15:00:00' }
|
|
// // { name: '瓶子', days: 102, warranty: '11-20 15:00:00' }
|
|
// ]
|
|
// ]
|
|
const reagentColumns = [
|
|
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 = [
|
|
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) {
|
|
// function reloadRight3(list) {
|
|
// if (!list || list.length === 0) {
|
|
// if (!list || list.length === 0) {
|
|
@@ -215,7 +215,7 @@ async function reloadRight3() {
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
color: '#02cacf'
|
|
color: '#02cacf'
|
|
},
|
|
},
|
|
- axisTick: { show: false },
|
|
|
|
|
|
+ axisTick: {show: false},
|
|
data: sparePart.value['xdata']
|
|
data: sparePart.value['xdata']
|
|
}],
|
|
}],
|
|
yAxis: [{
|
|
yAxis: [{
|
|
@@ -243,7 +243,7 @@ async function reloadRight3() {
|
|
name: '数量',
|
|
name: '数量',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
itemStyle: {
|
|
- color: function(params) {
|
|
|
|
|
|
+ color: function (params) {
|
|
// 根据params的
|
|
// 根据params的
|
|
const colorsMap = [
|
|
const colorsMap = [
|
|
'#4768ec',
|
|
'#4768ec',
|
|
@@ -279,7 +279,7 @@ function getMaintainRecordData() {
|
|
getMaintenanceTaskLog(data).then(res => {
|
|
getMaintenanceTaskLog(data).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
if (res.data.length != 0) {
|
|
if (res.data.length != 0) {
|
|
- maintainRecord.value = res.data.records[0]
|
|
|
|
|
|
+ maintainRecord.value = res.data.records[0] || {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -350,7 +350,7 @@ onUnmounted(() => {
|
|
<template>
|
|
<template>
|
|
<right-frame>
|
|
<right-frame>
|
|
<template #leftModule>
|
|
<template #leftModule>
|
|
- <template v-if="['rainfall', 'flow','waterLevel'].includes(deviceType)">
|
|
|
|
|
|
+ <template v-if="['rainfall','waterLevel'].includes(deviceType)">
|
|
<card01 :title="device.deviceName" style="height: 65%">
|
|
<card01 :title="device.deviceName" style="height: 65%">
|
|
<device-introduce></device-introduce>
|
|
<device-introduce></device-introduce>
|
|
<h4 style="color: #00ccff">维护记录</h4>
|
|
<h4 style="color: #00ccff">维护记录</h4>
|
|
@@ -405,8 +405,11 @@ onUnmounted(() => {
|
|
</template>
|
|
</template>
|
|
<template v-if="deviceType=== 'flow'">
|
|
<template v-if="deviceType=== 'flow'">
|
|
<card01 style="height: 36%" title="流量监测">
|
|
<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>
|
|
|
|
+ <card01 style="height: 40%" title="设备维护情况">
|
|
|
|
+ <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
|
|
</card01>
|
|
</card01>
|
|
</template>
|
|
</template>
|
|
<template v-if="deviceType=== 'waterQuality'">
|
|
<template v-if="deviceType=== 'waterQuality'">
|
|
@@ -416,10 +419,10 @@ onUnmounted(() => {
|
|
<card01 style="height: 33%" title="配件运维信息">
|
|
<card01 style="height: 33%" title="配件运维信息">
|
|
<stripe-table :columns="accessoriesColumns" :data="accessoriesData"></stripe-table>
|
|
<stripe-table :columns="accessoriesColumns" :data="accessoriesData"></stripe-table>
|
|
</card01>
|
|
</card01>
|
|
- <card01 style="height: 33%" title="耗材余量监控">
|
|
|
|
- <chart ref="right3Ref"></chart>
|
|
|
|
- </card01>
|
|
|
|
</template>
|
|
</template>
|
|
|
|
+ <card01 v-show="deviceType=== 'waterQuality'" style="height: 33%" title="耗材余量监控">
|
|
|
|
+ <chart ref="right3Ref"></chart>
|
|
|
|
+ </card01>
|
|
</template>
|
|
</template>
|
|
<template #btnGroup>
|
|
<template #btnGroup>
|
|
<station-right-button-group></station-right-button-group>
|
|
<station-right-button-group></station-right-button-group>
|