影像对比，地名查询，图层管理界面修改

Surpriseplus

2023-09-04 1355c04087927dfed32827d23609e2b04a8cabea

 src/views/layer/layerDetail.vue

@@ -1,5 +1,8 @@
<template>
  <div class="content">
  <div
    class="content"
    v-drag="true"
  >
    <div class="title">
      <label>详细编辑</label>
      <el-icon
@@ -21,7 +24,10 @@
          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 +36,23 @@
        />
        <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 +70,10 @@
          </el-option>
        </el-select>
      </div>
      <div class="selectBox">
      <div
        class="selectBox"
        v-show="colorShow"
      >
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
@@ -100,7 +116,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();
@@ -183,7 +199,7 @@
  //   let aa = stretchOptions[index];
  //   let value = aa.value;
  //   if (brand === value) {
  //     console.log(select.value.$el.children);

  //     select.value.$el.children[0].children[0].setAttribute(
  //       "style",
  //       "background:url(" +
@@ -198,11 +214,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;
    }
@@ -214,10 +262,11 @@
.content {
  background: #1e2a3d;
  padding: 20px;
  height: 400px;
  // height: 400px;
  margin-left: 20px;
  margin-top: 40px;
  z-index: 30;
  min-width: 200px;
  z-index: 40;
  position: absolute;
  .title {
    font-size: 18px;