123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611 |
- <template>
- <div class="map-range">
- <div class="fwlxrange">
- <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
- <el-button plain icon="edit-pen" size="mini">绘制</el-button>
- </div>
- <el-upload
- class="upload-demo"
- :on-change="handleChange"
- :auto-upload="false"
- :show-file-list="false"
- :file-list="fileList"
- :limit="1"
- accept=".zip"
- >
- <el-button class="upload-btn" icon="Upload" size="mini">导入</el-button>
- </el-upload>
- <!-- <div class="clear" @click="clearAll">清除</div> -->
- <div>
- <el-button size="mini" @click="changePatches">选择图斑</el-button>
- </div>
- <div>
- <el-button size="mini" @click="clearAll">清除</el-button>
- </div>
- </div>
- <div v-if="type != 'cutfill'">
- <span v-if="model.xzmj != 0">{{ model.xzmj }} 亩</span>
- <el-tooltip
- v-if="fileList.length > 0"
- :content="fileList[0].name"
- placement="bottom-start"
- >
- <span class="title-item" style="display: inline-block; width: 100%">{{
- fileList[0].name
- }}</span>
- </el-tooltip>
- </div>
- <el-dialog
- title="选择图斑"
- :visible.sync="dialogVisible"
- width="30%"
- :before-close="handleClose"
- :modal-append-to-body="false"
- :close-on-click-modal="false"
- >
- <div class="gdzl">
- <div class="el-col headerSelect">
- <el-select
- v-model="yearsVal"
- placeholder="请选择"
- @change="yearsChange"
- size="mini"
- >
- <el-option
- v-for="item in yearsOpt"
- :key="item.quarter"
- :label="item.quarter"
- :value="item"
- >
- </el-option>
- </el-select>
- <el-cascader
- v-model="updateObj.region"
- :show-all-levels="false"
- :options="store.state.region_tree"
- @change="regionChange1"
- placeholder="行政区"
- size="mini"
- :props="{
- checkStrictly: true,
- expandTrigger: 'hover',
- emitPath: false,
- }"
- ></el-cascader>
- <el-select
- v-model="monitorVal"
- placeholder="请选择"
- @change="typeChange"
- clearable
- size="mini"
- >
- <el-option
- v-for="item in monitorOpt"
- :key="item.dictCode"
- :label="item.dictValue"
- :value="item.dictCode"
- >
- </el-option>
- </el-select>
- <el-input
- v-model="input"
- placeholder="请输入监测编号搜索"
- @keyup.enter.native="initNew"
- ></el-input>
- </div>
- <el-table
- ref="singleTable"
- :data="active_dableData"
- style="width: 100%"
- height="44vh"
- @selection-change="handleSelectionChange"
- :header-cell-style="{
- background: 'rgba(10, 25, 38, 0.6)',
- color: '#66b1ff',
- fontSize: '14px',
- fontFamily: 'Microsoft YaHei',
- fontWeight: '400',
- }"
- >
- <el-table-column type="selection" width="55"> </el-table-column>
- <el-table-column type="index" align="center" width="50">
- </el-table-column>
- <el-table-column
- prop="jcbh"
- label="监测编号"
- align="center"
- width="220"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- prop="jcmj"
- label="监测面积(亩)"
- align="center"
- show-overflow-tooltip
- >
- </el-table-column>
- <!-- <el-table-column
- prop="regioncode"
- label="地区编号"
- align="center"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- prop="xmc"
- label="所属区县"
- align="center"
- show-overflow-tooltip
- >
- </el-table-column> -->
- <!-- <el-table-column fixed="right" label="操作" width="90" align="center">
- <template slot-scope="scope">
- <el-button
- @click="handleClick(scope.row)"
- type="text"
- size="small"
- >定位</el-button
- >
- <el-button
- type="text"
- size="small"
- @click="handleDetails(scope.row)"
- >详情</el-button
- >
- </template>
- </el-table-column> -->
- </el-table>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="creatTb">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { ShapeUpload } from "@/api/ghss/hgxfx.js";
- import { ElMessage } from "element-ui";
- import { GetXzqhTree } from "@/api/map";
- import {
- GetDateList,
- CodeList,
- JscQueryList,
- JctbList,
- getJctbInfo,
- } from "@/api/ghss/jctb.js";
- // import { polygon } from "@turf/turf";
- import * as turf from "@turf/turf";
- import parse from "wellknown";
- import { loadGeoJSON } from "@/utils/MapHelper/help.js";
- let now_dataSources = null;
- let layerSources = {};
- export default {
- components: {},
- props: {
- //启用的组件,不传为所有
- keys: {
- type: Array,
- default: ["xzq", "hx", "sc", "zbd"],
- },
- activeTabs: {
- type: String,
- },
- type: {
- type: String,
- },
- },
- data() {
- return {
- dialogVisible: false,
- yearsOpt: [], //检测图斑时间季度数据数组
- monitorOpt: [],
- monitorVal: "",
- yearsVal: "",//时间季度绑定
- input: "",//图斑编号搜索条件绑定
- updateObj: {//搜索条件
- region: "4602",
- tab: 1,
- val0: "",
- val1: "",
- val2: "",
- },
- active_dableData: [],//表格数据
- multipleSelection: [],//选择表格选中的数据
- idArr: [],//存储id数组用于删除
- // -----------以上为选择图斑功能所需数据------------
- userXZQ: "", //store.state.user.user.dept.district,
- fwlist: {
- xzq: {
- id: 0,
- name: "行政区",
- icon: "wind-power",
- },
- hx: {
- id: 1,
- name: "绘制",
- icon: "Share",
- },
- sc: {
- id: 2,
- name: "上传",
- icon: "Upload-filled",
- },
- zbd: {
- id: 3,
- name: "坐标点",
- icon: "Location",
- },
- },
- model: {
- fwlx: 0,
- xzfw: "",
- xzmj: 0,
- feature: null,
- },
- handlerDraw: null,
- draw: null, //绘制
- fileList: [], //文件
- fileDataID: "", //存储上传文件获取到的id
- dataSources: null,
- };
- },
- mounted() {
- // this.model.fwlx = this.fwlist[this.$props.keys[0]].id;
- },
- methods: {
- creatTb() {
- this.dialogVisible = false;
- this.multipleSelection.forEach((item, index) => {
- this.model.xzmj += item.jcmj
- item.type = "图斑上图";
- if (item.geom)
- loadGeoJSON(item.geom, "#55A1E3", { isfly: true }, (data) => {
- layerSources[item.jcbh] = data;
- data.entities.values.forEach((entity) => {
- entity.properties = item;
- });
- });
- this.idArr.push(item.jcbh);
- });
- },
- handleSelectionChange(val) {
- console.log(val, "====");
- this.multipleSelection = val;
- },
- handleClose(done) {
- this.dialogVisible = false;
- },
- typeChange(val) {
- this.updateObj.val2 = val;
- },
- regionChange1(region) {
- this.updateObj.region = region;
- },
- //年份季度改变
- yearsChange(val) {
- val = JSON.parse(JSON.stringify(val));
- this.updateObj.val0 = val.startTime;
- this.updateObj.val1 = val.endTime;
- this.yearsVal = val.quarter;
- console.log(this.updateObj.val0, this.updateObj.val1, this.yearsVal);
- },
- getXzqTreeData() {
- GetXzqhTree().then((res) => {
- if (res.data.length > 0) {
- const list = res.data[0].children.filter((item) => {
- return item.label == "三亚市";
- });
- if (list.length > 0) {
- list[0].value = "4602";
- this.xzqTreeData = list[0];
- } else this.xzqTreeData = res.data;
- }
- });
- GetDateList().then((res) => {
- this.yearsOpt = res.data;
- this.updateObj.val0 = res.data[0].startTime;
- this.updateObj.val1 = res.data[0].endTime;
- this.yearsVal = res.data[0].quarter;
- });
- //检测类型分类
- CodeList({
- dictType: "卫片执法后地类分类标准",
- pageNum: 1,
- pageSize: 999,
- }).then((res) => {
- if (res.code == 200) {
- this.monitorOpt = res.rows;
- }
- });
- },
- initNew() {
- let obj = {
- hlx: this.updateObj.val2,
- regioncode: this.updateObj.region,
- startTime: this.updateObj.val0,
- endTime: this.updateObj.val1,
- pageNum: 1,
- pageSize: '9999999',
- jcbh: this.input,
- };
- JctbList(obj).then((res) => {
- this.active_dableData = res.rows;
- this.total = res.total;
- });
- },
- changePatches() {
- this.clearAll();
- this.getXzqTreeData();
- this.dialogVisible = true;
- },
- remove() {
- if (this.idArr.length != 0) {
- this.idArr.forEach((item) => {
- viewer.dataSources.remove(layerSources[item]);
- });
- }
- },
- /** ---------------------以上为选择图斑的逻辑方法----------- **/
- //上传文件
- handleChange(file, fileList) {
- if (fileList.length > 0) {
- this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
- this.clearAll(false);
- }
- const formdata = new FormData();
- formdata.append("file", file.raw);
- formdata.append("fromType", 2);
- formdata.append("fromRoute", this.$route.path);
- ShapeUpload(formdata).then((res) => {
- if (res.success) {
- this.model.xzmj = (res.data.area * 0.0015).toFixed(2);
- // viewer.entities.removeAll();
- this.resetDataSources();
- this.fileDataID = res.data.id;
- this.model.xzfw = res.data.id;
- this.model.geom = res.data.geom;
- this.addPolygon(parse(res.data.geom));
- if (this.$props.type == "cutfill" || this.$props.type == "up") {
- this.$emit("cutfill", this.model.geom);
- }
- }
- });
- },
- //上传文件
- handleChange1(file, fileList) {
- if (fileList.length > 0) {
- this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
- this.clearAll(false);
- }
- const formdata = new FormData();
- formdata.append("file", file.raw);
- this.addPolygon();
- },
- // 加载GeoJSON数据
- addPolygon(geojson) {
- let _this = this;
- let polygon = Cesium.GeoJsonDataSource.load(geojson, {
- clampToGround: true,
- stroke: Cesium.Color.RED,
- fill: Cesium.Color.WHITE.withAlpha(0.3),
- strokeWidth: 5,
- });
- polygon.then(function (dataSource) {
- // 将数据源添加到Cesium Viewer
- viewer.dataSources.add(dataSource);
- viewer.zoomTo(dataSource);
- now_dataSources = dataSource;
- });
- },
- resetDataSources() {
- if (now_dataSources) {
- viewer.dataSources.remove(now_dataSources);
- now_dataSources = null;
- }
- },
- //绘制
- drawMap() {
- this.remove()//删除选择的图斑
- if (!window.handlerPolygon) {
- common.initHandler("Polygon");
- }
- common.handlerDrawing("Polygon").then(
- (res) => {
- // console.log(res.positions, "------");
- //过滤掉高度
- const filteredArr = res.positions.filter((item, index) => {
- if ((index + 1) % 3 !== 0) {
- return item;
- }
- });
- // 数组变二维数组方法
- function listToMatrix(list, elementsPerSubArray) {
- var matrix = [],
- i,
- k;
- for (i = 0, k = -1; i < list.length; i++) {
- if (i % elementsPerSubArray === 0) {
- k++;
- matrix[k] = [];
- }
- matrix[k].push(list[i]);
- }
- return matrix;
- }
- var matrix = listToMatrix(filteredArr, 2);
- // console.log(matrix, "max-----");
- matrix.push(matrix[0]);
- const geojsonPolygon = turf.polygon([matrix]);
- // var parse = require("wellknown"); //引入wellknow
- const wktPolygon = parse.stringify(geojsonPolygon);
- // console.log("WKT Polygon:", wktPolygon);
- if (this.$props.type == "cutfill") {
- this.model.geom = wktPolygon;
- this.$emit("cutfill", this.model.geom);
- return;
- }
- if (this.$props.type == "up") {
- this.$emit("cutfill", wktPolygon, res.positions);
- }
- const formdata = new FormData();
- // formdata.append("file", file.raw);
- formdata.append("fromType", 1);
- formdata.append("geom", wktPolygon);
- formdata.append("fromRoute", this.$route.path);
- // this.addPolygon();
- ShapeUpload(formdata).then((res) => {
- if (res.success) {
- this.fileDataID = res.data.id;
- this.model.xzmj = (res.data.area * 0.0015).toFixed(2);
- this.model.xzfw = res.data.id;
- this.model.geom = res.data.geom;
- this.$message({
- message: "绘制成功!",
- type: "success",
- });
- }
- });
- },
- (err) => {
- console.log(err);
- }
- );
- window.handlerPolygon.activate();
- },
- clear() {
- if (this.handlerDraw != null) {
- this.handlerDraw.clear();
- viewer.scene.globe.removeAllExcavationRegion();
- this.handlerDraw.deactivate();
- this.handlerDraw = null;
- this.result = null;
- }
- },
- //清除
- clearAll(clearfile = true) {
- //销毁上传创建的面
- // viewer.entities.removeAll();
- this.remove()
- this.resetDataSources();
- this.model.xzfw = "";
- this.model.xzmj = 0;
- if (clearfile) {
- this.fileDataID = "";
- this.fileList = [];
- }
- common.clearHandlerDrawing("Polygon");
- },
- //输出:重置
- reset() {
- this.clearAll();
- },
- //输出:获取范围
- getRange() {
- return this.model;
- },
- },
- beforeDestroy() {
- this.clearAll();
- },
- watch: {
- // 监听,当路由发生变化的时候执行
- $route: {
- // $route可以用引号,也可以不用引号//to 老路由信息,from 新路由信息
- handler(to, from) {
- this.clearAll();
- },
- deep: true, // 深度观察监听
- immediate: true, // 第一次初始化渲染就可以监听到
- },
- updateObj: {
- handler(newVal, oldVal) {
- this.initNew();
- },
- deep: true,
- immediate: true,
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .map-range {
- width: 100px;
- // height: 100px;
- color: #fff;
- .xz_type {
- margin-bottom: 10px;
- // display: flex;
- // justify-content: space-between;
- .keyitem {
- width: 100px;
- height: 30px;
- font-size: 16px;
- line-height: 30px;
- display: inline-block;
- cursor: pointer;
- }
- }
- .fwlxrange {
- display: flex;
- justify-content: space-between;
- text-align: center;
- .clear {
- width: 80px;
- }
- /deep/ .el-button--mini {
- background: #0f7ac8;
- border: none;
- border-radius: 0;
- color: #fff;
- width: 60px;
- height: 26px;
- font-size: 12px;
- padding: 0;
- // line-height: 32px;
- // text-align: center;
- }
- }
- }
- .headerSelect {
- width: 100%;
- height: 26px;
- // background: #00ffff;
- margin: 5px 0px;
- display: flex;
- justify-content: space-between;
- /deep/ .el-select {
- padding: 0 10px;
- }
- /deep/ .el-input--suffix .el-input__inner {
- padding-right: 15px;
- // height: 26px;
- background: #041c3273 !important;
- border: 1px dashed #0f7ac8;
- color: #fff;
- }
- /deep/ .el-cascader {
- // line-height: 26px;
- }
- /deep/.el-input__icon {
- // line-height: 1;
- color: #fff;
- }
- /deep/ .el-input__inner::placeholder {
- color: #fff;
- }
- }
- </style>
|