驾驶舱图斑上图实体查询点击无详情面板的问题

src/components/Query/clickQuery/CockpitVector.vue

@@ -1,51 +1,33 @@
 <template>
   <div class="CockpitVectorBox">
     <div class="cockpit_vector">
-      <el-table
-        :header-cell-style="{
-          background: 'rgba(10, 25, 38, 0.6)',
-          color: '#66b1ff',
-          fontSize: '14px',
-          fontFamily: 'Microsoft YaHei',
-          fontWeight: '400',
-        }"
-        :data="
-          baseData.filter(
-            (item) =>
-              item.name !== 'id' &&
-              item.name !== 'geom' &&
-              item.name !== 'type' &&
-              item.name !== 'create_time' &&
-              item.name !== 'val1' &&
-              item.name !== 'val2' &&
-              item.name !== 'xmmc' &&
-              item.name !== 'zlmj' &&
-              item.name !== 'tzje' &&
-              item.name !== 'dataid' &&
-              item.name !== 'did'
-          )
-        "
-        style="width: 100%"
-      >
-        <el-table-column
-          show-overflow-tooltip="true"
-          prop="name"
-          label="属性"
-          width="140"
-        >
+      <el-table :header-cell-style="{
+        background: 'rgba(10, 25, 38, 0.6)',
+        color: '#66b1ff',
+        fontSize: '14px',
+        fontFamily: 'Microsoft YaHei',
+        fontWeight: '400',
+      }" :data="baseData.length > 0 ? baseData.filter(
+        (item) =>
+          item.name !== 'id' &&
+          item.name !== 'geom' &&
+          item.name !== 'type' &&
+          item.name !== 'create_time' &&
+          item.name !== 'val1' &&
+          item.name !== 'val2' &&
+          item.name !== 'xmmc' &&
+          item.name !== 'zlmj' &&
+          item.name !== 'tzje' &&
+          item.name !== 'dataid' &&
+          item.name !== 'did'
+      ) : []
+        " style="width: 100%">
+        <el-table-column show-overflow-tooltip prop="name" label="属性" width="140">
         </el-table-column>
-        <el-table-column
-          show-overflow-tooltip="true"
-          prop="value"
-          label="属性值"
-        >
+        <el-table-column show-overflow-tooltip prop="value" label="属性值">
         </el-table-column>
       </el-table>
-      <div
-        id="seaTransferCharts"
-        ref="echartsRef"
-        v-if="store.state.vectordataid"
-      ></div>
+      <div id="seaTransferCharts" ref="echartsRef" v-if="store.state.vectordataid"></div>
     </div>
   </div>
 </template>
