1

Surpriseplus

2022-12-20 c960e2add5751edbe728dd5d297079b36544d11a

1

 src/components/MapView/mapMenuPop.vue

@@ -17,9 +17,21 @@
        <el-link @click="closeMenuBox" :underline="false" class="boxClose"
          ><i class="el-icon-close"></i>
        </el-link>
        <el-link
          :underline="false"
          v-show="$store.state.download"
          @click="dialogVisible = true"
          class="boxClose"
          ><i class="el-icon-download"></i>
        </el-link>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="height: 100%; width: 100%">
        <el-table
          :data="tableData"
          ref="dialogPayChannel"
          height="230px"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="index"
@@ -45,33 +57,117 @@
          ></el-table-column>
        </el-table>
      </div>
      <!-- <div class="rightPage"> -->
      <!-- <el-pagination
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listPage.pageIndex"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listPage.pageSize"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listPage.pageCount"
          :total="pageCount"
        >
        </el-pagination> -->
      <!-- </div> -->
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="$t('common.passworld')"
      :visible.sync="dialogVisible"
      width="30%"
      top="35vh"
      :modal="false"
      :before-close="handleCloseDown"
    >
      <el-form
        :model="codeForm"
        :rules="rules"
        ref="codeForm"
        label-width="100px"
        class="codeForm"
      >
        <el-form-item :label="$t('common.passworld')" prop="password">
          <el-input
            type="password"
            v-model="codeForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.SPassword')" prop="repassword">
          <el-input
            type="password"
            v-model="codeForm.repassword"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="primary"
            size="small"
            @click="download('codeForm')"
            >{{ $t('common.confirm') }}</el-button
          >
          <el-button type="info" size="small" @click="closeDown('codeForm')">{{
            $t('common.cancel')
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <iframe
      id="Iframe1"
      src=""
      style="display: none; border: 0; padding: 0; height: 0; width: 0"
    ></iframe>
  </div>
</template>

<script>
import {
  dataQuerySelectByPage,
  dataQuery_selectByPage,
  inquiry_selectDomains,
  inquiry_selectFields,
  dataQuerySelectWktById,
  sign_getPublicKey,
  dataLib_selectDownloadFile,
  decr,
} from '../../api/api.js';
import { getToken } from '@/utils/auth';
import $ from 'jquery';
export default {
  data() {
    var repasswordValidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.codeForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var passwordValidator = (rule, value, callback) => {
      var passwordreg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
      if (!passwordreg.test(value)) {
        callback(new Error('密码必须由数字、字母、特殊字符组合,请输入13-20位'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      codeForm: {
        password: '',
        repassword: '',
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: passwordValidator, trigger: 'blur' },
        ],
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repasswordValidator, trigger: 'blur' },
        ],
      },
      listPage: {
        pageSize: 10,
        pageIndex: 1,
@@ -88,6 +184,7 @@
        wkt: null,
        filter: null,
      },
      pageCount: 0,
      querylayer: null,
      queryTable: [],
      domainsLayer: [],
@@ -96,6 +193,74 @@
    };
  },
  methods: {
    async signGetPublicKey() {
      const res = await sign_getPublicKey();
      if (res && res.code == 200) {
        window.encrypt = new JSEncrypt();
        encrypt.setPublicKey(res.result);
      }
    },
    download() {
      if (this.codeForm.password == '') return;
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.password),
        entities: [],
        wkt: this.listdata.wkt,
      };
      for (var i in this.option) {
        obj.entities.push(this.option[i].entity);
      }
      var token = getToken();
      var that = this;
      $.ajax(BASE_URL + '/dataLib/downloadDbReq?token=' + token, {
        type: 'post',
        data: JSON.stringify(obj),
        async: true,
        cache: false,
        processData: false,
        contentType: false,
        success: (res) => {
          if (res.code != 200) {
            return;
          }
          this.selectDownloadFile(res.result, obj.pwd);
        },
      });
    },
    async selectDownloadFile(rsid, rspwd) {
      var downObj = {
        guid: rsid,
        pwd: encodeURIComponent(rspwd),
      };
      const data = await dataLib_selectDownloadFile(downObj);
      if (data.code != 200) {
        this.$message.error('下载请求失败');
        return;
      }
      this.closeDown();
      var token = getToken();
      var url =
        BASE_URL +
        '/dataLib/downloadFile?token=' +
        token +
        '&guid=' +
        rsid +
        '&pwd=' +
        encodeURIComponent(rspwd);
      $('#Iframe1').attr('src', url).click();
    },
    handleCloseDown() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.closeDown();
        })
        .catch((_) => {});
    },
    closeDown() {
      this.dialogVisible = false;
      this.codeForm.password = '';
      this.codeForm.repassword = '';
    },
    startTableMssage() {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = 10;
@@ -103,11 +268,11 @@
      this.option = [];
    },
    setTableAll() {
      this.signGetPublicKey();
      this.startTableMssage();
      this.listdata.wkt = this.$store.state.mapMenuShpFile;
      this.querylayer = this.$store.state.mapSpaceQueryLayer;
      this.option = this.$store.state.mapSpaceQueryLayer;
      debugger;
      this.listdata.name = this.option[0].entity;

      this.getTableDateHidder();
@@ -187,10 +352,19 @@
      this.listdata.name = res.entity;
      this.getTableDateHidder();
    },
    handleSizeChange(val) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getTableData();
    },
    async getTableData() {
      this.tableData = [];

      const data = await dataQuerySelectByPage(this.listdata);
      const data = await dataQuery_selectByPage(this.listdata);
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
@@ -207,7 +381,9 @@
          }
        }
      }
      this.pageCount = data.count;
      this.tableData = data.result;
      this.$refs.dialogPayChannel.doLayout();
    },
    closeMenuBox() {
      if (this.imagePoint != null) {
@@ -273,11 +449,46 @@
      height: 327px;
    }
    .rightPage {
      position: absolute;
      bottom: 10px;
      margin-left: 50px;
      /*不可点击的*/
    }
    .pagination_box {
      position: absolute;
      bottom: 10px;
      /deep/.el-input__inner {
        background-color: transparent !important;
        border: 1px solid;
        color: white;
      }
      /deep/.el-pagination__total {
        color: white;
      }
      /deep/.el-pagination__jump {
        color: white;
      }
      /deep/.el-pager li.active {
        color: #409eff;
      }
      /deep/.el-pager li {
        color: white;
        background: transparent;
      }
      /deep/.el-pager li {
        color: white;
      }
      /deep/.btn-prev {
        background: transparent;
      }
      /deep/.btn-next {
        background: transparent;
      }
      /deep/.btn-next i {
        color: white;
      }
      /deep/.btn-prev i {
        color: white;
      }
    }
    .boxClose {
      float: right;
      margin-right: 20px;

 src/store/index.js

@@ -44,6 +44,7 @@
    uname: null,
    //项目管理
    projeOl: null,
    download: false,
  },
  mutations: {
    //获取权限合集

 src/views/Archive/index.vue

@@ -225,7 +225,7 @@
          </el-table>
      </div>
    </div>
    <div class="panerPage">
    <div class="panerPage" v-show="!isMenuActive">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
@@ -590,6 +590,10 @@
          { validator: repasswordValidator, trigger: 'blur' },
        ],
      },
      upAttach:{
        tabName:null,
        eventid:null,
      }
    };
  },
  computed: {
@@ -644,12 +648,28 @@
      this.showMapVisible =true;
      this.$store.state.mapMenuBoolean = true;
      this.$store.state.mapMenuBoxFlag = '1';
       this.$store.state.mapPopBoolean = false;
        this.$store.state.mapPopBoxFlag = null;
      this.$store.state.download = true;

    },
    handleMapClose(){
   this.dialogMapVisible =false;
   this.$confirm('确认关闭？')
        .then((_) => {
          this.closeMapDown();
        })
        .catch((_) => {});


    },
    closeMapDown(){
      this.dialogMapVisible =false;
      this.showMapVisible =false;
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
      this.$store.state.download = false;
       this.$store.state.mapPopBoolean = false;
        this.$store.state.mapPopBoxFlag = null;
    },
    moreEvent(res) {
      switch (res) {
@@ -755,7 +775,6 @@
      for (var i in this.multipleSelection1) {
        std.push(this.multipleSelection1[i].id)
      }
      debugger
      var obj = {
        pwd: encrypt.encrypt(this.codeForm.repassword),
        ids: std
@@ -771,9 +790,8 @@
        guid: res.result,
        pwd: encodeURIComponent(encrypt.encrypt(this.codeForm.repassword))
      }
      debugger
      const data = await dataLib_selectDownloadFile(downObj)

      const data = await dataLib_selectDownloadFile(downObj)
      if (data.code != 200) {
        this.$message.error('下载请求失败');
        return
@@ -856,6 +874,7 @@
      this.listTypeData.pageIndex = 1;
      this.listTypeData.pageSize = 10;
      this.dialogtitle = res.tabDesc + '(' + res.tab + ')';
      this.upAttach.tabName= res.ns+"."+res.tab;
      this.filedsLayer = this.getCollapseDomFiled();

      this.getCollapseTable(this.filedsLayer);
@@ -877,7 +896,12 @@
      this.itemdetail = std;
      this.innerVisible = true;
    },
    getAttachTable() {
    getAttachTable(index, row) {
      if(row.eventid != null){
        this.upAttach.eventid = row.eventid;
      }else{
        this.upAttach.eventid ="";
      }
      this.outerVisible = true;
      this.getAttacthFlieList();
    },
@@ -905,7 +929,7 @@
        formData.append('file', fs.files[i]); // fs.files[i].name,file
      }

      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=lf.sys_style&eventid=fa25979a5ef8b43ba82a0be35b3fb0d4", {
      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName="+this.upAttach.tabName+"&eventid="+this.upAttach.eventid, {
        type: "post",
        data: formData,
        async: true,
@@ -918,13 +942,16 @@
            type: 'success'
          });
          document.getElementById("insertFile").value = "";
          this.formInline = {
          this.fromfile = {
            file: '',
          }
          this.getAttacthFlieList();
        },
        error: (e) => {
          document.getElementById("insertFile").value = "";
            this.fromfile = {
            file: '',
          }
          this.$message.error('附件添加失败');
        }
      });
