|
@@ -28,6 +28,8 @@ const tableColumns = [
|
|
|
]
|
|
|
const tableData = ref([])
|
|
|
|
|
|
+const yuyanId = ref(null)
|
|
|
+
|
|
|
const dataTableColumns = [
|
|
|
{label: '测站', prop: 'label'},
|
|
|
{
|
|
@@ -83,6 +85,96 @@ const shortcuts = [
|
|
|
},
|
|
|
]
|
|
|
|
|
|
+function reorderList(items) {
|
|
|
+ if (items.length === 0) return items;
|
|
|
+
|
|
|
+ // 获取最大值和最小值
|
|
|
+ const maxVal = items[0].value;
|
|
|
+ const minVal = items[items.length - 1].value;
|
|
|
+
|
|
|
+ // 如果所有值相等则直接返回
|
|
|
+ if (maxVal === minVal) return items;
|
|
|
+
|
|
|
+ // 计算最大值段结束位置(最后一位最大值的索引)
|
|
|
+ let maxEnd = 0;
|
|
|
+ while (maxEnd + 1 < items.length && items[maxEnd + 1].value === maxVal) {
|
|
|
+ maxEnd++;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算最小值段起始位置(第一位最小值的索引)
|
|
|
+ let minStart = items.length - 1;
|
|
|
+ while (minStart - 1 >= 0 && items[minStart - 1].value === minVal) {
|
|
|
+ minStart--;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提取最小值段
|
|
|
+ const minSection = items.splice(minStart, items.length - minStart);
|
|
|
+
|
|
|
+ // 将最小值段插入到最大值段之后
|
|
|
+ items.splice(maxEnd + 1, 0, ...minSection);
|
|
|
+
|
|
|
+ return items;
|
|
|
+}
|
|
|
+
|
|
|
+function findDayWithMaxDifference(data) {
|
|
|
+ // 创建按天分组的Map
|
|
|
+ const dailyData = new Map();
|
|
|
+
|
|
|
+ // 遍历所有数据点
|
|
|
+ for (const item of data) {
|
|
|
+ // 提取日期部分(格式:YYYY-MM-DD)
|
|
|
+ const date = item.YMDHM;
|
|
|
+
|
|
|
+ if (!dailyData.has(date)) {
|
|
|
+ // 初始化存储:{ min: Infinity, max: -Infinity, count: 0 }
|
|
|
+ dailyData.set(date, {
|
|
|
+ min: Infinity,
|
|
|
+ max: -Infinity,
|
|
|
+ count: 0
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取当天数据
|
|
|
+ const dayData = dailyData.get(date);
|
|
|
+
|
|
|
+ // 更新最小值
|
|
|
+ if (item.DATA < dayData.min) {
|
|
|
+ dayData.min = item.DATA;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新最大值
|
|
|
+ if (item.DATA > dayData.max) {
|
|
|
+ dayData.max = item.DATA;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 增加数据点计数
|
|
|
+ dayData.count++;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算每天差值并找出最大差值日
|
|
|
+ let maxDifference = -Infinity;
|
|
|
+ let maxDifferenceDate = null;
|
|
|
+
|
|
|
+ for (const [date, dayData] of dailyData) {
|
|
|
+ // 忽略数据量不足的日期
|
|
|
+ if (dayData.count < 2) continue;
|
|
|
+
|
|
|
+ // 计算当天差值
|
|
|
+ const difference = dayData.max - dayData.min;
|
|
|
+
|
|
|
+ // 更新最大差值日
|
|
|
+ if (difference > maxDifference) {
|
|
|
+ maxDifference = difference;
|
|
|
+ maxDifferenceDate = date;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ date: maxDifferenceDate,
|
|
|
+ difference: maxDifference
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 监测点列表
|
|
|
*/
|
|
@@ -99,6 +191,7 @@ async function getMonitoringPoint() {
|
|
|
* @param row
|
|
|
*/
|
|
|
function handleCurrentChange(row) {
|
|
|
+ yuyanId.value = row.ID
|
|
|
getYuyanDataList(row.ID).then(res => {
|
|
|
yuyanData.value = res.data.map(item => {
|
|
|
return {
|
|
@@ -107,6 +200,8 @@ function handleCurrentChange(row) {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+ const result = findDayWithMaxDifference(yuyanData.value);
|
|
|
+ debugger
|
|
|
let timeList = removeDuplicates(yuyanData.value.map(y => y.YMDHM))
|
|
|
timeScrollbarStore.setTimeScrollbarShow(true)
|
|
|
timeScrollbarStore.setMax(timeList.length)
|
|
@@ -142,11 +237,13 @@ function handleCurrentChange(row) {
|
|
|
}
|
|
|
})
|
|
|
.sort((a, b) => b.value - a.value)
|
|
|
- debugger
|
|
|
+
|
|
|
dataTableMaxData.value = dataTableData.value[0].value
|
|
|
dataTableMinData.value =
|
|
|
dataTableData.value[dataTableData.value.length - 1].value
|
|
|
- debugger
|
|
|
+
|
|
|
+ dataTableData.value = reorderList(dataTableData.value)
|
|
|
+
|
|
|
const data = list.map(d => {
|
|
|
let station = stationList.find(s => s.id === d.STCD)
|
|
|
|
|
@@ -248,14 +345,14 @@ onUnmounted(() => {
|
|
|
/>
|
|
|
</div>
|
|
|
</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)">
|
|
|
+ {{ item.DD_NAME }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</card01>
|
|
|
- <card01 style="height: 65%" title="预报数据">
|
|
|
+ <card01 style="height: 65%;" title="预报数据">
|
|
|
<stripe-table :columns="dataTableColumns" :data="dataTableData"></stripe-table>
|
|
|
</card01>
|
|
|
</template>
|
|
@@ -264,3 +361,29 @@ onUnmounted(() => {
|
|
|
</template>
|
|
|
</right-frame>
|
|
|
</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>
|