@@ -263,9 +245,9 @@ export default {
             const name1 =
               name.length > 10
                 ? `${name.substring(0, 10)} <br /> ${name.substring(
-                    10,
-                    name.length
-                  )}`
+                  10,
+                  name.length
+                )}`
                 : name;
             return `${name1} ${value}公顷`;
           },
@@ -319,9 +301,9 @@ export default {
       myChart.setOption(option);
     },
   },
-  beforeCreate() {}, //生命周期 - 创建之前
-  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() {}, //生命周期 - 挂载之前
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
   mounted() {
     const that = this;
     this.$nextTick(() => {
@@ -329,15 +311,15 @@ export default {
       viewer.dataSources.add(pick_entity);
     }); //生命周期 - 挂在完成
   }, //生命周期 - 挂在完成
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroy() {}, //生命周期 - 销毁完成
-  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { }, //生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped lang="scss">
+<style scoped lang="scss">
 .CockpitVectorBox {
   // color: #198ec0;
   position: absolute;
@@ -472,6 +454,7 @@ export default {
 .el-table::before {
   background: rgba(10, 25, 38, 0) !important;
 }
+
 #seaTransferCharts {
   width: 100%;
   height: 13rem;

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -8,94 +8,49 @@
           <i class="el-icon-thumb"></i>
           图斑详情查询
         </span>
-        <i
-          class="el-icon-close"
-          v-if="$route.path == '/overview'"
-          @click="close"
-        ></i>
+        <i class="el-icon-close" v-if="$route.path == '/overview'" @click="close"></i>
       </h2>
       <template v-if="islist">
-        <el-input
-          v-if="word"
-          clearable
-          v-model="state"
-          @input="change_witch"
-          class="search"
-          placeholder="请输入内容"
-        ></el-input>
+        <el-input v-if="word" clearable v-model="state" @input="change_witch" class="search"
+          placeholder="请输入内容"></el-input>
         <div class="searchDiv" v-else>
           <div class="sidiv" v-for="sitem in searchs" :key="sitem.key">
-            <el-input
-              v-if="sitem.type == 'input'"
-              clearable
-              v-model="searchform[sitem.key]"
-              @input="change_witch"
-              class="search"
-              :placeholder="sitem.label"
-            ></el-input>
-            <el-select
-              v-else-if="sitem.type == 'select'"
-              clearable
-              v-model="searchform[sitem.key]"
-              :placeholder="sitem.label"
-              @change="change_witch"
-            >
-              <el-option
-                v-for="item in sitem.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
+            <el-input v-if="sitem.type == 'input'" clearable v-model="searchform[sitem.key]" @input="change_witch"
+              class="search" :placeholder="sitem.label"></el-input>
+            <el-select v-else-if="sitem.type == 'select'" clearable v-model="searchform[sitem.key]"
+              :placeholder="sitem.label" @change="change_witch">
+              <el-option v-for="item in sitem.options" :key="item.value" :label="item.label"
+                :value="item.value"></el-option>
             </el-select>
             <!-- clearable -->
-            <el-cascader
-              v-else-if="sitem.type == 'cascader'"
-              v-model="searchform[sitem.key]"
-              :show-all-levels="false"
-              :options="sitem.options"
-              :placeholder="sitem.label"
-              :props="{
+            <el-cascader v-else-if="sitem.type == 'cascader'" v-model="searchform[sitem.key]" :show-all-levels="false"
+              :options="sitem.options" :placeholder="sitem.label" :props="{
                 checkStrictly: true,
                 expandTrigger: 'hover',
                 emitPath: false,
-              }"
-              @change="change_witch"
-            ></el-cascader>
+              }" @change="change_witch"></el-cascader>
           </div>
         </div>
         <div v-if="cockpit_vector.showtotal" class="shownum">
           上报总数量：{{ active_dableData.length }}个
         </div>
-        <el-table
-          :row-class-name="tableRowClassName"
-          ref="singleTable"
-          :data="active_dableData"
-          style="width: 100%"
-          height="670"
-          :header-cell-style="{
+        <el-table :row-class-name="tableRowClassName" ref="singleTable" :data="active_dableData" style="width: 100%"
+          height="670" :header-cell-style="{
             background: 'rgba(10, 25, 38, 0.6)',
             color: '#66b1ff',
             fontSize: '14px',
             fontFamily: 'Microsoft YaHei',
             fontWeight: '400',
-          }"
-        >
-          <el-table-column
-            show-overflow-tooltip="true"
-            v-for="(item, index) in store.state.cockpit_vector.columns"
-            :key="index"
-            :width="index ? 100 : cockpit_vector.columns.length > 2 ? 150 : 230"
-            :prop="item"
-            :label="item"
-          >
+          }">
+          <el-table-column show-overflow-tooltip="true" v-for="(item, index) in store.state.cockpit_vector.columns"
+            :key="index" :width="index ? 100 : cockpit_vector.columns.length > 2 ? 150 : 230" :prop="item"
+            :label="item">
           </el-table-column>
 
           <el-table-column fixed="right" label="操作" width="50">
             <template slot-scope="scope">
               <!-- <el-button @click="info(scope.row)" type="text" size="small">详情</el-button> -->
-              <el-button @click="go(scope.row)" type="text" size="small"
-                >定位</el-button
-              >
+              <el-button @click="go(scope.row)" type="text" size="small">定位</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -105,29 +60,20 @@
     <div class="sm-panel sm-function-module-query" v-if="isShallow" v-drag>
       <div class="sm-panel-header">
         <span>详情</span>
-        <i class="el-icon-close" @click="isShallow = false"></i>
+        <i class="el-icon-close" @click="closeIsShallow"></i>
       </div>
-      <el-tabs
-        type="border-card"
-        class="xz_box info"
-        v-model="activeTabs"
-        stretch
-      >
+      <el-tabs type="border-card" class="xz_box info" v-model="activeTabs" stretch>
         <el-tab-pane label="基本信息" name="base">
           <CockpitVector :baseData="details"></CockpitVector>
         </el-tab-pane>
         <!-- -->
-        <el-tab-pane
-          label="全过程管理信息"
-          name="qgc"
-          v-if="title.includes('山水工程')"
-        >
+        <el-tab-pane label="全过程管理信息" name="qgc" v-if="title.includes('山水工程')">
         </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
-  
+
 <script>
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import * as tdsy from "@/views/cockpit/js/tdsy";
@@ -168,7 +114,14 @@ export default {
     };
   },
   methods: {
+    closeIsShallow() {
+      this.isShallow = false
+      store.state.vectorData = []
+    },
     cockpit() {
+      if (!this.isShallow) {
+        this.isShallow = true
+      }
       //驾驶舱矢量数据点选查询
       pick_cockpit_vector.init_handler();
     },
@@ -334,7 +287,7 @@ export default {
       store.state.vectorData = [];
       store.hideToolBar();
     },
-    info() {},
+    info() { },
     switch_show(flag) {
       BoxCommonVector_entity.entities.values.forEach((res) => {
         res.show = flag;
@@ -567,16 +520,13 @@ export default {
     get_searchWord() {
       if (this.state.length == 0) {
         this.active_dableData = this.tableData;
-        console.log("this.active_dableData: ", this.active_dableData);
       } else {
         // console.log('this.tableData: ', this.tableData);
         // this.active_dableData = this.tableData.filter((item) => {
         //     item.项目名称.indexOf(word) >= 0
         // })
-        console.log("this.tableData: ", this.word);
 
         this.active_dableData = this.tableData.filter((item) => {
-          console.log("item: ", item);
           if (item[this.word] && this.state) {
             return item[this.word].indexOf(this.state) >= 0;
           }
@@ -586,7 +536,6 @@ export default {
     },
     async init_vector(params) {
       const that = this;
-      console.log(store.state.cockpit_date, "--");
       let obj = {
         jscType: store.state.cockpit_vector.tablejscType,
         beginTime: store.state.cockpit_date[0],
@@ -630,7 +579,6 @@ export default {
   watch: {
     cockpit_vector(newVal, oldVal) {
       this.title = newVal.title;
-      console.log("---", newVal);
       this.word = newVal.word;
       this.searchs = newVal.searchs;
       this.searchform = newVal.searchform;
@@ -680,7 +628,6 @@ export default {
 
         layerSources[oldVal] = null;
       }
-      console.log(newVal, oldVal, "----");
     },
     computed_vectorData(newVal, oldVal) {
       this.details = newVal;
@@ -713,23 +660,27 @@ export default {
   },
 };
 </script>
-  
+
 
 
 <style lang="scss" scoped>
 @import "../../../complianceAnalysis//ghzc.scss";
+
 div::-webkit-scrollbar {
   width: 9px;
   height: 19px;
 }
+
 .sm-panel {
   width: 400px;
   height: 700px;
   z-index: 999999;
 }
+
 .CockpitVectorBox {
   top: 0px !important;
 }
+
 .BoxCommonVector {
   width: 100%;
   height: 100%;
@@ -747,11 +698,13 @@ div::-webkit-scrollbar {
   background-image: url("/static/images/ghzc/内容框.png");
   background-size: 100% 100%;
   border-top-right-radius: 15px;
+
   .searchDiv {
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-right: 10px;
+
     .sidiv {
       //   min-width: calc(50% - 10px);
       height: 40px;
@@ -760,6 +713,7 @@ div::-webkit-scrollbar {
       display: inline-block;
     }
   }
+
   .shownum {
     line-height: 20px;
     padding-top: 10px;
@@ -823,6 +777,7 @@ div::-webkit-scrollbar {
     color: #ffffff;
     margin-left: 30px;
   }
+
   .clearBtn {
     cursor: pointer;
     // background-color: #3f94f53f;
@@ -907,6 +862,7 @@ div::-webkit-scrollbar {
 
   border-bottom: 0px solid #ebeef5;
 }
+
 /deep/.el-table th.el-table__cell {
   background: rgba(10, 25, 38, 0.5) !important;
 }
@@ -949,4 +905,3 @@ div::-webkit-scrollbar {
   }
 }
 </style>
-