panbaolin/SourceTermAnalysisSystem_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据分析，时间最后一刻的数据

Browse Source
This commit is contained in:
冯少康 2026-08-04 09:28:33 +08:00
parent 3e32e1a383
commit aaab4fc984
1 changed files with 220 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

372
src/pages/sjfx/one/index.vue
View File

@ -1,27 +1,34 @@
<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import JulianDate from '@/gis/common/clock/JulianData/JulianDate';
import { initMap2D } from '@/gis/ol/map';
import { removeClockOnTickEvent, setAnimationTime, setClockOnTickEvent, setcurrentTime, setMultiplier, setShouldAnimate } from '@/gis/ol/olClock';
import { SjfxPointHandle } from '@/gis/ol/olSJFX';
import MapRightMenuEvent from '@/layout/Container/mapRightMenu.vue';
import { getSampleMonitor } from '@/utils/axios/sjfx';
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import JulianDate from "@/gis/common/clock/JulianData/JulianDate";
import { initMap2D } from "@/gis/ol/map";
import {
removeClockOnTickEvent,
setAnimationTime,
setClockOnTickEvent,
setcurrentTime,
setMultiplier,
setShouldAnimate,
} from "@/gis/ol/olClock";
import { SjfxPointHandle } from "@/gis/ol/olSJFX";
import MapRightMenuEvent from "@/layout/Container/mapRightMenu.vue";
import { getSampleMonitor } from "@/utils/axios/sjfx";
const { t } = useI18n();
// gis地图功能实例存储
const sjfxPointHandle = ref<SjfxPointHandle | null>(null);
const sampleTypeList = ref<any>([
{ label: '颗粒物', value: 'P' },
{ label: '惰性气体', value: 'B' },
{ label: "颗粒物", value: "P" },
{ label: "惰性气体", value: "B" },
]);
const dataSourceList = ref<any>([
{ label: '自动处理', value: '1' },
{ label: '交互分析', value: '2' },
{ label: "自动处理", value: "1" },
{ label: "交互分析", value: "2" },
]);
const form = ref<any>({
// sampleType: 'P',
@ -32,16 +39,26 @@ const form = ref<any>({
});
const formRef = ref<FormInstance>();
const rules = reactive<FormRules<any>>({
sampleType: [{ required: true, message: '请选择样品类型', trigger: 'change' }],
dataSource: [{ required: true, message: '请选择数据来源', trigger: 'change' }],
createTime: [{ required: true, message: '请选择创建时间范围', trigger: 'change', validator: (rule, value, callback) => {
if (!value || value.length === 0) {
callback(new Error('请选择创建时间范围'));
}
else {
callback();
}
} }],
sampleType: [
{ required: true, message: "请选择样品类型", trigger: "change" },
],
dataSource: [
{ required: true, message: "请选择数据来源", trigger: "change" },
],
createTime: [
{
required: true,
message: "请选择创建时间范围",
trigger: "change",
validator: (rule, value, callback) => {
if (!value || value.length === 0) {
callback(new Error("请选择创建时间范围"));
} else {
callback();
}
},
},
],
});
interface TimeListData {
@ -55,7 +72,7 @@ interface StationBaseData {
lon: string;
lat: string;
}
const searchResultBaseData = ref<StationBaseData[]>([]);
const searchResultBaseData = ref<StationBaseData[]>([]);
// 滑块数据
const sliderValue = ref(0);
@ -63,39 +80,35 @@ const sliderStart = ref<dayjs.Dayjs | null>(null);
const sliderEnd = ref<dayjs.Dayjs | null>(null);
const sliderMarks = computed(() => {
const obj: Record<number, string> = {};
if (!sliderStart.value || !sliderEnd.value)
return obj;
if (!sliderStart.value || !sliderEnd.value) return obj;
const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0);
const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
// 计算刻度间隔：总天数越多，间隔越大（确保最多显示10个刻度，避免重叠）
const interval = Math.max(Math.ceil(totalDays / 10), 1); // 最小间隔为1
for (let i = 0; i <= totalDays; i++) {
// 只显示间隔倍数的刻度（如i=0,3,6...）
if (i % interval === 0) {
const date = sliderStart.value.add(i, 'day');
obj[i] = date.format('MM-DD'); // 简化日期格式（只显示月-日，节省空间）
const date = sliderStart.value.add(i, "day");
obj[i] = date.format("MM-DD"); // 简化日期格式（只显示月-日，节省空间）
}
}
return obj;
});
const sliderMax = computed(() => {
if (!sliderStart.value || !sliderEnd.value)
return 0;
return Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0);
if (!sliderStart.value || !sliderEnd.value) return 0;
return Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
});
// 6. 滑块变化回调
function handleChange(value: number) {
const currentTime = sliderStart.value?.add(value, 'day');
const currentTime = sliderStart.value?.add(value, "day");
setcurrentTime(currentTime?.valueOf());
console.log('当前选中：', sliderMarks.value[value]);
}
function setTime(val: any[]) {
form.value.startDate = val[0];
form.value.endDate = val[1];
console.log(val);
}
// 其他代码保持不变...
@ -103,37 +116,43 @@ const currentPickervalue = ref<Date | null>(null); // 明确类型为Date或null
const showCalendar = ref(false); // 控制日历显示隐藏
const showSilder = ref(false); // 控制时间轴显示隐藏
const playFalg = ref<boolean>(false);
const flagMaxRunHandle = ref<boolean>(false);//判断是否已经到了最大值
const flagMaxRunHandle = ref<boolean>(false); //判断是否已经到了最大值
const checkBoxList = ref([{
isCheck: true,
label: '级别1',
color: '#1569c7',
isMargin: true,
key: 'level1',
}, {
isCheck: true,
label: '级别2',
color: '#008000',
isMargin: true,
key: 'level2',
}, {
isCheck: true,
label: '级别3',
color: '#ffff00',
key: 'level3',
}, {
isCheck: true,
label: '级别4',
color: '#ff9933',
isMargin: true,
key: 'level4',
}, {
isCheck: true,
label: '级别5',
color: '#ff0000',
key: 'level5',
}]);
const checkBoxList = ref([
{
isCheck: true,
label: "级别1",
color: "#1569c7",
isMargin: true,
key: "level1",
},
{
isCheck: true,
label: "级别2",
color: "#008000",
isMargin: true,
key: "level2",
},
{
isCheck: true,
label: "级别3",
color: "#ffff00",
key: "level3",
},
{
isCheck: true,
label: "级别4",
color: "#ff9933",
isMargin: true,
key: "level4",
},
{
isCheck: true,
label: "级别5",
color: "#ff0000",
key: "level5",
},
]);
// 禁用逻辑
function disableDateRange(date: Date) {
@ -163,12 +182,10 @@ function disableDateRange(date: Date) {
// 获取搜索数据
function getData() {
const formEl = formRef.value;
if (!formEl)
return;
if (!formEl) return;
formEl.validate((valid, fields) => {
if (valid) {
getSampleMonitor(form.value, (res) => {
console.log(res, '样品监测结果数据');
// 显示日历
if (res.result.stationInfo.length) {
showCalendar.value = true;
@ -181,12 +198,11 @@ function getData() {
// 基础数据赋值（原有逻辑保留）
searchResultBaseData.value = res.result.stationInfo;
searchResultTimeListData.value = res.result.sampleMonitorResultList;
initStationLevelCount.value = res.result.stationLevelCount
initPointSt()
}
else {
initStationLevelCount.value = res.result.stationLevelCount;
initPointSt();
} else {
ElMessage({
type: 'error',
type: "error",
message: `未查询到数据，请重试！`,
});
}
@ -196,8 +212,8 @@ function getData() {
}
// 初始化赋值上图
function initPointSt(){
const currentList = initStationLevelCount.value||[];
function initPointSt() {
const currentList = initStationLevelCount.value || [];
const data: any = [];
currentList.forEach((item: any) => {
const find = searchResultBaseData.value.find((v) => {
@ -209,11 +225,15 @@ function initPointSt(){
longitude: find.lon,
latitude: find.lat,
label: find.stationCode,
level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {},
level: item.categoryCount
? JSON.parse(JSON.stringify(item.categoryCount))
: {},
});
}
});
const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key);
const noCheckData = checkBoxList.value
.filter((item: any) => !item.isCheck)
.map((item: any) => item.key);
data.forEach((item: any) => {
Object.keys(item.level).forEach((levelKey) => {
// 如果该键在未勾选列表中，则删除
@ -223,8 +243,6 @@ function initPointSt(){
});
});
console.log(data);
sjfxPointHandle.value?.addPoints(data);
}
@ -260,12 +278,17 @@ function resetHandle() {
playFalg.value = false;
showSilder.value = false;
flagMaxRunHandle.value = false;
setShouldAnimate(false);
}
// 根据选中值获取当前的数据
function getTimeDataFromDate(date: string) {
console.log(date,"222222")
const ymd = sliderEnd.value.format("YYYY-MM-DD");
if (date == ymd && !flagMaxRunHandle.value) {
flagMaxRunHandle.value = true;
}
const currentList = searchResultTimeListData.value[date];
const data: any = [];
currentList.forEach((item: any) => {
@ -278,11 +301,15 @@ function getTimeDataFromDate(date: string) {
longitude: find.lon,
latitude: find.lat,
label: find.stationCode,
level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {},
level: item.categoryCount
? JSON.parse(JSON.stringify(item.categoryCount))
: {},
});
}
});
const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key);
const noCheckData = checkBoxList.value
.filter((item: any) => !item.isCheck)
.map((item: any) => item.key);
data.forEach((item: any) => {
Object.keys(item.level).forEach((levelKey) => {
// 如果该键在未勾选列表中，则删除
@ -292,16 +319,20 @@ function getTimeDataFromDate(date: string) {
});
});
console.log(data);
sjfxPointHandle.value?.addPoints(data);
if (flagMaxRunHandle.value) {
playFalg.value = false;
// showSilder.value = false;
setShouldAnimate(false);
}
}
// 关闭日历
function closeCalendar() {
showCalendar.value = false;
EventBusTool.getEventBus().publish('mapRightMenuUIEvent', {
key: 'calendar',
EventBusTool.getEventBus().publish("mapRightMenuUIEvent", {
key: "calendar",
falg: false,
});
// sjfxPointHandle.value?.clearPoints();
@ -309,43 +340,28 @@ function closeCalendar() {
// 监听选中值变化
watch(currentPickervalue, (newDate) => {
console.log(newDate);
if (newDate) {
const date = dayjs(newDate);
const ymd = date.format('YYYY-MM-DD');
const ymd = date.format("YYYY-MM-DD");
// 计算当前日期对应滑块的位置（距离 start 的天数差）
const sliderVal = Math.max(date.diff(sliderStart.value, 'day'), 0);
const sliderVal = Math.max(date.diff(sliderStart.value, "day"), 0);
// 同步滑块值（避免超出 max）
sliderValue.value = Math.min(sliderVal, sliderMax.value);
console.log(sliderVal,sliderValue.value,sliderMax.value,"12121")
if((sliderVal==sliderMax.value&&!flagMaxRunHandle)){
flagMaxRunHandle.value = true;
getTimeDataFromDate(ymd);
}else if(sliderVal!=sliderMax.value){
getTimeDataFromDate(ymd);
}else{
playFalg.value = false;
// showSilder.value = false;
setShouldAnimate(false);
}
}
else {
console.log('取消了日期选中');
getTimeDataFromDate(ymd);
} else {
console.log("取消了日期选中");
}
});
onMounted(() => {
// 初始化二维地图实例
initMap2D('sjfxOlContainer');
initMap2D("sjfxOlContainer");
sjfxPointHandle.value = new SjfxPointHandle();
nextTick(() => {
// 注册业务帧回调函数
setClockOnTickEvent({
key: '数据分析',
key: "数据分析",
callback(timeClock: any) {
if (timeClock.shouldAnimate) {
const timestamp = JulianDate.toDate(timeClock.currentTime);
@ -354,9 +370,7 @@ onMounted(() => {
},
});
EventBusTool.getEventBus().subscribe('sjfxCalendarEvent', (res: any) => {
EventBusTool.getEventBus().subscribe("sjfxCalendarEvent", (res: any) => {
showCalendar.value = res.falg;
});
});
@ -364,24 +378,39 @@ onMounted(() => {
// 组件即将销毁时执行清理
onUnmounted(() => {
removeClockOnTickEvent('数据分析');
removeClockOnTickEvent("数据分析");
});
</script>
<template>
<div class="sjfx-one-content">
<div class="head">
<el-form ref="formRef" :model="form" label-width="100px" class="queryForm" :rules="rules">
<el-form
ref="formRef"
:model="form"
label-width="100px"
class="queryForm"
:rules="rules"
>
<el-row :gutter="10">
<el-col :span="6">
<el-form-item :label="t('sampleType')" prop="sampleType">
<el-select
v-model="form.sampleType" :placeholder="t('pleaseSelect')" style="width: 160px;"
v-model="form.sampleType"
:placeholder="t('pleaseSelect')"
style="width: 160px"
popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
>
<el-option
v-for="item in sampleTypeList" :key="item.value"
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value"
v-for="item in sampleTypeList"
:key="item.value"
style="
background-color: transparent;
height: 30px;
color: #fff;
"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
@ -399,12 +428,21 @@ onUnmounted(() => {
<el-col :span="6">
<el-form-item :label="t('dataSource')" prop="dataSource">
<el-select
v-model="form.dataSource" :placeholder="t('pleaseSelect')" style="width: 160px;"
v-model="form.dataSource"
:placeholder="t('pleaseSelect')"
style="width: 160px"
popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
>
<el-option
v-for="item in dataSourceList" :key="item.value"
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value"
v-for="item in dataSourceList"
:key="item.value"
style="
background-color: transparent;
height: 30px;
color: #fff;
"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
@ -413,16 +451,23 @@ onUnmounted(() => {
<el-col :span="8">
<el-form-item :label="t('createTime')" prop="createTime">
<el-date-picker
v-model="form.createTime" unlink-panels type="daterange" :default-time="new Date()"
range-separator="--" :start-placeholder="t('startDate')" :end-placeholder="t('endDate')"
value-format="YYYY-MM-DD" style="width: 100%;" @change="setTime"
v-model="form.createTime"
unlink-panels
type="daterange"
:default-time="new Date()"
range-separator="--"
:start-placeholder="t('startDate')"
:end-placeholder="t('endDate')"
value-format="YYYY-MM-DD"
style="width: 100%"
@change="setTime"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button :icon="Search" @click="getData">
{{ t('refresh') }}
{{ t("refresh") }}
</el-button>
</el-form-item>
</el-col>
@ -435,49 +480,46 @@ onUnmounted(() => {
<!-- 日历卡片，通过showCalendar控制显示 -->
<div v-if="showCalendar" class="card-calendar">
<div class="calendarHeader">
<div class="text">
日历
</div>
<div class="text">日历</div>
<div class="icon" @click="closeCalendar">
<SvgIcon name="drawer_header" width="20" height="20" />
</div>
</div>
<div class="calendarContent">
<el-date-picker-panel
v-model="currentPickervalue" :border="false" class="pickerTime"
v-model="currentPickervalue"
:border="false"
class="pickerTime"
:disabled-date="disableDateRange"
/>
<div class="checkBoxGroup">
<el-checkbox
v-for="(v, i) in checkBoxList" :key="i" v-model="v.isCheck" :label="v.label" size="large"
:style="{ marginRight: v.isMargin ? '55px' : '0' }" :data-color="v.color"
v-for="(v, i) in checkBoxList"
:key="i"
v-model="v.isCheck"
:label="v.label"
size="large"
:style="{ marginRight: v.isMargin ? '55px' : '0' }"
:data-color="v.color"
/>
</div>
<div class="btnGruop">
<div class="runBtn" @click="runHandle" v-if="!showSilder">
运行
</div>
<div class="runBtn" @click="runHandle" v-if="!showSilder">运行</div>
<div class="runBtn" @click="playAnimation()" v-else-if="!playFalg">
播放
</div>
<div class="runBtn" @click="playAnimation()" v-else-if="playFalg">
暂停
</div>
<div class="resetBtn" @click="resetHandle">
重置
</div>
<div class="resetBtn" @click="resetHandle">重置</div>
</div>
</div>
</div>
<div v-if="showCalendar" class="levelLegend">
<div class="text">
级别
</div>
<div class="text">级别</div>
<div class="legendItem">
<div class="color" :style="{ backgroundColor: '#fff' }" />
<div class="label">
无
</div>
<div class="label">无</div>
</div>
<div v-for="(v, i) in checkBoxList" :key="i" class="legendItem">
<div class="color" :style="{ backgroundColor: v.color }" />
@ -489,14 +531,20 @@ onUnmounted(() => {
<div v-if="showSilder" class="sliderDom">
<div class="icon" @click="playAnimation()">
<SvgIcon
:name="!playFalg ? 'playAnimation' : 'zanting'" :title="!playFalg ? '播放' : '暂停'" width="34"
:name="!playFalg ? 'playAnimation' : 'zanting'"
:title="!playFalg ? '播放' : '暂停'"
width="34"
height="34"
/>
</div>
<div class="slider">
<el-slider
v-model="sliderValue" :style="{ width: '52vw' }" :show-tooltip="false" :max="sliderMax"
:marks="sliderMarks" @input="handleChange"
v-model="sliderValue"
:style="{ width: '52vw' }"
:show-tooltip="false"
:max="sliderMax"
:marks="sliderMarks"
@input="handleChange"
/>
</div>
</div>
@ -686,27 +734,47 @@ onUnmounted(() => {
color: #fff !important;
}
:deep(.el-checkbox[data-color='#1569c7'] .el-checkbox__input.is-checked .el-checkbox__inner) {
:deep(
.el-checkbox[data-color="#1569c7"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #1569c7;
border-color: #1569c7;
}
:deep(.el-checkbox[data-color='#008000'] .el-checkbox__input.is-checked .el-checkbox__inner) {
:deep(
.el-checkbox[data-color="#008000"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #008000;
border-color: #008000;
}
:deep(.el-checkbox[data-color='#ffff00'] .el-checkbox__input.is-checked .el-checkbox__inner) {
:deep(
.el-checkbox[data-color="#ffff00"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ffff00;
border-color: #ffff00;
}
:deep(.el-checkbox[data-color='#ff9933'] .el-checkbox__input.is-checked .el-checkbox__inner) {
:deep(
.el-checkbox[data-color="#ff9933"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ff9933;
border-color: #ff9933;
}
:deep(.el-checkbox[data-color='#ff0000'] .el-checkbox__input.is-checked .el-checkbox__inner) {
:deep(
.el-checkbox[data-color="#ff0000"]
.el-checkbox__input.is-checked
.el-checkbox__inner
) {
background-color: #ff0000;
border-color: #ff0000;
}