From ce24b5c3c111524c4b96979baf3e1df58fdbc013 Mon Sep 17 00:00:00 2001 From: yuzongping <835949940@qq.com> Date: Tue, 17 Jun 2025 14:37:26 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/gis.js | 10 +- src/views/resources/main-gis/close.png | Bin 0 -> 352 bytes src/views/resources/main-gis/index.html | 81 +++++++++++- src/views/resources/main-gis/index.js | 124 +++++++++++++++--- src/views/resources/main-gis/index.scss | 162 ++++++++++++++++++++++++ 5 files changed, 353 insertions(+), 24 deletions(-) create mode 100644 src/views/resources/main-gis/close.png diff --git a/src/utils/gis.js b/src/utils/gis.js index 03a0a09..7dad4e5 100644 --- a/src/utils/gis.js +++ b/src/utils/gis.js @@ -184,7 +184,7 @@ class GisUtils { } - getFeature3 (item) { + getFeature3 (item, fill, stroke) { let feature = new Feature({ geometry: new MultiPolygon(JSON.parse(item.theGeom).coordinates), // name: item.centerName, @@ -192,19 +192,19 @@ class GisUtils { level: 'resource', detail: item }) - feature.setStyle(this.createMultiPolygonFeatureStyle()); + feature.setStyle(this.createMultiPolygonFeatureStyle(fill, stroke)); return feature; } - createMultiPolygonFeatureStyle () { + createMultiPolygonFeatureStyle (fill, stroke) { return new Style({ fill: new Fill({ //矢量图层填充颜色，以及透明度 - color: "rgba(255, 255, 0, 0.3)", + color: fill, }), stroke: new Stroke({ //边界样式 - color: "#ffff00", + color: stroke, width: 2, }) }); diff --git a/src/views/resources/main-gis/close.png b/src/views/resources/main-gis/close.png new file mode 100644 index 0000000000000000000000000000000000000000..0a8337dd9feb7dc35f84978c9c5dd9ea699d907c GIT binary patch literal 352 zcmV-m0iXVfP)Px$8c9S!R47wjP_aq_Q4pNDcM%eE$rWN@3cviZinp0(1XN6FSJ8Yceux1=6WkGhjUc&H>D1 zzz%^+j&Yl{G`%6PS;XHU?JEqYV0K7gxzIbTr|BJljY8-P*v_PHM_vJ#&vmK8T9TZQ zJn}pNRzu*Jz^qBTj=TpD3%F)kYD}5E0;mG$1Bi + +
+
+
{{permanentDetail.name}}详情
+
+
+
+
+
+
+
+
+
+
+
+
+

资产编码

+

{{permanentDetail.code}}

+
+
+

资产名称

+

{{permanentDetail.name}}

+
+
+

资产类别

+

{{permanentDetail.assetType}}

+
+
+

经营属性

+

{{permanentDetail.operationType}}

+
+
+

增加方式

+

{{permanentDetail.addType}}

+
+
+

购建时间

+

{{permanentDetail.buildTime}}

+
+
+

使用情况

+

{{permanentDetail.useType}}

+
+
+

资产状态

+

{{permanentDetail.assetStatus}}

+
+
+

数量/面积

+

{{permanentDetail.quantity}}

+
+
+

计量单位

+

{{permanentDetail.unit}}

+
+
+

原值(元)

+

{{permanentDetail.originalValue}}

+
+
+

折旧方式

+

{{permanentDetail.depreciationType}}

+
+
+

附件

+

+ + + + + + +

+
+
+ +
-
+
diff --git a/src/views/resources/main-gis/index.js b/src/views/resources/main-gis/index.js index cedbe57..915f22f 100644 --- a/src/views/resources/main-gis/index.js +++ b/src/views/resources/main-gis/index.js @@ -7,6 +7,7 @@ import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/in 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"; let gis = null; export default { components: { @@ -14,10 +15,13 @@ export default { }, data () { return { + //资产信息详情弹窗 + showPermanentDetail: false, LegendData: [ { iconStyle: { background: 'rgba(38,252,128,0.45)', + borderColor: '#26FC80', border: '2px solid #26FC80' }, name: '自用' @@ -25,6 +29,7 @@ export default { { iconStyle: { background: 'rgba(232,246,0,0.45)', + borderColor: '#E8F600', border: '2px solid #E8F600' }, name: '闲置' @@ -32,6 +37,7 @@ export default { { iconStyle: { background: 'rgba(16,252,252,0.45)', + borderColor: '#10FCFC', border: '2px solid #10FCFC' }, name: '出租' @@ -39,6 +45,7 @@ export default { { iconStyle: { background: 'rgba(198,0,255,0.45)', + borderColor: '#C600FF', border: '2px solid #C600FF' }, name: '其他' @@ -63,7 +70,6 @@ export default { gis = new GisUtils('map2') gis.addTianDiTuLayer() gis.addAnnotationLayer() - const initZoom = 11; // // 获取资源列表 this.getResourceList(deptId); //初始加载当前用户级别的geojson数据 @@ -138,17 +144,10 @@ export default { rotation: undefined, // 缩放完成view视图旋转弧度 duration: 1000, // 缩放持续时间，默认不需要设置 }); - //根据镇级deptID获取下级部门集合，并创建坐标点 - getUserGeoList(feature.get('deptId')).then((res) => { - if (res.code == 200) { - let content = res.data; - if (this.villagePointLayer) { - gis.getMapContainer().removeLayer(this.villagePointLayer); - this.villagePointLayer = ""; - } - this.villagePointLayer = this.addDeptLayer(content, require('./icon/green.png')); - } - }); + + } else { + this.listDialogHidden('detail'); + this.openPermanentDialog(feature.values_.detail); } } }); @@ -162,6 +161,99 @@ export default { } }); }, + 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; + } + + }, + openPermanentDialog (data) { + console.log(data, 999); + data.fileList = []; + let parmasData = { + tableId: data.id, + tableName: 't_asset_permanent', + 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.showPermanentDetail = true; + this.permanentDetail = data; + console.log(22222, this.permanentDetail); + } + }); + }, // 创建矢量数据源 addDeptLayer (nextDeptSet, locationIcon) { let features = []; @@ -175,7 +267,6 @@ export default { // 获取资源列表 getResourceList (deptId) { getResourceListByDeptId(deptId).then(response => { - console.log(22222, response); if (response.data && response.data.length > 0) { this.addResourceLayer(response.data); } @@ -186,13 +277,12 @@ export default { let features = []; resourceList.forEach(item => { if (item.theGeom != null && item.theGeom !== '') { - let fs = gis.getFeature3(item) + const { useType } = item + let color = this.LegendData[useType - 1 + ''] + let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor) features.push(fs); } - }); - - gis.getVectorLayerByFs(features) gis.mapSetFit(features) }, diff --git a/src/views/resources/main-gis/index.scss b/src/views/resources/main-gis/index.scss index b5867bf..65f6352 100644 --- a/src/views/resources/main-gis/index.scss +++ b/src/views/resources/main-gis/index.scss @@ -79,4 +79,166 @@ } } } +} + +.gl_pop_cash { + background: rgba(10, 25, 47, 0.8); + position: absolute; + border: 1px solid #063a95; + border-left: 0.15vw solid #357dfa; + padding: 0 1vw; + z-index: 11; + + .head_main { + height: 4.62vh; + padding-top: 0.55vh; + display: flex; + align-items: center; + position: relative; + justify-content: space-between; + + .title { + color: #ffad00; + font-size: 1.66vh; + } + + .close { + background: url('./close.png'); + // border: 1px solid red; + background-size: 100% 100%; + width: 1.48vh; + height: 1.48vh; + cursor: pointer; + } + + .xs_main { + height: 0.55vh; + position: absolute; + width: 100%; + bottom: -0.55vh; + display: flex; + align-items: center; + + .block { + width: 2.34vw; + display: flex; + + .point { + width: .55vh; + height: .55vh; + margin-right: 0.36vw; + + &.p1 { + background: rgba(53, 125, 250, 1) + } + + &.p2 { + background: rgba(53, 125, 250, .7) + } + + &.p3 { + background: rgba(53, 125, 250, .4) + } + } + + } + + .xs_x { + height: 1px; + flex: 1; + background: #214284; + } + } + } + + .echarts_main { + .headers { + height: 3.33vh; + font-size: 1.48vh; + color: #0befca; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-right: 0.53vw; + background: rgba(11, 239, 202, .2); + margin-bottom: 0.9vh + } + + .desc_main { + overflow-y: scroll; + padding-right: 0.33vw; + + .analysisTable_list { + margin: 0; + padding: 0; + flex: 1; + display: flex; + flex-direction: column; + + .flex_item { + cursor: pointer; + list-style: none; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #fff; + font-size: 1.29vh; + position: relative; + height: 3.2vh; + + &:nth-child(2n) { + background: rgba(53, 125, 250, .1); + } + } + } + } + } + +} + +.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; + } + } + } } \ No newline at end of file