@@ -932,10 +959,7 @@


   async getAttacthFlieList(){
  var obj = {
        tabName: 'lf.sys_style',
        eventid: 'fa25979a5ef8b43ba82a0be35b3fb0d4'
      }
  var obj =this.upAttach;
      const res = await dataLib_selectFiles(obj);
      if (res.code != 200) {
        this.$message.error('列表调用失败');
@@ -967,9 +991,9 @@
        this.attributeData = val;
      });
      if (this.ruleForm.name != null) {
        this.listData.filter = 'name like ' + this.ruleForm.name;
        this.listTypeData.filter = 'name like ' + this.ruleForm.name;
      } else {
        this.listData.filter = null;
        this.listTypeData.filter = null;
      }

      const data = await dataLib_selectByPage(this.listTypeData);
@@ -977,8 +1001,10 @@
        this.$message.error('调用列表失败,请联系工作人员!');
        return;
      }

      var res_val = this.attributeData;
      this.count1 = data.count;

      for (var i in data.result) {
        let val_Data = data.result[i];

@@ -1012,9 +1038,11 @@
        this.$message.error('列表调用失败');
        return;
      }

      const domains = await dataLib_selectDomains({
        name: this.listTypeData.name,
      });

      if (domains.code != 200) {
        this.$message.error('列表调用失败');
        return;
@@ -1032,7 +1060,15 @@
      }
      return std;
    },

  //值域字段匹配
    getDomainNaFild(res, result) {
      for (var i in result) {
        if (result[i].domName == res) {
          return result[i].codeDesc;
        }
      }
      return null;
    },
    handleSizeChange(res) {
                   this.listData.pageIndex = 1;
      this.listData.pageSize = res;

 src/views/Synthesis/LeftMenu.vue

@@ -443,21 +443,22 @@
        let files = evt.target.files;
        if (files.length > 0) {
          let file = evt.target.files[0];
          let fileReader = new FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onload = () => {
            sgworld.Viewer.dataSources
              .add(
                Cesium.KmlDataSource.load(fileReader.result, {
                  camera: sgworld.Viewer.scene.camera,
                  canvas: sgworld.Viewer.scene.canvas,
                })
              )
              .then((KmlDataSource) => {
                console.log(KmlDataSource);
                // let entities = kmlDataSource.entities;
              });
          };
          sgworld.Creator.addKmlLayer('kml数据', file, true);
          // let fileReader = new FileReader();
          // fileReader.readAsDataURL(file);
          // fileReader.onload = () => {
          //   sgworld.Viewer.dataSources
          //     .add(
          //       Cesium.KmlDataSource.load(fileReader.result, {
          //         camera: sgworld.Viewer.scene.camera,
          //         canvas: sgworld.Viewer.scene.canvas,
          //       })
          //     )
          //     .then((KmlDataSource) => {
          //       console.log(KmlDataSource);
          //       // let entities = kmlDataSource.entities;
          //     });
          // };
        }
        // fileInput.value = null;
      };

 src/views/Thematic/index.js

