tba-waves/src/views/Device.vue

<script lang="ts" setup>
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 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";

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
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'}
]
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: '正常'}
]
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'}
]
const reagentColumns = [
  {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'}
]
// function reloadRight3(list) {
//   if (!list || list.length === 0) {
//     return
//   }
//
//   const typeSet = new Set()
//   const times = []
//   list.forEach((item, index) => {
//     Object.keys(item).forEach(key => typeSet.add(key))
//     times.push(item['maintainDate'] || index + 1)
//   })
//   typeSet.delete('maintainDate')
//   const types = Array.from(typeSet)
//   const rawData = []
//   types.forEach(t => {
//     let array = []
//     list.forEach(d => array.push(d[t] || 0))
//     rawData.push(array)
//   })
//   const totalData = []
//   for (let i = 0; i < rawData[0].length; ++i) {
//     let sum = 0
//     for (let j = 0; j < rawData.length; ++j) {
//       sum += Number(rawData[j][i])
//     }
//     totalData.push(sum)
//   }
//   const grid = {
//     left: 10,
//     right: 10,
//     top: 50,
//     bottom: 10,
//     containLabel: true
//   }
//   const series = types.map((name, sid) => {
//     return {
//       name,
//       type: 'bar',
//       stack: 'total',
//       barWidth: '60%',
//       label: { show: false },
//       data: rawData[sid]
//     }
//   })
//   series.push({
//     name: '总计',
//     type: 'bar',
//     stack: 'total',
//     label: {
//       show: true,
//       position: 'top',
//       color: '#fff',
//       formatter: params => totalData[params.dataIndex] + '个'
//     },
//     data: totalData.map(t => 0)
//   })
//   let maxValue = totalData.reduce((a, b) => Math.max(a, b))
//   const option = {
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'shadow'
//       },
//       formatter(params) {
//         let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
//         let info = params[0].axisValueLabel
//         for (let i = 0; i < params.length; i++) {
//           let param = params[i]
//           if (i === params.length - 1) {
//             info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${totalData[param.dataIndex]}个`
//           } else {
//             if (param.value > 0) {
//               info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`
//             }
//           }
//         }
//         return info
//       }
//     },
//     legend: {
//       type: 'scroll',
//       icon: 'circle',
//       data: types,
//       selectedMode: false,
//       textStyle: {
//         color: '#fff'
//       }
//     },
//     grid,
//     yAxis: {
//       type: 'value',
//       name: '个',
//       nameTextStyle: {
//         color: '#fff'
//       },
//       minInterval: 1,
//       interval: Math.ceil(maxValue / 5),
//       axisLabel: {
//         color: '#fff'
//       }
//     },
//     xAxis: {
//       type: 'category',
//       axisLabel: {
//         color: '#fff'
//       },
//       data: times
//     },
//     series
//   }
//   right3Ref.value.loadChart(option)
// }
function reloadRight3() {
  const option = {
    // backgroundColor: "#0B2D55",
    tooltip: {
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      top: '14%',
      left: '2%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#233e64'
        }
      },
      axisLabel: { // 坐标轴刻度标签的相关设置
        color: '#02cacf'
      },
      axisTick: {show: false},
      data: ['1-16氯管', 'p3-16氯管', '3-16氯管']
    }],
    yAxis: [{
      name: '个',
      nameTextStyle: {
        color: '#02cacf'
      },
      min: value => (value.min - 1).toFixed(0),
      max: value => (value.max + 1).toFixed(0),
      axisLabel: {
        margin: 20,
        color: '#02cacf'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#233e64'
        }
      },
      axisLine: {
        show: true
      }
    }],
    series: [{
      name: '数量',
      type: 'bar',
      itemStyle: {
        color: function (params) {
          // 根据params的
          const colorsMap = [
            '#4768ec',
            '#92da76',
            '#dc8a5e'
          ]
          //返回对应的颜色
          return colorsMap[params.dataIndex]
        }
      },
      barWidth: 50,
      label: {
        show: true,
        position: 'top'
      },
      data: [3, 5, 6]
    }
    ]
  }
  right3Ref.value.loadChart(option)
}

onMounted(() => {
  // reloadRight3([])
  // reloadRight3()
})

onUnmounted(() => {
  // 关闭水质仪器视角
  if (deviceType.value === 'waterQuality') {
    View.closeDeviceView(route.params.stcd)
  }
  // 关闭 adcp 特效与弹窗
  if (device.value.ueDeviceName === "H-ADCP") {
    Label.setStationLabel(route.params.stcd, 'ADCP弹框', false)
    Label.adcpfx(route.params.stcd, false)
  }
})
</script>

<template>
  <right-frame>
    <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>
          <h4 style="color: #00ccff">维护记录</h4>
          <p>维护日期‌：2024年11月20日</p>
          <p>维护内容：</p>
          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
          <p>·检查电源线路，确保干燥和稳定。</p>
          <p>·校准仪器，确保测量准确性。</p>
        </card01>
        <card01 style="height: 40%" title="设备维护情况">
          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
        </card01>
      </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>
          <h4 style="color: #00ccff">维护记录</h4>
          <p>维护日期‌：2024年11月20日</p>
          <p>维护内容：</p>
          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
          <p>·检查电源线路，确保干燥和稳定。</p>
          <p>·校准仪器，确保测量准确性。</p>
        </card01>
        <card01 style="height: 40%" title="水质监测">
          <water-quality-analysis></water-quality-analysis>
        </card01>
      </template>
    </template>
    <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>
          <h4 style="color: #00ccff">维护记录</h4>
          <p>维护日期‌：2024年11月20日</p>
          <p>维护内容：</p>
          <p>·清洗采样过滤头及管路，检查位置确保采样顺利。</p>
          <p>·检查电源线路，确保干燥和稳定。</p>
          <p>·校准仪器，确保测量准确性。</p>
        </card01>
        <card01 style="height: 40%" title="设备维护情况">
          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
        </card01>
      </template>
      <template v-if="deviceType=== 'video'">
        <card01 style="height: 40%" title="视频监控">
          <gw-video :code="videoCode" :imageSrc="videoImageSrc"></gw-video>
        </card01>
      </template>
      <template v-if="deviceType=== 'waterLevel'">
        <card01 style="height: 36%" title="水位监测">
          <water-level></water-level>
        </card01>
      </template>
      <template v-if="deviceType=== 'rainfall'">
        <card01 style="height: 36%" title="雨量监测">
          <rainfall></rainfall>
        </card01>
      </template>
      <template v-if="deviceType=== 'flow'">
        <card01 style="height: 36%" title="流量监测">
          <adcp-flow></adcp-flow>
          <!--          <adcp-flow v-if="device.ueDeviceName === '无人船'"></adcp-flow>-->
          <!--          <flow v-else></flow>-->
        </card01>
      </template>
      <template v-if="deviceType=== 'waterQuality'">
        <card01 style="height: 33%" title="设备维护情况">
          <stripe-table :columns="deviceStatusColumns" :data="deviceStatusData"></stripe-table>
        </card01>
        <card01 style="height: 33%" title="配件运维信息">
          <stripe-table :columns="accessoriesColumns" :data="accessoriesData"></stripe-table>
        </card01>
        <card01 style="height: 33%" title="耗材余量监控">
          <chart ref="right3Ref"></chart>
        </card01>
      </template>
    </template>
    <template #btnGroup>
      <station-right-button-group></station-right-button-group>
    </template>
  </right-frame>
</template>
<style lang="scss" scoped>
@use "@/assets/styles/introduce.scss";
</style>