diff --git a/src/assets/scss/modules/visual/fiveLayerMap.scss b/src/assets/scss/modules/visual/fiveLayerMap.scss index 66bf9855..2dd1e704 100644 --- a/src/assets/scss/modules/visual/fiveLayerMap.scss +++ b/src/assets/scss/modules/visual/fiveLayerMap.scss @@ -49,62 +49,9 @@ } .div_data { - flex: 0 0 622px; + flex: 0 0 600px; margin-left: 12px; - .div_search { - width: 100%; - height: 56px; - text-align: center; - background-color: #011168; - border-radius: 4px 0 0 4px; - border: none; - box-shadow: 0 0 10px inset #1a5afd; - font-size: 18px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - opacity: 0.7; - display: flex; - justify-content: space-between; - .div_search_left { - display: flex; - justify-content: flex-start; - .icon { - display: flex; - align-items: center; - margin-left: 29px; - - > img { - width: 24px; - height: 24px; - } - } - - > span { - line-height: 56px; - margin-left: 10px; - } - } - - .btn { - text-align: center; - flex: 0 0 113px; - height: 56px; - background: linear-gradient(90deg, #1a5afd, #26c4ff); - font-size: 20px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - line-height: 56px; - border-radius: 0 4px 4px 0; - } - } - - .div_search:hover { - cursor: pointer; - } - .div_tips{ box-sizing: border-box; width: 100%; @@ -115,7 +62,7 @@ background-size: 100% 100%; .div_coverage{ - padding: 30px 20px 30px 20px; + padding: 30px 10px 32px 10px; display: flex; justify-content: space-around; @@ -143,192 +90,155 @@ .div_category { box-sizing: border-box; - width: 100%; + height:238px; + padding:0 20px 20px; - - - .info_loading { - margin-top: 50px; - } - .info_tip { - padding: 31px 0 0 19px; + .category_item { + + margin-bottom: 15px; display: flex; - > img { - height: 34px; - width: 46px; - } - - .tip_title { - line-height: 34px; - margin-left: 7px; - font-size: 22px; - font-family: PingFang SC; - font-weight: 800; - color: #ffffff; - } - } - - .info_list { - margin-top: 9px; - - .item { - .item_line { - margin-top: 13px; - margin-left: 24px; - width: 517px; - height: 0px; - border: 1px dotted #1797ff31; - border-width: 0.5px; + justify-content: start; + + // margin:auto; + + + .list_item { + + // padding: 18px 59px 0; + justify-content: start; + flex:0 0 135px; + + > img { + height: 18px; + width: 18px; } - .last_line { - border: 1px dotted #1797ff00; + .item_content{ + width:100px; + margin-left:8px; + font-size: 16px; + font-family: PingFang SC; + font-weight: 400; + color: #e5effa; } - .list_item { - display: flex; - padding: 18px 59px 0; - justify-content: space-between; - - .list_item_col { - flex: 0 0 240px; - display: flex; - - > img { - height: 76px; - width: 76px; - } - - .item_content { - margin-left: 10px; - height: 76px; - display: flex; - flex-direction: column; - justify-content: center; - - .item_label { - font-size: 18px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - } - .item_count { - margin-top: 10px; - font-size: 28px; - font-family: PingFang SC; - font-weight: bold; - color: #00fffc; - } - } - } + + .item_content_sel{ + color: #5da8fd; } + + } + + .list_item:hover{ + cursor: pointer; + } ::v-deep .el-popper { padding: 0px; } // - } + + } + + + } + + .div_category { + /deep/ .el-scrollbar__wrap { + overflow-x: hidden !important; } } + } .div_info { box-sizing: border-box; width: 100%; - + margin-top:10px; height: calc(88vh - 302px - 10px); color: #fff; background: url('../../../img/modules/visual/warning-box.png') no-repeat center; background-size: 100% 100%; - // padding: 45px 21px 35px 24px; + padding: 32px 21px 20px 20px; - .info_loading { - margin-top: 50px; - } - .info_tip { - padding: 31px 0 0 19px; + .div_search_list { + margin: 0 auto; + text-align: center; + width: 559px; + height: 48px; + background: #01106800; + border-radius: 8px; display: flex; - > img { - height: 34px; - width: 46px; + justify-content: flex-end; + + .icon { + display: flex; + align-items: center; + margin-left: 29px; + margin-top: 16px; + + > img { + width: 24px; + height: 24px; + } } - - .tip_title { - line-height: 34px; - margin-left: 7px; - font-size: 22px; + + .btn { + text-align: center; + flex: 0 0 113px; + height: 53px; + background: #0082fb; + border-radius: 0px 8px 8px 0px; + font-size: 20px; font-family: PingFang SC; - font-weight: 800; + font-weight: 400; color: #ffffff; + line-height: 53px; + } + .btn:hover { + cursor: pointer; } } - - .info_list { - margin-top: 9px; - - .item { - .item_line { - margin-top: 13px; - margin-left: 24px; - width: 517px; - height: 0px; - border: 1px dotted #1797ff31; - border-width: 0.5px; - } - .last_line { - border: 1px dotted #1797ff00; - } - .list_item { - display: flex; - padding: 18px 59px 0; - justify-content: space-between; - - .list_item_col { - flex: 0 0 240px; - display: flex; - - > img { - height: 76px; - width: 76px; - } - - .item_content { - margin-left: 10px; - height: 76px; - display: flex; - flex-direction: column; - justify-content: center; - - .item_label { - font-size: 18px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - } - .item_count { - margin-top: 10px; - font-size: 28px; - font-family: PingFang SC; - font-weight: bold; - color: #00fffc; - } - } - } - } - - ::v-deep .el-popper { - padding: 0px; - } - // + + + .tb { + height: calc(88vh - 302px - 10px); + overflow-y: auto; + @include scrollBar; + margin-top:20px; + } + + .m-pagination { + position: absolute; + box-sizing: border-box; + right: 5px; + bottom: 5px; + width: 100%; + height: 40px; + display: flex; + justify-content: flex-end; + + /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { + background: #0266d1; + color: #000d3f; + } + + /deep/ .el-pagination .el-pager li { + background: #002e74; + } + + /deep/ .el-pagination .btn-prev { + background: #002e74; + } + + /deep/ .el-pagination .btn-next { + background: #002e74; } } + } - .div_tips { - /deep/ .el-scrollbar__wrap { - overflow-x: hidden !important; - } - } + } } diff --git a/src/views/modules/shequzhili/csgltc/csgl.vue b/src/views/modules/shequzhili/csgltc/csgl.vue index 59dff19c..e617744d 100644 --- a/src/views/modules/shequzhili/csgltc/csgl.vue +++ b/src/views/modules/shequzhili/csgltc/csgl.vue @@ -48,7 +48,10 @@ 新增 - + 下载模板 - 下载模板 导入 @@ -176,7 +175,7 @@
- - + - - - - - - - -
-
- - + - - - - - - - - - - - - - 查询
- 新增 - - + @click="handleExport">导出
- - - - - - - - - - - - - - - 修改 - 完成情况 - 积分记录 - { + // this.download(res.data, title + '.xls') + if (res.headers["content-disposition"]) { + let fileName = window.decodeURI( + res.headers["content-disposition"].split(";")[1].split("=")[1] + ); + console.log("filename", fileName); + let blob = new Blob([res.data], { + type: "application/vnd.ms-excel", + }); + var url = window.URL.createObjectURL(blob); + var aLink = document.createElement("a"); + aLink.style.display = "none"; + aLink.href = url; + aLink.setAttribute("download", fileName); + document.body.appendChild(aLink); + aLink.click(); + document.body.removeChild(aLink); //下载完成移除元素 + window.URL.revokeObjectURL(url); //释放掉blob对象 + } else this.$message.error("下载失败"); + }) + .catch((err) => { + console.log("err", err); + return this.$message.error("网络错误"); + }); + }, //获取服务事项下拉框 async loadService () { - const url = "/heart/serviceitem/dict-list" - - + const url = "/gov/org/coverage/dict-select-list/public_service" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/dict-select-list/public_service" let params = { // parentCategoryCode: '1010' } @@ -379,12 +330,11 @@ export default { async loadTable () { this.tableLoading = true - const url = "/heart/icpartyunit/list" - // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/list" + const url = "/gov/org/icPublicService/list" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/list" let params = { pageSize: this.pageSize, pageNo: this.pageNo, - agencyId: this.agencyId, ...this.formData } @@ -392,16 +342,7 @@ export default { if (code === 0) { this.total = data.total - data.list.forEach(element => { - if (element.serviceMatterList.length > 0) { - element.serviceMatterListShow = element.serviceMatterList.join(',') - } else { - element.serviceMatterListShow = '' - } - - }); this.tableData = data.list - } else { this.$message.error(msg) } @@ -427,7 +368,7 @@ export default { //完成情况 handleFinish (row) { - this.finishDiaTitle = row.unitName + '完成情况' + this.finishDiaTitle = row.name + '完成情况' this.finishDiaShow = true this.$nextTick(() => { this.$refs.ref_finish.initTable(row) @@ -437,7 +378,7 @@ export default { handleScore (row) { this.scoreDiaShow = true this.$nextTick(() => { - this.$refs.ref_score.initForm(row.id) + this.$refs.ref_score.initForm(row.icPublicServiceId) }) }, @@ -453,7 +394,7 @@ export default { this.formTitle = '修改' this.formShow = true this.$nextTick(() => { - this.$refs.ref_form.initForm('edit', row.id) + this.$refs.ref_form.initForm('edit', row.icPublicServiceId) }) }, @@ -485,11 +426,11 @@ export default { }, async deleteUnit (row) { - const url = "/heart/icpartyunit/delete" - // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/delete" + const url = "/gov/org/icPublicService/del" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/del" let params = { - id: row.id + icPublicServiceId: row.icPublicServiceId } const { data, code, msg } = await requestPost(url, params) @@ -509,11 +450,8 @@ export default { //重置搜索条件 resetSearch () { this.formData = { - unitName: '', - serviceMatter: '', - type: '', - contact: '', - contactMobile: '' + name: '', + category: '' } this.pageSize = 10 this.pageNo = 0 @@ -522,9 +460,10 @@ export default { //导出表格 async handleExport () { - let title = '联建单位列表' + let title = '公共服务图层列表' - const url = "/heart/icpartyunit/export" + const url = "/gov/org/icPublicService/export" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/export" let params = { agencyId: this.agencyId, ...this.formData @@ -602,7 +541,8 @@ export default { //清空上传列表 this.$refs['upload'].clearFiles() - var url = '/heart/icpartyunit/import' + var url = '/gov/org/icPublicService/import' + // var url = 'http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/import' let fileFormData = new FormData(); fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 @@ -665,6 +605,8 @@ export default { } diff --git a/src/views/modules/shequzhili/ggfwtc/ggfwForm.vue b/src/views/modules/shequzhili/ggfwtc/ggfwForm.vue index ac3965ea..30c30a8c 100644 --- a/src/views/modules/shequzhili/ggfwtc/ggfwForm.vue +++ b/src/views/modules/shequzhili/ggfwtc/ggfwForm.vue @@ -9,88 +9,64 @@ :disabled="formType === 'detail'" class="form"> - + placeholder="请输入场所名称" + v-model="formData.name"> - - + - - - {{item.label}} - - - - - - - - - - + + 平方公里 - + label="容纳人数"> - + v-model="formData.address"> + + 查询
- -
+
经度
- - - - - - -
@@ -158,370 +122,356 @@ diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue index d6c82b5a..e41260db 100644 --- a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue +++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue @@ -35,75 +35,85 @@ {{item.label}} +
+ - - -
-
-
- -
-
{{colItem.categoryName}}
- -
- -
+ +
+ + {{colItem.categoryName}} + + +
-
+
-
- + +
+
- +
+ + +
+
+ - + @@ -129,7 +139,7 @@ import { Loading } from 'element-ui'; //引入Loading服务 import { requestPost } from "@/js/dai/request"; - +import cptTb from "@/views/modules/visual/cpts/tb"; import cptCard from "@/views/modules/visual/cpts/card"; import ScreenLoading from "@/views/modules/visual/cpts/loading"; @@ -231,7 +241,6 @@ const vueGis = { name: 'HomeMap', data () { return { - centerPoint: [],//中心点位置 zoom: 14,//缩放范围：区14 minZoom: 1,//最小缩放 @@ -300,7 +309,39 @@ const vueGis = { categoryKeys: [], search: '', pageNo: 1, - pageSize: 10 + pageSize: 10, + + demand: { + loading: true, + colList: [ + { + align: "center", + width: "5%", + }, + { + align: "center", + width: "10%", + }, + + ], + header: ["分类", "名称"], + list: [], + pageSize: 10, + pageNo: 1, + total: 0, + }, + + iconUrlArray: { + 'volunteer1': require('../../../../../assets/img/shuju/volunteer1.png'), + 'volunteer2': require('../../../../../assets/img/shuju/volunteer2.png'), + 'volunteer3': require('../../../../../assets/img/shuju/volunteer3.png'), + 'volunteer4': require('../../../../../assets/img/shuju/volunteer4.png'), + 'volunteer5': require('../../../../../assets/img/shuju/volunteer5.png'), + }, + iconArrays: [], + overlay: null, + showPopup: false, + } }, @@ -323,13 +364,186 @@ const vueGis = { //加载当前园区的标注 this.loadPolygon(this.subAgencyArray) + + this.setMapLocation() await this.loadCategoryList() + this.getTable(); + await this.getMapTable(); + + + //初始化icon图层 + this.addOverlay() + + this.addMapClick() }, methods: { + + //添加覆盖层 + addOverlay () { + // 使用变量存储弹窗所需的 DOM 对象 + var container = document.getElementById("popup"); + var closer = document.getElementById("popup-closer"); + var content = document.getElementById("popup-content"); + var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null + + // 创建一个弹窗 Overlay 对象 + this.overlay = new Overlay({ + element: container, //绑定 Overlay 对象和 DOM 对象的 + autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果 + autoPanAnimation: { + duration: 250 //自动平移效果的动画时间 9毫秒 + }, + zIndex: 100 + }); + // 将弹窗添加到 map 地图中 + map.addOverlay(this.overlay); + let _that = this; + + /** + * 为弹窗添加一个响应关闭的函数 + */ + closer.onclick = function () { + _that.overlay.setPosition(undefined); + closer.blur(); + return false; + }; + if (goMore) { + goMore.onclick = function () { + _that.$emit('lookMore') + }; + } + }, + + //注册地图点击事件 + addMapClick () { + let _that = this + + map.on("click", function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); + if (feature) { + console.log(feature) + _that.clickMapVolunteer(feature.values_.properties) + + } + + }); + }, + + //点击项目 + async clickMapVolunteer (info) { + + + if (!info.id) { + return false + } + + const url = "/epmetuser/icresiuser/resi-brief/" + 'dd0bd55db0ca4b629c40bc914a08368e' + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" + + let params = {} + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + let coordinate = [info.longitude, info.latitude] + data.gridName = data.gridName ? data.gridName : '--' + data.villageName = data.villageName ? data.villageName : '--' + data.icUserName = data.icUserName ? data.icUserName : '--' + data.mobile = data.mobile ? data.mobile : '--' + data.idCard = data.idCard ? data.idCard : '--' + data.birthday = data.birthday ? data.birthday : '--' + data.contacts = data.contacts ? data.contacts : '--' + data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--' + + data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--' + data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--' + let categoriesArray = [] + + for (let key in data.volunteerCategories) { + categoriesArray.push(data.volunteerCategories[key]) + + } + + + if (categoriesArray.length > 0) { + data.categories = categoriesArray.join(',') + } else { + data.categories = '--' + } + + let showData = ` +
居民信息
+
所属网格： + `+ data.gridName + ` +
+
所属小区： + `+ data.villageName + ` +
+
本地户籍： + `+ data.isBdhjShow + ` +
+
姓名： + `+ data.icUserName + ` +
+
手机： + `+ data.mobile + ` +
+
性别： + `+ data.genderShow + ` +
+
身份证号： + `+ data.idCard + ` +
+
出生日期： + `+ data.birthday + ` +
+
联系人： + `+ data.contacts + ` +
+
联系人手机： + `+ data.contactsMobile + ` +
+
志愿者类别： + `+ data.categories + ` +
+ ` + // console.log(showData) + this.handleShowPopup(showData, coordinate, true) + + } else { + this.$message.error(msg) + } + }, + + handleShowPopup (showData, coordinate, isShowMore) { + if (isShowMore) { + document.getElementById("popup-goMore").style.display = 'block' + } else { + document.getElementById("popup-goMore").style.display = 'none' + } + console.log(this.overlay.getElement()) + let content = document.getElementById("popup-content"); + this.overlay.getElement().style.display = 'block' + this.overlay.getElement().parentNode.style.display = 'block' + this.overlay.getElement().parentNode.parentNode.style.display = 'block' + content.innerHTML = showData; + this.overlay.setPosition(coordinate); + //把 overlay 显示到指定的 x,y坐标 + + }, + // 关闭弹窗 + handleClosePopup () { + this.overlay.setPosition(undefined); + document.getElementById("popup-closer").blur(); + return false; + }, + //点击图层 - handleClickCoverage (index) { + async handleClickCoverage (index) { this.coverageTypesList[index].select = !this.coverageTypesList[index].select let item = this.coverageTypesList[index] @@ -342,11 +556,51 @@ const vueGis = { this.coverageTypes.push(element.value) } }); + + await this.loadCategoryList() + this.getTable(); + this.getMapTable(); }, //点击类别 - handleClickCategory (index) { + async handleClickCategory (index, colIndex) { + + this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel + // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel + + let array = this.categoryListshow[index] + let item = this.categoryListshow[index][colIndex] + + + this.$set(this.categoryListshow[index], colIndex, item) + this.$set(this.categoryListshow, index, array) + + this.categoryKeys = [] + + this.categoryList.forEach(element => { + if (element.sel) { + this.categoryKeys.push(element.categoryKey) + } + }); + + this.getTable(); + this.getMapTable(); + }, + handleSearch () { + + }, + // + handleClickRow (index) { + let selData = this.tableList[index] + mapView.setCenter([selData.longitude, selData.latitude]); + this.clickMapVolunteer(selData) + // alert(index) + }, + + handlePageNoChange_demand (val) { + this.demand.pageNo = val; + this.getTable(); }, async loadCategoryList () { @@ -360,32 +614,359 @@ const vueGis = { const { data, code, msg } = await requestPost(url, params) if (code === 0) { - this.categoryList = data + // this.categoryList = data + this.categoryList = [ + + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "机关直属部门" + }, + { + categoryKey: "0", + categoryName: "deserunt" + }, + { + categoryKey: "1", + categoryName: "deserunt" + }, + { + categoryKey: "2", + categoryName: "deserunt" + }, + { + categoryKey: "3", + categoryName: "deserunt" + }, + { + categoryKey: "4", + categoryName: "deserunt" + }, + ] + this.categoryKeys = [] this.categoryListshow = [] let itemArray = [] + this.categoryList.forEach((item, index) => { if (!item.dataIcon) { item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png') } - if (index % 4 === 0) {//偶数 - itemArray.push(item) - } else { - itemArray.push(item) - this.categoryListshow.push(itemArray) - itemArray = [] - } + item.sel = true + this.categoryKeys.push(item.categoryKey) }); + let chunk = 4 + for (let i = 0, j = this.categoryList.length; i < j; i += chunk) { + this.categoryListshow.push(this.categoryList.slice(i, i + chunk)) + } + console.log(this.categoryListshow) + console.log(this.categoryList) + } else { this.$message.error(msg) } }, + //加载组织数据 + async getTable (isPage) { + this.demand.loading = true + // const url = "/data/aggregator/coverage/dataList"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; + let params = { + coverageTypes: this.coverageTypes, + categoryKeys: this.categoryKeys, + search: this.search, + pageNo: this.demand.pageNo, + pageSize: this.demand.pageSize, + isPage: true + }; + + const { data, code, msg } = await requestPost(url, params); + this.demand.loading = false; + + if (code === 0) { + + this.demand.total = data.total; + this.tableList = data.list + this.tableList = [ + { + categoryKey: "volunteer1", + content: "volunteer1", + id: "123", + latitude: "36.082230", + longitude: "120.3868167667315", + }, + { + categoryKey: "volunteer2", + content: "volunteer2", + id: "123", + latitude: "36.062227", + longitude: "120.389455", + }, + { + categoryKey: "volunteer3", + content: "volunteer3", + id: "123", + latitude: "36.072214", + longitude: "120.389455", + }, + { + categoryKey: "volunteer4", + content: "volunteer4", + id: "123", + latitude: "36.07394505338441", + longitude: "120.3868167667315", + } + ] + this.demand.list = data.list.map((item) => { + return [ + item.categoryKey ? item.categoryKey : '--', + item.content ? item.content : '', + + ]; + }); + } else { + this.$message.error(msg); + } + }, + //加载组织数据 + async getMapTable () { + + // const url = "/data/aggregator/coverage/dataList"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; + let params = { + coverageTypes: this.coverageTypes, + categoryKeys: this.categoryKeys, + search: this.search, + + isPage: false + }; + + const { data, code, msg } = await requestPost(url, params); + + if (code === 0) { + this.iconArrays = data.list + this.iconArrays = [ + { + categoryKey: "volunteer1", + content: "volunteer1", + id: "123", + latitude: "36.082230", + longitude: "120.3868167667315", + }, + { + categoryKey: "volunteer2", + content: "volunteer2", + id: "123", + latitude: "36.062227", + longitude: "120.389455", + }, + { + categoryKey: "volunteer3", + content: "volunteer3", + id: "123", + latitude: "36.072214", + longitude: "120.389455", + }, + { + categoryKey: "volunteer4", + content: "volunteer4", + id: "123", + latitude: "36.07394505338441", + longitude: "120.3868167667315", + } + ] + this.iconArrays.forEach((item, index) => { + + item.url = this.iconUrlArray[item.categoryKey] + + }); + console.log(this.iconArrays) + this.loadIcon() + } else { + this.$message.error(msg); + } + }, + + //加载icon图标 + loadIcon () { + + iconSource.clear()//清空多边形标注 + if (this.iconArrays && this.iconArrays.length > 0) { + + let iconFeatures = []; + + this.iconArrays.forEach((oneIcon, index) => { + //添加标注 + + let iconItem = new Feature({ + geometry: new Point([oneIcon.longitude, oneIcon.latitude]), + id: oneIcon.id, + properties: { + type: "icon", + info: { ...oneIcon } + } + }); + // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex]) + let iconStyle = new Style({ + image: new Icon({ + // anchor: [0.5, 0.5], + // imgSize: [32, 32], + // scale: 0.5, + // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0] + src: oneIcon.url + }), + // text: createTextStyle(oneIcon) + }); + + iconItem.setStyle(iconStyle); + + // if (this.distanceMax) { + // if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) { + // iconFeatures.push(iconItem); + // } + // } else { + iconFeatures.push(iconItem); + // } + + + }); + + iconSource.addFeatures(iconFeatures); + } + }, //刷新地图 async refreshMap (isRefreshView) { @@ -401,11 +982,11 @@ const vueGis = { //重置地图中心点 // if (isRefreshView) { - this.setMapLocation() + // this.setMapLocation() // } - await this.loadList() + await this.getTable(false); }, @@ -458,8 +1039,6 @@ const vueGis = { } mapView.setZoom(this.zoom); - - }, //返回所选组织 @@ -479,15 +1058,12 @@ const vueGis = { this.center = this.orgData.center this.zoom = this.orgData.zoom - - this.$nextTick(() => { this.refreshMap(true) this.$forceUpdate() }); - }, //加载组织数据 @@ -691,7 +1267,6 @@ const vueGis = { }, - //根据组织层级设置缩放级别 setZoom (agencyLevel) { if (agencyLevel === 'district') { @@ -751,10 +1326,6 @@ const vueGis = { //目标加载到map中 }) - map.on('singleclick', function (e) { - // console.log(e.coordinate) - // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); - }) //去除双击放大效果 const dblClickInteraction = map @@ -829,11 +1400,11 @@ const vueGis = { map.addLayer(polygonLayer) - map.addInteraction(select); + // map.addInteraction(select); - select.on('select', e => { + // select.on('select', e => { - }); + // }); }, @@ -851,11 +1422,6 @@ const vueGis = { }, - //取随机数 - getRndBetween (lowerLimit, upperLimit) { - return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit; - }, - //开启加载动画 startLoading () { loading = Loading.service({ @@ -903,7 +1469,7 @@ const vueGis = { ...mapGetters(["clientHeight"]) }, - components: { cptCard, ScreenLoading }, + components: { cptTb, cptCard, ScreenLoading }, } export default vueGis; @@ -925,5 +1491,70 @@ export default vueGis; } - \ No newline at end of file diff --git a/src/views/modules/visual/cpts/tb.vue b/src/views/modules/visual/cpts/tb.vue index 317f438f..4b6c0f8c 100644 --- a/src/views/modules/visual/cpts/tb.vue +++ b/src/views/modules/visual/cpts/tb.vue @@ -1,68 +1,67 @@