@@ -17,7 +17,7 @@
    { id: 'a13', name: '大屏视图', layer: [11, 12, 13, 14] },
    { id: 'a1', name: '全球管网图', layer: [11, 12], index: '1' },
    { id: 'a2', name: '全球项目足迹图', layer: [13, 14], index: '2' },
    { id: 'a3', name: '全国官网图', layer: [11, 13], index: '3' },
    { id: 'a3', name: '全国管网图', layer: [11, 13], index: '3' },
    { id: 'a4', name: '全国项目足迹图', layer: [12, 14], index: '4' },
    { id: 'a5', name: '管道基础数据统计和分析', layer: [11, 12, 13] },
    { id: 'a6', name: '全国项目柱状图', layer: [11, 12, 14] },

 src/views/datamanage/SpatialData.vue

@@ -52,9 +52,10 @@
          <el-table
            ref="filterTable"
            :data="tableData"
            height="90%"
            height="500px"
            border
            style="width: 100%"

            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
@@ -75,7 +76,7 @@
                  >{{$t('common.details')}}</el-link
                >
                <el-link class="elLink"
                  @click="getAttachTable"
                  @click="getAttachTable(scope.$index, scope.row)"
                  style="margin-left: 20px;  "
                  >{{$t('common.enclosure')}}</el-link
                >
