diff --git a/src/views/sanqing/main-gis/data.js b/src/views/sanqing/main-gis/data.js new file mode 100644 index 0000000..2d99b3f --- /dev/null +++ b/src/views/sanqing/main-gis/data.js @@ -0,0 +1,32 @@ +export const comps = { + '1': { + 'left': [ + 'Left11', + 'Left21', + 'Left31', + ], + 'right': [ + 'Right11', + 'Right21', + 'Right31', + ], + 'buttom': [ + 'Bottom1' + ] + }, + '2': { + 'left': [ + 'Left12', + 'Left22', + 'Left32' + ], + 'right': [ + 'Right12', + 'Right22', + 'Right32' + ], + 'buttom': [ + 'Bottom2' + ] + } +} \ No newline at end of file diff --git a/src/views/sanqing/main-gis/index.html b/src/views/sanqing/main-gis/index.html index 28f6ff2..7f92d42 100644 --- a/src/views/sanqing/main-gis/index.html +++ b/src/views/sanqing/main-gis/index.html @@ -1,104 +1,23 @@ -
- - - - - - - - -
-
-
{{resourceDetail.name}}详情
-
-
-
-
-
-
-
-
-
-
-
-
-

资源编码

-

{{resourceDetail.code}}

-
-
-

资源名称

-

{{resourceDetail.name}}

-
-
-

资源类型

-

{{resourceDetail.resourceSort}}

-
-
-

总面积(亩)

-

{{resourceDetail.totalArea}}

-
-
-

资产状态

-

{{resourceDetail.status}}

-
-
-

使用情况

-

{{resourceDetail.useType}}

-
-
-

坐落位置

-

{{resourceDetail.location}}

-
-
-

东至

-

{{resourceDetail.east}}

-
-
-

西至

-

{{resourceDetail.west}}

-
-
-

南至

-

{{resourceDetail.south}}

-
-
-

北至

-

{{resourceDetail.north}}

-
-
-

备注

-

{{resourceDetail.remark}}

-
-
-

附件

-

- - - - - - -

