yuzongping 1 місяць тому
джерело
коміт
e289d2a6ba
10 змінених файлів з 484 додано та 398 видалено
  1. +32
    -0
      src/components/gis-map/data.js
  2. BIN
      src/components/gis-map/icon/yellow.png
  3. +24
    -0
      src/components/gis-map/index.html
  4. +387
    -0
      src/components/gis-map/index.js
  5. +31
    -0
      src/components/gis-map/index.scss
  6. +4
    -0
      src/components/gis-map/index.vue
  7. +1
    -0
      src/components/header/index.scss
  8. +2
    -24
      src/views/capital/index.html
  9. +3
    -344
      src/views/capital/index.js
  10. +0
    -30
      src/views/capital/index.scss

+ 32
- 0
src/components/gis-map/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'
]
}
}

BIN
src/components/gis-map/icon/yellow.png Переглянути файл

Перед Після
Ширина: 19  |  Висота: 31  |  Розмір: 1.7 KiB

+ 24
- 0
src/components/gis-map/index.html Переглянути файл

@@ -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>

+ 387
- 0
src/components/gis-map/index.js Переглянути файл

@@ -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;
});
}
}
};

+ 31
- 0
src/components/gis-map/index.scss Переглянути файл

@@ -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;
}

+ 4
- 0
src/components/gis-map/index.vue Переглянути файл

@@ -0,0 +1,4 @@
<template src='./index.html'/>
<script lang='js' src='./index.js'></script>
<style lang='scss' src='./index.scss' scoped>
</style>

+ 1
- 0
src/components/header/index.scss Переглянути файл

@@ -4,6 +4,7 @@
background-size: 100% 100%;
width: 100%;
height: 90px;
z-index: 9;

.title {
overflow: visible;


+ 2
- 24
src/views/capital/index.html Переглянути файл

@@ -1,32 +1,10 @@
<div class="page">
<div class="map" id="map"></div>
<Header title="资金一张图">
<div slot="left">
<Tabs @change="tabChange" :data="tabData"></Tabs>
</div>
</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">
<component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
@@ -37,4 +15,4 @@
<div class="buttom_side row space_between">
<component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component>
</div>
</div>
</div>

+ 3
- 344
src/views/capital/index.js Переглянути файл

@@ -34,12 +34,13 @@ import {
} from 'ol/proj'

let gis = null;
import GisMap from '@/components/gis-map/index.vue';
const DEPT_CHANGED = 1;
const YEAR_CHANGED = 1 << 1;
const ALL_CHANGED = ~(1 << 31);
export default {
components: {
GisMap,
Header,
Tabs,
Left11,
@@ -59,40 +60,6 @@ export default {
},
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,
},
tabData: [
{
id: '1',
@@ -105,16 +72,7 @@ export default {
],
yellowIcon: require('./icon/yellow.png'),
tab: '1',
comps,
map: "", // 地图
mapGeoServerUrl: "", // geoserver地址
mapBorder: "", // 地图边界
deptLayer: "", // 坐标点图层
countyBorderLayerName: "", // 区县边界图层名称
townBorderLayerName: "", // 乡镇边界图层名称
villageBorderLayerName: "", // 村边界图层名称
groupBorderLayerName: "", // 组边界图层名称
addrOptions: [],
comps
};
},
computed: {
@@ -125,309 +83,10 @@ export default {
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
- 30
src/views/capital/index.scss Переглянути файл

@@ -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;
}

Завантаження…
Відмінити
Зберегти