发布管理添加颜色列表选择

Surpriseplus

2023-09-12 1a7ac5cfe27a7631966f45c2b45cc9114b501852

 src/views/datamanage/uploadmanage.vue

@@ -103,6 +103,7 @@
            size="small"
            v-model="formInline.type"
            @change="handleTypeChange"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.selectDataType')"
          >
            <el-option
              v-for="item in typeOption"
@@ -510,7 +511,7 @@
            </el-select>

          </el-form-item>
          <!-- 坐标系 -->
          <!-- 拉伸因子 -->
          <el-form-item
            v-show="insertLayer.showFactor"
            :label="$t('dataManage.vmobj.labe17')"
@@ -521,9 +522,62 @@
              :min="insertLayer.min"
              :step="insertLayer.step"
              :max="insertLayer.max"
              class="setEnhanceFactor"
              style="width: 100%;"
            ></el-input-number>
          </el-form-item>

          <el-form-item :label="$t('dataManage.vmobj.labe19')">
            <el-select
              size="small"
              placeholder="请选择颜色表"
              v-model="colorTableType"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, i) in colorTableOptions"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>

            </el-select>
          </el-form-item>
          <!-- 颜色表 -->
          <el-form-item
            v-show="colorTableType != 2"
            :label="$t('dataManage.vmobj.labe18')"
          >
            <el-select
              v-model="renderType"
              placeholder="请选择渲染类型"
              size="small"
              @change="changeSelection(renderType)"
              ref="selectColor"
              style="width: 100%;"
              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>
          </el-form-item>

          <!-- 坐标系 -->
          <el-form-item :label="$t('dataManage.vmobj.labe16')">
            <el-select
@@ -666,10 +720,11 @@
  publish_deletesSjServices,
  publish_update,
  publish_insertSjService,
  publish_selectSjColorTables
} from '../../api/api.js'
import { conditions } from '../Archive/Archive';
import { method_option, nodata_Option, server_option, system_Option, type_option } from './js/layerManage';

import server from '../../components/js/server.js'
export default {
  components: {
    MyBread, mapview,
@@ -734,7 +789,23 @@
      serverOption: [],
      enhanceOption: [],
      epsgOption: [],
      noDataOption: []
      noDataOption: [],
      renderType: null,
      renderTypeOptions: [],
      colorTableType: null,
      colorTableOptions: [
        {
          value: 2,
          label: "请选择颜色表",
        },
        {
          value: 0,
          label: "普通颜色表",
        },
        {
          value: 1,
          label: "直方图均衡",
        }]
    }
  },
  methods: {
@@ -838,7 +909,28 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id)
      }
      var color1 = null;
      var color2 = null;
      var level = null;
      var val_data = [];

      for (var i in this.renderTypeOptions) {
        if (this.renderTypeOptions[i].name == this.renderType.value) {
          val_data.push(this.renderTypeOptions[i].content.levels);
        }
      }
      if (val_data.length > 0) {
        level = val_data[0];
      }

      if (this.colorTableType == 0) {
        color1 = level;
      } else if (this.colorTableType == 1) {
        color2 = level;
      }
      var obj = {
        colorTable: color1, // 普通颜色表，可不设
        gradientColorTable: color2,
        dircode: this.formInline.dirid,
        name: name,
        ids: std,
@@ -902,6 +994,9 @@
      } else {
        this.insertLayer.showFactor = false;
      }
      this.colorTableType = 2;
      this.renderType = null;
      this.insertLayer.name = this.multipleSelection[0].name
      this.insertDialogVisible = true;

    },
@@ -997,8 +1092,14 @@
    //预览弹窗打开
    setPreviewLayer(res) {
      this.$store.state.previewLayer = res;

      this.dialogVisible = true;
      this.showMapView = true;


      setTimeout(() => {
        server.setAddReleaseLayer(res)
      }, 500);
    },
    //是否为全屏函数
    onFullscreen(fullscreen) {
@@ -1097,6 +1198,7 @@
          count: 0
        }
        this.showPageSize = [10, 50, 100, 200]
        this.formInline.type = this.typeOption[0].value;
      } else {
        this.listData = {
          pageIndex: 1,
@@ -1104,10 +1206,11 @@
          count: 0
        }
        this.showPageSize = [10, 50, 100, 200]
        this.formInline.type = null
      }

      this.formInline.serType = this.serverOption[0].value;
      this.formInline.type = this.typeOption[0].value;

      // this.getDepTreeList();
      this.getDirTreeList();

@@ -1274,6 +1377,74 @@
        return father.pid == 0 // 返回一级菜单
      })
    },
    async getColorJson() {
      var dt = await publish_selectSjColorTables({
        pageIndex: 1,
        pageSize: 100000,
      });

      if (!dt.result) return
      this.renderTypeOptions = dt.result.item_list;

      this.renderTypeOptions.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;
      });
    },
    changeSelection(scope) {
      // if (scope == "") {
      //   this.$refs.selectColor.$el.children[0].children[0].removeAttribute("style");
      //   this.$refs.selectColor.$el.children[0].children[0].children[0].removeAttribute(
      //     "style"
      //   );
      //   this.$refs.selectColor.$el.children[0].children[0].children[0].children[0].removeAttribute(
      //     "style"
      //   );
      //   return;
      // }
      // for (let index in this.renderTypeOptions) {
      //   let obj = this.renderTypeOptions[index];
      //   if (obj.name == scope) {
      //     this.$refs.selectColor.$el.children[0].children[0].setAttribute(
      //       "style",
      //       `background-image: linear-gradient(to right,${obj.domCss});
      //       width: 100%; height: 100%;
      //       border: none;
      //       height: 33px;`
      //     );
      //     this.$refs.selectColor.$el.children[0].children[0].children[0].setAttribute(
      //       "style",
      //       `display: flex;
      //     justify-content: flex-end;
      //     background:transparent;`
      //     );
      //     this.$refs.selectColor.$el.children[0].children[0].children[0].children[0].setAttribute(
      //       "style",
      //       `display: none;`
      //     );
      //   }
      // }
    }
  },
  mounted() {
    this.active = 'first';
@@ -1281,7 +1452,8 @@
    this.serverOption = server_option;
    this.epsgOption = system_Option;
    this.noDataOption = nodata_Option;
    this.enhanceOption = method_option
    this.enhanceOption = method_option;
    this.getColorJson()
    this.setPageStart();
    this.setOptions();

@@ -1358,14 +1530,6 @@
  }
  /deep/.el-dialog__header {
    padding: 10px !important;
  }
  /deep/.el-input-number__increase,
  .el-input-number__decrease {
    background: transparent !important;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    background: transparent !important;
  }
}
.elTreeData {