tba-waves/src/views/Home.vue

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {useMapStore} from '@/stores/map'
import RightFrame from '@/components/RightFrame.vue'
import Card01 from '@/components/card/Card01.vue'
import Chart from '@/components/chart.vue'
import StripeTable from '@/components/StripeTable.vue'
import {getRStLLMaxDate} from '@/api/home'
import bus from '@/utils/bus'
import {stations} from '@/utils/station'
import {jumpPage} from '@/utils'
import {copyObj} from '@/utils/ruoyi'
import {View} from "@/utils/tdInstruction";

const zmwjianjie = new URL('@/assets/images/zmw_jieshao.jpg', import.meta.url).href
const zmwnd = new URL('@/assets/images/zmw_nd.jpg', import.meta.url).href
const zmwhs = new URL('@/assets/images/zmw_hs.jpg', import.meta.url).href

const mapStore = useMapStore()
const left2Ref = ref(null)
const right1Ref = ref(null)
const tableColumns = [
  {
    label: '站名', prop: 'stnm', convertFn: (data) => {
      return data ? data.trim() : ''
    }
  },
  {
    label: '时间', prop: 'tm', width: '90', convertFn: (data) => {
      return data ? data.substring(5, 16) : ''
    }
  },
  {
    label: '水位(m)', prop: 'z', width: '80', convertFn: (data) => {
      return Number(data).toFixed(2)
    }
  },
  {
    label: '流量', prop: 'q', width: '70', convertFn: (data) => {
      return Number(data).toFixed(2)
    }
  },
  {
    label: '雨量', prop: 'drp', width: '65', convertFn: (data) => {
      return data | 0
    }
  }
]
const tableData = reactive([])

function reloadLeft2() {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        label: {
          show: true,
          color: '#fff'
        },
        data: [
          {value: 6, name: '水文站'},
          {value: 5, name: '河道水文站'},
          {value: 1, name: '实验站'}
        ]
      }
    ]
  }
  left2Ref.value.loadChart(option)
}

