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

Surpriseplus

2023-09-12 1a7ac5cfe27a7631966f45c2b45cc9114b501852

 src/views/datamanage/uploadmanage.vue

@@ -30,17 +30,7 @@
          <span> {{$t('dataManage.uploadObj.releaseList')}}</span>
        </div>
      </div>
      <div
        class="tabs_pane"
        @click="setTabsChange(3)"
      >
        <div
          class="tabsSpan"
          :class="{ changetabs : active == 'third'}"
        >
          <span> {{$t('dataManage.uploadObj.modelAttachMount')}}</span>
        </div>
      </div>

    </div>
    <div
      v-if="active != 'third'"
@@ -51,39 +41,22 @@
        :model="formInline"
        class="demo-form-inline"
      >
        <!-- 单位 -->
        <el-form-item v-if="active == 'first'">
          <el-select
            size="small"
            v-model="formInline.depid"
          >
            <el-option
              :value="formInline.depid"
              :label="formInline.depName"
              style="height: auto"
            >
              <el-tree
                ref="tree"
                :data="depOption"
                node-key="id"
                :props="defaultProps"
                @node-click="handleDepChange"
              />
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item v-if="active == 'first'">
        <el-form-item>

          <el-select
            ref="tree"
            size="small"
            :popper-append-to-body="false"
            v-model="formInline.dirid"
          >
            <el-option
              :value="formInline.dirid"
              :label="formInline.dirName"
              style="height: auto"
              style=" height:auto"
            >
              <el-tree
                class="elTreeData"
                ref="tree"
                :data="dirOption"
                node-key="id"
@@ -109,11 +82,28 @@
          </el-select>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item v-if="active == 'first'">
        <el-form-item>
          <el-select
            size="small"
            v-model="formInline.serType"
            @change="handleTypeChange"
          >
            <el-option
              v-for="item in serverOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item>
          <el-select
            size="small"
            v-model="formInline.type"
            @change="handleTypeChange"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.selectDataType')"
          >
            <el-option
              v-for="item in typeOption"
@@ -208,12 +198,7 @@
            align="center"
            key="5"
          />
          <el-table-column
            prop="depName"
            :label="$t('dataManage.vmobj.depName')"
            align="center"
            key="6"
          />

          <el-table-column
            prop="dirName"
            :label="$t('dataManage.vmobj.dirName')"
@@ -327,12 +312,7 @@
        </el-pagination>
      </div>
    </div>
    <div
      v-if="active == 'third'"
      class="content_box"
    >
      <mapview v-if="active == 'third'"></mapview>
    </div>

    <!-- 地址预览 -->
    <el-dialog
      :title="$t('common.preview')"
@@ -357,23 +337,7 @@
        <mapview v-if="showMapView"></mapview>
      </div>
    </el-dialog>
    <!-- <el-dialog
      :title="$t('common.preview')"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      top="13vh"
      :lock-scroll="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      v-el-drag-dialog
    >
      <div
        id="MapDiv"
        style="background:red;widht:100%;height:calc(100% - 10px)"
      ></div>
     
    </el-dialog> -->

    <!-- 修改数据 -->
    <el-dialog
      :title="$t('common.update')"
@@ -382,43 +346,86 @@
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div style="width:100%;height:50vh">
      <div style="width:100%; ">
        <el-form
          ref="form"
          :model="editLayer"
          label-width="150px"
        >
          <!-- 名称 -->
          <el-form-item :label="$t('dataManage.vmobj.name')">
            <el-input v-model="editLayer.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.format')">
            <el-input
              disabled
              v-model="editLayer.type"
              v-model="editLayer.name"
              :placeholder="$t('dataManage.vmobj.name')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.depName')">
            <el-input
              disabled
              v-model="editLayer.depName"
            ></el-input>
          </el-form-item>
          <!-- 拉伸方式 -->
          <el-form-item :label="$t('dataManage.vmobj.labe15')">
            <el-select
              size="small"
              :disabled="true"
              v-model="editLayer.enhanceType"
              style="width: 100%;"
            >
              <el-option
                v-for="item in enhanceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

          <el-form-item :label="$t('dataManage.vmobj.dirName')">
          </el-form-item>
          <!-- 坐标系 -->
          <!-- <el-form-item
            v-show="editLayer.showFactor"
            :label="$t('dataManage.vmobj.labe17')"
          >
           
            <el-input
              disabled
              v-model="editLayer.dirName"
            ></el-input>
              style="width: 100%;"
              v-model="editLayer.url"
              :disabled='true'
              size="small"
            >

            </el-input>
          </el-form-item> -->
          <!-- 坐标系 -->
          <el-form-item :label="$t('dataManage.vmobj.labe16')">
            <el-select
              size="small"
              v-model="editLayer.epsg"
              style="width: 100%;"
              :disabled="true"
            >
              <el-option
                v-for="item in epsgOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.versionNumber')">
            <el-input
              disabled
              v-model="editLayer.verName"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.publishAddress')">
            <el-input v-model="editLayer.url"></el-input>
          </el-form-item>
          <!-- 去除无效值 -->
          <!-- <el-form-item :label="$t('dataManage.vmobj.labe14')">
            <el-select
              size="small"
              v-model="editLayer.nodata"
              style="width: 100%;"
              :disabled="true"
            >
              <el-option
                v-for="item in noDataOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button
              size="small"
