|
|
@@ -1,5 +1,10 @@
|
|
|
<template>
|
|
|
<div id="mapApp">
|
|
|
+ <el-button @click="dialogVisible = false">返回列表</el-button>
|
|
|
+ 图斑编号：6401812024070108270002
|
|
|
+ <el-button @click="dialogVisible = false">上一个</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">下一个</el-button>
|
|
|
+
|
|
|
<div class="btn" v-if="nowObj['前时相']">
|
|
|
<!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
|
|
|
<span class="sx qsx">前时相:{{ nowObj["前时相"] }}</span>
|
|
|
@@ -15,64 +20,34 @@
|
|
|
modal-class="mask-layer"
|
|
|
size="28vw"
|
|
|
> -->
|
|
|
- <div class="jctbCon">
|
|
|
+ <div class="jctbCon" v-if="!dialogVisible">
|
|
|
<div class="tbTitle">
|
|
|
- <span>图斑列表{{ newObj.name }}</span>
|
|
|
+ <span>图斑列表 </span>
|
|
|
<el-select
|
|
|
v-model="domains"
|
|
|
- multiple
|
|
|
- collapse-tags
|
|
|
placeholder="请选择其它搜索条件"
|
|
|
@change="handleChange"
|
|
|
+ style="width: 150px; padding-left: 20px"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
- :disabled="item.value == '监测编号' ? true : false"
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
- <el-button @click="handleDownload">下载</el-button>
|
|
|
- <!-- <el-input
|
|
|
- placeholder="请输入监测编号查询"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- v-model="queryParams['监测编号']"
|
|
|
- @change="getTemplate()"
|
|
|
- >
|
|
|
- </el-input> -->
|
|
|
- <!-- <div class="demo-input-suffix">
|
|
|
- 监测编号:
|
|
|
- <el-input
|
|
|
- placeholder="请输入监测编号查询"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- v-model="queryParams['监测编号']"
|
|
|
- @change="getTemplate()"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </div> -->
|
|
|
- <div class="demo-input-suffix" v-for="(ditem, i) in domains" :key="i">
|
|
|
- {{ ditem + ":" }}
|
|
|
- <el-input
|
|
|
- :placeholder="'请输入' + ditem + '查询'"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- v-model="queryParams[ditem]"
|
|
|
- @change="getTemplate()"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <el-button @click.prevent="removeDomain(ditem)">删除</el-button>
|
|
|
- </div>
|
|
|
</div>
|
|
|
+ <numCard :sdlist="sdlist"></numCard>
|
|
|
<tablePage
|
|
|
:cloumn="TableHeader"
|
|
|
:table="{ total, data: tableData }"
|
|
|
:indexed="false"
|
|
|
:check="true"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
ref="tableDialogRef"
|
|
|
@selectChange="handleSelectionChange"
|
|
|
@currentChange="getTemplate"
|
|
|
- @row-click="tableClick"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
@@ -81,47 +56,36 @@
|
|
|
@click.stop="handleDetails(scope.row)"
|
|
|
>定位</el-button
|
|
|
>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- @click.stop="handleDetails(scope.row)"
|
|
|
+ <el-button size="mini" type="text" @click.stop="tableClick(scope.row)"
|
|
|
>对比</el-button
|
|
|
>
|
|
|
-
|
|
|
</template>
|
|
|
</tablePage>
|
|
|
+ 已选{{ ids.length }}条
|
|
|
+ <el-button @click="handleDownload">下载</el-button>
|
|
|
</div>
|
|
|
- <!-- </el-drawer> -->
|
|
|
- <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
|
|
|
- <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
|
|
|
- <el-descriptions class="margin-top" :column="1">
|
|
|
- <el-descriptions-item
|
|
|
- :label="item"
|
|
|
- v-for="(item, i) in descriptionsList"
|
|
|
- :key="i"
|
|
|
- >{{ infoObj[item] }}</el-descriptions-item
|
|
|
- >
|
|
|
- </el-descriptions>
|
|
|
- </el-dialog>
|
|
|
+ <div class="jctbCon" v-if="dialogVisible">
|
|
|
+ <Details></Details>
|
|
|
+ </div>
|
|
|
+ <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import MapView from "../MapView.vue";
|
|
|
+import numCard from "@/components/numCard.vue";
|
|
|
import CustomDetails from "@/components/custom-detailsInfo.vue";
|
|
|
+import Details from "./details.vue";
|
|
|
import parse from "wellknown";
|
|
|
// import { pinyin } from "pinyin-pro";
|
|
|
import {
|
|
|
getPcsj,
|
|
|
listPcsjXQList,
|
|
|
- getPcsjXQ,
|
|
|
- getXqListMap,
|
|
|
- getXqListKey,
|
|
|
getXqIdMap,
|
|
|
getXqIdKey,
|
|
|
} from "@/api/supervise/pcsj";
|
|
|
import { getDkdbList } from "@/api/rsmonitoring/dataEntry";
|
|
|
-import { TableHeader, detailInfos } from "./config";
|
|
|
+import { TableHeader } from "./config";
|
|
|
import "ol/ol.css";
|
|
|
// import { get as getProjection, transform } from "ol/proj.js";
|
|
|
import Map from "ol/Map";
|
|
|
@@ -152,6 +116,8 @@ export default {
|
|
|
components: {
|
|
|
MapView,
|
|
|
CustomDetails,
|
|
|
+ numCard,
|
|
|
+ Details,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -160,6 +126,11 @@ export default {
|
|
|
{ label: "监测面积", value: 1 },
|
|
|
{ label: "外业时间", value: 2 },
|
|
|
],
|
|
|
+ sdlist: [
|
|
|
+ { name: "待审核", pronum: "155", promj: "151.12" },
|
|
|
+ { name: "已审核", pronum: "155", promj: "151.12" },
|
|
|
+ { name: "已提交", pronum: "155", promj: "151.12" },
|
|
|
+ ],
|
|
|
domains: [], //存储动态搜索列表
|
|
|
// value: ["监测编号"], //下拉框选中的值
|
|
|
maptype: "normal",
|
|
|
@@ -183,50 +154,21 @@ export default {
|
|
|
vectorLayer: {},
|
|
|
nowObj: {},
|
|
|
itemObj: {}, //用于存储分屏高亮的实体
|
|
|
- dialogVisible: false,
|
|
|
- infoObj: {},
|
|
|
- detailInfos: detailInfos,
|
|
|
- TableHeader:TableHeader,
|
|
|
+ dialogVisible: true,
|
|
|
|
|
|
- descriptionsList: [], //详情描述列表存储字段
|
|
|
+ TableHeader: TableHeader,
|
|
|
+
|
|
|
+ descriptionsList: ["name"], //详情描述列表存储字段
|
|
|
envelopegeomObj: {}, //用于存储进入页面飞入视角的对象
|
|
|
+ ids: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
// 绑定事件，编写回调函数
|
|
|
this.$nextTick(() => {
|
|
|
- getPcsj(this.$route.query.id).then((response) => {
|
|
|
- this.newObj = response.data;
|
|
|
-
|
|
|
- // if (this.newObj.envelopegeom && this.newObj.envelopegeom != "") {
|
|
|
- // if (typeof this.newObj.envelopegeom === "string") {
|
|
|
- // let geom = this.newObj.envelopegeom;
|
|
|
- // this.newObj.envelopegeom = parse(geom);
|
|
|
- // }
|
|
|
- // let features = new GeoJSON().readFeatures(this.newObj.envelopegeom);
|
|
|
- // this.envelopegeomObj = new VectorLayer({
|
|
|
- // source: new VectorSource({
|
|
|
- // features: features,
|
|
|
- // }),
|
|
|
- // style: function (feature) {
|
|
|
- // return new Style({
|
|
|
- // stroke: new Stroke({
|
|
|
- // //边界样式
|
|
|
- // color: "rgba(255, 0, 0, 1)",
|
|
|
- // width: 2,
|
|
|
- // }),
|
|
|
- // });
|
|
|
- // },
|
|
|
- // zIndex: 9999,
|
|
|
- // });
|
|
|
- // let fullExtent = this.envelopegeomObj.getSource().getExtent();
|
|
|
-
|
|
|
- // window.map["mapDiv"]
|
|
|
- // .getView()
|
|
|
- // .fit(fullExtent, window.map["mapDiv"].getSize());
|
|
|
- // window.map["mapDiv"].addLayer(this.envelopegeomObj);
|
|
|
- // }
|
|
|
- });
|
|
|
+ // getPcsj(this.$route.query.id).then((response) => {
|
|
|
+ // this.newObj = response.data;
|
|
|
+ // });
|
|
|
this.getTemplate();
|
|
|
});
|
|
|
},
|
|
|
@@ -262,10 +204,7 @@ export default {
|
|
|
getTemplate() {
|
|
|
this.handleDelete();
|
|
|
|
|
|
- this.options = [];
|
|
|
-
|
|
|
getDkdbList(this.queryParams).then((res) => {
|
|
|
- console.log(res, "======");
|
|
|
this.tableData = res.rows;
|
|
|
this.total = res.total;
|
|
|
this.initVectorLayer("mapDiv");
|
|
|
@@ -276,7 +215,10 @@ export default {
|
|
|
this.addGeoJson("mapCon2");
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map((item) => item.id);
|
|
|
+ },
|
|
|
handleDownload() {
|
|
|
const zipfile = this.newObj.proxypath + ".zip";
|
|
|
window.open(`${zipfile}`);
|
|
|
@@ -299,29 +241,27 @@ export default {
|
|
|
},
|
|
|
|
|
|
getList() {
|
|
|
- listPcsjXQList(this.queryParams).then((response) => {
|
|
|
- this.tableData = response.rows;
|
|
|
- this.total = response.total;
|
|
|
- this.initVectorLayer("mapDiv");
|
|
|
- this.initVectorLayer("mapCon1");
|
|
|
- this.initVectorLayer("mapCon2");
|
|
|
- this.addGeoJson("mapDiv");
|
|
|
- this.addGeoJson("mapCon1");
|
|
|
- this.addGeoJson("mapCon2");
|
|
|
- });
|
|
|
+ // listPcsjXQList(this.queryParams).then((response) => {
|
|
|
+ // this.tableData = response.rows;
|
|
|
+ // this.total = response.total;
|
|
|
+ // this.initVectorLayer("mapDiv");
|
|
|
+ // this.initVectorLayer("mapCon1");
|
|
|
+ // this.initVectorLayer("mapCon2");
|
|
|
+ // this.addGeoJson("mapDiv");
|
|
|
+ // this.addGeoJson("mapCon1");
|
|
|
+ // this.addGeoJson("mapCon2");
|
|
|
+ // });
|
|
|
},
|
|
|
handleDetails(row) {
|
|
|
- getXqIdMap({ pcsjid: this.$route.query.id, id: row.id }).then((res) => {
|
|
|
- this.infoObj = res.data;
|
|
|
- });
|
|
|
- getXqIdKey({ pcsjid: this.$route.query.id }).then((res) => {
|
|
|
- this.descriptionsList = res.data;
|
|
|
- });
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
- handleClose() {
|
|
|
- this.drawer = false;
|
|
|
+ // getXqIdMap({ pcsjid: this.$route.query.id, id: row.id }).then((res) => {
|
|
|
+ // this.infoObj = res.data;
|
|
|
+ // });
|
|
|
+ // getXqIdKey({ pcsjid: this.$route.query.id }).then((res) => {
|
|
|
+ // this.descriptionsList = res.data;
|
|
|
+ // });
|
|
|
+ // this.dialogVisible = true;
|
|
|
},
|
|
|
+
|
|
|
test(item) {
|
|
|
window.map["mapCon1"].removeLayer(this.itemObj);
|
|
|
window.map["mapCon2"].removeLayer(this.itemObj);
|
|
|
@@ -457,27 +397,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// .mask-layer{
|
|
|
-// width: 264px !important;
|
|
|
-// }
|
|
|
-// ::v-deep .el-drawer__wrapper {
|
|
|
-// position: static !important;
|
|
|
-// }
|
|
|
-
|
|
|
-// ::v-deep .el-drawer__container {
|
|
|
-// position: static !important;
|
|
|
-// }
|
|
|
-
|
|
|
-// ::v-deep .el-drawer__body {
|
|
|
-// width: 28vw;
|
|
|
-// }
|
|
|
-
|
|
|
.jctbCon {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 0px;
|
|
|
- width: 26vw;
|
|
|
+ width: 28vw;
|
|
|
padding: 20px;
|
|
|
+ height: 100%;
|
|
|
.tbTitle {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
@@ -493,70 +419,9 @@ export default {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .numCard {
|
|
|
- width: 100%;
|
|
|
- height: 120px;
|
|
|
- display: flex;
|
|
|
- // background-color: rgba(255, 192, 203, 0.272);
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .cardItem {
|
|
|
- // width: 230px;
|
|
|
- width: 200px;
|
|
|
- height: 85px;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(30, 198, 149, 1) 0%,
|
|
|
- rgba(30, 198, 149, 1) 0%,
|
|
|
- rgba(51, 204, 204, 1) 100%,
|
|
|
- rgba(51, 204, 204, 1) 100%
|
|
|
- );
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
|
|
|
- -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
|
|
|
- box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
|
|
|
- font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
- font-weight: 700;
|
|
|
- font-style: normal;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- height: 39%;
|
|
|
- // background: #faebd78c;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .jc {
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- rgba(244, 174, 149, 1) 0%,
|
|
|
- rgba(244, 174, 149, 1) 0%,
|
|
|
- rgba(226, 113, 140, 1) 100%,
|
|
|
- rgba(226, 113, 140, 1) 100%
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
-html,
|
|
|
-body {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
#mapApp {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
