<template>
|
<!-- <SatelliteMixTool :group-id="3"></SatelliteMixTool> -->
|
|
<el-row class="wrap">
|
<el-col span="2">
|
<BaseCard v-show="show" direction="left" borderless="r">
|
<template #content>
|
<div class="m-t-8">网格要素</div>
|
<el-row class="m-b-8">
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleRankClick"
|
>
|
{{ rankVisible ? '隐藏排名' : '显示排名' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleDataClick"
|
>
|
{{ dataVisible ? '隐藏数据' : '显示数据' }}
|
</el-button>
|
</el-row>
|
<div class="m-t-8">网格样式</div>
|
<el-row class="m-b-8">
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleColorClick"
|
>
|
{{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
|
</el-button>
|
</el-row>
|
<div class="m-t-8">网格透明度</div>
|
<el-row class="m-b-8">
|
<el-slider
|
v-model="opacityValue"
|
:marks="marks"
|
:min="0"
|
:max="1"
|
:step="0.1"
|
show-stops
|
@change="handleOpacityChange"
|
/>
|
<!-- <el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleOpacityClick"
|
>
|
{{ !isOpacity ? '透明化' : '取消透明化' }}
|
</el-button> -->
|
</el-row>
|
</template>
|
</BaseCard>
|
</el-col>
|
<el-col span="2">
|
<el-row>
|
<CardButton
|
name="网格样式"
|
direction="right"
|
@click="() => (show = !show)"
|
></CardButton>
|
</el-row>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
|
const show = ref(true);
|
|
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>
|
