样式修改

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -1,19 +1,28 @@
 <template>
-    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick" v-if="store.state.query_pick_last_pane">
+    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick"
+        v-if="store.state.query_pick_last_pane">
         <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
-            <span v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
+            <div class="list_vector_multi" v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
                 v-if="item_last.filed != 'geom'">
-                <p>{{ item_last.filedZH }} {{ item_last.data }}</p>
-            </span>
+                <span>{{ item_last.filedZH }}： {{ item_last.data }}</span>
+            </div>
         </el-tab-pane>
 
         <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">
 
-            <el-collapse v-for="(value, index_item) in item.value" :key="index_item" v-model="activeNames"
-                @change="handleChange">
+            <el-collapse v-for="(value, index_item) in item.value" :key="index_item" @change="handleChange">
                 <el-collapse-item :title="'地块' + (index_item + 1)" name="1">
-                    <div v-for="(value_field, index_field) in value" :key="index_field" v-if="value_field.filed != 'geom'">
-                        {{ value_field.filedZH }} :{{ value_field.data }}</div>
+                    <div class="list_vector_multi" v-for="(value_field, index_field) in value" :key="index_field"
+                        @click="go(value)" v-if="value_field.filed != 'geom'">
+
+                        <div class="filed_box">
+                            {{ value_field.filedZH }}
+                        </div>
+                        :
+                        <div class="filed_box">
+                            {{ value_field.data }}
+                        </div>
+                    </div>
 
                 </el-collapse-item>
             </el-collapse>
@@ -41,6 +50,16 @@ export default {
     watch: {},
     //方法集合
     methods: {
+        go(e) {
+            console.log();
+
+            e.forEach(element => {
+                if (element.filed =="geom") {
+
+                }
+            });
+
+        },
         handleChange(val) {
             // console.log(val);
         },
@@ -80,7 +99,9 @@ export default {
 
                 const wkt = wellknown.stringify(geojsonPoint);
                 let obj = {
-                    "wkt": wkt,
+                    "wkt": 'POINT (109.5148879995491 18.315185320357678)',
+                    // "wkt": wkt,
+
                     "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
                 }
                 GetTableData(obj).then(res => {
@@ -88,7 +109,6 @@ export default {
                         name: res.data.dataname,
                         value: res.data.data[0]
                     };
-                    console.log('store.state.query_pick_last_pane: ', store.state.query_pick_last_pane);
 
                     res.data.child.forEach(element => {
                         if (element.data.length > 1) {
@@ -100,7 +120,6 @@ export default {
                     });
                 })
 
-                console.log(store.state.query_pick_pane, "that.pane");
 
 
                 that.handler_multi_level_query.destroy();
@@ -155,6 +174,36 @@ export default {
     color: #64daff !important;
     font-weight: 600;
 }
+
+
+.el-tab-pane {
+    height: 33rem;
+    overflow: auto;
+}
+
+
+.list_vector_multi {
+    background-image: url("/static/images/ghzc/内容框.png");
+
+    width: 18rem;
+    border-top: 1px solid #CCC;
+    font-size: 14px;
+    padding: 0.1rem 0rem 0.1rem 0rem;
+    border-left: 1px solid #CCC;
+
+    border-right: 1px solid #CCC;
+
+    // border-bottom:1px solid #CCC ;
+}
+
+.list_vector_multi:last-child {
+
+    border-bottom: 1px solid #CCC;
+}
+
+.filed_box {
+    display: inline-block;
+}
 </style>