Przeglądaj źródła

资源弹窗

dev
yuzongping 1 tydzień temu
rodzic
commit
9788f6d5b4
6 zmienionych plików z 456 dodań i 99 usunięć
  1. BIN
      src/views/property/main-gis/close.png
  2. +41
    -47
      src/views/property/main-gis/index.html
  3. +12
    -48
      src/views/property/main-gis/index.js
  4. +161
    -0
      src/views/property/main-gis/index.scss
  5. +2
    -2
      src/views/resources/main-gis/index.html
  6. +240
    -2
      src/views/resources/main-gis/index.js

BIN
src/views/property/main-gis/close.png Wyświetl plik

Przed Po
Szerokość: 10  |  Wysokość: 10  |  Rozmiar: 352 B

+ 41
- 47
src/views/property/main-gis/index.html Wyświetl plik

@@ -8,23 +8,11 @@
</div>
</Legend>
<div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
<!--选择地址-->
<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 v-if="showInfoDetail" class="gl_pop_cash pop_statistical_desc">
<!--资产信息详情-弹窗-->
<div v-if="showPermanentDetail" class="gl_pop_cash pop_statistical_desc">
<div class="head_main">
<div class="title">{{infoDetail.name}}详情</div>
<div class="close" @click="showInfoDetail = false"></div>
<div class="title">{{permanentDetail.name}}详情</div>
<div class="close" @click="showPermanentDetail = false"></div>
<div class="xs_main">
<div class="block">
<div class="point p1"></div>
@@ -36,71 +24,77 @@
</div>
<div class="echarts_main">
<div>
<p>合同编码</p>
<p>{{infoDetail.code}}</p>
<p>资产编码</p>
<p>{{permanentDetail.code}}</p>
</div>
<div>
<p>合同名称</p>
<p>{{infoDetail.name}}</p>
<p>资产名称</p>
<p>{{permanentDetail.name}}</p>
</div>
<div>
<p>甲方</p>
<p>{{infoDetail.firstParty}}</p>
<p>资产类别</p>
<p>{{permanentDetail.assetType}}</p>
</div>
<div>
<p>乙方</p>
<p>{{infoDetail.secondParty}}</p>
<p>经营属性</p>
<p>{{permanentDetail.operationType}}</p>
</div>
<div>
<p>签订日期</p>
<p>{{infoDetail.buildingTime}}</p>
<p>增加方式</p>
<p>{{permanentDetail.addType}}</p>
</div>
<div>
<p>开始日期</p>
<p>{{infoDetail.startTime}}</p>
<p>购建时间</p>
<p>{{permanentDetail.buildTime}}</p>
</div>
<div>
<p>结束日期</p>
<p>{{infoDetail.endTime}}</p>
<p>使用情况</p>
<p>{{permanentDetail.useType}}</p>
</div>
<div>
<p>承包价款(元)</p>
<p>{{infoDetail.totalAmount}}</p>
<p>资产状态</p>
<p>{{permanentDetail.assetStatus}}</p>
</div>
<div>
<p>折合年均(元)</p>
<p>{{infoDetail.price}}</p>
<p>数量/面积</p>
<p>{{permanentDetail.quantity}}</p>
</div>
<div>
<p>已结款(元)</p>
<p>{{infoDetail.receivedAmount}}</p>
<p>计量单位</p>
<p>{{permanentDetail.unit}}</p>
</div>
<div>
<p>合同状态</p>
<p>{{infoDetail.contractionStatus}}</p>
<p>原值(元)</p>
<p>{{permanentDetail.originalValue}}</p>
</div>
<div>
<p>备注</p>
<p>{{infoDetail.remark}}</p>
<p>折旧方式</p>
<p>{{permanentDetail.depreciationType}}</p>
</div>
<div>
<p>附件</p>
<p>
<block v-for="(item,index) in infoDetail.fileList">
<block v-for="(item,index) in permanentDetail.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)">
<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 v-show="dialogVisible" style="width:100%;height:100vh;position:absolute;top: 0;left: 0;z-index: 999">
<div style="background: rgba(0,0,0,0.8);width: 100vw;height: 100vh;" @click="dialogVisible=false"></div>
<img width="40%" :src="dialogImageUrl" style="position:absolute;left: 50%;top: 50%;height: 50%;transform: translate(-50%,-50%)" alt="">
<!--选择地址-->
<div class="select_address">
<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>

</div>

+ 12
- 48
src/views/property/main-gis/index.js Wyświetl plik

