123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506 |
- <template>
- <div class="xzjg">
- <div>项目名称XXXXXX</div>
- <div class="box-sizing" style="height: 35%; width: 100%">
- <div class="title site-title">
- <!-- <span class="block-title"
- >意向地块{{ bgList ? bgList.length : 0 }})</span
- > -->
- 意向地块({{ bgList ? bgList.length : 0 }})
- <span>导出报告</span>
- </div>
- <el-scrollbar
- class="height-100-50 max-width"
- style="border: 1px solid #e8e8e8"
- >
- <el-collapse accordion v-model="activeNames">
- <el-collapse-item
- :name="'gb' + index1"
- v-for="(item1, index1) in bgList"
- :key="index1"
- >
- <template slot="title">
- <!-- 地块编号B_P_123 -->
- 地块编号{{ item1.dlbm }} ({{ item1.tbmj.toFixed(0) }})
- <span class="tools">
- <i
- class="header-icon el-icon-place"
- @click="mapview(item1)"
- ></i>
- <i
- class="header-icon el-icon-delete"
- @click="deleteprogramme($event, item1)"
- ></i>
- </span>
- </template>
- <div class="collapseCon">
- <p class="oneItem">
- <span>{{ item1.dlmc }}</span>
- <span>{{ item1.tbmj.toFixed(2) }}平方米</span>
- </p>
- <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
- </div>
- </el-collapse-item>
- </el-collapse>
- </el-scrollbar>
- </div>
- <div class="box-sizing padding-bottom-60" style="height: 35%; width: 100%">
- <div class="title height-50 flex-box align-center">
- <span class="block-title"
- >备选地块({{ xzjgObj.items ? xzjgObj.items.length : 0 }})</span
- >
- </div>
- <el-scrollbar
- class="height-100-50 max-width"
- style="border: 1px solid #e8e8e8"
- >
- <el-collapse accordion v-model="activeNames">
- <el-collapse-item
- :name="index"
- v-for="(item, index) in xzjgObj.items"
- :key="item.bsm"
- >
- <template slot="title">
- <!-- 地块编号B_P_123 -->
- 地块编号{{ item.dlbm }} ({{ item.tbmj.toFixed(0) }})
- <span class="tools">
- <i class="header-icon el-icon-place" @click="mapview(item)"></i>
- <i
- class="header-icon el-icon-plus"
- @click="addprogramme($event, item)"
- ></i>
- </span>
- </template>
- <div class="collapseCon">
- <p class="oneItem">
- <span>{{ item.dlmc }}</span>
- <span>{{ item.tbmj.toFixed(2) }}平方米</span>
- </p>
- <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
- </div>
- </el-collapse-item>
- </el-collapse>
- </el-scrollbar>
- </div>
- <div class="xz-btn flex-box" style="justify-content: space-between">
- <div class="max-height flex-box align-center margin-left-22"></div>
- <div class="max-height flex-box align-center">
- <el-button round class="btn-style" @click="resetAll">重选</el-button>
- <el-button
- round
- class="btn-style"
- @click="downReport"
- v-if="reportText == '查看报告'"
- >下载报告</el-button
- >
- <el-button
- type="primary"
- round
- class="btn-style margin-right-22"
- @click="submit"
- >{{ reportText }}</el-button
- >
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- components: {},
- props: {
- activeTabs: {
- type: String,
- },
- },
- data() {
- return {
- bgList: [],
- model: null,
- layer: null,
- reportText: "生成报告",
- tempObj: [],
- xzjgObj: {
- bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- xmmc: "111",
- jsdw: "111",
- fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
- items: [
- {
- objectid: 13761,
- bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
- rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- dlb: "SDE.XZYDYH",
- dlbm: "0602",
- dlmc: "种植设施建设用地",
- cjsj: "2023-02-15T16:12:34.000+08:00",
- yxfa: "0",
- bz: null,
- tbmj: 25.0850187,
- xzqdm: "150502",
- xzqmc: "科尔沁区",
- fxyzjg: [],
- },
- ],
- },
- tempObj: {
- bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- xmmc: "111",
- jsdw: "111",
- fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
- items: [
- {
- objectid: 13761,
- bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
- rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- dlb: "SDE.XZYDYH",
- dlbm: "0602",
- dlmc: "种植设施建设用地",
- cjsj: "2023-02-15T16:12:34.000+08:00",
- yxfa: "0",
- bz: null,
- tbmj: 25.0850187,
- xzqdm: "150502",
- xzqmc: "科尔沁区",
- fxyzjg: [],
- },
- ],
- rwBsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- },
- rwObj: {
- bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
- sjy: "SDE.XZYDYH",
- sjymc: "国土空间总体规划",
- ydbsm: "0",
- ydmc: null,
- ydmjbegin: "0",
- ydmjend: "100",
- xmmc: "111",
- jsdw: "111",
- fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111(选址报告)_1676448756708.pdf",
- rwzt: 2,
- fwlx: 1,
- xzfw: null,
- zip: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111_1676448756708.zip",
- },
- };
- },
- mounted() {},
- methods: {
- addprogramme(e, item) {
- console.log(item, "-------");
- e.stopPropagation();
- const list = this.bgList.filter((item1) => {
- return item1 == item;
- });
- if (list.length == 0) {
- this.bgList.push(item);
- const list = this.xzjgObj.items.filter((item1) => {
- return item1.bsm != item.bsm;
- });
- this.xzjgObj.items = list;
- }
- },
- deleteprogramme(e, item) {
- e.stopPropagation();
- this.bgList = this.bgList.filter((item1) => {
- return item1.bsm != item.bsm;
- });
- const temp = JSON.parse(
- JSON.stringify(
- this.tempObj.items.filter((item1) => {
- return item1.bsm == item.bsm;
- })
- )
- );
- this.xzjgObj.items.push(temp[0]);
- },
- resetAll() {
- // parent.emit("update:xzjgObj", JSON.parse(JSON.stringify(this.tempObj)));
- this.reportText = "生成报告";
- this.bgList = [];
- },
- mapview(item) {
- console.log(item, "=====");
- },
- submit() {
- console.log("生成报告");
- // if (this.reportText == "查看报告") {
- // window.open(this.model.fxbg.replace(".docx", ".pdf"), "_blank");
- // return;
- // }
- // if (this.bgList.length == 0) {
- // ElMessage.warning("请添加选址方案!");
- // return false;
- // }
- // const json = this.bgList.map((item) => {
- // return item.bsm;
- // });
- // ElMessageBox.confirm("请问是否生成报告?", "辅助选址报告", {
- // confirmButtonText: "确定",
- // cancelButtonText: "取消",
- // callback: (action) => {
- // if (action == "confirm") {
- // parent.emit("update:loading", true);
- // SaveWordFile({
- // bsm: this.rwBsm,
- // xzbsm: json,
- // })
- // .then((res) => {
- // parent.emit("update:loading", false);
- // if (res.success && res.data != null) {
- // ElMessage.success("报告生成成功!");
- // this.model = res.data;
- // this.reportText = "查看报告";
- // } else {
- // parent.emit("update:loading", false);
- // ElMessage.success("报告生成失败!");
- // }
- // })
- // .catch(() => {
- // parent.emit("update:loading", false);
- // ElMessage.success("报告生成失败!");
- // });
- // }
- // },
- // });
- },
- downReport() {
- window.open(this.model.zip, "_blank");
- },
- loadJgMap() {
- if (this.layer == null) {
- this.layer = arcMap.CreateVecLayer(
- "fzxz_layer",
- function (feature) {
- var mj = feature.get("TBMJ").toFixed(0);
- return new Style({
- fill: new Fill({
- color: "rgba(255, 255, 255, 0.2)",
- }),
- stroke: new Stroke({
- color: "#1171d6",
- width: 2,
- }),
- text: new Text({
- // scale:0.85,
- text: `${mj}`, //m²
- font: "14px sans-serif",
- fill: new Fill({
- color: "#1171d6",
- }),
- stroke: new Stroke({
- color: "#fff",
- width: 3,
- }),
- }),
- });
- },
- function (feature, popup) {
- console.log(feature);
- //获取选址结果
- GetXzJgByBsm({
- jgbsm: feature.get("BSM"),
- }).then((res) => {
- if (res.success) {
- 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>
- </div><div class='popupinfo-content'>`;
- html +=
- "<li><span>用地代码:</span><span>" +
- res.data.dlbm +
- "</span></li>";
- html +=
- "<li><span>用地名称:</span><span>" +
- res.data.dlmc +
- "</span></li>";
- html +=
- "<li><span>图斑面积:</span><span>" +
- res.data.tbmj.toFixed(0) +
- "m²</span></li>";
- if (res.data.yxfa == "0") {
- html += "<li><span>选址方案:</span><span>未选</span></li>";
- } else {
- html +=
- "<li><span>选址方案:</span><span style='color:rgb(0,120,215);'>已选</span></li>";
- }
- var yzf = res.data.fxyzjg.filter((t) => {
- return t.yztj == "F";
- });
- if (yzf.length) {
- html += "<li>分析因子</li>";
- yzf.map((jg) => {
- html += `<li><span>${
- jg.yxyzmc
- }:</span><span>压占面积${Number(jg.fxjg).toFixed(
- 0
- )}m²</span></li>`;
- });
- }
- popup({}, html);
- }
- });
- }
- );
- arcMap.addLayer(this.layer);
- }
- this.layer.getSource().clear();
- arcMap.SearchWfsFilter2(
- `${SYS_LAYERS.FZXZ}/0/query`,
- `RWBSM='${this.rwBsm}'`,
- function (fs) {
- this.layer.getSource().addFeatures(fs);
- }
- );
- },
- loadJg(bsm) {
- this.rwBsm = bsm;
- if (this.layer) {
- this.layer.getSource().clear();
- }
- if (bsm != "") {
- this.loadJgMap();
- this.bgList = [];
- }
- if (this.model.fxbg) {
- this.reportText = "查看报告";
- }
- },
- initData() {
- this.model = this.rwObj;
- this.bgList = this.tempObj.items.filter(
- (item) => !this.xzjgObj.items.some((ele) => ele.bsm === item.bsm)
- );
- this.bgList.sort(function (a, b) {
- return parseInt(a.yxfa) - parseInt(b.yxfa);
- });
- },
- },
- watch: {
- activeTabs(newValue, oldValue) {
- if (newValue == "scjg") {
- this.initData();
- }
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .xzjg {
- height: calc(100vh - 108px);
- min-width: 300px;
- box-sizing: border-box;
- padding: 0px 10px;
- ::v-deep(.el-scrollbar__bar) {
- right: -15px;
- }
- td {
- padding-left: 15px;
- }
- .el-collapse-item__header {
- font-size: 18px;
- .fanan-caozuo {
- position: absolute;
- right: 20px;
- box-sizing: border-box;
- padding-right: 20px;
- }
- }
- .el-collapse-item__content {
- padding-bottom: 0;
- }
- ::v-deep(.el-collapse-item__header) {
- color: #303133 !important;
- position: relative;
- cursor: auto;
- }
- .blue {
- color: #409eff;
- }
- ::v-deep(.el-tabs__item) {
- height: 55px;
- }
- ::v-deep(.el-form-item__content) {
- line-height: 40px;
- }
- ::v-deep(.el-form-item__label) {
- line-height: 40px;
- }
- .title {
- button {
- padding: 0;
- float: right;
- margin-right: 5px;
- min-height: unset;
- }
- }
- .el-form-item {
- margin-bottom: 0;
- }
- .xz-btn {
- width: 100%;
- background: #efefef;
- position: absolute;
- height: 55px;
- z-index: 2;
- bottom: 0;
- right: 0;
- display: flex;
- align-items: center;
- }
- ::v-deep(.el-descriptions :not(.is-bordered) td),
- ::v-deep(.el-descriptions :not(.is-bordered) th) {
- padding-bottom: 3px;
- }
- ::v-deep(.el-collapse-item__content) {
- padding-bottom: 10px;
- }
- ::v-deep(.el-collapse-item__header) {
- cursor: pointer;
- &:hover {
- background-color: rgba(64, 158, 255, 0.09);
- }
- }
- .clat-title {
- padding-left: 10px;
- padding-right: 5px;
- display: inline-flex;
- .clat-title-head {
- display: inline-block;
- max-width: 280px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- .tools {
- position: absolute;
- right: 30px;
- }
- .collapseCon {
- p {
- width: 100%;
- height: 30px;
- line-height: 30px;
- // background-color: pink;
- }
- .oneItem {
- span {
- border: 1px solid #02a7f0;
- padding: 3px 5px;
- border-radius: 5px;
- }
- }
- }
- </style>
|