图层管理属性详情页面修改

Surpriseplus

2023-08-22 0d3b1e9ffdbebd4a69d91e4d0cae3dd969ca1cfd

 src/views/layer/layerDetail.vue

@@ -2,7 +2,11 @@
  <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>
@@ -12,7 +16,10 @@
          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="demonstration">透明度</div>
@@ -22,6 +29,15 @@
          :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>
@@ -61,7 +77,10 @@
            <!-- <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>
@@ -81,6 +100,7 @@
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();
@@ -108,6 +128,9 @@
  },
];
const formatTooltip = (val: number) => {
  return val / 100;
};
const contrastFormatTooltip = (val: number) => {
  return val / 100;
};
const emits = defineEmits(["detailClose"]);
@@ -174,6 +197,9 @@
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) {
@@ -191,6 +217,8 @@
  height: 400px;
  margin-left: 20px;
  margin-top: 40px;
  z-index: 30;
  position: absolute;
  .title {
    font-size: 18px;
    font-family: Source Han Sans CN;