diff --git a/jwtech-admin-page/src/api/fundControlSituation.js b/jwtech-admin-page/src/api/fundControlSituation.js new file mode 100644 index 00000000..31ec07ac --- /dev/null +++ b/jwtech-admin-page/src/api/fundControlSituation.js @@ -0,0 +1,8 @@ +import request from '@/utils/request' + +export function funds() { + return request({ + url: '/statistics/assert/allocation/funds', + method: 'get' + }) +} diff --git a/jwtech-admin-page/src/views/gateway/fundControlSituation.vue b/jwtech-admin-page/src/views/gateway/fundControlSituation.vue index d1c1b2e8..775bc08a 100644 --- a/jwtech-admin-page/src/views/gateway/fundControlSituation.vue +++ b/jwtech-admin-page/src/views/gateway/fundControlSituation.vue @@ -12,23 +12,23 @@
资金下发
-
+
资金支付
-
+
@@ -40,29 +40,73 @@ import { returnToken } from "@/api/login"; import { setToken, removeToken } from "@/utils/auth"; import * as echarts from "echarts"; + +import { funds } from "@/api/fundControlSituation.js"; export default { data() { return { parmas: { token: null, }, + // 资金下发 + fundsData: { + // 下发 + fundsTotalList: [], + // 使用 + releaseFundsTotalList: [], + deCodeAdcdList: [], + }, + // 资金支付 + actualPaymentData: { + deCodeAdcdList: [], + // 使用 + actualPaymentList: [], + }, }; }, created() { console.log("this.$route", this.$route); this.parmas.token = this.$route.query.token; - returnToken(this.parmas).then((res) => { - // console.log("有效token", res); - let token = res.token; - setToken(token); - }); + // returnToken(this.parmas).then((res) => { + // // console.log("有效token", res); + // let token = res.token; + // setToken(token); + // }); }, mounted() { - this.initEcharts1(); - this.initEcharts2(); + // this.initEcharts1(); + // this.initEcharts2(); + funds().then((res) => { + console.log("资金下发", res); + + let deCodeAdcdList = []; + let fundsTotalList = []; + let releaseFundsTotalList = []; + let actualPaymentList = []; + + res.data.forEach((item) => { + let deCodeAdcd = this.$formatAdcd({ + adcd: item.adcdPrefix + "00", + }).split("-")[1]; + deCodeAdcdList.push(deCodeAdcd); + fundsTotalList.push(item.fundsTotal); + releaseFundsTotalList.push(item.releaseFundsTotal); + actualPaymentList.push(item.actualPayment); + }); + + this.fundsData.deCodeAdcdList = deCodeAdcdList; + this.fundsData.fundsTotalList = fundsTotalList; + this.fundsData.releaseFundsTotalList = releaseFundsTotalList; + + this.actualPaymentData.deCodeAdcdList = deCodeAdcdList; + this.actualPaymentData.actualPaymentList = actualPaymentList; + + this.initEcharts1(this.fundsData); + this.initEcharts2(this.actualPaymentData); + }); }, methods: { - initEcharts1() { + initEcharts1({ deCodeAdcdList, fundsTotalList, releaseFundsTotalList }) { var chartDom = this.$refs.myEcharts1; var myChart = echarts.init(chartDom); var option; @@ -103,27 +147,7 @@ export default { axisTick: { show: false, }, - data: [ - "广州", - "深圳", - "佛山", - "中山", - "惠州", - "东莞", - "阳江", - "韶关", - "河源", - "肇庆", - "珠海", - "江门", - "汕头", - "潮州", - "揭阳", - "湛江", - "茂名", - "清远", - "梅州", - ], + data: deCodeAdcdList, }, ], yAxis: [ @@ -176,13 +200,10 @@ export default { emphasis: { focus: "series", }, - data: [ - 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, - 210, 120, 132, 101, 134, 90, - ], + data: releaseFundsTotalList, }, { - name: "未使用", + name: "总下发", type: "bar", stack: "Ad", barMaxWidth: "25%", @@ -195,17 +216,14 @@ export default { emphasis: { focus: "series", }, - data: [ - 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, - 310, 220, 182, 191, 234, 290, - ], + data: fundsTotalList, }, ], }; option && myChart.setOption(option); }, - initEcharts2() { + initEcharts2({ deCodeAdcdList, actualPaymentList }) { var chartDom = this.$refs.myEcharts2; var myChart = echarts.init(chartDom); var option; @@ -246,27 +264,7 @@ export default { axisTick: { show: false, }, - data: [ - "广州", - "深圳", - "佛山", - "中山", - "惠州", - "东莞", - "阳江", - "韶关", - "河源", - "肇庆", - "珠海", - "江门", - "汕头", - "潮州", - "揭阳", - "湛江", - "茂名", - "清远", - "梅州", - ], + data: deCodeAdcdList, }, ], yAxis: [ @@ -305,7 +303,7 @@ export default { ], series: [ { - name: "2023资金支付", + name: "资金支付", type: "bar", // 重叠 // stack: "Ad", @@ -319,30 +317,27 @@ export default { emphasis: { focus: "series", }, - data: [ - 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, - 210, 120, 132, 101, 134, 90, - ], - }, - { - name: "2022资金支付", - type: "bar", - // stack: "Ad", - barMaxWidth: "25%", - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "rgba(129, 184, 74, 1)" }, - { offset: 1, color: "rgba(129, 184, 74, 0.2)" }, - ]), - }, - emphasis: { - focus: "series", - }, - data: [ - 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, - 310, 220, 182, 191, 234, 290, - ], + data: actualPaymentList, }, + // { + // name: "2022资金支付", + // type: "bar", + // // stack: "Ad", + // barMaxWidth: "25%", + // itemStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { offset: 0, color: "rgba(129, 184, 74, 1)" }, + // { offset: 1, color: "rgba(129, 184, 74, 0.2)" }, + // ]), + // }, + // emphasis: { + // focus: "series", + // }, + // data: [ + // 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, + // 310, 220, 182, 191, 234, 290, + // ], + // }, ], }; @@ -417,6 +412,7 @@ export default { } } .myEchart1 { + margin-top: 15px; flex: 1; } } @@ -441,6 +437,7 @@ export default { } } .myEchart2 { + margin-top: 15px; flex: 1; } } diff --git a/jwtech-admin-page/src/views/gateway/projectDistributionADiagram.vue b/jwtech-admin-page/src/views/gateway/projectDistributionADiagram.vue index 98e34f1d..fb304ec4 100644 --- a/jwtech-admin-page/src/views/gateway/projectDistributionADiagram.vue +++ b/jwtech-admin-page/src/views/gateway/projectDistributionADiagram.vue @@ -32,7 +32,7 @@
-
+
-
+
初步批复 - 8688 + {{ total }}
施工中 - 6588 + {{ acc["noAcc"] || 0 }}
已完工 - 8688 + {{ acc["acc"] || 0 }}
- + +
@@ -76,6 +77,33 @@ import { returnToken } from "@/api/login"; import { setToken, removeToken } from "@/utils/auth"; import { getAreasData } from "@/api/areas/index"; +import { getTypeNum, getForewarningNum } from "@/api/projectStatistics/sort"; + +import "ol/ol.css"; +import { Map, View } from "ol"; +import { defaults as defaultControls } from "ol/control"; +import Tile from "ol/layer/Tile"; +import { fromLonLat } from "ol/proj"; +import OSM from "ol/source/OSM"; +import WMTS from "ol/source/WMTS"; +import WMTSTileGrid from "ol/tilegrid/WMTS.js"; +import VectorSource from "ol/source/Vector.js"; +import Cluster from "ol/source/Cluster.js"; +import { TileSuperMapRest } from "@supermap/iclient-ol/mapping/TileSuperMapRest"; + +import VectorLayer from "ol/layer/Vector.js"; +import { Style, Fill, Stroke, Circle, Text } from "ol/style"; + +import { Draw, Select } from "ol/interaction"; +import { SingleClick } from "ol/events/condition"; + +import Feature from "ol/Feature.js"; +import LineString from "ol/geom/LineString.js"; +import Point from "ol/geom/Point.js"; +import { WMTSCapabilities, GML2 } from "ol/format"; +import { getWidth, getTopLeft } from "ol/extent"; +import GeoJSON from "ol/format/GeoJSON.js"; +import Overlay from "ol/Overlay"; export default { data() { return { @@ -96,21 +124,513 @@ export default { parmas: { token: null, }, + total: 0, + acc: {}, + ms: {}, + zd: {}, + adcd: [ + "1100", + "4400", + "4408", + "4409", + "4414", + "4419", + "4420", + "4451", + "4452", + "4453", + ], + formattedZd: {}, + formattedMs: {}, + projectType: [], + sourceFound: {}, + year: "2024", + rightInfoData: [], + warnInfo: [], + zd_warnTypeOptions: [], + + map: null, + // projection: "EPSG:4326", + pointDrawFlag: "", + lineDrawFlag: "", + sketch: "", // 存储草图 + geometries: [], // 存储绘制的几何图形 + lastPointFeature: null, + lastLineFeature: null, + all_draw_feature: [], + all_point_coords: [], + all_line_coords: [], + pointVectorSource: null, + lineVectorSource: null, + ClusterSource: null, + pointVectorLayer: null, + lineVectorLayer: null, + zoom: 10, + interaction: null, + lonALat: { + lon: null, + lat: null, + }, + viewCenter: [113.36502, 22.9787], + tirggerChartIndex: 1, }; }, created() { console.log("this.$route", this.$route); this.parmas.token = this.$route.query.token; - returnToken(this.parmas).then((res) => { - console.log("有效token", res); - let token = res.token; - setToken(token).thren(() => { - this.getTreeData(); + // returnToken(this.parmas).then((res) => { + // console.log("有效token", res); + // let token = res.token; + // setToken(token).thren(() => { + // this.getTreeData(); + // }); + // }); + getTypeNum({ + pageNum: 1, + pageSize: 10, + ids: null, + data: { + projectName: null, + projectType: null, + total: null, + projectPhase: null, + }, + }).then((res) => { + // this.zd = res.data.zd; + // this.ms = res.data.ms; + console.log("res", res); + + this.acc = res.data.acc; + Object.entries(this.zd).forEach(([key, value]) => { + this.zdTotal = this.zdTotal + Number(value); + let name = this.zdProjectTypeFormat(key); + let obj = { + name: name, + value: Number(value), + }; + this.projectType.push(obj); }); + Object.entries(this.ms).forEach(([key, value]) => { + this.msTotal = this.msTotal + Number(value); + let name = this.msProjectTypeFormat(key); + let obj = { + name: name, + value: Number(value), + }; + this.projectType.push(obj); + }); + this.total = Number(this.acc["acc"]) + Number(this.acc["noAcc"]); }); }, + mounted() { + this.initMap(); + }, methods: { + msProjectTypeFormat(key) { + return this.selectDictLabel(this.ms_projectTypeOptions, key); + }, + zdProjectTypeFormat(key) { + return this.selectDictLabel(this.zd_projectTypeOptions, key); + }, + /** + * 初始化一个 openlayers 地图 + */ + initMap() { + let that = this; + const projection = "EPSG:4326"; + this.map = new Map({ + target: "map", + view: new View({ + center: that.viewCenter, + zoom: 10, + // maxZoom: 12, + minZoom: 5, + projection: projection, + multiWorld: true, + }), + }); + var matrixIds = new Array(18); + var resolutions = []; + for (var z = 0; z < 18; ++z) { + var res = 360 / 512; //0.703125 + resolutions[z] = res / Math.pow(2, z - 1); + matrixIds[z] = z; + } + + // 加载第一层地图轮廓图层 + var osm = new Tile({ + source: new WMTS({ + url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=42a5dfa93ea7a9cbf423c4c1bb9ec16d", + service: "wmts", + version: "1.0.0", + matrixSet: "c", + layer: "img", + format: "Tile", + projection: "EPSG:4326", + tileGrid: new WMTSTileGrid({ + extent: [-180, -90, 180, 90], + origin: [-180, 90], + resolutions: resolutions, + matrixIds: matrixIds, + }), + style: "default", + // wrapX: false + }), + }); + this.map.addLayer(osm); + + // let point = new Point([115.36502, 22.7787]); + // this.map.addLayer(point); + + // 加载其他数据图层 + // 所需展示的所有图层列表 + // 不同类型的地图服务主要区分于type + const layerList = [ + // { + // index: 0, + // code: 'YZT1610609202768', + // name: '广东2020年7_17级矢量图', + // url: 'http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke', + // type: 'YZT-WMTS' + // }, + // { + // index: 1, + // code: "YZT1597746916315", + // name: "广东7_17级界线电子地图", + // url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", + // type: "YZT-WMTS", + // }, + { + index: 2, + code: "YZT1610609681389", + name: "广东2020年7_17级矢量注记", + url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", + type: "YZT-WMTS", + }, + { + index: 3, + code: "0", + text: "", + url: "http://19.25.37.25:8090/iserver/services/map-XingZhengQuHua/rest/maps/行政区划", + type: "rest-map", + }, + // { + // index: 4, + // code: "0", + // text: "", + // url: "http://19.25.35.204:31190/iserver/services/map-GuangDongShengDaoLu/rest/maps/广东省道路", + // type: "rest-map", + // }, + { + index: 5, + code: "0", + text: "", + url: "http://19.25.35.204:31190/iserver/services/map-ShengJiXingZhengQuHuaMian/rest/maps/省级行政区划面", + type: "rest-map", + }, + // { + // index: 6, + // code: '0', + // text: '', + // url: 'http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiKu/rest/maps/水库', + // type: 'rest-map' + // }, + // { + // index: 7, + // code: '0', + // text: '', + // url: 'http://19.25.35.204:31190/iserver/services/map-ShiJiXingZhengQuHuaMian/rest/maps/市级行政区划面', + // type: 'rest-map' + // }, + // { + // index: 8, + // code: '0', + // text: '', + // url: 'http://19.25.35.204:31190/iserver/services/map-XianJiXingZhengQuHuaMian/rest/maps/县级行政区划面', + // type: 'rest-map' + // }, + // { + // index: 9, + // code: '0', + // text: '', + // url: 'http://19.25.35.204:31190/iserver/services/map-ZhenJiXingZhengQuHuaMian/rest/maps/镇级行政区划面', + // type: 'rest-map' + // }, + // { + // index: 10, + // code: '0', + // text: '', + // url: 'http://19.25.35.204:31190/iserver/services/map-CunJiXingZhengQuHuaMian/rest/maps/村级行政区划面', + // type: 'rest-map' + // } + { + index: 11, + code: "0", + text: "", + url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiZha/rest/maps/水闸", + type: "rest-map", + }, + { + index: 12, + code: "0", + text: "", + url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuDiFang/rest/maps/堤防", + type: "rest-map", + }, + ]; + // 绘制图层列表 + for (let i = 0; i < layerList.length; i++) { + loadIndex(layerList[i].type, i); + } + + // 初始化绘制点、线图层 + // 创建一个矢量数据源 + this.pointVectorSource = new VectorSource({ + wrapX: false, + }); + // 创建一个矢量图层并将数据源与之关联 + this.pointVectorLayer = new VectorLayer({ + source: this.pointVectorSource, + style: new Style({ + fill: new Fill({ + color: "rgba(255, 255, 255, 0.2)", // 填充颜色 + }), + stroke: new Stroke({ + // color: "#409eff", // 边框颜色 + width: 4, // 边框宽度 + }), + image: new Circle({ + radius: 8, // 圆点半径 + fill: new Fill({ + color: "blue", // 圆点填充颜色 + }), + }), + }), + }); + this.lineVectorLayer = new VectorLayer({ + source: this.lineVectorSource, + style: new Style({ + fill: new Fill({ + color: "rgba(255, 255, 255, 0.2)", // 填充颜色 + }), + stroke: new Stroke({ + // color: "#409eff", // 边框颜色 + width: 4, // 边框宽度 + }), + image: new Circle({ + radius: 8, // 圆点半径 + fill: new Fill({ + color: "blue", // 圆点填充颜色 + }), + }), + }), + }); + // this.map.addLayer(this.pointVectorLayer); + this.map.addLayer(this.lineVectorLayer); + + // 监听事件 + // 监听点图层的change事件来获取点坐标 + + // this.map.getViewport().addEventListener('click', () => { + // this.pointVectorSource.on('addfeature', (event) => { + // const coordinate = event.feature.getGeometry().getCoordinates(); + // console.log(coordinate); + // }); + // }); + + function loadIndex(type, index) { + var path = ""; + if (type === "YZT-WMTS") { + path = "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities"; + } else if (type === "rest-map") { + } else { + path = "VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS"; + } + let xhr = new XMLHttpRequest(); + let sign = ""; + xhr.open( + "GET", + layerList[index].url.replace( + /{{serviceCode}}/, + layerList[index].code + ) + + sign + + path + ); + xhr.onload = function () { + let data = xhr.response; + if (type === "YZT-WMTS") { + addYztWmtsLayer(data, index); + } else if (type === "YZT-YSFW") { + addYsfwLayer(data, index); + } else { + addRestMapLayer(layerList[index], index); + } + }; + xhr.send(); + } + + // 加载wmts服务 + function addYztWmtsLayer(res, index) { + console.log(layerList[index]); + console.log("加载次数"); + // console.log("输出WMTS服务数据", res); + var format = new WMTSCapabilities(); + if (!res) { + return; + } + var result = format.read(res); + const item = result.Contents.Layer[0]; + const layerParam = { + layerName: item.Abstract || item.Title, + styleName: item.Style[0].Identifier, + tilematrixset: item.TileMatrixSetLink[0].TileMatrixSet, + format: item.Format[0], + }; + var projectionExtent = [-180, -90, 180, 90]; + const size = getWidth(projectionExtent) / 256; + const resolutionsYzt = []; + const matrixIdsTzt = []; + for (var z = 2; z < 19; ++z) { + resolutionsYzt[z] = size / Math.pow(2, z); + matrixIdsTzt.push(z - 2); + } + const source = new WMTS({ + url: + layerList[index].url.replace( + /{{serviceCode}}/, + layerList[index].code + ) + + "?layer=" + + layerParam.layerName, + style: layerParam.styleName, + matrixSet: layerParam.tilematrixset, + format: layerParam.format, + wrapX: true, + tileGrid: new WMTSTileGrid({ + origin: getTopLeft(projectionExtent), + resolutions: resolutionsYzt, + matrixIds: matrixIdsTzt, + }), + }); + let lastIndex = index + 10 * (1 + index); + var layer = new Tile({ + id: lastIndex, + source: source, + }); + console.log(source.urls); + layer.setZIndex(lastIndex); + that.map.addLayer(layer); + } + // ------------------------------------------------------------------------------------- + // 接入粤政图要素服务(wfs) + function addYsfwLayer(res, index) { + console.log("输出WFS服务数据", res); + var result = res; + var format = new GML2(); + var features = format.readFeatures(result); + var style = null; + if (features[0].getGeometry() instanceof ol.geom.Polygon) { + style = new Style({ + stroke: new Stroke({ + color: "#868f98", + width: 1, + }), + fill: new Fill({ + color: "#DEECFB", + }), + }); + } else if (features[0].getGeometry() instanceof ol.geom.Point) { + features.forEach((each) => { + var info = each.values_; + var name = ""; + for (let key in info) { + if (key.indexOf("名称") > -1) { + name = info[key]; + break; + } + } + style = new Style({ + image: new Circle({ + fill: new Fill({ + color: "#ff0721", + }), + radius: 5, + }), + text: new Text({ + text: name, + offsetY: 30, + font: "12px Calibri,sans-serif", + fill: new Fill({ + color: "#fff", + }), + stroke: new Stroke({ + color: "#f00", + width: 3, + }), + }), + }); + each.setStyle(style); + }); + } else if (features[0].getGeometry() instanceof ol.geom.LineString) { + style = new Style({ + stroke: new Stroke({ + color: "#2899fb", + width: 4, + }), + }); + } + var source = new VectorSource({ + features: features, + }); + var wfsObj = { source: source, style: style }; + + var vectorLayer = new VectorLayer({ + id: layerList[index].code, + source: wfsObj.source, + style: wfsObj.style, + }); + that.map.addLayer(vectorLayer); + } + + // 接入rest-map服务 + function addRestMapLayer(params, index) { + var restLayer = new Tile({ + source: new TileSuperMapRest({ + url: params.url, + prjCoordSys: { epsgCode: 4326 }, + projection: "EPSG:4326", + }), + }); + let lastIndex = index + 10 * (1 + index); + restLayer.setZIndex(lastIndex); + that.map.addLayer(restLayer); + } + + // 缩放 + this.map.on("moveend", function () { + that.zoom = that.map.getView().getZoom(); + console.log("zomm", that.zoom); + }); + // 鼠标移入元素样式 + this.map.on("pointermove", (e) => { + let pixel = this.map.getEventPixel(e.originalEvent); + let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => { + return feature; + }); + + if (feature != undefined) { + this.map.getTargetElement().style.cursor = "pointer"; + } else { + this.map.getTargetElement().style.cursor = "auto"; + } + }); + + // this.addGuangdongJson(); + // this.ProjectCoordinatePoint(); + // this.addPopup(); + }, chooseName(key) { this.activeName = key; }, @@ -292,7 +812,7 @@ export default { .info_right { // width: 800px; width: 70%; - // height: 600px; + height: 600px; // border: 1px solid red; & > img { width: 100%; diff --git a/jwtech-admin-page/vue.config.js b/jwtech-admin-page/vue.config.js index 21721cbf..53fbadd2 100644 --- a/jwtech-admin-page/vue.config.js +++ b/jwtech-admin-page/vue.config.js @@ -43,7 +43,7 @@ module.exports = { // target: "http://127.0.0.1:18082", // target: "http://192.168.2.108:18080", // target: "http://192.168.2.103:18082", - target: "http://175.178.86.109:18082", + target: "http://192.168.3.38:18082", // target: "http://192.168.2.108:18080", // target: "http://192.168.1.20:8084", changeOrigin: true,