图层管理界面添加

Surpriseplus

2022-12-17 84d97857cb5ba7cfb62b6400bdff0911eab4826b

图层管理界面添加

 src/api/api.js

@@ -632,7 +632,7 @@
export function dataLib_selectByPageForMeta(params) {
  return request.get('/dataLib/selectByPageForMeta', { params: params });
}
//资料馆=>文件下载
//资料馆=>分页查询
export function dataLib_selectDownloadFile(params) {
  return request.get('/dataLib/selectDownloadFile', { params: params });
}
@@ -640,7 +640,10 @@
export function dataLib_downloadReq(params) {
  return request.post('/dataLib/downloadReq', params);
}

//在线制图=>分页查询
export function exportSelectByPage(params) {
  return request.get('/export/selectByPage', { params: params });
}
//请求站场点内容
export function querySitePoint(size, index, name) {
  return service.get(

 src/components/mixin/baseVuex.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,46 @@
import {
  mapState,
  mapMutations
} from 'vuex'
export default {
  computed: {
    ...mapState('layerTree', [
      'treeData',
    ]),
    ...mapState('user', [
      'user',
    ]),
    ...mapState('mapTools', [
      'hideTools',
      'hidePositionBtn',
      'statusbar',
      'navBar',
      'scaleBarStatus'
    ]),
    ...mapState('mapStatus', [
      'viewCenter',
      'mapStatus',
    ])
  },
  methods: {
    ...mapMutations('layerTree', [
      'setTreeData',
      'addTreeChildren',
      'updataTreeNode',
      'checkTreeNode',
      'removeTreeNode'
    ]),
    ...mapMutations('user', [
      'changeUserData',
    ]),
    ...mapMutations('mapTools', [
      'changeScaleBarVisible',
      'changeNavBarVisible',
      'changeMapToolsVisible',
    ]),
    ...mapMutations('mapStatus', [
      'setView',
      'changeMapStatus',
    ])
  }
}

 src/components/mixin/layerTree.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,130 @@
// éåŽ†èŠ‚点
function ergodicNode(nodes) {
  if (nodes && nodes.length) {
    nodes.forEach((item) => {
      item.rename = false;
      item.children && ergodicNode(item.children);
    });
  }
}

/**
 * å›¾å±‚树数据
 */
export default {
  namespaced: true,
  state: {
    // å·¥ç¨‹æ ‘数据
    treeData: [],
  },
  mutations: {
    // å®šä¹‰å·¥ç¨‹æ ‘数据
    setTreeData(state, data = []) {
      ergodicNode(data);
      state.treeData = data;
    },
    // æ ‘指定位置增加子节点（必须标识为key）
    addTreeChildren({ treeData }, { parentNode, pid, item }) {
      if (!pid) {
        treeData.push(item);
        return;
      }
      (parentNode || treeData).forEach((ele) => {
        if (ele.id === pid) {
          if (ele.children) {
            ele.children.push(item);
          } else {
            (parentNode || treeData).push(item);
          }

          return;
        } else {
          if (ele.children) {
            this.commit('layerTree/addTreeChildren', {
              parentNode: ele.children,
              pid,
              item,
            });
          }
        }
      });
    },
    // å‹¾é€‰èŠ‚点
    checkTreeNode({ treeData }, { parentNode, id, checked }) {
      (parentNode || treeData).forEach((ele) => {
        if (!id || (id && ele.id === id)) {
          // id不存，勾选所有子节点，id存在，勾选当前节点
          ele.checked = checked;
          if (ele.children) {
            this.commit('layerTree/checkTreeNode', {
              parentNode: ele.children,
              checked,
            });
          } else if (ele._children) {
            this.commit('layerTree/checkTreeNode', {
              parentNode: ele._children,
              checked,
            });
          }
          if (id) {
            return;
          }
        } else {
          // é€’å½’
          if (ele.children) {
            this.commit('layerTree/checkTreeNode', {
              parentNode: ele.children,
              id,
              checked,
            });
          }
        }
      });
    },
    // æ›´æ–°èŠ‚点数据
    updataTreeNode({ treeData }, { parentNode, id, nodeValue, key, value }) {
      (parentNode || treeData).forEach((ele) => {
        if (ele.id === id) {
          if (nodeValue) {
            for (let _key in nodeValue) {
              if (nodeValue[_key] === undefined) {
                delete ele[_key];
              } else {
                ele[_key] = nodeValue[_key];
              }
            }
          } else {
            ele[key] = value;
          }
          return;
        } else {
          if (ele.children) {
            this.commit('layerTree/updataTreeNode', {
              parentNode: ele.children,
              id,
              nodeValue,
              key,
              value,
            });
          }
        }
      });
    },
    // ç§»é™¤èŠ‚点
    removeTreeNode({ treeData }, { id, parentNode }) {
      (parentNode || treeData).forEach((ele, index) => {
        if (ele.id === id) {
          (parentNode || treeData).splice(index, 1);
          return;
        } else {
          if (ele.children) {
            this.commit('layerTree/removeTreeNode', {
              id,
              parentNode: ele.children,
            });
          }
        }
      });
    },
  },
};

 src/main.js

@@ -11,6 +11,7 @@
// import locale from 'element-ui/lib/locale/lang/zh-CN'
// import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/element-variables.scss';

Vue.prototype.$echarts = echarts;
import * as echarts from 'echarts';
Vue.use(ElementUI, { locale });
@@ -24,6 +25,5 @@
  router,
  i18n,
  store,

  render: (h) => h(App),
}).$mount('#app');

 src/views/Thematic/index.vue

