添加综合展示，在线制图，资料馆跳转页面功能，修改数据管理，运维管理页面数据获取

Surpriseplus

2022-11-26 5c11db14675b3a0f409e8c79e07304f37514b52a

添加综合展示，在线制图，资料馆跳转页面功能，修改数据管理，运维管理页面数据获取

 src/api/api.js

@@ -517,6 +517,11 @@
  return request.get('/dataUpload/selectByPageForUpload', { params: params });
}

//数据上传=删除数据
export function dataUpload_deleteMetas(params) {
  return request.get('/dataUpload/deleteMetas', { params: params });
}

//数据入库=>获取目录树
export function dataLoader_selectDirAll(params) {
  return request.get('/dataLoader/selectDirAll', { params: params });
@@ -552,6 +557,10 @@
export function dataLoader_selectByPageForUpload(params) {
  return request.get('/dataLoader/selectByPageForUpload', { params: params });
}
//数据入库=>删除数据
export function dataLoader_deleteMetas(params) {
  return request.get('/dataLoader/deleteMetas', { params: params });
}

// //数据入库=>查询文件
// export function dataLoader_selectDirAll(params) {

 src/components/navMenu.vue

@@ -8,20 +8,27 @@
    <div class="rightWrapper">
      <div class="rightMenu">
        <ul class="infinite-list menu_ul">
          <li
            @click="setMenuMove(index, item)"
            v-for="(item, index) in listMenu"
            class="infinite-list-item"
          >
            <div
              class="menuImage"
              :class="changeSelectStyle == index ? item.checkClass : item.class"
            ></div>
            <div
              class="menulabel"
              :class="{ changeStyle: changeSelectStyle == index }"
            >
              {{ item.label }}
          <li v-for="(item, index) in listMenu" class="infinite-list-item">
            <div @click="setMenuMove(index, item)">
              <div
                class="menuImage"
                :class="changeSelectStyle == index ? item.checkClass : item.css"
              ></div>
              <div
                class="menulabel"
                :class="{ changeStyle: changeSelectStyle == index }"
              >
                {{ item.cnName }}
              </div>
            </div>
            <div class="secondMenuDiv" v-show="item.show">
              <div
                v-for="res in item.children"
                @click="setLiClick(res)"
                :class="{ changeLiStyle: changeliSelect == res.cnName }"
              >
                {{ res.cnName }}
              </div>
            </div>
          </li>
        </ul>
@@ -40,7 +47,7 @@
        </div>
        <color-change></color-change>
      </div>

      <!-- -->
      <!-- <div class="menu"></div>
      <div class="userInfo">
        <img src="../assets/img/user.png" alt="" />
@@ -54,11 +61,13 @@
</template>

<script>
import { logout } from '@/api/api';
import { logout, selectMenuRecursive } from '@/api/api';
import { removeToken, getToken } from '@/utils/auth';
import customElMenu from '../components/customElMenu.vue';
import { queryMenuTree } from '../api/api';
import colorChange from '../views/maintenance/colorChange.vue';
import { containsCoordinate } from 'ol/extent';
import Vue from 'vue';
export default {
  name: 'navMenu',
  //import引入的组件需要注入到对象中才能使用
@@ -86,44 +95,29 @@
      formLabelWidth: '70px',
      count: 5,
      changeSelectStyle: 5,
      changeliSelect: null,
      changeSelectdiv: false,
      listMenu: [
        {
          label: '数据质检',
          class: 'm1',
          cnName: '数据质检',
          css: 'm1',
          checkClass: 'm11',
          url: '',
        },
        {
          label: '数据交换',
          class: 'm2',
          cnName: '数据交换',
          css: 'm2',
          checkClass: 'm21',
          url: '',
        },
        {
          label: '数据管理',
          class: 'm3',
          checkClass: 'm31',
          url: '',
        },
        {
          label: '服务管理',
          class: 'm4',
          cnName: '服务管理',
          css: 'm4',
          checkClass: 'm41',
          url: '',
        },
        {
          label: '综合展示',
          class: 'm5',
          checkClass: 'm51',
          url: '',
        },
        {
          label: '运维管理',
          class: 'm6',
          checkClass: 'm61',
          url: '',
        },
      ],
      showFlag: null,
    };
  },
  created() {},
