|
|
@@ -7,109 +7,109 @@
|
|
|
</div>
|
|
|
<MapView :maptype="maptype" ref="MapView" />
|
|
|
|
|
|
- <el-drawer
|
|
|
+ <!-- <el-drawer
|
|
|
v-model="drawer"
|
|
|
:with-header="false"
|
|
|
:modal="false"
|
|
|
:wrapperClosable="false"
|
|
|
modal-class="mask-layer"
|
|
|
size="28vw"
|
|
|
- >
|
|
|
- <div class="jctbCon">
|
|
|
- <div class="tbTitle">
|
|
|
- <span>监测图斑{{ newObj.name }}</span>
|
|
|
- <el-select
|
|
|
- v-model="domains"
|
|
|
- multiple
|
|
|
- collapse-tags
|
|
|
- placeholder="请选择其它搜索条件"
|
|
|
- @change="handleChange"
|
|
|
+ > -->
|
|
|
+ <div class="jctbCon">
|
|
|
+ <div class="tbTitle">
|
|
|
+ <span>监测图斑{{ newObj.name }}</span>
|
|
|
+ <el-select
|
|
|
+ v-model="domains"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择其它搜索条件"
|
|
|
+ @change="handleChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :disabled="item.value == '监测编号' ? true : false"
|
|
|
>
|
|
|
- <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
|
|
|
+ </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>
|
|
|
- <div class="numCard">
|
|
|
- <div class="cardItem">
|
|
|
- <span>监测图斑个数(个):</span>
|
|
|
- <span>{{ newObj.spotsnumber }}</span>
|
|
|
- </div>
|
|
|
- <div class="cardItem jc">
|
|
|
- <span>监测面积(亩):</span>
|
|
|
- <span>{{ newObj.spotsarea }}</span>
|
|
|
- </div>
|
|
|
+ <div class="demo-input-suffix">
|
|
|
+ 监测编号:
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入监测编号查询"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="queryParams['监测编号']"
|
|
|
+ @change="getTemplate()"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 100%"
|
|
|
- @row-click="tableClick"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- :prop="templateList[i]"
|
|
|
- :label="templateList[i]"
|
|
|
- show-overflow-tooltip
|
|
|
- v-for="(item, i) in templateList"
|
|
|
- :key="i"
|
|
|
- :width="templateList[i] == '监测编号' ? 200 : ''"
|
|
|
- align="center"
|
|
|
+ <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-table-column>
|
|
|
- <el-table-column label="操作" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- @click.stop="handleDetails(scope.row)"
|
|
|
- >详情</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination
|
|
|
- v-show="total > 0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getTemplate"
|
|
|
- />
|
|
|
+ </el-input>
|
|
|
+ <el-button @click.prevent="removeDomain(ditem)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="numCard">
|
|
|
+ <div class="cardItem">
|
|
|
+ <span>监测图斑个数(个):</span>
|
|
|
+ <span>{{ newObj.spotsnumber }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="cardItem jc">
|
|
|
+ <span>监测面积(亩):</span>
|
|
|
+ <span>{{ newObj.spotsarea }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-drawer>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ @row-click="tableClick"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :prop="templateList[i]"
|
|
|
+ :label="templateList[i]"
|
|
|
+ show-overflow-tooltip
|
|
|
+ v-for="(item, i) in templateList"
|
|
|
+ :key="i"
|
|
|
+ :width="templateList[i] == '监测编号' ? 200 : ''"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click.stop="handleDetails(scope.row)"
|
|
|
+ >详情</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getTemplate"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- </el-drawer> -->
|
|
|
<el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
|
|
|
<!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
|
|
|
<el-descriptions class="margin-top" :column="1">
|
|
|
@@ -313,7 +313,7 @@ export default {
|
|
|
this.initVectorLayer("mapDiv");
|
|
|
this.initVectorLayer("mapCon1");
|
|
|
this.initVectorLayer("mapCon2");
|
|
|
- this.addGeoJson("mapDiv");
|
|
|
+ this.addGeoJson("mapDiv", true);
|
|
|
this.addGeoJson("mapCon1");
|
|
|
this.addGeoJson("mapCon2");
|
|
|
});
|
|
|
@@ -397,7 +397,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//创建监测图斑列表实体
|
|
|
- addGeoJson(name) {
|
|
|
+ addGeoJson(name, isfly) {
|
|
|
this.tableData.forEach((titem, i) => {
|
|
|
if (titem.geom && titem.geom != "") {
|
|
|
if (typeof titem.geom === "string") {
|
|
|
@@ -424,15 +424,20 @@ export default {
|
|
|
window.map[name].addLayer(this.curPageResultLayer[tempName]);
|
|
|
}
|
|
|
});
|
|
|
- let fullExtent = this.curPageResultLayer[
|
|
|
- name + (this.tableData.length - 1)
|
|
|
- ]
|
|
|
- .getSource()
|
|
|
- .getExtent();
|
|
|
- window.map[name].getView().fit(fullExtent, {
|
|
|
- duration: 3, //动画的持续时间,
|
|
|
- callback: null,
|
|
|
- });
|
|
|
+ if (isfly) {
|
|
|
+ let fullExtent = this.curPageResultLayer[
|
|
|
+ name + (this.tableData.length - 1)
|
|
|
+ ]
|
|
|
+ .getSource()
|
|
|
+ .getExtent();
|
|
|
+ window.map[name].getView().fit(fullExtent, {
|
|
|
+ duration: 3, //动画的持续时间,
|
|
|
+ callback: null,
|
|
|
+ size: window.map[name].getSize(),
|
|
|
+ padding: [500, 500, 500, 500],
|
|
|
+ constrainResolution: false, // 允许视图超出分辨率限制
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
/**
|
|
|
* 初始化地图矢量图层
|
|
|
@@ -496,19 +501,24 @@ export default {
|
|
|
// .mask-layer{
|
|
|
// width: 264px !important;
|
|
|
// }
|
|
|
-::v-deep .el-drawer__wrapper {
|
|
|
- position: static !important;
|
|
|
-}
|
|
|
+// ::v-deep .el-drawer__wrapper {
|
|
|
+// position: static !important;
|
|
|
+// }
|
|
|
|
|
|
-::v-deep .el-drawer__container {
|
|
|
- position: static !important;
|
|
|
-}
|
|
|
+// ::v-deep .el-drawer__container {
|
|
|
+// position: static !important;
|
|
|
+// }
|
|
|
|
|
|
-::v-deep .el-drawer__body {
|
|
|
- width: 28vw;
|
|
|
-}
|
|
|
+// ::v-deep .el-drawer__body {
|
|
|
+// width: 28vw;
|
|
|
+// }
|
|
|
|
|
|
.jctbCon {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 0px;
|
|
|
+ width: 28vw;
|
|
|
+ padding: 20px;
|
|
|
.tbTitle {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