-
-
- -
-
- -
-
- -
+
-
-
- - + +
-
- +
+ + + {{ centerYear }} + + + {{ item }} + + +
+
+
\ No newline at end of file diff --git a/src/views/sanqing/main-gis/index.js b/src/views/sanqing/main-gis/index.js index 6658907..2f0a142 100644 --- a/src/views/sanqing/main-gis/index.js +++ b/src/views/sanqing/main-gis/index.js @@ -1,51 +1,76 @@ +import { getConfigKey } from "@/api/system/config"; +import { getInfo } from "@/api/login"; +import { treeselect, treeselectByDeptId } from "@/api/system/dept"; import GisUtils from '@/utils/gis.js'; +import { + assetsStatistics, + deptFundStatistics, + financeSummary, financeSummaryOverview, incomeBookRank, incomeMonthStatistics, incomeTownRank, + resourceAssetsStatistics +} from "@/api/dataScreen/bigDataMonitoring2/stockCooperative.js"; +// import { comps } from './data.js' import { fromLonLat } from 'ol/proj' -import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js"; -import { getInfo } from "@/api/login"; -import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js"; -import Legend from '@/components/legend/index.vue'; -import { attachmentList } from "@/api/common/uploadAttachment.js"; -import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept"; -import { getConfigKey } from "@/api/system/config"; -import { treeselectByDeptId } from "@/api/system/dept"; -import { getThreeList } from "@/api/index"; -import Popover from '../popover/index.vue'; let gis = null; + +const DEPT_CHANGED = 1; +const YEAR_CHANGED = 1 << 1; +const ALL_CHANGED = ~(1 << 31); export default { components: { - Legend, - Popover + }, + watch: { + 'queryParams.deptId': { + handler: function () { + console.log(this.queryParams.deptId); + this.commitDept(this.queryParams.deptId); + }, + immediate: true, // 立即执行 + + } }, data () { return { - yellowIcon: require('./icon/yellow.png'), - //三务公开请求参数 - queryParams: { - pageNum: 1, - pageSize: 10, - title: null, - openType: '1', - detailedCategoriesType: null, - villageType: null, - openItems: null, - meetingOpenType: null, - deptId: null, - isWechat: null, - status: null, - translate_dict: 1, + financeSummary: { + funds: 0, // 资金 + totalAssets: 0, // 资产 + totalResource: 0, // 资源 + income: 0, // 经营收入 + outcome: 0, // 经营支出 + overhead: 0, // 管理费用 + revenue: 0, // 发包收入 + otherIncome: 0, // 其他收入 + otherOutcome: 0, // 其他支出 + }, + financeSummaryOverview: { + zeroIncomeBook: 0, // 0收入组织 + areaTotalIncome: 0, // 区收入总和 + townAvgIncome: 0, // 镇平均收入 + bookAvgIncome: 0, // 组织平均收入 }, + //搜索栏参数 + centerYear: new Date().getFullYear(), + yearList: [ + new Date().getFullYear(), + new Date().getFullYear() - 1, + new Date().getFullYear() - 2, + new Date().getFullYear() - 3, + new Date().getFullYear() - 4, + ], addrText: [100,], deptTreeProps: { checkStrictly: true, }, - addrOptions: [], - resourceDetail: {}, - //资产信息详情弹窗 - showResourceDetail: false, + queryParams: { + year: new Date().getFullYear(), + deptId: 100, + }, + yellowIcon: require('./icon/yellow.png'), + // comps, + map: "", // 地图 mapGeoServerUrl: "", // geoserver地址 mapBorder: "", // 地图边界 deptLayer: "", // 坐标点图层 @@ -53,245 +78,185 @@ export default { townBorderLayerName: "", // 乡镇边界图层名称 villageBorderLayerName: "", // 村边界图层名称 groupBorderLayerName: "", // 组边界图层名称 - LegendData: [ - { - iconStyle: { - background: 'rgba(38,252,128,0.45)', - borderColor: '#26FC80', - border: '2px solid #26FC80' - }, - name: '自用' - }, - { - iconStyle: { - background: 'rgba(232,246,0,0.45)', - borderColor: '#E8F600', - border: '2px solid #E8F600' - }, - name: '闲置' - }, - { - iconStyle: { - background: 'rgba(16,252,252,0.45)', - borderColor: '#10FCFC', - border: '2px solid #10FCFC' - }, - name: '出租' - }, - { - iconStyle: { - background: 'rgba(198,0,255,0.45)', - borderColor: '#C600FF', - border: '2px solid #C600FF' - }, - name: '其他' - } - ], - threeAssetTypeOptions: [], - threeJtzyzcTypeOptions: [], - threeNysssbTypeOptions: [], - threeNhTypeOptions: [], - natureOwnershipTypeOptions: [], - sysYesNoOptions: [], - fileList: [], - fileUrl:'', - showImg:false, + addrOptions: [] }; }, computed: { + // currentComp: function () { + // return this.comps[this.tab] + // } }, created () { - this.getDicts("three_asset_type").then((response) => { - this.threeAssetTypeOptions = response.data; - }); - this.getDicts("three_jtzyzc_type").then((response) => { - this.threeJtzyzcTypeOptions = response.data; - }); - this.getDicts("three_nysssb_type").then((response) => { - this.threeNysssbTypeOptions = response.data; - }); - this.getDicts("three_nh_type").then((response) => { - this.threeNhTypeOptions = response.data; - }); - this.getDicts("nature_ownership").then((response) => { - this.natureOwnershipTypeOptions = response.data; - }); - this.getDicts("sys_yes_no").then((response) => { - this.sysYesNoOptions = response.data; - }); - this.getGeoServerUrl(); }, mounted () { + // console.log('当前年份', this.centerYear); + this.commitYear(this.centerYear); + // 获取geoserver的地址 + this.getGeoServerUrl(); getInfo().then(res => { + // this.getData(); treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { this.addrOptions = resp.data; - this.headerTitle = res.user.deptName + '阳光村务一张图'; - //loginDeptId - listDeptExcludeChild(res.user.deptId).then((resp) => { - //loginDeptId - let deptOptions = [res.user.deptId]; - resp.data.map(resm => { - if (res.user.parentDeptName == resm.deptName) { - deptOptions.unshift(resm.deptId) - deptOptions.unshift(resm.parentId) - } - }) - this.addrText = deptOptions; - }); - this.queryParams.deptId = res.user.deptId;//loginDeptId - //列表请求 - // this.getAllList(res.user.deptId); - // 加载地图 - this.initMap(res.user.deptId); - - // 获取村边界的图层名称 - this.getVillageBorderLayerName(); + // 初始化地图 + this.initMap(); }); - }) - // treeselect().then((resp) => { - // this.addrOptions = resp.data - // getInfo().then(res => { - // this.initMap(res.user.loginDeptId); - // // 加载地图 - // }) - // }); - - + }); }, methods: { - // 获取村边界的图层名称 - getVillageBorderLayerName () { - getConfigKey("geoserver.layer.villageBorder").then(response => { - this.villageBorderLayerName = response.msg; - }); + /** + * 提交dept + * @param {*} deptId + */ + commitDept (deptId) { + this.$store.commit('SET_DEPTID', deptId); }, - // 添加区县边界 - addCountyBorder (deptIds) { - gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) + commitYear (year) { + this.$store.commit('SET_YEAR', year); }, - // 添加乡镇边界 - addTownBorder (deptIds) { - gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) - }, - // // 添加村边界 - // addVillageBorder (deptIds) { - // gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) - // }, - // // 获取资源列表 - // getResourceList (deptId) { - // getResourceListByDeptId(deptId).then(response => { - // if (response.data && response.data.length > 0) { - // this.addResourceLayer(response.data); - // } - // }); - // }, - // 获取geoserver的地址 - getGeoServerUrl () { - // 获取geoserver的地址 - getConfigKey("system.geoServer.url").then(response => { - this.mapGeoServerUrl = response.msg; - }); - // 获取区县边界图层名称 - getConfigKey("geoserver.layer.countyBorder").then(response => { - this.countyBorderLayerName = response.msg; - }); - // 获取乡镇边界的图层名称 - getConfigKey("geoserver.layer.townBorder").then(response => { - this.townBorderLayerName = response.msg; - }); - // 获取村边界的图层名称 - getConfigKey("geoserver.layer.villageBorder").then(response => { - this.villageBorderLayerName = response.msg; - }); - // 获取组边界的图层名称 - getConfigKey("geoserver.layer.groupBorder").then(response => { - this.groupBorderLayerName = response.msg; - }); + //切换年份 + yearDropdown (item) { + this.queryParams.year = item; + this.centerYear = item; + this.getData(YEAR_CHANGED); + this.commitYear(item); }, - selectAddress (value) { - const deptId = value[value.length - 1]; - this.queryParams.deptId = deptId; - this.getAllList(deptId); - - gis.getMapContainer().removeLayer(this.villageBorder); - this.villageBorder = ''; - // 添加村边界 - this.addVillageBorder(deptId); - gis.getMapContainer().removeLayer(this.permanentLayer); - this.permanentLayer = ''; - // 获取资产列表 - this.getPermanentList(deptId); - gis.getMapContainer().removeLayer(this.resourceLayer); - this.resourceLayer = ''; - // 获取资源列表 - this.getResourceList(deptId); - let node = this.$refs["cascader"].panel.getNodeByValue(value); + // 绘制地图 + drawMap (node, isLocated) { // isLocated 控制地图是否跳转 const dept = node.data; - const deptData = { - deptId: dept.id, - deptName: dept.label, - lat: dept.lat, - lng: dept.lng, - deptLevel: dept.deptLevel, - orgCode: dept.orgCode - }; - let deptList = []; - deptList.push(deptData); + gis.getMapContainer().removeLayer(this.mapBorder); + this.mapBorder = ''; gis.getMapContainer().removeLayer(this.deptLayer); this.deptLayer = ''; - // 添加坐标点图层 - this.addDeptLayer(deptList, 'yellow.png'); - gis.getMapContainer().getView().animate({ - // 只设置需要的属性即可 - center: fromLonLat([dept.lng, dept.lat]), // 中心点 - duration: 500, // 缩放持续时间，默认不需要设置 - }); + if (dept.deptLevel === '5') { + this.cityId = dept.id; + this.currentDeptLevel = '5'; + if (dept.children && dept.children.length > 0) { + // 添加区县边界 + this.addCountyBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(9); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + } else if (dept.deptLevel === '4') { + this.countyId = dept.id; + this.currentDeptLevel = '4'; + if (dept.children && dept.children.length > 0) { + // 添加乡镇边界 + this.addTownBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(11); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '3') { + this.townId = dept.id; + this.countyId = node.path.slice(-2)[0]; + this.currentDeptLevel = '3'; + if (dept.children && dept.children.length > 0) { + // 添加村边界 + this.addVillageBorder(dept.children.map(item => item.id)); + // 添加坐标点图层 + this.addDeptLayer(dept.children, 'yellow.png'); + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(13); + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '2') { + this.ruralId = dept.id; + this.townId = node.path.slice(-2)[0]; + this.countyId = node.path.slice(-3)[0]; + this.currentDeptLevel = '2'; + if (dept.children && dept.children.length > 0) { + const groupIds = dept.children.map(item => item.id); + // 添加组边界 + this.addGroupBorder(groupIds); + // 添加组的坐标点图层，并且跳转到图层的中心点位置 + this.addGroupPointLayer(groupIds, isLocated); + } else { + // 添加村边界 + this.addVillageBorder(dept.id); + // 添加坐标点图层 + let deptList = []; + deptList.push(dept); + this.addDeptLayer(deptList, 'yellow.png'); + if (isLocated) { + gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat])); + } + } + if (isLocated) { + gis.getMapContainer().getView().setZoom(15); + } + // this.villageIds = this.findLeafNodeIds(dept); + } else if (dept.deptLevel === '1') { + this.ruralId = node.path.slice(-2)[0]; + this.townId = node.path.slice(-3)[0]; + this.countyId = node.path.slice(-4)[0]; + this.currentDeptLevel = '1'; + // 添加组边界 + this.addGroupBorder(dept.id); + // 添加组的坐标点图层，并且跳转到图层的中心点位置 + this.addGroupPointLayer(dept.id, isLocated); + if (isLocated) { + gis.getMapContainer().getView().setZoom(17); + } + // this.villageIds = this.findLeafNodeIds(dept); + } + // this.changeLayerByDept(); }, - // 添加村边界 - addVillageBorder (deptIds) { - gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) + tabChange (info) { + this.tab = info.id; }, - // 加载地图 - initMap (deptId) { - gis = new GisUtils('map2') - // // 获取资源列表 - this.getResourceList(deptId); + // 初始化地图 + initMap () { + let dept = this.addrOptions[0]; + let mapCenterLocation; + if (dept.lng && dept.lat) { + mapCenterLocation = [dept.lng, dept.lat]; + } else { + mapCenterLocation = [116.391461, 39.902359]; + } + gis = new GisUtils('map22222') gis.addTianDiTuLayer() gis.addAnnotationLayer() - let dept2 = this.addrOptions[0]; - //console.log(this.addrOptions, 'this.addrOptions'); - console.log(dept2.deptLevel) - if (dept2.deptLevel === '5') { + if (dept.deptLevel === '5') { // 登录身份为市级领导 this.userRole = 'cityLeader'; this.cityId = dept.id; this.currentDeptLevel = '5'; // 添加区县边界 this.addCountyBorder(dept.children.map(item => item.id)); - } else if (dept2.deptLevel === '4') { + } else if (dept.deptLevel === '4') { // 登录身份为县级领导 this.userRole = 'countyLeader'; - this.countyId = dept2.id; + this.countyId = dept.id; this.currentDeptLevel = '4'; // 添加乡镇边界 - this.addTownBorder(dept2.children.map(item => item.id)); - gis.getView().setZoom(13); - } else if (dept2.deptLevel === '3') { + this.addTownBorder(dept.children.map(item => item.id)); + gis.getView().setZoom(11); + } else if (dept.deptLevel === '3') { // 登录身份为镇级领导 this.userRole = 'townLeader'; - this.townId = dept2.id; + this.townId = dept.id; this.currentDeptLevel = '3'; // 添加村边界 - this.addVillageBorder(dept2.children.map(item => item.id)); + this.addVillageBorder(dept.children.map(item => item.id)); gis.getView().setZoom(13); } // 添加坐标点图层 - if (dept2.children) { - this.addDeptLayer(dept2.children); + if (dept.children) { + this.addDeptLayer(dept.children); } + gis.getView().setCenter(fromLonLat(mapCenterLocation)) - // gis.getMapContainer().getView().setCenter(fromLonLat([dept2.lng, dept2.lat])); - + // 地图点击事件 gis.getMapContainer().on("click", (evt) => { let feature = gis.getMapContainer().forEachFeatureAtPixel( evt.pixel, @@ -299,140 +264,97 @@ export default { ); if (feature) { // 镇级：加载村级坐标点 - if (feature.get('deptLevel') === '3') { - gis.getMapContainer().getView().animate({ - center: fromLonLat([feature.get('lng'), feature.get('lat')]), // 中心点 - zoom: 12, // 缩放级别 - rotation: undefined, // 缩放完成view视图旋转弧度 - duration: 1000, // 缩放持续时间，默认不需要设置 - }); - } else { - - - feature.values_.detail.threeDetailType = - feature.values_.detail.threeAssetType == '1' ? - this.selectDictLabel(this.threeJtzyzcTypeOptions, feature.values_.detail.threeDetailType): - feature.values_.detail.threeAssetType == '2' ? - this.selectDictLabel(this.threeNysssbTypeOptions, feature.values_.detail.threeDetailType): - feature.values_.detail.threeAssetType == '3' ? - this.selectDictLabel(this.threeNhTypeOptions, feature.values_.detail.threeDetailType):'' - ; - feature.values_.detail.threeAssetType = this.selectDictLabel(this.threeAssetTypeOptions, feature.values_.detail.threeAssetType); - feature.values_.detail.natureOwnership = this.selectDictLabel(this.natureOwnershipTypeOptions, feature.values_.detail.natureOwnership); - feature.values_.detail.qssfczzy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.qssfczzy); - feature.values_.detail.sfwtdg = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfwtdg); - feature.values_.detail.sfnzcsy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfnzcsy); - - this.listDialogHidden('detail'); - this.openResourceDialog(feature.values_.detail); + if (feature.get('level') === 'deptPoint') { + let parentIds = []; + this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds); + this.addrText = parentIds; + this.selectAddress(parentIds); } } }); - - // 缩小地图，重新加载页面 - gis.getMapContainer().on("moveend", (evt) => { - const zoom = gis.getMapContainer().getView().getZoom(); - if (this.villagePointLayer && zoom < 10.5) { - gis.getMapContainer().removeLayer(this.villagePointLayer); - this.villagePointLayer = ""; - } - }); }, - listDialogHidden (type) { - if (type == 'detail') { - //合同信息详情弹窗 - this.showInfoDetail = false; - //资源信息详情弹窗 - this.showResourceDetail = false; - //资产信息详情弹窗 - this.showPermanentDetail = false; - //农业补贴详情弹窗 - this.showSubsidyFundsDetail = false; - //重大事项详情弹窗 - this.showMajorEventDetail = false; - //零工公开详情弹窗 - this.showTempWorkerDetail = false; - //三务公开详情弹窗 - this.showAffairsDetail = false; - } else { - //三务公开列表弹窗 - this.showAffairs = false; - //零工公开列表弹窗 - this.showTempWorker = false; - //重大事项列表弹窗 - this.showMajorEvent = false; - //农业补贴列表弹窗 - this.showSubsidyFunds = false; - //资产信息列表弹窗 - this.showPermanent = false; - //资源信息列表弹窗 - this.showResource = false; - //合同信息列表弹窗 - this.showInfo = false; - //合同信息详情弹窗 - this.showInfoDetail = false; - //资源信息详情弹窗 - this.showResourceDetail = false; - //资产信息详情弹窗 - this.showPermanentDetail = false; - //农业补贴详情弹窗 - this.showSubsidyFundsDetail = false; - //重大事项详情弹窗 - this.showMajorEventDetail = false; - //零工公开详情弹窗 - this.showTempWorkerDetail = false; - //三务公开详情弹窗 - this.showAffairsDetail = false; + getData (mask) { + if (!mask) + mask = ALL_CHANGED; + financeSummary(this.queryParams).then((resp) => { + let data = resp; + this.financeSummary.funds = data.funds; + this.financeSummary.totalAssets = data.totalAssets; + this.financeSummary.totalResource = data.totalResource; + this.financeSummary.income = data.income; + this.financeSummary.outcome = data.outcome; + this.financeSummary.overhead = data.overhead; + this.financeSummary.revenue = data.revenue; + this.financeSummary.otherIncome = data.otherIncome; + this.financeSummary.otherOutcome = data.otherOutcome; + }); + deptFundStatistics(this.queryParams).then((resp) => { + let data = resp.data; + // this.leftTopEchart(this.genChartData(data)); + this.fundAmountTotal = data.extras.total; + }); + resourceAssetsStatistics(this.queryParams).then((resp) => { + // this.leftBottomEchart(this.genChartData(resp.data)); + }); + assetsStatistics(this.queryParams).then((resp) => { + // let data = this.genChartData(resp.data); + // this.leftCenterEchart(data); + // this.assetStatistics = data.xAxis.data.map((x, i) => { + // return { + // name: x, + // value: data.series[0].data[i], + // }; + // }); + }); + incomeMonthStatistics(this.queryParams).then((resp) => { + // this.rightTopEchart(this.genChartData(resp.data)); + }); + incomeBookRank(this.queryParams).then((resp) => { + this.incomeBookRankList = resp.data; + }); + if (mask & YEAR_CHANGED) { + incomeTownRank(this.queryParams).then((resp) => { + this.incomeTownRankList = resp.data; + }); + financeSummaryOverview(this.queryParams).then((resp) => { + let data = resp.data; + this.financeSummaryOverview.zeroIncomeBook = data.zeroIncomeBook; + this.financeSummaryOverview.areaTotalIncome = data.areaTotalIncome; + this.financeSummaryOverview.townAvgIncome = data.townAvgIncome; + this.financeSummaryOverview.bookAvgIncome = data.bookAvgIncome; + // this.dashboardZeroincome(); + // this.dashboardZeroincome2(); + // this.dashboardZeroincome3(); + // this.dashboardZeroincome4(); + }); } - }, - openResourceDialog (data) { - data.fileList = []; - console.log(data) - let parmasData = { - tableId: data.id, - tableName: 't_asset_three', - bizPath: 'asset', - }; - attachmentList(parmasData).then((res) => { - if (res.code == 200) { - let UattachmentList = res.rows; - for (let i = 0; i < UattachmentList.length; i++) { - let fileName = UattachmentList[i].fileName; - let subIndex = fileName.lastIndexOf("."); - let ext = fileName.substring(subIndex + 1, fileName.length); - let urls = ""; - let type = ""; - if (ext == "xlsx" || ext == "xls") { - urls = require("@/assets/images/icon_excel.jpg"); - type = 'excel'; - } else if (ext == "doc" || ext == "docx") { - urls = require("@/assets/images/icon_word.jpg"); - type = 'word'; - } else if (ext == "pdf") { - urls = require("@/assets/images/icon_pdf.jpg"); - type = 'pdf'; - } else if (ext == "zip") { - urls = require("@/assets/images/icon_zip.jpg"); - type = 'zip'; - } else { - urls = '/api' + UattachmentList[i].fileUrl; - type = 'image'; - } - data.fileList.push({ - url: urls, - urlApi: '/api' + UattachmentList[i].fileUrl, - type: type - }) + selectAddress (value, isLocated = true) { // isLocated 控制地图是否跳转 + this.queryParams.deptId = value[value.length - 1]; + this.getData(DEPT_CHANGED); + let node = this.$refs["cascader2"].panel.getNodeByValue(value); + this.drawMap(node, isLocated); + }, + // 查找指定deptId的所有父节点id + findParentNodeIds (tree, deptId, result) { + for (let node of tree) { + if (node.id === deptId) { + result.unshift(node.id); + return true; + } + if (node.children && node.children.length > 0) { + let isFind = this.findParentNodeIds(node.children, deptId, result); + if (isFind) { + result.unshift(node.id); + return true; } - this.showResourceDetail = true; - this.resourceDetail = data; } - }); + } + return false; }, - // 创建矢量数据源 - addDeptLayer (nextDeptSet, locationIcon) { - //console.log('nextDeptSet', nextDeptSet); + + // 添加坐标点图层 + addDeptLayer (nextDeptSet) { let features = []; nextDeptSet.forEach(item => { let fs = gis.getFeature(item, this.yellowIcon) @@ -440,52 +362,42 @@ export default { }); gis.getVectorLayerByFs(features) gis.mapSetFit(features) + }, - // 获取资源列表 - getResourceList (deptId) { - getThreeList({ deptId: deptId }).then(response => { - if (response.rows && response.rows.length > 0) { - this.addResourceLayer(response.rows); - } - }); - // getResourceListByDeptId(deptId).then(response => { - // if (response.data && response.data.length > 0) { - // this.addResourceLayer(response.data); - // } - // }); - }, - // 添加资源图层 - addResourceLayer (resourceList) { - let features = []; - resourceList.forEach(item => { - if (item.theGeom != null && item.theGeom !== '') { - const { threeAssetType } = item - console.log(222, threeAssetType, item); - let color = this.LegendData[threeAssetType - 1 + ''] - let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor) - features.push(fs); - } - }); - gis.getVectorLayerByFs(features) - gis.mapSetFit(features) - }, - // 获取资产列表 - getPermanentList (deptId) { - getThreeList({ deptId: deptId }).then(response => { - if (response.data && response.data.length > 0) { - this.addPermanentLayer(response.data); - } - }); + // 添加区县边界 + addCountyBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) }, - getAllList (deptId) { - this.$emit('getData',deptId); + // 添加乡镇边界 + addTownBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) }, - closePopover(){ - this.showResourceDetail = false; + // 添加村边界 + addVillageBorder (deptIds) { + gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) }, - openImage(url){ - this.fileUrl = url; - this.showImg = true; + // 获取geoserver的地址 + getGeoServerUrl () { + // 获取geoserver的地址 + getConfigKey("system.geoServer.url").then(response => { + this.mapGeoServerUrl = response.msg; + }); + // 获取区县边界图层名称 + getConfigKey("geoserver.layer.countyBorder").then(response => { + this.countyBorderLayerName = response.msg; + }); + // 获取乡镇边界的图层名称 + getConfigKey("geoserver.layer.townBorder").then(response => { + this.townBorderLayerName = response.msg; + }); + // 获取村边界的图层名称 + getConfigKey("geoserver.layer.villageBorder").then(response => { + this.villageBorderLayerName = response.msg; + }); + // 获取组边界的图层名称 + getConfigKey("geoserver.layer.groupBorder").then(response => { + this.groupBorderLayerName = response.msg; + }); } } }; diff --git a/src/views/sanqing/main-gis/index.scss b/src/views/sanqing/main-gis/index.scss index 6ed1f43..d6ee9b3 100644 --- a/src/views/sanqing/main-gis/index.scss +++ b/src/views/sanqing/main-gis/index.scss @@ -4,262 +4,53 @@ left: 0; right: 0; bottom: 0; - - .legend_pos { - z-index: 21 !important; - position: absolute; - top: 100px; - right: 480px; - - .legend_full { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - - .legend_item { - display: flex; - justify-content: center; - // border: 1px solid red; - align-items: center; - - .icon { - width: 16px; - height: 16px; - border-radius: 2px; - margin-right: 10px; - } - } - - } - } - - .mask { - z-index: 1; - width: 100%; - height: 100%; - box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左 - /* 四周黑色 */ - pointer-events: none; - /* 允许地图事件穿透 */ - } + z-index: 1; } -//选择地址 -.select_address { - width: 300px; - position: absolute; - left: 30px; - top: 40px; - z-index: 302; - - box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8); /* 添加内发光效果 */ +/deep/ .el-cascader { + .el-input { + background-color: transparent !important; - //
- //
- ::v-deep { - .el-input--suffix { - // background: url('../../../../assets/images/dataScreen/bigDataMonitoring2/stockCooperative/addText_bg.png') center center no-repeat !important; - background-size: 100% 100% !important; - width: 280px; - - .el-input__inner { - background: none !important; - border: 0 none !important; - color: #a7dbff; - font-size: 1.66vh; - text-align: center; - padding: 0; - } - - .el-input__icon { - display: none !important; - } + .el-input__inner { + border: 0; + background-color: transparent !important; + color: white; } } } -.gl_pop_cash { - background: rgba(10, 25, 47, 0.8); - position: absolute; - border: 1px solid #063a95; - border-left: 0.15vw solid #357dfa; - padding: 0 1vw; - z-index: 11; - - .head_main { - height: 4.62vh; - padding-top: 0.55vh; - display: flex; - align-items: center; - position: relative; - justify-content: space-between; - - .title { - color: #ffad00; - font-size: 1.66vh; - } - - .close { - background: url('./close.png'); - // border: 1px solid red; - background-size: 100% 100%; - width: 1.48vh; - height: 1.48vh; - cursor: pointer; - } - - .xs_main { - height: 0.55vh; - position: absolute; - width: 100%; - bottom: -0.55vh; - display: flex; - align-items: center; - - .block { - width: 2.34vw; - display: flex; - - .point { - width: .55vh; - height: .55vh; - margin-right: 0.36vw; - - &.p1 { - background: rgba(53, 125, 250, 1) - } - - &.p2 { - background: rgba(53, 125, 250, .7) - } - - &.p3 { - background: rgba(53, 125, 250, .4) - } - } - - } - - .xs_x { - height: 1px; - flex: 1; - background: #214284; - } - } - } - - .echarts_main { - .headers { - height: 3.33vh; - font-size: 1.48vh; - color: #0befca; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - margin-right: 0.53vw; - background: rgba(11, 239, 202, .2); - margin-bottom: 0.9vh - } - - .desc_main { - overflow-y: scroll; - padding-right: 0.33vw; - - .analysisTable_list { - margin: 0; - padding: 0; - flex: 1; - display: flex; - flex-direction: column; - - .flex_item { - cursor: pointer; - list-style: none; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - color: #fff; - font-size: 1.29vh; - position: relative; - height: 3.2vh; - - &:nth-child(2n) { - background: rgba(53, 125, 250, .1); - } - } - } - } - } - +.mask { + z-index: 1; + width: 100%; + height: 100%; + box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左 + /* 四周黑色 */ + // pointer-events: none; + /* 允许地图事件穿透 */ } -.pop_statistical_desc { - width: 20.2vw; - margin: 0; - right: 23vw; - top: 35vh; - padding-bottom: 1.04vw !important; - - .head_main { - .title { - color: #fff; - } - } - - .echarts_main { - margin-top: 1.66vh; - - div { - display: flex; - align-items: center; - - &:nth-child(even) { - background: rgba(32, 89, 188, 0.2); - } - - p { - &:nth-child(1) { - width: 8vw; - padding-left: 1vw; - flex-shrink: 0; - } - - &:nth-child(2) { - color: #ffad00; - } - - margin: 0; - color: #ffffff; - font-size:1.33vh; - line-height: 3.92vh; - } - } - } +.select_address { + z-index: 22; + // cursor: pointer; + // pointer-events: none; + position: absolute; + left: 480px; + top: 112px; + height: 44px; + border: 2px solid #3181F6; } - -.imgBox{ +.select_wrap { + z-index: 10; + width: 88px; + height: 44px; + background: rgba(3, 16, 40, 0.2); + border: 2px solid #3181F6; position: absolute; - left: 0; - top: 0; - z-index: 999999; - width: 100vw; - height: 100%; - .box_bg{ - background-color: rgba(0,0,0,0.5); - width: 100%; - height: 100%; - } - img{ - height: 60vh; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - } -} + left: 710px; + top: 112px; + display: flex; + justify-content: center; + align-items: center; + padding-left: 14px; +} \ No newline at end of file