图层组透明度，临时图层组

surprise

2023-10-19 bfe436e493006bea75d32383d6bdfc0af8c7e5d0

 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%;
  }