|
@@ -1,6 +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>
|
|
@@ -12,12 +12,12 @@
|
|
<!--头部开始-->
|
|
<!--头部开始-->
|
|
<div class="header">
|
|
<div class="header">
|
|
<h1>城市运行一网统管指挥中心</h1>
|
|
<h1>城市运行一网统管指挥中心</h1>
|
|
- <div class="map_tab">
|
|
|
|
- <button @click="sltHandle" class="on">矢量图</button>
|
|
|
|
- <button @click="yxtHandle">影像图</button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="map_tab">
|
|
|
|
+ <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
|
|
|
|
+ <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <!--头部结束-->
|
|
|
|
|
|
+ <!--头部结束-->
|
|
|
|
|
|
<!--左侧开始-->
|
|
<!--左侧开始-->
|
|
<div class="left_con sprh-left">
|
|
<div class="left_con sprh-left">
|
|
@@ -62,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">
|
|
@@ -104,14 +104,18 @@
|
|
<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 class="dwtl">
|
|
|
|
+ <p><span class="jdlm"></span>街道路面</p>
|
|
|
|
+ <p><span class="xqnb"></span>小区内部</p>
|
|
</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">
|
|
@@ -174,7 +178,9 @@ export default {
|
|
dropdownVisible: false,
|
|
dropdownVisible: false,
|
|
cameras: [],
|
|
cameras: [],
|
|
sltProps: null,
|
|
sltProps: null,
|
|
- currentTime: ''
|
|
|
|
|
|
+ currentTime: '',
|
|
|
|
+ btnOne: false,
|
|
|
|
+ btnTwo: false,
|
|
};
|
|
};
|
|
// 可根据实际情况添加更多设备列表
|
|
// 可根据实际情况添加更多设备列表
|
|
},
|
|
},
|
|
@@ -185,6 +191,7 @@ export default {
|
|
this.deviceOnline();
|
|
this.deviceOnline();
|
|
this.deviceOffline();
|
|
this.deviceOffline();
|
|
this.cameraList();
|
|
this.cameraList();
|
|
|
|
+ this.regionTop();
|
|
// 每秒刷新时间
|
|
// 每秒刷新时间
|
|
setInterval(() => {
|
|
setInterval(() => {
|
|
this.getCurrentTime();
|
|
this.getCurrentTime();
|
|
@@ -193,10 +200,14 @@ export default {
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
sltHandle() {
|
|
sltHandle() {
|
|
- this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
|
|
|
|
|
|
+ this.btnOne = true
|
|
|
|
+ this.btnTwo = false
|
|
|
|
+ this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
|
|
},
|
|
},
|
|
yxtHandle() {
|
|
yxtHandle() {
|
|
- this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
|
|
|
|
|
|
+ this.btnOne = false
|
|
|
|
+ this.btnTwo = true
|
|
|
|
+ this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
|
|
},
|
|
},
|
|
handleNavigation(route) {
|
|
handleNavigation(route) {
|
|
this.$router.push({path: route});
|
|
this.$router.push({path: route});
|
|
@@ -216,12 +227,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: {
|
|
@@ -325,7 +336,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'
|
|
@@ -336,8 +347,8 @@ export default {
|
|
|
|
|
|
return {
|
|
return {
|
|
value,
|
|
value,
|
|
- label: { color },
|
|
|
|
- itemStyle: { color }
|
|
|
|
|
|
+ label: {color},
|
|
|
|
+ itemStyle: {color}
|
|
};
|
|
};
|
|
});
|
|
});
|
|
|
|
|
|
@@ -418,8 +429,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'],
|
|
],
|
|
],
|
|
@@ -579,6 +590,133 @@ export default {
|
|
}, 1000); // 每100毫秒更新一次数据,可以根据需要调整时间间隔
|
|
}, 1000); // 每100毫秒更新一次数据,可以根据需要调整时间间隔
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ 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);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
getCurrentTime() {
|
|
getCurrentTime() {
|
|
const now = new Date();
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const year = now.getFullYear();
|