@@ -21,6 +21,7 @@ export default {
},
data () {
return {
showPermanentDetail: false,
LegendData: [
{
icon: require('./icon/组 4665@2x.png'),
@@ -184,6 +185,8 @@ export default {
status: null,
translate_dict: 1,
},
//固定资产详情数据
permanentDetail: [],
//合同信息请求参数
contractionByPermanentQueryParams: {
pageNum: 1,
@@ -370,49 +373,6 @@ export default {
gis.getVectorLayerByFs(features)
gis.mapSetFit(features)
},
openResourceDialog (data) {
data.fileList = [];
let parmasData = {
tableId: data.id,
tableName: 't_asset_resource',
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;
}
});
},
listDialogHidden (type) {
if (type == 'detail') {
//合同信息详情弹窗
@@ -535,13 +495,17 @@ export default {
(feature) => feature
);
if (feature) {
var ifConsole = feature.values_.level;
if (ifConsole == "permanent") {
that.listDialogHidden('detail');
that.openPermanentDialog(feature.values_.detail);
// 镇级:加载村级坐标点
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 {
that.listDialogHidden('detail');
that.openResourceDialog(feature.values_.detail);
that.openPermanentDialog(feature.values_.detail);
}
}
});


+ 161
- 0
src/views/property/main-gis/index.scss Wyświetl plik

@@ -31,6 +31,167 @@
}
}

.gl_pop_cash {
background: rgba(10, 25, 47, 0.8);
position: absolute;
border: 1px solid #063a95;
border-left: 0.15vw solid #357dfa;
padding: 0 1vw;
z-index: 11;

.head_main {
height: 4.62vh;
padding-top: 0.55vh;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;

.title {
color: #ffad00;
font-size: 1.66vh;
}

.close {
background: url('./close.png') no-repeat;
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;
}
}
}
}

.mask {
z-index: 1;
width: 100%;


+ 2
- 2
src/views/resources/main-gis/index.html Wyświetl plik

@@ -85,7 +85,7 @@
</div>
<div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
<!--选择地址-->
<!-- <div class="select_address">
<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">
@@ -94,6 +94,6 @@
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</div> -->
</div>
</div>


+ 240
- 2
src/views/resources/main-gis/index.js Wyświetl plik

@@ -3,11 +3,12 @@ import GisUtils from '@/utils/gis.js';
import {
fromLonLat
} from 'ol/proj'
import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/index.js";
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";
let gis = null;
export default {
components: {
@@ -15,8 +16,174 @@ export default {
},
data () {
return {
//三务公开请求参数
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,
},

//零工公开请求参数
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,
},
addrText: [100,],
deptTreeProps: {
checkStrictly: true,
},
addrOptions: [],
//资产信息详情弹窗
showResourceDetail: false,
mapGeoServerUrl: "", // geoserver地址
mapBorder: "", // 地图边界
deptLayer: "", // 坐标点图层
countyBorderLayerName: "", // 区县边界图层名称
townBorderLayerName: "", // 乡镇边界图层名称
villageBorderLayerName: "", // 村边界图层名称
groupBorderLayerName: "", // 组边界图层名称
LegendData: [
{
iconStyle: {
@@ -58,6 +225,7 @@ export default {
created () {
},
mounted () {
treeselect().then((resp) => this.addrOptions = resp.data);
getInfo().then(res => {
this.initMap(res.user.loginDeptId);
// 加载地图
@@ -65,6 +233,69 @@ export default {

},
methods: {
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 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);
this.deptLayer = '';
// 添加坐标点图层
this.addDeptLayer(deptList, 'yellow.png');
gis.getMapContainer().getView().animate({
// 只设置需要的属性即可
center: fromLonLat([dept.lng, dept.lat]), // 中心点
duration: 500, // 缩放持续时间,默认不需要设置
});
},
// 添加村边界
addVillageBorder (deptIds) {
gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
},
// 加载地图
initMap (deptId) {
gis = new GisUtils('map2')
@@ -144,7 +375,6 @@ export default {
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间,默认不需要设置
});

} else {
this.listDialogHidden('detail');
this.openResourceDialog(feature.values_.detail);
@@ -284,6 +514,14 @@ export default {
gis.getVectorLayerByFs(features)
gis.mapSetFit(features)
},
// 获取资产列表
getPermanentList (deptId) {
getPermanentListByDeptId(deptId).then(response => {
if (response.data && response.data.length > 0) {
this.addPermanentLayer(response.data);
}
});
},
getAllList () {
//三务公开
// this.getList(null);


Ładowanie…
Anuluj
Zapisz