@@ -547,6 +547,11 @@
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;
  }
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid white !important;
  }
}

// .themaic .el-divider--horizontal {

 src/views/Tools/LayerTree.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,508 @@
<template>
  <div class="lalala tree-container">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      class="search"
    >
    </el-input>
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      show-checkbox
      @node-click="handleLeftclick"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      @node-contextmenu="rightClick"
      :filter-node-method="filterNode"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      ref="tree"
    >
      <span
        class="slot-t-node"
        slot-scope="{ node, data }"
        @dblclick="editNode(data)"
      >
        <span v-show="!data.isEdit">
          <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
            node.label
          }}</span>
        </span>
        <span v-show="data.isEdit">
          <el-input
            class="slot-t-input"
            size="mini"
            autofocus
            v-model="data.label"
            :ref="'slotTreeInput' + data.id"
            @blur.stop="NodeBlur(node, data)"
            @keydown.native.enter="NodeBlur(node, data)"
          ></el-input>
        </span>
      </span>
    </el-tree>

    <el-card
      class="box-card"
      ref="card"
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div @click="addSameLevelNode()" v-show="firstLevel">
        <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加
      </div>
      <div class="add" @click="addChildNode()">
        <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子级增加
      </div>
      <div class="delete" @click="deleteNode()">
        <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除节点
      </div>
      <div class="edit" @click="editNode()">
        <i class="el-icon-edit"></i>&nbsp;&nbsp;修改节点
      </div>
    </el-card>
    <el-dialog
      :title="appendNodetitle"
      :visible.sync="dialogVisible"
      width="30%"
      top="20vh"
      :modal="false"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="addFormServer" label-width="100px">
        <el-form-item label="服务名称">
          <el-input v-model="addFormServer.label"></el-input>
        </el-form-item>
        <el-form-item label="服务地址">
          <el-input v-model="addFormServer.value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAddServer">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'tree',
  data() {
    return {
      eleId: '',
      isShow: false,
      currentData: '',
      currentNode: '',
      menuVisible: false,
      firstLevel: false,
      filterText: '',
      appendNodetitle: '',
      maxexpandId: 4,
      rightClickMenuStyle: {},
      dialogVisible: false,
      addFormServer: {},
      treeData: [
        {
          id: 1,
          label: '影像',
          isEdit: false,
          children: [],
        },
        {
          id: 2,
          label: '地形',
          isEdit: false,
          children: [],
        },
        {
          id: 3,
          label: '模型',
          isEdit: false,
          children: [],
        },
        {
          id: 4,
          label: '矢量',
          isEdit: false,
          children: [],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    NodeBlur(Node, data) {
      console.log(Node, data);
      if (data.label.length === 0) {
        this.$message.error('菜单名不可为空！');
        return false;
      } else {
        if (data.isEdit) {
          this.$set(data, 'isEdit', false);
          console.log(data.isEdit);
        }
        this.$nextTick(() => {
          this.$refs['slotTreeInput' + data.id].$refs.input.focus();
        });
      }
    },
    // æŸ¥è¯¢
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === '二级 3-1') {
        return type !== 'inner';
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
    },
    // é¼ æ ‡å³å‡»äº‹ä»¶
    rightClick(event, object, Node, element) {
      console.log(event, object);
      this.currentData = object;
      this.currentNode = Node;
      if (Node.level === 1) {
        this.firstLevel = true;
      } else {
        this.firstLevel = false;
      }
      this.menuVisible = true;

      this.$refs.card.$el.style.left = event.pageX + 20 + 'px';
      this.$refs.card.$el.style.top = event.pageY + 'px';
    },
    // é¼ æ ‡å·¦å‡»äº‹ä»¶
    handleLeftclick(data, node) {
      this.foo();
    },
    //  å–消鼠标监听事件 èœå•æ 
    foo() {
      this.menuVisible = false;
      //  è¦åŠæ—¶å…³æŽ‰ç›‘听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      document.removeEventListener('click', this.foo);
    },
    // å¢žåŠ åŒçº§èŠ‚点事件
    addSameLevelNode() {
      this.foo();
      let id = Math.ceil(Math.random() * 100);
      var data = { id: id, label: '新增节点' };
      this.$refs.tree.append(data, this.currentNode.parent);
    },
    // å¢žåŠ å­çº§èŠ‚点事件
    addChildNode() {
      this.foo();
      if (this.currentNode.level >= 2) {
        this.$message.error('最多只支两级！');
        return false;
      }
      this.appendNodetitle = this.currentData.label;
      this.dialogVisible = true;

      // let id = Math.ceil(Math.random() * 100);
      // var data = { id: id, label: '新增节点' };
      // this.$refs.tree.append(data, this.currentNode);
    },
    handleClose() {
      this.dialogVisible = false;
      this.addFormServer = {};
    },
    setAddServer() {
      debugger;
      var data = this.addFormServer;
      data.id = Math.ceil(Math.random() * 100);
      this.$refs.tree.append(data, this.currentNode);
      this.handleClose();
    },
    // åˆ é™¤èŠ‚点
    deleteNode() {
      this.foo();
      if (this.currentNode.level == 1) {
        this.$message.error('当前级别无法删除!');
        return false;
      }
      this.foo();
      this.$refs.tree.remove(this.currentNode);
    },

    // ç¼–辑节点
    editNode(data) {
      this.foo();
      this.currentData = data ? data : this.currentData;
      if (!this.currentData.isEdit) {
        this.$set(this.currentData, 'isEdit', true);
      }
      // èŽ·å–焦点
      this.$nextTick(() => {
        this.$refs['slotTreeInput' + this.currentData.id].focus();
      });
    },
    handleDragStart(node, ev) {
      console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
/* ç‚¹å‡»èŠ‚点时的选中颜色 */
.tree-container /deep/.el-tree-node.is-current > .el-tree-node__content {
  color: #409eff !important;
}

.tree-container /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tree-container /deep/ .el-icon-caret-right:before {
  content: '\e791';
  font-size: 18px;
}

.tree-container /deep/ .el-tree-node__expand-icon {
  margin-left: 15px;
  padding: 0px;
}

.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
  margin-left: 0px;
}

.tree-container /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
  // text-indent: 16px;
}

.tree-container /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree-container /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree-container /deep/ .el-tree-node:before {
  content: '';
  left: 10px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree-container /deep/ .el-tree-node:after {
  content: '';
  left: 10px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree-container /deep/ .el-tree-node:before {
  border-left: 1px dashed #ccc;
  bottom: 0px;
  height: 100%;
  top: -19px;
  width: 1px;
}

.tree-container /deep/ .el-tree-node:after {
  border-top: 1px dashed #ccc;
  height: 25px;
  top: 20px;
  width: 20px;
}

.el-tree-node :last-child:before {
  height: 40px;
}

.tree-container {
  margin: 10px;
}
.tree-container /deep/ .el-tree .el-tree-node {
  position: relative;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content {
  height: 34px;
  padding-left: 0px !important;
  border: none;
}
.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
  border-left: 1px dashed #ccc;
  height: 100%;
  top: 0;
  width: 1px;
  margin-left: 1px;
  margin-top: 0px;
  z-index: 8;
}
.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::before {
  border-left: 0px dashed #ccc;
  height: 100%;
  top: 0;
  width: 1px;
  margin-left: 1px;
  margin-top: 0px;
  z-index: 8;
}

.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
  border-top: 1px dashed #ccc;
  height: 1px;
  top: 18px;
  width: 13px;
  margin-left: 1px;
  z-index: 8;
}

.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::after {
  border-top: 0px dashed #ccc;
}

.tree-container .el-tree-node .el-tree-node__content::before,
.tree-container .el-tree-node .el-tree-node__content::after {
  content: '';
  position: absolute;
  right: auto;
}
/deep/.el-table__placeholder {
  padding-left: 8px;
}
/deep/.el-card__body {
  padding: 10px !important;
  > div {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    &:hover {
      color: #409eff;
    }
  }
}
/*.lalala {*/
/*position: relative;*/
/*}*/
.text {
  font-size: 14px;
}
.el-tree {
  width: 100%;
  margin-top: 10px;
}
.search {
  width: 100%;
}

.item {
  padding: 18px 0;
}

.add {
  cursor: pointer;
  margin-top: 10px;
}

.delete {
  margin: 10px 0;
  cursor: pointer;
}

.edit {
  margin-bottom: 10px;
  cursor: pointer;
}

.search {
  cursor: pointer;
}

.box-card {
  position: fixed;
  display: block;
  z-index: 10000;

  background-color: #fff;
  padding: 10px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .el-dialog {
  background: rgba(0, 0, 0, 0.6);
}
/deep/.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border: 1px solid;
}
/deep/.el-dialog__title {
  color: white;
}
/deep/ .el-select .el-input__inner {
  border-color: #fff !important;
}
/deep/.el-cascader .el-input__inner {
  border-color: #fff !important;
}
// è®¾ç½®è¾“入框的背景色、字体颜色、边框属性设置；
/deep/.el-input__inner {
  background-color: transparent !important ;
  color: #fff !important;
  border: 1px solid !important;
}
</style>

 src/views/Tools/maplayer.vue

@@ -10,30 +10,23 @@
      :left="data.left || left"
      :top="data.top || top + index * 42 + 'px'"
    >
      <div class="treeContainer">
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="id"
          draggable
          :expand-on-click-node="false"
          :auto-expand-parent="false"
          :default-expanded-keys="defaultExpanded"
          :default-checked-keys="defaultCheck"
        >
        </el-tree>
      </div>
   <div  >
    <layer-tree />

   </div>
    </Popup>
  </div>
</template>

<script>
import Popup from './Popup.vue';
import LayerTree from './LayerTree.vue'
export default {
  name: 'maplayer',

  components: {
    Popup,
    LayerTree
  },
  data() {
    return {
@@ -41,27 +34,10 @@
      PopupData: ['maplayer'],
      left: 'calc(100% - 330px)',
      top: 10,
      treeData: [],
      defaultCheck: [],
      defaultExpanded: [],
      selectNode: undefined,
      rightClickMenuDisplay: false,
      rightClickMenuStyle: {},
      isClickParent: false,
      isNewFold: false,
      newFoldName: undefined,
      mergeNode: false,
    };
  },
  computed: {},
  mounted() {
    this.treeData([
      { id: '82A0C3DE', name: '影像', children: [] },
      { id: '82C3DE', name: '地形', children: [] },
      { id: '4FE10400', name: '模型', children: [] },
      { id: '0A51CF71', name: '矢量', children: [] },
    ]);
  },
  mounted() {},
  methods: {
    // å…³é—­æ‰€æœ‰
    closeAll() {
@@ -107,8 +83,3 @@
</script>

<style scoped lang="less">
.text {
  margin-left: 15px;
  margin-right: 15px;
}
</style>

 src/views/exportMap/index.vue

@@ -38,7 +38,7 @@
          <el-form-item>
            <el-link
              style="color: white"
              @click="showMapApply = !showMapApply"
              @click="showMapApply = true"
              :underline="false"
              >出图申请
            </el-link></el-form-item
@@ -65,9 +65,9 @@
            <el-button plain size="mini" @click="setMapRemoveDraw()"
              >清除</el-button
            >
            <el-button plain size="mini" @click="setExportMapLayer"
            <!-- <el-button plain size="mini" @click="setExportMapLayer"
              >出图</el-button
            >
            > -->
          </el-form-item>
        </el-form>
      </div>
@@ -150,6 +150,12 @@
          </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">
@@ -235,6 +241,7 @@
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
import moment from 'moment';
export default {
  data() {
    return {
@@ -259,7 +266,11 @@
          id: 1,
          label: '图层',
          children: [
            { label: '阀室', value: '阀室' },
            {
              label: '阀室',
              value: '阀室',
              resource: 'http://192.168.20.39:9055/gisserver/wmsserver/lfgd',
            },
            { label: '站场', value: '站场' },
            { label: '管道中心线', value: '管道中心线' },
          ],
@@ -286,6 +297,13 @@
    this.initMap();
  },
  methods: {
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined || date === null) {
        return '';
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
@@ -299,9 +317,11 @@
      this.getShowMapList();
    },
    async getShowMapList() {
      const data = await exportSelectByPage(this.listdata);
      this.exportable = data.result;
      this.showMapList = true;
      const data = await exportSelectByPage(this.listdata);
      debugger;
      this.exportable = data.result;

      this.count = data.count;
    },
    setExportMapLayer(res) {
@@ -427,17 +447,17 @@
        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',
              srs: 'EPSG:4326',
              tiled: true,
              styles: '',
            },