feat: 实现供水运营专题大屏BI可视化
- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html，使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置，添加/operation路径支持 - 修复nextTick导入问题，优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
This commit is contained in:
+20
@@ -0,0 +1,20 @@
|
||||
import {Earth} from './CRS.Earth';
|
||||
import {Mercator} from '../projection/Projection.Mercator';
|
||||
import {toTransformation} from '../../geometry/Transformation';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.EPSG3395
|
||||
*
|
||||
* Rarely used by some commercial tile providers. Uses Elliptical Mercator projection.
|
||||
*/
|
||||
export var EPSG3395 = Util.extend({}, Earth, {
|
||||
code: 'EPSG:3395',
|
||||
projection: Mercator,
|
||||
|
||||
transformation: (function () {
|
||||
var scale = 0.5 / (Math.PI * Mercator.R);
|
||||
return toTransformation(scale, 0.5, -scale, 0.5);
|
||||
}())
|
||||
});
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import {Earth} from './CRS.Earth';
|
||||
import {SphericalMercator} from '../projection/Projection.SphericalMercator';
|
||||
import {toTransformation} from '../../geometry/Transformation';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.EPSG3857
|
||||
*
|
||||
* The most common CRS for online maps, used by almost all free and commercial
|
||||
* tile providers. Uses Spherical Mercator projection. Set in by default in
|
||||
* Map's `crs` option.
|
||||
*/
|
||||
|
||||
export var EPSG3857 = Util.extend({}, Earth, {
|
||||
code: 'EPSG:3857',
|
||||
projection: SphericalMercator,
|
||||
|
||||
transformation: (function () {
|
||||
var scale = 0.5 / (Math.PI * SphericalMercator.R);
|
||||
return toTransformation(scale, 0.5, -scale, 0.5);
|
||||
}())
|
||||
});
|
||||
|
||||
export var EPSG900913 = Util.extend({}, EPSG3857, {
|
||||
code: 'EPSG:900913'
|
||||
});
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import {Earth} from './CRS.Earth';
|
||||
import {LonLat} from '../projection/Projection.LonLat';
|
||||
import {toTransformation} from '../../geometry/Transformation';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.EPSG4326
|
||||
*
|
||||
* A common CRS among GIS enthusiasts. Uses simple Equirectangular projection.
|
||||
*
|
||||
* Leaflet 1.0.x complies with the [TMS coordinate scheme for EPSG:4326](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification#global-geodetic),
|
||||
* which is a breaking change from 0.7.x behaviour. If you are using a `TileLayer`
|
||||
* with this CRS, ensure that there are two 256x256 pixel tiles covering the
|
||||
* whole earth at zoom level zero, and that the tile coordinate origin is (-180,+90),
|
||||
* or (-180,-90) for `TileLayer`s with [the `tms` option](#tilelayer-tms) set.
|
||||
*/
|
||||
|
||||
export var EPSG4326 = Util.extend({}, Earth, {
|
||||
code: 'EPSG:4326',
|
||||
projection: LonLat,
|
||||
transformation: toTransformation(1 / 180, 1, -1 / 180, 0.5)
|
||||
});
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
import {CRS} from './CRS';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.Earth
|
||||
*
|
||||
* Serves as the base for CRS that are global such that they cover the earth.
|
||||
* Can only be used as the base for other CRS and cannot be used directly,
|
||||
* since it does not have a `code`, `projection` or `transformation`. `distance()` returns
|
||||
* meters.
|
||||
*/
|
||||
|
||||
export var Earth = Util.extend({}, CRS, {
|
||||
wrapLng: [-180, 180],
|
||||
|
||||
// Mean Earth Radius, as recommended for use by
|
||||
// the International Union of Geodesy and Geophysics,
|
||||
// see https://rosettacode.org/wiki/Haversine_formula
|
||||
R: 6371000,
|
||||
|
||||
// distance between two geographical points using spherical law of cosines approximation
|
||||
distance: function (latlng1, latlng2) {
|
||||
var rad = Math.PI / 180,
|
||||
lat1 = latlng1.lat * rad,
|
||||
lat2 = latlng2.lat * rad,
|
||||
sinDLat = Math.sin((latlng2.lat - latlng1.lat) * rad / 2),
|
||||
sinDLon = Math.sin((latlng2.lng - latlng1.lng) * rad / 2),
|
||||
a = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon,
|
||||
c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
return this.R * c;
|
||||
}
|
||||
});
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import {CRS} from './CRS';
|
||||
import {LonLat} from '../projection/Projection.LonLat';
|
||||
import {toTransformation} from '../../geometry/Transformation';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.Simple
|
||||
*
|
||||
* A simple CRS that maps longitude and latitude into `x` and `y` directly.
|
||||
* May be used for maps of flat surfaces (e.g. game maps). Note that the `y`
|
||||
* axis should still be inverted (going from bottom to top). `distance()` returns
|
||||
* simple euclidean distance.
|
||||
*/
|
||||
|
||||
export var Simple = Util.extend({}, CRS, {
|
||||
projection: LonLat,
|
||||
transformation: toTransformation(1, 0, -1, 0),
|
||||
|
||||
scale: function (zoom) {
|
||||
return Math.pow(2, zoom);
|
||||
},
|
||||
|
||||
zoom: function (scale) {
|
||||
return Math.log(scale) / Math.LN2;
|
||||
},
|
||||
|
||||
distance: function (latlng1, latlng2) {
|
||||
var dx = latlng2.lng - latlng1.lng,
|
||||
dy = latlng2.lat - latlng1.lat;
|
||||
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
},
|
||||
|
||||
infinite: true
|
||||
});
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
|
||||
import {Bounds} from '../../geometry/Bounds';
|
||||
import {LatLng} from '../LatLng';
|
||||
import {LatLngBounds} from '../LatLngBounds';
|
||||
import * as Util from '../../core/Util';
|
||||
|
||||
/*
|
||||
* @namespace CRS
|
||||
* @crs L.CRS.Base
|
||||
* Object that defines coordinate reference systems for projecting
|
||||
* geographical points into pixel (screen) coordinates and back (and to
|
||||
* coordinates in other units for [WMS](https://en.wikipedia.org/wiki/Web_Map_Service) services). See
|
||||
* [spatial reference system](https://en.wikipedia.org/wiki/Spatial_reference_system).
|
||||
*
|
||||
* Leaflet defines the most usual CRSs by default. If you want to use a
|
||||
* CRS not defined by default, take a look at the
|
||||
* [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) plugin.
|
||||
*
|
||||
* Note that the CRS instances do not inherit from Leaflet's `Class` object,
|
||||
* and can't be instantiated. Also, new classes can't inherit from them,
|
||||
* and methods can't be added to them with the `include` function.
|
||||
*/
|
||||
|
||||
export var CRS = {
|
||||
// @method latLngToPoint(latlng: LatLng, zoom: Number): Point
|
||||
// Projects geographical coordinates into pixel coordinates for a given zoom.
|
||||
latLngToPoint: function (latlng, zoom) {
|
||||
var projectedPoint = this.projection.project(latlng),
|
||||
scale = this.scale(zoom);
|
||||
|
||||
return this.transformation._transform(projectedPoint, scale);
|
||||
},
|
||||
|
||||
// @method pointToLatLng(point: Point, zoom: Number): LatLng
|
||||
// The inverse of `latLngToPoint`. Projects pixel coordinates on a given
|
||||
// zoom into geographical coordinates.
|
||||
pointToLatLng: function (point, zoom) {
|
||||
var scale = this.scale(zoom),
|
||||
untransformedPoint = this.transformation.untransform(point, scale);
|
||||
|
||||
return this.projection.unproject(untransformedPoint);
|
||||
},
|
||||
|
||||
// @method project(latlng: LatLng): Point
|
||||
// Projects geographical coordinates into coordinates in units accepted for
|
||||
// this CRS (e.g. meters for EPSG:3857, for passing it to WMS services).
|
||||
project: function (latlng) {
|
||||
return this.projection.project(latlng);
|
||||
},
|
||||
|
||||
// @method unproject(point: Point): LatLng
|
||||
// Given a projected coordinate returns the corresponding LatLng.
|
||||
// The inverse of `project`.
|
||||
unproject: function (point) {
|
||||
return this.projection.unproject(point);
|
||||
},
|
||||
|
||||
// @method scale(zoom: Number): Number
|
||||
// Returns the scale used when transforming projected coordinates into
|
||||
// pixel coordinates for a particular zoom. For example, it returns
|
||||
// `256 * 2^zoom` for Mercator-based CRS.
|
||||
scale: function (zoom) {
|
||||
return 256 * Math.pow(2, zoom);
|
||||
},
|
||||
|
||||
// @method zoom(scale: Number): Number
|
||||
// Inverse of `scale()`, returns the zoom level corresponding to a scale
|
||||
// factor of `scale`.
|
||||
zoom: function (scale) {
|
||||
return Math.log(scale / 256) / Math.LN2;
|
||||
},
|
||||
|
||||
// @method getProjectedBounds(zoom: Number): Bounds
|
||||
// Returns the projection's bounds scaled and transformed for the provided `zoom`.
|
||||
getProjectedBounds: function (zoom) {
|
||||
if (this.infinite) { return null; }
|
||||
|
||||
var b = this.projection.bounds,
|
||||
s = this.scale(zoom),
|
||||
min = this.transformation.transform(b.min, s),
|
||||
max = this.transformation.transform(b.max, s);
|
||||
|
||||
return new Bounds(min, max);
|
||||
},
|
||||
|
||||
// @method distance(latlng1: LatLng, latlng2: LatLng): Number
|
||||
// Returns the distance between two geographical coordinates.
|
||||
|
||||
// @property code: String
|
||||
// Standard code name of the CRS passed into WMS services (e.g. `'EPSG:3857'`)
|
||||
//
|
||||
// @property wrapLng: Number[]
|
||||
// An array of two numbers defining whether the longitude (horizontal) coordinate
|
||||
// axis wraps around a given range and how. Defaults to `[-180, 180]` in most
|
||||
// geographical CRSs. If `undefined`, the longitude axis does not wrap around.
|
||||
//
|
||||
// @property wrapLat: Number[]
|
||||
// Like `wrapLng`, but for the latitude (vertical) axis.
|
||||
|
||||
// wrapLng: [min, max],
|
||||
// wrapLat: [min, max],
|
||||
|
||||
// @property infinite: Boolean
|
||||
// If true, the coordinate space will be unbounded (infinite in both axes)
|
||||
infinite: false,
|
||||
|
||||
// @method wrapLatLng(latlng: LatLng): LatLng
|
||||
// Returns a `LatLng` where lat and lng has been wrapped according to the
|
||||
// CRS's `wrapLat` and `wrapLng` properties, if they are outside the CRS's bounds.
|
||||
wrapLatLng: function (latlng) {
|
||||
var lng = this.wrapLng ? Util.wrapNum(latlng.lng, this.wrapLng, true) : latlng.lng,
|
||||
lat = this.wrapLat ? Util.wrapNum(latlng.lat, this.wrapLat, true) : latlng.lat,
|
||||
alt = latlng.alt;
|
||||
|
||||
return new LatLng(lat, lng, alt);
|
||||
},
|
||||
|
||||
// @method wrapLatLngBounds(bounds: LatLngBounds): LatLngBounds
|
||||
// Returns a `LatLngBounds` with the same size as the given one, ensuring
|
||||
// that its center is within the CRS's bounds.
|
||||
// Only accepts actual `L.LatLngBounds` instances, not arrays.
|
||||
wrapLatLngBounds: function (bounds) {
|
||||
var center = bounds.getCenter(),
|
||||
newCenter = this.wrapLatLng(center),
|
||||
latShift = center.lat - newCenter.lat,
|
||||
lngShift = center.lng - newCenter.lng;
|
||||
|
||||
if (latShift === 0 && lngShift === 0) {
|
||||
return bounds;
|
||||
}
|
||||
|
||||
var sw = bounds.getSouthWest(),
|
||||
ne = bounds.getNorthEast(),
|
||||
newSw = new LatLng(sw.lat - latShift, sw.lng - lngShift),
|
||||
newNe = new LatLng(ne.lat - latShift, ne.lng - lngShift);
|
||||
|
||||
return new LatLngBounds(newSw, newNe);
|
||||
}
|
||||
};
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import {CRS} from './CRS';
|
||||
import {Earth} from './CRS.Earth';
|
||||
import {EPSG3395} from './CRS.EPSG3395';
|
||||
import {EPSG3857, EPSG900913} from './CRS.EPSG3857';
|
||||
import {EPSG4326} from './CRS.EPSG4326';
|
||||
import {Simple} from './CRS.Simple';
|
||||
|
||||
CRS.Earth = Earth;
|
||||
CRS.EPSG3395 = EPSG3395;
|
||||
CRS.EPSG3857 = EPSG3857;
|
||||
CRS.EPSG900913 = EPSG900913;
|
||||
CRS.EPSG4326 = EPSG4326;
|
||||
CRS.Simple = Simple;
|
||||
|
||||
export {CRS};
|
||||
Reference in New Issue
Block a user