zhangzl
/
rongxin.nongjing.expo
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

合并

dev
yuzongping 22 hours ago
parent
cf3ba4d3d6
commit
031a0a94e8
3 changed files with 919 additions and 363 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +100
    -19
      src/views/sanqing/main-gis/index.html
  2. +570
    -307
      src/views/sanqing/main-gis/index.js
  3. +249
    -37
      src/views/sanqing/main-gis/index.scss

+ 100
- 19
src/views/sanqing/main-gis/index.html View File

@@ -1,23 +1,104 @@
<div class="map" id="map22222">
<div class="map border" id="map2">
<!-- <Legend class="legend_pos">-->
<!-- <div class="legend_full">-->
<!-- <div v-for="item in LegendData" class="legend_item">-->
<!-- <div class="icon" :style="[item.iconStyle]"></div>-->
<!-- <p>{{item.name}}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </Legend>-->
<div v-if="false" class="gl_pop_cash pop_statistical_desc">
<div class="head_main">
<div class="title">{{resourceDetail.name}}详情</div>
<div class="close" @click="showResourceDetail = false"></div>
<div class="xs_main">
<div class="block">
<div class="point p1"></div>
<div class="point p2"></div>
<div class="point p3"></div>
</div>
<div class="xs_x"></div>
</div>
</div>
<div class="echarts_main">
<div>
<p>资源编码</p>
<p>{{resourceDetail.code}}</p>
</div>
<div>
<p>资源名称</p>
<p>{{resourceDetail.name}}</p>
</div>
<div>
<p>资源类型</p>
<p>{{resourceDetail.resourceSort}}</p>
</div>
<div>
<p>总面积(亩)</p>
<p>{{resourceDetail.totalArea}}</p>
</div>
<div>
<p>资产状态</p>
<p>{{resourceDetail.status}}</p>
</div>
<div>
<p>使用情况</p>
<p>{{resourceDetail.useType}}</p>
</div>
<div>
<p>坐落位置</p>
<p>{{resourceDetail.location}}</p>
</div>
<div>
<p>东至</p>
<p>{{resourceDetail.east}}</p>
</div>
<div>
<p>西至</p>
<p>{{resourceDetail.west}}</p>
</div>
<div>
<p>南至</p>
<p>{{resourceDetail.south}}</p>
</div>
<div>
<p>北至</p>
<p>{{resourceDetail.north}}</p>
</div>
<div>
<p>备注</p>
<p>{{resourceDetail.remark}}</p>
</div>
<div>
<p>附件</p>
<p>
<block v-for="(item,index) in resourceDetail.fileList">
<a :href="item.urlApi" v-if="item.type != 'image'">
<img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
</a>
<img v-else :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
</block>
</p>
</div>
</div>

</div>
<div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
<Popover v-if="showResourceDetail" :data="resourceDetail" @closePopover="closePopover" @openImage="openImage"></Popover>
<div class="imgBox" v-if="showImg">
<div class="box_bg" @click="showImg = false"></div>
<img :src="fileUrl" alt="">
</div>
<!--选择地址--> <!--选择地址-->
<div class="select_address"> <div class="select_address">
<el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader2">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
<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> </el-cascader>
</div> </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 class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
</div>
</div>


+ 570
- 307
src/views/sanqing/main-gis/index.js View File

@@ -1,76 +1,190 @@
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 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 { import {
fromLonLat fromLonLat
} from 'ol/proj' } 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; let gis = null;

