对接颜色接口修改拉伸方式输入框

WX

2023-09-06 097d0344170b801771d066f66ca32767d32ee22f

对接颜色接口修改拉伸方式输入框

 src/api/api.js

@@ -74,3 +74,7 @@
export function perms_selectProjectLayers(params) {
  return request.get("/perms/selectProjectLayers", { params: params });
}
//数据管理=>分页查询数简的颜色表
export function publish_selectSjColorTables(params) {
  return request.get("/publish/selectSjColorTables", { params: params });
}

 src/assets/js/colorValue.js

@@ -4,6 +4,31 @@
    total_count: 29,
    item_list: [
      {
        data_status: 1,
        data_update_user: 1,
        data_id: 2,
        name: "默认色板",
        data_update_time: "2017-09-04 15:57:57",
        data_version: 0,
        content: {
          levels: [
            {
              b: 100,
              low: 0,
              high: 0.7,
              g: 255,
              r: 100,
            },
          ],
          default: {
            g: -1,
            b: -1,
            r: -1,
          },
          type: 0,
        },
      },
      {
        data_id: 10002901,
        data_version: 1,
        data_update_user: 1,

 src/views/layer/layerDetail.vue

@@ -35,27 +35,44 @@
      </div>
      <div class="selectBox" v-show="drawingModeShow">
        <div class="selectTile demonstration">拉伸方式</div>
        <el-select
          v-model="stretchValue"
          class="imgSelect"
          placeholder="选择拉伸方式"
          size="small"
          clearable
        >
          <el-option
            v-for="item in stretchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        <div class="stretchSelect">
          <el-select
            :teleported="false"
            v-model="stretchValue"
            class="stretchSelect"
            :class="{ imgSelect: stretchNumShow }"
            placeholder="选择拉伸方式"
            size="small"
            clearable
            @change="stretchChange"
          >
          </el-option>
        </el-select>
            <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"
          />
        </div>
      </div>
      <div class="selectBox">
      <div class="selectBox" v-show="colorShow">
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
          class="imgSelect"
          placeholder="选择渲染类型"
          size="small"
          @change="changeSelection(renderType)"
@@ -77,9 +94,7 @@
                left: 50%;
                transform: translate(-50%, -50%);
              "
              :style="{
                'background-image': `linear-gradient(to right, ${item.domCss})`,
              }"
              :style="item.domCss"
            ></div>

            <!-- <img :src="item.url" style="height: 30px; width: 100%" /> -->
@@ -100,10 +115,9 @@
  defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
import axios from "axios";
import { publish_selectSjColorTables } from "@/api/api";
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);
@@ -111,17 +125,33 @@
let layerState = ref(false);
let select = ref();
let renderType = ref("");
let renderTypeOptions = [];
let renderTypeOptions = ref([]);
let stretchOptions = [
  {
    value: "Option1",
    label: "Option1",
    value: 0,
    label: "不拉伸",
  },
  {
    value: "Option2",
    label: "Option2",
    value: 1,
    label: "线性拉伸",
  },
  {
    value: 2,
    label: "直方图均衡",
  },
  {
    value: 3,
    label: "标准差拉伸",
  },
  {
    value: 4,
    label: "伽马拉伸",
  },
];
let stretchNum = ref(0);
let stretchMin = ref(0);
let stretchMax = ref(0);
let stretchNumShow = ref(false);
const formatTooltip = (val: number) => {
  return val / 100;
};
@@ -137,17 +167,42 @@
const setSpatialClose = () => {
  emits("detailClose", false);
};

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);
  const dt = await publish_selectSjColorTables({
    pageIndex: 1,
    pageSize: 1000,
  });
  console.log(renderTypeOptions);
  renderTypeOptions.value = dt.result.item_list;

  renderTypeOptions.value.forEach((e) => {
    let css = "";
    let css1 = "";
    e.content.levels.forEach((v) => {
      if ("r_start" in v) {
        console.log(v.r_start);
        css += `rgb(${v.r_start}, ${v.g_start}, ${v.b_start}),rgb(${v.r_end}, ${v.g_end}, ${v.b_end}),`;
      } else if ("r" in v) {
        css1 += `rgb(${v.r}, ${v.g}, ${v.b}),`;
      }
    });

    let cssColor = `${css1}${css}`;
    let cssStr = "";

    if (cssColor.length == 19) {
      cssStr = `background: ${cssColor.slice(0, -1)}`;
    } else {
      cssStr = `background-image:linear-gradient(to right, ${cssColor.slice(
        0,
        -1
      )})`;
    }
    e.domCss = cssStr;
  });
  // console.log(renderTypeOptions.value);
};

const changeSelection = (scope) => {
  if (scope == "") {
    select.value.$el.children[0].children[0].removeAttribute("style");
@@ -243,6 +298,41 @@
    colorShow.value = true;
  }
};
//拉伸选择
const stretchChange = (val) => {
  console.log(val);
  if (val == 0) {
    stretchNumShow.value = false;
    stretchNum.value = 0;
    stretchMin.value = 0;
    stretchMax.value = 0;
  } else if (val == 1) {
    stretchNumShow.value = true;
    //1 线性拉伸
    stretchNum.value = 0.02;
    stretchMin.value = 0;
    stretchMax.value = 0.05;
  } else if (val == 2) {
    stretchNumShow.value = false;
    //1 直方图均衡
    stretchNum.value = 0;
    stretchMin.value = 0;
    stretchMax.value = 0;
  } else if (val == 3) {
    stretchNumShow.value = true;
    //1 标准差拉伸
    stretchNum.value = 0.02;
    stretchMin.value = 0;
    stretchMax.value = 0.05;
  } else if (val == 4) {
    stretchNumShow.value = true;
    //1 伽马拉伸
    stretchNum.value = 0.6;
    stretchMin.value = 0.1;
    stretchMax.value = 1.6;
  }
};
const stretchNumChange = (val) => {};
onMounted(() => {
  typeDisplay(props.layerData);
  server.layerList.forEach((e, i) => {
@@ -340,4 +430,23 @@
/deep/.el-select-dropdown__item {
  font-size: 12px !important;
}
.stretchSelect {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .stretchSelect {
    width: 100%;
  }
  .imgSelect {
    width: 60%;
  }
  span {
    color: #fff;
    margin: 0 10px;
  }
  .stretchNum {
    width: 30%;
  }
}
</style>