PM20230220027_Web.git

<template>
  <div class="content">
    <div class="title">
      <label>{{ layerData.cnName }}</label>
      <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
        <Close />
      </el-icon>
    </div>
    <div class="layer_box">
      <!--  <div class="check_box">
        
    {{ layerData.cnName }}
    <img
      src="../../assets/img/layer.png"
      alt=""
    />
      </div>-->
      <div class="slider-demo-block" v-show="diaphaneityShow">
        <div class="demonstration">透明度</div>
        <el-slider v-model="transparence" @change="sliderChange" :format-tooltip="formatTooltip" />
        <div class="demonstration">{{ transparence }}%</div>
      </div>
      <div class="slider-demo-block" v-show="contrastShow">
        <div class="demonstration">对比度</div>
        <el-slider v-model="contrast" @change="contrastChange" :max="3" :step="0.1" />
        <div class="demonstration">{{ contrast }}</div>
      </div>
      <div class="selectBox" v-show="drawingModeShow">
        <div class="selectTile demonstration">拉伸方式</div>
        <div class="stretchSelect">
          <el-select
            :teleported="false"
            v-model="stretchValue"
            class="stretchSelect"
            :class="{ imgSelect: stretchNumShow }"
            placeholder="选择拉伸方式"
            size="small"
            clearable
            @change="stretchChange"
          >
            <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"
        v-show="colorShow"
      >
        <div class="selectTile demonstration">颜色表类型</div>
        <el-select
          size="small"
          placeholder="请选择颜色表"
          v-model="colorTableType"
        >
          <el-option
            v-for="(item, i) in colorTableOptions"
            :key="i"
            :label="item.label"
            :value="item.value"
          ></el-option>
 
        </el-select>
      </div>-->
      <!-- <div
        class="selectBox"
        v-show="colorShow "
      >
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
          placeholder="选择渲染类型"
          size="small"
          @change="changeSelection(renderType)"
          ref="select"
          clearable
        >
          <el-option
            v-for="(item, i) in renderTypeOptions"
            :key="i"
            :label="item.name"
            :value="item.name"
          >
            <div
              style="
                height: 30px;
                width: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
              :style="item.domCss"
            ></div>
 
         
          </el-option>
        </el-select>
      </div>-->
      <div v-show="colorShow">
        <div class="selectBox">
          <el-button size="small" type="primary" @click="setColorLayerRelease">确认</el-button>
          <el-button size="small" @click="setSpatialClose">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
import {
  publish_selectSjColorTables,
  publish_updateSjService,
  publish_updateSjLayerStretch,
} from "@/api/api";
import { ElMessage } from "element-plus";
import store from "@/store";
import json from "@/assets/js/colorValue";
import { fa } from "element-plus/es/locale";
import { Edit } from "@element-plus/icons-vue/dist/types";
 
const stretchValue = ref("");
const transparence = ref(0);
const contrast = ref(1);
let layerName = ref("图层名称");
let layerState = ref(false);
const releaseLayer = ref(null);
let select = ref();
let renderType = ref("");
let renderTypeOptions = ref([]);
const tempLayer = ref(true);
const groupsId = ref([]);
let stretchOptions = [
  {
    value: 0,
    label: "不拉伸",
  },
  {
    value: 1,
    label: "线性拉伸",
  },
  {
    value: 2,
    label: "直方图均衡",
  },
  {
    value: 3,
    label: "标准差拉伸",
  },
  {
    value: 4,
    label: "伽马拉伸",
  },
];
let colorTableOptions = [
  {
    value: 2,
    label: "请选择颜色表",
  },
  {
    value: 0,
    label: "普通颜色表",
  },
  {
    value: 1,
    label: "直方图均衡",
  },
];
let stretchNum = ref(0);
let stretchMin = ref(0);
let stretchMax = ref(0);
let colorTableType = ref(colorTableOptions[0].value);
let stretchNumShow = ref(false);
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 = () => {
  var type = 1;
  var val = 1;
  if (tempLayer.value) {
    type = 0;
    val = (transparence.value / 100).toFixed(2);
  }
  emits("detailClose", {
    flag: false,
    type: type,
    val: val,
  });
};
 
