详情点击

src/components/numerical.vue

@@ -40,6 +40,7 @@
         empty-text="该区域暂无数据"
         style="width: 100%;overflow-y: auto;"
         height="240"
+        @row-click="detailClick"
       >
         <el-table-column
           :label="item.title"
@@ -52,6 +53,18 @@
         </el-table-column>
       </el-table>
     </div>
+    <div class="bottom-info" v-if="showBottomInfo&&isShowDetails">
+      截止目前，在{{$store.state.addr.selectAddr}}内，
+      {{bottomInfo.courseName}}项目有
+      {{bottomInfo.smallClassCount}}个小班，
+      累计占地面积{{bottomInfo.landArea}}亩，
+      累计蓄积量{{bottomInfo.smallClassStock}}平方米，
+      其中
+      <span v-for="(tree,index) in bottomInfo.treeList" :key="index">
+        {{tree.name}}{{tree.value}}株<i v-if="index<=bottomInfo.length">,</i><i v-else>。</i>
+      </span>
+      <!-- xx树累计xxxx株，xx树累计xxxxx株。 -->
+    </div>
   </div>
 </template>
 
@@ -83,9 +96,23 @@ export default {
       isShowDetails: false,
       headerList: [],
       detailsData: [],
-      hotKey: Date.now()
+      hotKey: Date.now(),
+      showBottomInfo:false,
+      bottomInfo:{},
+      forestDetailTreeList:[],
     };
   },
+  watch:{
+    isShowDetails: {
+      handler: function(n,o) {
+          if(!n){
+            this.showBottomInfo=false
+          }
+      },
+      // deep: true,
+      immediate: true
+    }
+  },
   created() {
     // console.log('data',this.data);
   },
@@ -125,8 +152,12 @@ export default {
       forestFarmDetail(param)
         .then((res) => {
           let resData = res.rows;
+          this.forestDetailTreeList = resData.map((item) =>{
+            return item.treeList
+          });
+          // console.log('this.forestDetailTreeList',this.forestDetailTreeList);
           this.detailsData = resData;
-          // console.log('forestFarmDetail res',this.detailsData);
+          console.log('forestFarmDetail res',this.detailsData);
 
           resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
         })
@@ -166,7 +197,7 @@ export default {
         let titles = {};
         if (this.pageName == 'forest') {
           titles = {
-            forestName: '林场名称',
+            courseName: '项目名称',
             smallClassStock: '蓄积量(m³)',
             landArea: '占地面积(亩)',
             smallClassCount: '小班数量'
@@ -192,10 +223,13 @@ export default {
       });
 
       let newData = JSON.parse(JSON.stringify(data1));
-
+      console.log('this.pageName',this.pageName);
+      console.log('newData',newData);
       if (this.pageName == 'economics') {
         newData.splice(1, 1); //删除基地数量
         newData.splice(2, 1); //删除作物数量
+      }else if(this.pageName == 'forest'){
+        newData.splice(4, 1); //删除treeList
       }
 
       this.headerList = newData;
@@ -207,6 +241,12 @@ export default {
       if (!detailRef.contains(e.target) && this.isShowDetails) {
         this.isShowDetails = false;
       }
+    },
+    detailClick(row){
+      this.showBottomInfo = true;
+      this.bottomInfo = row;
+      console.log('detailClick row',row);
+
     }
   }
 };
@@ -298,6 +338,20 @@ export default {
   }
    
 }
+.bottom-info{
+  position: fixed;
+  box-sizing: border-box;
+  left: 50%;
+  bottom: 35px;
+  width: 30vw;
+  padding: 24px;
+  transform: translateX(-15vw);
+  background: url(../assets/img/bottom-info-bg.png) no-repeat;
+  background-size: 100% 100%;
+  line-height: 24px;
+  font-size: 14px;
+  color: #08EEFF;
+}
 
 @media only screen and (max-width: 1280px) {
   //概况

src/views/index.vue

@@ -3,13 +3,13 @@
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
  * @LastEditors: gcz
- * @LastEditTime: 2022-10-20 11:17:38
+ * @LastEditTime: 2022-10-21 14:45:40
  * @FilePath: \ntbigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
   <div class>
-    <dv-full-screen-container>
+    <!-- <dv-full-screen-container> -->
       <Map></Map>
       <Header></Header>
 
@@ -173,7 +173,7 @@
           </div>
         </section>
       </section>
-    </dv-full-screen-container>
+    <!-- </dv-full-screen-container> -->
   </div>
 </template>