From 79538c0454e2777eee0f93a6ec3bbcd248793fb8 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期四, 24 八月 2023 17:22:06 +0800
Subject: [PATCH] 图层设置开发对比度，根据图层类型显隐
---
src/views/layer/layerDetail.vue | 67 ++++++++++++++++++++++-----------
1 files changed, 45 insertions(+), 22 deletions(-)
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index c55479a..375df79 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -2,11 +2,7 @@
<div class="content">
<div class="title">
<label>璇︾粏缂栬緫</label>
- <el-icon
- @click="setSpatialClose"
- :size="20"
- style="cursor: pointer"
- >
+ <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
<Close />
</el-icon>
</div>
@@ -16,12 +12,9 @@
layerName
}}</el-checkbox> -->
{{ layerData.cnName }}
- <img
- src="../../assets/img/layer.png"
- alt=""
- />
+ <img src="../../assets/img/layer.png" alt="" />
</div>
- <div class="slider-demo-block">
+ <div class="slider-demo-block" v-show="diaphaneityShow">
<div class="demonstration">閫忔槑搴�</div>
<el-slider
v-model="transparence"
@@ -30,16 +23,17 @@
/>
<div class="demonstration">{{ transparence }}%</div>
</div>
- <div class="slider-demo-block">
+ <div class="slider-demo-block" v-show="contrastShow">
<div class="demonstration">瀵规瘮搴�</div>
<el-slider
v-model="contrast"
@change="contrastChange"
- :format-tooltip="contrastFormatTooltip"
+ :max="3"
+ :step="0.1"
/>
- <div class="demonstration">{{ contrast }}%</div>
+ <div class="demonstration">{{ contrast }}</div>
</div>
- <div class="selectBox">
+ <div class="selectBox" v-show="drawingModeShow">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
<el-select
v-model="stretchValue"
@@ -57,7 +51,7 @@
</el-option>
</el-select>
</div>
- <div class="selectBox">
+ <div class="selectBox" v-show="colorShow">
<div class="selectTile demonstration">娓叉煋绫诲瀷</div>
<el-select
v-model="renderType"
@@ -77,10 +71,7 @@
<!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
<span>{{ item.label }}</span> -->
- <img
- :src="item.url"
- style="height: 30px; width: 100%"
- />
+ <img :src="item.url" style="height: 30px; width: 100%" />
</el-option>
</el-select>
</div>
@@ -100,7 +91,7 @@
import server from "@/assets/js/Map/server";
const stretchValue = ref("");
const transparence = ref(0);
-const contrast = ref(0);
+const contrast = ref(1);
let layerName = ref("鍥惧眰鍚嶇О");
let layerState = ref(false);
let select = ref();
@@ -198,11 +189,43 @@
server.layerList[layerLength.value].layerData.alpha = val / 100;
};
const contrastChange = (val) => {
- server.layerList[layerLength.value].layerData.alpha = val / 100;
+ server.layerList[layerLength.value].layerData.contrast = val;
+};
+let diaphaneityShow = ref(false);
+let contrastShow = ref(false);
+let drawingModeShow = ref(false);
+let colorShow = ref(false);
+//鍒ゆ柇绫诲瀷鏄剧ず
+const typeDisplay = (val) => {
+ if (
+ val.data == 1 ||
+ val.data == 3 ||
+ val.data == 4 ||
+ val.data == 5 ||
+ val.data == 6 ||
+ val.data == 7 ||
+ val.data == 8
+ ) {
+ diaphaneityShow.value = true;
+ }
+ if (
+ val.data == 1 ||
+ val.data == 3 ||
+ val.data == 4 ||
+ val.data == 5 ||
+ val.data == 6
+ ) {
+ contrastShow.value = true;
+ drawingModeShow.value = true;
+ }
+ if (val.data == 3 || val.data == 4) {
+ colorShow.value = true;
+ }
};
onMounted(() => {
+ typeDisplay(props.layerData);
server.layerList.forEach((e, i) => {
- if (props.layerData.id == e.id) {
+ if (props.layerData.id == e.id && e.layerData) {
layerLength.value = i;
transparence.value = e.layerData.alpha * 100;
}
--
Gitblit v1.9.3