<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>
|
<div class="content-wrap">
|
<div v-for="(g, i) in gridCtrlList" :key="i">
|
{{ g.name }}
|
<div v-for="(value, t) in g.views" :key="t">
|
<!-- {{ value[0] }} -->
|
{{ value[1].extData.name }}
|
<!-- {{ key }} -->
|
<!-- <el-text>{{ g.name }}</el-text> -->
|
<!-- <div class="m-t-8">网格要素</div> -->
|
<el-row class="m-t-8">
|
<CheckButton
|
active-text="显示网格"
|
inactive-text="隐藏网格"
|
:default-value="true"
|
@change="handleGridClick"
|
>
|
</CheckButton>
|
<CheckButton
|
active-text="显示排名"
|
inactive-text="隐藏排名"
|
:default-value="false"
|
@change="handleGridClick"
|
>
|
</CheckButton>
|
<CheckButton
|
active-text="显示数据"
|
inactive-text="隐藏数据"
|
:default-value="false"
|
@change="handleGridClick"
|
>
|
</CheckButton>
|
</el-row>
|
<el-row class="m-b-8" gap="2">
|
<div class="m-t-8">网格透明度</div>
|
<el-slider
|
v-model="opacityValue"
|
:min="0"
|
:max="1"
|
:step="0.1"
|
show-stops
|
@change="handleOpacityChange"
|
style="width: 200px"
|
/>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</template>
|
</BaseCard>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
/**
|
* 网格样式控制工具
|
*/
|
import { ref, watch, computed } from 'vue';
|
|
const props = defineProps({
|
// 网格管理对象[SatelliteGrid]数组
|
gridCtrls: {
|
type: Array,
|
default: () => []
|
}
|
});
|
|
const gridCtrlList = computed(() => {
|
return props.gridCtrls.map((g) => {
|
return {
|
name: g.name,
|
views: Array.from(g.mapViewsMap)
|
};
|
});
|
});
|
|
// watch(
|
// () => props.gridCtrls,
|
// (nV, oV) => {
|
// gridCtrlList.value = nV.map((v) => {
|
// return Array.from(v.infoMap);
|
// });
|
// },
|
// { deep: true }
|
// );
|
|
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 handleRankClick() {
|
rankVisible.value = !rankVisible.value;
|
emits('showRank', rankVisible.value);
|
}
|
|
function handleDataClick() {
|
dataVisible.value = !dataVisible.value;
|
emits('showData', dataVisible.value);
|
}
|
|
function handleColorClick() {
|
isStandardColor.value = !isStandardColor.value;
|
emits('changeColor', isStandardColor.value);
|
}
|
|
function handleOpacityClick() {
|
// isOpacity.value = !isOpacity.value;
|
// emits('changeOpacity', isOpacity.value);
|
}
|
|
function handleOpacityChange(value) {
|
emits('changeOpacity', value);
|
}
|
</script>
|
<style scoped>
|
.content-wrap {
|
min-width: 300px;
|
min-height: 600px;
|
}
|
</style>
|
