|
@@ -1,53 +1,146 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- {{ interObj }}
|
|
|
- <div class="sm-panel sm-function-module-query" v-drag>
|
|
|
- <div class="sm-panel-header">
|
|
|
- <span> 占压图斑</span>
|
|
|
- </div>
|
|
|
- <div class="tableCon">
|
|
|
- <el-table
|
|
|
- :header-cell-style="{
|
|
|
- background: 'rgba(10, 25, 38, 0.6)',
|
|
|
- color: '#66b1ff',
|
|
|
- fontSize: '14px',
|
|
|
- fontFamily: 'Microsoft YaHei',
|
|
|
- fontWeight: '400',
|
|
|
- }"
|
|
|
- :data="tableData"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- show-overflow-tooltip="true"
|
|
|
- prop="id"
|
|
|
- label="图斑编号"
|
|
|
+ <div class="DetilsCon">
|
|
|
+ <div class="sm-panel sm-function-module-query" v-drag>
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>占压耕地图斑</span>
|
|
|
+ <i class="el-icon-close" @click="closeInster"></i>
|
|
|
+ </div>
|
|
|
+ <div class="tableCon">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(10, 25, 38, 0.6)',
|
|
|
+ color: '#66b1ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ }"
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- show-overflow-tooltip="true"
|
|
|
- prop="siweiarea"
|
|
|
- label="图斑面积"
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ prop="id"
|
|
|
+ label="图斑编号"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ prop="siweiarea"
|
|
|
+ label="图斑面积"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="100" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <span>编辑</span> -->
|
|
|
+ <el-button size="mini" type="text" @click="flyTo(scope.row)"
|
|
|
+ >定位</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click="handleView(scope.row)"
|
|
|
+ >详情</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column></el-table
|
|
|
>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column width="100" label="操作">
|
|
|
- <template slot-scope="scope">
|
|
|
- <!-- <span>编辑</span> -->
|
|
|
- <el-button size="mini" type="text" @click="flyTo(scope.row)"
|
|
|
- >定位</el-button
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="conViews" v-if="isShallow">
|
|
|
+ <div class="sm-panel sm-function-module-query" v-drag>
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>图斑详情</span>
|
|
|
+ <i class="el-icon-close" @click="isShallow = false"></i>
|
|
|
+ </div>
|
|
|
+ <el-tabs
|
|
|
+ type="border-card"
|
|
|
+ class="xz_box info"
|
|
|
+ v-model="activeTabs"
|
|
|
+ stretch
|
|
|
+ >
|
|
|
+ <el-tab-pane label="套合结果" name="thjg">
|
|
|
+ <!-- <div class="inter_result"></div> -->
|
|
|
+ <div class="Integration inter_result">
|
|
|
+ <div
|
|
|
+ class="Integration_list"
|
|
|
+ v-for="(item, i) in yzjgData"
|
|
|
+ :key="i"
|
|
|
>
|
|
|
- <el-button size="mini" type="text" @click="handleView(scope.row)"
|
|
|
- >详情</el-button
|
|
|
+ <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>
|
|
|
+ </el-tab-pane>
|
|
|
+ <!-- -->
|
|
|
+ <el-tab-pane label="基本信息" name="jbxx">
|
|
|
+ <div class="inter_result" v-if="activeTabs == 'jbxx'">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'rgba(10, 25, 38, 0.6)',
|
|
|
+ color: '#66b1ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ }"
|
|
|
+ :data="jbxxData"
|
|
|
+ height="350"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
- </template>
|
|
|
- </el-table-column></el-table
|
|
|
- >
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ prop="name"
|
|
|
+ label="属性名称"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ prop="value"
|
|
|
+ label="属性值"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-carousel indicator-position="outside">
|
|
|
+ <el-carousel-item v-for="item in 4" :key="item">
|
|
|
+ <h3>{{ item }}</h3>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getYZ } from "../../../api/ghss/gdbh.js";
|
|
|
+import { name } from "file-loader";
|
|
|
+import { getYZ, getOneDetail } from "../../../api/ghss/gdbh.js";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
@@ -57,48 +150,75 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- id: 61,
|
|
|
- siweiarea: 568605.55,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 69,
|
|
|
- siweiarea: 93683.01,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 62,
|
|
|
- siweiarea: 27863.95,
|
|
|
- },
|
|
|
- ],
|
|
|
+ activeTabs: "thjg",
|
|
|
+ tableData: [],
|
|
|
+ viewsData: null,
|
|
|
+ isShallow: false,
|
|
|
+ jbxxData: null,
|
|
|
+ yzjgData: [],
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // this.init();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ //关闭套合结果详情
|
|
|
+ closeInster() {
|
|
|
+ this.$emit("updateParent", "showInter", false);
|
|
|
+ this.isShallow = false
|
|
|
+ },
|
|
|
flyTo(val) {},
|
|
|
- handleView(val) {},
|
|
|
+ handleView(val) {
|
|
|
+ this.isShallow = true
|
|
|
+ getOneDetail({
|
|
|
+ bsm: this.interObj.bsm,
|
|
|
+ id: val.id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.statuscode == 200) {
|
|
|
+ this.viewsData = res.data;
|
|
|
+ this.yzjgData = res.data.yzjg;
|
|
|
+ this.jbxxData = Object.keys(res.data.tbxx).map((key) => ({
|
|
|
+ name: key,
|
|
|
+ value: res.data.tbxx[key],
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.isShallow = true;
|
|
|
+ },
|
|
|
init() {
|
|
|
getYZ(this.interObj).then((res) => {
|
|
|
if (res.statuscode == 200) {
|
|
|
- console.log(1111, res);
|
|
|
+ this.tableData = res.data;
|
|
|
} else {
|
|
|
this.$message.error(res.message);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
-
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
watch: {
|
|
|
- interObj(newValue) {
|
|
|
- console.log('=======')
|
|
|
- this.init();
|
|
|
+ // interObj(newValue) {
|
|
|
+ // this.init();
|
|
|
+ // },
|
|
|
+ interObj: {
|
|
|
+ handler(newVal) {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.DetilsCon {
|
|
|
+ position: relative;
|
|
|
+ right: 57%;
|
|
|
+}
|
|
|
+
|
|
|
.tableCon {
|
|
|
height: 40rem;
|
|
|
|
|
@@ -133,5 +253,97 @@ export default {
|
|
|
background: rgba(10, 25, 38, 0) !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/deep/ .el-icon-close:before {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: larger;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-carousel__item h3 {
|
|
|
+ color: #475669;
|
|
|
+ font-size: 18px;
|
|
|
+ opacity: 0.75;
|
|
|
+ line-height: 200px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-carousel__container {
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-carousel__item:nth-child(2n) {
|
|
|
+ background-color: #99a9bf;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-carousel__item:nth-child(2n + 1) {
|
|
|
+ background-color: #d3dce6;
|
|
|
+}
|
|
|
+
|
|
|
+.inter_result {
|
|
|
+ height: 580px;
|
|
|
+}
|
|
|
+
|
|
|
+.Integration {
|
|
|
+ max-height: 580px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .Integration_list {
|
|
|
+ background-color: #0f7bc875;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ 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;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
</style>
|