const getColorJson = async () => {
  const dt = await publish_selectSjColorTables({
    pageIndex: 1,
    pageSize: 100000,
  });
  renderTypeOptions.value = dt.result.item_list;
 
  renderTypeOptions.value.forEach((e) => {
    let css = "";
    let css1 = "";
    e.content.levels.forEach((v) => {
      if ("r_start" in v) {
        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;
  });
 
};
 
const changeSelection = (scope) => {
  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.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-image: linear-gradient(to right,${obj.domCss});
            width: 100%; height: 100%;
            border: none;
            height: 33px;`
      );
      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) {
 
  //     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) => {
  if (tempLayer.value) {
    for (var i in groupsId.value) {
      server.layerList[groupsId.value[i]].layerData.alpha = (val / 100).toFixed(
        2
      );
    }
  } else {
    var data = server.layerList[layerLength.value];
    data.layerData.alpha = val / 100;
  }
};
const contrastChange = (val) => {
  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.isLayer == 0) {
    contrastShow.value = false;
  }
  if (val.data == 3 || val.data == 4) {
    colorShow.value = true;
  }
};
//拉伸选择
const stretchChange = (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) => {};
const setColorLayerRelease = async () => {
  var color1 = null;
  var color2 = null;
  var level = null;
  var val_data = [];
 
  for (var i in renderTypeOptions.value) {
    if (renderTypeOptions.value[i].name == renderType.value) {
      val_data.push(renderTypeOptions.value[i].content.levels);
    }
  }
  if (val_data.length > 0) {
    level = val_data[0];
  }
 
  if (colorTableType.value == 0) {
    color1 = level;
  } else if (colorTableType.value == 1) {
    color2 = level;
  }
  var geom = "null";
  if (releaseLayer.value.geom) {
    geom = releaseLayer.value.geom;
  }
  var obj = {
    // colorTable: color1, // 普通颜色表，可不设
    // gradientColorTable: color2,
    enhanceType: stretchValue.value, // 拉伸方式 0：不拉伸，1 线性拉伸，2 直方图均衡，3 标准差拉伸，4 伽马拉伸
    enhanceFactor: stretchNum.value, // 拉伸因子 null 或 小数
    // dircode: "00", // 目录编码
    // epsg: 104903, // 104903-月球2000，4326-WGS84
    layerId: releaseLayer.value.id, // 不要设定
    // name: releaseLayer.value.cnName, // 当前服务名称
    // nodata: 0, // 黑色-0，白色-255
    // type: releaseLayer.value.type, // 影像-DOM，高程-
    // geom: geom,
    // pubid: releaseLayer.value.pubid,
  };
  store.state.loading = true;
  publish_updateSjLayerStretch(obj).then((res) => {
    if (res.code != 200) {
      return ElMessage(data.msg);
    }
    if (res.code == 200 && res.result > 0) {
      store.state.loading = false;
      store.state.restLayer = true;
      setSpatialClose();
    } else {
      store.state.loading = false;
    }
  });
 
};
const setRestGeoLayer = (res) => {
  var data = server.getGeoLayerChangeAlpha(res);
  layerLength.value = parseInt(data.id);
  var alpha = data.layer.layerData.alpha ? data.layer.layerData.alpha : 1;
  transparence.value = parseInt(alpha * 100);
};
onMounted(() => {
  typeDisplay(props.layerData);
  if (props.layerData.isLayer == 0) {
    //图层组透明度
    tempLayer.value = true;
    transparence.value = props.layerData.alpha * 100;
    var ids = store.state.layerGroups.layerIds;
    var std = [];
    for (var i in ids) {
      std.push(ids[i].id);
    }
    var checkId = [];
    server.layerList.forEach((e, i) => {
      for (var j in std) {
        if (std[j] == e.id) {
          checkId.push(e.id);
          groupsId.value.push(i);
        }
      }
    });
    for (var i in checkId) {
      if (std.indexOf(checkId[i]) > -1) {
        std = std.splice(checkId[i], i);
      }
    }
    if (std.length > 0) {
      for (var i in std) {
        for (var j in ids) {
          if (std[i] == ids[j].id) {
            var data = server.getGeoLayerChangeAlpha(ids[j]);
            groupsId.value.push(parseInt(data.id));
          }
        }
      }
    }
  } else if (props.layerData.isLayer == 1) {
    tempLayer.value = false;
    var val = server.layerList.filter((e) => {
      if (props.layerData.id == e.id && e.layerData) {
        return e;
      }
    });
    if (val.length > 0) {
      server.layerList.forEach((e, i) => {
        if (props.layerData.id == e.id && e.layerData) {
          layerLength.value = i;
          var alpha = e.layerData.alpha ? e.layerData.alpha : 0;
          transparence.value = parseInt(alpha * 100);
        }
      });
    
      releaseLayer.value = props.layerData;
      if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) {
        drawingModeShow.value = true;
        colorShow.value = true;
      }
    } else {
      setRestGeoLayer(props.layerData);
    }
  }
});
// getColorJson();
</script>
 
<style lang="less" scoped>
.content {
  padding: 20px;
  // height: 400px;
  min-width: 300px;
  margin-left: 370px;
  margin-top: 40px;
 
  z-index: 40;
  position: absolute;
  background: rgba(7, 8, 14, 0.8);
  border: 1px solid #d6e4ff;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
 
  .title {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
 
  .layer_box {
    margin-top: 10px;
  }
}
 
.check_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 50px;
  padding-top: 10px;
  font-size: 16px;
  color: #ffffff;
 
  img {
    width: 22px;
    height: 19px;
  }
}
 
.check_box .el-checkbox {
  font-size: 16px;
  color: #ffffff;
}
 
.check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: rgba(13, 255, 0, 1);
  border-color: rgba(41, 109, 255, 1);
}
 
.check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}
 
.slider-demo-block {
  margin-top: 22px;
}
 
.demonstration {
  font-size: 12px;
  font-weight: 300;
  color: #d6e4ff;
}
 
/deep/ .el-slider__runway {
  height: 2px;
 
  background: #73a1fa;
}
 
/deep/ .el-slider__bar {
  height: 2px;
 
  background: #73a1fa;
}
 
/deep/ .el-slider__button {
  width: 17px;
  height: 18px;
  border: 0;
  background: url("../../assets/img/DBX.png") no-repeat center;
  background-size: 100% 100%;
  border-radius: 0;
}
 
.selectBox {
  margin-top: 24px;
 
  .selectTile {
    padding-bottom: 6px;
  }
 
  .el-select {
    width: 100%;
  }
}
 
/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>