range-version.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. <template>
  2. <div class="map-range">
  3. <div class="fwlxrange">
  4. <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
  5. <el-button plain icon="edit-pen" size="mini">绘制</el-button>
  6. </div>
  7. <el-upload
  8. class="upload-demo"
  9. :on-change="handleChange"
  10. :auto-upload="false"
  11. :show-file-list="false"
  12. :file-list="fileList"
  13. :limit="1"
  14. accept=".zip"
  15. >
  16. <el-button class="upload-btn" icon="Upload" size="mini">导入</el-button>
  17. </el-upload>
  18. <!-- <div class="clear" @click="clearAll">清除</div> -->
  19. <div>
  20. <el-button size="mini" @click="changePatches">选择图斑</el-button>
  21. </div>
  22. <div>
  23. <el-button size="mini" @click="clearAll">清除</el-button>
  24. </div>
  25. </div>
  26. <div v-if="type != 'cutfill'">
  27. <span v-if="model.xzmj != 0">{{ model.xzmj }} 亩</span>
  28. <el-tooltip
  29. v-if="fileList.length > 0"
  30. :content="fileList[0].name"
  31. placement="bottom-start"
  32. >
  33. <span class="title-item" style="display: inline-block; width: 100%">{{
  34. fileList[0].name
  35. }}</span>
  36. </el-tooltip>
  37. </div>
  38. <el-dialog
  39. title="选择图斑"
  40. :visible.sync="dialogVisible"
  41. width="30%"
  42. :before-close="handleClose"
  43. :modal-append-to-body="false"
  44. :close-on-click-modal="false"
  45. >
  46. <div class="gdzl">
  47. <div class="el-col headerSelect">
  48. <el-select
  49. v-model="yearsVal"
  50. placeholder="请选择"
  51. @change="yearsChange"
  52. size="mini"
  53. >
  54. <el-option
  55. v-for="item in yearsOpt"
  56. :key="item.quarter"
  57. :label="item.quarter"
  58. :value="item"
  59. >
  60. </el-option>
  61. </el-select>
  62. <el-cascader
  63. v-model="updateObj.region"
  64. :show-all-levels="false"
  65. :options="store.state.region_tree"
  66. @change="regionChange1"
  67. placeholder="行政区"
  68. size="mini"
  69. :props="{
  70. checkStrictly: true,
  71. expandTrigger: 'hover',
  72. emitPath: false,
  73. }"
  74. ></el-cascader>
  75. <el-select
  76. v-model="monitorVal"
  77. placeholder="请选择"
  78. @change="typeChange"
  79. clearable
  80. size="mini"
  81. >
  82. <el-option
  83. v-for="item in monitorOpt"
  84. :key="item.dictCode"
  85. :label="item.dictValue"
  86. :value="item.dictCode"
  87. >
  88. </el-option>
  89. </el-select>
  90. <el-input
  91. v-model="input"
  92. placeholder="请输入监测编号搜索"
  93. @keyup.enter.native="initNew"
  94. ></el-input>
  95. </div>
  96. <el-table
  97. ref="singleTable"
  98. :data="active_dableData"
  99. style="width: 100%"
  100. height="44vh"
  101. @selection-change="handleSelectionChange"
  102. :header-cell-style="{
  103. background: 'rgba(10, 25, 38, 0.6)',
  104. color: '#66b1ff',
  105. fontSize: '14px',
  106. fontFamily: 'Microsoft YaHei',
  107. fontWeight: '400',
  108. }"
  109. >
  110. <el-table-column type="selection" width="55"> </el-table-column>
  111. <el-table-column type="index" align="center" width="50">
  112. </el-table-column>
  113. <el-table-column
  114. prop="jcbh"
  115. label="监测编号"
  116. align="center"
  117. width="220"
  118. show-overflow-tooltip
  119. >
  120. </el-table-column>
  121. <el-table-column
  122. prop="jcmj"
  123. label="监测面积(亩)"
  124. align="center"
  125. show-overflow-tooltip
  126. >
  127. </el-table-column>
  128. <!-- <el-table-column
  129. prop="regioncode"
  130. label="地区编号"
  131. align="center"
  132. show-overflow-tooltip
  133. >
  134. </el-table-column>
  135. <el-table-column
  136. prop="xmc"
  137. label="所属区县"
  138. align="center"
  139. show-overflow-tooltip
  140. >
  141. </el-table-column> -->
  142. <!-- <el-table-column fixed="right" label="操作" width="90" align="center">
  143. <template slot-scope="scope">
  144. <el-button
  145. @click="handleClick(scope.row)"
  146. type="text"
  147. size="small"
  148. >定位</el-button
  149. >
  150. <el-button
  151. type="text"
  152. size="small"
  153. @click="handleDetails(scope.row)"
  154. >详情</el-button
  155. >
  156. </template>
  157. </el-table-column> -->
  158. </el-table>
  159. </div>
  160. <span slot="footer" class="dialog-footer">
  161. <el-button @click="dialogVisible = false">取 消</el-button>
  162. <el-button type="primary" @click="creatTb">确 定</el-button>
  163. </span>
  164. </el-dialog>
  165. </div>
  166. </template>
  167. <script>
  168. import { ShapeUpload } from "@/api/ghss/hgxfx.js";
  169. import { ElMessage } from "element-ui";
  170. import { GetXzqhTree } from "@/api/map";
  171. import {
  172. GetDateList,
  173. CodeList,
  174. JscQueryList,
  175. JctbList,
  176. getJctbInfo,
  177. } from "@/api/ghss/jctb.js";
  178. // import { polygon } from "@turf/turf";
  179. import * as turf from "@turf/turf";
  180. import parse from "wellknown";
  181. import { loadGeoJSON } from "@/utils/MapHelper/help.js";
  182. let now_dataSources = null;
  183. let layerSources = {};
  184. export default {
  185. components: {},
  186. props: {
  187. //启用的组件,不传为所有
  188. keys: {
  189. type: Array,
  190. default: ["xzq", "hx", "sc", "zbd"],
  191. },
  192. activeTabs: {
  193. type: String,
  194. },
  195. type: {
  196. type: String,
  197. },
  198. },
  199. data() {
  200. return {
  201. dialogVisible: false,
  202. yearsOpt: [], //检测图斑时间季度数据数组
  203. monitorOpt: [],
  204. monitorVal: "",
  205. yearsVal: "",//时间季度绑定
  206. input: "",//图斑编号搜索条件绑定
  207. updateObj: {//搜索条件
  208. region: "4602",
  209. tab: 1,
  210. val0: "",
  211. val1: "",
  212. val2: "",
  213. },
  214. active_dableData: [],//表格数据
  215. multipleSelection: [],//选择表格选中的数据
  216. idArr: [],//存储id数组用于删除
  217. // -----------以上为选择图斑功能所需数据------------
  218. userXZQ: "", //store.state.user.user.dept.district,
  219. fwlist: {
  220. xzq: {
  221. id: 0,
  222. name: "行政区",
  223. icon: "wind-power",
  224. },
  225. hx: {
  226. id: 1,
  227. name: "绘制",
  228. icon: "Share",
  229. },
  230. sc: {
  231. id: 2,
  232. name: "上传",
  233. icon: "Upload-filled",
  234. },
  235. zbd: {
  236. id: 3,
  237. name: "坐标点",
  238. icon: "Location",
  239. },
  240. },
  241. model: {
  242. fwlx: 0,
  243. xzfw: "",
  244. xzmj: 0,
  245. feature: null,
  246. },
  247. handlerDraw: null,
  248. draw: null, //绘制
  249. fileList: [], //文件
  250. fileDataID: "", //存储上传文件获取到的id
  251. dataSources: null,
  252. };
  253. },
  254. mounted() {
  255. // this.model.fwlx = this.fwlist[this.$props.keys[0]].id;
  256. },
  257. methods: {
  258. creatTb() {
  259. this.dialogVisible = false;
  260. this.multipleSelection.forEach((item, index) => {
  261. this.model.xzmj += item.jcmj
  262. item.type = "图斑上图";
  263. if (item.geom)
  264. loadGeoJSON(item.geom, "#55A1E3", { isfly: true }, (data) => {
  265. layerSources[item.jcbh] = data;
  266. data.entities.values.forEach((entity) => {
  267. entity.properties = item;
  268. });
  269. });
  270. this.idArr.push(item.jcbh);
  271. });
  272. },
  273. handleSelectionChange(val) {
  274. console.log(val, "====");
  275. this.multipleSelection = val;
  276. },
  277. handleClose(done) {
  278. this.dialogVisible = false;
  279. },
  280. typeChange(val) {
  281. this.updateObj.val2 = val;
  282. },
  283. regionChange1(region) {
  284. this.updateObj.region = region;
  285. },
  286. //年份季度改变
  287. yearsChange(val) {
  288. val = JSON.parse(JSON.stringify(val));
  289. this.updateObj.val0 = val.startTime;
  290. this.updateObj.val1 = val.endTime;
  291. this.yearsVal = val.quarter;
  292. console.log(this.updateObj.val0, this.updateObj.val1, this.yearsVal);
  293. },
  294. getXzqTreeData() {
  295. GetXzqhTree().then((res) => {
  296. if (res.data.length > 0) {
  297. const list = res.data[0].children.filter((item) => {
  298. return item.label == "三亚市";
  299. });
  300. if (list.length > 0) {
  301. list[0].value = "4602";
  302. this.xzqTreeData = list[0];
  303. } else this.xzqTreeData = res.data;
  304. }
  305. });
  306. GetDateList().then((res) => {
  307. this.yearsOpt = res.data;
  308. this.updateObj.val0 = res.data[0].startTime;
  309. this.updateObj.val1 = res.data[0].endTime;
  310. this.yearsVal = res.data[0].quarter;
  311. });
  312. //检测类型分类
  313. CodeList({
  314. dictType: "卫片执法后地类分类标准‌",
  315. pageNum: 1,
  316. pageSize: 999,
  317. }).then((res) => {
  318. if (res.code == 200) {
  319. this.monitorOpt = res.rows;
  320. }
  321. });
  322. },
  323. initNew() {
  324. let obj = {
  325. hlx: this.updateObj.val2,
  326. regioncode: this.updateObj.region,
  327. startTime: this.updateObj.val0,
  328. endTime: this.updateObj.val1,
  329. pageNum: 1,
  330. pageSize: '9999999',
  331. jcbh: this.input,
  332. };
  333. JctbList(obj).then((res) => {
  334. this.active_dableData = res.rows;
  335. this.total = res.total;
  336. });
  337. },
  338. changePatches() {
  339. this.clearAll();
  340. this.getXzqTreeData();
  341. this.dialogVisible = true;
  342. },
  343. remove() {
  344. if (this.idArr.length != 0) {
  345. this.idArr.forEach((item) => {
  346. viewer.dataSources.remove(layerSources[item]);
  347. });
  348. }
  349. },
  350. /** ---------------------以上为选择图斑的逻辑方法----------- **/
  351. //上传文件
  352. handleChange(file, fileList) {
  353. if (fileList.length > 0) {
  354. this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
  355. this.clearAll(false);
  356. }
  357. const formdata = new FormData();
  358. formdata.append("file", file.raw);
  359. formdata.append("fromType", 2);
  360. formdata.append("fromRoute", this.$route.path);
  361. ShapeUpload(formdata).then((res) => {
  362. if (res.success) {
  363. this.model.xzmj = (res.data.area * 0.0015).toFixed(2);
  364. // viewer.entities.removeAll();
  365. this.resetDataSources();
  366. this.fileDataID = res.data.id;
  367. this.model.xzfw = res.data.id;
  368. this.model.geom = res.data.geom;
  369. this.addPolygon(parse(res.data.geom));
  370. if (this.$props.type == "cutfill" || this.$props.type == "up") {
  371. this.$emit("cutfill", this.model.geom);
  372. }
  373. }
  374. });
  375. },
  376. //上传文件
  377. handleChange1(file, fileList) {
  378. if (fileList.length > 0) {
  379. this.fileList = [fileList[fileList.length - 1]]; //这一步,是展示最后一次选择文件
  380. this.clearAll(false);
  381. }
  382. const formdata = new FormData();
  383. formdata.append("file", file.raw);
  384. this.addPolygon();
  385. },
  386. // 加载GeoJSON数据
  387. addPolygon(geojson) {
  388. let _this = this;
  389. let polygon = Cesium.GeoJsonDataSource.load(geojson, {
  390. clampToGround: true,
  391. stroke: Cesium.Color.RED,
  392. fill: Cesium.Color.WHITE.withAlpha(0.3),
  393. strokeWidth: 5,
  394. });
  395. polygon.then(function (dataSource) {
  396. // 将数据源添加到Cesium Viewer
  397. viewer.dataSources.add(dataSource);
  398. viewer.zoomTo(dataSource);
  399. now_dataSources = dataSource;
  400. });
  401. },
  402. resetDataSources() {
  403. if (now_dataSources) {
  404. viewer.dataSources.remove(now_dataSources);
  405. now_dataSources = null;
  406. }
  407. },
  408. //绘制
  409. drawMap() {
  410. this.remove()//删除选择的图斑
  411. if (!window.handlerPolygon) {
  412. common.initHandler("Polygon");
  413. }
  414. common.handlerDrawing("Polygon").then(
  415. (res) => {
  416. // console.log(res.positions, "------");
  417. //过滤掉高度
  418. const filteredArr = res.positions.filter((item, index) => {
  419. if ((index + 1) % 3 !== 0) {
  420. return item;
  421. }
  422. });
  423. // 数组变二维数组方法
  424. function listToMatrix(list, elementsPerSubArray) {
  425. var matrix = [],
  426. i,
  427. k;
  428. for (i = 0, k = -1; i < list.length; i++) {
  429. if (i % elementsPerSubArray === 0) {
  430. k++;
  431. matrix[k] = [];
  432. }
  433. matrix[k].push(list[i]);
  434. }
  435. return matrix;
  436. }
  437. var matrix = listToMatrix(filteredArr, 2);
  438. // console.log(matrix, "max-----");
  439. matrix.push(matrix[0]);
  440. const geojsonPolygon = turf.polygon([matrix]);
  441. // var parse = require("wellknown"); //引入wellknow
  442. const wktPolygon = parse.stringify(geojsonPolygon);
  443. // console.log("WKT Polygon:", wktPolygon);
  444. if (this.$props.type == "cutfill") {
  445. this.model.geom = wktPolygon;
  446. this.$emit("cutfill", this.model.geom);
  447. return;
  448. }
  449. if (this.$props.type == "up") {
  450. this.$emit("cutfill", wktPolygon, res.positions);
  451. }
  452. const formdata = new FormData();
  453. // formdata.append("file", file.raw);
  454. formdata.append("fromType", 1);
  455. formdata.append("geom", wktPolygon);
  456. formdata.append("fromRoute", this.$route.path);
  457. // this.addPolygon();
  458. ShapeUpload(formdata).then((res) => {
  459. if (res.success) {
  460. this.fileDataID = res.data.id;
  461. this.model.xzmj = (res.data.area * 0.0015).toFixed(2);
  462. this.model.xzfw = res.data.id;
  463. this.model.geom = res.data.geom;
  464. this.$message({
  465. message: "绘制成功!",
  466. type: "success",
  467. });
  468. }
  469. });
  470. },
  471. (err) => {
  472. console.log(err);
  473. }
  474. );
  475. window.handlerPolygon.activate();
  476. },
  477. clear() {
  478. if (this.handlerDraw != null) {
  479. this.handlerDraw.clear();
  480. viewer.scene.globe.removeAllExcavationRegion();
  481. this.handlerDraw.deactivate();
  482. this.handlerDraw = null;
  483. this.result = null;
  484. }
  485. },
  486. //清除
  487. clearAll(clearfile = true) {
  488. //销毁上传创建的面
  489. // viewer.entities.removeAll();
  490. this.remove()
  491. this.resetDataSources();
  492. this.model.xzfw = "";
  493. this.model.xzmj = 0;
  494. if (clearfile) {
  495. this.fileDataID = "";
  496. this.fileList = [];
  497. }
  498. common.clearHandlerDrawing("Polygon");
  499. },
  500. //输出:重置
  501. reset() {
  502. this.clearAll();
  503. },
  504. //输出:获取范围
  505. getRange() {
  506. return this.model;
  507. },
  508. },
  509. beforeDestroy() {
  510. this.clearAll();
  511. },
  512. watch: {
  513. // 监听,当路由发生变化的时候执行
  514. $route: {
  515. // $route可以用引号,也可以不用引号//to 老路由信息,from 新路由信息
  516. handler(to, from) {
  517. this.clearAll();
  518. },
  519. deep: true, // 深度观察监听
  520. immediate: true, // 第一次初始化渲染就可以监听到
  521. },
  522. updateObj: {
  523. handler(newVal, oldVal) {
  524. this.initNew();
  525. },
  526. deep: true,
  527. immediate: true,
  528. },
  529. },
  530. };
  531. </script>
  532. <style lang="scss" scoped>
  533. .map-range {
  534. width: 100px;
  535. // height: 100px;
  536. color: #fff;
  537. .xz_type {
  538. margin-bottom: 10px;
  539. // display: flex;
  540. // justify-content: space-between;
  541. .keyitem {
  542. width: 100px;
  543. height: 30px;
  544. font-size: 16px;
  545. line-height: 30px;
  546. display: inline-block;
  547. cursor: pointer;
  548. }
  549. }
  550. .fwlxrange {
  551. display: flex;
  552. justify-content: space-between;
  553. text-align: center;
  554. .clear {
  555. width: 80px;
  556. }
  557. /deep/ .el-button--mini {
  558. background: #0f7ac8;
  559. border: none;
  560. border-radius: 0;
  561. color: #fff;
  562. width: 60px;
  563. height: 26px;
  564. font-size: 12px;
  565. padding: 0;
  566. // line-height: 32px;
  567. // text-align: center;
  568. }
  569. }
  570. }
  571. .headerSelect {
  572. width: 100%;
  573. height: 26px;
  574. // background: #00ffff;
  575. margin: 5px 0px;
  576. display: flex;
  577. justify-content: space-between;
  578. /deep/ .el-select {
  579. padding: 0 10px;
  580. }
  581. /deep/ .el-input--suffix .el-input__inner {
  582. padding-right: 15px;
  583. // height: 26px;
  584. background: #041c3273 !important;
  585. border: 1px dashed #0f7ac8;
  586. color: #fff;
  587. }
  588. /deep/ .el-cascader {
  589. // line-height: 26px;
  590. }
  591. /deep/.el-input__icon {
  592. // line-height: 1;
  593. color: #fff;
  594. }
  595. /deep/ .el-input__inner::placeholder {
  596. color: #fff;
  597. }
  598. }
  599. </style>