@@ -158,8 +152,36 @@
    },
    //鼠标移入菜单事件
    setMenuMove(index, item) {
      this.$router.push(item.url);
      var that = this;

      if (item.perms != null) {
        this.$router.push(item.url);
        this.setShowFalseDiv(false);
        this.changeliSelect = '呵呵';
        this.showFlag = null;
      } else {
        if (this.showFlag != index) {
          this.showFlag = index;
          this.setShowFalseDiv(true);
        } else {
          let newItem = this.listMenu[index];
          newItem.show = !this.listMenu[index].show;
          Vue.set(this.listMenu, index, newItem);
        }
      }

      this.changeSelectStyle = index;
    },
    setShowFalseDiv(bolean) {
      var index = this.showFlag;
      let newItem = this.listMenu[index];
      newItem.show = bolean;
      Vue.set(this.listMenu, index, newItem);
    },
    setLiClick(res) {
      this.setShowFalseDiv(false);
      this.changeliSelect = res.cnName;
      this.$router.push(res.url);
    },
    async getMenuTree() {
      //获取目录树最大ID，新建节点使用
@@ -183,16 +205,18 @@
        }
      }
    },
    setMenuTree(res) {
      console.log(res);
      for (var i = 0; i < res.length; i++) {
        for (var j = 0; j < this.listMenu.length; j++) {
          if (this.listMenu[j].label == res[i].cnName) {
            this.listMenu[j].url = res[i].perms;
          }
    async setMenuTree(res) {
      for (var i in res) {
        res[i].checkClass = res[i].css + '1';
        res[i].show = false; //控制显隐
        if (res[i].perms == null) {
          const result = await selectMenuRecursive({ name: res[i].cnName });
          res[i].children = result.result.filter((value) => {
            return value.pid == res[i].id;
          });
        }
        this.listMenu.push(res[i]);
      }
      console.log(this.listMenu);
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
@@ -507,5 +531,30 @@
    color: #2e95fb !important;
    background: linear-gradient(#112f57, #122344) !important;
  }
  .secondMenuDiv {
    position: absolute;
    z-index: 30;
    margin-top: 10px;
    border: 1px solid white;
    border-radius: 5px;
    div {
      line-height: 30px;

      background: #303030;
      padding: 10px;

      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 49px;
      width: 100px;
    }

    .changeLiStyle {
      color: #fec801;
      background: linear-gradient(180deg, #002992, #080472);
    }
  }
}
</style>

 src/router/index.js

@@ -32,7 +32,7 @@
import domainManage from '../views/datamanage/domainManage.vue'; //数据管理-值域管理
import styleManage from '../views/datamanage/styleManage.vue'; //数据管理-样式管理
import addStyle from '../views/datamanage/addStyle.vue'; //数据管理-样式管理-添加样式

import ExportMap from '../views/exportMap/index.vue'; //在线制图
import userInfoManage from '../views/userManage/userInfoManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import orgManage from '../views/userManage/orgManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import userAuditing from '../views/userManage/userAuditing.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
@@ -85,7 +85,15 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

      {
        path: '/ExportMap',
        name: 'ExportMap',
        component: ExportMap,
        meta: {
          title: '在线制图',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/Synthesis',
        name: 'Synthesis',

 src/views/Synthesis/index.vue

@@ -1,6 +1,7 @@
<template>
  <div class="synthesis">
    <el-tabs type="border-card">
    <map-div></map-div>
    <!-- <el-tabs type="border-card">
      <el-tab-pane v-if="menuStatus.menu1" :label="$t('synthesis.coverage')">
        <coverage />
      </el-tab-pane>
@@ -27,7 +28,7 @@
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card">
      <map-div></map-div>

    </el-card>
    <div class="plotBox">
      <el-collapse-transition>
@@ -46,21 +47,21 @@
          </ul>
        </div>
      </el-collapse-transition>
    </div>
    </div> -->
  </div>
</template>

<script>
import coverage from "./coverage.vue"; //图层
import viewport from "./viewport.vue"; //视图
import wander from "./wander.vue"; //漫游
import analyse from "./analyse.vue"; //分析
import iqyery from "./inquire.vue"; //查询
import orientation from "./orientation.vue"; //定位
import measurement from "./measurement.vue"; //测量
import plotting from "./plotting.vue"; //标绘
import MapDiv from "../../components/MapDiv";
import { getPerms } from "../../api/api";
import coverage from './coverage.vue'; //图层
import viewport from './viewport.vue'; //视图
import wander from './wander.vue'; //漫游
import analyse from './analyse.vue'; //分析
import iqyery from './inquire.vue'; //查询
import orientation from './orientation.vue'; //定位
import measurement from './measurement.vue'; //测量
import plotting from './plotting.vue'; //标绘
import MapDiv from '../../components/MapDiv';
import { getPerms } from '../../api/api';
export default {
  components: {
    coverage,
@@ -78,14 +79,14 @@
      showBtnBox: false,
      itemsOne: [
        {
          id: "1",
          name: "synthesis.point",
          class: "h1",
          id: '1',
          name: 'synthesis.point',
          class: 'h1',
        },
        {
          id: "2",
          name: "synthesis.line",
          class: "h2",
          id: '2',
          name: 'synthesis.line',
          class: 'h2',
        },
        // {
        //   id: "3",
@@ -93,9 +94,9 @@
        //   class: "h3",
        // },
        {
          id: "4",
          name: "synthesis.polygon",
          class: "h4",
          id: '4',
          name: 'synthesis.polygon',
          class: 'h4',
        },
        // {
        //   id: "7",
@@ -113,9 +114,9 @@
        //   class: "h6",
        // },
        {
          id: "8",
          name: "synthesis.removepaint",
          class: "h8",
          id: '8',
          name: 'synthesis.removepaint',
          class: 'h8',
        },
        // {
        //   id: "9",
@@ -152,35 +153,35 @@
    changePlot(res) {
      sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
      switch (res.id) {
        case "1":
        case '1':
          sgworld.Creator.createSimpleGraphic(
            "point",
            'point',
            {},
            function (entity) {}
          );
          break;
        case "2":
        case '2':
          sgworld.Creator.createSimpleGraphic(
            "polyline",
            'polyline',
            {},
            function (entity) {}
          );
          break;
        case "3":
        case '3':
          sgworld.Creator.createSimpleGraphic(
            "rectangle",
            'rectangle',
            {},
            function (entity) {}
          );
          break;
        case "4":
        case '4':
          sgworld.Creator.createSimpleGraphic(
            "polygon",
            'polygon',
            {},
            function (entity) {}
          );
          break;
        case "6":
        case '6':
          if (window.Excavation) {
            window.Excavation.clear();
            window.Excavation = null;
@@ -188,7 +189,7 @@
            this.$refs.terrainDig.open();
          }
          break;
        case "5":
        case '5':
          if (window.TerrainFlattening) {
            window.TerrainFlattening.remove();
            window.TerrainFlattening = null;
@@ -196,14 +197,13 @@
            this.$refs.modelPress.open();
          }
          break;
        case "7":
        case '7':
          sgworld.Creator.createModelLibrary();
          break;
        case "8":
        case '8':
          this.clearAll();
          break;
        case "10":
          
        case '10':
          break;
      }
    },
@@ -221,11 +221,11 @@
    },
    tepostmessage(res) {
      const msg = {
        message: "changeTool",
        message: 'changeTool',
        data: res,
      };
      document
        .getElementById("sunIframe")
        .getElementById('sunIframe')
        .contentWindow.postMessage(msg, this.iframeSrc);
    },
    showMenuChange(res, result) {
@@ -239,28 +239,28 @@
    },
    showMenuStatus(res) {
      switch (res.cnName) {
        case "图层":
        case '图层':
          this.menuStatus.menu1 = true;
          break;
        case "视图":
        case '视图':
          this.menuStatus.menu2 = true;
          break;
        case "漫游":
        case '漫游':
          this.menuStatus.menu3 = true;
          break;
        case "分析":
        case '分析':
          this.menuStatus.menu4 = true;
          break;
        case "查询":
        case '查询':
          this.menuStatus.menu5 = true;
          break;
        case "定位":
        case '定位':
          this.menuStatus.menu6 = true;
          break;
        case "测量":
        case '测量':
          this.menuStatus.menu7 = true;
          break;
        case "标绘":
        case '标绘':
          this.menuStatus.menu8 = true;
          break;
      }
@@ -270,7 +270,7 @@
      if (this.$store.state.currentPerms) {
        val = this.$store.state.currentPerms;
      } else {
        val = "/comprehensive";
        val = '/comprehensive';
      }
      var permsEntity = this.$store.state.permsEntity;

@@ -294,7 +294,7 @@
  },
  mounted() {
    //this.messageName = this.$store.state.teNmme;
    this.$bus.$on("changetool", (e) => {
    this.$bus.$on('changetool', (e) => {
      this.tepostmessage(e);
    });
  },
@@ -305,99 +305,10 @@
};
</script>

<style >
.synthesis .el-card {
  border: transparent !important;
}
<style>
.synthesis {
  width: 100%;
  height: 100%;
  position: relative;
}
.synthesis .el-tabs__item {
  color: white !important;
  text-align: center;

  background: rgb(55, 77, 110) !important;
}
.synthesis .is-active {
  color: white !important;
  background-color: #586884 !important;
  border: #586884 !important;
}
.synthesis .el-tabs__nav-scroll {
  background: rgb(55, 77, 110) !important;
}
.synthesis .el-tabs__content {
  color: white !important;
  background-color: #586884 !important;
  padding: 0px !important;
}
.synthesis .box-card {
  height: 88%;
  position: relative;

  border-radius: 0px;
}
.synthesis .el-card .el-card__body {
  padding: 0px;
}
.synthesis .cardbox {
  width: 98%;
  height: 86%;
  position: absolute;
}
.synthesis .el-tabs--border-card {
  border: transparent;
  background: transparent;
}
.synthesis .divli {
  width: 100%;
  height: 50%;
  position: relative;
}
.synthesis li {
  list-style: none;
  float: left;
  height: 60px;
  text-align: center;
  margin: 2px;
  position: relative;
  cursor: pointer;
  margin-top: 5px;
}
.synthesis .backimge8 {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 30%;
}
.synthesis .plotBox {
  width: 160px;
  /* height:; */
  position: absolute;
  top: 115px;
  left: 5px;
  background-color: #596882;
}
.synthesis .plotBox .transition-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  /* background-color: #bfa; */
  box-sizing: border-box;
}
.synthesis .plotBox .transition-box li {
  margin: 5px;
  width: 46%;
  margin-left: 0;
  /* background-color: #fff; */
  justify-content: space-between;
}
</style>

 src/views/datamanage/dataController.vue

@@ -42,7 +42,7 @@
</template>

<script>
import { selectMenuRecursive } from '../../api/api';
import { selectMenuRecursive, queryMenuTree } from '../../api/api';
import customElMenu from '../../components/customElMenu.vue';
import dataUpdata from '@/views/datamanage/dataUpdata.vue'; //数据管理-数据上传
import catalogueManage from '@/views/datamanage/catalogueManage.vue'; //数据管理-目录管理
@@ -98,7 +98,12 @@
  methods: {
    //获取树
    async getTreeData() {
      const res = await selectMenuRecursive({ name: '数据管理' });
      const data = await queryMenuTree();
      let menuLists = data.result.filter((value) => {
        return value.url == '/dataController';
      });

      const res = await selectMenuRecursive({ name: menuLists[0].cnName });

      if (res.code == 200) {
        if (res.result.length != 0) {

 src/views/datamanage/dataLoader.vue

@@ -311,7 +311,7 @@
  dataLoader_selectMappers,
  dataLoader_SelectTabs,
  dataLoader_selectByPageForUpload,
  deleteMeta
dataLoader_deleteMetas
} from '../../api/api';
export default {
  name: 'dataUpdata',
@@ -452,7 +452,7 @@
          for (var i in this.multipleDelete) {
            std.push(this.multipleDelete[i].id);
          }
          const res = await deleteMeta({ids: std.toString() })
          const res = await dataLoader_deleteMetas({ids: std.toString() })
          if(res.code != 200){
            this.$message.error('删除失败');
          }else{

 src/views/datamanage/dataUpdata.vue

@@ -274,7 +274,7 @@
import MyBread from '../../components/MyBread.vue';
import { getToken } from '@/utils/auth';
import { selectdirTab, queryDepTree, dataUploadSelectVerByDirid, dataUploadSelectPath, dataUploadSelectFiles, dataUploadDeleteFiles, dataUploadInsertFiles,
dataUpload_selectByPageForUpload,deleteMeta} from '../../api/api';
dataUpload_selectByPageForUpload,dataUpload_deleteMetas} from '../../api/api';
export default {
  name: 'dataUpdata',
  components: {
@@ -366,7 +366,7 @@
          for (var i in this.multipleDelete) {
            std.push(this.multipleDelete[i].id);
          }
          const res = await deleteMeta({ids: std.toString() })
          const res = await dataUpload_deleteMetas({ids: std.toString() })
          if(res.code != 200){
            this.$message.error('删除失败');
          }else{

 src/views/exportMap/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,676 @@
<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
            >
          </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 = !showMapApply"
              :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-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 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-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="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-pagination>
        </div>
      </div> -->
      <!-- <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
      </div> -->
    </div>

    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="layerform" :model="layerform" label-width="80px">
        <el-form-item label="服务名称">
          <el-input v-model="layerform.name"></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-radio-group v-model="layerform.type">
            <el-radio label="WMS"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务地址">
          <el-input type="textarea" v-model="layerform.resource"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="setAddMapLayer">ç¡® å®š</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import ImageWMS from 'ol/source/ImageWMS';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import View from 'ol/View';
import Image from 'ol/layer/Image';
import TileLayer from 'ol/layer/Tile';
import { transform } from 'ol/proj';
import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw.js';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import LayerVector from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';
import mapviewVue from '../../components/mapview.vue';
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
export default {
  data() {
    return {
      dialogVisible: false,
      showleftMenu: false,
      showMapApply: false,
      showMapList: false,
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
      rowtype: true,
      form: {},
      formInline: { role: '' },
      layerform: {},
      tableData: [],
      exportable: [],
      multipleSelection: [],
      options: [{ label: '1:20万', value: '1:20万' }],
      value: '1:20万',
      data: [
        {
          id: 1,
          label: '图层',
          children: [
            { label: '阀室', value: '阀室' },
            { label: '站场', value: '站场' },
            { label: '管道中心线', value: '管道中心线' },
          ],
        },
      ],
      arrList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      draw: null,
      vector: null,
      source: null,
      layerExtent: null,
      listdata: {
        name: null,
        pageSize: 10,
        pageIndex: 1,
      },
      count: 0,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = val;
      this.getShowMapList();
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getShowMapList();
    },
    async getShowMapList() {
      const data = await exportSelectByPage(this.listdata);
      this.exportable = data.result;
      this.showMapList = true;
      this.count = data.count;
    },
    setExportMapLayer(res) {
      var token = '?token=' + getToken();
      var data = {
        token: token.replace('?token=', ''),
        title: this.form.name,
        pageSize: 'A4',
        province: '山东省',
        scale: this.value,
        resolution: '20ç±³',
        date: '2022.11.14',
        layers: res.toString(),
        rotation: 0,
        xmin: this.layerExtent.xmin,
        ymin: this.layerExtent.ymin,
        xmax: this.layerExtent.xmax,
        ymax: this.layerExtent.ymax,
      };

      $.ajax({
        async: true,
        url: BASE_URL + '/export/insertMap' + token,
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        dataType: 'json',
        error: function () {},
        success: (rs) => {
          var value = 'code = ' + rs.code + ', result = ' + rs.result;
          if ((rs.code = 200)) {
            this.$message({
              message: value,
              type: 'success',
            });
          } else {
            this.$message.error(value);
          }
        },
      });
    },
    downloadMap(index, rows) {
      var guid = rows.guid;
      var token = '?token=' + getToken();
      var a = document.createElement('a'); // åˆ›å»ºä¸€ä¸ªa标签元素
      a.style.display = 'none'; // è®¾ç½®å…ƒç´ ä¸å¯è§
      a.href = BASE_URL + '/mark/downloadFile' + token + '&guid=' + guid;

      document.body.appendChild(a); // åŠ å…¥
      a.click(); // è§¦å‘点击,下载
      document.body.removeChild(a); // é‡Šæ”¾
    },
    setMapRemoveDraw() {
      if (this.draw != null) {
        mapView.removeLayer(this.vector);
      }
    },

    setMapAddDraw() {
      this.setMapRemoveDraw();

      this.source = new VectorSource({ wrapX: false });

      this.vector = new VectorLayer({
        source: this.source,
      });
      mapView.addLayer(this.vector);

      let type = 'Circle';
      let geometryFunction = createBox();
      this.draw = new Draw({
        source: this.source,
        type,
        geometryFunction,
      });
      mapView.addInteraction(this.draw);
      this.draw.on('drawend', (e) => {
        let feature = e.feature;
        let geom = feature.getGeometry();
        var extent = geom.getExtent();
        var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
        var a2 = transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');

        this.layerExtent = {
          xmin: a1[0],
          ymin: a1[1],
          xmax: a2[0],
          ymax: a2[1],
        };
        mapView.removeInteraction(this.draw);
      });
    },
    setMapRole() {
      var value = parseFloat(this.formInline.role);
      var role = (Math.PI / 180) * value;
      mapView.getView().setRotation(role);
    },
    setMapApply() {
      if (this.layerExtent == null) {
        this.$message.error('请选择出图范围');
        return;
      }
      var val_data = [];
      for (var i in this.tableData) {
        val_data.push(this.tableData[i].name);
      }
      if (this.isActive) {
        val_data.push('矢量图');
        val_data.push('矢量注记');
      } else {
        val_data.push('高德影像');
        val_data.push('高德影像注记');
      }
      this.setExportMapLayer(val_data);
      this.showMapApply = false;
      this.form = {};
    },
    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:900913',
              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);
          }
        }
      }
      this.tableData = this.arrList;
    },
    setAddMapLayer() {
      this.dialogVisible = false;
      this.data[0].children.push({
        label: this.layerform.name,
        type: this.layerform.type,
        resource: this.layerform.resource,
      });
    },

    setLeftMenu() {
      this.showleftMenu = true;
      this.rowtype = true;
    },
    //左侧菜单点击事件
    changeRowType() {
      this.rowtype = !this.rowtype;
    },
    //地图初始化
    initMap() {
      var TiandiLayer = new TileLayer({
        source: new XYZ({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561',
        }),
      });
      var TiandiTitle = new TileLayer({
        source: new XYZ({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561',
        }),
      });
      var GaoDeLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
        }),
      });
      var GaoDeTitle = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
        }),
      });
      window.mapView = new Map({
        target: 'mapView',
        layers: [TiandiLayer, TiandiTitle, GaoDeLayer, GaoDeTitle],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: 'EPSG:3857',
        }),
      });
      mapView.getLayers().item(2).setVisible(false);
      mapView.getLayers().item(3).setVisible(false);
      this.formInline.role = mapView.getView().getRotation();
    },
    //切换底图
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        mapView.getLayers().item(2).setVisible(false);
        mapView.getLayers().item(3).setVisible(false);
        mapView.getLayers().item(0).setVisible(true);
        mapView.getLayers().item(1).setVisible(true);
      } else {
        mapView.getLayers().item(2).setVisible(true);
        mapView.getLayers().item(3).setVisible(true);
        mapView.getLayers().item(0).setVisible(false);
        mapView.getLayers().item(1).setVisible(false);
      }
    },
  },
};
</script>