@@ -431,6 +438,7 @@
              @click="setEditLayerCancle"
            >{{$t('common.cancel')}}</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-dialog>
@@ -441,7 +449,7 @@
      width="50%"
      :close-on-click-modal="false"
    >
      <div style="width:100%;height:50vh">
      <div style="width:100%;height:50vh;color: white;">
        <p>{{ $t("dataManage.vmobj.name") }}：{{ itemdetail.name }}</p>
        <el-divider></el-divider>
        <p>{{ $t("dataManage.vmobj.format") }}：{{ itemdetail.type }}</p>
@@ -478,51 +486,107 @@
          :model="insertLayer"
          label-width="150px"
        >
          <!-- 名称 -->
          <el-form-item :label="$t('dataManage.vmobj.name')">
            <el-input
              v-model="insertLayer.name"
              :placeholder="$t('dataManage.vmobj.name')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('dataManage.vmobj.numberFiles')">
            <el-input
              disabled
              v-model="insertLayer.number"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.vmobj.labe14')"
            v-show="formInline.type =='DOM'"
          >
          <!-- 拉伸方式 -->
          <el-form-item :label="$t('dataManage.vmobj.labe15')">
            <el-select
              style="width:100%"
              v-model="insertLayer.noData"
              size="small"
              v-model="insertLayer.enhanceType"
              style="width: 100%;"
              @change="setEnhanceTypeChange()"
            >
              <el-option
                label="黑色"
                value="0"
              ></el-option>
                v-for="item in enhanceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

          </el-form-item>
          <!-- 拉伸因子 -->
          <el-form-item
            v-show="insertLayer.showFactor"
            :label="$t('dataManage.vmobj.labe17')"
          >
            <el-input-number
              v-model="insertLayer.enhanceFactor"
              controls-position="right"
              :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
                label="白色"
                value="255"
                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="formInline.type !='DEM'"
            :label="$t('dataManage.vmobj.minLevel')"
            v-show="colorTableType != 2"
            :label="$t('dataManage.vmobj.labe18')"
          >
            <!-- <el-input
              v-model="insertLayer.min"
              :placeholder="$t('dataManage.vmobj.labe11')"
            ></el-input> -->
            <el-select
              style="width:100%"
              v-model="insertLayer.min"
              :placeholder="$t('dataManage.vmobj.labe11')"
              v-model="renderType"
              placeholder="请选择渲染类型"
              size="small"
              @change="changeSelection(renderType)"
              ref="selectColor"
              style="width: 100%;"
              clearable
            >
              <el-option
                v-for="item in options"
                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
              size="small"
              v-model="insertLayer.epsg"
              style="width: 100%;"
            >
              <el-option
                v-for="item in epsgOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
@@ -530,21 +594,15 @@
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('dataManage.vmobj.maxLevel')"
            v-show="formInline.type !='DEM'"
          >
            <!-- <el-input
              v-model="insertLayer.max"
              :placeholder="$t('dataManage.vmobj.labe12')"
            ></el-input> -->
          <!-- 去除无效值 -->
          <el-form-item :label="$t('dataManage.vmobj.labe14')">
            <el-select
              style="width:100%"
              v-model="insertLayer.max"
              :placeholder="$t('dataManage.vmobj.labe12')"
              size="small"
              v-model="insertLayer.nodata"
              style="width: 100%;"
            >
              <el-option
                v-for="item in options"
                v-for="item in noDataOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
@@ -649,9 +707,9 @@
</template>

<script>
import axios from 'axios';

