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

Surpriseplus

2023-09-12 1a7ac5cfe27a7631966f45c2b45cc9114b501852

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

 src/api/api.js

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

 src/assets/lang/en.js

@@ -247,7 +247,8 @@
      labe15: 'Stretching method',
      labe16: 'Coordinate System',
      labe17: 'Stretching factor',

      labe18: 'Render Type',
      labe19: 'Color Table Type'
    },
    dictionaryManage: 'dictionaryManage',
    dictionaryManageObj: {

 src/assets/lang/zh.js

@@ -240,6 +240,8 @@
      labe15: '拉伸方式',
      labe16: '坐标系',
      labe17: '拉伸因子',
      labe18: '渲染类型',
      labe19: '颜色表类型'
    },
    dictionaryManage: '字典管理',
    dictionaryManageObj: {

 src/components/js/server.js

@@ -211,7 +211,6 @@
    setAddTearrinLayer(res) {
        window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
        var url = this.getLayerUrl(res)
        debugger
        window.terrainLayer = new Cesium.CesiumTerrainProvider({
            url: url,
            tilingScheme: new Cesium.GeographicTilingScheme({

 src/views/datamanage/uploadmanage.vue

@@ -511,7 +511,7 @@
            </el-select>

          </el-form-item>
          <!-- 坐标系 -->
          <!-- 拉伸因子 -->
          <el-form-item
            v-show="insertLayer.showFactor"
            :label="$t('dataManage.vmobj.labe17')"
@@ -526,6 +526,58 @@
              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
@@ -668,6 +720,7 @@
  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';
@@ -736,7 +789,23 @@
      serverOption: [],
      enhanceOption: [],
      epsgOption: [],
      noDataOption: []
      noDataOption: [],
      renderType: null,
      renderTypeOptions: [],
      colorTableType: null,
      colorTableOptions: [
        {
          value: 2,
          label: "请选择颜色表",
        },
        {
          value: 0,
          label: "普通颜色表",
        },
        {
          value: 1,
          label: "直方图均衡",
        }]
    }
  },
  methods: {
@@ -840,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,
@@ -904,6 +994,9 @@
      } else {
        this.insertLayer.showFactor = false;
      }
      this.colorTableType = 2;
      this.renderType = null;
      this.insertLayer.name = this.multipleSelection[0].name
      this.insertDialogVisible = true;

    },
@@ -1284,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';
@@ -1291,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();