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

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>
@@ -11,23 +15,38 @@
        <!-- <el-checkbox @change="handlCheckAllChange" v-model="layerState">{{
          layerName
        }}</el-checkbox> -->
        {{ layerData.name }}
        <img src="../../assets/img/layer.png" alt="" />
        {{ layerData.cnName }}
        <img
          src="../../assets/img/layer.png"
          alt=""
        />
      </div>
      <div class="slider-demo-block">
        <div class="demonstration">透明度</div>
        <el-slider v-model="transparence" />
        <el-slider
          v-model="transparence"
          @change="sliderChange"
          :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>
        <el-select
          v-model="stretchValue"
          class="m-2"
          placeholder="Select"
          class="imgSelect"
          placeholder="选择拉伸方式"
          size="small"
          @change="changeSelection(stretchValue)"
          ref="select"
          clearable
        >
          <el-option
            v-for="item in stretchOptions"
@@ -35,8 +54,33 @@
            :label="item.label"
            :value="item.value"
          >
            <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="selectBox">
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
          class="imgSelect"
          placeholder="选择渲染类型"
          size="small"
          @change="changeSelection(renderType)"
          ref="select"
          clearable
        >
          <el-option
            v-for="item in renderTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span> -->

            <img
              :src="item.url"
              style="height: 30px; width: 100%"
            />
          </el-option>
        </el-select>
      </div>
@@ -53,12 +97,15 @@
  defineProps,
  defineEmits,
} from "vue";
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();
const stretchOptions = [
let renderType = ref("");
const renderTypeOptions = [
  {
    value: "Option1",
    label: "Option1",
@@ -67,34 +114,100 @@
  {
    value: "Option2",
    label: "Option2",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
  },
];
const stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
const formatTooltip = (val: number) => {
  return val / 100;
};
const contrastFormatTooltip = (val: number) => {
  return val / 100;
};
const emits = defineEmits(["detailClose"]);
//defineProps 来接收组件的传值
const props = defineProps({
  layerData: Object,
});
const layerLength = ref();
const setSpatialClose = () => {
  emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
const changeSelection = (scope) => {
  let brand = scope;
  for (let index in stretchOptions) {
    let aa = stretchOptions[index];
    let value = aa.value;
    if (brand === value) {
      console.log(select.value);
  if (scope == "") {
    select.value.$el.children[0].children[0].removeAttribute("style");
    select.value.$el.children[0].children[0].children[0].removeAttribute(
      "style"
    );
    select.value.$el.children[0].children[0].children[0].children[0].removeAttribute(
      "style"
    );
    return;
  }
  for (let index in renderTypeOptions) {
    let obj = renderTypeOptions[index];
    if (obj.value == scope) {
      select.value.$el.children[0].children[0].setAttribute(
        "style",
        "background:url(" +
          aa.url +
          ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
        `background: url(${obj.url}) no-repeat;
            width: 100%; height: 100%;
            border: none;
            height: 33px;
            background-size:100% 100%`
      );
      select.value.$el.children[0].children[0].children[0].setAttribute(
        "style",
        `display: flex;
        justify-content: flex-end;
        background:transparent;`
      );
      select.value.$el.children[0].children[0].children[0].children[0].setAttribute(
        "style",
        `display: none;`
      );
    }
  }

  // let brand = scope;
  // for (let index in stretchOptions) {
  //   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(" +
  //         aa.url +
  //         ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
  //     );
  //   }
  // }
};
//滑块变动
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) {
      layerLength.value = i;
      transparence.value = e.layerData.alpha * 100;
    }
  });
});
</script>

<style lang="less" scoped>
@@ -104,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;