parent
e67aa4af5e
commit
93b6c5a0b5
Binary file not shown.
Binary file not shown.
@ -0,0 +1,28 @@
|
||||
@font-face {
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
src: url('http://www.jichuanglanhai.com/demo/font-file/YouSheBiaoTiHei-2.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Medium';
|
||||
src: url('http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Medium.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'DIN';
|
||||
src: url('http://www.jichuanglanhai.com/demo/font-file/din-bold-2.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Regular';
|
||||
src: url('http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'siyuan-Regular';
|
||||
src: url('./siyuan-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Source Han Sans CN--Bold';
|
||||
src: url('./SourceHanSansCN-Bold.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'D-DIN';
|
||||
src: url('./D-DIN.otf');
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 477 B |
|
After Width: | Height: | Size: 208 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 399 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 447 B |
|
After Width: | Height: | Size: 398 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 174 B |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 915 B |
|
After Width: | Height: | Size: 827 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 324 KiB |
|
Before Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 859 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 720 B |
|
After Width: | Height: | Size: 220 B |
|
After Width: | Height: | Size: 942 B |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 291 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 578 B |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 904 B |
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,143 @@
|
||||
/* eslint-disable */
|
||||
L.CoordConver = function () {
|
||||
function a(b, c) {
|
||||
var d =
|
||||
-100 +
|
||||
2 * b +
|
||||
3 * c +
|
||||
0.2 * c * c +
|
||||
0.1 * b * c +
|
||||
0.2 * Math.sqrt(Math.abs(b)),
|
||||
d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3,
|
||||
d = d + (2 * (20 * Math.sin(c * e) + 40 * Math.sin((c / 3) * e))) / 3
|
||||
return (d +=
|
||||
(2 * (160 * Math.sin((c / 12) * e) + 320 * Math.sin((c * e) / 30))) / 3)
|
||||
}
|
||||
function f(b, c) {
|
||||
var d =
|
||||
300 +
|
||||
b +
|
||||
2 * c +
|
||||
0.1 * b * b +
|
||||
0.1 * b * c +
|
||||
0.1 * Math.sqrt(Math.abs(b)),
|
||||
d = d + (2 * (20 * Math.sin(6 * b * e) + 20 * Math.sin(2 * b * e))) / 3,
|
||||
d = d + (2 * (20 * Math.sin(b * e) + 40 * Math.sin((b / 3) * e))) / 3
|
||||
return (d +=
|
||||
(2 * (150 * Math.sin((b / 12) * e) + 300 * Math.sin((b / 30) * e))) / 3)
|
||||
}
|
||||
this.getCorrdType = function (b) {
|
||||
var c = 'wgs84'
|
||||
switch (b.split('.')[0]) {
|
||||
case 'Geoq':
|
||||
case 'GaoDe':
|
||||
case 'Google':
|
||||
c = 'gcj02'
|
||||
break
|
||||
case 'Baidu':
|
||||
c = 'bd09'
|
||||
break
|
||||
case 'OSM':
|
||||
case 'TianDiTu':
|
||||
c = 'wgs84'
|
||||
}
|
||||
return c
|
||||
}
|
||||
this.bd09_To_gps84 = function (b, c) {
|
||||
var d = this.bd09_To_gcj02(b, c)
|
||||
return this.gcj02_To_gps84(d.lng, d.lat)
|
||||
}
|
||||
this.gps84_To_bd09 = function (b, c) {
|
||||
var d = this.gps84_To_gcj02(b, c)
|
||||
return this.gcj02_To_bd09(d.lng, d.lat)
|
||||
}
|
||||
this.gps84_To_gcj02 = function (b, c) {
|
||||
var d = a(b - 105, c - 35),
|
||||
k = f(b - 105, c - 35),
|
||||
l = (c / 180) * e,
|
||||
g = Math.sin(l),
|
||||
g = 1 - n * g * g,
|
||||
m = Math.sqrt(g),
|
||||
d = (180 * d) / (((h * (1 - n)) / (g * m)) * e),
|
||||
k = (180 * k) / ((h / m) * Math.cos(l) * e)
|
||||
return { lng: b + k, lat: c + d }
|
||||
}
|
||||
this.gcj02_To_gps84 = function (b, c) {
|
||||
var d = a(b - 105, c - 35),
|
||||
k = f(b - 105, c - 35),
|
||||
l = (c / 180) * e,
|
||||
g = Math.sin(l),
|
||||
g = 1 - n * g * g,
|
||||
m = Math.sqrt(g),
|
||||
d = (180 * d) / (((h * (1 - n)) / (g * m)) * e),
|
||||
k = (180 * k) / ((h / m) * Math.cos(l) * e)
|
||||
return { lng: 2 * b - (b + k), lat: 2 * c - (c + d) }
|
||||
}
|
||||
this.gcj02_To_bd09 = function (b, c) {
|
||||
var d = Math.sqrt(b * b + c * c) + 2e-5 * Math.sin(c * p),
|
||||
a = Math.atan2(c, b) + 3e-6 * Math.cos(b * p)
|
||||
return { lng: d * Math.cos(a) + 0.0065, lat: d * Math.sin(a) + 0.006 }
|
||||
}
|
||||
this.bd09_To_gcj02 = function (b, c) {
|
||||
var d = b - 0.0065,
|
||||
a = c - 0.006,
|
||||
e = Math.sqrt(d * d + a * a) - 2e-5 * Math.sin(a * p),
|
||||
d = Math.atan2(a, d) - 3e-6 * Math.cos(d * p)
|
||||
return { lng: e * Math.cos(d), lat: e * Math.sin(d) }
|
||||
}
|
||||
var e = 3.141592653589793,
|
||||
h = 6378245,
|
||||
n = 0.006693421622965943,
|
||||
p = (3e3 * e) / 180
|
||||
}
|
||||
L.coordConver = function () {
|
||||
return new L.CoordConver()
|
||||
}
|
||||
L.TileLayer.ChinaProvider.include({
|
||||
addTo: function (a) {
|
||||
a.options.corrdType || (a.options.corrdType = this.options.corrdType)
|
||||
a.addLayer(this)
|
||||
return this
|
||||
},
|
||||
})
|
||||
L.tileLayer.chinaProvider = function (a, f) {
|
||||
f = f || {}
|
||||
f.corrdType = L.coordConver().getCorrdType(a)
|
||||
return new L.TileLayer.ChinaProvider(a, f)
|
||||
}
|
||||
L.GridLayer.include({
|
||||
_setZoomTransform: function (a, f, e) {
|
||||
var h = f
|
||||
void 0 != h &&
|
||||
this.options &&
|
||||
('gcj02' == this.options.corrdType
|
||||
? (h = L.coordConver().gps84_To_gcj02(f.lng, f.lat))
|
||||
: 'bd09' == this.options.corrdType &&
|
||||
(h = L.coordConver().gps84_To_bd09(f.lng, f.lat)))
|
||||
f = this._map.getZoomScale(e, a.zoom)
|
||||
e = a.origin
|
||||
.multiplyBy(f)
|
||||
.subtract(this._map._getNewPixelOrigin(h, e))
|
||||
.round()
|
||||
L.Browser.any3d
|
||||
? L.DomUtil.setTransform(a.el, e, f)
|
||||
: L.DomUtil.setPosition(a.el, e)
|
||||
},
|
||||
_getTiledPixelBounds: function (a) {
|
||||
var f = a
|
||||
void 0 != f &&
|
||||
this.options &&
|
||||
('gcj02' == this.options.corrdType
|
||||
? (f = L.coordConver().gps84_To_gcj02(a.lng, a.lat))
|
||||
: 'bd09' == this.options.corrdType &&
|
||||
(f = L.coordConver().gps84_To_bd09(a.lng, a.lat)))
|
||||
a = this._map
|
||||
var e = a._animatingZoom
|
||||
? Math.max(a._animateToZoom, a.getZoom())
|
||||
: a.getZoom(),
|
||||
e = a.getZoomScale(e, this._tileZoom),
|
||||
f = a.project(f, this._tileZoom).floor()
|
||||
a = a.getSize().divideBy(2 * e)
|
||||
return new L.Bounds(f.subtract(a), f.add(a))
|
||||
},
|
||||
})
|
||||
@ -0,0 +1,123 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "1中队",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"1中队"},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
118.80359831953038,
|
||||
31.920541474184631
|
||||
],
|
||||
[
|
||||
118.809995613675383,
|
||||
31.921300571418364
|
||||
],
|
||||
[
|
||||
118.817403518179887,
|
||||
31.923457398392177
|
||||
],
|
||||
[
|
||||
118.820672260009857,
|
||||
31.924602706173275
|
||||
],
|
||||
[
|
||||
118.827974531834627,
|
||||
31.927027952762217
|
||||
],
|
||||
[
|
||||
118.829292266894868,
|
||||
31.927790606324628
|
||||
],
|
||||
[
|
||||
118.83066298193161,
|
||||
31.929981679407977
|
||||
],
|
||||
[
|
||||
118.83113779525732,
|
||||
31.932126055676779
|
||||
],
|
||||
[
|
||||
118.830109301028088,
|
||||
31.935518887106991
|
||||
],
|
||||
[
|
||||
118.827999390641324,
|
||||
31.940136960142237
|
||||
],
|
||||
[
|
||||
118.825524663410405,
|
||||
31.945180448031923
|
||||
],
|
||||
[
|
||||
118.823463948959429,
|
||||
31.94886941892689
|
||||
],
|
||||
[
|
||||
118.821363113715094,
|
||||
31.953127462854333
|
||||
],
|
||||
[
|
||||
118.820788814597393,
|
||||
31.954086611966904
|
||||
],
|
||||
[
|
||||
118.820365727110826,
|
||||
31.956235317294286
|
||||
],
|
||||
[
|
||||
118.818893532794135,
|
||||
31.95735984367192
|
||||
],
|
||||
[
|
||||
118.813689762922351,
|
||||
31.957350326300205
|
||||
],
|
||||
[
|
||||
118.802351626720395,
|
||||
31.957380778433478
|
||||
],
|
||||
[
|
||||
118.802294703527096,
|
||||
31.955398230444136
|
||||
],
|
||||
[
|
||||
118.802218418786111,
|
||||
31.946063970017875
|
||||
],
|
||||
[
|
||||
118.802128741914643,
|
||||
31.940737611049684
|
||||
],
|
||||
[
|
||||
118.803386994535202,
|
||||
31.930696400800176
|
||||
],
|
||||
[
|
||||
118.803387563660024,
|
||||
31.924494008769365
|
||||
],
|
||||
[
|
||||
118.803387563660024,
|
||||
31.924494008769365
|
||||
],
|
||||
[
|
||||
118.80359831953038,
|
||||
31.920541474184631
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,243 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "2中队",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"2中队"},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
118.803474896592405,
|
||||
31.922639738321898
|
||||
],
|
||||
[
|
||||
118.803415659169403,
|
||||
31.924023949953117
|
||||
],
|
||||
[
|
||||
118.803385557625091,
|
||||
31.924519011055132
|
||||
],
|
||||
[
|
||||
118.80338550540823,
|
||||
31.925088138416832
|
||||
],
|
||||
[
|
||||
118.80338317347298,
|
||||
31.928664937287238
|
||||
],
|
||||
[
|
||||
118.803385991746822,
|
||||
31.930706401397895
|
||||
],
|
||||
[
|
||||
118.803302779475828,
|
||||
31.9313284042771
|
||||
],
|
||||
[
|
||||
118.80289471871879,
|
||||
31.934617475443002
|
||||
],
|
||||
[
|
||||
118.802723275811957,
|
||||
31.935980502664833
|
||||
],
|
||||
[
|
||||
118.80258692354306,
|
||||
31.937069526099854
|
||||
],
|
||||
[
|
||||
118.802328255606298,
|
||||
31.939143573990314
|
||||
],
|
||||
[
|
||||
118.802250054873085,
|
||||
31.939760586603036
|
||||
],
|
||||
[
|
||||
118.80213174799637,
|
||||
31.940731614577921
|
||||
],
|
||||
[
|
||||
118.80217457974905,
|
||||
31.943427297582843
|
||||
],
|
||||
[
|
||||
118.80221542758045,
|
||||
31.945907929544191
|
||||
],
|
||||
[
|
||||
118.802217401415177,
|
||||
31.946233006932257
|
||||
],
|
||||
[
|
||||
118.802237232725915,
|
||||
31.948471550449295
|
||||
],
|
||||
[
|
||||
118.802277715774963,
|
||||
31.954923093738675
|
||||
],
|
||||
[
|
||||
118.802300688421141,
|
||||
31.955683305621456
|
||||
],
|
||||
[
|
||||
118.802348621541924,
|
||||
31.957376772611138
|
||||
],
|
||||
[
|
||||
118.795537608916945,
|
||||
31.957266113224765
|
||||
],
|
||||
[
|
||||
118.780942140759066,
|
||||
31.959006598942217
|
||||
],
|
||||
[
|
||||
118.766215143540848,
|
||||
31.960821581517681
|
||||
],
|
||||
[
|
||||
118.765202817198059,
|
||||
31.957511241955608
|
||||
],
|
||||
[
|
||||
118.765070918531421,
|
||||
31.955553719795233
|
||||
],
|
||||
[
|
||||
118.767707926519364,
|
||||
31.952424573440474
|
||||
],
|
||||
[
|
||||
118.767510937632096,
|
||||
31.950802075855798
|
||||
],
|
||||
[
|
||||
118.767511303704467,
|
||||
31.946832168473637
|
||||
],
|
||||
[
|
||||
118.768104972974783,
|
||||
31.944147940095036
|
||||
],
|
||||
[
|
||||
118.770214619735086,
|
||||
31.943814329374597
|
||||
],
|
||||
[
|
||||
118.774963109425499,
|
||||
31.941636696326722
|
||||
],
|
||||
[
|
||||
118.775952417476717,
|
||||
31.938337847688473
|
||||
],
|
||||
[
|
||||
118.775358939211245,
|
||||
31.936938986259165
|
||||
],
|
||||
[
|
||||
118.773578359184796,
|
||||
31.935204031064259
|
||||
],
|
||||
[
|
||||
118.773315292816122,
|
||||
31.933246366744783
|
||||
],
|
||||
[
|
||||
118.774700636934199,
|
||||
31.933079523172474
|
||||
],
|
||||
[
|
||||
118.776349474445951,
|
||||
31.931346637066547
|
||||
],
|
||||
[
|
||||
118.777667926408682,
|
||||
31.930956816948655
|
||||
],
|
||||
[
|
||||
118.778987588722657,
|
||||
31.929000701775063
|
||||
],
|
||||
[
|
||||
118.778724488706928,
|
||||
31.926818942882932
|
||||
],
|
||||
[
|
||||
118.781296752107167,
|
||||
31.924472137241949
|
||||
],
|
||||
[
|
||||
118.780175558924327,
|
||||
31.922681525447633
|
||||
],
|
||||
[
|
||||
118.778262491633313,
|
||||
31.921113199766264
|
||||
],
|
||||
[
|
||||
118.775823213929712,
|
||||
31.917363017051272
|
||||
],
|
||||
[
|
||||
118.775888414933064,
|
||||
31.915907754397999
|
||||
],
|
||||
[
|
||||
118.775757609525229,
|
||||
31.912327841935934
|
||||
],
|
||||
[
|
||||
118.783211201309285,
|
||||
31.913286806717171
|
||||
],
|
||||
[
|
||||
118.785784587549202,
|
||||
31.914017040851945
|
||||
],
|
||||
[
|
||||
118.786397412322756,
|
||||
31.914346873911789
|
||||
],
|
||||
[
|
||||
118.790008470741171,
|
||||
31.916801109518921
|
||||
],
|
||||
[
|
||||
118.792031595441017,
|
||||
31.916926918928198
|
||||
],
|
||||
[
|
||||
118.792224890214499,
|
||||
31.917049217341436
|
||||
],
|
||||
[
|
||||
118.796655998076304,
|
||||
31.91917916024158
|
||||
],
|
||||
[
|
||||
118.796655998076304,
|
||||
31.91917916024158
|
||||
],
|
||||
[
|
||||
118.803474896592405,
|
||||
31.922639738321898
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "3中队",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name": "3中队"},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
118.810008752170205,
|
||||
31.876284869189416
|
||||
],
|
||||
[
|
||||
118.809510691110347,
|
||||
31.877085162032991
|
||||
],
|
||||
[
|
||||
118.808172714084705,
|
||||
31.880839617139745
|
||||
],
|
||||
[
|
||||
118.806725519689522,
|
||||
31.884996003230466
|
||||
],
|
||||
[
|
||||
118.805990800480743,
|
||||
31.888330459257382
|
||||
],
|
||||
[
|
||||
118.80575398496903,
|
||||
31.892287902298033
|
||||
],
|
||||
[
|
||||
118.804535438673625,
|
||||
31.9057197596014
|
||||
],
|
||||
[
|
||||
118.804377350613152,
|
||||
31.914347393214801
|
||||
],
|
||||
[
|
||||
118.804191882868324,
|
||||
31.915637369637061
|
||||
],
|
||||
[
|
||||
118.803961298342202,
|
||||
31.917284351412405
|
||||
],
|
||||
[
|
||||
118.803807886026604,
|
||||
31.918642398539536
|
||||
],
|
||||
[
|
||||
118.803586355754902,
|
||||
31.919901311767862
|
||||
],
|
||||
[
|
||||
118.803598319346875,
|
||||
31.920543474630179
|
||||
],
|
||||
[
|
||||
118.804749475126968,
|
||||
31.920675420618203
|
||||
],
|
||||
[
|
||||
118.809976576010769,
|
||||
31.921298537515739
|
||||
],
|
||||
[
|
||||
118.813801185022314,
|
||||
31.92240659825773
|
||||
],
|
||||
[
|
||||
118.815630892217698,
|
||||
31.922939036220296
|
||||
],
|
||||
[
|
||||
118.816042731484302,
|
||||
31.923062815556552
|
||||
],
|
||||
[
|
||||
118.817360429810932,
|
||||
31.923443316006889
|
||||
],
|
||||
[
|
||||
118.819265348320016,
|
||||
31.924106981382092
|
||||
],
|
||||
[
|
||||
118.825970326276291,
|
||||
31.926367029978536
|
||||
],
|
||||
[
|
||||
118.828003593146661,
|
||||
31.927034008871118
|
||||
],
|
||||
[
|
||||
118.829307298873488,
|
||||
31.92779063464225
|
||||
],
|
||||
[
|
||||
118.830673002126858,
|
||||
31.929993700965959
|
||||
],
|
||||
[
|
||||
118.831786418944716,
|
||||
31.929409662877241
|
||||
],
|
||||
[
|
||||
118.832852786132364,
|
||||
31.928224397928002
|
||||
],
|
||||
[
|
||||
118.833902293498369,
|
||||
31.925045650591304
|
||||
],
|
||||
[
|
||||
118.834951700659701,
|
||||
31.922895130080757
|
||||
],
|
||||
[
|
||||
118.838320851350758,
|
||||
31.921732120154644
|
||||
],
|
||||
[
|
||||
118.841303156344338,
|
||||
31.919959181891659
|
||||
],
|
||||
[
|
||||
118.843898633545322,
|
||||
31.917531316769907
|
||||
],
|
||||
[
|
||||
118.846052375726387,
|
||||
31.912505020561266
|
||||
],
|
||||
[
|
||||
118.846659850668701,
|
||||
31.909418405908788
|
||||
],
|
||||
[
|
||||
118.845335461949873,
|
||||
31.906935532847577
|
||||
],
|
||||
[
|
||||
118.845832701011787,
|
||||
31.904128796578195
|
||||
],
|
||||
[
|
||||
118.848372978258311,
|
||||
31.900670469570265
|
||||
],
|
||||
[
|
||||
118.840753640498193,
|
||||
31.891203901997336
|
||||
],
|
||||
[
|
||||
118.836335854564652,
|
||||
31.887123902499876
|
||||
],
|
||||
[
|
||||
118.831972982863093,
|
||||
31.88355799429733
|
||||
],
|
||||
[
|
||||
118.824849182232967,
|
||||
31.879800796300984
|
||||
],
|
||||
[
|
||||
118.815792419212215,
|
||||
31.87697538357288
|
||||
],
|
||||
[
|
||||
118.810008752170205,
|
||||
31.876284869189416
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,259 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "4中队",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name": "4中队"},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
118.80343082010954,
|
||||
31.922575651194556
|
||||
],
|
||||
[
|
||||
118.803607439804253,
|
||||
31.919414238207491
|
||||
],
|
||||
[
|
||||
118.80417086608648,
|
||||
31.915388279460718
|
||||
],
|
||||
[
|
||||
118.804452498157104,
|
||||
31.914285504964688
|
||||
],
|
||||
[
|
||||
118.804453242016834,
|
||||
31.906171721127446
|
||||
],
|
||||
[
|
||||
118.804664863088348,
|
||||
31.903756547442779
|
||||
],
|
||||
[
|
||||
118.805193396872411,
|
||||
31.89795517521495
|
||||
],
|
||||
[
|
||||
118.805667762606532,
|
||||
31.892915890950754
|
||||
],
|
||||
[
|
||||
118.805949618654211,
|
||||
31.889455628862937
|
||||
],
|
||||
[
|
||||
118.806091061823594,
|
||||
31.887576469224967
|
||||
],
|
||||
[
|
||||
118.806689467693332,
|
||||
31.884802900856638
|
||||
],
|
||||
[
|
||||
118.807851001011016,
|
||||
31.881761254469723
|
||||
],
|
||||
[
|
||||
118.809452561546578,
|
||||
31.87724409338249
|
||||
],
|
||||
[
|
||||
118.810153060045508,
|
||||
31.876056075413661
|
||||
],
|
||||
[
|
||||
118.810903640488746,
|
||||
31.875151212020395
|
||||
],
|
||||
[
|
||||
118.816392743105538,
|
||||
31.865090039162936
|
||||
],
|
||||
[
|
||||
118.822635858630164,
|
||||
31.853750344485331
|
||||
],
|
||||
[
|
||||
118.822716065699922,
|
||||
31.853339413666976
|
||||
],
|
||||
[
|
||||
118.822230375483784,
|
||||
31.838632664399793
|
||||
],
|
||||
[
|
||||
118.822057431294382,
|
||||
31.833997470434493
|
||||
],
|
||||
[
|
||||
118.821575450916768,
|
||||
31.833588493657665
|
||||
],
|
||||
[
|
||||
118.818406739850204,
|
||||
31.834226725655036
|
||||
],
|
||||
[
|
||||
118.812904494167171,
|
||||
31.83322751107881
|
||||
],
|
||||
[
|
||||
118.807551170225892,
|
||||
31.829666432802032
|
||||
],
|
||||
[
|
||||
118.805420278020406,
|
||||
31.827335373771731
|
||||
],
|
||||
[
|
||||
118.802162499877852,
|
||||
31.823779327276206
|
||||
],
|
||||
[
|
||||
118.799494928067034,
|
||||
31.821009557911417
|
||||
],
|
||||
[
|
||||
118.794242752823465,
|
||||
31.823062961322641
|
||||
],
|
||||
[
|
||||
118.791002449481965,
|
||||
31.824519636806286
|
||||
],
|
||||
[
|
||||
118.788866535276512,
|
||||
31.831912114703744
|
||||
],
|
||||
[
|
||||
118.79054770271209,
|
||||
31.835953121698843
|
||||
],
|
||||
[
|
||||
118.792134769170033,
|
||||
31.840403157708991
|
||||
],
|
||||
[
|
||||
118.79328795294586,
|
||||
31.847616178871153
|
||||
],
|
||||
[
|
||||
118.793689845280255,
|
||||
31.855913384639987
|
||||
],
|
||||
[
|
||||
118.777232951442087,
|
||||
31.87111043054869
|
||||
],
|
||||
[
|
||||
118.772242862747504,
|
||||
31.87291938082285
|
||||
],
|
||||
[
|
||||
118.76850735569576,
|
||||
31.867087431407882
|
||||
],
|
||||
[
|
||||
118.767591485150078,
|
||||
31.85849609827325
|
||||
],
|
||||
[
|
||||
118.767486584291532,
|
||||
31.856617657285611
|
||||
],
|
||||
[
|
||||
118.76377929779953,
|
||||
31.856488523675484
|
||||
],
|
||||
[
|
||||
118.765146635500429,
|
||||
31.861314207598614
|
||||
],
|
||||
[
|
||||
118.7652862539301,
|
||||
31.86638431013554
|
||||
],
|
||||
[
|
||||
118.76314454757231,
|
||||
31.871885328241323
|
||||
],
|
||||
[
|
||||
118.763175305705659,
|
||||
31.874689922110122
|
||||
],
|
||||
[
|
||||
118.752573072000033,
|
||||
31.876521314433113
|
||||
],
|
||||
[
|
||||
118.745718313494976,
|
||||
31.880700515097743
|
||||
],
|
||||
[
|
||||
118.744798490694038,
|
||||
31.881384838359381
|
||||
],
|
||||
[
|
||||
118.744795459179045,
|
||||
31.881736912940053
|
||||
],
|
||||
[
|
||||
118.758974965688935,
|
||||
31.880616470074624
|
||||
],
|
||||
[
|
||||
118.764318240874516,
|
||||
31.882123044813881
|
||||
],
|
||||
[
|
||||
118.754199413686081,
|
||||
31.907088033525696
|
||||
],
|
||||
[
|
||||
118.753848133760087,
|
||||
31.909662550483631
|
||||
],
|
||||
[
|
||||
118.752214769248027,
|
||||
31.912222951883297
|
||||
],
|
||||
[
|
||||
118.775945489590555,
|
||||
31.915736769335847
|
||||
],
|
||||
[
|
||||
118.775751613672398,
|
||||
31.912215811698356
|
||||
],
|
||||
[
|
||||
118.786000877976974,
|
||||
31.91412533184624
|
||||
],
|
||||
[
|
||||
118.789991442574376,
|
||||
31.916826092106163
|
||||
],
|
||||
[
|
||||
118.792198859040354,
|
||||
31.916939156326023
|
||||
],
|
||||
[
|
||||
118.80343082010954,
|
||||
31.922575651194556
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,177 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "点位",
|
||||
"crs": {
|
||||
"type": "name",
|
||||
"properties": {
|
||||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法人员"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.75548171596654,
|
||||
31.89394647316125
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法人员"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.80544753568995,
|
||||
31.946370280828546
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法人员"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.74576613991007,
|
||||
31.8391346298732
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法车辆"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.75617568568583,
|
||||
31.907202504842076
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法车辆"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.71245559342861,
|
||||
31.80729344525831
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"执法车辆"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.76797317089773,
|
||||
31.815844471399032
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"普通事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.78046462582762,
|
||||
31.937536901411846
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"重点事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.74646010962817,
|
||||
31.887465051816918
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"普通事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.8234907483668,
|
||||
31.92870267299449
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"重点事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.73778548814812,
|
||||
31.83294414851042
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"普通事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.75860457969964,
|
||||
31.82351023555887
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"重点事件"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.80857039942185,
|
||||
31.840608492795567
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"监控视频"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.79202271621062,
|
||||
31.894683156925666
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"监控视频"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.78822314147698,
|
||||
31.87962764374977
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {"name":"监控视频"},
|
||||
"geometry": {
|
||||
"coordinates": [
|
||||
118.82115278916302,
|
||||
31.914036628233447
|
||||
],
|
||||
"type": "Point"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,307 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-15 13:08:32
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-16 17:04:48
|
||||
-->
|
||||
<template>
|
||||
<div class="map-middle">
|
||||
<div class="middle-middle">
|
||||
<img src="@/assets/images/action-left.png" alt="">
|
||||
<img src="@/assets/images/action-right.png" alt="">
|
||||
</div>
|
||||
<div class="middle-top-left">
|
||||
<div class="input-keyword">
|
||||
<el-input
|
||||
placeholder="请输入关键字"
|
||||
v-model="input">
|
||||
<i slot="suffix" class="el-icon-search" @click="search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="laser-positioning" @click="positioning()">
|
||||
<span>地图扎点</span>
|
||||
<img src="@/assets/images/positioning.png" alt="">
|
||||
</div>
|
||||
<div class="creation-task" @click="createdTask()">
|
||||
<span>任务创建</span>
|
||||
<img src="@/assets/images/createdTask.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-bottom-left">
|
||||
<div class="list" @click="changeMap(1)">
|
||||
<div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
|
||||
<img src="@/assets/images/icon1.png" alt="">
|
||||
</div>
|
||||
<div class="rightbg" v-show="actionMap == 1">
|
||||
<span>执法人员</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" @click="changeMap(2)">
|
||||
<div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
|
||||
<img src="@/assets/images/icon2.png" alt="">
|
||||
</div>
|
||||
<div class="rightbg" v-show="actionMap == 2">
|
||||
<span>普通事件</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" @click="changeMap(2)">
|
||||
<div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
|
||||
<img src="@/assets/images/icon3.png" alt="">
|
||||
</div>
|
||||
<div class="rightbg" v-show="actionMap == 2">
|
||||
<span>重点事件</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" @click="changeMap(3)">
|
||||
<div class="leftbg" :class="actionMap == 3 ? 'action-map':''">
|
||||
<img src="@/assets/images/icon4.png" alt="">
|
||||
</div>
|
||||
<div class="rightbg" v-show="actionMap == 3">
|
||||
<span>执法车辆</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" @click="changeMap(4)">
|
||||
<div class="leftbg" :class="actionMap == 4 ? 'action-map':''">
|
||||
<img src="@/assets/images/icon5.png" alt="">
|
||||
</div>
|
||||
<div class="rightbg" v-show="actionMap == 4">
|
||||
<span>监控视频</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-bottom-right">
|
||||
<div class="btn-action">
|
||||
<span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
|
||||
<span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
|
||||
</div>
|
||||
</div>
|
||||
<personage-track ref="personageTrack"></personage-track>
|
||||
<crew-assign ref="crewAssign"></crew-assign>
|
||||
<video-wall ref="videoWall"></video-wall>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import personageTrack from "../../components/personagetrack/index.vue"
|
||||
import crewAssign from "../../components/crewAssign/index.vue"
|
||||
import videoWall from "../../components/videoWall/index.vue"
|
||||
export default {
|
||||
components:{personageTrack,crewAssign,videoWall},
|
||||
data() {
|
||||
return {
|
||||
action:1,
|
||||
lawExecutor:true, // 执法人员
|
||||
generalEvent:false, // 普通事件
|
||||
emphasisEvent:false, // 重点事件
|
||||
lawCar:false, // 执法车辆
|
||||
surveillanceVideo:false, // 监控视频
|
||||
input:'', // 输入框的值
|
||||
actionMap:1, // 默认选中执法人员地图
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
actionBtn(id){
|
||||
this.action = id;
|
||||
console.log(id)
|
||||
this.$emit('actionBtn',id);
|
||||
if(id == 1){
|
||||
this.$refs.personageTrack.open();
|
||||
} else {
|
||||
this.$refs.crewAssign.open();
|
||||
}
|
||||
},
|
||||
// 输入框的搜索框点击事件
|
||||
search(){
|
||||
|
||||
},
|
||||
// 创建任务的点击事件
|
||||
createdTask(){
|
||||
|
||||
},
|
||||
// 地图扎点的点击事件
|
||||
positioning(){
|
||||
this.$refs.videoWall.open();
|
||||
},
|
||||
// 切换地图事件
|
||||
changeMap(id){
|
||||
// 往左切换
|
||||
// if(id == 1) {
|
||||
// this.actionMap <= 1 ? this.actionMap = 4 : this.actionMap--
|
||||
// } else {
|
||||
// // 往右切换
|
||||
// this.actionMap >= 4 ? this.actionMap = 1 : this.actionMap++
|
||||
// }
|
||||
this.actionMap = id;
|
||||
this.$emit('actionMap',this.actionMap);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
.map-middle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
.middle-middle {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.middle-top-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
.input-keyword {
|
||||
::v-deep .el-input {
|
||||
background: rgba(0,60,116,0.2);
|
||||
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(181,207,255,0.5);
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
width: 222px;
|
||||
height: 38px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
.el-input__inner::placeholder {
|
||||
/* 在这里添加你想要修改的 placeholder 样式 */
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__suffix {
|
||||
line-height: 44px;
|
||||
color: #D3EEF2;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
.el-icon-search:before {
|
||||
font-size: 24px;
|
||||
color: #D3EEF2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.laser-positioning,.creation-task {
|
||||
// height: 38px;
|
||||
margin-left: 8px;
|
||||
background: rgba(0,60,116,0.6);
|
||||
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(181,207,255,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 9px 13px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
// width: 200px;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.list{
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.leftbg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url('../../../assets/images/iconbg2.png');
|
||||
background-size: 100% 100%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
.action-map {
|
||||
background-image: url('../../../assets/images/iconbg1.png');
|
||||
}
|
||||
.rightbg {
|
||||
padding-left: 6px;
|
||||
margin-left: 2px;
|
||||
background-image: url('../../../assets/images/right-icon.png');
|
||||
width: 115px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
line-height: 26px;
|
||||
text-shadow: 0px 0px 5px #0077FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-bottom-right {
|
||||
|
||||
.btn-action {
|
||||
display: flex;
|
||||
span {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 10px 33px;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(181,207,255,0.5);
|
||||
&:nth-child(1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.action {
|
||||
color: #fff;
|
||||
background-color: rgba(255,125,64,0.8);
|
||||
box-shadow: inset 0px 0px 13px 0px #F6B463;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid rgba(181,207,255,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,202 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-15 09:44:13
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-16 10:53:31
|
||||
-->
|
||||
<template>
|
||||
<div class="left-box">
|
||||
<div class="item">
|
||||
<title-box title="今日事件情况"></title-box>
|
||||
<div class="item-main">
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 上报事件总数</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/incident.png" alt="">
|
||||
<div class="list-num">200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 已派发任务</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/incident.png" alt="">
|
||||
<div class="list-num">180</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 未派发任务</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/incident.png" alt="">
|
||||
<div class="list-num">20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="今日任务情况"></title-box>
|
||||
<div class="item-main">
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 处理任务总数</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/task.png" alt="">
|
||||
<div class="list-num">200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 任务立案数量</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/task.png" alt="">
|
||||
<div class="list-num">180</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="bgc"></div>
|
||||
<div class="list-text"> · 任务结案数量</div>
|
||||
<div class="list-bottom">
|
||||
<img src="@/assets/images/task.png" alt="">
|
||||
<div class="list-num">20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="人员在线情况"></title-box>
|
||||
<map-number title="在线人员总数" :onLine="100" :sum="150" type="人" :numberArray="peopleArray"></map-number>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="车辆在线情况"></title-box>
|
||||
<map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray"></map-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import titleBox from '../../components/title/index.vue'
|
||||
import mapNumber from '../../components/mapLeftNumber/index.vue'
|
||||
export default {
|
||||
name:'mapLeftContent',
|
||||
components:{titleBox,mapNumber},
|
||||
data() {
|
||||
return {
|
||||
peopleArray:[
|
||||
{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},{
|
||||
title:'李飞'
|
||||
},
|
||||
],
|
||||
vehicleArray:[
|
||||
{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},{
|
||||
title:'苏A123456'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left-box {
|
||||
display: grid;
|
||||
grid-column: 1fr;
|
||||
grid-row-gap: 15px;
|
||||
.item {
|
||||
// background: rgba(222, 225, 230, 0.6);
|
||||
.item-main {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 17px;
|
||||
.lists {
|
||||
// padding: 5px;
|
||||
width: 141px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.bgc {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 141px;
|
||||
background: linear-gradient(180deg, #0073FF 0%, rgba(0,71,129,0) 100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.list-text {
|
||||
font-size: 15px;
|
||||
height: 38px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 22px;
|
||||
background-image: url("../../../assets/images/masking.png");
|
||||
background-size: 100% 100%;
|
||||
padding: 16px 0 0 8px;
|
||||
}
|
||||
.list-bottom {
|
||||
display: flex;
|
||||
padding-left: 24px;
|
||||
margin-top: 11px;
|
||||
img {
|
||||
width: 37px;
|
||||
height: 40px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.list-num {
|
||||
font-size: 32px;
|
||||
font-family: D-DIN-Regular, D-DIN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 35px;
|
||||
letter-spacing: 1px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-15 11:09:57
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-16 10:49:03
|
||||
-->
|
||||
<template>
|
||||
<div class="right-box">
|
||||
<div class="item">
|
||||
<title-box title="区域网格"></title-box>
|
||||
<map-right :rightArray="griddingArray"></map-right>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="重点区域"></title-box>
|
||||
<map-right :rightArray="areaArray"></map-right>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="考勤围栏"></title-box>
|
||||
<map-right :rightArray="griddingArray"></map-right>
|
||||
</div>
|
||||
<div class="item">
|
||||
<title-box title="重点路段"></title-box>
|
||||
<map-right :rightArray="griddingArray"></map-right>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import titleBox from '../../components/title/index.vue'
|
||||
import mapRight from '../../components/mapRight/index.vue'
|
||||
export default {
|
||||
name:'mapRightContent',
|
||||
components:{titleBox,mapRight},
|
||||
data() {
|
||||
return {
|
||||
griddingArray:[
|
||||
{
|
||||
area:'网格1',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格2',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格3',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格1',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格2',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},
|
||||
],
|
||||
areaArray:[
|
||||
{
|
||||
area:'网格1',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格2',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格3',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格1',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},{
|
||||
area:'网格2',
|
||||
event:60,
|
||||
resolved:40,
|
||||
unsolved:20
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.right-box {
|
||||
display: grid;
|
||||
grid-column: 1fr;
|
||||
grid-row-gap: 15px;
|
||||
.item {
|
||||
// background: rgba(222, 225, 230, 0.6);
|
||||
// height: 161px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,186 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-14 14:40:02
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-16 11:32:02
|
||||
-->
|
||||
<template>
|
||||
<div class="pc-container">
|
||||
<div class="system-header">
|
||||
<div class="left-tags">
|
||||
<div class="new-time">{{ newTime }}</div>
|
||||
<div>{{ currentWork }}</div>
|
||||
</div>
|
||||
<div class="system-title" text="城市精细化管理监测主题">
|
||||
城市精细化管理监测主题
|
||||
</div>
|
||||
<!-- <div class="right-tags">
|
||||
<el-input
|
||||
placeholder="请输入设备名称"
|
||||
v-model="input">
|
||||
<i slot="suffix" class="el-icon-search" @click="search"></i>
|
||||
</el-input>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="child-view">
|
||||
<!-- <router-view /> -->
|
||||
<my-map></my-map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import myRouter from '../../router.js'
|
||||
import myMap from "./map/index.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
newTime: '',
|
||||
currentWork:'',
|
||||
input:'',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取当前年月日周
|
||||
let dayList = {
|
||||
0: '星期日',
|
||||
1: '星期一',
|
||||
2: '星期二',
|
||||
3: '星期三',
|
||||
4: '星期四',
|
||||
5: '星期五',
|
||||
6: '星期六',
|
||||
}
|
||||
this.newTime =
|
||||
this.$moment(new Date()).add(0, 'year').format('YYYY-MM-DD') +
|
||||
' '
|
||||
this.currentWork = dayList[this.$moment().weekday()]
|
||||
},
|
||||
methods:{
|
||||
search(){
|
||||
|
||||
}
|
||||
},
|
||||
components:{myMap}
|
||||
// computed: {
|
||||
// routerList() {
|
||||
// let staticRouter = myRouter.options.routes.filter(
|
||||
// (item) => item.show == true
|
||||
// )[0].children
|
||||
// return staticRouter
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
text-align: left;
|
||||
}
|
||||
.pc-container {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background: url('../../assets/images/zhifa/main-background.jpg') no-repeat
|
||||
center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
.system-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-image: url('../../assets/images/img_title@2x.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
padding: 0 40px;
|
||||
.system-title {
|
||||
padding: 18px 0 0 65px;
|
||||
font-size: 40px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex: 1;
|
||||
text-shadow: 3px 3px 0px #0C1015, 2px 2px 0px #1A3F76;
|
||||
letter-spacing: 4px;
|
||||
&::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #ffffff;
|
||||
// 渐变样式
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #4499D6 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
// 去除继承父级样式
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.left-tags {
|
||||
display: flex;
|
||||
width: 630px;
|
||||
align-items: flex-start;
|
||||
// flex-direction: row-reverse;
|
||||
// justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0 8px;
|
||||
.new-time {
|
||||
padding: 28px 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: #9ae6ff;
|
||||
}
|
||||
}
|
||||
// .right-tags {
|
||||
// padding-top: 16px;
|
||||
|
||||
// ::v-deep .el-input {
|
||||
// border: 1px solid #D3EEF2;
|
||||
// border-radius: 3px;
|
||||
// .el-input__inner {
|
||||
// background-color: transparent;
|
||||
// width: 296px;
|
||||
// height: 30px;
|
||||
// color: #fff;
|
||||
// border: none;
|
||||
// }
|
||||
// .el-input__inner::placeholder {
|
||||
// /* 在这里添加你想要修改的 placeholder 样式 */
|
||||
// font-size: 14px;
|
||||
// font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
// font-weight: 400;
|
||||
// color: #D3EEF2;
|
||||
// line-height: 20px;
|
||||
// }
|
||||
// }
|
||||
// // ::v-deep .el-icon-search:before {
|
||||
// // font-size: 20px;
|
||||
// // }
|
||||
// // ::v-deep .el-input__icon {
|
||||
// // line-height: 30px;
|
||||
// // }
|
||||
// ::v-deep .el-input__suffix {
|
||||
// line-height: 35px;
|
||||
// color: #D3EEF2;
|
||||
// cursor: pointer;
|
||||
// .el-icon-search:before {
|
||||
// font-size: 20px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.child-view {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<popup-title :type="3" v-on:personClose="carClose" title="车辆信息">
|
||||
<div class="car-main">
|
||||
<div class="car-info">
|
||||
<div class="dot"></div>
|
||||
<div class="name">执法一队1号车</div>
|
||||
<div class="position">苏A568974</div>
|
||||
</div>
|
||||
<div class="btn" @click="carinfo">行程轨迹</div>
|
||||
</div>
|
||||
</popup-title>
|
||||
</template>
|
||||
<script>
|
||||
import popupTitle from "../popupTitle/index.vue"
|
||||
export default {
|
||||
components:{popupTitle},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
carClose(){
|
||||
this.$emit('carClose')
|
||||
},
|
||||
carinfo(){
|
||||
this.$emit('carinfo')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.car-main {
|
||||
padding: 12px 10px 25px 15px;
|
||||
display: grid;
|
||||
grid-column: 1fr;
|
||||
grid-row-gap: 9px;
|
||||
.car-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #DAEBFF;
|
||||
box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.name,.position {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #E9F4FF;
|
||||
line-height: 17px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-top: 19px;
|
||||
background-image: url('../../../assets/images/popup/icon1btn.png');
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-16 14:19:37
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-17 18:34:57
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:show-close="false"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:width="width"
|
||||
:style="heightStyle"
|
||||
append-to-body
|
||||
:custom-class="type == 1 ? 'dialog-boxed': type == 2 ? 'dialog-boxed2' : type == 3 ? 'dialog-boxed3' : ''"
|
||||
>
|
||||
<template slot="title">
|
||||
<div class="closeClick">
|
||||
<div class="headline" text="title123kmalskdnj">
|
||||
<div class="headlinetitle" :text="title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="close" @click="Close"></div>
|
||||
</div>
|
||||
</template>
|
||||
<slot> </slot>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible:false,
|
||||
type:0,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:"测试标题看看是啥样",
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:'50%'
|
||||
},
|
||||
heightStyle:{
|
||||
type:Object,
|
||||
default: function(){
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
open(id) {
|
||||
this.type = Number(id);
|
||||
this.dialogVisible = true
|
||||
},
|
||||
Close() {
|
||||
this.dialogVisible = false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.type)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
// width: vw(878);
|
||||
// height: 520px;
|
||||
// border: 1px solid red;
|
||||
background-image: url('../../../assets/images/dialogbg.png');
|
||||
background-size: 100% 100%;
|
||||
.el-dialog__header {
|
||||
padding: 10px 20px;
|
||||
.closeClick {
|
||||
// display: flex;
|
||||
height: 46px;
|
||||
// justify-content: space-between;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
.headline {
|
||||
background-image: url('../../../assets/images/dialogtitlebg.png');
|
||||
width: 451px;
|
||||
background-size: 100% 100%;
|
||||
padding-left: 22px;
|
||||
height: 38px;
|
||||
.headlinetitle {
|
||||
font-size: 20px;
|
||||
font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
// line-height: 26px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
text-shadow: 1px 1px 0px #1A3F76;
|
||||
&::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #ffffff;
|
||||
// 渐变样式
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #43B4C5 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
// 去除继承父级样式
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 0px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 22px 0 60px 40px;
|
||||
}
|
||||
}
|
||||
::v-deep .dialog-boxed {
|
||||
background-image: url('../../../assets/images/dialogbg/dialog13.png');
|
||||
.el-dialog__header {
|
||||
.closeClick {
|
||||
.close {
|
||||
position: absolute;
|
||||
width: 27px;
|
||||
height: 23px;
|
||||
right: 10px;
|
||||
top: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .dialog-boxed2 {
|
||||
background-image: url('../../../assets/images/dialogbg/dialog2.png');
|
||||
}
|
||||
::v-deep .dialog-boxed3 {
|
||||
background-image: url('../../../assets/images/dialogbg/792@2x.png');
|
||||
.el-dialog__header {
|
||||
.closeClick {
|
||||
.close {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
right: 10px;
|
||||
top: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="left-number">
|
||||
<div class="number-title">
|
||||
<div>· {{ title }}</div>
|
||||
<div>{{ onLine }}/{{ sum }}{{ type }}</div>
|
||||
</div>
|
||||
<div class="header-title">
|
||||
<div>姓名</div>
|
||||
<div class="header-title-right">实时定位/行程轨迹</div>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''">
|
||||
<div class="list-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<div class="real-time-location">
|
||||
<img src="@/assets/images/location1.png" alt="">
|
||||
<span>实时定位</span>
|
||||
</div>
|
||||
<div class="route-track">
|
||||
<img src="@/assets/images/track.png" alt="">
|
||||
<span>形成轨迹</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props:{
|
||||
title:{
|
||||
type:String,
|
||||
default:'默认标题',
|
||||
},
|
||||
onLine:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
sum:{
|
||||
type:Number,
|
||||
default:0,
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:'默认类型',
|
||||
},
|
||||
numberArray:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left-number {
|
||||
// padding: 5px 0;
|
||||
|
||||
|
||||
.number-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,0.1);
|
||||
height: 35px;
|
||||
padding: 0 20px;
|
||||
div {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: 700;
|
||||
color: #D3EEF2;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(7,127,255,0.1608);
|
||||
border: 1px solid #077FFF;
|
||||
height: 33px;
|
||||
&>div {
|
||||
flex: 1;
|
||||
padding-left: 24px;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN--Bold, Source Han Sans CN-;
|
||||
font-weight: bold;
|
||||
color: #D3EEF2;
|
||||
}
|
||||
}
|
||||
.lists {
|
||||
height: 120px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.main-lists {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(216,216,216,0.05);
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
.list-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.list-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #52B1FF;
|
||||
.real-time-location {
|
||||
margin-right: 22px;
|
||||
}
|
||||
.real-time-location,.route-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-lists2 {
|
||||
background: rgba(187,220,255,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="right-main">
|
||||
<div class="header-title">
|
||||
<div>网格名称</div>
|
||||
<div>今日事件</div>
|
||||
<div>已解决</div>
|
||||
<div>未解决</div>
|
||||
</div>
|
||||
<div class="lists-main">
|
||||
<div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
|
||||
<div>
|
||||
<img src="@/assets/images/location1.png" alt="">
|
||||
{{ item.area }}
|
||||
</div>
|
||||
<div>{{ item.event }}</div>
|
||||
<div>{{ item.resolved }}</div>
|
||||
<div class="unsolved">{{ item.unsolved }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'mapRight',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props:{
|
||||
rightArray:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.right-main {
|
||||
padding: 8px 0 0 17px;
|
||||
.header-title {
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(7,127,255,0.1608);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
border: 1px solid #077FFF;
|
||||
height: 33px;
|
||||
div {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN--Bold, Source Han Sans CN-;
|
||||
font-weight: bold;
|
||||
color: #D3EEF2;
|
||||
line-height: 21px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.lists-main {
|
||||
overflow-y: scroll;
|
||||
height: 99px;
|
||||
}
|
||||
.main {
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(216,216,216,0.05);
|
||||
height: 33px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN--Regular, Source Han Sans CN-;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 21px;
|
||||
min-width: 60px;
|
||||
|
||||
&:nth-child(1) {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN--Regular, Source Han Sans CN-;
|
||||
font-weight: 400;
|
||||
color: #52B1FF;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.unsolved {
|
||||
color: #FF6C6C;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.main1 {
|
||||
background: rgba(187,220,255,0.16);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频">
|
||||
<div class="monitoring">
|
||||
<div class="bg">
|
||||
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btn" @click="monitoringInfo()">上墙</div>
|
||||
<div class="btn">转发</div>
|
||||
</div>
|
||||
</div>
|
||||
</popup-title>
|
||||
</template>
|
||||
<script>
|
||||
import popupTitle from "../popupTitle/index.vue"
|
||||
export default {
|
||||
components:{popupTitle},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
monitoringClose(){
|
||||
this.$emit('monitoringClose')
|
||||
},
|
||||
monitoringInfo(){
|
||||
this.$emit('monitoringInfo')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitoring {
|
||||
padding: 11px 25px 24px 25px;
|
||||
.bg {
|
||||
background-image: url("../../../assets//images/popup/video.png");
|
||||
background-size: 100% 100%;
|
||||
width: 192px;
|
||||
height: 108px;
|
||||
padding: 2px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
.btn {
|
||||
background-image: url("../../../assets/images/popup/icon2btn.png");
|
||||
background-size: 100% 100%;
|
||||
width: 91px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-17 15:43:51
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-17 17:47:57
|
||||
-->
|
||||
<template>
|
||||
<div class="person-popup">
|
||||
<div class="popup-title">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="mask" @click="close()"></div>
|
||||
</div>
|
||||
<div class="person-main">
|
||||
<div class="person-info">
|
||||
<div class="dot"></div>
|
||||
<div class="name">李飞</div>
|
||||
<div class="position">执法1队队员</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div @click="getRoute()">行程轨迹</div>
|
||||
<div>附近队员</div>
|
||||
<div>位置分享</div>
|
||||
<div>任务派发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.$emit('personClose')
|
||||
},
|
||||
getRoute(){
|
||||
this.$emit('getRoute')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.person-popup {
|
||||
position: absolute;
|
||||
right: 540px;
|
||||
top: 20px;
|
||||
width: 242px;
|
||||
height: 244px;
|
||||
background-image: url("../../../assets/images/popup/bg1.png");
|
||||
background-size: 100% 100%;
|
||||
z-index: 600;
|
||||
.popup-title {
|
||||
padding: 9px 10px 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: 700;
|
||||
color: #E9F4FF;
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 194px;
|
||||
height: 30px;
|
||||
background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
|
||||
}
|
||||
.mask {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.person-main {
|
||||
padding: 12px 32px 25px 30px;
|
||||
.person-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #DAEBFF;
|
||||
box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
|
||||
border-radius: 20px 20px 20px 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.name,.position {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #E9F4FF;
|
||||
line-height: 14px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: grid;
|
||||
grid-column: 1fr;
|
||||
grid-row-gap: 6px;
|
||||
margin-top: 15px;
|
||||
div {
|
||||
background-image: url('../../../assets/images/popup/icon1btn.png');
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #D3EEF2;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="person-popup" :class="type == 2 ? 'event-popup': type == 3 ? 'car-popup': 'monitoring-popup'">
|
||||
<div class="popup-title">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="mask" @click="close()"></div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props:{
|
||||
mypopupTitle:{
|
||||
type:Object,
|
||||
default: function(){
|
||||
return {}
|
||||
}
|
||||
},
|
||||
title:{
|
||||
type:String,
|
||||
default:""
|
||||
},
|
||||
type:{
|
||||
type:Number,
|
||||
default:0,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.$emit('personClose')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.person-popup {
|
||||
position: absolute;
|
||||
right: 540px;
|
||||
top: 20px;
|
||||
width: 242px;
|
||||
height: 244px;
|
||||
background-image: url("../../../assets/images/popup/bg1.png");
|
||||
background-size: 100% 100%;
|
||||
z-index: 600;
|
||||
.popup-title {
|
||||
padding: 9px 10px 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: 700;
|
||||
color: #E9F4FF;
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 194px;
|
||||
height: 30px;
|
||||
background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
|
||||
}
|
||||
.mask {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.event-popup {
|
||||
width: 252px;
|
||||
height: 224px;
|
||||
background-image: url("../../../assets/images/popup/bg2.png");
|
||||
}
|
||||
.car-popup {
|
||||
width: 242px;
|
||||
height: 138px;
|
||||
background-image: url("../../../assets/images/popup/bg3.png");
|
||||
}
|
||||
.monitoring-popup {
|
||||
width: 242px;
|
||||
height: 230px;
|
||||
background-image: url("../../../assets/images/popup/bg4.png");
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-15 09:52:05
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-16 13:13:48
|
||||
-->
|
||||
<template>
|
||||
<div class="mytitle">
|
||||
<div class="title-text">
|
||||
{{ title }}
|
||||
</div>
|
||||
<!-- <div class="title-num" v-show="numShow > 0">
|
||||
{{ numShow }} <span>条</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '默认标题'
|
||||
},
|
||||
// numShow: {
|
||||
// type: Number,
|
||||
// default: 0
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/styles/utils.scss';
|
||||
.mytitle {
|
||||
height: 38px;
|
||||
line-height: vh(40);
|
||||
width: 100%;
|
||||
background-image: url('../../../assets/images/img_titlebg@2x.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title-text {
|
||||
font-size: vw(22);
|
||||
letter-spacing: vw(2);
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: #e9eff5;
|
||||
text-align: left;
|
||||
padding-left: vw(30);
|
||||
}
|
||||
.title-num {
|
||||
margin-right: vw(15);
|
||||
font-size: vw(20);
|
||||
font-family: 'DIN';
|
||||
font-weight: bold;
|
||||
color: #32fcc5;
|
||||
& span {
|
||||
font-size: vw(14);
|
||||
font-family: 'Regular';
|
||||
font-weight: 400;
|
||||
color: #c7cddb;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-17 10:50:58
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-17 11:06:13
|
||||
-->
|
||||
<template>
|
||||
<div class="myvideo">
|
||||
<video controls>
|
||||
<source src="@/assets/images/video/big_buck_bunny.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.myvideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: JC9527
|
||||
* @Date: 2023-08-17 10:41:06
|
||||
* @LastEditors: JC9527
|
||||
* @LastEditTime: 2023-08-17 18:28:52
|
||||
-->
|
||||
<template>
|
||||
<dia-log ref="dialog3" width="565px" title="视频墙">
|
||||
<div class="video-main">
|
||||
<div class="main-item" v-for="(item,index) in 9" :key="index"></div>
|
||||
</div>
|
||||
</dia-log>
|
||||
</template>
|
||||
<script>
|
||||
import diaLog from "../../components/dialog/index.vue"
|
||||
export default {
|
||||
components:{diaLog},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open() {
|
||||
this.$refs.dialog3.open('3');
|
||||
},
|
||||
Close() {
|
||||
this.$refs.dialog3.Close();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.video-main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 200px);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 15px;
|
||||
.main-item {
|
||||
// width: 248px;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue