<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">
|
{{ g.name }}
|
<div v-for="(value, t) in g.views" :key="t">
|
<span v-if="value.extData.type == 0">{{ value.tag + '.' }}</span>
|
{{ value.extData.name }}
|
<!-- {{ key }} -->
|
<!-- <el-text>{{ g.name }}</el-text> -->
|
<!-- <div class="m-t-8">网格要素</div> -->
|
<el-row class="m-t-8" justify="space-between">
|
<CheckButton
|
active-text="显示网格"
|
inactive-text="隐藏网格"
|
:default-value="true"
|
@change="(e) => handleGridClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
active-text="显示排名"
|
inactive-text="隐藏排名"
|
:default-value="false"
|
@change="(e) => handleRankClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
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
|
active-text="绘制对比色"
|
inactive-text="绘制标准色"
|
:default-value="false"
|
@change="(e) => handleColorClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
active-text="风险热力图"
|
inactive-text="风险热力图"
|
:default-value="false"
|
@change="(e) => handleHeatMapClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
v-if="value.extData.type == 0"
|
active-text="显示走航轨迹"
|
inactive-text="隐藏走航轨迹"
|
:default-value="false"
|
@change="(e) => handleUnderwayClick(e, i, value)"
|
>
|
</CheckButton>
|
<CheckButton
|
v-if="value.extData.type == 1"
|
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 emits = defineEmits(['showUnderway']);
|
|
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,
|
opacityValue: 1
|
};
|
})
|
});
|
});
|
});
|
|
const show = ref(true);
|
|
// const gridVisible = ref(false);
|
// const rankVisible = ref(false);
|
// const dataVisible = ref(false);
|
// const isStandardColor = ref(true);
|
// const isOpacity = ref(false);
|
// const opacityValue = ref(0.7);
|
|
// const emits = defineEmits([
|
// 'showRank',
|
// 'showData',
|
// 'changeColor',
|
// 'changeOpacity'
|
// ]);
|
|
function handleGridClick(e, index, value) {
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showGridViews: e
|
});
|
}
|
|
function handleRankClick(e, index, value) {
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showRankTxt: e
|
});
|
}
|
|
function handleDataClick(e, index, value) {
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeVisibility({
|
tags: [key],
|
showDataTxt: e
|
});
|
}
|
|
function handleColorClick(e, index, value) {
|
const key = value.tag;
|
toRaw(props.gridCtrls[index]).changeGridColor({
|
tag: key,
|
useCustomColor: e
|
});
|
}
|
|
function handleOpacityChange(e, index, value) {
|
console.log(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) {
|
emits('showUnderway', {
|
isShow: e,
|
dataId: value.tag
|
});
|
}
|
|
function handleHighlightGridClick(e, index, value) {
|
toRaw(props.gridCtrls[index]).mixGrid(value.tag.split('-'), e);
|
}
|
|
let heatTag
|
function handleHeatMapClick(e, index, value) {
|
const _satelliteGrid = toRaw(props.gridCtrls[index])
|
_satelliteGrid.changeVisibility({
|
showGridViews: false,
|
showDataTxt: false,
|
showRankTxt: false
|
});
|
if (e) {
|
const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
|
gridApi.buildUnderwayHeatmap(3, data).then((res) => {
|
heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
|
_satelliteGrid.setGridEvent(
|
[heatTag],
|
'click',
|
(gridCell, gridDataDetail) => {
|
gridStore.selectedGridCellAndDataDetail = {
|
gridCell,
|
gridDataDetail
|
};
|
}
|
);
|
});
|
} else {
|
_satelliteGrid.changeVisibility({
|
tags: [value.tag],
|
showGridViews: true
|
});
|
}
|
}
|
</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>
|
