|
@@ -13,7 +13,7 @@
|
|
<!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
|
|
<!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
|
|
<div class="item-wrap">
|
|
<div class="item-wrap">
|
|
<div class="inner u-flex u-flex-wrap">
|
|
<div class="inner u-flex u-flex-wrap">
|
|
- <div class="numerical-item" v-for="(item,index) in data" @click="showDetails" :key="item.name+index">
|
|
|
|
|
|
+ <div class="numerical-item" v-for="(item,index) in data" @click="showDetails(item)" :key="item.name+index">
|
|
<div class="cell name">{{item.name}}</div>
|
|
<div class="cell name">{{item.name}}</div>
|
|
<span class="cell number">{{item.number}}</span>
|
|
<span class="cell number">{{item.number}}</span>
|
|
<span class="cell unit">{{item.unit}}</span>
|
|
<span class="cell unit">{{item.unit}}</span>
|
|
@@ -21,7 +21,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-wrap" v-show="isShowDetails" ref="detailRef">
|
|
<div class="detail-wrap" v-show="isShowDetails" ref="detailRef">
|
|
- <el-table :data="detailsData" style="width: 100%;max-height: 80vh;overflow-y: auto;" >
|
|
|
|
|
|
+ <el-table :key="hotKey" :data="detailsData" style="width: 100%;overflow-y: auto;" :height="pageName=='economics'?425:null" >
|
|
|
|
|
|
<el-table-column :label="item.title" :prop="item.value" v-for="(item, index) in headerList" :key="index" align="center">
|
|
<el-table-column :label="item.title" :prop="item.value" v-for="(item, index) in headerList" :key="index" align="center">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
@@ -57,7 +57,8 @@
|
|
return {
|
|
return {
|
|
isShowDetails:false,
|
|
isShowDetails:false,
|
|
headerList:[],
|
|
headerList:[],
|
|
- detailsData:[]
|
|
|
|
|
|
+ detailsData:[],
|
|
|
|
+ hotKey: Date.now(),
|
|
|
|
|
|
};
|
|
};
|
|
},
|
|
},
|
|
@@ -71,8 +72,15 @@
|
|
document.removeEventListener('click',this.outClick)
|
|
document.removeEventListener('click',this.outClick)
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- showDetails(){
|
|
|
|
|
|
+ showDetails(item){
|
|
// console.log('pageName',this.pageName);
|
|
// console.log('pageName',this.pageName);
|
|
|
|
+
|
|
|
|
+ //排除触发字段
|
|
|
|
+ let excludeArr = ['优势树种']
|
|
|
|
+ if(excludeArr.includes(item.name)){
|
|
|
|
+ this.isShowDetails = false;
|
|
|
|
+ return
|
|
|
|
+ }
|
|
let page = {
|
|
let page = {
|
|
forest: this.getForestData,
|
|
forest: this.getForestData,
|
|
treeSpecies: this.getTreeSpeciesData,
|
|
treeSpecies: this.getTreeSpeciesData,
|
|
@@ -144,7 +152,15 @@
|
|
});
|
|
});
|
|
|
|
|
|
let newData = JSON.parse(JSON.stringify(data1));
|
|
let newData = JSON.parse(JSON.stringify(data1));
|
|
|
|
+
|
|
|
|
+ if(this.pageName=='economics'){
|
|
|
|
+ newData.splice(1,1);//删除基地数量
|
|
|
|
+ newData.splice(2,1);//删除作物数量
|
|
|
|
+ }
|
|
|
|
+
|
|
this.headerList = newData;
|
|
this.headerList = newData;
|
|
|
|
+ // console.log('this.headerList',this.headerList);
|
|
|
|
+ this.hotKey = Date.now()
|
|
},
|
|
},
|
|
outClick(e){
|
|
outClick(e){
|
|
let detailRef=this.$refs.numericalRef
|
|
let detailRef=this.$refs.numericalRef
|
|
@@ -198,7 +214,7 @@
|
|
top: 0;
|
|
top: 0;
|
|
right: -115%;
|
|
right: -115%;
|
|
z-index: 99;
|
|
z-index: 99;
|
|
- min-width: 100%;
|
|
|
|
|
|
+ width: 115%;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgb(2, 238, 255);
|
|
border: 1px solid rgb(2, 238, 255);
|