| | |
| | | <div class="lalala tree-container"> |
| | | <el-form ref="form"> |
| | | <el-form-item> |
| | | <el-select |
| | | v-model="$store.state.pigCode" |
| | | clearable |
| | | filterable |
| | | style="width :100%" |
| | | @change="prjChanged" |
| | | placeholder="请选择项目" |
| | | > |
| | | <el-option |
| | | v-for="item in menus" |
| | | :key="item.code" |
| | | :label="item.name" |
| | | :value="item.code" |
| | | > |
| | | <el-select v-model="$store.state.pigCode" clearable filterable style="width :100%" @change="prjChanged" |
| | | placeholder="请选择项目"> |
| | | <el-option v-for="item in menus" :key="item.code" :label="item.name" :value="item.code"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-input |
| | | placeholder="输入关键字进行过滤" |
| | | v-model="filterText" |
| | | class="search" |
| | | > |
| | | <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-tree |
| | | ref="tree" |
| | | :data="treeData" |
| | | node-key="id" |
| | | show-checkbox |
| | | :props="defaultProps" |
| | | @node-click="handleLeftclick" |
| | | @node-contextmenu="rightClick" |
| | | @check="handleCheckChange" |
| | | :default-checked-keys="handleTreeCheck" |
| | | :expand-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | > |
| | | <span |
| | | class="slot-t-node" |
| | | slot-scope="{ node, data }" |
| | | > |
| | | <el-tree ref="tree" :data="treeData" node-key="id" show-checkbox :props="defaultProps" @node-click="handleLeftclick" |
| | | @node-contextmenu="rightClick" @check="handleCheckChange" :default-checked-keys="handleTreeCheck" |
| | | :expand-on-click-node="false" :filter-node-method="filterNode"> |
| | | <span class="slot-t-node" slot-scope="{ node, data }"> |
| | | <span v-show="!data.isEdit"> |
| | | <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{ |
| | | node.label |
| | | }}</span> |
| | | 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> |
| | | <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 |
| | | class="edit" |
| | | @click="showLayerAttribute()" |
| | | v-if="showProp && !shwoHistogram" |
| | | > |
| | | <el-card class="box-card" ref="card" :style="{ ...rightClickMenuStyle }" v-show="menuVisible"> |
| | | <div class="edit" @click="showLayerAttribute()" v-if="showProp && !shwoHistogram"> |
| | | <i class="el-icon-tickets"></i> 属性 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="positioning()" |
| | | v-if="showLocal" |
| | | > |
| | | <div class="edit" @click="positioning()" v-if="showLocal"> |
| | | <i class="el-icon-tickets"></i> 定位 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="pellucidity()" |
| | | v-if="showOpacity" |
| | | > |
| | | <div class="edit" @click="pellucidity()" v-if="showOpacity"> |
| | | <i class="el-icon-tickets"></i> 透明度 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | @click="histogram()" |
| | | v-show="shwoHistogram" |
| | | > |
| | | <div class="edit" @click="histogram()" v-show="shwoHistogram"> |
| | | <i class="el-icon-tickets"></i> 钻孔柱状图 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | v-show="shwoTileDown" |
| | | @click="tileDownload()" |
| | | > |
| | | <div class="edit" v-show="shwoTileDown" @click="tileDownload()"> |
| | | <i class="el-icon-download"></i> 瓦片下载 |
| | | </div> |
| | | <div |
| | | class="edit" |
| | | v-show="shwoAnnex" |
| | | @click="annexDownload()" |
| | | > |
| | | <div class="edit" v-show="shwoAnnex" @click="annexDownload()"> |
| | | <i class="el-icon-tickets"></i> 附件 |
| | | </div> |
| | | </el-card> |
| | |
| | | this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 瓦片下载 |
| | | this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 菜单 |
| | | this.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//附件 |
| | | this.$refs.card.$el.style.left = event.pageX + 20 + "px"; |
| | | |
| | | |
| | | var left = window.innerWidth - 140; |
| | | var pageLeft = event.pageX + 20 |
| | | if(pageLeft>left){ |
| | | pageLeft = left - 25 |
| | | } |
| | | |
| | | this.$refs.card.$el.style.left =pageLeft+ "px"; |
| | | this.$refs.card.$el.style.top = event.pageY + "px"; |
| | | }, |
| | | // 属性显示 |
| | |
| | | </script> |
| | | <style scoped lang="less"> |
| | | /* 点击节点时的选中颜色 */ |
| | | .tree-container /deep/.el-tree-node.is-current > .el-tree-node__content { |
| | | .tree-container /deep/.el-tree-node.is-current>.el-tree-node__content { |
| | | color: #409eff !important; |
| | | } |
| | | |
| | |
| | | padding-left: 16px; |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree > .el-tree-node:before { |
| | | .tree-container /deep/ .el-tree>.el-tree-node:before { |
| | | border-left: none; |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree > .el-tree-node:after { |
| | | .tree-container /deep/ .el-tree>.el-tree-node:after { |
| | | border-top: none; |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree > .el-tree-node:before { |
| | | .tree-container /deep/ .el-tree>.el-tree-node:before { |
| | | border-left: none; |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree > .el-tree-node:after { |
| | | .tree-container /deep/ .el-tree>.el-tree-node:after { |
| | | border-top: none; |
| | | } |
| | | |
| | |
| | | z-index: 8; |
| | | } |
| | | |
| | | .tree-container |
| | | /deep/ |
| | | .el-tree-node |
| | | .el-tree-node__children |
| | | .el-tree-node__content::before { |
| | | .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before { |
| | | border-left: 0px dashed #ccc; |
| | | height: 100%; |
| | | top: 0; |
| | |
| | | } |
| | | |
| | | .tree-container /deep/ .el-tree-node { |
| | | .is-leaf + .el-checkbox .el-checkbox__inner { |
| | | .is-leaf+.el-checkbox .el-checkbox__inner { |
| | | display: inline-block; |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | .tree-container |
| | | /deep/ |
| | | .el-tree-node |
| | | .el-tree-node__children |
| | | .el-tree-node__content::after { |
| | | .tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after { |
| | | border-top: 0px dashed #ccc; |
| | | } |
| | | |
| | |
| | | /deep/.el-card__body { |
| | | padding: 10px !important; |
| | | |
| | | > div { |
| | | >div { |
| | | padding-bottom: 10px; |
| | | border-bottom: 1px solid #ccc; |
| | | |