const DEPT_CHANGED = 1;
const YEAR_CHANGED = 1 << 1;
const ALL_CHANGED = ~(1 << 31);
export default { export default {
components: { components: {
},
watch: {
'queryParams.deptId': {
handler: function () {
console.log(this.queryParams.deptId);
this.commitDept(this.queryParams.deptId);
},
immediate: true, // 立即执行

}
Legend,
Popover
}, },
data () { data () {
return { return {
financeSummary: {
funds: 0, // 资金
totalAssets: 0, // 资产
totalResource: 0, // 资源
income: 0, // 经营收入
outcome: 0, // 经营支出
overhead: 0, // 管理费用
revenue: 0, // 发包收入
otherIncome: 0, // 其他收入
otherOutcome: 0, // 其他支出
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,
}, },
financeSummaryOverview: {
zeroIncomeBook: 0, // 0收入组织
areaTotalIncome: 0, // 区收入总和
townAvgIncome: 0, // 镇平均收入
bookAvgIncome: 0, // 组织平均收入

//零工公开请求参数
tempWorkerOpenQueryParams: {
// 分页
pageNum: 1,
pageSize: 10,
// 查询排序
//orderByColumn: "id",
//isAsc: "desc",
bookId: null,
deptId: null,
deptName: null,
openNy: null,
openYear: null,
openName: null,
openFile: null,
openPic: null,
remark: null,
translate_dict: 1,
},

//重大事项公开请求参数
majorEventOpenQueryParams: {
// 分页
pageNum: 1,
pageSize: 10,
// 查询排序
//orderByColumn: "id",
//isAsc: "desc",
bookId: null,
deptId: null,
deptName: null,
openNy: null,
openYear: null,
openDate: null,
openName: null,
openFile: null,
openPic: null,
content: null,
remark: null,
translate_dict: 1,
},

//补贴资金管理请求参数
subsidyFundsQueryParams: {
// 分页
pageNum: 1,
pageSize: 10,
// 查询排序
orderByColumn: "id",
isAsc: "desc",
year: null,
areaName: null,
name: null,
idCard: null,
itemName: null,
releaseDate: null,
translate_dict: 1,
},

//固定资产请求参数
permanentQueryParams: {
pageNum: 1,
pageSize: 10,
code: null,
name: null,
assetType: null,
operationType: null,
addType: null,
useType: null,
assetStatus: '1',
translate_dict: 1,
},

//资源资产请求参数
resourceListQueryParams: {
pageNum: 1,
pageSize: 10,
bookId: null,
deptId: null,
code: null,
name: null,
resourceType: null,
/*farmingResourceType: null,
buildResourceType: null,
unusedResourceType: null,*/
resourceSort: null,
totalArea: null,
location: null,
east: null,
west: null,
south: null,
north: null,
sumArea: null,
groupArea: null,
groupValue: null,
rentArea: null,
rentValue: null,
rentLessee: null,
rentStartTime: null,
rentEndTime: null,
otherArea: null,
otherValue: null,
farmerArea: null,
circulationArea: null,
circulationValue: null,
investmentArea: null,
investmentValue: null,
investmentLessee: null,
investmentStartTime: null,
investmentEndTime: null,
status: null,
translate_dict: 1,
},
//合同信息请求参数
contractionByPermanentQueryParams: {
pageNum: 1,
pageSize: 10,
bookId: null,
deptId: null,
code: null,
name: null,
assetType: null,
firstParty: null,
secondParty: null,
collectionPay: null,
contractionSource: null,
totalAmount: null,
receivedAmount: null,
settledAmount: null,
buildingTime: null,
startTime: null,
endTime: null,
num: null,
unit: null,
price: null,
contractionStatus: null,
translate_dict: 1,
}, },
//搜索栏参数
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,], addrText: [100,],
deptTreeProps: { deptTreeProps: {
checkStrictly: true, checkStrictly: true,
}, },
queryParams: {
year: new Date().getFullYear(),
deptId: 100,
},
yellowIcon: require('./icon/yellow.png'),
// comps,
map: "", // 地图
addrOptions: [],
resourceDetail: {},
//资产信息详情弹窗
showResourceDetail: false,
mapGeoServerUrl: "", // geoserver地址 mapGeoServerUrl: "", // geoserver地址
mapBorder: "", // 地图边界 mapBorder: "", // 地图边界
deptLayer: "", // 坐标点图层 deptLayer: "", // 坐标点图层
@@ -78,185 +192,265 @@ export default {
townBorderLayerName: "", // 乡镇边界图层名称 townBorderLayerName: "", // 乡镇边界图层名称
villageBorderLayerName: "", // 村边界图层名称 villageBorderLayerName: "", // 村边界图层名称
groupBorderLayerName: "", // 组边界图层名称 groupBorderLayerName: "", // 组边界图层名称
addrOptions: []
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: [],
}; };
}, },
computed: { computed: {
// currentComp: function () {
// return this.comps[this.tab]
// }
}, },
created () { 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 () { mounted () {
// console.log('当前年份', this.centerYear);
this.commitYear(this.centerYear);
// 获取geoserver的地址
this.getGeoServerUrl();
getInfo().then(res => { getInfo().then(res => {
// this.getData();
treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => { treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
this.addrOptions = resp.data; this.addrOptions = resp.data;
// 初始化地图
this.initMap();
this.headerTitle = res.user.deptName + '阳光村务一张图';
listDeptExcludeChild(res.user.loginDeptId).then((resp) => {
let deptOptions = [res.user.loginDeptId];
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.loginDeptId;
this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId;
this.majorEventOpenQueryParams.deptId = res.user.loginDeptId;
this.subsidyFundsQueryParams.deptId = res.user.loginDeptId;
this.permanentQueryParams.deptId = res.user.loginDeptId;
this.resourceListQueryParams.deptId = res.user.loginDeptId;
this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
//列表请求
this.getAllList(res.user.deptId);
// 加载地图
this.initMap(res.user.loginDeptId);

// 获取村边界的图层名称
this.getVillageBorderLayerName();
}); });
});
})
// treeselect().then((resp) => {
// this.addrOptions = resp.data
// getInfo().then(res => {
// this.initMap(res.user.loginDeptId);
// // 加载地图
// })
// });


}, },
methods: { methods: {
/**
* 提交dept
* @param {*} deptId
*/
commitDept (deptId) {
this.$store.commit('SET_DEPTID', deptId);
// 获取村边界的图层名称
getVillageBorderLayerName () {
getConfigKey("geoserver.layer.villageBorder").then(response => {
this.villageBorderLayerName = response.msg;
});
}, },
commitYear (year) {
this.$store.commit('SET_YEAR', year);
// 添加区县边界
addCountyBorder (deptIds) {
gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
}, },
//切换年份
yearDropdown (item) {
this.queryParams.year = item;
this.centerYear = item;
this.getData(YEAR_CHANGED);
this.commitYear(item);
// 添加乡镇边界
addTownBorder (deptIds) {
gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
}, },
// 绘制地图
drawMap (node, isLocated) { // isLocated 控制地图是否跳转
// // 添加村边界
// 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;
});
},
selectAddress (value) {
const deptId = value[value.length - 1];
this.queryParams.deptId = deptId;
this.tempWorkerOpenQueryParams.deptId = deptId;
this.majorEventOpenQueryParams.deptId = deptId;
this.subsidyFundsQueryParams.deptId = deptId;
this.permanentQueryParams.deptId = deptId;
this.resourceListQueryParams.deptId = deptId;
this.contractionByPermanentQueryParams.deptId = deptId;
this.infoTotal = undefined;
this.resourceTotal = undefined;
this.permanentTotal = undefined;
this.subsidyFundsTotal = undefined;
this.majorEventOpenTotal = undefined;
this.tempWorkerOpenTotal = undefined;
this.affairsTotal = undefined;
this.affairsList = [];
this.tempWorkerOpenList = [];
this.majorEventOpenList = [];
this.subsidyFundsList = [];
this.permanentList = [];
this.resourceList = [];
this.infoList = [];
this.getAllList();

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);
const dept = node.data; const dept = node.data;
gis.getMapContainer().removeLayer(this.mapBorder);
this.mapBorder = '';
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.deptLayer); gis.getMapContainer().removeLayer(this.deptLayer);
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();
// 添加坐标点图层
this.addDeptLayer(deptList, 'yellow.png');
gis.getMapContainer().getView().animate({
// 只设置需要的属性即可
center: fromLonLat([dept.lng, dept.lat]), // 中心点
duration: 500, // 缩放持续时间，默认不需要设置
});
}, },
tabChange (info) {
this.tab = info.id;
// 添加村边界
addVillageBorder (deptIds) {
gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
}, },
// 初始化地图
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')
// 加载地图
initMap (deptId) {
gis = new GisUtils('map2')
gis.addTianDiTuLayer() gis.addTianDiTuLayer()
gis.addAnnotationLayer() gis.addAnnotationLayer()
if (dept.deptLevel === '5') {

let dept2 = this.addrOptions[0];
//console.log(this.addrOptions, 'this.addrOptions');
// console.log(dept2, 888);
if (dept2.deptLevel === '5') {
// 登录身份为市级领导 // 登录身份为市级领导
this.userRole = 'cityLeader'; this.userRole = 'cityLeader';
this.cityId = dept.id; this.cityId = dept.id;
this.currentDeptLevel = '5'; this.currentDeptLevel = '5';
// 添加区县边界 // 添加区县边界
this.addCountyBorder(dept.children.map(item => item.id)); this.addCountyBorder(dept.children.map(item => item.id));
} else if (dept.deptLevel === '4') {
} else if (dept2.deptLevel === '4') {
// 登录身份为县级领导 // 登录身份为县级领导
this.userRole = 'countyLeader'; this.userRole = 'countyLeader';
this.countyId = dept.id;
this.countyId = dept2.id;
this.currentDeptLevel = '4'; this.currentDeptLevel = '4';
// 添加乡镇边界 // 添加乡镇边界
this.addTownBorder(dept.children.map(item => item.id));
gis.getView().setZoom(11);
} else if (dept.deptLevel === '3') {
this.addTownBorder(dept2.children.map(item => item.id));
// gis.getView().setZoom(11);
} else if (dept2.deptLevel === '3') {
// 登录身份为镇级领导 // 登录身份为镇级领导
this.userRole = 'townLeader'; this.userRole = 'townLeader';
this.townId = dept.id;
this.townId = dept2.id;
this.currentDeptLevel = '3'; this.currentDeptLevel = '3';
// 添加村边界 // 添加村边界
this.addVillageBorder(dept.children.map(item => item.id));
this.addVillageBorder(dept2.children.map(item => item.id));
gis.getView().setZoom(13); gis.getView().setZoom(13);
} }
debugger
// 添加坐标点图层 // 添加坐标点图层
if (dept.children) {
this.addDeptLayer(dept.children);
if (dept2.children) {
this.addDeptLayer(dept2.children);
} }
gis.getView().setCenter(fromLonLat(mapCenterLocation))

// 地图点击事件
// // 获取资源列表
this.getResourceList(deptId);
gis.getMapContainer().on("click", (evt) => { gis.getMapContainer().on("click", (evt) => {
let feature = gis.getMapContainer().forEachFeatureAtPixel( let feature = gis.getMapContainer().forEachFeatureAtPixel(
evt.pixel, evt.pixel,
@@ -264,140 +458,209 @@ export default {
); );
if (feature) { if (feature) {
// 镇级：加载村级坐标点 // 镇级：加载村级坐标点
if (feature.get('level') === 'deptPoint') {
let parentIds = [];
this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds);
this.addrText = parentIds;
this.selectAddress(parentIds);
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);
} }
} }
}); });
},
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;

