选择色块

WX

2023-09-04 28271e1804695c5081727c629c3644876f1dd6e5

 src/views/layer/layerDetail.vue

@@ -1,15 +1,8 @@
<template>
  <div
    class="content"
    v-drag="true"
  >
  <div class="content" v-drag="true">
    <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>
@@ -19,15 +12,9 @@
          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"
        v-show="diaphaneityShow"
      >
      <div class="slider-demo-block" v-show="diaphaneityShow">
        <div class="demonstration">透明度</div>
        <el-slider
          v-model="transparence"
@@ -36,10 +23,7 @@
        />
        <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"
@@ -49,10 +33,7 @@
        />
        <div class="demonstration">{{ contrast }}</div>
      </div>
      <div
        class="selectBox"
        v-show="drawingModeShow"
      >
      <div class="selectBox" v-show="drawingModeShow">
        <div class="selectTile demonstration">拉伸方式</div>
        <el-select
          v-model="stretchValue"
@@ -70,10 +51,7 @@
          </el-option>
        </el-select>
      </div>
      <div
        class="selectBox"
        v-show="colorShow"
      >
      <div class="selectBox">
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
@@ -85,18 +63,26 @@
          clearable
        >
          <el-option
            v-for="item in renderTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="(item, i) in renderTypeOptions"
            :key="i"
            :label="item.data_id"
            :value="item.name"
          >
            <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span> -->
            <div
              style="
                height: 30px;
                width: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
              :style="{
                'background-image': `linear-gradient(to right, ${item.domCss})`,
              }"
            ></div>

            <img
              :src="item.url"
              style="height: 30px; width: 100%"
            />
            <!-- <img :src="item.url" style="height: 30px; width: 100%" /> -->
          </el-option>
        </el-select>
      </div>
@@ -114,6 +100,10 @@
  defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
import axios from "axios";
import json from "@/assets/js/colorValue";
// const colorValue = "@/assets/js/colorValue.json";
// console.log(colorValue);
const stretchValue = ref("");
const transparence = ref(0);
const contrast = ref(1);
@@ -121,19 +111,8 @@
let layerState = ref(false);
let select = ref();
let renderType = ref("");
const renderTypeOptions = [
  {
    value: "Option1",
    label: "Option1",
    url: "https://img2.baidu.com/it/u=3727554264,855092936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    value: "Option2",
    label: "Option2",
    url: "https://img1.baidu.com/it/u=3226786080,888437008&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
  },
];
const stretchOptions = [
let renderTypeOptions = [];
let stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
@@ -158,7 +137,17 @@
const setSpatialClose = () => {
  emits("detailClose", false);
};
const handlCheckAllChange = (res) => {};
const getColorJson = async () => {
  renderTypeOptions = json.result.item_list;
  renderTypeOptions.forEach((e) => {
    let css = "";
    e.content.levels.forEach((v) => {
      css += `rgb(${v.r_start}, ${v.g_start}, ${v.b_start}),`;
    });
    e.domCss = css.slice(0, -1);
  });
  console.log(renderTypeOptions);
};
const changeSelection = (scope) => {
  if (scope == "") {
    select.value.$el.children[0].children[0].removeAttribute("style");
@@ -172,14 +161,21 @@
  }
  for (let index in renderTypeOptions) {
    let obj = renderTypeOptions[index];
    if (obj.value == scope) {
    if (obj.name == scope) {
      // select.value.$el.children[0].children[0].setAttribute(
      //   "style",
      //   `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].setAttribute(
        "style",
        `background: url(${obj.url}) no-repeat;
        `background-image: linear-gradient(to right,${obj.domCss});
            width: 100%; height: 100%;
            border: none;
            height: 33px;
            background-size:100% 100%`
            height: 33px;`
      );
      select.value.$el.children[0].children[0].children[0].setAttribute(
        "style",
@@ -256,6 +252,7 @@
    }
  });
});
getColorJson();
</script>

<style lang="less" scoped>