| | |
| | | </el-form-item> --> |
| | | </el-form> |
| | | </el-row> |
| | | <div class="m-t-8">筛选辅助</div> |
| | | <el-row class="m-t-8" justify="space-between"> |
| | | <span>融合分析</span> |
| | | </el-row> |
| | | <el-form :inline="false"> |
| | | <el-form-item label="时段筛选"> |
| | | <el-select |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div v-if="!gridCellList"> |
| | | <el-icon class="is-loading"><Loading /></el-icon> |
| | | 网格信息加载中... |
| | | </div> |
| | | <el-table |
| | | ref="tableRef" |
| | | :data="showFusionDataList" |
| | | table-layout="fixed" |
| | | size="small" |
| | | size="default" |
| | | :show-overflow-tooltip="true" |
| | | border |
| | | height="50vh" |
| | |
| | | @row-click="handleRowClick" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="40" /> |
| | | <el-table-column width="40" v-if="!gridCellList"> |
| | | <template #default> |
| | | <el-icon class="is-loading"><Loading /></el-icon> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | v-else |
| | | type="selection" |
| | | :selectable="selectable" |
| | | width="40" |
| | | /> |
| | | <!-- <el-table-column |
| | | type="index" |
| | | label="序号" |
| | |
| | | label="时间" |
| | | align="center" |
| | | :formatter="timeFormatter" |
| | | width="100" |
| | | width="120" |
| | | /> |
| | | <el-table-column |
| | | prop="missionCode" |
| | |
| | | prop="pollutionDegree" |
| | | label="污染背景" |
| | | align="center" |
| | | width="50" |
| | | width="70" |
| | | /> |
| | | </el-table> |
| | | |
| | | <div class="m-t-8">操作</div> |
| | | <el-space class="m-t-8 m-b-8"> |
| | | <el-button |
| | | <!-- <el-button |
| | | type="primary" |
| | | class="el-button-custom" |
| | | size="small" |
| | |
| | | @click="handleFusionClick" |
| | | > |
| | | {{ '叠加走航' }} |
| | | </el-button> |
| | | </el-button> --> |
| | | <CheckButton |
| | | active-text="开启融合" |
| | | inactive-text="隐藏融合" |
| | | active-text="融合分析" |
| | | :default-value="false" |
| | | @change="handleMixClick" |
| | | > |
| | |
| | | <GridStyleTool |
| | | :gridCtrls="gridCtrls" |
| | | @show-underway="handleUnderwayClick" |
| | | @on-delete="handleFusionDelete" |
| | | ></GridStyleTool> |
| | | </el-row> |
| | | <!-- </div> --> |
| | |
| | | const fusionLoading = ref(false); |
| | | const fusionDataList = ref([]); |
| | | const selectedfusionData = ref([]); |
| | | const tableRef = ref() |
| | | const selectable = (row) => gridCellList.value; |
| | | |
| | | const gridDataDetailMap = new Map(); |
| | | |
| | |
| | | const selectedPollutionDegree = ref([]); |
| | | |
| | | const timeSectionList = computed(() => { |
| | | const res = []; |
| | | let res = []; |
| | | fusionDataList.value.forEach((e) => { |
| | | const t = moment(e.dataTime).format('YYYY-MM-DD'); |
| | | if (res.indexOf(t) == -1) { |
| | | res.push(t); |
| | | const hour = moment(e.dayTimePeriodStart).hour(); |
| | | const t = e.dayTimePeriod; |
| | | const option = { |
| | | value: t, |
| | | index: hour |
| | | }; |
| | | if (res.indexOf(option) == -1) { |
| | | res.push(option); |
| | | } |
| | | }); |
| | | res.sort((a, b) => { |
| | | return a.index - b.index; |
| | | }); |
| | | |
| | | const rMap = new Map(); |
| | | showFusionDataList.value.forEach((d) => { |
| | | if (!rMap.has(d.dayTimePeriod)) { |
| | | rMap.set(d.dayTimePeriod, 0); |
| | | } |
| | | rMap.set(d.dayTimePeriod, rMap.get(d.dayTimePeriod) + 1); |
| | | }); |
| | | |
| | | res = res.map((v) => { |
| | | const count = rMap.get(v.value); |
| | | return `${v.value} (${count})`; |
| | | }); |
| | | return res; |
| | | }); |
| | | |
| | | const zoneList = computed(() => { |
| | | const res = []; |
| | | let res = []; |
| | | fusionDataList.value.forEach((e) => { |
| | | const t = e.zone; |
| | | if (res.indexOf(t) == -1) { |
| | | res.push(t); |
| | | } |
| | | }); |
| | | const rMap = new Map(); |
| | | showFusionDataList.value.forEach((d) => { |
| | | if (!rMap.has(d.zone)) { |
| | | rMap.set(d.zone, 0); |
| | | } |
| | | rMap.set(d.zone, rMap.get(d.zone) + 1); |
| | | }); |
| | | |
| | | res = res.map((v) => { |
| | | const count = rMap.get(v); |
| | | return `${v} (${count})`; |
| | | }); |
| | | return res; |
| | | }); |
| | | |
| | | const pollutionDegreeList = computed(() => { |
| | | const res = []; |
| | | let res = []; |
| | | fusionDataList.value.forEach((e) => { |
| | | const t = e.pollutionDegree; |
| | | if (res.indexOf(t) == -1) { |
| | | res.push(t); |
| | | const option = { |
| | | value: t, |
| | | index: e.pollutionDegreeIndex |
| | | }; |
| | | if (res.indexOf(option) == -1) { |
| | | res.push(option); |
| | | } |
| | | }); |
| | | res.sort((a, b) => { |
| | | return a.index - b.index; |
| | | }); |
| | | const rMap = new Map(); |
| | | showFusionDataList.value.forEach((d) => { |
| | | if (!rMap.has(d.pollutionDegree)) { |
| | | rMap.set(d.pollutionDegree, 0); |
| | | } |
| | | rMap.set(d.pollutionDegree, rMap.get(d.pollutionDegree) + 1); |
| | | }); |
| | | |
| | | res = res.map((v) => { |
| | | const count = rMap.get(v.value); |
| | | return `${v.value} (${count})`; |
| | | }); |
| | | return res; |
| | | }); |
| | |
| | | return fusionDataList.value.filter((v) => { |
| | | const b1 = |
| | | selectedTimeSection.value.length == 0 || |
| | | selectedTimeSection.value.indexOf( |
| | | moment(v.dataTime).format('YYYY-MM-DD') |
| | | ) != -1; |
| | | selectedTimeSection.value.indexOf(v.dayTimePeriod) != -1; |
| | | const b2 = |
| | | selectedZone.value.length == 0 || |
| | | selectedZone.value.indexOf(v.zone) != -1; |
| | |
| | | let mixTag; |
| | | function handleMixClick() { |
| | | mixActive.value = !mixActive.value; |
| | | const tags = fusionDataList.value |
| | | .filter((v, i) => selectedfusionData.value.indexOf(i) != -1) |
| | | .map((v) => v.id); |
| | | const tags = selectedfusionData.value.map((v) => v.id); |
| | | satelliteGrid.changeVisibility({ |
| | | showGridViews: false, |
| | | showDataTxt: false, |
| | |
| | | mapLine.hideLine(mission.missionCode); |
| | | } |
| | | } |
| | | function handleFusionDelete(index, tag) { |
| | | const f = selectedfusionData.value.find((v) => v.id == tag); |
| | | if (f) { |
| | | // const i = selectedfusionData.value.indexOf(f); |
| | | // selectedfusionData.value.splice(i, 1); |
| | | tableRef.value.toggleRowSelection(f, false) |
| | | } |
| | | } |
| | | |
| | | function handleSelectionChange(val) { |
| | | const deleted = selectedfusionData.value.filter((v) => { |
| | | return val.indexOf(v) == -1; |
| | | }); |
| | | const deletedIdList = deleted.map((d) => d.id); |
| | | const added = val.filter((v) => { |
| | | return selectedfusionData.value.indexOf(v) == -1; |
| | | }); |
| | | // const addedIdList = added.map(d=>d.id) |
| | | |
| | | if (deletedIdList.length > 0) { |
| | | satelliteGrid.deleteTagGrid(deletedIdList); |
| | | gridCtrls.value = [satelliteGrid]; |
| | | // satelliteGrid.changeVisibility({ tags: deletedIdList, showGridViews: false }); |
| | | } |
| | | |
| | | added.forEach((i) => { |
| | | const d = i; |
| | | gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => { |
| | | gridDataDetailMap.set(d.id, res.data); |
| | | const gdd = res.data; |
| | | satelliteGrid.drawTagGrid({ |
| | | tag: d.id, |
| | | data: gdd, |
| | | extData: { |
| | | name: `走航网格 - ${d.mixDataId}`, |
| | | type: 0 |
| | | } |
| | | }); |
| | | satelliteGrid.setGridEvent( |
| | | [d.id], |
| | | 'click', |
| | | (gridCell, gridDataDetail) => { |
| | | gridStore.selectedGridCellAndDataDetail = { |
| | | gridCell, |
| | | gridDataDetail |
| | | }; |
| | | } |
| | | ); |
| | | gridCtrls.value = [satelliteGrid]; |
| | | }); |
| | | }); |
| | | |
| | | selectedfusionData.value = val; |
| | | } |
| | | |