<template>
|
<div class="content">
|
<div class="title">
|
<label>详细编辑</label>
|
<el-icon
|
@click="setSpatialClose"
|
:size="20"
|
style="cursor: pointer"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
<div class="layer_box">
|
<div class="check_box">
|
<!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
|
layerName
|
}}</el-checkbox> -->
|
{{ layerData.cnName }}
|
<img
|
src="../../assets/img/layer.png"
|
alt=""
|
/>
|
</div>
|
<div class="slider-demo-block">
|
<div class="demonstration">透明度</div>
|
<el-slider
|
v-model="transparence"
|
@change="sliderChange"
|
:format-tooltip="formatTooltip"
|
/>
|
<div class="demonstration">{{ transparence }}%</div>
|
</div>
|
<div class="slider-demo-block">
|
<div class="demonstration">对比度</div>
|
<el-slider
|
v-model="contrast"
|
@change="contrastChange"
|
:format-tooltip="contrastFormatTooltip"
|
/>
|
<div class="demonstration">{{ contrast }}%</div>
|
</div>
|
<div class="selectBox">
|
<div class="selectTile demonstration">拉伸方式</div>
|
<el-select
|
v-model="stretchValue"
|
class="imgSelect"
|
placeholder="选择拉伸方式"
|
size="small"
|
clearable
|
>
|
<el-option
|
v-for="item in stretchOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="selectBox">
|
<div class="selectTile demonstration">渲染类型</div>
|
<el-select
|
v-model="renderType"
|
class="imgSelect"
|
placeholder="选择渲染类型"
|
size="small"
|
@change="changeSelection(renderType)"
|
ref="select"
|
clearable
|
>
|
<el-option
|
v-for="item in renderTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
<!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
|
<span>{{ item.label }}</span> -->
|
|
<img
|
:src="item.url"
|
style="height: 30px; width: 100%"
|
/>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import server from "@/assets/js/Map/server";
|
const stretchValue = ref("");
|
const transparence = ref(0);
|
const contrast = ref(0);
|
let layerName = ref("图层名称");
|
let layerState = ref(false);
|
let select = ref();
|
let renderType = ref("");
|
const renderTypeOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
},
|
];
|
const stretchOptions = [
|
{
|
value: "Option1",
|
label: "Option1",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
];
|
const formatTooltip = (val: number) => {
|
return val / 100;
|
};
|
const contrastFormatTooltip = (val: number) => {
|
return val / 100;
|
};
|
const emits = defineEmits(["detailClose"]);
|
//defineProps 来接收组件的传值
|
const props = defineProps({
|
layerData: Object,
|
});
|
const layerLength = ref();
|
const setSpatialClose = () => {
|
emits("detailClose", false);
|
};
|
const handlCheckAllChange = (res) => {};
|
const changeSelection = (scope) => {
|
if (scope == "") {
|
select.value.$el.children[0].children[0].removeAttribute("style");
|
select.value.$el.children[0].children[0].children[0].removeAttribute(
|
"style"
|
);
|
select.value.$el.children[0].children[0].children[0].children[0].removeAttribute(
|
"style"
|
);
|
return;
|
}
|
for (let index in renderTypeOptions) {
|
let obj = renderTypeOptions[index];
|
if (obj.value == scope) {
|
select.value.$el.children[0].children[0].setAttribute(
|
"style",
|
`background: url(${obj.url}) no-repeat;
|
width: 100%; height: 100%;
|
border: none;
|
height: 33px;
|
background-size:100% 100%`
|
);
|
select.value.$el.children[0].children[0].children[0].setAttribute(
|
"style",
|
`display: flex;
|
justify-content: flex-end;
|
background:transparent;`
|
);
|
select.value.$el.children[0].children[0].children[0].children[0].setAttribute(
|
"style",
|
`display: none;`
|
);
|
}
|
}
|
|
// let brand = scope;
|
// for (let index in stretchOptions) {
|
// let aa = stretchOptions[index];
|
// let value = aa.value;
|
// if (brand === value) {
|
// console.log(select.value.$el.children);
|
// select.value.$el.children[0].children[0].setAttribute(
|
// "style",
|
// "background:url(" +
|
// aa.url +
|
// ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
|
// );
|
// }
|
// }
|
};
|
//滑块变动
|
const sliderChange = (val) => {
|
server.layerList[layerLength.value].layerData.alpha = val / 100;
|
};
|
const contrastChange = (val) => {
|
server.layerList[layerLength.value].layerData.alpha = val / 100;
|
};
|
onMounted(() => {
|
server.layerList.forEach((e, i) => {
|
if (props.layerData.id == e.id) {
|
layerLength.value = i;
|
transparence.value = e.layerData.alpha * 100;
|
}
|
});
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.content {
|
background: #1e2a3d;
|
padding: 20px;
|
height: 400px;
|
margin-left: 20px;
|
margin-top: 40px;
|
min-width: 200px;
|
z-index: 30;
|
position: absolute;
|
.title {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.layer_box {
|
margin-top: 10px;
|
}
|
}
|
.check_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 50px;
|
padding-top: 10px;
|
font-size: 16px;
|
color: #ffffff;
|
img {
|
width: 22px;
|
height: 19px;
|
}
|
}
|
.check_box .el-checkbox {
|
font-size: 16px;
|
color: #ffffff;
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: rgba(13, 255, 0, 1);
|
border-color: rgba(41, 109, 255, 1);
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
}
|
.slider-demo-block {
|
margin-top: 22px;
|
}
|
.demonstration {
|
font-size: 12px;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
/deep/ .el-slider__runway {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__bar {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__button {
|
width: 17px;
|
height: 18px;
|
border: 0;
|
background: url("../../assets/img/DBX.png") no-repeat center;
|
background-size: 100% 100%;
|
border-radius: 0;
|
}
|
.selectBox {
|
margin-top: 24px;
|
.selectTile {
|
padding-bottom: 6px;
|
}
|
.el-select {
|
width: 100%;
|
}
|
}
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
</style>
|
