614 lines
17 KiB
JavaScript
614 lines
17 KiB
JavaScript
|
|
||
|
|
// 在网页上使用高德API
|
||
|
|
// 在网页头部位置声明
|
||
|
|
window._AMapSecurityConfig = {
|
||
|
|
securityJsCode: 'c093878ad110aeadf3f2e6854ada1f6c',
|
||
|
|
}
|
||
|
|
var lat = '107.01256'
|
||
|
|
var lng = '29.777093'
|
||
|
|
|
||
|
|
|
||
|
|
const markers_pos = [
|
||
|
|
["106.966331,29.793454", "l"],
|
||
|
|
["107.003196,29.784273", "l"],
|
||
|
|
["107.015512,29.792728", "l"],
|
||
|
|
["107.045725,29.780213", "l"],
|
||
|
|
["107.045544,29.777595", "l"],
|
||
|
|
["107.054068,29.794411", "l"],
|
||
|
|
["106.980254,29.813962", "l"],
|
||
|
|
["106.987378,29.818169", "l"],
|
||
|
|
["106.984116,29.822749", "l"],
|
||
|
|
["107.044095,29.782846", "s"],
|
||
|
|
["107.019512,29.785516", "l"],
|
||
|
|
["107.050346,29.817561", "s"],
|
||
|
|
["106.975558,29.815869", "s"],
|
||
|
|
["106.984753,29.818885", "s"],
|
||
|
|
["106.977999,29.83126", "s"],
|
||
|
|
["106.980611,29.833619", "s"],
|
||
|
|
["107.054259,29.798698", "u"],
|
||
|
|
["107.025699,29.792106", "u"],
|
||
|
|
["107.004842,29.77419", "u"],
|
||
|
|
["107.007932,29.786705", "u"],
|
||
|
|
["107.005658,29.796352", "u"],
|
||
|
|
["106.980509,29.800336", "u"],
|
||
|
|
["106.978621,29.804433", "u"],
|
||
|
|
["106.995358,29.807672", "u"],
|
||
|
|
["106.980853,29.825173", "u"],
|
||
|
|
["106.987934,29.829491", "u"],
|
||
|
|
["106.981754,29.836974", "u"],
|
||
|
|
["106.985101,29.838724", "u"],
|
||
|
|
["107.045577,29.777609", "c"],
|
||
|
|
["107.003992,29.787983", "c"],
|
||
|
|
["107.009292,29.795189", "c"],
|
||
|
|
["106.99602,29.808735", "c"],
|
||
|
|
["106.998767,29.810923", "c"],
|
||
|
|
["106.986096,29.821339", "c"],
|
||
|
|
["106.997383,29.849334", "c"],
|
||
|
|
["106.997866,29.850711", "c"],
|
||
|
|
["107.012382,29.857886", "c"],
|
||
|
|
["107.044109,29.792248", "d"],
|
||
|
|
["107.023338,29.787294", "d"],
|
||
|
|
["106.995228,29.779473", "d"],
|
||
|
|
["107.046662,29.795115", "h"],
|
||
|
|
["107.021857,29.792918", "h"],
|
||
|
|
["107.034066,29.804668", "h"],
|
||
|
|
["107.056468,29.817998", "h"],
|
||
|
|
["107.005817,29.842048", "h"],
|
||
|
|
["106.972071,29.813358", "f"],
|
||
|
|
["106.972329,29.819586", "f"],
|
||
|
|
["106.970312,29.823495", "f"],
|
||
|
|
["107.015416,29.811245", "p"],
|
||
|
|
["107.005889,29.813517", "p"],
|
||
|
|
["106.997391,29.827926", "p"],
|
||
|
|
["106.990214,29.831379", "p"],
|
||
|
|
["106.966769,29.796498", "m"],
|
||
|
|
["106.972348,29.806702", "m"],
|
||
|
|
["107.003763,29.811394", "m"],
|
||
|
|
["106.990716,29.8175", "m"],
|
||
|
|
["106.993463,29.827628", "m"],
|
||
|
|
["107.002046,29.829191", "m"],
|
||
|
|
["106.989858,29.837754", "m"],
|
||
|
|
["107.002561,29.859194", "m"],
|
||
|
|
["107.033013,29.762547", "g"],
|
||
|
|
["106.994796,29.794357", "g"],
|
||
|
|
["107.005525,29.798602", "g"],
|
||
|
|
["106.98926,29.810444", "g"],
|
||
|
|
["106.981493,29.812046", "g"],
|
||
|
|
["106.979175,29.817445", "g"],
|
||
|
|
["106.996492,29.835371", "g"],
|
||
|
|
["106.97233,29.829526", "v"],
|
||
|
|
["106.982973,29.815006", "v"],
|
||
|
|
["107.011641,29.786033", "v"],
|
||
|
|
["107.049921,29.792327", "v"],
|
||
|
|
["107.033699,29.761504", "y"],
|
||
|
|
["107.050737,29.797225", "y"],
|
||
|
|
["107.005933,29.788696", "y"],
|
||
|
|
["107.007864,29.791303", "y"],
|
||
|
|
["106.99735,29.806125", "y"],
|
||
|
|
["106.977437,29.813796", "y"],
|
||
|
|
["106.98881,29.819399", "y"],
|
||
|
|
["106.988874,29.850187", "y"],
|
||
|
|
["107.013035,29.848363", "y"],
|
||
|
|
["107.012993,29.798919", "_"],
|
||
|
|
["107.011963,29.823942", "_"],
|
||
|
|
["107.004409,29.831686", "_"],
|
||
|
|
["107.072216,29.832951", "_"],
|
||
|
|
["107.09127,29.863251", "_"],
|
||
|
|
["107.049857,29.784133", "b"],
|
||
|
|
["107.003251,29.768042", "b"],
|
||
|
|
["107.011233,29.791508", "b"],
|
||
|
|
["107.065714,29.822583", "b"],
|
||
|
|
["107.084854,29.818897", "b"],
|
||
|
|
["107.079286,29.864469", "b"],
|
||
|
|
["106.991502,29.819465", "b"],
|
||
|
|
["107.005321,29.849284", "b"]
|
||
|
|
]
|
||
|
|
|
||
|
|
stopcolor = '#ff0000'
|
||
|
|
livcolor = '#e89393'
|
||
|
|
lv1color = "#ff0000"
|
||
|
|
lv2color = "#a08e8e"
|
||
|
|
lv3color = '#d2db00'
|
||
|
|
lv4color = '#f29b76'
|
||
|
|
overlayGroups = {
|
||
|
|
fac: [],
|
||
|
|
car: [],
|
||
|
|
enter: {},
|
||
|
|
road: [],
|
||
|
|
truth: [],
|
||
|
|
}
|
||
|
|
overlayGroups.truth = {nor: [], no: [], warn: []};
|
||
|
|
var truthColor = {nor: '#1b2538', warn: '#46A162', no: '#6A005F'}
|
||
|
|
|
||
|
|
|
||
|
|
function dataHandle(data) {
|
||
|
|
let lv1 = [], lv2 = [], lv3 = [], lv4 = [];
|
||
|
|
data.filter(function (i) {
|
||
|
|
var res;
|
||
|
|
if (i.region_type === 8) {
|
||
|
|
// console.log('停车场',i.name)
|
||
|
|
//停车场
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#D1C667',//stopcolor
|
||
|
|
fillOpacity: 1,
|
||
|
|
strokeColor: '#D1C667',//stopcolor
|
||
|
|
extData: {
|
||
|
|
type: 'stop',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
} else if (i.region_type === 3) {
|
||
|
|
// console.log('居住区',i.name)
|
||
|
|
//居住区
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#F948F7',//livcolor
|
||
|
|
fillOpacity: 1,
|
||
|
|
strokeColor: '#F948F7',//livcolor
|
||
|
|
extData: {
|
||
|
|
type: 'live',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
} else if (i.region_type === 4) {
|
||
|
|
// console.log('森林防护区',i.name)
|
||
|
|
//森林防护区
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#26c533',
|
||
|
|
strokeColor: '#26c533',
|
||
|
|
fillOpacity: 1,
|
||
|
|
extData: {
|
||
|
|
type: 'tree',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}else if (i.region_type === 1) {
|
||
|
|
// console.log('工贸企业区',i.name)
|
||
|
|
//工贸企业区
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#499C9F',
|
||
|
|
strokeColor: '#499C9F',
|
||
|
|
fillOpacity: 1,
|
||
|
|
extData: {
|
||
|
|
type: 'tree',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}else if (i.region_type === 2) {
|
||
|
|
// console.log('化工企业区',i.name)
|
||
|
|
//化工企业区
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#535332',
|
||
|
|
strokeColor: '#535332',
|
||
|
|
fillOpacity: 1,
|
||
|
|
extData: {
|
||
|
|
type: 'tree',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}else if (i.region_type === 5) {
|
||
|
|
// console.log('道路区域',i.name)
|
||
|
|
//道路区域
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#AED54C',
|
||
|
|
strokeColor: '#AED54C',
|
||
|
|
fillOpacity: 1,
|
||
|
|
extData: {
|
||
|
|
type: 'tree',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}else if (i.region_type === 6) {
|
||
|
|
// console.log('企业区域',i.name)
|
||
|
|
//企业区域
|
||
|
|
overlayGroups.fac.push(lvOverRender(i, {
|
||
|
|
fillColor: '#C76813',
|
||
|
|
strokeColor: '#C76813',
|
||
|
|
fillOpacity: 1,
|
||
|
|
extData: {
|
||
|
|
type: 'tree',
|
||
|
|
name: i.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
} else {
|
||
|
|
res = true;
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
|
||
|
|
}).forEach(i => {
|
||
|
|
|
||
|
|
if (i.info) {
|
||
|
|
let stys = {}
|
||
|
|
if (i.region_type == 5) {
|
||
|
|
stys = {
|
||
|
|
[i.id]: {
|
||
|
|
fillColor: '#000000',
|
||
|
|
fillOpacity: .1,
|
||
|
|
strokeColor: '#000000',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var over = lvOverRender(i, stys[i.id] || {})
|
||
|
|
switch (i.region_lv) {
|
||
|
|
case 22:
|
||
|
|
lv1.push(over);
|
||
|
|
break;
|
||
|
|
case 20:
|
||
|
|
lv2.push(over);
|
||
|
|
break;
|
||
|
|
case 21:
|
||
|
|
lv3.push(over);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
lv4.push(over);
|
||
|
|
break;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
overlayGroups.enter = {
|
||
|
|
lv1, lv2, lv3, lv4
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//公共方法
|
||
|
|
function strToLL(str) {
|
||
|
|
return str.split(';').map(i => new LngLat(...i.split(',').map(j => +j)))
|
||
|
|
}
|
||
|
|
|
||
|
|
// 区域数据
|
||
|
|
function lvOverRender(i, sty) {
|
||
|
|
var style = {};
|
||
|
|
|
||
|
|
style = {
|
||
|
|
fillOpacity: {
|
||
|
|
1: 1,//0
|
||
|
|
2: .5,
|
||
|
|
3: .5,
|
||
|
|
4: 1,
|
||
|
|
},
|
||
|
|
fillColor: {
|
||
|
|
1: lv1color,
|
||
|
|
2: lv2color,
|
||
|
|
3: lv3color,
|
||
|
|
4: lv4color
|
||
|
|
},
|
||
|
|
strokeOpacity: {
|
||
|
|
1: 1,
|
||
|
|
2: 1,
|
||
|
|
3: 1,
|
||
|
|
4: 1
|
||
|
|
},
|
||
|
|
strokeColor: {
|
||
|
|
1: lv1color,
|
||
|
|
2: lv2color,
|
||
|
|
3: lv3color,
|
||
|
|
4: lv4color
|
||
|
|
},
|
||
|
|
strokeWeight: {
|
||
|
|
1: 3,
|
||
|
|
2: 2,
|
||
|
|
3: 0,
|
||
|
|
4: 0,
|
||
|
|
},
|
||
|
|
zIndex: {
|
||
|
|
1: 21,
|
||
|
|
2: 22,
|
||
|
|
3: 23,
|
||
|
|
4: 24
|
||
|
|
},
|
||
|
|
strokeStyle: {
|
||
|
|
1: 'dashed',//dashed
|
||
|
|
2: 'solid',
|
||
|
|
3: 'solid',
|
||
|
|
4: 'solid',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
var poy = new AMap.Polygon({
|
||
|
|
map: map,
|
||
|
|
path: i.info ? strToLL(i.info) : '',
|
||
|
|
extData: i,
|
||
|
|
...(function () {
|
||
|
|
var obj = {};
|
||
|
|
for (var j in style) {
|
||
|
|
const region_lv = i.region_lv == 20 ? 2 : (i.region_lv == 21 ? 3 : (i.region_lv == 22 ? 1 : 4))
|
||
|
|
obj[j] = style[j][region_lv]
|
||
|
|
|
||
|
|
if (region_lv == 1 && i.id == 1) {
|
||
|
|
// 计算区域面积
|
||
|
|
var area = Math.round(AMap.GeometryUtil.ringArea(strToLL(i.info)));
|
||
|
|
// console.log(area)
|
||
|
|
var text = new AMap.Text({
|
||
|
|
position: new AMap.LngLat(107.01256, 29.777093),
|
||
|
|
text: '区域面积' + area + '平方米',
|
||
|
|
offset: new AMap.Pixel(-20, -20)
|
||
|
|
})
|
||
|
|
map.add(text);
|
||
|
|
map.setFitView();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return obj
|
||
|
|
})(),
|
||
|
|
...(sty || {})
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
map.add(poy)
|
||
|
|
poy.on('click', function (e) {
|
||
|
|
// console.log('区域信息',e.target.getExtData())
|
||
|
|
openInfo(e.target.getExtData().name, e.lnglat)
|
||
|
|
})
|
||
|
|
|
||
|
|
return poy;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 卡口
|
||
|
|
var kk = `107.027841,29.759073;107.034279,29.762086;106.997726,29.824484;107.059954,29.820257;107.043592,29.83791;107.016477,29.871028;106.962953,29.790122`;
|
||
|
|
function kkRender() {
|
||
|
|
strToLL(kk).map(i => {
|
||
|
|
new AMap.Marker({
|
||
|
|
position: i,
|
||
|
|
map: map,
|
||
|
|
icon: '/web/static/icon/tuli_kakou.png'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var carlist = [],
|
||
|
|
timer,
|
||
|
|
markerEvent = e => {
|
||
|
|
let pos = e.pixel;
|
||
|
|
this.carInfo = e.target.getExtData();
|
||
|
|
this.infoVis = true;
|
||
|
|
this.zjinforvis = false;
|
||
|
|
this.infoPos = {
|
||
|
|
left: `${pos.x + 10}px`,
|
||
|
|
top: `${pos.y - 120}px`
|
||
|
|
}
|
||
|
|
timer && clearTimeout(timer);
|
||
|
|
|
||
|
|
timer = setTimeout(e => {
|
||
|
|
this.infoVis = false
|
||
|
|
}, 5e3);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
function CarMarkers() {
|
||
|
|
this.list = [];
|
||
|
|
this.data = [];
|
||
|
|
Object.defineProperty(this, 'ids', {
|
||
|
|
get() {
|
||
|
|
return this.data.map(i => i.id);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
CarMarkers.prototype.getMarker = function (id) {
|
||
|
|
return this.list.filter(i => {
|
||
|
|
return i.getExtData().id === id
|
||
|
|
})[0];
|
||
|
|
}
|
||
|
|
CarMarkers.prototype.update = function (list) {
|
||
|
|
let markers = [], marker;
|
||
|
|
list.forEach(i => {
|
||
|
|
let lnglat = new LngLat(i.longitude, i.latitude);
|
||
|
|
i.type = "marker";
|
||
|
|
|
||
|
|
if (this.ids.includes(i.id)) {
|
||
|
|
marker = this.getMarker(i.id);
|
||
|
|
|
||
|
|
if (lnglat.toString() !== marker.getPosition().toString()) {
|
||
|
|
marker.setPosition(lnglat);
|
||
|
|
}
|
||
|
|
|
||
|
|
var _data = marker.getExtData();
|
||
|
|
|
||
|
|
marker.setIcon('icon/' + i.status + '.png'/*_data.vehicle_type?'icon/dingwei_red.png':_data.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png'*/);
|
||
|
|
|
||
|
|
|
||
|
|
marker.setExtData(i);
|
||
|
|
|
||
|
|
|
||
|
|
} else {
|
||
|
|
marker = new AMap.Marker({
|
||
|
|
icon: '/web/static/icon/' + i.status + '.png',//i.vehicle_type?'icon/dingwei_red.png':i.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png',
|
||
|
|
position: lnglat,
|
||
|
|
offset: new AMap.Pixel(-12, -12),
|
||
|
|
zIndex: 30 + i.id,
|
||
|
|
map: map,
|
||
|
|
extData: i
|
||
|
|
});
|
||
|
|
marker.on('click', markerEvent)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*if(this.form[1].zh.includes(i.status)){
|
||
|
|
marker.show();
|
||
|
|
}else{
|
||
|
|
marker.hide();
|
||
|
|
}*/
|
||
|
|
|
||
|
|
markers.push(marker)
|
||
|
|
})
|
||
|
|
let removeArr = [];
|
||
|
|
this.list.forEach(i => {
|
||
|
|
if (!markers.includes(i)) {
|
||
|
|
removeArr.push(i)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
map.remove(removeArr)
|
||
|
|
this.data = list;
|
||
|
|
this.list = markers;
|
||
|
|
// this.form[1].change();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
let car_markers = new CarMarkers();
|
||
|
|
|
||
|
|
|
||
|
|
// 配置地图icon
|
||
|
|
function showMarkers() {
|
||
|
|
const icons = {
|
||
|
|
_: '/web/static/icon/ht.png',
|
||
|
|
g: '/web/static/icon/fq.png',
|
||
|
|
u: '/web/static/icon/lv3.png',
|
||
|
|
c: '/web/static/icon/lv4.png',
|
||
|
|
l: '/web/static/icon/2.png',
|
||
|
|
y: '/web/static/icon/d.png',
|
||
|
|
v: '/web/static/icon/rs.png',
|
||
|
|
d: '/web/static/icon/w.png',
|
||
|
|
h: '/web/static/icon/ws.png',
|
||
|
|
s: '/web/static/icon/lv1.png',
|
||
|
|
b: '/web/static/icon/ot.png',
|
||
|
|
m: '/web/static/icon/pp.png',
|
||
|
|
f: '/web/static/icon/fs.png',
|
||
|
|
p: '/web/static/icon/b.png',
|
||
|
|
stop: '/web/static/icon/p.png'
|
||
|
|
}
|
||
|
|
let geoJson = markers_pos.map(i => {
|
||
|
|
console.log('iiiiiii',i)
|
||
|
|
return {
|
||
|
|
path: i[0],
|
||
|
|
type: i[1]
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
markers = geoJson.map(i => {
|
||
|
|
return new AMap.Marker({
|
||
|
|
position: strToLL(i.path)[0],
|
||
|
|
icon: new AMap.Icon({
|
||
|
|
size: new AMap.Size(23, 23),
|
||
|
|
image: icons[i.type],
|
||
|
|
imageSize: new AMap.Size(15, 15),
|
||
|
|
}),
|
||
|
|
anchor: 'bottom-center',
|
||
|
|
offset: new AMap.Pixel(0, 0),
|
||
|
|
content: !icons[i.type] && `<span style="color:#fff">${i.type}</span>`,
|
||
|
|
map: map,
|
||
|
|
extData: i,
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
overlayGroups.fac = markers;
|
||
|
|
return markers;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 提取vm公共部分
|
||
|
|
var mixin = {
|
||
|
|
filters: { //过滤器
|
||
|
|
status(n) {
|
||
|
|
console.log('过滤器',n)
|
||
|
|
switch (n) {
|
||
|
|
case -1:
|
||
|
|
return '区域外行驶';
|
||
|
|
case 0:
|
||
|
|
return '正常';
|
||
|
|
case 1:
|
||
|
|
return '超速';
|
||
|
|
case 2:
|
||
|
|
return '禁行/禁停';
|
||
|
|
case 3:
|
||
|
|
return '禁停/禁行';
|
||
|
|
case 4:
|
||
|
|
return '未上报';
|
||
|
|
case 5:
|
||
|
|
return '超最大数量'
|
||
|
|
default:
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: function () {
|
||
|
|
return {
|
||
|
|
name: '封闭园区运营中心',
|
||
|
|
currentTime: '',
|
||
|
|
showSidebar: false,
|
||
|
|
infoPos: {
|
||
|
|
left: '0px',
|
||
|
|
top: '0px'
|
||
|
|
},
|
||
|
|
zjinfor: {},
|
||
|
|
zjinforvis: false,
|
||
|
|
carInfo: {},
|
||
|
|
infoVis: false,
|
||
|
|
vis: false,
|
||
|
|
linKey: "",
|
||
|
|
search: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
enterModel() {
|
||
|
|
|
||
|
|
var ef = this.form.filter(i => i.tit === '周界')[0],
|
||
|
|
sf = this.form.filter(i => i.tit === '周界筛选禁行')[0];
|
||
|
|
return {
|
||
|
|
lv: ef.model,
|
||
|
|
isSec: sf.val,
|
||
|
|
sec: sf.model
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.startTimer()
|
||
|
|
this.getData()
|
||
|
|
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this.stopTimer(); // 清除定时器以避免内存泄漏
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 头部跳转
|
||
|
|
toPath(url) {
|
||
|
|
window.location.href = '/index/datav/' + url
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 开启定时器
|
||
|
|
startTimer() {
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
this.currentTime = this.getCurrentDateTime();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
// 关闭定时器
|
||
|
|
stopTimer() {
|
||
|
|
clearInterval(this.timer);
|
||
|
|
},
|
||
|
|
// 获取日期
|
||
|
|
getCurrentDateTime() {
|
||
|
|
const now = new Date();
|
||
|
|
const year = now.getFullYear();
|
||
|
|
const month = this.padNumber(now.getMonth() + 1);
|
||
|
|
const day = this.padNumber(now.getDate());
|
||
|
|
const hours = this.padNumber(now.getHours());
|
||
|
|
const minutes = this.padNumber(now.getMinutes());
|
||
|
|
const seconds = this.padNumber(now.getSeconds());
|
||
|
|
return (
|
||
|
|
year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
|
||
|
|
);
|
||
|
|
},
|
||
|
|
// 格式化<10的值
|
||
|
|
padNumber(num) {
|
||
|
|
return num < 10 ? '0' + num : num;
|
||
|
|
},
|
||
|
|
//隐藏或开启侧边栏
|
||
|
|
toggleSidebar() {
|
||
|
|
this.showSidebar = !this.showSidebar
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|