@@ -256,7 +257,6 @@
      showinfoBox: false,
      itemdetail: {},

      tableData: [],
      attributeData: [],
      currentPage: 1,
      searchName: '',
@@ -272,6 +272,10 @@
      },
      getClickTable: null,
      attacgSelection: [],
      upAttach:{
        tabName:null,
        eventid:null,
      }
    };
  },
  created() {
@@ -305,7 +309,7 @@
        formData.append('file', fs.files[i]); // fs.files[i].name,file
      }

      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName=lf.sys_style&eventid=fa25979a5ef8b43ba82a0be35b3fb0d4", {
      $.ajax(BASE_URL + "/dataQuery/uploadFiles?token=" + token + "&tabName= "+this.upAttach.tabName+"&eventid="+this.upAttach.eventid, {
        type: "post",
        data: formData,
        async: true,
@@ -330,10 +334,7 @@
      });
    },
    async getAttacthFlieList() {
      var obj = {
        tabName: 'lf.sys_style',
        eventid: 'fa25979a5ef8b43ba82a0be35b3fb0d4'
      }
      var obj =this.upAttach
      const res = await dataQuery_selectFiles(obj);
      if (res.code != 200) {
        this.$message.error('列表调用失败');
@@ -343,7 +344,12 @@
    },


    getAttachTable() {
    getAttachTable(index, row) {
      if(row.eventid != null){
        this.upAttach.eventid = row.eventid;
      }else{
         this.upAttach.eventid = '';
      }
      this.getAttacthFlieList();
      this.dialogFormVisible = true;
    },
@@ -396,6 +402,7 @@
      this.listData.pageIndex =1;
      this.listData.pageSize=10;
      this.count = 0;
this.upAttach.tabName= data.ns+"."+data.tab;
      this.filedsLayer = this.getCollapseDomFiled(); //获取每个表字段名称及阈值

      //获取table信息
@@ -428,7 +435,9 @@
          }
        }
      }

      this.tableData = data.result;
      this.$refs.filterTable.doLayout();
    },
    //获取每个表字段名称及阈值
    async getCollapseDomFiled() {

 src/views/exportMap/index.vue

@@ -1,196 +1,201 @@
<template>
  <div class="exportmap">
    <div id="mapView" class="mapView">
      <div class="topMenu">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-link
              style="color: white"
              @click="setLeftMenu"
              :underline="false"
              >图层</el-link
  <div
    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-item>
          <el-link
            style="color: white"
            @click="showLeftMenu(1)"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-s-operation"></i
          ></el-link>
        </el-form-item>
        <el-form-item label="比例尺">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
          </el-form-item>
          <el-form-item>
            <el-link
              style="color: white"
              @click="changeMenulayer"
              :underline="false"
              ><i class="el-icon-menu"></i>底图</el-link
            >
          </el-form-item>
          <el-form-item>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-link style="color: white" :underline="false"
              ><i class="el-icon-rank"></i>
            </el-link>
          </el-form-item>
          <el-form-item>
            <el-link
              style="color: white"
              @click="showMapApply = true"
              :underline="false"
              >出图申请
            </el-link></el-form-item
          >
          <el-form-item>
            <el-link
              style="color: white"
              @click="getShowMapList"
              :underline="false"
              >出图列表</el-link
            ></el-form-item
          >
          <el-form-item label="旋转">
            <el-input
              v-model="formInline.role"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button plain size="mini" @click="setMapRole">旋转</el-button>
            <el-button plain size="mini" @click="setMapAddDraw()"
              >绘制</el-button
            >
            <el-button plain size="mini" @click="setMapRemoveDraw()"
              >清除</el-button
            >
            <!-- <el-button plain size="mini" @click="setExportMapLayer"
              >出图</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
      <div class="leftMeu" v-if="showleftMenu">
        <div class="topHeader">
          <div style="float: left">图层</div>
          <div style="float: right">
            <el-link @click="showleftMenu = false" :underline="false"
              ><i class="el-icon-close"></i
            ></el-link>
          </div>
          <div style="float: right; margin-right: 5%">
            <el-link :underline="false" @click="changeRowType"
              ><i
                :class="
                  rowtype == true ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
                "
              ></i
            ></el-link>
          </div>
        </div>
        <div class="topContent" v-if="rowtype">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[1]"
            @check-change="handleTreeNodeClick"
          >
          </el-tree>
        </div>
      </div>
      <div class="mapApplay" v-if="showMapApply">
        <label>出图申请</label>
        <el-divider />
        <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>
            </el-option>
          </el-select>
        </el-form-item>

              <el-table-column property="name" label="图层名称">
              </el-table-column>
            </el-table>
          </el-form-item>
        <el-form-item>
          <el-link
            style="color: white"
            @click="setMapAddDraw()"
            :underline="false"
            ><i class="el-icon-edit-outline"></i>绘制</el-link
          >
        </el-form-item>
        <el-form-item>
          <el-link
            :disabled="layerExtent == null"
            style="color: white"
            @click="setMapRemoveDraw()"
            :underline="false"
            title="图层列表"
            ><i class="el-icon-delete"></i>清除</el-link
          >
        </el-form-item>

          <el-form-item>
            <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>
          <label>出图列表</label>
          <div style="float: right">
            <el-link @click="showMapList = false" :underline="false"
              ><i class="el-icon-close"></i
            ></el-link>
          </div>
        </div>
        <el-divider />
        <el-table
          ref="singleTable"
          :data="exportable"
          style="width: 100%"
          height="200"
          @selection-change="handleSelectionChange"
        <el-form-item>
          <el-link
            style="color: white"
            @click="showMapApply = true"
            :underline="false"
            :disabled="layerExtent == null"
            >出图申请
          </el-link></el-form-item
        >
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column property="name" label="名称"> </el-table-column>
          <el-table-column property="type" label="类型"> </el-table-column>
          <el-table-column
            property="createTime"
            :formatter="formatTime"
            label="日期"
        <el-form-item>
          <el-link
            style="color: white"
            @click="getShowMapList"
            :underline="false"
            >出图列表</el-link
          ></el-form-item
        >
        <el-form-item>
          <el-link
            style="color: white"
            @click="changeMenulayer"
            :underline="false"
            v-show="isActive"
            >影像</el-link
          >
          </el-table-column>
          <el-table-column property="descr" label="描述"> </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="downloadMap(scope.$index, scope.row)"
                type="text"
                size="small"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listdata.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listdata.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          <el-link
            style="color: white"
            v-show="!isActive"
            @click="changeMenulayer"
            :underline="false"
            >矢量</el-link
          >
          </el-pagination>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input
            v-model="formInline.role"
            placeholder="请输入内容"
            @change="setMapRole"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div
      id="leftMenu"
      class="left_Menu"
      :class="{ left_main_show: !leftMenuOpen }"
    >
      <div class="menu_content">
        <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">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              :default-expanded-keys="[1]"
              @check-change="handleTreeNodeClick"
              ref="tree"
            >
            </el-tree>
          </div>
        </div>
      </div>
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
    </div>

    <div class="mapApplay" v-if="showMapApply">
      <label>出图申请</label>
      <el-divider />
      <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>

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

        <el-form-item>
          <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>
        <label>出图列表</label>
        <div style="float: right">
          <el-link @click="showMapList = false" :underline="false"
            ><i style="color: white" class="el-icon-close"></i
          ></el-link>
        </div>
      </div>
      <el-divider />
      <el-table
        ref="singleTable"
        :data="exportable"
        style="width: 100%"
        height="200"
        @selection-change="handleSelectionChange"
      >
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column property="name" label="名称"> </el-table-column>
        <el-table-column property="type" label="类型"> </el-table-column>
        <el-table-column
          property="createTime"
          :formatter="formatTime"
          label="日期"
        >
        </el-table-column>
        <el-table-column property="descr" label="描述"> </el-table-column>
        <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
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>

@@ -245,6 +250,8 @@
export default {
  data() {
    return {
      lefMenuContent: false,
      leftMenuOpen: false,
      dialogVisible: false,
      showleftMenu: false,
      showMapApply: false,
@@ -253,6 +260,7 @@
      isActive: true,
      isMenuLayer: false,
      rowtype: true,
      loading: false,
      form: {},
      formInline: { role: '' },
      layerform: {},
@@ -266,8 +274,26 @@
          id: 1,
          label: '图层',
          children: [
            { label: '站场', value: '站场' },
            { label: '管道中心线', value: '管道中心线' },
            {
              id: '11',
              label: '站场',
              value: '站场',
              layer: 'LF:m_sitepoint',
              box: [
                84.21228790283203, 30.412200927734375, 121.11393737792969,
                41.46569061279297,
              ],
            },
            {
              id: '12',
              label: '管道中心线',
              value: '管道中心线',
              layer: 'LF:m_pipeline',
              box: [
                25.245140075683594, 11.197434425354004, 121.11258697509766,
                49.65690231323242,
              ],
            },
          ],
        },
      ],
@@ -290,8 +316,50 @@
  },
  mounted() {
    this.initMap();
    this.showMapLayer();
  },
  methods: {
    showMapLayer() {
      var val = this.data[0].children;
      var std = [];
      for (var i = val.length - 1; i >= 0; i--) {
        var layer2 = new Image({
          name: val[i].label,
          source: new ImageWMS({
            crossOrigin: 'anonymous',
            url: geoServerURl,

            params: {
              FORMAT: 'image/png',
              VERSION: '1.1.1',
              LAYERS: val[i].layer,
            },
          }),
        });
        mapView.addLayer(layer2);
        std.push(val[i].id);
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    showLeftMenu(res) {
      switch (res) {
        case 1:
          this.leftMenuOpen = !this.leftMenuOpen;
          break;
        case 2:
          this.leftMenuOpen = false;
          break;
      }
      if (this.leftMenuOpen == true) {
        setTimeout(() => {
          this.lefMenuContent = true;
        }, 200);
      } else {
        setTimeout(() => {
          this.lefMenuContent = false;
        }, 1100);
      }
    },
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined || date === null) {
@@ -314,11 +382,12 @@
    async getShowMapList() {
      this.showMapList = true;
      const data = await exportSelectByPage(this.listdata);
      debugger;

      this.exportable = data.result;

      this.count = data.count;
    },

    setExportMapLayer(res) {
      var token = '?token=' + getToken();
      var data = {
@@ -346,13 +415,16 @@
        dataType: 'json',
        error: function () {},
        success: (rs) => {
          this.loading = false;
          var value = 'code = ' + rs.code + ', result = ' + rs.result;
          if ((rs.code = 200)) {
            this.$message({
              message: value,
              type: 'success',
            });
            this.setMapRemoveDraw();
          } else {
            this.loading = false;
            this.$message.error(value);
          }
        },
@@ -373,6 +445,7 @@
      if (this.draw != null) {
        mapView.removeLayer(this.vector);
      }
      this.layerExtent = null;
    },

    setMapAddDraw() {
@@ -410,7 +483,11 @@
      });
    },
    setMapRole() {
      if (this.formInline.role == '') {
        this.formInline.role = '0';
      }
      var value = parseFloat(this.formInline.role);

      var role = (Math.PI / 180) * value;
      mapView.getView().setRotation(role);
    },
@@ -419,6 +496,7 @@
        this.$message.error('请选择出图范围');
        return;
      }
      this.loading = true;
      var val_data = [];
      for (var i in this.tableData) {
        val_data.push(this.tableData[i].name);
@@ -436,41 +514,22 @@
    },
    handleClose() {},
    handleTreeNodeClick(data, nodes) {
      if (data.label == '图层') return;

      if (nodes == true) {
        this.arrList.push({
          name: data.label,
        });

        var wmsLayer = new Image({
          source: new ImageWMS({
            ratio: 1,
            url: data.resource,
            crossOrigin: 'anonymous',
            params: {
              VERSION: '1.3.0',
              FORMAT: 'image/png',
              LAYERS: '',
              srs: 'EPSG:4326',
              tiled: true,
              styles: '',
            },
          }),
        });
        wmsLayer.name = data.label;
        mapView.addLayer(wmsLayer);
      } else {
        this.arrList.some((item, i) => {
          if (item.name === data.label) {
            this.arrList.splice(i, 1);
          }
        });
        var len = mapView.getAllLayers();
        for (var i in len) {
          var layer = mapView.getLayers().item(i);
          if (layer.name == data.label) {
            mapView.removeLayer(layer);
      if (data.children != null) return;
      var layers = mapView.getAllLayers();
      for (var i in layers) {
        var layer = layers[i];
        if (layer.values_.name == data.label) {
          layer.setVisible(nodes); //显示图层
          if (nodes == true) {
            this.arrList.push({
              name: data.label,
            });
          } else {
            this.arrList.some((item, i) => {
              if (item.name === data.label) {
                this.arrList.splice(i, 1);
              }
            });
          }
        }
      }
@@ -551,141 +610,205 @@
};
</script>

<style lang="less">
.exportmap {
<style lang="less" scoped>
.MapBox {
  width: 100%;
  height: 100%;
  background: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  .mapView {
  .topMenu {
    z-index: 40;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    .topMenu {
      background: rgba(0, 0, 0, 0.5);
      z-index: 40;
      position: absolute;
      left: 40%;
      top: 3%;
      padding-top: 1%;
      padding-left: 1%;
      padding-right: 1%;
    }
    .mapApplay {
      width: 40%;
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      z-index: 40;
      top: 15%;
      margin-left: 20%;
      padding: 1%;
      label {
    height: 70px;
    padding-left: 20px;
  }
  .left_Menu {
    z-index: 40;
    width: 300px;
    background: rgba(0, 0, 0, 0.5);
    height: calc(100% - 220px);
    position: fixed;
    left: 0;
    bottom: 5px;
    display: flex;
    transition: width 2s;
    .menu_content {
      width: 100%;
      height: 100%;
      .topHeader {
        margin: 10px;
        display: flex;
        justify-content: space-between;
        color: white;
      }
      .bottomContent {
        width: calc(100% - 40px);
        height: calc(93% - 40px);
        padding: 20px;
        display: flex;
        justify-content: space-between;
      }
      .CenDiv {
        height: 40px;
        width: 60px;
        margin: 2%;
        border-radius: 5px;

        align-self: flex-end;
      }
      .CenDiv:hover {
        border: 1px solid #409eff;
      }
      .active {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
      .menuLayer {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
    }
    .mapList {
      width: 40%;
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      z-index: 40;
      top: 15%;
      margin-left: 20%;
      padding: 1%;
    }
    .leftMeu {
      position: absolute;
      width: 13%;
      z-index: 40;
      top: 10%;
      margin-left: 1%;
      border-radius: 5px;
      padding: 1%;
    }
    .topHeader {
      padding: 5%;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      border-radius: 5px;
  }
  .left_main_show {
    width: 0px;
    z-index: 20;
  }
  .mapApplay {
    width: 40%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    top: 15%;
    margin-left: 30%;
    padding: 1%;
    label {
      color: white;
      height: 25px;
      border: 1px solid gray;
    }
    .topContent {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      padding: 5%;
      border-radius: 5px;
      border: 1px solid gray;
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;
  }
  /deep/.el-form-item__content {
    line-height: 70px;
  }
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/ .el-divider--horizontal {
    margin: 5px 0px;
  }
  /*修改table 表体的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    .el-icon-close {
      color: white;
    // 表头背景色
    th.el-table__cell {
      background-color: #303030;

      color: #fff;
    }
    .el-icon-arrow-down {
      color: white;
    }
    .el-icon-arrow-up {
      color: white;
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    .contentHeader {
      border-top: 1px solid gray;
      padding: 3%;
      width: 94%;
    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 5px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
  .pagination_box {
    margin-top: 20px;
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    .center {
      margin-left: 1%;
    /deep/.el-pagination__total {
      color: white;
    }
    .CenDiv {
      position: absolute;
      bottom: 3%;
      height: 40px;
      width: 60px;
      z-index: 101;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 3px 3px 6px #666;
      border: 1px solid rgba(204, 204, 204, 0.76);
      border-radius: 5px;
      cursor: pointer;
    /deep/.el-pagination__jump {
      color: white;
    }
    .center1 {
      margin-left: 1%;
    /deep/.el-pager li.active {
      color: #409eff;
    }
    .right {
      position: absolute;
      top: 50px;
      right: 0;
      width: 20%;
      height: calc(100% - 50px);

      display: flex;
      flex-direction: column;
      justify-content: space-between;
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    .CenDiv:hover {
      border: 1px solid #409eff;
    /deep/.el-pager li {
      color: white;
    }
    // .active {
    //   width: 100%;
    //   height: 100%;
    //   background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
    //   position: absolute;
    //   background-size: 100% 100%;
    //   border-radius: 5px;
    // }
    // .menuLayer {
    //   width: 100%;
    //   height: 100%;
    //   background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
    //   position: absolute;
    //   background-size: 100% 100%;
    //   border-radius: 5px;
    // }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
    /deep/.btn-next i {
      color: white;
    }
    /deep/.btn-prev i {
      color: white;
    }
  }
  /deep/.el-loading-spinner i {
    color: #409eff !important;
  }
}
</style>