<template>
|
<el-row class="wrap">
|
<el-col span="2">
|
<el-row>
|
<CardButton
|
name="网格样式"
|
direction="left"
|
@click="() => (show = !show)"
|
></CardButton>
|
</el-row>
|
</el-col>
|
<el-col span="2">
|
<BaseCard v-show="show" direction="right" borderless="r">
|
<template #content>
|
<el-scrollbar class="content-wrap">
|
<div v-for="(g, i) in gridCtrlList" :key="i">
|
<span>{{ g.name }}</span>
|
<div v-for="(value, t) in g.views" :key="t">
|
<el-row justify="space-between" align="middle">
|
<div>
|
<span v-if="value.extData.type == 0">{{
|
value.tag + '.'
|
}}</span>
|
{{ value.extData.name }}
|
</div>
|
<el-button
|
class="el-button-custom"
|
type="primary"
|
icon="Close"
|
circle
|
size="small"
|
@click="handleCloseClick(i, t, value)"
|
/>
|
<!-- <el-icon><Close /></el-icon> -->
|
</el-row>
|
|
<!-- {{ key }} -->
|
<!-- <el-text>{{ g.name }}</el-text> -->
|
<!-- <div class="m-t-8">网格要素</div> -->
|
<el-row class="m-t-8" justify="space-between">
|
<!-- <el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="gridLoading = !gridLoading"
|
>
|
{{ '融合分析' }}
|
</el-button> -->
|
<CheckButton
|
:loading="gridLoading"
|
v-model="value.show"
|
active-text="显示网格"
|
inactive-text="隐藏网格"
|
@change="(e) => handleGridClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
:loading="rankLoading"
|
v-model="value.showRank"
|
active-text="显示排名"
|
inactive-text="隐藏排名"
|
:default-value="false"
|
@change="(e) => handleRankClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
:loading="dataLoading"
|
v-model="value.showData"
|
active-text="显示数据"
|
inactive-text="隐藏数据"
|
:default-value="false"
|
@change="(e) => handleDataClick(e, i, value)"
|
>
|
</CheckButton>
|
</el-row>
|
<el-row class="m-t-8" justify="space-between">
|
<CheckButton
|
:loading="colorLoading"
|
v-model="value.showCustomColor"
|
active-text="绘制对比色"
|
inactive-text="绘制标准色"
|
:default-value="false"
|
@change="(e) => handleColorClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
:loading="heatMapLoading"
|
v-model="value.showHeatMap"
|
active-text="风险热力图"
|
inactive-text="风险热力图"
|
:default-value="false"
|
@change="(e) => handleHeatMapClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
:loading="underwayLoading"
|
v-if="value.extData.type == 0"
|
v-model="value.showUnderway"
|
active-text="显示走航轨迹"
|
inactive-text="隐藏走航轨迹"
|
:default-value="false"
|
@change="(e) => handleUnderwayClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
:loading="highlightLoading"
|
v-if="value.extData.type == 1"
|
v-model="value.highlightFusionGrid"
|
active-text="高亮融合网格"
|
:default-value="true"
|
@change="(e) => handleHighlightGridClick(e, i, value)"
|
>
|
</CheckButton>
|
</el-row>
|
<!-- <el-row class="m-b-8" align="middle"> -->
|
<el-form-item label="透明度">
|
<!-- <div class="m-t-8">网格透明度</div> -->
|
<el-slider
|
v-model="value.opacityValue"
|
:min="0"
|
:max="1"
|
:step="0.1"
|
show-stops
|
@change="(e) => handleOpacityChange(e, i, value)"
|
style="width: 150px"
|
/>
|
<el-input-number
|
class="m-l-16"
|
size="small"
|
v-model="value.opacityValue"
|
:min="0"
|
:max="1"
|
:step="0.1"
|
@change="(e) => handleOpacityChange(e, i, value)"
|
/>
|
</el-form-item>
|
<!-- </el-row> -->
|
<el-divider />
|
</div>
|
</div>
|
</el-scrollbar>
|
</template>
|
</BaseCard>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
/**
|
* 网格样式控制工具
|
*/
|
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';
|
import gridApi from '@/api/gridApi';
|
import { useGridStore } from '@/stores/grid-info';
|
|
const gridStore = useGridStore();
|
|
const props = defineProps({
|
// 网格管理对象[SatelliteGrid]数组
|
gridCtrls: {
|
type: Array,
|
default: () => []
|
}
|
});
|
|
const gridLoading = ref(false);
|
const rankLoading = ref(false);
|
const dataLoading = ref(false);
|
const colorLoading = ref(false);
|
const heatMapLoading = ref(false);
|
const underwayLoading = ref(false);
|
const highlightLoading = ref(false);
|
|
const emits = defineEmits(['showUnderway', 'onDelete']);
|
|
const gridCtrlList = computed(() => {
|
return props.gridCtrls.map((g) => {
|
return reactive({
|
name: g.name,
|
views: Array.from(g.mapViewsMap).map((v) => {
|
return {
|
tag: v[0],
|
extData: v[1].extData,
|
show: v[1].show,
|
showRank: v[1].showRank,
|
showData: v[1].showData,
|
showCustomColor: v[1].showCustomColor,
|
showHeatMap: v[1].showHeatMap,
|
highlightFusionGrid: true,
|
// ...v[1],
|
opacityValue: 1
|
};
|
})
|
});
|
});
|
});
|
|
const show = ref(true);
|
|
function handleCloseClick(index, t, value) {
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).deleteTagGrid([key]);
|
gridCtrlList.value[index].views.splice(t, 1);
|
emits('onDelete', index, key);
|
}
|
|
function handleGridClick(e, index, value) {
|
gridLoading.value = true;
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showGridViews: e
|
});
|
gridLoading.value = false;
|
}
|
|
function handleRankClick(e, index, value) {
|
rankLoading.value = true;
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showRankTxt: e
|
});
|
rankLoading.value = false;
|
}
|
|
function handleDataClick(e, index, value) {
|
dataLoading.value = true;
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showDataTxt: e
|
});
|
dataLoading.value = false;
|
}
|
|
function handleColorClick(e, index, value) {
|
colorLoading.value = true;
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeGridColor({
|
tags: [key],
|
useCustomColor: e
|
});
|
colorLoading.value = false;
|
}
|
|
function handleOpacityChange(e, index, value) {
|
const key = value.tag;
|
// value.opacityValue = e;
|
toRaw(props.gridCtrls[index]).changeGridOpacity({
|
tag: key,
|
opacityValue: toRaw(value.opacityValue)
|
});
|
}
|
|
function handleUnderwayClick(e, index, value) {
|
underwayLoading.value = true;
|
emits('showUnderway', {
|
isShow: e,
|
dataId: value.tag,
|
done: () => (underwayLoading.value = false)
|
});
|
}
|
|
function handleHighlightGridClick(e, index, value) {
|
highlightLoading.value = true;
|
toRaw(props.gridCtrls[index]).mixGrid({
|
tags: value.tag.split('-'),
|
isMixGridHighlight: e
|
});
|
highlightLoading.value = false;
|
}
|
|
let heatTag;
|
const heatMapSearchLength = 4;
|
function handleHeatMapClick(e, index, value) {
|
heatMapLoading.value = true;
|
const _satelliteGrid = toRaw(props.gridCtrls[index]);
|
_satelliteGrid.changeVisibility({
|
showGridViews: false,
|
showDataTxt: false,
|
showRankTxt: false
|
});
|
// gridCtrlList.value.forEach((v) => {
|
// v.views.forEach((view) => {
|
// view.show = false;
|
// view.showData = false;
|
// view.showRank = false;
|
// });
|
// });
|
if (e) {
|
const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
|
gridApi
|
.buildUnderwayHeatmap(
|
_satelliteGrid.gridGroupId,
|
data,
|
heatMapSearchLength
|
)
|
.then((res) => {
|
heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
|
_satelliteGrid.setDefaultGridClickEvent([heatTag]);
|
// _satelliteGrid.setGridEvent(
|
// [heatTag],
|
// 'click',
|
// (gridCell, gridDataDetail) => {
|
// gridStore.selectedGridCellAndDataDetail = {
|
// gridCell,
|
// gridDataDetail
|
// };
|
// }
|
// );
|
})
|
.finally(() => (heatMapLoading.value = false));
|
} else {
|
_satelliteGrid.changeVisibility({
|
tags: [value.tag],
|
showGridViews: true
|
});
|
heatMapLoading.value = false;
|
}
|
}
|
</script>
|
<style scoped>
|
.content-wrap {
|
min-width: 300px;
|
min-height: 600px;
|
max-height: 80vh;
|
height: 80vh;
|
padding: 4px 16px;
|
}
|
|
:deep(.el-input-number) {
|
width: 80px;
|
}
|
</style>
|
