|
@@ -1,129 +1,85 @@
|
|
|
<template>
|
|
|
- <div class="fxjg">
|
|
|
- <div class="downloadDiv">
|
|
|
- <div>
|
|
|
- <span class="xmmc">
|
|
|
- 项目名称:
|
|
|
- <span class="text">{{ fxjgObj.xmmc }}</span>
|
|
|
- </span>
|
|
|
- <span class="export" @click="download">导出报告</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="divrow">
|
|
|
- <div class="divCol">
|
|
|
- <div class="divImg">
|
|
|
- <img :src="imgs.zd1" style="height: 2.5rem; width: 2.5rem" />
|
|
|
- </div>
|
|
|
- <div class="divText">
|
|
|
- <span style="color: #fff">图斑数(个)</span>
|
|
|
- <span color="#2d8cf0">{{ 203 }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="divCol">
|
|
|
- <div class="divImg">
|
|
|
- <img :src="imgs.zd1" style="height: 2.5rem; width: 2.5rem" />
|
|
|
- </div>
|
|
|
- <div class="divText">
|
|
|
- <span style="color: #fff">图斑面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}平方米</span>
|
|
|
+ <div >
|
|
|
+ <div class="fxjg">
|
|
|
+ <div class="downloadDiv">
|
|
|
+ <div>
|
|
|
+ <span class="xmmc">
|
|
|
+ 项目名称:
|
|
|
+ <span class="text">{{ fxjgObj.xmmc }}</span>
|
|
|
+ </span>
|
|
|
+ <span class="export" @click="download">导出报告</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="site-title">
|
|
|
- <div class="siteCon">
|
|
|
- <div class="site_Icon"></div>
|
|
|
- <span>现状情况</span>
|
|
|
- </div>
|
|
|
- <el-button size="mini" @click="zdyModel">图表切换</el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <pie
|
|
|
- class="echart"
|
|
|
- unit="平方千米"
|
|
|
- @echartClick="(name) => echartClick(name, item.value)"
|
|
|
- :ref="`echartRef`"
|
|
|
- ></pie>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="site-title">
|
|
|
- <div class="siteCon">
|
|
|
- <div class="site_Icon"></div>
|
|
|
- <span>套合结果</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="Integration">
|
|
|
- <!-- <div></div> -->
|
|
|
- <div class="Integration_list">
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压耕地图斑数</span>
|
|
|
- <span color="#2d8cf0">{{ 203 }}个</span>
|
|
|
+ <div class="divrow">
|
|
|
+ <div class="divCol">
|
|
|
+ <div class="divImg">
|
|
|
+ <img :src="imgs.zd1" style="height: 2.5rem; width: 2.5rem" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压耕地面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
+ <div class="divText">
|
|
|
+ <span style="color: #fff">图斑数(个)</span>
|
|
|
+ <!-- <span color="#2d8cf0" v-if="xmxx">{{ xmxx.sumNumber }}</span> -->
|
|
|
+ <span color="#2d8cf0" v-if="resultData && resultData.xmxx"
|
|
|
+ >{{ resultData.xmxx.sumNumber }}个</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="Integration_list">
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压永久基本农田图斑数</span>
|
|
|
- <span color="#2d8cf0">{{ 203 }}个</span>
|
|
|
+ <div class="divCol">
|
|
|
+ <div class="divImg">
|
|
|
+ <img :src="imgs.zd1" style="height: 2.5rem; width: 2.5rem" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压永久基本农田面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
+ <div class="divText">
|
|
|
+ <span style="color: #fff">图斑面积(㎡)</span>
|
|
|
+ <span color="#2d8cf0" v-if="resultData && resultData.xmxx"
|
|
|
+ >{{ resultData.xmxx.sumMj }}平方米</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="Integration_list">
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压耕地图斑数</span>
|
|
|
- <span color="#2d8cf0">{{ 203 }}个</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压耕地面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压耕地面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
- </div>
|
|
|
+ <div class="site-title">
|
|
|
+ <div class="siteCon">
|
|
|
+ <div class="site_Icon"></div>
|
|
|
+ <span>现状情况</span>
|
|
|
</div>
|
|
|
+ <el-button size="mini" @click="zdyModel">图表切换</el-button>
|
|
|
</div>
|
|
|
- <div class="Integration_list">
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压生态保护红线图斑数</span>
|
|
|
- <span color="#2d8cf0">{{ 203 }}个</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压公益林面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压自然保护地图斑数</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}个</span>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <pie
|
|
|
+ class="echart"
|
|
|
+ unit="平方米"
|
|
|
+ @echartClick="(name) => echartClick(name, item.value)"
|
|
|
+ :ref="`echartRef`"
|
|
|
+ ></pie>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="site-title">
|
|
|
+ <div class="siteCon">
|
|
|
+ <div class="site_Icon"></div>
|
|
|
+ <span>套合结果</span>
|
|
|
</div>
|
|
|
- <div class="listCol">
|
|
|
- <div class="listText">
|
|
|
- <span style="color: #fff">占压自然保护地面积(㎡)</span>
|
|
|
- <span color="#2d8cf0">{{ 20314.52 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="Integration">
|
|
|
+ <div
|
|
|
+ class="Integration_list"
|
|
|
+ v-for="(item, i) in resultData.yzjg"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <div v-for="(item2, c) in item.mx_data" :key="c" class="list_Cont">
|
|
|
+ <div class="list_item">
|
|
|
+ <div class="listText">
|
|
|
+ <span style="color: #fff">{{ item2.bsmmc }}图斑数</span>
|
|
|
+ <span
|
|
|
+ style="color: #2d8cf0; font-weight: bold; cursor: pointer"
|
|
|
+ @click="resultDeatils(item2,item.mx_bsm)"
|
|
|
+ >{{ item2.sumcount }}个</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list_item">
|
|
|
+ <div class="listText">
|
|
|
+ <span style="color: #fff">{{ item2.bsmmc }}面积(㎡)</span>
|
|
|
+ <span color="#80FFFF">{{ item2.sumvalue }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -133,31 +89,56 @@
|
|
|
|
|
|
<script>
|
|
|
import pie from "@/components/echartsTemplate/pieNew.vue";
|
|
|
+import { QueryGdbhJg } from "../../../api/ghss/gdbh.js";
|
|
|
export default {
|
|
|
+ components: { pie },
|
|
|
props: {
|
|
|
fxjgObj: {
|
|
|
type: Object,
|
|
|
},
|
|
|
},
|
|
|
|
|
|
- components: { pie },
|
|
|
data() {
|
|
|
return {
|
|
|
imgs: {
|
|
|
loc: require("@/assets/images/loc.png"),
|
|
|
zd1: require("@/assets/homeimg/1.png"),
|
|
|
},
|
|
|
+ resultData: [],
|
|
|
};
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
- GetSumList() {
|
|
|
- let data = [
|
|
|
- { name: "中央资金", value: "13.45" },
|
|
|
- { name: "省级资金", value: "5" },
|
|
|
- { name: "市级资金", value: "18.67" },
|
|
|
- ];
|
|
|
- // this.setEchart({ data, type: '"horizontal"', total: 37.12 }, 2);
|
|
|
- this.$refs[`echartRef`].setOptions({ data, type: '"horizontal"' }, 2);
|
|
|
+ download() {},
|
|
|
+ resultDeatils(val,mxbsm) {
|
|
|
+ let obj = {
|
|
|
+ bsm:this.fxjgObj.bsm,
|
|
|
+ mxbsm:mxbsm,
|
|
|
+ yzbsm:val.bsm
|
|
|
+ }
|
|
|
+ console.log(obj,":objobjobj")
|
|
|
+ this.$emit("updateParent", "interObj", obj);
|
|
|
+
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ QueryGdbhJg({ bsm: this.fxjgObj.bsm }).then((res) => {
|
|
|
+ let data = [];
|
|
|
+ if (res.statuscode == 200) {
|
|
|
+ if (res.data.sandiao.mx_data.length) {
|
|
|
+ res.data.sandiao.mx_data.forEach((el) => {
|
|
|
+ data.push({
|
|
|
+ name: el.groupvalue,
|
|
|
+ value: el.sumvalue,
|
|
|
+ geom: el.geom,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$refs.echartRef.setOptions({ data, type: "horizontal" }, 1);
|
|
|
+ this.resultData = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
echartClick(name, { iseyes }) {
|
|
|
console.log(name, ":name");
|
|
@@ -175,9 +156,7 @@ export default {
|
|
|
// })
|
|
|
},
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.GetSumList();
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -188,6 +167,7 @@ export default {
|
|
|
overflow-x: hidden;
|
|
|
padding-right: 10px;
|
|
|
line-height: 40px;
|
|
|
+
|
|
|
.echart {
|
|
|
// width: 19rem;
|
|
|
// height: 350px;
|
|
@@ -264,25 +244,27 @@ export default {
|
|
|
max-height: 32vh;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
+
|
|
|
.Integration_list {
|
|
|
- // height: 50px;
|
|
|
background-color: #0f7bc875;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- // margin-bottom: 8px;
|
|
|
margin-top: 8px;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 10px;
|
|
|
+
|
|
|
.listCol {
|
|
|
width: 49%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
white-space: nowrap;
|
|
|
margin-bottom: 5px;
|
|
|
+
|
|
|
.listText {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+
|
|
|
span {
|
|
|
height: 20px;
|
|
|
height: 20px;
|
|
@@ -290,7 +272,33 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .list_Cont {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .list_item {
|
|
|
+ width: 50%;
|
|
|
+ .listText {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ span {
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.sm-panel {
|
|
|
+ width: 400px;
|
|
|
+ height: 700px;
|
|
|
+ z-index: 999999;
|
|
|
+ }
|
|
|
</style>
|