xzjg.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
  1. <template>
  2. <div class="xzjg">
  3. <div>项目名称XXXXXX</div>
  4. <div class="box-sizing" style="height: 35%; width: 100%">
  5. <div class="title site-title">
  6. <!-- <span class="block-title"
  7. >意向地块{{ bgList ? bgList.length : 0 }})</span
  8. > -->
  9. 意向地块({{ bgList ? bgList.length : 0 }})
  10. <span>导出报告</span>
  11. </div>
  12. <el-scrollbar
  13. class="height-100-50 max-width"
  14. style="border: 1px solid #e8e8e8"
  15. >
  16. <el-collapse accordion v-model="activeNames">
  17. <el-collapse-item
  18. :name="'gb' + index1"
  19. v-for="(item1, index1) in bgList"
  20. :key="index1"
  21. >
  22. <template slot="title">
  23. <!-- 地块编号B_P_123 -->
  24. 地块编号{{ item1.dlbm }} ({{ item1.tbmj.toFixed(0) }})
  25. <span class="tools">
  26. <i
  27. class="header-icon el-icon-place"
  28. @click="mapview(item1)"
  29. ></i>
  30. <i
  31. class="header-icon el-icon-delete"
  32. @click="deleteprogramme($event, item1)"
  33. ></i>
  34. </span>
  35. </template>
  36. <div class="collapseCon">
  37. <p class="oneItem">
  38. <span>{{ item1.dlmc }}</span>
  39. <span>{{ item1.tbmj.toFixed(2) }}平方米</span>
  40. </p>
  41. <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
  42. </div>
  43. </el-collapse-item>
  44. </el-collapse>
  45. </el-scrollbar>
  46. </div>
  47. <div class="box-sizing padding-bottom-60" style="height: 35%; width: 100%">
  48. <div class="title height-50 flex-box align-center">
  49. <span class="block-title"
  50. >备选地块({{ xzjgObj.items ? xzjgObj.items.length : 0 }})</span
  51. >
  52. </div>
  53. <el-scrollbar
  54. class="height-100-50 max-width"
  55. style="border: 1px solid #e8e8e8"
  56. >
  57. <el-collapse accordion v-model="activeNames">
  58. <el-collapse-item
  59. :name="index"
  60. v-for="(item, index) in xzjgObj.items"
  61. :key="item.bsm"
  62. >
  63. <template slot="title">
  64. <!-- 地块编号B_P_123 -->
  65. 地块编号{{ item.dlbm }} ({{ item.tbmj.toFixed(0) }})
  66. <span class="tools">
  67. <i class="header-icon el-icon-place" @click="mapview(item)"></i>
  68. <i
  69. class="header-icon el-icon-plus"
  70. @click="addprogramme($event, item)"
  71. ></i>
  72. </span>
  73. </template>
  74. <div class="collapseCon">
  75. <p class="oneItem">
  76. <span>{{ item.dlmc }}</span>
  77. <span>{{ item.tbmj.toFixed(2) }}平方米</span>
  78. </p>
  79. <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
  80. </div>
  81. </el-collapse-item>
  82. </el-collapse>
  83. </el-scrollbar>
  84. </div>
  85. <div class="xz-btn flex-box" style="justify-content: space-between">
  86. <div class="max-height flex-box align-center margin-left-22"></div>
  87. <div class="max-height flex-box align-center">
  88. <el-button round class="btn-style" @click="resetAll">重选</el-button>
  89. <el-button
  90. round
  91. class="btn-style"
  92. @click="downReport"
  93. v-if="reportText == '查看报告'"
  94. >下载报告</el-button
  95. >
  96. <el-button
  97. type="primary"
  98. round
  99. class="btn-style margin-right-22"
  100. @click="submit"
  101. >{{ reportText }}</el-button
  102. >
  103. </div>
  104. </div>
  105. </div>
  106. </template>
  107. <script>
  108. export default {
  109. components: {},
  110. props: {
  111. activeTabs: {
  112. type: String,
  113. },
  114. },
  115. data() {
  116. return {
  117. bgList: [],
  118. model: null,
  119. layer: null,
  120. reportText: "生成报告",
  121. tempObj: [],
  122. xzjgObj: {
  123. bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  124. xmmc: "111",
  125. jsdw: "111",
  126. fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
  127. items: [
  128. {
  129. objectid: 13761,
  130. bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
  131. rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  132. dlb: "SDE.XZYDYH",
  133. dlbm: "0602",
  134. dlmc: "种植设施建设用地",
  135. cjsj: "2023-02-15T16:12:34.000+08:00",
  136. yxfa: "0",
  137. bz: null,
  138. tbmj: 25.0850187,
  139. xzqdm: "150502",
  140. xzqmc: "科尔沁区",
  141. fxyzjg: [],
  142. },
  143. ],
  144. },
  145. tempObj: {
  146. bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  147. xmmc: "111",
  148. jsdw: "111",
  149. fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
  150. items: [
  151. {
  152. objectid: 13761,
  153. bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
  154. rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  155. dlb: "SDE.XZYDYH",
  156. dlbm: "0602",
  157. dlmc: "种植设施建设用地",
  158. cjsj: "2023-02-15T16:12:34.000+08:00",
  159. yxfa: "0",
  160. bz: null,
  161. tbmj: 25.0850187,
  162. xzqdm: "150502",
  163. xzqmc: "科尔沁区",
  164. fxyzjg: [],
  165. },
  166. ],
  167. rwBsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  168. },
  169. rwObj: {
  170. bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
  171. sjy: "SDE.XZYDYH",
  172. sjymc: "国土空间总体规划",
  173. ydbsm: "0",
  174. ydmc: null,
  175. ydmjbegin: "0",
  176. ydmjend: "100",
  177. xmmc: "111",
  178. jsdw: "111",
  179. fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
  180. rwzt: 2,
  181. fwlx: 1,
  182. xzfw: null,
  183. zip: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111_1676448756708.zip",
  184. },
  185. };
  186. },
  187. mounted() {},
  188. methods: {
  189. addprogramme(e, item) {
  190. console.log(item, "-------");
  191. e.stopPropagation();
  192. const list = this.bgList.filter((item1) => {
  193. return item1 == item;
  194. });
  195. if (list.length == 0) {
  196. this.bgList.push(item);
  197. const list = this.xzjgObj.items.filter((item1) => {
  198. return item1.bsm != item.bsm;
  199. });
  200. this.xzjgObj.items = list;
  201. }
  202. },
  203. deleteprogramme(e, item) {
  204. e.stopPropagation();
  205. this.bgList = this.bgList.filter((item1) => {
  206. return item1.bsm != item.bsm;
  207. });
  208. const temp = JSON.parse(
  209. JSON.stringify(
  210. this.tempObj.items.filter((item1) => {
  211. return item1.bsm == item.bsm;
  212. })
  213. )
  214. );
  215. this.xzjgObj.items.push(temp[0]);
  216. },
  217. resetAll() {
  218. // parent.emit("update:xzjgObj", JSON.parse(JSON.stringify(this.tempObj)));
  219. this.reportText = "生成报告";
  220. this.bgList = [];
  221. },
  222. mapview(item) {
  223. console.log(item, "=====");
  224. },
  225. submit() {
  226. console.log("生成报告");
  227. // if (this.reportText == "查看报告") {
  228. // window.open(this.model.fxbg.replace(".docx", ".pdf"), "_blank");
  229. // return;
  230. // }
  231. // if (this.bgList.length == 0) {
  232. // ElMessage.warning("请添加选址方案!");
  233. // return false;
  234. // }
  235. // const json = this.bgList.map((item) => {
  236. // return item.bsm;
  237. // });
  238. // ElMessageBox.confirm("请问是否生成报告?", "辅助选址报告", {
  239. // confirmButtonText: "确定",
  240. // cancelButtonText: "取消",
  241. // callback: (action) => {
  242. // if (action == "confirm") {
  243. // parent.emit("update:loading", true);
  244. // SaveWordFile({
  245. // bsm: this.rwBsm,
  246. // xzbsm: json,
  247. // })
  248. // .then((res) => {
  249. // parent.emit("update:loading", false);
  250. // if (res.success && res.data != null) {
  251. // ElMessage.success("报告生成成功!");
  252. // this.model = res.data;
  253. // this.reportText = "查看报告";
  254. // } else {
  255. // parent.emit("update:loading", false);
  256. // ElMessage.success("报告生成失败!");
  257. // }
  258. // })
  259. // .catch(() => {
  260. // parent.emit("update:loading", false);
  261. // ElMessage.success("报告生成失败!");
  262. // });
  263. // }
  264. // },
  265. // });
  266. },
  267. downReport() {
  268. window.open(this.model.zip, "_blank");
  269. },
  270. loadJgMap() {
  271. if (this.layer == null) {
  272. this.layer = arcMap.CreateVecLayer(
  273. "fzxz_layer",
  274. function (feature) {
  275. var mj = feature.get("TBMJ").toFixed(0);
  276. return new Style({
  277. fill: new Fill({
  278. color: "rgba(255, 255, 255, 0.2)",
  279. }),
  280. stroke: new Stroke({
  281. color: "#1171d6",
  282. width: 2,
  283. }),
  284. text: new Text({
  285. // scale:0.85,
  286. text: `${mj}`, //m²
  287. font: "14px sans-serif",
  288. fill: new Fill({
  289. color: "#1171d6",
  290. }),
  291. stroke: new Stroke({
  292. color: "#fff",
  293. width: 3,
  294. }),
  295. }),
  296. });
  297. },
  298. function (feature, popup) {
  299. console.log(feature);
  300. //获取选址结果
  301. GetXzJgByBsm({
  302. jgbsm: feature.get("BSM"),
  303. }).then((res) => {
  304. if (res.success) {
  305. var html = `<div id='popup_temp' class='map-popupinfo'><div class="popupinfo-title">${res.data.dlmc}<el-icon class='pointer popupinfo-close' id='closePop'><close /></el-icon>
  306. </div><div class='popupinfo-content'>`;
  307. html +=
  308. "<li><span>用地代码:</span><span>" +
  309. res.data.dlbm +
  310. "</span></li>";
  311. html +=
  312. "<li><span>用地名称:</span><span>" +
  313. res.data.dlmc +
  314. "</span></li>";
  315. html +=
  316. "<li><span>图斑面积:</span><span>" +
  317. res.data.tbmj.toFixed(0) +
  318. "m²</span></li>";
  319. if (res.data.yxfa == "0") {
  320. html += "<li><span>选址方案:</span><span>未选</span></li>";
  321. } else {
  322. html +=
  323. "<li><span>选址方案:</span><span style='color:rgb(0,120,215);'>已选</span></li>";
  324. }
  325. var yzf = res.data.fxyzjg.filter((t) => {
  326. return t.yztj == "F";
  327. });
  328. if (yzf.length) {
  329. html += "<li>分析因子</li>";
  330. yzf.map((jg) => {
  331. html += `<li><span>${
  332. jg.yxyzmc
  333. }:</span><span>压占面积${Number(jg.fxjg).toFixed(
  334. 0
  335. )}m²</span></li>`;
  336. });
  337. }
  338. popup({}, html);
  339. }
  340. });
  341. }
  342. );
  343. arcMap.addLayer(this.layer);
  344. }
  345. this.layer.getSource().clear();
  346. arcMap.SearchWfsFilter2(
  347. `${SYS_LAYERS.FZXZ}/0/query`,
  348. `RWBSM='${this.rwBsm}'`,
  349. function (fs) {
  350. this.layer.getSource().addFeatures(fs);
  351. }
  352. );
  353. },
  354. loadJg(bsm) {
  355. this.rwBsm = bsm;
  356. if (this.layer) {
  357. this.layer.getSource().clear();
  358. }
  359. if (bsm != "") {
  360. this.loadJgMap();
  361. this.bgList = [];
  362. }
  363. if (this.model.fxbg) {
  364. this.reportText = "查看报告";
  365. }
  366. },
  367. initData() {
  368. this.model = this.rwObj;
  369. this.bgList = this.tempObj.items.filter(
  370. (item) => !this.xzjgObj.items.some((ele) => ele.bsm === item.bsm)
  371. );
  372. this.bgList.sort(function (a, b) {
  373. return parseInt(a.yxfa) - parseInt(b.yxfa);
  374. });
  375. },
  376. },
  377. watch: {
  378. activeTabs(newValue, oldValue) {
  379. if (newValue == "scjg") {
  380. this.initData();
  381. }
  382. },
  383. },
  384. };
  385. </script>
  386. <style lang="scss" scoped>
  387. .xzjg {
  388. height: calc(100vh - 108px);
  389. min-width: 300px;
  390. box-sizing: border-box;
  391. padding: 0px 10px;
  392. ::v-deep(.el-scrollbar__bar) {
  393. right: -15px;
  394. }
  395. td {
  396. padding-left: 15px;
  397. }
  398. .el-collapse-item__header {
  399. font-size: 18px;
  400. .fanan-caozuo {
  401. position: absolute;
  402. right: 20px;
  403. box-sizing: border-box;
  404. padding-right: 20px;
  405. }
  406. }
  407. .el-collapse-item__content {
  408. padding-bottom: 0;
  409. }
  410. ::v-deep(.el-collapse-item__header) {
  411. color: #303133 !important;
  412. position: relative;
  413. cursor: auto;
  414. }
  415. .blue {
  416. color: #409eff;
  417. }
  418. ::v-deep(.el-tabs__item) {
  419. height: 55px;
  420. }
  421. ::v-deep(.el-form-item__content) {
  422. line-height: 40px;
  423. }
  424. ::v-deep(.el-form-item__label) {
  425. line-height: 40px;
  426. }
  427. .title {
  428. button {
  429. padding: 0;
  430. float: right;
  431. margin-right: 5px;
  432. min-height: unset;
  433. }
  434. }
  435. .el-form-item {
  436. margin-bottom: 0;
  437. }
  438. .xz-btn {
  439. width: 100%;
  440. background: #efefef;
  441. position: absolute;
  442. height: 55px;
  443. z-index: 2;
  444. bottom: 0;
  445. right: 0;
  446. display: flex;
  447. align-items: center;
  448. }
  449. ::v-deep(.el-descriptions :not(.is-bordered) td),
  450. ::v-deep(.el-descriptions :not(.is-bordered) th) {
  451. padding-bottom: 3px;
  452. }
  453. ::v-deep(.el-collapse-item__content) {
  454. padding-bottom: 10px;
  455. }
  456. ::v-deep(.el-collapse-item__header) {
  457. cursor: pointer;
  458. &:hover {
  459. background-color: rgba(64, 158, 255, 0.09);
  460. }
  461. }
  462. .clat-title {
  463. padding-left: 10px;
  464. padding-right: 5px;
  465. display: inline-flex;
  466. .clat-title-head {
  467. display: inline-block;
  468. max-width: 280px;
  469. overflow: hidden;
  470. text-overflow: ellipsis;
  471. }
  472. }
  473. }
  474. .tools {
  475. position: absolute;
  476. right: 30px;
  477. }
  478. .collapseCon {
  479. p {
  480. width: 100%;
  481. height: 30px;
  482. line-height: 30px;
  483. // background-color: pink;
  484. }
  485. .oneItem {
  486. span {
  487. border: 1px solid #02a7f0;
  488. padding: 3px 5px;
  489. border-radius: 5px;
  490. }
  491. }
  492. }
  493. </style>