系统界面翻新，回车登录，综合展示菜单重复

Surpriseplus

2023-02-06 4e3d77dcbe421a4d6611ebcdd1ac3165cb36ad4b

 src/views/exportMap/index.vue

@@ -3,22 +3,27 @@
    id="mapView"
    class="MapBox"
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="topMenu">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-link
            style="color: white"
            @click="showLeftMenu(1)"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-s-operation"></i
          ></el-link>
          ><i class="el-icon-s-operation"></i></el-link>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" placeholder="请选择">
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
@@ -34,8 +39,7 @@
            style="color: white"
            @click="setMapAddDraw()"
            :underline="false"
            ><i class="el-icon-edit-outline"></i>绘制</el-link
          >
          ><i class="el-icon-edit-outline"></i>绘制</el-link>
        </el-form-item>
        <el-form-item>
          <el-link
@@ -44,8 +48,7 @@
            @click="setMapRemoveDraw()"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-delete"></i>清除</el-link
          >
          ><i class="el-icon-delete"></i>清除</el-link>
        </el-form-item>

        <el-form-item>
@@ -54,32 +57,29 @@
            @click="showMapApply = true"
            :underline="false"
            :disabled="layerExtent == null"
            >出图申请
          </el-link></el-form-item
        >
          >出图申请
          </el-link>
        </el-form-item>
        <el-form-item>
          <el-link
            style="color: white"
            @click="getShowMapList"
            :underline="false"
            >出图列表</el-link
          ></el-form-item
        >
          >出图列表</el-link>
        </el-form-item>
        <el-form-item>
          <el-link
            style="color: white"
            @click="changeMenulayer"
            :underline="false"
            v-show="isActive"
            >影像</el-link
          >
          >影像</el-link>
          <el-link
            style="color: white"
            v-show="!isActive"
            @click="changeMenulayer"
            :underline="false"
            >矢量</el-link
          >
          >矢量</el-link>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input
@@ -96,15 +96,21 @@
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="menu_content">
        <div class="topHeader" v-show="lefMenuContent">
        <div
          class="topHeader"
          v-show="lefMenuContent"
        >
          <div>图层列表</div>
          <div @click="showLeftMenu(2)"><i class="el-icon-s-fold"></i></div>
        </div>
        <el-divider></el-divider>
        <div class="bottomContent">
          <div style="width: 100%" v-show="lefMenuContent">
          <div
            style="width: 100%"
            v-show="lefMenuContent"
          >
            <el-tree
              :data="data"
              :data="treeData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
@@ -118,41 +124,67 @@
      </div>
    </div>

    <div class="mapApplay" v-if="showMapApply">
    <div
      class="mapApplay"
      v-if="showMapApply"
    >
      <label>出图申请</label>
      <el-divider />
      <el-form ref="form" :model="form" label-width="80px">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="出图名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-table
            ref="singleTable"
            :data="tableData"
            style="width: 100%"
            height="200"
          >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
          <div style="padding:1%;border:1px solid white">
            <el-table
              ref="singleTable"
              :data="tableData"
              style="width: 100%"
              height="200"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
              >
              </el-table-column>

            <el-table-column property="name" label="图层名称">
            </el-table-column>
          </el-table>
              <el-table-column
                property="name"
                label="图层名称"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="setMapApply">立即创建</el-button>
          <el-button
            type="primary"
            @click="setMapApply"
          >立即创建</el-button>
          <el-button @click="showMapApply = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mapApplay" v-if="showMapList">
    <div
      class="mapApplay"
      v-if="showMapList"
    >
      <div>
        <label>出图列表</label>
        <div style="float: right">
          <el-link @click="showMapList = false" :underline="false"
            ><i style="color: white" class="el-icon-close"></i
          ></el-link>
          <el-link
            @click="showMapList = false"
            :underline="false"
          ><i
              style="color: white"
              class="el-icon-close"
            ></i></el-link>
        </div>
      </div>
      <el-divider />
@@ -163,26 +195,41 @@
        height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="50" label="序号">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        >
        </el-table-column>
           <el-table-column property="descr" label="标题"> </el-table-column>
        <el-table-column property="name" label="文件名称"> </el-table-column>
        <el-table-column property="createName" label="出图人"> </el-table-column>
        <el-table-column
          property="descr"
          label="标题"
        > </el-table-column>
        <el-table-column
          property="name"
          label="文件名称"
        > </el-table-column>
        <el-table-column
          property="createName"
          label="出图人"
        > </el-table-column>
        <el-table-column
          property="createTime"
          :formatter="formatTime"
          label="日期"
        >
        </el-table-column>
     
        <el-table-column label="操作" width="120">

        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-link
              style="color: white"
              @click.native.prevent="downloadMap(scope.$index, scope.row)"
              :underline="false"
              >下载</el-link
            >
            >下载</el-link>
          </template>
        </el-table-column>
      </el-table>
@@ -206,7 +253,11 @@
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="layerform" :model="layerform" label-width="80px">
      <el-form
        ref="layerform"
        :model="layerform"
        label-width="80px"
      >
        <el-form-item label="服务名称">
          <el-input v-model="layerform.name"></el-input>
        </el-form-item>
