|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <div class="content-container">
|
|
|
+ <div class="list-group">
|
|
|
+ <el-row class="title-bar">
|
|
|
+ <p class="page-title"><i class="el-icon-place" /> 采空区</p>
|
|
|
+ </el-row>
|
|
|
+ <vuescroll :ops="ops" style="height: calc(100% - 40px);">
|
|
|
+ <el-tree
|
|
|
+ ref="RiskPointTree"
|
|
|
+ node-key="riskPointId"
|
|
|
+ :data="treeData"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :default-expand-all="true"
|
|
|
+ :props="defaultProps"
|
|
|
+ :highlight-current="true"
|
|
|
+ :default-expanded-keys="expandDefault"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+import Vuescroll from 'vuescroll'
|
|
|
+import { getGoafBaseInfo } from '@/api/goaf/info'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Vuescroll
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ops: {
|
|
|
+ bar: {
|
|
|
+ keepShow: false,
|
|
|
+ background: 'rgba(144, 147, 153, 0.4)',
|
|
|
+ onlyShowBarOnScroll: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ treeData: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'goafName'
|
|
|
+ },
|
|
|
+ expandDefault: [],
|
|
|
+ checkDefault: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ checkDefault(val) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.querySelector('.el-tree-node__content').click()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ getGoafBaseInfo().then((resp) => {
|
|
|
+ const { code, data } = resp
|
|
|
+ if (code === 0) {
|
|
|
+ this.treeData = data
|
|
|
+ if (data.length > 0) {
|
|
|
+ const node = data[0]
|
|
|
+ this.handleTreeInit(node)
|
|
|
+ this.checkDefault.push(node.riskPointId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickItem(event, data) {
|
|
|
+ this.$contextmenu({
|
|
|
+ items: [
|
|
|
+ ],
|
|
|
+ event,
|
|
|
+ customClass: 'class-a',
|
|
|
+ zIndex: 3,
|
|
|
+ minWidth: 230
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ },
|
|
|
+
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.$emit('nodeClick', data)
|
|
|
+ },
|
|
|
+ handleTreeInit(data) {
|
|
|
+ this.$emit('treeInit', data)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.content-container {
|
|
|
+ margin: 10px;
|
|
|
+
|
|
|
+ .title-bar {
|
|
|
+ position: relative;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #113849;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFF;
|
|
|
+ margin: 0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 14px;
|
|
|
+ color: #5181A2;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 0px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-group {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .send-menu {
|
|
|
+ width: 100%;
|
|
|
+ background: #3D5F76;
|
|
|
+ color: #FFF;
|
|
|
+ border-color: #3D5F76;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #283c4c;
|
|
|
+ color: #FFF;
|
|
|
+ border-color: #283c4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-group {
|
|
|
+ height: calc(100vh - 105px);
|
|
|
+ background: #193142;
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #FFF;
|
|
|
+ padding: 0 30px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #08A6DC;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ top: calc(50% - 3.5px);
|
|
|
+ right: -3px;
|
|
|
+ border-left: 7px solid transparent;
|
|
|
+ border-right: 7px solid transparent;
|
|
|
+ border-bottom: 7px solid #08A6DC;
|
|
|
+ transform: rotate(270deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .right-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 14px;
|
|
|
+ background: #5181A2;
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border: 1px solid #3D6F91;
|
|
|
+ line-height: 14px;
|
|
|
+ font-size: 10px;
|
|
|
+ display: none;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .right-icon {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
