diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue index be41f0d..e570f17 100644 --- a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue +++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue @@ -127,7 +127,7 @@ barWidth: nowSize(10, 1920), zlevel: 1, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, @@ -147,7 +147,7 @@ barGap: '-100%', data: props.echartData.num, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: 'rgba(77, 149, 217, 0.15)', }, }, diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue index be41f0d..e570f17 100644 --- a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue +++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue @@ -127,7 +127,7 @@ barWidth: nowSize(10, 1920), zlevel: 1, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, @@ -147,7 +147,7 @@ barGap: '-100%', data: props.echartData.num, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: 'rgba(77, 149, 217, 0.15)', }, }, diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue index 7ff988b..a594e83 100644 --- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue +++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue @@ -35,7 +35,23 @@ -
+
+
+
提升目标:
+
防洪标准满足100年一遇
+
+
+
改造措施:
+
防洪体系工程防洪保护圈
+
+
+ +
+
+ 堤防保护圈满足100 —— 遇防洪目标 +
查看报告
+
+
@@ -61,7 +77,31 @@ -
+
+
+
+
调蓄池
+
+
雨水塘
+
+
+
+ {{ item.name }} +
+
{{ item.num1 }}
+
{{ item.num2 }}
+
+
+
+
+
+
+
{{ item.name }}
+
{{ item.value }}
+
+
+
+
@@ -83,7 +123,9 @@
污水收集处理
-
+
+ +
@@ -91,9 +133,11 @@ import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import ChartNlfz from './ChartNlfz.vue'; //内涝防治 import jsdChart from './jsdChart.vue'; //积水点 - +import ChartCsfl from './ChartCsfl.vue'; //城市内涝 import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率 +import ChartWssjcl from './ChartWssjcl.vue'; //污水收集 +import * as echarts from 'echarts'; import bus from '@/bus'; const ryData = ref({}); const ryRefresh = ref(''); @@ -101,6 +145,11 @@ const ryRefresh1 = ref(''); const zssList = ref({}); const ryRefresh2 = ref(''); +const CsList = ref({}); +const ryRefresh3 = ref(''); +const CsWssj = ref([]); +const ryRefresh4 = ref(''); + const categoryList = ref([ { name: '2023', value: 1 }, { name: '2024', value: 2 }, @@ -110,6 +159,11 @@ { name: '合计', value: '899.55万m³' }, { name: '利用率为', value: '23.05%' }, ]); +const YszyList = ref([ + { name: '调蓄容积合计', value: '50568' }, + { name: '雨水利用量合计', value: '343509' }, +]); + const FlList = ref([ { name: '城市防洪', value: 1 }, { name: '内涝防治', value: 2 }, @@ -119,6 +173,19 @@ { name: '雨水资源化利用', value: 1 }, { name: '再生水利用率', value: 2 }, ]); + +const XCFKData = ref([ + { + name: '调蓄容积（m³）', + num1: 5851, + num2: 44717, + }, + { + name: '雨水利用量（m³）', + num1: 31841, + num2: 311668, + }, +]); const Flcname = ref('城市防洪'); const activedname = ref('2023'); const Ywcname = ref('再生水利用率'); @@ -133,6 +200,18 @@ Ywcname.value = val.name; } +// 城市防洪 +function getDataCs() { + let obj = { + listName: ['延河', '南川河', '西川河', '杜甫川河', '王瑶水库'], + diduan: ['39', '29', '40', '40', '50'], + zhengzhi: ['25', '21', '28', '28', '31'], + }; + CsList.value = obj; + console.log(CsList.value, ' CsList.value'); + ryRefresh3.value = Math.random(); +} + // 内涝防治 function getData() { let obj = { @@ -153,7 +232,7 @@ async function getNlfz() { let obj = [ { name: '源头减排', value: 10 }, - { name: '其他', value: 32 }, + { name: '其他', value: 45 }, { name: '过程控制', value: 20 }, { name: '末端治理', value: 38 }, ]; @@ -178,6 +257,27 @@ ryRefresh2.value = Math.random(); } +const initEcharts3 = () => { + let obj = [ + { value: 7, name: '桥沟污水厂', percent: '52%' }, + { value: 5, name: '新区污水厂', percent: '11%' }, + { value: 1.5, name: '姚店污水厂', percent: '17%' }, + ]; + CsWssj.value = obj; + ryRefresh4.value = Math.random(); +}; + +// 动态计算盒子的宽度 +const getWidth = (item, num) => { + let widthNum = 0; + if (num == 1) { + widthNum = (item.num1 / (item.num1 + item.num2)) * 100; + } else { + widthNum = (item.num2 / (item.num1 + item.num2)) * 100; + } + return `width:${widthNum}%`; +}; + function showSewageFectory() { newfiberMapbox.map.easeTo({ center: [109.528, 36.626], @@ -188,9 +288,11 @@ } onMounted(() => { + getDataCs(); getData(); getNlfz(); geZssLyl(); + initEcharts3(); }); onBeforeUnmount(() => { bus.emit('clearAllLayer'); @@ -233,6 +335,7 @@ width: 430px; height: calc(100% - 40px); margin: 5px auto; + .NlfzBox { width: 430px; height: 60%; @@ -286,29 +389,80 @@ width: 420px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/csfh.png') no-repeat; - background-size: 100% 100%; + + .info { + height: 34px; + background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%); + border-radius: 3px; + border: 1px solid #1cf5fc; + padding: 0 18px; + align-items: center; + .weight { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #09ffbc; + } + .weightO { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #e8b65f; + } + .text { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #d3f6ff; + margin-left: 30px; + } + } + .infotwo { + margin-top: 5px; + } + .CsfhCls { + height: calc(100% - 120px); + margin-top: 5px; + } + .BeCautious { + margin-top: 5px; + height: 37px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #5fbeff; + .ViewTReport { + width: 90px; + height: 24px; + background: #003756; + border-radius: 12px; + text-align: center; + border: 1px solid #0091ffff; + line-height: 22px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + cursor: pointer; + } + } } .nlfz { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat; - // background-size: 100% 100%; } .jsdxc { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat; - // background-size: 100% 100%; } } .YwBox { width: 430px; height: 40%; margin: 5px auto; - // background: yellow; + .topYwBox { font-family: Source Han Sans CN; font-weight: bold; @@ -355,25 +509,126 @@ } } .utilize { - width: 420px; + width: 430px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/yszl.png') no-repeat; - background-size: 100% 100%; + + .rainChartInfo { + margin-top: 5px; + height: 20px; + width: 100%; + color: #c6c6c6; + justify-content: center; + + .square { + width: 10px; + height: 10px; + display: inline-block; + background-color: #00ffbeff; + margin-left: 50px; + margin-top: 4px; + } + .squareA { + width: 10px; + height: 10px; + background-color: #00a2ffff; + margin-left: 30px; + margin-top: 4px; + } + } + .FK_bodyBox { + height: calc(100% - 60px); + overflow: auto; + box-sizing: border-box; + // background: rgb(224, 224, 210); + .FK_bodyBox_list { + height: 40%; + margin-top: 8px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + // background: blue; + .FK_bodyBox_list_label { + display: block; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + } + .FK_BigBox { + margin-top: 2px; + display: block; + height: 20px; + margin-top: 5px; + .FK_CenBox1 { + display: inline-block; + height: 20px; + background: linear-gradient(-90deg, #20d8aaff 0%, #0883a0ff 100%); + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + .FK_CenBox2 { + display: inline-block; + height: 20px; + background: linear-gradient(90deg, #01a1ffff 0%, #2176ffff 100%); + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + } + } + } + .BottomLook { + margin: 5px auto; + width: 430px; + height: 35px; + + .ConstrucBot { + width: 205px; + height: 32px; + background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat; + background-size: 100% 100%; + .ConstruBox { + position: relative; + left: 30px; + width: 160px; + .left { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + } + .right { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 16px; + color: #ffed98; + } + } + } + } } .zsslyl { width: 420px; height: calc(100% - 80px); margin: 5px auto; - // background: red; - // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat; - // background-size: 100% 100%; } .BottomLook { margin: 5px auto; width: 430px; height: 35px; - // background: blue; + .ConstrucBot { width: 205px; height: 32px; @@ -437,8 +692,7 @@ margin: 5px auto; width: 420px; height: calc(100% - 55px); - background: url('@/assets/images/Sponge_screen/wssjcl.png') no-repeat; - background-size: 100% 100%; + // background: yellow; } } .ListBoxHeader { diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue index be41f0d..e570f17 100644 --- a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue +++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue @@ -127,7 +127,7 @@ barWidth: nowSize(10, 1920), zlevel: 1, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, @@ -147,7 +147,7 @@ barGap: '-100%', data: props.echartData.num, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: 'rgba(77, 149, 217, 0.15)', }, }, diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue index 7ff988b..a594e83 100644 --- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue +++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue @@ -35,7 +35,23 @@ -
+
+
+
提升目标:
+
防洪标准满足100年一遇
+
+
+
改造措施:
+
防洪体系工程防洪保护圈
+
+
+ +
+
+ 堤防保护圈满足100 —— 遇防洪目标 +
查看报告
+
+
@@ -61,7 +77,31 @@ -
+
+
+
+
调蓄池
+
+
雨水塘
+
+
+
+ {{ item.name }} +
+
{{ item.num1 }}
+
{{ item.num2 }}
+
+
+
+
+
+
+
{{ item.name }}
+
{{ item.value }}
+
+
+
+
@@ -83,7 +123,9 @@
污水收集处理
-
+
+ +
@@ -91,9 +133,11 @@ import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import ChartNlfz from './ChartNlfz.vue'; //内涝防治 import jsdChart from './jsdChart.vue'; //积水点 - +import ChartCsfl from './ChartCsfl.vue'; //城市内涝 import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率 +import ChartWssjcl from './ChartWssjcl.vue'; //污水收集 +import * as echarts from 'echarts'; import bus from '@/bus'; const ryData = ref({}); const ryRefresh = ref(''); @@ -101,6 +145,11 @@ const ryRefresh1 = ref(''); const zssList = ref({}); const ryRefresh2 = ref(''); +const CsList = ref({}); +const ryRefresh3 = ref(''); +const CsWssj = ref([]); +const ryRefresh4 = ref(''); + const categoryList = ref([ { name: '2023', value: 1 }, { name: '2024', value: 2 }, @@ -110,6 +159,11 @@ { name: '合计', value: '899.55万m³' }, { name: '利用率为', value: '23.05%' }, ]); +const YszyList = ref([ + { name: '调蓄容积合计', value: '50568' }, + { name: '雨水利用量合计', value: '343509' }, +]); + const FlList = ref([ { name: '城市防洪', value: 1 }, { name: '内涝防治', value: 2 }, @@ -119,6 +173,19 @@ { name: '雨水资源化利用', value: 1 }, { name: '再生水利用率', value: 2 }, ]); + +const XCFKData = ref([ + { + name: '调蓄容积（m³）', + num1: 5851, + num2: 44717, + }, + { + name: '雨水利用量（m³）', + num1: 31841, + num2: 311668, + }, +]); const Flcname = ref('城市防洪'); const activedname = ref('2023'); const Ywcname = ref('再生水利用率'); @@ -133,6 +200,18 @@ Ywcname.value = val.name; } +// 城市防洪 +function getDataCs() { + let obj = { + listName: ['延河', '南川河', '西川河', '杜甫川河', '王瑶水库'], + diduan: ['39', '29', '40', '40', '50'], + zhengzhi: ['25', '21', '28', '28', '31'], + }; + CsList.value = obj; + console.log(CsList.value, ' CsList.value'); + ryRefresh3.value = Math.random(); +} + // 内涝防治 function getData() { let obj = { @@ -153,7 +232,7 @@ async function getNlfz() { let obj = [ { name: '源头减排', value: 10 }, - { name: '其他', value: 32 }, + { name: '其他', value: 45 }, { name: '过程控制', value: 20 }, { name: '末端治理', value: 38 }, ]; @@ -178,6 +257,27 @@ ryRefresh2.value = Math.random(); } +const initEcharts3 = () => { + let obj = [ + { value: 7, name: '桥沟污水厂', percent: '52%' }, + { value: 5, name: '新区污水厂', percent: '11%' }, + { value: 1.5, name: '姚店污水厂', percent: '17%' }, + ]; + CsWssj.value = obj; + ryRefresh4.value = Math.random(); +}; + +// 动态计算盒子的宽度 +const getWidth = (item, num) => { + let widthNum = 0; + if (num == 1) { + widthNum = (item.num1 / (item.num1 + item.num2)) * 100; + } else { + widthNum = (item.num2 / (item.num1 + item.num2)) * 100; + } + return `width:${widthNum}%`; +}; + function showSewageFectory() { newfiberMapbox.map.easeTo({ center: [109.528, 36.626], @@ -188,9 +288,11 @@ } onMounted(() => { + getDataCs(); getData(); getNlfz(); geZssLyl(); + initEcharts3(); }); onBeforeUnmount(() => { bus.emit('clearAllLayer'); @@ -233,6 +335,7 @@ width: 430px; height: calc(100% - 40px); margin: 5px auto; + .NlfzBox { width: 430px; height: 60%; @@ -286,29 +389,80 @@ width: 420px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/csfh.png') no-repeat; - background-size: 100% 100%; + + .info { + height: 34px; + background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%); + border-radius: 3px; + border: 1px solid #1cf5fc; + padding: 0 18px; + align-items: center; + .weight { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #09ffbc; + } + .weightO { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #e8b65f; + } + .text { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #d3f6ff; + margin-left: 30px; + } + } + .infotwo { + margin-top: 5px; + } + .CsfhCls { + height: calc(100% - 120px); + margin-top: 5px; + } + .BeCautious { + margin-top: 5px; + height: 37px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #5fbeff; + .ViewTReport { + width: 90px; + height: 24px; + background: #003756; + border-radius: 12px; + text-align: center; + border: 1px solid #0091ffff; + line-height: 22px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + cursor: pointer; + } + } } .nlfz { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat; - // background-size: 100% 100%; } .jsdxc { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat; - // background-size: 100% 100%; } } .YwBox { width: 430px; height: 40%; margin: 5px auto; - // background: yellow; + .topYwBox { font-family: Source Han Sans CN; font-weight: bold; @@ -355,25 +509,126 @@ } } .utilize { - width: 420px; + width: 430px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/yszl.png') no-repeat; - background-size: 100% 100%; + + .rainChartInfo { + margin-top: 5px; + height: 20px; + width: 100%; + color: #c6c6c6; + justify-content: center; + + .square { + width: 10px; + height: 10px; + display: inline-block; + background-color: #00ffbeff; + margin-left: 50px; + margin-top: 4px; + } + .squareA { + width: 10px; + height: 10px; + background-color: #00a2ffff; + margin-left: 30px; + margin-top: 4px; + } + } + .FK_bodyBox { + height: calc(100% - 60px); + overflow: auto; + box-sizing: border-box; + // background: rgb(224, 224, 210); + .FK_bodyBox_list { + height: 40%; + margin-top: 8px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + // background: blue; + .FK_bodyBox_list_label { + display: block; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + } + .FK_BigBox { + margin-top: 2px; + display: block; + height: 20px; + margin-top: 5px; + .FK_CenBox1 { + display: inline-block; + height: 20px; + background: linear-gradient(-90deg, #20d8aaff 0%, #0883a0ff 100%); + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + .FK_CenBox2 { + display: inline-block; + height: 20px; + background: linear-gradient(90deg, #01a1ffff 0%, #2176ffff 100%); + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + } + } + } + .BottomLook { + margin: 5px auto; + width: 430px; + height: 35px; + + .ConstrucBot { + width: 205px; + height: 32px; + background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat; + background-size: 100% 100%; + .ConstruBox { + position: relative; + left: 30px; + width: 160px; + .left { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + } + .right { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 16px; + color: #ffed98; + } + } + } + } } .zsslyl { width: 420px; height: calc(100% - 80px); margin: 5px auto; - // background: red; - // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat; - // background-size: 100% 100%; } .BottomLook { margin: 5px auto; width: 430px; height: 35px; - // background: blue; + .ConstrucBot { width: 205px; height: 32px; @@ -437,8 +692,7 @@ margin: 5px auto; width: 420px; height: calc(100% - 55px); - background: url('@/assets/images/Sponge_screen/wssjcl.png') no-repeat; - background-size: 100% 100%; + // background: yellow; } } .ListBoxHeader { diff --git a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue index 028c9b5..b0eca2b 100644 --- a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue +++ b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue @@ -36,7 +36,7 @@ } } //初始化 -let colorLine = ['#00FCFF', '#FFF600', '#0072FF', '#cd780b', '#08EE8A', '#F5FF52', '#5377FF']; +let colorLine = ['#4458caFF', '#05d6e2FF', '#256be6FF', '#fcc43eFF']; function intChart() { myChart.value = proxy.echarts.init(document.getElementById(id)); myChart.value.clear(); diff --git a/index.html b/index.html index 1b2738b..c24651b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue index be41f0d..e570f17 100644 --- a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue +++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue @@ -127,7 +127,7 @@ barWidth: nowSize(10, 1920), zlevel: 1, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, @@ -147,7 +147,7 @@ barGap: '-100%', data: props.echartData.num, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: 'rgba(77, 149, 217, 0.15)', }, }, diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue index 7ff988b..a594e83 100644 --- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue +++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue @@ -35,7 +35,23 @@ -
+
+
+
提升目标:
+
防洪标准满足100年一遇
+
+
+
改造措施:
+
防洪体系工程防洪保护圈
+
+
+ +
+
+ 堤防保护圈满足100 —— 遇防洪目标 +
查看报告
+
+
@@ -61,7 +77,31 @@ -
+
+
+
+
调蓄池
+
+
雨水塘
+
+
+
+ {{ item.name }} +
+
{{ item.num1 }}
+
{{ item.num2 }}
+
+
+
+
+
+
+
{{ item.name }}
+
{{ item.value }}
+
+
+
+
@@ -83,7 +123,9 @@
污水收集处理
-
+
+ +
@@ -91,9 +133,11 @@ import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import ChartNlfz from './ChartNlfz.vue'; //内涝防治 import jsdChart from './jsdChart.vue'; //积水点 - +import ChartCsfl from './ChartCsfl.vue'; //城市内涝 import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率 +import ChartWssjcl from './ChartWssjcl.vue'; //污水收集 +import * as echarts from 'echarts'; import bus from '@/bus'; const ryData = ref({}); const ryRefresh = ref(''); @@ -101,6 +145,11 @@ const ryRefresh1 = ref(''); const zssList = ref({}); const ryRefresh2 = ref(''); +const CsList = ref({}); +const ryRefresh3 = ref(''); +const CsWssj = ref([]); +const ryRefresh4 = ref(''); + const categoryList = ref([ { name: '2023', value: 1 }, { name: '2024', value: 2 }, @@ -110,6 +159,11 @@ { name: '合计', value: '899.55万m³' }, { name: '利用率为', value: '23.05%' }, ]); +const YszyList = ref([ + { name: '调蓄容积合计', value: '50568' }, + { name: '雨水利用量合计', value: '343509' }, +]); + const FlList = ref([ { name: '城市防洪', value: 1 }, { name: '内涝防治', value: 2 }, @@ -119,6 +173,19 @@ { name: '雨水资源化利用', value: 1 }, { name: '再生水利用率', value: 2 }, ]); + +const XCFKData = ref([ + { + name: '调蓄容积（m³）', + num1: 5851, + num2: 44717, + }, + { + name: '雨水利用量（m³）', + num1: 31841, + num2: 311668, + }, +]); const Flcname = ref('城市防洪'); const activedname = ref('2023'); const Ywcname = ref('再生水利用率'); @@ -133,6 +200,18 @@ Ywcname.value = val.name; } +// 城市防洪 +function getDataCs() { + let obj = { + listName: ['延河', '南川河', '西川河', '杜甫川河', '王瑶水库'], + diduan: ['39', '29', '40', '40', '50'], + zhengzhi: ['25', '21', '28', '28', '31'], + }; + CsList.value = obj; + console.log(CsList.value, ' CsList.value'); + ryRefresh3.value = Math.random(); +} + // 内涝防治 function getData() { let obj = { @@ -153,7 +232,7 @@ async function getNlfz() { let obj = [ { name: '源头减排', value: 10 }, - { name: '其他', value: 32 }, + { name: '其他', value: 45 }, { name: '过程控制', value: 20 }, { name: '末端治理', value: 38 }, ]; @@ -178,6 +257,27 @@ ryRefresh2.value = Math.random(); } +const initEcharts3 = () => { + let obj = [ + { value: 7, name: '桥沟污水厂', percent: '52%' }, + { value: 5, name: '新区污水厂', percent: '11%' }, + { value: 1.5, name: '姚店污水厂', percent: '17%' }, + ]; + CsWssj.value = obj; + ryRefresh4.value = Math.random(); +}; + +// 动态计算盒子的宽度 +const getWidth = (item, num) => { + let widthNum = 0; + if (num == 1) { + widthNum = (item.num1 / (item.num1 + item.num2)) * 100; + } else { + widthNum = (item.num2 / (item.num1 + item.num2)) * 100; + } + return `width:${widthNum}%`; +}; + function showSewageFectory() { newfiberMapbox.map.easeTo({ center: [109.528, 36.626], @@ -188,9 +288,11 @@ } onMounted(() => { + getDataCs(); getData(); getNlfz(); geZssLyl(); + initEcharts3(); }); onBeforeUnmount(() => { bus.emit('clearAllLayer'); @@ -233,6 +335,7 @@ width: 430px; height: calc(100% - 40px); margin: 5px auto; + .NlfzBox { width: 430px; height: 60%; @@ -286,29 +389,80 @@ width: 420px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/csfh.png') no-repeat; - background-size: 100% 100%; + + .info { + height: 34px; + background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%); + border-radius: 3px; + border: 1px solid #1cf5fc; + padding: 0 18px; + align-items: center; + .weight { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #09ffbc; + } + .weightO { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #e8b65f; + } + .text { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #d3f6ff; + margin-left: 30px; + } + } + .infotwo { + margin-top: 5px; + } + .CsfhCls { + height: calc(100% - 120px); + margin-top: 5px; + } + .BeCautious { + margin-top: 5px; + height: 37px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #5fbeff; + .ViewTReport { + width: 90px; + height: 24px; + background: #003756; + border-radius: 12px; + text-align: center; + border: 1px solid #0091ffff; + line-height: 22px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + cursor: pointer; + } + } } .nlfz { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat; - // background-size: 100% 100%; } .jsdxc { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat; - // background-size: 100% 100%; } } .YwBox { width: 430px; height: 40%; margin: 5px auto; - // background: yellow; + .topYwBox { font-family: Source Han Sans CN; font-weight: bold; @@ -355,25 +509,126 @@ } } .utilize { - width: 420px; + width: 430px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/yszl.png') no-repeat; - background-size: 100% 100%; + + .rainChartInfo { + margin-top: 5px; + height: 20px; + width: 100%; + color: #c6c6c6; + justify-content: center; + + .square { + width: 10px; + height: 10px; + display: inline-block; + background-color: #00ffbeff; + margin-left: 50px; + margin-top: 4px; + } + .squareA { + width: 10px; + height: 10px; + background-color: #00a2ffff; + margin-left: 30px; + margin-top: 4px; + } + } + .FK_bodyBox { + height: calc(100% - 60px); + overflow: auto; + box-sizing: border-box; + // background: rgb(224, 224, 210); + .FK_bodyBox_list { + height: 40%; + margin-top: 8px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + // background: blue; + .FK_bodyBox_list_label { + display: block; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + } + .FK_BigBox { + margin-top: 2px; + display: block; + height: 20px; + margin-top: 5px; + .FK_CenBox1 { + display: inline-block; + height: 20px; + background: linear-gradient(-90deg, #20d8aaff 0%, #0883a0ff 100%); + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + .FK_CenBox2 { + display: inline-block; + height: 20px; + background: linear-gradient(90deg, #01a1ffff 0%, #2176ffff 100%); + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + } + } + } + .BottomLook { + margin: 5px auto; + width: 430px; + height: 35px; + + .ConstrucBot { + width: 205px; + height: 32px; + background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat; + background-size: 100% 100%; + .ConstruBox { + position: relative; + left: 30px; + width: 160px; + .left { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + } + .right { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 16px; + color: #ffed98; + } + } + } + } } .zsslyl { width: 420px; height: calc(100% - 80px); margin: 5px auto; - // background: red; - // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat; - // background-size: 100% 100%; } .BottomLook { margin: 5px auto; width: 430px; height: 35px; - // background: blue; + .ConstrucBot { width: 205px; height: 32px; @@ -437,8 +692,7 @@ margin: 5px auto; width: 420px; height: calc(100% - 55px); - background: url('@/assets/images/Sponge_screen/wssjcl.png') no-repeat; - background-size: 100% 100%; + // background: yellow; } } .ListBoxHeader { diff --git a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue index 028c9b5..b0eca2b 100644 --- a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue +++ b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue @@ -36,7 +36,7 @@ } } //初始化 -let colorLine = ['#00FCFF', '#FFF600', '#0072FF', '#cd780b', '#08EE8A', '#F5FF52', '#5377FF']; +let colorLine = ['#4458caFF', '#05d6e2FF', '#256be6FF', '#fcc43eFF']; function intChart() { myChart.value = proxy.echarts.init(document.getElementById(id)); myChart.value.clear(); diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue index 33d24f8..0e83a73 100644 --- a/src/views/oneMap/components/ZHHM_JSPG.vue +++ b/src/views/oneMap/components/ZHHM_JSPG.vue @@ -20,9 +20,10 @@ -
-
资金绩效
-
+
+ +
@@ -30,8 +31,11 @@ + @@ -246,4 +247,4 @@ } - + \ No newline at end of file diff --git a/public/static/libs/mapbox/RainsLayer.js b/public/static/libs/mapbox/RainsLayer.js new file mode 100644 index 0000000..a3c9f2f --- /dev/null +++ b/public/static/libs/mapbox/RainsLayer.js @@ -0,0 +1,161 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? (module.exports = factory()) + : typeof define === 'function' && define.amd + ? define(factory) + : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self), (global.mapboxgl1.RainsLayer = factory())); +})(window, function () { + async function urlToFile(url, fileName) { + // 使用 fetch 获取图片并转换为 Blob + const response = await fetch(url); + const blob = await response.blob(); + // 将 Blob 转换为 File 对象 + const file = new File([blob], fileName, { type: blob.type }); + return file; + } + const createCanvas = id => { + let canvas = document.createElement('canvas'); + canvas.id = 'canvas' + id; + canvas.style.display = 'none'; + document.body.append(canvas); + return canvas; + }; + const createPlot = async (e, canvas, scaleKey, plot) => { + var tif = await GeoTIFF.fromArrayBuffer(e.target.result); + var tifImg = await tif.getImage(); + var readRasters = await tifImg.readRasters(); + plot == null && + (plot = new plotty.plot({ + canvas, + data: readRasters[0], + width: tifImg.getWidth(), + height: tifImg.getHeight(), + domain: [0, 256], + colorScale: scaleKey, + })); + plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight()); + plot.render(); + }; + const createCanvasLayer = (canvasId, i, bbox, map) => { + bbox = [ + [bbox[0], bbox[3]], + [bbox[2], bbox[3]], + [bbox[2], bbox[1]], + [bbox[0], bbox[1]], + ]; + if (map.getLayer('canvas-layer' + i)) { + map.removeLayer('canvas-layer' + i); + map.removeSource('canvas-source' + i); + } + map.addSource('canvas-source' + i, { type: 'canvas', canvas: canvasId, coordinates: bbox, animate: true }); + map.addLayer({ id: 'canvas-layer' + i, type: 'raster', source: 'canvas-source' + i }); + map.moveLayer('canvas-layer' + i); + }; + const plotInit = (name, colorScale = colorScale) => { + const minVal = colorScale[0].value; + const maxVal = colorScale[colorScale.length - 1].value; + let color = colorScale.filter(i => Number(i.value) / maxVal <= 1); + if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color }); + plotty.addColorScale( + name, + color.map(i => i.color), + color.map(i => (i.value / maxVal).toFixed(5)) + ); + }; + + const setRainImage = (file, canvas, scaleKey, plot) => { + var reader = new FileReader(); + reader.onload = e => createPlot(e, canvas, scaleKey, plot); + reader.readAsArrayBuffer(file); + }; + + return class RainsLayer { + map = null; + index = null; + bbox = null; + callback = null; + images = []; + imagesFiles = []; + canvas = null; + plot = null; + scales = { + 1: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 3: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 12: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + 24: [ + { value: '0', color: 'rgba(7, 213, 118, 0)' }, + { value: '0.2', color: 'rgba(7, 213, 118, 1)' }, + { value: '5', color: 'rgba(38, 129, 240,1)' }, + { value: '25', color: 'rgba(255, 26, 26, 1)' }, + { value: '250', color: 'rgba(255, 26, 26, 1)' }, + ], + }; + constructor(bbox, images, callback) { + this.callback = callback; + this.bbox = bbox; + this.images = images; + this.init(); + } + + async init() { + if (this.bbox.length && this.images.length) { + Object.keys(this.scales).forEach(key => plotInit(key, this.scales[key])); + this.canvas = createCanvas(0); + this.imagesFiles = await Promise.all(this.images.map(url => urlToFile(url, _.last(_.split(url, '/'))))); + this.callback && this.callback(this); + } + } + + addTo(map) { + this.destroy(); + this.map = map; + createCanvasLayer(this.canvas.id, 0, this.bbox, map); + return this; + } + + next(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index >= this.images.length) this.index = 0; + setRainImage(this.imagesFiles[this.index], this.canvas, scaleKey, this.plot); + } + + prev(scaleKey = 1) { + if (!this.index) this.index = 0; + this.index++; + if (this.index <= 0) this.index = this.imagesFiles.length; + setRainImage(this.imagesFiles[this.index - 1], this.canvas, scaleKey, this.plot); + } + + hide(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'none'); + } + + show(newfiberMap) { + newfiberMap.map.setLayoutProperty('canvas-layer0', 'visibility', 'visible'); + } + + destroy() { + if (this.map && this.map.getLayer('canvas-layer0')) this.map.removeLayer('canvas-layer0'); + if (this.map && this.map.getSource('canvas-source0')) this.map.removeSource('canvas-source0'); + } + }; +}); diff --git a/public/static/libs/mapbox/style/floodOneMap.json b/public/static/libs/mapbox/style/floodOneMap.json index b0efcab..a46b332 100644 --- a/public/static/libs/mapbox/style/floodOneMap.json +++ b/public/static/libs/mapbox/style/floodOneMap.json @@ -528,7 +528,7 @@ "minzoom": 0, "maxzoom": 24, "mType": "geojsonMvt", - "columns": "id,color,pipediameter,deviceName,address,st_asText(geometrys) as geometry" + "columns": "id,color,level,address,st_asText(geometrys) as geometry" }, { "id": "pipeline_point", diff --git a/src/views/oneMap/ConstructionEvaluation/CentralSection.vue b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue new file mode 100644 index 0000000..18d0200 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/CentralSection.vue @@ -0,0 +1,134 @@ + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue new file mode 100644 index 0000000..12046fa --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartCsfl.vue @@ -0,0 +1,203 @@ + + + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue new file mode 100644 index 0000000..3a774f4 --- /dev/null +++ b/src/views/oneMap/ConstructionEvaluation/ChartWssjcl.vue @@ -0,0 +1,137 @@ + + diff --git a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue index be41f0d..e570f17 100644 --- a/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue +++ b/src/views/oneMap/ConstructionEvaluation/ChartZsslyl.vue @@ -127,7 +127,7 @@ barWidth: nowSize(10, 1920), zlevel: 1, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, @@ -147,7 +147,7 @@ barGap: '-100%', data: props.echartData.num, itemStyle: { - barBorderRadius: nowSize(5, 1920), + // barBorderRadius: nowSize(5, 1920), color: 'rgba(77, 149, 217, 0.15)', }, }, diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue index 7ff988b..a594e83 100644 --- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue +++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue @@ -35,7 +35,23 @@ -
+
+
+
提升目标:
+
防洪标准满足100年一遇
+
+
+
改造措施:
+
防洪体系工程防洪保护圈
+
+
+ +
+
+ 堤防保护圈满足100 —— 遇防洪目标 +
查看报告
+
+
@@ -61,7 +77,31 @@ -
+
+
+
+
调蓄池
+
+
雨水塘
+
+
+
+ {{ item.name }} +
+
{{ item.num1 }}
+
{{ item.num2 }}
+
+
+
+
+
+
+
{{ item.name }}
+
{{ item.value }}
+
+
+
+
@@ -83,7 +123,9 @@
污水收集处理
-
+
+ +
@@ -91,9 +133,11 @@ import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import ChartNlfz from './ChartNlfz.vue'; //内涝防治 import jsdChart from './jsdChart.vue'; //积水点 - +import ChartCsfl from './ChartCsfl.vue'; //城市内涝 import ChartZsslyl from './ChartZsslyl.vue'; //再生水利用率 +import ChartWssjcl from './ChartWssjcl.vue'; //污水收集 +import * as echarts from 'echarts'; import bus from '@/bus'; const ryData = ref({}); const ryRefresh = ref(''); @@ -101,6 +145,11 @@ const ryRefresh1 = ref(''); const zssList = ref({}); const ryRefresh2 = ref(''); +const CsList = ref({}); +const ryRefresh3 = ref(''); +const CsWssj = ref([]); +const ryRefresh4 = ref(''); + const categoryList = ref([ { name: '2023', value: 1 }, { name: '2024', value: 2 }, @@ -110,6 +159,11 @@ { name: '合计', value: '899.55万m³' }, { name: '利用率为', value: '23.05%' }, ]); +const YszyList = ref([ + { name: '调蓄容积合计', value: '50568' }, + { name: '雨水利用量合计', value: '343509' }, +]); + const FlList = ref([ { name: '城市防洪', value: 1 }, { name: '内涝防治', value: 2 }, @@ -119,6 +173,19 @@ { name: '雨水资源化利用', value: 1 }, { name: '再生水利用率', value: 2 }, ]); + +const XCFKData = ref([ + { + name: '调蓄容积（m³）', + num1: 5851, + num2: 44717, + }, + { + name: '雨水利用量（m³）', + num1: 31841, + num2: 311668, + }, +]); const Flcname = ref('城市防洪'); const activedname = ref('2023'); const Ywcname = ref('再生水利用率'); @@ -133,6 +200,18 @@ Ywcname.value = val.name; } +// 城市防洪 +function getDataCs() { + let obj = { + listName: ['延河', '南川河', '西川河', '杜甫川河', '王瑶水库'], + diduan: ['39', '29', '40', '40', '50'], + zhengzhi: ['25', '21', '28', '28', '31'], + }; + CsList.value = obj; + console.log(CsList.value, ' CsList.value'); + ryRefresh3.value = Math.random(); +} + // 内涝防治 function getData() { let obj = { @@ -153,7 +232,7 @@ async function getNlfz() { let obj = [ { name: '源头减排', value: 10 }, - { name: '其他', value: 32 }, + { name: '其他', value: 45 }, { name: '过程控制', value: 20 }, { name: '末端治理', value: 38 }, ]; @@ -178,6 +257,27 @@ ryRefresh2.value = Math.random(); } +const initEcharts3 = () => { + let obj = [ + { value: 7, name: '桥沟污水厂', percent: '52%' }, + { value: 5, name: '新区污水厂', percent: '11%' }, + { value: 1.5, name: '姚店污水厂', percent: '17%' }, + ]; + CsWssj.value = obj; + ryRefresh4.value = Math.random(); +}; + +// 动态计算盒子的宽度 +const getWidth = (item, num) => { + let widthNum = 0; + if (num == 1) { + widthNum = (item.num1 / (item.num1 + item.num2)) * 100; + } else { + widthNum = (item.num2 / (item.num1 + item.num2)) * 100; + } + return `width:${widthNum}%`; +}; + function showSewageFectory() { newfiberMapbox.map.easeTo({ center: [109.528, 36.626], @@ -188,9 +288,11 @@ } onMounted(() => { + getDataCs(); getData(); getNlfz(); geZssLyl(); + initEcharts3(); }); onBeforeUnmount(() => { bus.emit('clearAllLayer'); @@ -233,6 +335,7 @@ width: 430px; height: calc(100% - 40px); margin: 5px auto; + .NlfzBox { width: 430px; height: 60%; @@ -286,29 +389,80 @@ width: 420px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/csfh.png') no-repeat; - background-size: 100% 100%; + + .info { + height: 34px; + background: linear-gradient(0deg, #102755 0%, #009dab 0%, #034d66 100%); + border-radius: 3px; + border: 1px solid #1cf5fc; + padding: 0 18px; + align-items: center; + .weight { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #09ffbc; + } + .weightO { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #e8b65f; + } + .text { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #d3f6ff; + margin-left: 30px; + } + } + .infotwo { + margin-top: 5px; + } + .CsfhCls { + height: calc(100% - 120px); + margin-top: 5px; + } + .BeCautious { + margin-top: 5px; + height: 37px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #5fbeff; + .ViewTReport { + width: 90px; + height: 24px; + background: #003756; + border-radius: 12px; + text-align: center; + border: 1px solid #0091ffff; + line-height: 22px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + cursor: pointer; + } + } } .nlfz { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/nlfz.png') no-repeat; - // background-size: 100% 100%; } .jsdxc { width: 420px; height: calc(100% - 40px); margin: 5px auto; - // background: url('@/assets/images/Sponge_screen/jsdxc.png') no-repeat; - // background-size: 100% 100%; } } .YwBox { width: 430px; height: 40%; margin: 5px auto; - // background: yellow; + .topYwBox { font-family: Source Han Sans CN; font-weight: bold; @@ -355,25 +509,126 @@ } } .utilize { - width: 420px; + width: 430px; height: calc(100% - 40px); margin: 5px auto; - background: url('@/assets/images/Sponge_screen/yszl.png') no-repeat; - background-size: 100% 100%; + + .rainChartInfo { + margin-top: 5px; + height: 20px; + width: 100%; + color: #c6c6c6; + justify-content: center; + + .square { + width: 10px; + height: 10px; + display: inline-block; + background-color: #00ffbeff; + margin-left: 50px; + margin-top: 4px; + } + .squareA { + width: 10px; + height: 10px; + background-color: #00a2ffff; + margin-left: 30px; + margin-top: 4px; + } + } + .FK_bodyBox { + height: calc(100% - 60px); + overflow: auto; + box-sizing: border-box; + // background: rgb(224, 224, 210); + .FK_bodyBox_list { + height: 40%; + margin-top: 8px; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + // background: blue; + .FK_bodyBox_list_label { + display: block; + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 14px; + color: #ffffff; + } + .FK_BigBox { + margin-top: 2px; + display: block; + height: 20px; + margin-top: 5px; + .FK_CenBox1 { + display: inline-block; + height: 20px; + background: linear-gradient(-90deg, #20d8aaff 0%, #0883a0ff 100%); + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + .FK_CenBox2 { + display: inline-block; + height: 20px; + background: linear-gradient(90deg, #01a1ffff 0%, #2176ffff 100%); + font-weight: bold; + font-size: 14px; + color: #ffffff; + text-align: right; + line-height: 20px; + box-sizing: border-box; + padding: 0 10px; + } + } + } + } + .BottomLook { + margin: 5px auto; + width: 430px; + height: 35px; + + .ConstrucBot { + width: 205px; + height: 32px; + background: url('@/assets/images/Sponge_screen/HmbjZp.png') no-repeat; + background-size: 100% 100%; + .ConstruBox { + position: relative; + left: 30px; + width: 160px; + .left { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + } + .right { + font-family: Source Han Sans CN; + font-weight: 500; + font-size: 16px; + color: #ffed98; + } + } + } + } } .zsslyl { width: 420px; height: calc(100% - 80px); margin: 5px auto; - // background: red; - // background: url('@/assets/images/Sponge_screen/zss.png') no-repeat; - // background-size: 100% 100%; } .BottomLook { margin: 5px auto; width: 430px; height: 35px; - // background: blue; + .ConstrucBot { width: 205px; height: 32px; @@ -437,8 +692,7 @@ margin: 5px auto; width: 420px; height: calc(100% - 55px); - background: url('@/assets/images/Sponge_screen/wssjcl.png') no-repeat; - background-size: 100% 100%; + // background: yellow; } } .ListBoxHeader { diff --git a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue index 028c9b5..b0eca2b 100644 --- a/src/views/oneMap/ConstructionEvaluation/jsdChart.vue +++ b/src/views/oneMap/ConstructionEvaluation/jsdChart.vue @@ -36,7 +36,7 @@ } } //初始化 -let colorLine = ['#00FCFF', '#FFF600', '#0072FF', '#cd780b', '#08EE8A', '#F5FF52', '#5377FF']; +let colorLine = ['#4458caFF', '#05d6e2FF', '#256be6FF', '#fcc43eFF']; function intChart() { myChart.value = proxy.echarts.init(document.getElementById(id)); myChart.value.clear(); diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue index 33d24f8..0e83a73 100644 --- a/src/views/oneMap/components/ZHHM_JSPG.vue +++ b/src/views/oneMap/components/ZHHM_JSPG.vue @@ -20,9 +20,10 @@ -
-
资金绩效
-
+
+ +
@@ -30,8 +31,11 @@