@@ -216,12 +267,21 @@
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务地址">
          <el-input type="textarea" v-model="layerform.resource"></el-input>
          <el-input
            type="textarea"
            v-model="layerform.resource"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setAddMapLayer">确 定</el-button>
        <el-button
          type="primary"
          @click="setAddMapLayer"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
@@ -246,8 +306,9 @@
import mapviewVue from '../../components/mapview.vue';
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
import { exportSelectByPage, perms_selectLayers } from '../../api/api.js';
import moment from 'moment';
import { image_layer } from '../../assets/js/index.js';
export default {
  data() {
    return {
@@ -278,41 +339,8 @@
        { label: 'A6', value: 'A6' },
      ],
      value: 'A4',
      data: [
        {
          id: 1,
          label: '图层',
          children: [
            {
              id: 11,
              label: '项目',
              value: '项目',
              layer: 'LF:bs_project',
              isEdit: false,
            },
            {
              id: 12,
              label: '站场',
              value: '站场',
              layer: 'LF:m_sitepoint',
              isEdit: false,
            },
            {
              id: 13,
              label: '管道中心线',
              value: '管道中心线',
              layer: 'LF:m_pipeline',
              isEdit: false,
            },
            {
              id: 14,
              label: '战略通道',
              value: '战略通道',
              layer: 'LF:th_strategic_channel',
              isEdit: false,
            },
          ],
        },
      treeData: [

      ],
      arrList: [],
      defaultProps: {
@@ -331,32 +359,86 @@
      count: 0,
    };
  },

  mounted() {
    this.LayerStart();
    this.initMap();
    this.showMapLayer();
  },
  methods: {
    showMapLayer() {
      var val = this.data[0].children;
    async LayerStart() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }
      var std = [];
      for (var i = 0; i < val.length; i++) {
        var layer2 = new Image({
          name: val[i].label,
          source: new ImageWMS({
            crossOrigin: 'anonymous',
            url: geoServerURl,
      var layer_list = [];
      var layer_groups = [];
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          })
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
            }
            layer_list.push(layer_entity)
            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id);
              this.showMapLayer(layer_entity);
            }
          }
        }
      }
      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i])
          }
        }
      }
      this.treeData = layer_groups;
      for (var i in data.result) {
        if (data.result[i].type == 2 && data.result[i].url != null) {
          for (var j = 0; j < window.Viewer.imageryLayers._layers.length; j++) {
            var val_id = window.Viewer.imageryLayers._layers[j];
            if (val_id.show == true) {

            params: {
              FORMAT: 'image/png',
              VERSION: '1.1.1',
              LAYERS: val[i].layer,
            },
          }),
        });
        mapView.addLayer(layer2);
        std.push(val[i].id);
              if (val_id.imageryProvider.name == data.result[i].cnName) {
                std.push(data.result[i].id);
              }
            }
          }
        }
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    showMapLayer(val) {
      var layer2 = new Image({
        name: val.label,
        source: new ImageWMS({
          crossOrigin: 'anonymous',
          url: geoServerURl,

          params: {
            FORMAT: 'image/png',
            VERSION: '1.1.1',
            LAYERS: val.resource,
          },
        }),
      });
      mapView.addLayer(layer2);
    },
    showLeftMenu(res) {
      switch (res) {
@@ -439,13 +521,13 @@
        data: JSON.stringify(data),
        contentType: 'application/json',
        dataType: 'json',
        error: function () {},
        error: function () { },
        success: (rs) => {
          this.loading = false;
          var value = 'code = ' + rs.code + ', result = ' + rs.result;
          if ((rs.code = 200)) {
            this.$message({
              message: value,
              message: "出图成功,请到出图列表查看并下载",
              type: 'success',
            });
            this.setMapRemoveDraw();
@@ -537,15 +619,18 @@
      this.showMapApply = false;
      this.form = {};
    },
    handleClose() {},
    handleClose() { },
    handleTreeNodeClick(data, nodes) {
      if (data.children != null) return;
      var layers = mapView.getAllLayers();
      for (var i in layers) {
        var layer = layers[i];
        var str = 0;
        if (layer.values_.name == data.label) {
          
          layer.setVisible(nodes); //显示图层
          if (nodes == true) {
    str++;
            this.arrList.push({
              name: data.label,
            });
@@ -558,6 +643,16 @@
          }
        }
      }
 
      if (str == 0 && nodes == true) {
       
        this.showMapLayer(data)
        this.arrList.push({
          name: data.label,
        });
      }


      this.tableData = this.arrList;
    },
    setAddMapLayer() {
@@ -667,6 +762,7 @@
        padding: 20px;
        display: flex;
        justify-content: space-between;
        overflow: auto;
      }
      .CenDiv {
        height: 40px;
@@ -682,7 +778,7 @@
      .active {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
        background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
@@ -690,7 +786,7 @@
      .menuLayer {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
        background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
@@ -704,7 +800,7 @@
  .mapApplay {
    width: 40%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    background: #303030;
    z-index: 40;
    top: 15%;
    margin-left: 30%;
@@ -829,5 +925,15 @@
  /deep/.el-loading-spinner i {
    color: #409eff !important;
  }
  /deep/.el-tree .el-tree-node__content:hover {
    background-color: transparent !important;
  }
  /deep/.el-tree {
    color: white !important;
    background: transparent !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background: transparent !important;
  }
}
</style>