<style lang="less">
.exportmap {
  width: 100%;
  height: 100%;
  background: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  .mapView {
    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 {
        color: white;
      }
    }
    .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;
      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;
    }

    .el-icon-close {
      color: white;
    }
    .el-icon-arrow-down {
      color: white;
    }
    .el-icon-arrow-up {
      color: white;
    }

    .contentHeader {
      border-top: 1px solid gray;
      padding: 3%;
      width: 94%;
      color: white;
    }
    .center {
      margin-left: 1%;
    }
    .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;
    }
    .center1 {
      margin-left: 1%;
    }
    .right {
      position: absolute;
      top: 50px;
      right: 0;
      width: 20%;
      height: calc(100% - 50px);

      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .CenDiv:hover {
      border: 1px solid #409eff;
    }
    // .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;
    // }
  }
}
</style>

 src/views/maintenance/mochaitmo.vue

@@ -87,7 +87,7 @@
import databaseMonitoring from '@/views/maintenance/databaseMonitoring.vue'; //数据库监控
import systemMonitoring from '@/views/maintenance/systemMonitoring.vue'; //系统监控
import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //系统配置
import { selectMenuRecursive } from '../../api/api';
import { selectMenuRecursive, queryMenuTree } from '../../api/api';
import customElMenu from '../../components/customElMenu.vue';
export default {
  components: {
@@ -139,8 +139,11 @@
  methods: {
    //获取树
    async getTreeData() {
      const res = await selectMenuRecursive({ name: '运维管理' });

      const data = await queryMenuTree();
      let menuLists = data.result.filter((value) => {
        return value.url == '/mochaitmo';
      });
      const res = await selectMenuRecursive({ name: menuLists[0].cnName });
      if (res.code == 200) {
        if (res.result.length != 0) {
          let menuList = res.result.filter((value) => {