|
|
@@ -27,7 +27,7 @@
|
|
|
<!-- 设备tab开始-->
|
|
|
<div class="facility_tab">
|
|
|
<div class="div_tab">
|
|
|
- <a>单屏</a>
|
|
|
+ <a class="on">单屏</a>
|
|
|
<a>电视墙</a>
|
|
|
</div>
|
|
|
<div class="clear"></div>
|
|
|
@@ -53,8 +53,8 @@
|
|
|
</div>
|
|
|
<div class="scrollbar" style="height: 510px;">
|
|
|
<ul id="accordion" class="accordion">
|
|
|
-
|
|
|
- <li v-for="(camera, index) in cameras" :key="index">
|
|
|
+ <!-- lx_on 离线 zx_on在线 -->
|
|
|
+ <li v-for="(camera, index) in cameras" :key="index" class="lx_on">
|
|
|
<div class="link">{{ camera.cameraName }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -86,7 +86,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:220px;"></div>
|
|
|
+ <div id="sprh-zyfb" style="margin:-5px auto 10px auto; width: 350px; height:150px;"></div>
|
|
|
<!-- 资源分布-->
|
|
|
<div class="qkq_tdzy">
|
|
|
<div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
|
|
|
@@ -101,26 +101,26 @@
|
|
|
</div>
|
|
|
<div class="sb_cont">
|
|
|
<div class="sb_in">
|
|
|
- <div id="sprh-zxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
|
|
|
+ <div id="sprh-zxfb" style="width:130px; height:140px;margin: 0 auto;"></div>
|
|
|
<span class="zxsb">在线设备</span>
|
|
|
<h2 class="zxsb_sl">1234<i>个</i></h2>
|
|
|
</div>
|
|
|
<div class="sb_in">
|
|
|
- <div id="sprh-lxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
|
|
|
+ <div id="sprh-lxfb" style="width:130px; height:140px;margin: 0 auto;"></div>
|
|
|
<span class="lxsb">离线设备</span>
|
|
|
<h2 class="lxsb_sl">234<i>个</i></h2>
|
|
|
</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 id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 160px"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--右侧结束-->
|
|
|
<!-- 点位图例 开始 -->
|
|
|
<div class="dwtl">
|
|
|
- <p><span class="xqnb"></span>街道路面</p>
|
|
|
- <p><span class="jdlm"></span>小区内部</p>
|
|
|
+ <p><span class="xqnb"></span>街道路面(离线10/在线20)</p>
|
|
|
+ <p><span class="jdlm"></span>小区内部(离线10/在线20)</p>
|
|
|
</div>
|
|
|
<!-- 点位图例 结束 -->
|
|
|
<!--底部开始-->
|
|
|
@@ -243,10 +243,10 @@ export default {
|
|
|
];
|
|
|
let option = {
|
|
|
grid: {
|
|
|
- top: 10,
|
|
|
+ top: 0,
|
|
|
left: 33,
|
|
|
right: 20,
|
|
|
- bottom: 5,
|
|
|
+ bottom: 0,
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
@@ -264,11 +264,11 @@ export default {
|
|
|
series: [{
|
|
|
name: 'label',
|
|
|
type: 'bar',
|
|
|
- barWidth: 10,
|
|
|
+ barWidth: 6,
|
|
|
yAxisIndex: 0,
|
|
|
label: {
|
|
|
show: true,
|
|
|
- position: 2,
|
|
|
+ position: 4,
|
|
|
color: '#fff',
|
|
|
fontSize: 12
|
|
|
},
|
|
|
@@ -285,8 +285,8 @@ export default {
|
|
|
}, {
|
|
|
name: 'value',
|
|
|
type: 'bar',
|
|
|
- barWidth: 10,
|
|
|
- barMinHeight: 10, // 最小高度
|
|
|
+ barWidth: 8,
|
|
|
+ barMinHeight: 8, // 最小高度
|
|
|
yAxisIndex: 0,
|
|
|
label: {
|
|
|
show: true,
|
|
|
@@ -312,10 +312,10 @@ export default {
|
|
|
}, index) => {
|
|
|
let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
|
|
|
offset: 1,
|
|
|
- color: '#004eaf' // 0% 处的颜色
|
|
|
+ color: '#0e3eaf' // 0% 处的颜色
|
|
|
}, {
|
|
|
offset: 0,
|
|
|
- color: '#089aa2' // 100% 处的颜色
|
|
|
+ color: '#00ffff' // 100% 处的颜色
|
|
|
}], false)
|
|
|
return {
|
|
|
value,
|
|
|
@@ -346,10 +346,10 @@ export default {
|
|
|
option.series[1].data = data.map(({value}, index) => {
|
|
|
let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
|
|
|
offset: 1,
|
|
|
- color: '#004eaf'
|
|
|
+ color: '#2386ff'
|
|
|
}, {
|
|
|
offset: 0,
|
|
|
- color: '#089aa2'
|
|
|
+ color: '#00ffff'
|
|
|
}], false);
|
|
|
|
|
|
return {
|
|
|
@@ -412,13 +412,13 @@ export default {
|
|
|
rich: {
|
|
|
white: {
|
|
|
fontSize: 10,
|
|
|
- color: '#0454bf',
|
|
|
+ color: '#0463df',
|
|
|
fontWeight: '500',
|
|
|
},
|
|
|
bule: {
|
|
|
fontSize: 22,
|
|
|
fontFamily: 'DINBold',
|
|
|
- color: '#0454bf',
|
|
|
+ color: '#06bcf3',
|
|
|
fontWeight: '700',
|
|
|
},
|
|
|
},
|
|
|
@@ -427,7 +427,7 @@ export default {
|
|
|
data: dataArr,
|
|
|
title: {
|
|
|
show: true,
|
|
|
- color: '#0454bf',
|
|
|
+ color: '#06bcf3',
|
|
|
offsetCenter: ['0', '75%'],
|
|
|
fontSize: 14
|
|
|
},
|
|
|
@@ -436,10 +436,10 @@ export default {
|
|
|
lineStyle: {
|
|
|
color: [
|
|
|
[0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
- {offset: 0, color: '#0d4470'},
|
|
|
- {offset: 1, color: '#0659c9'}
|
|
|
+ {offset: 0, color: '#0e2c7f'},
|
|
|
+ {offset: 1, color: '#06bcf3'}
|
|
|
])],
|
|
|
- [1, '#15337C'],
|
|
|
+ [1, '#142b7c'],
|
|
|
],
|
|
|
width: 20,
|
|
|
shadowOffsetX: 0,
|
|
|
@@ -454,7 +454,7 @@ export default {
|
|
|
show: false,
|
|
|
length: 35,
|
|
|
lineStyle: {
|
|
|
- color: '#051c48',
|
|
|
+ color: '#142b7c',
|
|
|
width: 2,
|
|
|
type: 'solid',
|
|
|
},
|
|
|
@@ -483,11 +483,11 @@ export default {
|
|
|
const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#976204', // 0% 处的颜色
|
|
|
+ color: '#a86e11', // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#e1b905', // 100% 处的颜色
|
|
|
+ color: '#e1c700', // 100% 处的颜色
|
|
|
},
|
|
|
]);
|
|
|
const colorSet1 = [
|
|
|
@@ -497,13 +497,13 @@ export default {
|
|
|
const rich1 = {
|
|
|
white: {
|
|
|
fontSize: 10,
|
|
|
- color: '#ae8609',
|
|
|
+ color: '#a89e0f',
|
|
|
fontWeight: '500',
|
|
|
},
|
|
|
bule: {
|
|
|
fontSize: 22,
|
|
|
fontFamily: 'DINBold',
|
|
|
- color: '#ae8609',
|
|
|
+ color: '#a89e0f',
|
|
|
fontWeight: '700',
|
|
|
},
|
|
|
radius: {
|
|
|
@@ -513,7 +513,7 @@ export default {
|
|
|
borderWidth: 1,
|
|
|
borderColor: '#051c48',
|
|
|
fontSize: 50,
|
|
|
- color: '#ae8609',
|
|
|
+ color: '#a89e0f',
|
|
|
backgroundColor: '#051c48',
|
|
|
borderRadius: 20,
|
|
|
textAlign: 'center',
|
|
|
@@ -702,10 +702,10 @@ export default {
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(30, 129, 204, 1.0)'
|
|
|
+ color: 'rgba(18, 215, 236, 1.0)'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
- color: 'rgba(21, 37, 126, 1.0)'
|
|
|
+ color: 'rgba(10, 58, 161, 1.0)'
|
|
|
}], false),
|
|
|
barBorderRadius: 8,
|
|
|
opacity: 0.8
|
sumyangyang