// 缩小地图，重新加载页面
gis.getMapContainer().on("moveend", (evt) => {
const zoom = gis.getMapContainer().getView().getZoom();
if (this.villagePointLayer && zoom < 10.5) {
gis.getMapContainer().removeLayer(this.villagePointLayer);
this.villagePointLayer = "";
}
}); });
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();
});
}
}, },
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);
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;
}

}, },
// 查找指定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;
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
})
} }
this.showResourceDetail = true;
this.resourceDetail = data;
} }
}
return false;
});
}, },

// 添加坐标点图层
addDeptLayer (nextDeptSet) {
// 创建矢量数据源
addDeptLayer (nextDeptSet, locationIcon) {
//console.log('nextDeptSet', nextDeptSet);
let features = []; let features = [];
nextDeptSet.forEach(item => { nextDeptSet.forEach(item => {
let fs = gis.getFeature(item, this.yellowIcon) let fs = gis.getFeature(item, this.yellowIcon)
features.push(fs); features.push(fs);
}); });
gis.getVectorLayerByFs(features) gis.getVectorLayerByFs(features)
gis.mapSetFit(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;
// 获取资源列表
getResourceList (deptId) {
getThreeList({ deptId: deptId }).then(response => {
if (response.rows && response.rows.length > 0) {
this.addResourceLayer(response.rows);
}
}); });
// 获取乡镇边界的图层名称
getConfigKey("geoserver.layer.townBorder").then(response => {
this.townBorderLayerName = response.msg;
// 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);
}
}); });
// 获取村边界的图层名称
getConfigKey("geoserver.layer.villageBorder").then(response => {
this.villageBorderLayerName = response.msg;
gis.getVectorLayerByFs(features)
gis.mapSetFit(features)
},
// 获取资产列表
getPermanentList (deptId) {
getThreeList({ deptId: deptId }).then(response => {
if (response.data && response.data.length > 0) {
this.addPermanentLayer(response.data);
}
}); });
// 获取组边界的图层名称
getConfigKey("geoserver.layer.groupBorder").then(response => {
this.groupBorderLayerName = response.msg;
},
getAllList (deptId) {
//三务公开
// this.getList(null);
// //零工公开
// this.getTempWorkerOpenList();
// //重大事项公开
// this.getMajorEventOpenList();
// //补贴资金管理
// this.getSubsidyFundsList();
// //固定资产
// this.getPermanentListList();
// //资源资产
// this.getResourceListList();
// //合同信息
// this.getContractionByPermanentList();
// //资金情况
// this.getFundAndBankAmountByDeptIdArray();
//this.getThreeList(deptId);
},
getThreeList (deptId) {

getThreeList({ deptId: deptId }).then(response => {

}); });
},
closePopover () {
this.showResourceDetail = false;
} }
} }
}; };

