tba-waves/src/views/Yuyan.vue

<script lang="ts" setup>
import {onMounted, onUnmounted, reactive, ref} from 'vue'
import RightFrame from '@/components/RightFrame.vue'
import Card01 from '@/components/card/Card01.vue'
import StripeTable from '@/components/StripeTable.vue'
import {Operate, Point, View} from "@/utils/tdInstruction";
import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
import {useBasinStore} from "@/stores/basin";
import {getYuyanDataList, getYuyanFanganList} from "@/api/yuyan";
import {convertDate, removeDuplicates} from "@/utils/date";
import {useTimeScrollbarStore} from "@/stores/timeScrollbar";
import {extractList} from "@/utils/list";
import {formatd} from "@/utils/ruoyi";
import {stationList} from "@/assets/js/station"
import {slopeCalculation} from "@/utils/slopeCalculation";

const timeScrollbarStore = useTimeScrollbarStore()
const basinStore = useBasinStore()
const tableColumns = [
  // {
  //   label: '监测点',
  //   prop: 'DD_NAME',
  //   width: '150px',
  //   showOverflowTooltip: true,
  //   convertFn: (data) => data ? data.trim() : ''
  // },
  {label: '方案', prop: 'DD_NAME', showOverflowTooltip: true}
]
const tableData = reactive([])
const yuyanData = ref([])

/**
 * 监测点列表
 */
async function getMonitoringPoint() {
  getYuyanFanganList().then(res => {
    tableData.push(...res.data)
  })
}

/**
 * @param row
 */
function handleCurrentChange(row) {
  getYuyanDataList(row.ID).then(res => {
    yuyanData.value = res.data.map(item => {
      return {
        ...item,
        YMDHM: convertDate(item.YMDHM)
      }
    })

    let timeList = removeDuplicates(yuyanData.value.map(y => y.YMDHM))
    timeScrollbarStore.setTimeScrollbarShow(true)
    timeScrollbarStore.setMax(timeList.length)
    const timeObj = extractList(timeList, 4)

    for (let key in timeObj) {
      timeObj[key] = {
        style: {
          color: '#00c7e3',
          'text-shadow': '0 0 4px #32003C'
        },
        label: formatd(timeObj[key], 'yyyy年MM月dd日hh时')
      }
    }
    timeScrollbarStore.setMarks(timeObj)
    timeScrollbarStore.sliderlTooltip = (value: number) => {
      const date = timeList[value]
      const list = yuyanData.value.filter(y => y.YMDHM.getTime() === date.getTime())
      const data = list.map(d => {
        let station = stationList.find(s => s.id === d.STCD)

        if (!station) {
          console.log(`未找到${d.STCD}`)
        }

        return {
          id: d.STCD,
          name: `${station.name}`,
          value: `${(d.DATA).toFixed(2)}`,
          type: "水文站",
          x: station.lgtd,
          y: station.lttd
        }
      })

      const res = slopeCalculation(data);
      Operate.strategyMap(res.direction, res.slope);

      Point.addPoint(data.map(a => {
        return {'id': a.id, 'name': `${a.value}\n${a.name}`, 'type': a.type, 'x': a.x, 'y': a.y}
      }), '水文站')
      return formatd(date, 'yyyy年MM月dd日hh时')
    }

  })
}

onMounted(() => {
  // 监测点列表
  getMonitoringPoint()
  // 太湖视角
  View.changeView()
})

onUnmounted(() => {
  Operate.strategyMap("", "", false)
  timeScrollbarStore.close()
  basinStore.setLabelState2('水文站', false)
})
</script>
<template>
  <right-frame>
    <template #leftModule>
      <card01 title="预报方案">
        <stripe-table :columns="tableColumns" :data="tableData" :show-header="false"
                      @row-click="handleCurrentChange"></stripe-table>
      </card01>
    </template>
    <template #btnGroup>
      <station-right-button-group></station-right-button-group>
    </template>
  </right-frame>
</template>