import dialogHeader from './dialogHeader.vue'
import mapview from '../../components/preview_map.vue'
import mapview from '../../components/MapView/moonMap.vue'
import MyBread from "../../components/MyBread.vue"
import {
  selectdepTab,
@@ -659,12 +717,14 @@
  meta_selectVerByDirid,
  publish_selectMetasByPage,
  publish_selectByPage,
  publish_deletes,
  publish_deletesSjServices,
  publish_update,
  publish_insert,
  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,
@@ -680,7 +740,9 @@
        verid: null,
        depName: null,
        name: "",
        type: ""
        type: "",
        serType: '',

      },
      listData: {
        pageIndex: 1,
@@ -693,25 +755,7 @@
      dirOption: [],
      verOption: [],
      modelOptions: [],
      typeOption: [{
        value: 'DOM',
        label: '影像数据(.tif, .img)'
      }, {
        value: 'DEM',
        label: '高程数据(.tif)'
      }, {
        value: 'MPT',
        label: '场景数据(.mpt)'
      }, {
        value: 'CPT',
        label: '点云数据(.cpt)'
      }, {
        value: '3DML',
        label: '三维模型(.3dml)'
      }, {
        value: 'BIM',
        label: '三维模型(.fbx, .ifc, .rvt)'
      }],
      typeOption: [],
      defaultProps: {
        label: "name",
        value: "id",
@@ -722,17 +766,46 @@
      dialogVisible: false,
      showMapView: false,
      showPageSize: [],
      editLayer: {},
      editLayer: {
        enhanceType: null
      },
      updateLayer: {},
      editDialogVisible: false,
      detailsDialogVisible: false,
      itemdetail: {},
      insertDialogVisible: false,
      insertModelVisible: false,
      insertLayer: { name: '', number: null, min: 4, max: 18, noData: '0' },
      insertLayer: {
        name: '',
        enhanceType: null,
        enhanceFactor: null,
        showFactor: false,
        epsg: null,
        nodata: null
      },
      loadDialogVisible: false,
      options: [],
      isFullscreen: false,
      serverOption: [],
      enhanceOption: [],
      epsgOption: [],
      noDataOption: [],
      renderType: null,
      renderTypeOptions: [],
      colorTableType: null,
      colorTableOptions: [
        {
          value: 2,
          label: "请选择颜色表",
        },
        {
          value: 0,
          label: "普通颜色表",
        },
        {
          value: 1,
          label: "直方图均衡",
        }]
    }
  },
  methods: {
@@ -816,57 +889,62 @@
    },
    setinsertLayerCancel() {
      this.insertDialogVisible = false;
      this.insertLayer = { name: '', number: null, min: 4, max: 18 };
      this.insertLayer = {
        name: '',
        enhanceType: null,
        enhanceFactor: null,
        showFactor: false,
        epsg: null,
        nodata: null
      };
    },
    //发布提交
    async setinsertLayerSubmit() {

      var min = this.insertLayer.min;
      var max = this.insertLayer.max;
      var name = this.insertLayer.name;
      if (this.formInline.type == 'DEM') {
        min = 0;
        max = 18;
      }
      if (!name) {
        this.$message.error("名称不能为空")
        return
      }


      if (parseInt(min) < 0 || parseInt(min) > 20) {
        this.$message.error("最小级别不能小于 0 或大于 20 ")
        return
      }


      if (parseInt(max) < 0 || parseInt(max) > 20) {
        this.$message.error(" 最大级别不能小于 0 或大于 20 ")
        return
      }

      if (parseInt(min) > parseInt(max)) {
        this.$message.error("最小级别不得大于最大级别")
        return
      }
      var std = [];
      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,
        depcode: this.formInline.depid,
        min: min,
        max: max,
        name: name,
        ids: std,
        enhanceType: this.insertLayer.enhanceType,
        enhanceFactor: this.insertLayer.enhanceFactor,
        epsg: this.insertLayer.epsg,
        type: this.formInline.type,
        noData: this.insertLayer.noData
        noData: this.insertLayer.nodata
      }

      this.loadDialogVisible = true
      this.insertDialogVisible = false;

      const data = await publish_insert(obj);
      const data = await publish_insertSjService(obj);

      if (data.code == 200 && data.result > 0) {
        this.$message({
@@ -879,59 +957,48 @@
      this.loadDialogVisible = false
      this.getTableData();
    },
    setEnhanceTypeChange(res) {
      var val = this.enhanceOption.filter((res) => {
        if (res.value == this.insertLayer.enhanceType) {
          return res;
        }
      })

      this.insertLayer.enhanceFactor = val[0].enhanceFactor;
      if (val[0].enhanceFactor != 0) {
        this.insertLayer.min = val[0].min;
        this.insertLayer.max = val[0].max;
        this.insertLayer.step = val[0].step;
        this.insertLayer.showFactor = true;
      } else {
        this.insertLayer.showFactor = false;
      }
    },
    //数据发布
    async setPagePublish() {
      if (this.multipleSelection.length == 0) {
        this.$message("请选择要发布的数据")
        return
      }
      if (this.formInline.type == "DOM" || this.formInline.type == "DEM") {

        this.insertLayer.name = this.multipleSelection[0].name.split('.')[0];
        this.insertLayer.number = this.multipleSelection.length
        this.insertLayer.noData = '0';
        this.insertDialogVisible = true;
      } else if (this.formInline.type == "3DML" || this.formInline.type == "BIM") {
        var val = JSON.parse(JSON.stringify(this.multipleSelection))
        for (var i in val) {
          val[i].isModel = null
        }
        this.modelOptions = val;

        this.insertModelVisible = true;



      this.insertLayer.name = null
      var val = this.enhanceOption[0]
      this.insertLayer.enhanceType = val.value;
      this.insertLayer.epsg = this.epsgOption[0].value;
      this.insertLayer.nodata = this.noDataOption[0].value
      this.insertLayer.enhanceFactor = val.enhanceFactor;
      if (val.enhanceFactor != 0) {
        this.insertLayer.min = val.min;
        this.insertLayer.max = val.max;
        this.insertLayer.step = val.step;
        this.insertLayer.showFactor = true;
      } else {
        var std = [];
        for (var i in this.multipleSelection) {
          std.push(this.multipleSelection[i].id)
        }

        var obj = {
          dircode: this.formInline.dirid,
          depcode: this.formInline.depid,
          ids: std,
          type: this.formInline.type
        }

        this.loadDialogVisible = true
        this.insertDialogVisible = false;

        const data = await publish_insert(obj);
        if (data.code != 200) {
          this.$message.error("数据发布失败")

        } else {
          this.$message({
            message: '数据发布成功',
            type: 'success'
          });
        }
        this.loadDialogVisible = false
        this.getTableData();
        this.insertLayer.showFactor = false;
      }
      this.colorTableType = 2;
      this.renderType = null;
      this.insertLayer.name = this.multipleSelection[0].name
      this.insertDialogVisible = true;

    },
    //数据详情
    setPreviewDetails(res) {
@@ -964,18 +1031,30 @@
      } else {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
            this.editLayer = JSON.parse(this.updateLayer)
            this.editDialogVisible = false;
          })
          .catch(_ => {

          });
      }
    },
    //修改弹窗
    setPreviewEdit(res) {
      this.updateLayer = JSON.stringify(res) //备份;
      this.editLayer = JSON.parse(JSON.stringify(res));
      var val = JSON.parse(JSON.stringify(res));

      this.editLayer = val;
      this.editLayer.epsg = val.epsg.toString();
      var result = this.enhanceOption.filter((res) => {
        if (res.value == val.enhanceType) {
          return res;
        }
      })
      if (result[0].enhanceFactor != 0) {
        this.editLayer.showFactor = true
      }

      this.editDialogVisible = true;
    },
    //删除
