|
|
@@ -40,7 +40,7 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
<!-- 设备tab结束-->
|
|
|
@@ -58,71 +58,71 @@
|
|
|
<div class="qkq_tdzy">
|
|
|
<div class="qkq_tit ">今日安全承诺</div>
|
|
|
<div class="qkq_aqcn">
|
|
|
- <div id="qkq_aqcn_chart"></div>
|
|
|
- <div class="qkq_aqcn_txt">
|
|
|
- <p>应承诺数<span>162家</span></p>
|
|
|
- <p>已承诺数<span>162家</span></p>
|
|
|
- <p>未承诺数<span>0家</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="qkq_aqcn_col">
|
|
|
- <p>
|
|
|
- <span>高风险</span>
|
|
|
- <b>0</b>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <span>较大风险</span>
|
|
|
- <b>1</b>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <span>一般风险</span>
|
|
|
- <b>31</b>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- <span>低风险</span>
|
|
|
- <b>129</b>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <div id="qkq_aqcn_chart"></div>
|
|
|
+ <div class="qkq_aqcn_txt">
|
|
|
+ <p>应承诺数<span>162家</span></p>
|
|
|
+ <p>已承诺数<span>162家</span></p>
|
|
|
+ <p>未承诺数<span>0家</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="qkq_aqcn_col">
|
|
|
+ <p>
|
|
|
+ <span>高风险</span>
|
|
|
+ <b>0</b>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>较大风险</span>
|
|
|
+ <b>1</b>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>一般风险</span>
|
|
|
+ <b>31</b>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>低风险</span>
|
|
|
+ <b>129</b>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="qkq_tdzy">
|
|
|
<div class="qkq_tit">监测预警</div>
|
|
|
<ul class="qkq_csnl scrollbar">
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
- <p>预警事件：内涝点积水</p>
|
|
|
- <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
|
|
|
+ <p>预警事件：内涝点积水</p>
|
|
|
+ <p>预警时间：2024年8月2日09:51:53</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -232,12 +232,12 @@ export default {
|
|
|
this.selectQkEmergencyRescueTeamAllList();
|
|
|
this.selectQkEmergencyShelterAllList();
|
|
|
this.selectQkRescueSuppliesAllList();
|
|
|
- this.resourceDistribution();
|
|
|
- this.deviceOnline();
|
|
|
- this.deviceOffline();
|
|
|
+ // this.resourceDistribution();
|
|
|
+ // this.deviceOnline();
|
|
|
+ // this.deviceOffline();
|
|
|
this.cameraList();
|
|
|
- this.regionTop();
|
|
|
- this.qkq_aqcn_chart();
|
|
|
+ // this.regionTop();
|
|
|
+ this.qkq_aqcn_chart();
|
|
|
// 每秒刷新时间
|
|
|
setInterval(() => {
|
|
|
this.getCurrentTime();
|
|
|
@@ -1229,179 +1229,179 @@ export default {
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
,
|
|
|
- qkq_aqcn_chart(){
|
|
|
- var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
|
|
|
- // mock数据
|
|
|
- const obj = {
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- pointer: {
|
|
|
- // 指针
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show:false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show:false,
|
|
|
- },
|
|
|
-};
|
|
|
-var option = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- splitNumber: 95,
|
|
|
- splitLine: {
|
|
|
- // 分割线
|
|
|
- distance: -50,
|
|
|
- length: 20,
|
|
|
- lineStyle: {
|
|
|
- width: 10,
|
|
|
- color: '#3ff0a3'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- // 轴线
|
|
|
- lineStyle:{
|
|
|
- width:4,
|
|
|
- color: [[1, '#3300ee11']],
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- show:false,
|
|
|
- color: '#FFAB91'
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show:false,
|
|
|
- },
|
|
|
- ...obj,
|
|
|
- },
|
|
|
- // {
|
|
|
- // type: 'gauge',
|
|
|
- // startAngle: 220,
|
|
|
- // endAngle: -40,
|
|
|
- // splitNumber: 45,
|
|
|
- // splitLine: {
|
|
|
- // length: 30,
|
|
|
- // lineStyle: {
|
|
|
- // width: 14,
|
|
|
- // color: {
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0.25,
|
|
|
- // // r: 0.5,
|
|
|
- // x2: 0,
|
|
|
- // y2: 0,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0, color: 'gray' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // // offset: 1, color: '#52D5F2' // 100% 处的颜色
|
|
|
- // offset: 1, color: 'red' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- // global: false
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // pointer: {
|
|
|
- // // 指针
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // // 刻度值
|
|
|
- // show:false,
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show:false,
|
|
|
- // },
|
|
|
- // axisLine: {
|
|
|
- // lineStyle:{
|
|
|
- // width:4,
|
|
|
- // color: [[1, '#153839']],
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- {
|
|
|
- type:'pie',
|
|
|
- radius: ['62%', '70%'],
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- color:['cyan','blue','transparent'],
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data:[
|
|
|
- {value: 120, name: '搜索引擎'},
|
|
|
- {value: 140, name: '直接访问'},
|
|
|
- {value: 100, name: '邮件营销'},
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- radius: '58%',
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- splitNumber: 25,
|
|
|
- splitLine: {
|
|
|
- length: 5,
|
|
|
- lineStyle: {
|
|
|
- width: 5,
|
|
|
- color: '#4dcbe78f',
|
|
|
- type:'dotted',
|
|
|
- }
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- // 指针
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show:false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show:false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle:{
|
|
|
- width:4,
|
|
|
- color:[[1,'#3300ee11']],
|
|
|
- }
|
|
|
- },
|
|
|
- detail: {
|
|
|
- valueAnimation: true,
|
|
|
- borderRadius: 8,
|
|
|
- formatter: function(name) {
|
|
|
- return `{a|在线率} \n\n {b|${name}} \n\n %`
|
|
|
- },
|
|
|
- rich:{
|
|
|
- a: {
|
|
|
- color:'#49C3DF',
|
|
|
- fontSize: 50,
|
|
|
- lineHeight: 20,
|
|
|
- padding:[0,0,200,0],
|
|
|
- },
|
|
|
- b: {
|
|
|
- color: '#49C3DF',
|
|
|
- height: 40,
|
|
|
- fontSize: 130,
|
|
|
- padding:[0,0,30,0],
|
|
|
- fontWeight: 'bolder',
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- // name:'在线率',
|
|
|
- value: 86
|
|
|
- }]
|
|
|
- },
|
|
|
- ],
|
|
|
-};
|
|
|
-
|
|
|
- if(option){
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
-},
|
|
|
+ qkq_aqcn_chart() {
|
|
|
+ var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
|
|
|
+ // mock数据
|
|
|
+ const obj = {
|
|
|
+ startAngle: 220,
|
|
|
+ endAngle: -40,
|
|
|
+ pointer: {
|
|
|
+ // 指针
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // 刻度值
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ var option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ splitNumber: 95,
|
|
|
+ splitLine: {
|
|
|
+ // 分割线
|
|
|
+ distance: -50,
|
|
|
+ length: 20,
|
|
|
+ lineStyle: {
|
|
|
+ width: 10,
|
|
|
+ color: '#3ff0a3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ // 轴线
|
|
|
+ lineStyle: {
|
|
|
+ width: 4,
|
|
|
+ color: [[1, '#3300ee11']],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ show: false,
|
|
|
+ color: '#FFAB91'
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // 刻度值
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ ...obj,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // type: 'gauge',
|
|
|
+ // startAngle: 220,
|
|
|
+ // endAngle: -40,
|
|
|
+ // splitNumber: 45,
|
|
|
+ // splitLine: {
|
|
|
+ // length: 30,
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 14,
|
|
|
+ // color: {
|
|
|
+ // type: 'linear',
|
|
|
+ // x: 0,
|
|
|
+ // y: 0.25,
|
|
|
+ // // r: 0.5,
|
|
|
+ // x2: 0,
|
|
|
+ // y2: 0,
|
|
|
+ // colorStops: [{
|
|
|
+ // offset: 0, color: 'gray' // 0% 处的颜色
|
|
|
+ // }, {
|
|
|
+ // // offset: 1, color: '#52D5F2' // 100% 处的颜色
|
|
|
+ // offset: 1, color: 'red' // 100% 处的颜色
|
|
|
+ // }],
|
|
|
+ // global: false
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // pointer: {
|
|
|
+ // // 指针
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // // 刻度值
|
|
|
+ // show:false,
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show:false,
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle:{
|
|
|
+ // width:4,
|
|
|
+ // color: [[1, '#153839']],
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['62%', '70%'],
|
|
|
+ startAngle: 220,
|
|
|
+ endAngle: -40,
|
|
|
+ color: ['cyan', 'blue', 'transparent'],
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {value: 120, name: '搜索引擎'},
|
|
|
+ {value: 140, name: '直接访问'},
|
|
|
+ {value: 100, name: '邮件营销'},
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ radius: '58%',
|
|
|
+ startAngle: 220,
|
|
|
+ endAngle: -40,
|
|
|
+ splitNumber: 25,
|
|
|
+ splitLine: {
|
|
|
+ length: 5,
|
|
|
+ lineStyle: {
|
|
|
+ width: 5,
|
|
|
+ color: '#4dcbe78f',
|
|
|
+ type: 'dotted',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ // 指针
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // 刻度值
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 4,
|
|
|
+ color: [[1, '#3300ee11']],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ borderRadius: 8,
|
|
|
+ formatter: function (name) {
|
|
|
+ return `{a|在线率} \n\n {b|${name}} \n\n %`
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#49C3DF',
|
|
|
+ fontSize: 50,
|
|
|
+ lineHeight: 20,
|
|
|
+ padding: [0, 0, 200, 0],
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ color: '#49C3DF',
|
|
|
+ height: 40,
|
|
|
+ fontSize: 130,
|
|
|
+ padding: [0, 0, 30, 0],
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ // name:'在线率',
|
|
|
+ value: 86
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ if (option) {
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
getCurrentTime() {
|
|
|
const now = new Date();
|
|
|
const year = now.getFullYear();
|
bihuisong