function reloadRight1() {
  const option = {
    color: ['#fac858', '#ee6666'],
    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 (param.value > 0) {
          info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`
          // break
          // }
        }
        return info
      }
    },
    legend: {
      type: 'scroll',
      icon: 'circle',
      selectedMode: false,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: '14%',
      left: '2%',
      right: '2%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: '个',
      max: value => value.max + 1,
      nameTextStyle: {
        color: '#02cacf'
      },
      axisLabel: {
        color: '#02cacf'
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        // interval: 0,
        // rotate: -45, //旋转的角度从 -90 度到 90 度。
        color: '#02cacf'
      },
      data: ['河道水文', '水文', '实验']
    },
    series: [
      {
        name: '超警戒（汛限）',
        type: 'bar',
        // stack: 'total',
        // barWidth: '20%',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: params => params.value > 0 ? params.value + '个' : ''
        },
        data: [0, 0, 0]
      },
      {
        name: '超保证（设计）',
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: params => params.value > 0 ? params.value + '个' : ''
        },
        data: [0, 0, 0]
      }
    ]
  }
  right1Ref.value.loadChart(option)
}

function getStationList() {
  getRStLLMaxDate().then(res => {
    tableData.push(...res)
    initPoints()
  }).catch(() => {
  })
}

/**
 * 初始化测站点位
 */
function initPoints() {
  const data = copyObj(tableData)
  data.forEach(s => {
    const station = stations.find(item => item.stcd === s.stcd)
    s.jump = !!station
  })

  const option = {
    view: {
      center: [104.114129, 37.550339],
      zoom: 5
    },
    layers: [
      {
        type: 'point',
        data: data,
        dataOptions: {
          parser: {
            type: 'json',
            x: 'lgtd',
            y: 'lttd'
          }
        },
        label: {
          show: true,
          field: 'stnm'
        },
        emphasis: {
          show: true,
          label: {
            show: true
          }
        },
        size: [20, 20],
        shape: {
          isConstant: false,
          field: 'jump',
          value: value => {
            return value ? 'stationPointBlue' : 'stationPointGray'
          }
        },
        popup: {
          enabled: true,
          trigger: 'click',
          content: ''
        }
      }
    ]
  }
  mapStore.setOption(option)
}

onMounted(() => {
  reloadLeft2()
  reloadRight1()
  getStationList()
})

// 订阅一个具体的事件
bus.on('point_click', (data: any) => {
  console.log('data', data.data, data.e)
  const station = stations.find(item => item.stcd === data.data.stcd)
  if (station) {
    if (station.isExternalAddress) {
      jumpPage(station.path, null, true)
    } else {
      jumpPage(`/station/${station.stcd}`)
      View.changeView(station.stnm)
    }
  }
})
</script>

<template>
  <right-frame>
    <template #leftModule>
      <card01 style="height: 69%" title="简介">
        <el-carousel :autoplay="true" :interval="5000" arrow="never" style="width: 100%;height: 100%;" trigger="click">
          <el-carousel-item>
            <h2 class="introduce-title">嘉兴监测中心</h2>
            <p class="introduce-text">
              位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
            </p>
            <p class="introduce-text">
              浙闽皖水文水资源监测中心主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
              浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心、宁德水文水资源监测分中心。
            </p>
            <img :src="zmwjianjie" alt="" class="introduce-img"/>
          </el-carousel-item>
          <el-carousel-item>
            <h2 class="introduce-title">宁德水文水资源监测分中心</h2>
            <p class="introduce-text">
              位于福建省宁德市蕉城区金涵畲族乡金漳路10号，征地3亩，建筑面积1800平方米。紧邻福建省福建省宁德水文水资源勘测分中心管理的蕉城水文站。
            </p>
            <p class="introduce-text">
              宁德水文水资源监测分中心拥有甲类实验室1个，配备气相色谱仪1台、多功能自动进样系统1套、原子吸收分光光度计1台、电感耦合等离子体发射光谱仪1台、原子荧光光度计1台、离子色谱仪1台、紫外可见分光光度仪（带自动进样器）2台、连续流动分析仪（氰化物、挥发酚、阴离子表面活性剂）1台、连续流动分析仪（硫化物、氨氮、总氮）1台、微波消解仪1台、便携式多参数监测仪1台等各类监测仪器设备40台。
            </p>
            <img :src="zmwnd" alt="" class="introduce-img"/>
          </el-carousel-item>
          <el-carousel-item>
            <h2 class="introduce-title">黄山水文水资源监测分中心</h2>
            <p class="introduce-text">
              位于安徽省黄山市高新区蓬莱路3号，占地4亩，基地建成684平方米实验室及附属办公设施。
            </p>
            <p class="introduce-text">
              黄山分中心业务工作主要为水文水资源和生态监测，配有雨量计、激光水位计、浮子水位计、雷达水位计、走航ADCP、固定ADCP、流速仪、侧扫雷达、OBS浊度仪等各类水文监测仪器设备70余套；配有气相色谱仪、液相色谱仪、原子吸收分光光度计、原子荧光光度计、紫外可见分光光度仪、连续流动分析仪、核酸蛋白分析仪、通用突变检测系统等各类监测仪器设备60台套。
            </p>
            <img :src="zmwhs" alt="" class="introduce-img"/>
          </el-carousel-item>
        </el-carousel>
      </card01>
      <card01 style="height: 30%" title="站点统计">
        <chart ref="left2Ref"></chart>
      </card01>
    </template>
    <template #rightModule>
      <card01 style="height: 66%" title="站点清单">
        <stripe-table :columns="tableColumns" :data="tableData"></stripe-table>
      </card01>
      <card01 style="height: 33%" title="超警超保统计">
        <chart ref="right1Ref"></chart>
      </card01>
    </template>
  </right-frame>
</template>
<style lang="scss" scoped>
@use "@/assets/styles/introduce.scss";

.el-carousel :deep(.el-carousel__container) {
  height: 500px;
}
</style>