|
@@ -2,7 +2,6 @@
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
import RightFrame from '@/components/RightFrame.vue'
|
|
import RightFrame from '@/components/RightFrame.vue'
|
|
import Card01 from '@/components/card/Card01.vue'
|
|
import Card01 from '@/components/card/Card01.vue'
|
|
-import StripeTable from '@/components/StripeTable.vue'
|
|
|
|
import { Operate } from '@/utils/tdInstruction'
|
|
import { Operate } from '@/utils/tdInstruction'
|
|
import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
|
|
import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
|
|
import { getYuyanDataList, getYuyanFanganList } from '@/api/yuyan'
|
|
import { getYuyanDataList, getYuyanFanganList } from '@/api/yuyan'
|
|
@@ -11,32 +10,21 @@ import { useTimeScrollbarStore } from '@/stores/timeScrollbar'
|
|
import { extractList } from '@/utils/list'
|
|
import { extractList } from '@/utils/list'
|
|
import { formatd } from '@/utils/ruoyi'
|
|
import { formatd } from '@/utils/ruoyi'
|
|
import { getStationByName } from '@/assets/js/station'
|
|
import { getStationByName } from '@/assets/js/station'
|
|
-import { useAppStore } from '@/stores/app'
|
|
|
|
import { useStationStore } from '@/stores/station'
|
|
import { useStationStore } from '@/stores/station'
|
|
import bus from '@/utils/bus'
|
|
import bus from '@/utils/bus'
|
|
-import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
|
+import { useRoute } from 'vue-router'
|
|
import { getHydrologicStation } from '@/api/station.js'
|
|
import { getHydrologicStation } from '@/api/station.js'
|
|
|
|
+import { checkValueWithRetry } from '@/utils/index.js'
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
-const router = useRouter()
|
|
|
|
-const appStore = useAppStore()
|
|
|
|
const stationStore = useStationStore()
|
|
const stationStore = useStationStore()
|
|
const station = computed(() => getStationByName(stationStore.stnm))
|
|
const station = computed(() => getStationByName(stationStore.stnm))
|
|
const timeScrollbarStore = useTimeScrollbarStore()
|
|
const timeScrollbarStore = useTimeScrollbarStore()
|
|
-const tableColumns = [
|
|
|
|
- // {
|
|
|
|
- // label: '监测点',
|
|
|
|
- // prop: 'DD_NAME',
|
|
|
|
- // width: '150px',
|
|
|
|
- // showOverflowTooltip: true,
|
|
|
|
- // convertFn: (data) => data ? data.trim() : ''
|
|
|
|
- // },
|
|
|
|
- { label: '方案', prop: 'DD_NAME', showOverflowTooltip: true },
|
|
|
|
-]
|
|
|
|
const tableData = ref([])
|
|
const tableData = ref([])
|
|
const yuyanData = ref([])
|
|
const yuyanData = ref([])
|
|
|
|
+const yuyanId = ref(route.params.yuyanId)
|
|
const startTime = new Date()
|
|
const startTime = new Date()
|
|
-startTime.setDate(startTime.getDate() - 3)
|
|
|
|
|
|
+startTime.setDate(startTime.getDate() - 90)
|
|
const value2 = ref([startTime, new Date()])
|
|
const value2 = ref([startTime, new Date()])
|
|
const shortcuts = [
|
|
const shortcuts = [
|
|
{
|
|
{
|
|
@@ -68,7 +56,7 @@ const shortcuts = [
|
|
},
|
|
},
|
|
]
|
|
]
|
|
const isYuyan = computed(() => {
|
|
const isYuyan = computed(() => {
|
|
- return route.params.yuyanId && route.params.timeIndex
|
|
|
|
|
|
+ return !!yuyanId.value && !!route.params.timeIndex
|
|
})
|
|
})
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -79,10 +67,9 @@ async function getMonitoringPoint() {
|
|
formatd(value2.value[0], 'yyyy-MM-dd hh:mm:ss'),
|
|
formatd(value2.value[0], 'yyyy-MM-dd hh:mm:ss'),
|
|
formatd(value2.value[1], 'yyyy-MM-dd hh:mm:ss'),
|
|
formatd(value2.value[1], 'yyyy-MM-dd hh:mm:ss'),
|
|
).then(res => {
|
|
).then(res => {
|
|
- tableData.value = res.data //.filter(item => item.DD_DISTRIBY === '55')
|
|
|
|
-
|
|
|
|
- if (isYuyan) {
|
|
|
|
- handleCurrentChange({ ID: route.params.yuyanId })
|
|
|
|
|
|
+ tableData.value = res.data.filter(item => item.DD_DISTRIBY === '55')
|
|
|
|
+ if (isYuyan.value) {
|
|
|
|
+ handleCurrentChange(yuyanId.value)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -90,8 +77,8 @@ async function getMonitoringPoint() {
|
|
/**
|
|
/**
|
|
* @param row
|
|
* @param row
|
|
*/
|
|
*/
|
|
-function handleCurrentChange(row) {
|
|
|
|
- getYuyanDataList(row.ID).then(res => {
|
|
|
|
|
|
+function handleCurrentChange(id) {
|
|
|
|
+ getYuyanDataList(id).then(res => {
|
|
yuyanData.value = res.data.map(item => {
|
|
yuyanData.value = res.data.map(item => {
|
|
return {
|
|
return {
|
|
...item,
|
|
...item,
|
|
@@ -149,7 +136,7 @@ function getWavesByWaterLevel(value: number) {
|
|
if (value >= 4) {
|
|
if (value >= 4) {
|
|
waves = 1
|
|
waves = 1
|
|
} else if (value >= 3) {
|
|
} else if (value >= 3) {
|
|
- waves = ((value - 3) / 2).toFixed(1)
|
|
|
|
|
|
+ waves = ((value - 3)).toFixed(1)
|
|
} else if (value >= 1) {
|
|
} else if (value >= 1) {
|
|
waves = 0
|
|
waves = 0
|
|
}
|
|
}
|
|
@@ -157,26 +144,30 @@ function getWavesByWaterLevel(value: number) {
|
|
}
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
- if (!station.value) {
|
|
|
|
- router.push('/')
|
|
|
|
- }
|
|
|
|
- // 监测点列表
|
|
|
|
- getMonitoringPoint()
|
|
|
|
-
|
|
|
|
- if (!isYuyan.value) {
|
|
|
|
- await getHydrologicStation().then(res => {
|
|
|
|
- const data = res.data.filter((d: any) => station.value.stcd === d.stcd)
|
|
|
|
- debugger
|
|
|
|
- if (data[0]) {
|
|
|
|
- Operate.setWaterLevel(
|
|
|
|
- station.value.stcd,
|
|
|
|
- data[0].z,
|
|
|
|
- getWavesByWaterLevel(data[0].z),
|
|
|
|
- )
|
|
|
|
|
|
+ checkValueWithRetry(
|
|
|
|
+ () => station.value,
|
|
|
|
+ () => {
|
|
|
|
+ if (!isYuyan.value) {
|
|
|
|
+ getHydrologicStation().then(res => {
|
|
|
|
+ const data = res.data.filter(
|
|
|
|
+ (d: any) => station.value.stcd === d.stcd,
|
|
|
|
+ )
|
|
|
|
+ if (data[0]) {
|
|
|
|
+ Operate.setWaterLevel(
|
|
|
|
+ station.value.stcd,
|
|
|
|
+ data[0].z,
|
|
|
|
+ getWavesByWaterLevel(data[0].z),
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ // 预案列表
|
|
|
|
+ getMonitoringPoint()
|
|
}
|
|
}
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ 10,
|
|
|
|
+ 2000,
|
|
|
|
+ )
|
|
})
|
|
})
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -206,7 +197,7 @@ onUnmounted(() => {
|
|
<template #leftModule>
|
|
<template #leftModule>
|
|
<card01 v-if="isYuyan" style="height: 40%" title="预报方案">
|
|
<card01 v-if="isYuyan" style="height: 40%" title="预报方案">
|
|
<template #sec_header>
|
|
<template #sec_header>
|
|
- <div style="float: right; margin-right: 60px">
|
|
|
|
|
|
+ <div style="float: right; margin-right: 40px">
|
|
<el-date-picker
|
|
<el-date-picker
|
|
v-model="value2"
|
|
v-model="value2"
|
|
:shortcuts="shortcuts"
|
|
:shortcuts="shortcuts"
|
|
@@ -219,12 +210,17 @@ onUnmounted(() => {
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- <stripe-table
|
|
|
|
- :columns="tableColumns"
|
|
|
|
- :data="tableData"
|
|
|
|
- :show-header="false"
|
|
|
|
- @row-click="handleCurrentChange"
|
|
|
|
- ></stripe-table>
|
|
|
|
|
|
+ <div class="yuan_list">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in tableData"
|
|
|
|
+ :key="index"
|
|
|
|
+ :class="{ active: yuyanId === item.ID }"
|
|
|
|
+ class="yuan_item"
|
|
|
|
+ @click="handleCurrentChange(item.ID)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.DD_NAME }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</card01>
|
|
</card01>
|
|
<card01
|
|
<card01
|
|
v-if="
|
|
v-if="
|
|
@@ -243,3 +239,26 @@ onUnmounted(() => {
|
|
</template>
|
|
</template>
|
|
</right-frame>
|
|
</right-frame>
|
|
</template>
|
|
</template>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.yuan_list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+
|
|
|
|
+ .yuan_item {
|
|
|
|
+ padding: 8px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: #9ee6f8;
|
|
|
|
+
|
|
|
|
+ &:nth-child(even) {
|
|
|
|
+ background-color: rgba(0, 249, 255, 0.3);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:hover,
|
|
|
|
+ &.active {
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|