| @@ -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' | |||||
| ] | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,24 @@ | |||||
| <div class="map" id="map"> | |||||
| <!--选择地址--> | |||||
| <div class="select_address"> | |||||
| <div class="dot left"></div> | |||||
| <div class="dot right"></div> | |||||
| <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader"> | |||||
| <template slot-scope="{ node, data }"> | |||||
| <span>{{ data.label }}</span> | |||||
| <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> | |||||
| </template> | |||||
| </el-cascader> | |||||
| </div> | |||||
| <div class="select_wrap"> | |||||
| <el-dropdown style="width: 80px"> | |||||
| <span class="el-dropdown-link" style="color: #c1deff"> | |||||
| {{ centerYear }}<i class="el-icon-caret-bottom el-icon--right"></i> | |||||
| </span> | |||||
| <el-dropdown-menu slot="dropdown" class="header-new-drop"> | |||||
| <el-dropdown-item v-for="item in this.yearList" :key="item" :label="item" :value="item" | |||||
| @click.native="yearDropdown(item)">{{ item }}</el-dropdown-item> | |||||
| </el-dropdown-menu> | |||||
| </el-dropdown> | |||||
| </div> | |||||
| </div> | |||||
| @@ -0,0 +1,387 @@ | |||||
| 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' | |||||
| let gis = null; | |||||
| const DEPT_CHANGED = 1; | |||||
| const YEAR_CHANGED = 1 << 1; | |||||
| const ALL_CHANGED = ~(1 << 31); | |||||
| export default { | |||||
| components: { | |||||
| }, | |||||
| data () { | |||||
| return { | |||||
| 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, | |||||
| }, | |||||
| queryParams: { | |||||
| year: new Date().getFullYear(), | |||||
| deptId: 100, | |||||
| }, | |||||
| yellowIcon: require('./icon/yellow.png'), | |||||
| comps, | |||||
| map: "", // 地图 | |||||
| mapGeoServerUrl: "", // geoserver地址 | |||||
| mapBorder: "", // 地图边界 | |||||
| deptLayer: "", // 坐标点图层 | |||||
| countyBorderLayerName: "", // 区县边界图层名称 | |||||
| townBorderLayerName: "", // 乡镇边界图层名称 | |||||
| villageBorderLayerName: "", // 村边界图层名称 | |||||
| groupBorderLayerName: "", // 组边界图层名称 | |||||
| addrOptions: [], | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| currentComp: function () { | |||||
| return this.comps[this.tab] | |||||
| } | |||||
| }, | |||||
| created () { | |||||
| }, | |||||
| mounted () { | |||||
| // 获取geoserver的地址 | |||||
| this.getGeoServerUrl(); | |||||
| getInfo().then(res => { | |||||
| // this.getData(); | |||||
| treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { | |||||
| this.addrOptions = resp.data; | |||||
| // 初始化地图 | |||||
| this.initMap(); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| methods: { | |||||
| //切换年份 | |||||
| yearDropdown (item) { | |||||
| this.queryParams.year = item; | |||||
| this.centerYear = item; | |||||
| this.getData(YEAR_CHANGED); | |||||
| }, | |||||
| // 绘制地图 | |||||
| drawMap (node, isLocated) { // isLocated 控制地图是否跳转 | |||||
| const dept = node.data; | |||||
| gis.getMapContainer().removeLayer(this.mapBorder); | |||||
| this.mapBorder = ''; | |||||
| gis.getMapContainer().removeLayer(this.deptLayer); | |||||
| this.deptLayer = ''; | |||||
| 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(); | |||||
| }, | |||||
| tabChange (info) { | |||||
| this.tab = info.id; | |||||
| }, | |||||
| // 初始化地图 | |||||
| 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('map') | |||||
| gis.addTianDiTuLayer() | |||||
| gis.addAnnotationLayer() | |||||
| if (dept.deptLevel === '5') { | |||||
| // 登录身份为市级领导 | |||||
| this.userRole = 'cityLeader'; | |||||
| this.cityId = dept.id; | |||||
| this.currentDeptLevel = '5'; | |||||
| // 添加区县边界 | |||||
| this.addCountyBorder(dept.children.map(item => item.id)); | |||||
| } else if (dept.deptLevel === '4') { | |||||
| // 登录身份为县级领导 | |||||
| this.userRole = 'countyLeader'; | |||||
| this.countyId = dept.id; | |||||
| this.currentDeptLevel = '4'; | |||||
| // 添加乡镇边界 | |||||
| this.addTownBorder(dept.children.map(item => item.id)); | |||||
| gis.getView().setZoom(11); | |||||
| } else if (dept.deptLevel === '3') { | |||||
| // 登录身份为镇级领导 | |||||
| this.userRole = 'townLeader'; | |||||
| this.townId = dept.id; | |||||
| this.currentDeptLevel = '3'; | |||||
| // 添加村边界 | |||||
| this.addVillageBorder(dept.children.map(item => item.id)); | |||||
| gis.getView().setZoom(13); | |||||
| } | |||||
| // 添加坐标点图层 | |||||
| if (dept.children) { | |||||
| this.addDeptLayer(dept.children, 'yellow.png'); | |||||
| } | |||||
| gis.getView().setCenter(fromLonLat(mapCenterLocation)) | |||||
| // 地图点击事件 | |||||
| gis.getMapContainer().on("click", (evt) => { | |||||
| let feature = gis.getMapContainer().forEachFeatureAtPixel( | |||||
| evt.pixel, | |||||
| (feature) => feature | |||||
| ); | |||||
| if (feature) { | |||||
| // 镇级:加载村级坐标点 | |||||
| if (feature.get('level') === 'deptPoint') { | |||||
| let parentIds = []; | |||||
| console.log(feature.get('deptId'), 888); | |||||
| this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds); | |||||
| this.addrText = parentIds; | |||||
| this.selectAddress(parentIds); | |||||
| } | |||||
| } | |||||
| }); | |||||
| }, | |||||
| 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) => { | |||||
| console.log(resp, 777); | |||||
| 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(); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| selectAddress (value, isLocated = true) { // isLocated 控制地图是否跳转 | |||||
| this.queryParams.deptId = value[value.length - 1]; | |||||
| this.getData(DEPT_CHANGED); | |||||
| let node = this.$refs["cascader"].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; | |||||
| } | |||||
| } | |||||
| } | |||||
| return false; | |||||
| }, | |||||
| // 添加坐标点图层 | |||||
| addDeptLayer (nextDeptSet) { | |||||
| let features = []; | |||||
| nextDeptSet.forEach(item => { | |||||
| let fs = gis.getFeature(item, this.yellowIcon) | |||||
| features.push(fs); | |||||
| }); | |||||
| gis.getVectorLayerByFs(features) | |||||
| gis.mapSetFit(features) | |||||
| }, | |||||
| // 添加区县边界 | |||||
| addCountyBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) | |||||
| }, | |||||
| // 添加乡镇边界 | |||||
| addTownBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | |||||
| }, | |||||
| // 添加村边界 | |||||
| addVillageBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
| }, | |||||
| // 获取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; | |||||
| }); | |||||
| } | |||||
| } | |||||
| }; | |||||
| @@ -0,0 +1,31 @@ | |||||
| .map { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| } | |||||
| .select_address { | |||||
| z-index: 10; | |||||
| position: absolute; | |||||
| left: 480px; | |||||
| top: 112px; | |||||
| height: 44px; | |||||
| border: 2px solid #3181F6; | |||||
| } | |||||
| .select_wrap { | |||||
| z-index: 10; | |||||
| width: 88px; | |||||
| height: 44px; | |||||
| background: rgba(3, 16, 40, 0.2); | |||||
| border: 2px solid #3181F6; | |||||
| position: absolute; | |||||
| left: 710px; | |||||
| top: 112px; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| padding-left: 14px; | |||||
| } | |||||
| @@ -0,0 +1,4 @@ | |||||
| <template src='./index.html'/> | |||||
| <script lang='js' src='./index.js'></script> | |||||
| <style lang='scss' src='./index.scss' scoped> | |||||
| </style> | |||||
| @@ -4,6 +4,7 @@ | |||||
| background-size: 100% 100%; | background-size: 100% 100%; | ||||
| width: 100%; | width: 100%; | ||||
| height: 90px; | height: 90px; | ||||
| z-index: 9; | |||||
| .title { | .title { | ||||
| overflow: visible; | overflow: visible; | ||||
| @@ -1,32 +1,10 @@ | |||||
| <div class="page"> | <div class="page"> | ||||
| <div class="map" id="map"></div> | |||||
| <Header title="资金一张图"> | <Header title="资金一张图"> | ||||
| <div slot="left"> | <div slot="left"> | ||||
| <Tabs @change="tabChange" :data="tabData"></Tabs> | <Tabs @change="tabChange" :data="tabData"></Tabs> | ||||
| </div> | </div> | ||||
| </Header> | </Header> | ||||
| <!--选择地址--> | |||||
| <div class="select_address"> | |||||
| <div class="dot left"></div> | |||||
| <div class="dot right"></div> | |||||
| <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader"> | |||||
| <template slot-scope="{ node, data }"> | |||||
| <span>{{ data.label }}</span> | |||||
| <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> | |||||
| </template> | |||||
| </el-cascader> | |||||
| </div> | |||||
| <div class="select_wrap"> | |||||
| <el-dropdown style="width: 80px"> | |||||
| <span class="el-dropdown-link" style="color: #c1deff"> | |||||
| {{ centerYear }}<i class="el-icon-caret-bottom el-icon--right"></i> | |||||
| </span> | |||||
| <el-dropdown-menu slot="dropdown" class="header-new-drop"> | |||||
| <el-dropdown-item v-for="item in this.yearList" :key="item" :label="item" :value="item" | |||||
| @click.native="yearDropdown(item)">{{ item }}</el-dropdown-item> | |||||
| </el-dropdown-menu> | |||||
| </el-dropdown> | |||||
| </div> | |||||
| <GisMap></GisMap> | |||||
| <!-- 项目初始化 --> | <!-- 项目初始化 --> | ||||
| <div class="left_side col space_between"> | <div class="left_side col space_between"> | ||||
| <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component> | <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component> | ||||
| @@ -37,4 +15,4 @@ | |||||
| <div class="buttom_side row space_between"> | <div class="buttom_side row space_between"> | ||||
| <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component> | <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component> | ||||
| </div> | </div> | ||||
| </div> | |||||
| </div> | |||||
| @@ -34,12 +34,13 @@ import { | |||||
| } from 'ol/proj' | } from 'ol/proj' | ||||
| let gis = null; | let gis = null; | ||||
| import GisMap from '@/components/gis-map/index.vue'; | |||||
| const DEPT_CHANGED = 1; | const DEPT_CHANGED = 1; | ||||
| const YEAR_CHANGED = 1 << 1; | const YEAR_CHANGED = 1 << 1; | ||||
| const ALL_CHANGED = ~(1 << 31); | const ALL_CHANGED = ~(1 << 31); | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| GisMap, | |||||
| Header, | Header, | ||||
| Tabs, | Tabs, | ||||
| Left11, | Left11, | ||||
| @@ -59,40 +60,6 @@ export default { | |||||
| }, | }, | ||||
| data () { | data () { | ||||
| return { | return { | ||||
| 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, | |||||
| }, | |||||
| queryParams: { | |||||
| year: new Date().getFullYear(), | |||||
| deptId: 100, | |||||
| }, | |||||
| tabData: [ | tabData: [ | ||||
| { | { | ||||
| id: '1', | id: '1', | ||||
| @@ -105,16 +72,7 @@ export default { | |||||
| ], | ], | ||||
| yellowIcon: require('./icon/yellow.png'), | yellowIcon: require('./icon/yellow.png'), | ||||
| tab: '1', | tab: '1', | ||||
| comps, | |||||
| map: "", // 地图 | |||||
| mapGeoServerUrl: "", // geoserver地址 | |||||
| mapBorder: "", // 地图边界 | |||||
| deptLayer: "", // 坐标点图层 | |||||
| countyBorderLayerName: "", // 区县边界图层名称 | |||||
| townBorderLayerName: "", // 乡镇边界图层名称 | |||||
| villageBorderLayerName: "", // 村边界图层名称 | |||||
| groupBorderLayerName: "", // 组边界图层名称 | |||||
| addrOptions: [], | |||||
| comps | |||||
| }; | }; | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -125,309 +83,10 @@ export default { | |||||
| created () { | created () { | ||||
| }, | }, | ||||
| mounted () { | mounted () { | ||||
| // 获取geoserver的地址 | |||||
| this.getGeoServerUrl(); | |||||
| getInfo().then(res => { | |||||
| // this.getData(); | |||||
| treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { | |||||
| this.addrOptions = resp.data; | |||||
| // 初始化地图 | |||||
| this.initMap(); | |||||
| }); | |||||
| }); | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| //切换年份 | |||||
| yearDropdown (item) { | |||||
| this.queryParams.year = item; | |||||
| this.centerYear = item; | |||||
| this.getData(YEAR_CHANGED); | |||||
| }, | |||||
| // 绘制地图 | |||||
| drawMap (node, isLocated) { // isLocated 控制地图是否跳转 | |||||
| const dept = node.data; | |||||
| gis.getMapContainer().removeLayer(this.mapBorder); | |||||
| this.mapBorder = ''; | |||||
| gis.getMapContainer().removeLayer(this.deptLayer); | |||||
| this.deptLayer = ''; | |||||
| 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(); | |||||
| }, | |||||
| tabChange (info) { | tabChange (info) { | ||||
| this.tab = info.id; | this.tab = info.id; | ||||
| }, | |||||
| // 初始化地图 | |||||
| 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('map') | |||||
| gis.addTianDiTuLayer() | |||||
| gis.addAnnotationLayer() | |||||
| if (dept.deptLevel === '5') { | |||||
| // 登录身份为市级领导 | |||||
| this.userRole = 'cityLeader'; | |||||
| this.cityId = dept.id; | |||||
| this.currentDeptLevel = '5'; | |||||
| // 添加区县边界 | |||||
| this.addCountyBorder(dept.children.map(item => item.id)); | |||||
| } else if (dept.deptLevel === '4') { | |||||
| // 登录身份为县级领导 | |||||
| this.userRole = 'countyLeader'; | |||||
| this.countyId = dept.id; | |||||
| this.currentDeptLevel = '4'; | |||||
| // 添加乡镇边界 | |||||
| this.addTownBorder(dept.children.map(item => item.id)); | |||||
| gis.getView().setZoom(11); | |||||
| } else if (dept.deptLevel === '3') { | |||||
| // 登录身份为镇级领导 | |||||
| this.userRole = 'townLeader'; | |||||
| this.townId = dept.id; | |||||
| this.currentDeptLevel = '3'; | |||||
| // 添加村边界 | |||||
| this.addVillageBorder(dept.children.map(item => item.id)); | |||||
| gis.getView().setZoom(13); | |||||
| } | |||||
| // 添加坐标点图层 | |||||
| if (dept.children) { | |||||
| this.addDeptLayer(dept.children, 'yellow.png'); | |||||
| } | |||||
| gis.getView().setCenter(fromLonLat(mapCenterLocation)) | |||||
| // 地图点击事件 | |||||
| gis.getMapContainer().on("click", (evt) => { | |||||
| let feature = gis.getMapContainer().forEachFeatureAtPixel( | |||||
| evt.pixel, | |||||
| (feature) => feature | |||||
| ); | |||||
| if (feature) { | |||||
| // 镇级:加载村级坐标点 | |||||
| if (feature.get('level') === 'deptPoint') { | |||||
| let parentIds = []; | |||||
| console.log(feature.get('deptId'), 888); | |||||
| this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds); | |||||
| this.addrText = parentIds; | |||||
| this.selectAddress(parentIds); | |||||
| } | |||||
| } | |||||
| }); | |||||
| }, | |||||
| 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) => { | |||||
| console.log(resp, 777); | |||||
| 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(); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| selectAddress (value, isLocated = true) { // isLocated 控制地图是否跳转 | |||||
| this.queryParams.deptId = value[value.length - 1]; | |||||
| this.getData(DEPT_CHANGED); | |||||
| let node = this.$refs["cascader"].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; | |||||
| } | |||||
| } | |||||
| } | |||||
| return false; | |||||
| }, | |||||
| // 添加坐标点图层 | |||||
| addDeptLayer (nextDeptSet) { | |||||
| let features = []; | |||||
| nextDeptSet.forEach(item => { | |||||
| let fs = gis.getFeature(item, this.yellowIcon) | |||||
| features.push(fs); | |||||
| }); | |||||
| gis.getVectorLayerByFs(features) | |||||
| gis.mapSetFit(features) | |||||
| }, | |||||
| // 添加区县边界 | |||||
| addCountyBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds) | |||||
| }, | |||||
| // 添加乡镇边界 | |||||
| addTownBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds) | |||||
| }, | |||||
| // 添加村边界 | |||||
| addVillageBorder (deptIds) { | |||||
| gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds) | |||||
| }, | |||||
| // 获取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; | |||||
| }); | |||||
| } | } | ||||
| } | } | ||||
| }; | }; | ||||
| @@ -1,30 +0,0 @@ | |||||
| .map { | |||||
| border: 1px solid red; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 0; | |||||
| } | |||||
| .select_address { | |||||
| position: absolute; | |||||
| left: 480px; | |||||
| top: 112px; | |||||
| height: 44px; | |||||
| border: 2px solid #3181F6; | |||||
| } | |||||
| .select_wrap { | |||||
| width: 88px; | |||||
| height: 44px; | |||||
| background: rgba(3, 16, 40, 0.2); | |||||
| border: 2px solid #3181F6; | |||||
| position: absolute; | |||||
| left: 710px; | |||||
| top: 112px; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| padding-left: 14px; | |||||
| } | |||||