月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-10-27 af90b0acc0cd09dcf72bcad45f186ba59311dd19
src/views/layer/layerDetail.vue
@@ -1,7 +1,7 @@
<template>
  <div class="content">
    <div class="title">
      <label> {{ layerData.cnName }}</label>
      <label>{{ layerData.cnName }}</label>
      <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
        <Close />
      </el-icon>
@@ -14,7 +14,7 @@
      src="../../assets/img/layer.png"
      alt=""
    />
  </div> -->
      </div>-->
      <div class="slider-demo-block" v-show="diaphaneityShow">
        <div class="demonstration">透明度</div>
        <el-slider v-model="transparence" @change="sliderChange" :format-tooltip="formatTooltip" />
@@ -28,14 +28,36 @@
      <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-option>
          <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
@@ -56,7 +78,7 @@
          ></el-option>
        </el-select>
      </div> -->
      </div>-->
      <!-- <div
        class="selectBox"
        v-show="colorShow "
@@ -91,14 +113,13 @@
         
          </el-option>
        </el-select>
      </div> -->
      </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>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -133,7 +154,7 @@
let select = ref();
let renderType = ref("");
let renderTypeOptions = ref([]);
const tempLayer = ref(true)
const tempLayer = ref(true);
const groupsId = ref([]);
let stretchOptions = [
  {
@@ -198,8 +219,7 @@
  emits("detailClose", {
    flag: false,
    type: type,
    val: val
    val: val,
  });
};
@@ -234,7 +254,7 @@
    }
    e.domCss = cssStr;
  });
  // console.log(renderTypeOptions.value);
};
const changeSelection = (scope) => {
@@ -298,12 +318,14 @@
const sliderChange = (val) => {
  if (tempLayer.value) {
    for (var i in groupsId.value) {
      server.layerList[groupsId.value[i]].layerData.alpha =( val / 100).toFixed(2);
      server.layerList[groupsId.value[i]].layerData.alpha = (val / 100).toFixed(
        2
      );
    }
  } else {
    server.layerList[layerLength.value].layerData.alpha = val / 100;
    var data = server.layerList[layerLength.value];
    data.layerData.alpha = val / 100;
  }
};
const contrastChange = (val) => {
  server.layerList[layerLength.value].layerData.contrast = val;
@@ -344,7 +366,7 @@
};
//拉伸选择
const stretchChange = (val) => {
  console.log(val);
  if (val == 0) {
    stretchNumShow.value = false;
    stretchNum.value = 0;
@@ -376,7 +398,7 @@
    stretchMax.value = 1.6;
  }
};
const stretchNumChange = (val) => { };
const stretchNumChange = (val) => {};
const setColorLayerRelease = async () => {
  var color1 = null;
  var color2 = null;
@@ -428,38 +450,73 @@
      store.state.loading = false;
    }
  });
  // const data = ;
  // console.log("1122223" + data.code);
};
const setRestGeoLayer = (res) => {
  var data = server.getGeoLayerChangeAlpha(res);
  layerLength.value = parseInt(data.id);
  var alpha = data.layer.layerData.alpha ? data.layer.layerData.alpha : 1;
  transparence.value = parseInt(alpha * 100);
};
onMounted(() => {
  typeDisplay(props.layerData);
  if (props.layerData.isLayer == 0) {//图层组透明度
  if (props.layerData.isLayer == 0) {
    //图层组透明度
    tempLayer.value = true;
    transparence.value = props.layerData.alpha * 100;
    var ids = store.state.layerGroups.layerIds
    var ids = store.state.layerGroups.layerIds;
    var std = [];
    for (var i in ids) {
      std.push(ids[i].id);
    }
    var checkId = [];
    server.layerList.forEach((e, i) => {
      for (var j in ids) {
        if (ids[j] == e.id) {
          groupsId.value.push(i)
      for (var j in std) {
        if (std[j] == e.id) {
          checkId.push(e.id);
          groupsId.value.push(i);
        }
      }
    });
  } else {
    for (var i in checkId) {
      if (std.indexOf(checkId[i]) > -1) {
        std = std.splice(checkId[i], i);
      }
    }
    if (std.length > 0) {
      for (var i in std) {
        for (var j in ids) {
          if (std[i] == ids[j].id) {
            var data = server.getGeoLayerChangeAlpha(ids[j]);
            groupsId.value.push(parseInt(data.id));
          }
        }
      }
    }
  } else if (props.layerData.isLayer == 1) {
    tempLayer.value = false;
    server.layerList.forEach((e, i) => {
    var val = server.layerList.filter((e) => {
      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);
        return e;
      }
    });
    releaseLayer.value = props.layerData;
    if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) {
      drawingModeShow.value = true;
      colorShow.value = true;
    if (val.length > 0) {
      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;
      }
    } else {
      setRestGeoLayer(props.layerData);
    }
  }
});
// getColorJson();
</script>
@@ -469,7 +526,7 @@
  padding: 20px;
  // height: 400px;
  min-width: 300px;
  margin-left: 385px;
  margin-left: 370px;
  margin-top: 40px;
  z-index: 40;
@@ -518,7 +575,7 @@
  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;
}