|
@@ -1,5 +1,6 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
|
|
+ <div>
|
|
|
|
+
|
|
<div class="map">
|
|
<div class="map">
|
|
<supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
|
|
<supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
|
|
:yxtSltProps="sltProps"></supermap>
|
|
:yxtSltProps="sltProps"></supermap>
|
|
@@ -11,12 +12,13 @@
|
|
<!--头部开始-->
|
|
<!--头部开始-->
|
|
<div class="header">
|
|
<div class="header">
|
|
<h1>城市运行一网统管指挥中心</h1>
|
|
<h1>城市运行一网统管指挥中心</h1>
|
|
- <div class="map_tab">
|
|
|
|
- <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
|
|
|
|
- <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="map_tab">
|
|
|
|
+ <button @click="sltHandle" class="on">矢量图</button>
|
|
|
|
+ <button @click="yxtHandle">影像图</button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <!--头部结束-->
|
|
|
|
|
|
+ <!--头部结束-->
|
|
|
|
+
|
|
<!--左侧开始-->
|
|
<!--左侧开始-->
|
|
<div class="left_con sprh-left">
|
|
<div class="left_con sprh-left">
|
|
<div class="top_txt">
|
|
<div class="top_txt">
|
|
@@ -60,8 +62,8 @@
|
|
<div class="right_con sprh-left">
|
|
<div class="right_con sprh-left">
|
|
<div class="top_txt">
|
|
<div class="top_txt">
|
|
<span>{{ currentTime }}</span>
|
|
<span>{{ currentTime }}</span>
|
|
- <!-- <span>星期六</span>-->
|
|
|
|
- <!-- <b>11:16:58</b>-->
|
|
|
|
|
|
+<!-- <span>星期六</span>-->
|
|
|
|
+<!-- <b>11:16:58</b>-->
|
|
</div>
|
|
</div>
|
|
<!-- 资源分布-->
|
|
<!-- 资源分布-->
|
|
<div class="qkq_tdzy">
|
|
<div class="qkq_tdzy">
|
|
@@ -77,10 +79,10 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:220px;"></div>
|
|
|
|
|
|
+ <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:240px;"></div>
|
|
<!-- 资源分布-->
|
|
<!-- 资源分布-->
|
|
<div class="qkq_tdzy">
|
|
<div class="qkq_tdzy">
|
|
- <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
|
|
|
|
|
|
+ <div class="qkq_tit ">设备实时在线情况</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbzs">
|
|
<div class="sbzs">
|
|
<p>设备总数:</p>
|
|
<p>设备总数:</p>
|
|
@@ -102,12 +104,14 @@
|
|
<h2 class="lxsb_sl">234<i>个</i></h2>
|
|
<h2 class="lxsb_sl">234<i>个</i></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="qkq_bmfw">
|
|
|
|
- <div class="qkq_tit ">摄像头统计</div>
|
|
|
|
- <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 220px"></div>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
- <!--右侧结束-->
|
|
|
|
|
|
+ <!--右侧结束-->
|
|
|
|
+ <!-- 点位图例 开始 -->
|
|
|
|
+ <div class="dwtl">
|
|
|
|
+ <p><span class="jdlm"></span>街道路面</p>
|
|
|
|
+ <p><span class="xqnb"></span>小区内部</p>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 点位图例 结束 -->
|
|
<!--底部开始-->
|
|
<!--底部开始-->
|
|
<div class="footer">
|
|
<div class="footer">
|
|
<div class="nav-bottom">
|
|
<div class="nav-bottom">
|
|
@@ -118,7 +122,7 @@
|
|
<div class="nav-li-left">
|
|
<div class="nav-li-left">
|
|
<span>城市管理</span>
|
|
<span>城市管理</span>
|
|
</div>
|
|
</div>
|
|
- <div class="nav-li-left on" @click="handleNavigation('jtzl')">
|
|
|
|
|
|
+ <div class="nav-li-left on">
|
|
<span>交通治理</span>
|
|
<span>交通治理</span>
|
|
</div>
|
|
</div>
|
|
<div class="nav-li-left" @click="handleNavigation('jczl')">
|
|
<div class="nav-li-left" @click="handleNavigation('jczl')">
|
|
@@ -170,9 +174,7 @@ export default {
|
|
dropdownVisible: false,
|
|
dropdownVisible: false,
|
|
cameras: [],
|
|
cameras: [],
|
|
sltProps: null,
|
|
sltProps: null,
|
|
- currentTime: '',
|
|
|
|
- btnOne: false,
|
|
|
|
- btnTwo: false
|
|
|
|
|
|
+ currentTime: ''
|
|
};
|
|
};
|
|
// 可根据实际情况添加更多设备列表
|
|
// 可根据实际情况添加更多设备列表
|
|
},
|
|
},
|
|
@@ -183,7 +185,6 @@ export default {
|
|
this.deviceOnline();
|
|
this.deviceOnline();
|
|
this.deviceOffline();
|
|
this.deviceOffline();
|
|
this.cameraList();
|
|
this.cameraList();
|
|
- this.regionTop();
|
|
|
|
// 每秒刷新时间
|
|
// 每秒刷新时间
|
|
setInterval(() => {
|
|
setInterval(() => {
|
|
this.getCurrentTime();
|
|
this.getCurrentTime();
|
|
@@ -192,14 +193,10 @@ export default {
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
sltHandle() {
|
|
sltHandle() {
|
|
- this.btnOne = true
|
|
|
|
- this.btnTwo = false
|
|
|
|
- this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
|
|
|
|
|
|
+ this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
|
|
},
|
|
},
|
|
yxtHandle() {
|
|
yxtHandle() {
|
|
- this.btnTwo = true
|
|
|
|
- this.btnOne = false
|
|
|
|
- this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
|
|
|
|
|
|
+ this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
|
|
},
|
|
},
|
|
handleNavigation(route) {
|
|
handleNavigation(route) {
|
|
this.$router.push({path: route});
|
|
this.$router.push({path: route});
|
|
@@ -219,12 +216,12 @@ export default {
|
|
//资源分布
|
|
//资源分布
|
|
var myChart = echarts.init(document.getElementById('sprh-zyfb'));
|
|
var myChart = echarts.init(document.getElementById('sprh-zyfb'));
|
|
let data = [
|
|
let data = [
|
|
- {value: 0, label: '前程街道'},
|
|
|
|
- {value: 0, label: '富民街道'},
|
|
|
|
- {value: 0, label: '广兴街道'},
|
|
|
|
- {value: 0, label: '东风街道'},
|
|
|
|
- {value: 0, label: '锦绣街道'},
|
|
|
|
- {value: 0, label: '锦程街道'}
|
|
|
|
|
|
+ { value: 0, label: '前程街道' },
|
|
|
|
+ { value: 0, label: '富民街道' },
|
|
|
|
+ { value: 0, label: '广兴街道' },
|
|
|
|
+ { value: 0, label: '东风街道' },
|
|
|
|
+ { value: 0, label: '锦绣街道' },
|
|
|
|
+ { value: 0, label: '锦程街道' }
|
|
];
|
|
];
|
|
let option = {
|
|
let option = {
|
|
grid: {
|
|
grid: {
|
|
@@ -328,7 +325,7 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
- option.series[1].data = data.map(({value}, index) => {
|
|
|
|
|
|
+ option.series[1].data = data.map(({ value }, index) => {
|
|
let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
|
|
let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
|
|
offset: 1,
|
|
offset: 1,
|
|
color: '#004eaf'
|
|
color: '#004eaf'
|
|
@@ -339,8 +336,8 @@ export default {
|
|
|
|
|
|
return {
|
|
return {
|
|
value,
|
|
value,
|
|
- label: {color},
|
|
|
|
- itemStyle: {color}
|
|
|
|
|
|
+ label: { color },
|
|
|
|
+ itemStyle: { color }
|
|
};
|
|
};
|
|
});
|
|
});
|
|
|
|
|
|
@@ -421,8 +418,8 @@ export default {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
color: [
|
|
color: [
|
|
[0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
[0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
- {offset: 0, color: '#0d4470'},
|
|
|
|
- {offset: 1, color: '#0659c9'}
|
|
|
|
|
|
+ { offset: 0, color: '#0d4470' },
|
|
|
|
+ { offset: 1, color: '#0659c9' }
|
|
])],
|
|
])],
|
|
[1, '#15337C'],
|
|
[1, '#15337C'],
|
|
],
|
|
],
|
|
@@ -601,133 +598,6 @@ export default {
|
|
|
|
|
|
this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
|
|
this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
|
|
},
|
|
},
|
|
-
|
|
|
|
- regionTop() {
|
|
|
|
- //摄像头统计
|
|
|
|
- var myChart = echarts.init(document.getElementById('jczl-bmfw'));
|
|
|
|
- let data = ['小区建设', '路面建设', '已有']
|
|
|
|
- let valueData = [];
|
|
|
|
- let labelData = []
|
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
|
- labelData.push(data[i]);
|
|
|
|
- var lineNumber = Math.floor(Math.random() * 2000);
|
|
|
|
- valueData.push(lineNumber);
|
|
|
|
- }
|
|
|
|
- var option = {
|
|
|
|
- title: {
|
|
|
|
- show: true,
|
|
|
|
- text: '',
|
|
|
|
- textStyle: {
|
|
|
|
- color: '#fff',
|
|
|
|
- fontSize: '14',
|
|
|
|
- },
|
|
|
|
- top: '0%',
|
|
|
|
- left: 'bottom',
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- trigger: 'axis',
|
|
|
|
- axisPointer: {
|
|
|
|
- type: 'shadow'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- grid: {
|
|
|
|
- top: '10%',
|
|
|
|
- left: '15%',
|
|
|
|
- right: '5%',
|
|
|
|
- buttom: '0',
|
|
|
|
- },
|
|
|
|
- xAxis: {
|
|
|
|
- type: 'category',
|
|
|
|
- axisLine: {
|
|
|
|
- lineStyle: {
|
|
|
|
- color: 'rgba(255,255,255,0.12)',
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- margin: 10,
|
|
|
|
- color: '#e2e9ff',
|
|
|
|
- textStyle: {
|
|
|
|
- fontSize: 14
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- axisTick: {
|
|
|
|
- show: false,
|
|
|
|
- },
|
|
|
|
- data: labelData
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- name: '',
|
|
|
|
- nameTextStyle: {
|
|
|
|
- color: '#fff',
|
|
|
|
- },
|
|
|
|
- type: 'value',
|
|
|
|
- axisLine: {
|
|
|
|
- show: false,
|
|
|
|
- lineStyle: {
|
|
|
|
- color: 'rgba(255,255,255,0.12)'
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- axisLabel: {
|
|
|
|
- formatter: '{value}',
|
|
|
|
- color: '#e2e9ff',
|
|
|
|
- },
|
|
|
|
- splitLine: {
|
|
|
|
- lineStyle: {
|
|
|
|
- color: 'rgba(255,255,255,0.12)'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- axisTick: {
|
|
|
|
- show: true,
|
|
|
|
- lineStyle: {
|
|
|
|
- color: '#fff',
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- series: [{
|
|
|
|
- itemStyle: {
|
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: 'rgba(30, 129, 204, 1.0)'
|
|
|
|
- }, {
|
|
|
|
- offset: 1,
|
|
|
|
- color: 'rgba(21, 37, 126, 1.0)'
|
|
|
|
- }], false),
|
|
|
|
- barBorderRadius: 8,
|
|
|
|
- opacity: 0.8
|
|
|
|
- },
|
|
|
|
- barWidth: 14,
|
|
|
|
- label: {
|
|
|
|
- show: true,
|
|
|
|
- position: ['0', '-12'],
|
|
|
|
- color: '#fff',
|
|
|
|
- },
|
|
|
|
- data: valueData,
|
|
|
|
- type: 'bar',
|
|
|
|
- }]
|
|
|
|
- };
|
|
|
|
- var currentIndex = -1;
|
|
|
|
- var timer = setInterval(function () {
|
|
|
|
- // 生成新的随机数据
|
|
|
|
- currentIndex++;
|
|
|
|
- if (currentIndex >= 3) {
|
|
|
|
- currentIndex = 0;
|
|
|
|
- for (var i = 0; i < valueData.length; i++) {
|
|
|
|
- valueData[i] = Math.floor(Math.random() * 2000);
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- valueData[currentIndex] = Math.floor(Math.random() * 2000);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 更新 option 中的数据
|
|
|
|
- option.series[0].data = valueData;
|
|
|
|
-
|
|
|
|
- // 重新渲染图表
|
|
|
|
- myChart.setOption(option);
|
|
|
|
- }, 1000); // 每秒更新一次数据
|
|
|
|
- if (option) {
|
|
|
|
- myChart.setOption(option);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|