|
|
@@ -1,9 +1,9 @@
|
|
|
<!--
|
|
|
- * @LastEditors: gcz
|
|
|
+ * @LastEditors: wangcc 1053578651@qq.com
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="numerical" ref="numericalRef">
|
|
|
- <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
|
|
|
+ <div class="ntitle">{{ $store.state.addr.selectAddr }}{{ ntitle }}</div>
|
|
|
<!-- <div class="ntitle">
|
|
|
<span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
|
|
|
<span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
|
|
|
@@ -15,53 +15,32 @@
|
|
|
<div class="inner u-flex u-flex-wrap">
|
|
|
<!-- @mouseenter="showDetails(item)"
|
|
|
@mouseleave="unShowDetails" -->
|
|
|
- <div
|
|
|
- class="numerical-item"
|
|
|
- v-for="(item,index) in data"
|
|
|
- @click="showDetails(item)"
|
|
|
- :key="item.name+index"
|
|
|
- >
|
|
|
- <div class="cell name">{{item.name}}</div>
|
|
|
- <span class="cell number">{{item.number}}</span>
|
|
|
- <span class="cell unit">{{item.unit}}</span>
|
|
|
+ <div class="numerical-item" v-for="(item, index) in data" @click="showDetails(item)" :key="item.name + index">
|
|
|
+ <div class="cell name">{{ item.name }}</div>
|
|
|
+ <span class="cell number">{{ item.number }}</span>
|
|
|
+ <span class="cell unit">{{ item.unit }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="detail-wrap"
|
|
|
- @mouseenter="isShowDetails=true"
|
|
|
- @mouseleave="isShowDetails=false"
|
|
|
- v-show="isShowDetails"
|
|
|
- ref="detailRef"
|
|
|
- >
|
|
|
- <el-table
|
|
|
- :key="hotKey"
|
|
|
- :data="detailsData"
|
|
|
- empty-text="该区域暂无数据"
|
|
|
- style="width: 100%;overflow-y: auto;"
|
|
|
- height="240"
|
|
|
- @row-click="detailClick"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- :label="item.title"
|
|
|
- :prop="item.value"
|
|
|
- v-for="(item, index) in headerList"
|
|
|
- :key="index"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- <template slot-scope="scope">{{scope.row[item.value]||'-'}}</template>
|
|
|
+ <div class="detail-wrap" @mouseenter="isShowDetails = true" @mouseleave="isShowDetails = false" v-show="isShowDetails"
|
|
|
+ ref="detailRef">
|
|
|
+ <el-table :key="hotKey" :data="detailsData" empty-text="该区域暂无数据" style="width: 100%;overflow-y: auto;"
|
|
|
+ height="240" @row-click="detailClick">
|
|
|
+ <el-table-column :label="item.title" :prop="item.value" v-for="(item, index) in headerList" :key="index"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">{{ scope.row[item.value] || '-' }}</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <div class="bottom-info" v-if="showBottomInfo&&pageName=='forest'">
|
|
|
- 截止目前，在{{$store.state.addr.selectAddr}}内，
|
|
|
- {{bottomInfo.courseName}}项目有
|
|
|
- {{bottomInfo.smallClassCount}}个小班，
|
|
|
- 累计占地面积{{bottomInfo.landArea}}亩，
|
|
|
- 累计蓄积量{{bottomInfo.smallClassStock}}平方米，
|
|
|
+ <div class="bottom-info" v-if="showBottomInfo && pageName == 'forest'">
|
|
|
+ 截止目前，在{{ $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 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>
|
|
|
@@ -97,18 +76,18 @@ export default {
|
|
|
headerList: [],
|
|
|
detailsData: [],
|
|
|
hotKey: Date.now(),
|
|
|
- showBottomInfo:false,
|
|
|
- bottomInfo:{},
|
|
|
- forestDetailTreeList:[],
|
|
|
+ showBottomInfo: false,
|
|
|
+ bottomInfo: {},
|
|
|
+ forestDetailTreeList: [],
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
+ watch: {
|
|
|
isShowDetails: {
|
|
|
- handler: function(n,o) {
|
|
|
- if(!n){
|
|
|
- this.showBottomInfo=false;
|
|
|
- this.headerList=[]
|
|
|
- }
|
|
|
+ handler: function (n, o) {
|
|
|
+ if (!n) {
|
|
|
+ this.showBottomInfo = false;
|
|
|
+ this.headerList = []
|
|
|
+ }
|
|
|
},
|
|
|
// deep: true,
|
|
|
immediate: true
|
|
|
@@ -126,7 +105,7 @@ export default {
|
|
|
methods: {
|
|
|
showDetails(item) {
|
|
|
// console.log('pageName',this.pageName);
|
|
|
- let param={
|
|
|
+ let param = {
|
|
|
cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
townId: this.$store.state.addr.selectStreet.areaId
|
|
|
@@ -153,14 +132,14 @@ export default {
|
|
|
forestFarmDetail(param)
|
|
|
.then((res) => {
|
|
|
let resData = res.rows;
|
|
|
- this.forestDetailTreeList = resData.map((item) =>{
|
|
|
+ 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=[];
|
|
|
+ resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log('forestFarmDetail err', err);
|
|
|
@@ -173,7 +152,7 @@ export default {
|
|
|
let resData = res.data;
|
|
|
this.detailsData = resData;
|
|
|
// console.log('treeListDetail res',this.detailsData);
|
|
|
- resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
|
|
|
+ resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log('treeListDetail err', err);
|
|
|
@@ -186,7 +165,7 @@ export default {
|
|
|
let resData = res.rows;
|
|
|
this.detailsData = resData;
|
|
|
console.log('baseItemDetail res', this.detailsData);
|
|
|
- resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
|
|
|
+ resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log('baseItemDetail err', err);
|
|
|
@@ -224,12 +203,12 @@ export default {
|
|
|
});
|
|
|
|
|
|
let newData = JSON.parse(JSON.stringify(data1));
|
|
|
- console.log('this.pageName',this.pageName);
|
|
|
- console.log('newData',newData);
|
|
|
+ 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'){
|
|
|
+ } else if (this.pageName == 'forest') {
|
|
|
newData.splice(4, 1); //删除treeList
|
|
|
}
|
|
|
|
|
|
@@ -243,10 +222,10 @@ export default {
|
|
|
this.isShowDetails = false;
|
|
|
}
|
|
|
},
|
|
|
- detailClick(row){
|
|
|
+ detailClick(row) {
|
|
|
this.showBottomInfo = true;
|
|
|
this.bottomInfo = row;
|
|
|
- console.log('detailClick row',row);
|
|
|
+ console.log('detailClick row', row);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -256,6 +235,7 @@ export default {
|
|
|
<style lang='scss' scoped>
|
|
|
// @import url('https://fonts.font.im/css?family=Rubik');
|
|
|
.numerical {
|
|
|
+
|
|
|
// box-sizing: border-box;
|
|
|
// margin-bottom: 2vh;
|
|
|
// border-radius: 10px;
|
|
|
@@ -265,33 +245,44 @@ export default {
|
|
|
height: calc(100% - 48px);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.inner {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.numerical-item {
|
|
|
- padding: 0 15px 15px 15px;
|
|
|
+ padding:15px;
|
|
|
box-sizing: border-box;
|
|
|
- width: 50%;
|
|
|
+ width: 43%;
|
|
|
+ margin: 5px;
|
|
|
text-align: center;
|
|
|
+ box-shadow: inset 0px 0px 31px 1px rgba(0, 250, 253, 0.4);
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid rgba(0, 250, 253, 0.33);
|
|
|
+
|
|
|
.name {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 14px;
|
|
|
color: #a6b7bf;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
+
|
|
|
.number {
|
|
|
color: var(--main-color);
|
|
|
- font-size: 32px;
|
|
|
+ font-size: 24px;
|
|
|
margin-right: 5px;
|
|
|
font-family: 'Rubik', sans-serif;
|
|
|
}
|
|
|
+
|
|
|
.unit {
|
|
|
font-size: 14px;
|
|
|
color: var(--main-color);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.detail-wrap {
|
|
|
-
|
|
|
+
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
// right: -135%;
|
|
|
@@ -302,23 +293,27 @@ export default {
|
|
|
z-index: 99;
|
|
|
overflow: hidden;
|
|
|
border-radius: 10px;
|
|
|
+
|
|
|
// border: 1px solid rgb(2, 238, 255);
|
|
|
::-webkit-scrollbar {
|
|
|
width: 0.3rem;
|
|
|
height: 0.625rem;
|
|
|
background: transparent;
|
|
|
}
|
|
|
+
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
background-color: rgba($color: rgba(4, 175, 206, 0.884), $alpha: 0.6);
|
|
|
border-radius: 2em;
|
|
|
}
|
|
|
- /deep/ .el-table{
|
|
|
+
|
|
|
+ /deep/ .el-table {
|
|
|
// background: transparent;
|
|
|
background: url('../assets/img/hoverbac.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
- /deep/ .el-table th {
|
|
|
+
|
|
|
+ /deep/ .el-table th {
|
|
|
background-color: transparent !important;
|
|
|
color: #fff;
|
|
|
height: 51px;
|
|
|
@@ -329,15 +324,18 @@ export default {
|
|
|
/deep/ .el-table tr {
|
|
|
background-color: transparent !important;
|
|
|
color: #00FAFD;
|
|
|
- &:hover{
|
|
|
+
|
|
|
+ &:hover {
|
|
|
cursor: pointer;
|
|
|
- background: rgba(8,238,255,.1)!important;
|
|
|
+ background: rgba(8, 238, 255, .1) !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
/deep/ .el-table--enable-row-transition .el-table__body td,
|
|
|
.el-table .cell {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
+
|
|
|
/deep/ .el-table::before {
|
|
|
//去除底部白线
|
|
|
left: 0;
|
|
|
@@ -345,13 +343,16 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 0px;
|
|
|
}
|
|
|
- /deep/ .el-table td.el-table__cell, /deep/ .el-table th.el-table__cell.is-leaf{
|
|
|
- border-bottom:none;
|
|
|
+
|
|
|
+ /deep/ .el-table td.el-table__cell,
|
|
|
+ /deep/ .el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-.bottom-info{
|
|
|
+
|
|
|
+.bottom-info {
|
|
|
position: fixed;
|
|
|
box-sizing: border-box;
|
|
|
left: 50%;
|
|
|
@@ -368,17 +369,21 @@ export default {
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 1280px) {
|
|
|
+
|
|
|
//概况
|
|
|
.numerical {
|
|
|
.item-wrap {
|
|
|
.numerical-item {
|
|
|
padding: 0 0 15px 5px;
|
|
|
+
|
|
|
.name {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
.number {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
+
|
|
|
.unit {
|
|
|
font-size: 16px;
|
|
|
}
|
