background & tree

DAPlatform-front/src/components/textAnnotation/SelectText.vue

 <template>
-  <el-container>
+ <div class="select-container">
+  <el-container class="filter-container">
     <el-main style="background-color: #FFFFFF">
           <div style="overflow-y:auto;height:100%;">
             <div @mouseup="highlight()">
@@ -17,7 +18,6 @@
 <!--            弹窗-->
             <el-dialog title="请标注" :visible.sync="ifAlert">
               <div style="overflow: auto;height: 50vh">
-<!--                <div class="addTagTitle">选择标注对象</div>-->
                 <el-select v-model="value" placeholder="选择标注对象">
                   <el-option
                     v-for="item in options"
@@ -33,12 +33,12 @@
                   </span>
                 </div>
                 <el-tree
-                  :props="props"
-                  :load="loadNode"
-                  lazy
-                  show-checkbox
-                  @check-change="handleCheckChange">
-                </el-tree>
+  :data="data"
+  :props="defaultProps"
+  accordion
+  @node-click="handleNodeClick"
+  show-checkbox>
+</el-tree>
               </div>
               <div style="width: 100%;height: 5px"></div>
               <el-button type="primary" style="margin-top: 30px" @click="closeAddTag">确定</el-button>
@@ -48,6 +48,7 @@
         </el-main>
 
       </el-container>
+      </div>
 </template>
 
 <script>
@@ -59,9 +60,44 @@ export default {
       address: '那是我心中最美的“第三极”——第二次青藏科考青年说'
     }
     return {
-      props: {
-        label: 'name',
-        children: 'zones'
+      data: [{
+          label: '一级 1',
+          children: [{
+            label: '二级 1-1',
+            children: [{
+              label: '三级 1-1-1'
+            }]
+          }]
+        }, {
+          label: '一级 2',
+          children: [{
+            label: '二级 2-1',
+            children: [{
+              label: '三级 2-1-1'
+            }]
+          }, {
+            label: '二级 2-2',
+            children: [{
+              label: '三级 2-2-1'
+            }]
+          }]
+        }, {
+          label: '一级 3',
+          children: [{
+            label: '二级 3-1',
+            children: [{
+              label: '三级 3-1-1'
+            }]
+          }, {
+            label: '二级 3-2',
+            children: [{
+              label: '三级 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
         },
       count: 1,
       tableData: Array(20).fill(item),
@@ -107,119 +143,6 @@ export default {
     handleNodeClick(data) {
       console.log(data);
     },
-    loadNode(node, resolve) {
-
-      this.$axios.get('./../static/template.json').then((res) => {
-        var result = res.data.entityList;
-
-        console.log(result[0]["滑坡"])
-      })
-
-
-      if (node.level === 0) {
-        return resolve([{ name: 'region5' }, { name: 'region2' }]);
-      }
-      if (node.level > 3) return resolve([]);
-
-      var hasChild;
-
-      if (node.data.name === 'region1') {
-        hasChild = true;
-      } else if (node.data.name === 'region2') {
-        hasChild = false;
-      } else {
-        hasChild = Math.random() > 0.5;
-      }
-
-      setTimeout(() => {
-        var data;
-        if (hasChild) {
-          data = [{
-            name: 'zone' + this.count++
-          }, {
-            name: 'zone' + this.count++
-          }];
-        } else {
-          data = [];
-        }
-
-        resolve(data);
-      }, 500);
-    },
-    openTag: function () {
-      const h = this.$createElement
-      this.$msgbox({
-        title: '标注',
-        message: h('p', null, [
-          h('el-card', null, [
-            h('div', { style: 'color: teal' }, '实体1'),
-            h('el-checkbox', null, '属性1'),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性2 '),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性3 ')
-          ]),
-          h('br', null, ' '),
-          h('el-card', null, [
-            h('div', { style: 'color: teal' }, '实体2'),
-            h('el-checkbox', null, '属性1'),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性2 '),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性3 ')
-          ]),
-          h('br', null, ' '),,
-          h('el-card', null, [
-            h('div', { style: 'color: teal' }, '实体3'),
-            h('el-checkbox', null, '属性1'),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性2 '),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性3 '),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性4 ')
-          ]),
-          h('br', null, ' '),
-          h('el-card', null, [
-            h('div', { style: 'color: teal' }, '实体4'),
-            h('el-checkbox', null, '属性1'),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性2 '),
-            h('span', null, '    '),
-            h('el-checkbox', null, '属性3 ')
-          ])
-        ]),
-        showCancelButton: true,
-        confirmButtonText: '保存',
-        cancelBcanceluttonText: '还原',
-        beforeClose: (action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true
-            instance.confirmButtonText = '保存中...'
-            setTimeout(() => {
-              done()
-              setTimeout(() => {
-                instance.confirmButtonLoading = false
-              }, 100)
-            }, 300)
-          } else {
-            this.$router.replace('/deleteTag')
-            done()
-          }
-        }
-      }).then(action => {
-        const search = window.getSelection().toString()
-        this.msg = this.msg.map(item => {
-          let replaceReg = new RegExp(search, 'g')// 匹配关键字正则
-          let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替换v-html值
-          return item.replace(replaceReg, replaceString)
-        })
-        this.$message({
-          type: 'info',
-          message: 'action: ' + action
-        })
-      })
-    },
     toTextUndo: function () {
       this.$router.push('/')
     },
@@ -248,13 +171,21 @@ export default {
 }
 </script>
 
-<style>
-  .selectMain{
-    background-color: rgb(238, 241, 246);
+<style scoped lang='scss'>
+@import '@/assets/scss/config.scss';
+@import '@/assets/scss/mixin.scss';
+.select-container{
+  @include container;
+  .filter-container{
+    float: center;
+    width: 100%;
+    padding: 35px 40px 50px 40px;
+    @include whiteBoard;
   }
+}
   .msg{
     text-align:left;
-    font-size:16px;
+    font-size:18px;
     line-height: 30px;
 
   }
@@ -279,23 +210,4 @@ export default {
     margin-top: 15px;
     margin-bottom: 10px;
   }
-  .el-header {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
-
-  .el-aside {
-    color: #333;
-  }
-  .el-container{
-    height: 90%;
-  }
-  .el-main{
-    /*height: 100%;*/
-    padding: 0 0 0 20px;
-  }
-  .el-menu-item-group__title{
-    padding: 0;
-  }
 </style>