+ 249
- 37
src/views/sanqing/main-gis/index.scss View File

@@ -4,53 +4,265 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1;
}


/deep/ .el-cascader {
.el-input {
background-color: transparent !important;
.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;
}
}


.el-input__inner {
border: 0;
background-color: transparent !important;
color: white;
} }
} }
}


.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;
/* 允许地图事件穿透 */
.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;
/* 允许地图事件穿透 */
}
} }


//选择地址
.select_address { .select_address {
z-index: 22;
// cursor: pointer;
// pointer-events: none;
width: 300px;
position: absolute; position: absolute;
left: 480px;
top: 112px;
height: 44px;
border: 2px solid #3181F6;
left: 30px;
top: 40px;
z-index: 302;

box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8);
/* 添加内发光效果 */

// <div class="dot left"></div>
// <div class="dot right"></div>
::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;
}
}
}
} }


.select_wrap {
z-index: 10;
width: 88px;
height: 44px;
background: rgba(3, 16, 40, 0.2);
border: 2px solid #3181F6;
.gl_pop_cash {
background: rgba(10, 25, 47, 0.8);
position: absolute; position: absolute;
left: 710px;
top: 112px;
display: flex;
justify-content: center;
align-items: center;
padding-left: 14px;
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);
}
}
}
}
}

}

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


.imgBox {
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%);
}
} }

Write Preview
Loading…
Cancel
Save