@@ -998,7 +1077,7 @@
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id);
      }
      const data = await publish_deletes({ ids: std.toString() });
      const data = await publish_deletesSjServices({ ids: std.toString() });
      if (data.code != 200) {
        this.$message.error("单位列表获取失败")
        return
@@ -1013,8 +1092,14 @@
    //预览弹窗打开
    setPreviewLayer(res) {
      this.$store.state.previewLayer = res;

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


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

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

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

    },
    //获取目录列表
    async getDirTreeList() {
@@ -1215,9 +1304,9 @@
        if (this.formInline.name) {
          this.listData.name = this.formInline.name
        }

        this.listData.dircode = this.formInline.dirid;
        this.listData.type = this.formInline.type;
        const data = await publish_selectByPage(this.listData);

        if (data.result) {
          var that = this
          var val = data.result.filter((rs) => {
@@ -1288,11 +1377,87 @@
        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';
    this.typeOption = type_option;
    this.serverOption = server_option;
    this.epsgOption = system_Option;
    this.noDataOption = nodata_Option;
    this.enhanceOption = method_option;
    this.getColorJson()
    this.setPageStart();
    this.setOptions();


  }
}
</script>
@@ -1367,4 +1532,10 @@
    padding: 10px !important;
  }
}
.elTreeData {
  color: white !important;
  background: transparent !important;
  font-size: 15px !important;
  font-family: Microsoft YaHei !important;
}
</style>