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 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 = {
    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]
      }
    ]
  }
  left2Ref.value.loadChart(option)
}

function getStationList() {
  getRStLLMaxDate().then(res => {
    res.forEach(s => {
      if (s.stcd === '701T0001') {
        s.lgtd = '117.99223749'
        s.lttd = '29.66659453'
      }
    })
    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()
  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: 61%" 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>
            <img :src="zmwjianjie" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
          </el-carousel-item>
          <el-carousel-item>
            <h2 class="introduce-title">浙闽皖水文水资源监测中心宁德分中心</h2>
            <p class="introduce-text">
              位于福建省宁德市蕉城区金涵畲族乡金漳路10号，征地3亩，建筑面积1800平方米。紧邻福建省福建省宁德水文水资源勘测分中心管理的蕉城水文站。
            </p>
            <img :src="zmwnd" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
          </el-carousel-item>
          <el-carousel-item>
            <h2 class="introduce-title">黄山水文水资源监测分中心</h2>
            <p class="introduce-text">
              位于安徽省黄山市高新区蓬莱路3号，占地4亩，基地建成684平方米实验室及附属办公设施。
            </p>
            <img :src="zmwhs" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
          </el-carousel-item>
        </el-carousel>
      </card01>
      <card01 style="height: 36%" title="超警超保统计">
        <chart ref="left2Ref"></chart>
      </card01>
    </template>
    <template #rightModule>
      <card01 style="height: 97%" title="实时数据">
        <stripe-table :columns="tableColumns" :data="tableData"></stripe-table>
      </card01>
    </template>
  </right-frame>
</template>
<style lang="scss" scoped>
@use "@/assets/styles/introduce.scss";

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