From bfe436e493006bea75d32383d6bdfc0af8c7e5d0 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 19 十月 2023 13:44:19 +0800
Subject: [PATCH] 图层组透明度，临时图层组
---
src/views/layer/layerDetail.vue | 165 +++++++++++++++++++++++++++++--------------------------
1 files changed, 87 insertions(+), 78 deletions(-)
diff --git a/src/views/layer/layerDetail.vue b/src/views/layer/layerDetail.vue
index 104305b..b69ad16 100644
--- a/src/views/layer/layerDetail.vue
+++ b/src/views/layer/layerDetail.vue
@@ -2,11 +2,7 @@
<div class="content">
<div class="title">
<label> {{ layerData.cnName }}</label>
- <el-icon
- @click="setSpatialClose"
- :size="20"
- style="cursor: pointer"
- >
+ <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
<Close />
</el-icon>
</div>
@@ -19,68 +15,27 @@
alt=""
/>
</div> -->
- <div
- class="slider-demo-block"
- v-show="diaphaneityShow"
- >
+ <div class="slider-demo-block" v-show="diaphaneityShow">
<div class="demonstration">閫忔槑搴�</div>
- <el-slider
- v-model="transparence"
- @change="sliderChange"
- :format-tooltip="formatTooltip"
- />
+ <el-slider v-model="transparence" @change="sliderChange" :format-tooltip="formatTooltip" />
<div class="demonstration">{{ transparence }}%</div>
</div>
- <div
- class="slider-demo-block"
- v-show="contrastShow"
- >
+ <div class="slider-demo-block" v-show="contrastShow">
<div class="demonstration">瀵规瘮搴�</div>
- <el-slider
- v-model="contrast"
- @change="contrastChange"
- :max="3"
- :step="0.1"
- />
+ <el-slider v-model="contrast" @change="contrastChange" :max="3" :step="0.1" />
<div class="demonstration">{{ contrast }}</div>
</div>
- <div
- class="selectBox"
- v-show="drawingModeShow"
- >
+ <div class="selectBox" v-show="drawingModeShow">
<div class="selectTile demonstration">鎷変几鏂瑰紡</div>
<div class="stretchSelect">
- <el-select
- :teleported="false"
- v-model="stretchValue"
- class="stretchSelect"
- :class="{ imgSelect: stretchNumShow }"
- placeholder="閫夋嫨鎷変几鏂瑰紡"
- size="small"
- clearable
- @change="stretchChange"
- >
- <el-option
- v-for="item in stretchOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-select :teleported="false" v-model="stretchValue" class="stretchSelect"
+ :class="{ imgSelect: stretchNumShow }" placeholder="閫夋嫨鎷変几鏂瑰紡" size="small" clearable @change="stretchChange">
+ <el-option v-for="item in stretchOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span v-show="stretchNumShow">-</span>
- <el-input-number
- class="stretchNum"
- v-show="stretchNumShow"
- :precision="2"
- :step="0.01"
- v-model="stretchNum"
- :min="stretchMin"
- :max="stretchMax"
- controls-position="right"
- size="small"
- @change="stretchNumChange"
- />
+ <el-input-number class="stretchNum" v-show="stretchNumShow" :precision="2" :step="0.01" v-model="stretchNum"
+ :min="stretchMin" :max="stretchMax" controls-position="right" size="small" @change="stretchNumChange" />
</div>
</div>
<!-- <div
@@ -139,15 +94,8 @@
</div> -->
<div v-show="colorShow">
<div class="selectBox">
- <el-button
- size="small"
- type="primary"
- @click="setColorLayerRelease"
- >纭</el-button>
- <el-button
- size="small"
- @click="setSpatialClose"
- >鍙栨秷</el-button>
+ <el-button size="small" type="primary" @click="setColorLayerRelease">纭</el-button>
+ <el-button size="small" @click="setSpatialClose">鍙栨秷</el-button>
</div>
</div>
@@ -173,6 +121,8 @@
import { ElMessage } from "element-plus";
import store from "@/store";
import json from "@/assets/js/colorValue";
+import { fa } from "element-plus/es/locale";
+import { Edit } from "@element-plus/icons-vue/dist/types";
const stretchValue = ref("");
const transparence = ref(0);
@@ -183,6 +133,8 @@
let select = ref();
let renderType = ref("");
let renderTypeOptions = ref([]);
+const tempLayer = ref(true)
+const groupsId = ref([]);
let stretchOptions = [
{
value: 0,
@@ -237,7 +189,18 @@
});
const layerLength = ref();
const setSpatialClose = () => {
- emits("detailClose", false);
+ var type = 1;
+ var val = 1;
+ if (tempLayer.value) {
+ type = 0;
+ val = (transparence.value / 100).toFixed(2);
+ }
+ emits("detailClose", {
+ flag: false,
+ type: type,
+ val: val
+
+ });
};
const getColorJson = async () => {
@@ -333,8 +296,14 @@
};
//婊戝潡鍙樺姩
const sliderChange = (val) => {
+ if (tempLayer.value) {
+ for (var i in groupsId.value) {
+ server.layerList[groupsId.value[i]].layerData.alpha =( val / 100).toFixed(2);
+ }
+ } else {
+ server.layerList[layerLength.value].layerData.alpha = val / 100;
+ }
- server.layerList[layerLength.value].layerData.alpha = val / 100;
};
const contrastChange = (val) => {
server.layerList[layerLength.value].layerData.contrast = val;
@@ -365,6 +334,9 @@
) {
contrastShow.value = true;
// drawingModeShow.value = true;
+ }
+ if (val.isLayer == 0) {
+ contrastShow.value = false;
}
if (val.data == 3 || val.data == 4) {
colorShow.value = true;
@@ -404,7 +376,7 @@
stretchMax.value = 1.6;
}
};
-const stretchNumChange = (val) => {};
+const stretchNumChange = (val) => { };
const setColorLayerRelease = async () => {
var color1 = null;
var color2 = null;
@@ -461,17 +433,33 @@
};
onMounted(() => {
typeDisplay(props.layerData);
- server.layerList.forEach((e, i) => {
- if (props.layerData.id == e.id && e.layerData) {
- layerLength.value = i;
- transparence.value = e.layerData.alpha * 100;
+ if (props.layerData.isLayer == 0) {//鍥惧眰缁勯�忔槑搴�
+ tempLayer.value = true;
+ transparence.value = props.layerData.alpha * 100;
+ var ids = store.state.layerGroups.layerIds
+ server.layerList.forEach((e, i) => {
+ for (var j in ids) {
+ if (ids[j] == e.id) {
+ groupsId.value.push(i)
+ }
+ }
+ });
+ } else {
+ tempLayer.value = false;
+ server.layerList.forEach((e, i) => {
+ if (props.layerData.id == e.id && e.layerData) {
+ layerLength.value = i;
+ var alpha = e.layerData.alpha ? e.layerData.alpha : 0;
+ transparence.value = parseInt(alpha * 100);
+ }
+ });
+ releaseLayer.value = props.layerData;
+ if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) {
+ drawingModeShow.value = true;
+ colorShow.value = true;
}
- });
- releaseLayer.value = props.layerData;
- if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) {
- drawingModeShow.value = true;
- colorShow.value = true;
}
+
});
// getColorJson();
</script>
@@ -489,6 +477,7 @@
background: rgba(7, 8, 14, 0.8);
border: 1px solid #d6e4ff;
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+
.title {
font-size: 16px;
font-family: Source Han Sans CN;
@@ -498,10 +487,12 @@
justify-content: space-between;
align-items: center;
}
+
.layer_box {
margin-top: 10px;
}
}
+
.check_box {
display: flex;
align-items: center;
@@ -510,40 +501,49 @@
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 {
+
+.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;
@@ -552,33 +552,42 @@
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;
}
+
.stretchSelect {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
+
.stretchSelect {
width: 100%;
}
+
.imgSelect {
width: 60%;
}
+
span {
color: #fff;
margin: 0 10px;
}
+
.stretchNum {
width: 30%;
}
--
Gitblit v1.9.3