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";

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

const left2Ref = ref(null)

function reloadLeft2() {
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        label: {
          show: true,
          color: '#fff'
        },
        data: [
          {value: 7, name: '水位站'},
          {value: 6, name: '雨量站'},
          {value: 8, name: '水质站'},
          {value: 14, name: '风情站'},
        ],
      }
    ]
  };
  left2Ref.value.loadChart(option)
}

const right1Ref = ref(null)

function reloadRight1() {
  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 (param.value > 0) {
            info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`;
            break
          }
        }
        return info;
      }
    },
    legend: {
      type: 'scroll',
      icon: 'circle',
      data: ['1', '2', '3', '4', '5'],
      selectedMode: false,
      textStyle: {
        color: '#fff'
      },
    },
    grid: {
      top: '14%',
      left: '2%',
      right: '2%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: '个',
      nameTextStyle: {
        color: '#fff',
      },
      axisLabel: {
        color: '#fff',
      },
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        // interval: 0,
        rotate: -45, //旋转的角度从 -90 度到 90 度。
        color: '#fff',
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    },
    series: [
      {
        name: 'aaa',
        type: 'bar',
        // stack: 'total',
        // barWidth: '20%',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: params => params.value > 0 ? params.value + '个' : ''
        },
        data: [1, 2, 4, 1, 2, 5, 2, 4]
      },
      {
        name: 'bbb',
        type: 'bar',
        // stack: 'total',
        // barWidth: '20%',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: params => params.value > 0 ? params.value + '个' : ''
        },
        data: [2, 1, 5, 2, 3, 4, 2, 4]
      }
    ]
  };
  right1Ref.value.loadChart(option)
}

const tableColumns = [
  {
    label: '站名', prop: 'stnm', width: '110', 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 getStationList() {
  getRStLLMaxDate().then(res => {
    tableData.push(...res)
    initPoints()
  })
}

const right3Ref = ref(null)

function reloadRight3() {
  const option = {
    backgroundColor: "#0B2D55",
    tooltip: {
      axisPointer: {
        type: "cross"
      }
    },
    grid: {
      top: '14%',
      left: '2%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#233e64'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#fff',
        },
      },
      axisTick: {show: false,},
      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
    }],
    yAxis: [{
      name: 'm',
      nameTextStyle: {
        color: '#fff',
      },
      min: value => value.min.toFixed(2),
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#233e64'
        }
      },
    }],
    series: [{
      name: '太湖水位',
      type: 'line',
      smooth: true, //是否平滑曲线显示
      lineStyle: {
        normal: {
          color: "#3deaff"   // 线条颜色
        }
      },
      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
    },
    ]
  };
  right3Ref.value.loadChart(option)
}

const mapStore = useMapStore()

/**
 * 初始化测站点位
 */
function initPoints() {
  const option = {
    view: {
      center: [104.114129, 37.550339],
      zoom: 5,
    },
    layers: [
      {
        type: 'point',
        data: tableData,
        dataOptions: {
          parser: {
            type: 'json',
            x: 'lgtd',
            y: 'lttd',
          },
        },
        label: {
          show: true,
          field: 'stnm',
        },
        emphasis: {
          show: true,
          label: {
            show: true
          }
        },
        size: 16,
        color: {
          isConstant: true,
          value: '#004ef8',
          field: null,
          conditions: []
        },
        shape: {
          isConstant: true,
          value: 'circle',
          imageSrc: null,
          field: null,
          conditions: []
        },
        popup: {
          enabled: true,
          trigger: 'click',
          content: '',
        },
      },
    ]
  }
  mapStore.setOption(option)
}

onMounted(() => {
  reloadLeft2()

  reloadRight1()
  getStationList()
  reloadRight3()
})

// 订阅一个具体的事件
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}`)
    }
  }
})
</script>

<template>
  <right-frame>
    <template #leftModule>
      <card01 title="简介">
        <h3 class="introduce-title">浙闽皖水文水资源监测中心</h3>
        <p class="introduce-text">
          位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
        </p>
        <p class="introduce-text">
          浙闽皖水文水资源监测中心主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
          浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心、宁德水文水资源监测分中心。
        </p>
        <img :src="zmwjianjie" alt="" class="introduce-img"/>
      </card01>
      <card01 style="height: 30%" title="站点统计">
        <chart ref="left2Ref"></chart>
      </card01>
    </template>
    <template #rightModule>
      <card01 style="height: 33%" title="超警超保统计">
        <chart ref="right1Ref"></chart>
      </card01>
      <card01 style="height: 33%" title="站点清单">
        <stripe-table :columns="tableColumns" :data="tableData"></stripe-table>
      </card01>
      <card01 style="height: 33%" title="水质分析">
        <chart ref="right3Ref"></chart>
      </card01>
    </template>
  </right-frame>
</template>
<style lang="scss" scoped>
@use "@/assets/styles/introduce.scss";
</style>