|
|
@@ -1,27 +1,139 @@
|
|
|
<style lang="scss">
|
|
|
.index{
|
|
|
+ .content{
|
|
|
+ background: #151932;
|
|
|
+ color:#fff;
|
|
|
+ padding:0 20px;
|
|
|
+ position: relative;
|
|
|
+ .max,.min{
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .min{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #fixed{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99999;
|
|
|
+ overflow: auto;
|
|
|
+ .all{
|
|
|
+ top: 80px!important;
|
|
|
+ }
|
|
|
+ .max{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .min{
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
.title{
|
|
|
- color: #222;
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
}
|
|
|
.datas{
|
|
|
- margin-bottom: 60px;
|
|
|
+ // margin-bottom: 60px;
|
|
|
+ display: flex;
|
|
|
li{
|
|
|
list-style: none;
|
|
|
- display: inline-block;
|
|
|
- // width: 30%;
|
|
|
- margin-right: 10px;
|
|
|
+ padding-right: 30px;
|
|
|
vertical-align: top;
|
|
|
- padding: 10px 20px;
|
|
|
- border-radius:6px;
|
|
|
- border:1px solid rgba(238,238,238,1);
|
|
|
+ .li{
|
|
|
+ background: rgba(39, 51, 76, 0.64);
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ &::before{
|
|
|
+ content: url(../images/bk.png);
|
|
|
+ position: absolute;
|
|
|
+ right:0;
|
|
|
+ top:-5px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ content: url(../images/bk.png);
|
|
|
+ position: absolute;
|
|
|
+ right:0;
|
|
|
+ bottom:-5px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ bottom:0;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ .all{
|
|
|
+ font-size: 48px;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 75px;
|
|
|
+ margin: auto;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 999;
|
|
|
+ span{
|
|
|
+ color: #D2D9E3;
|
|
|
+ font-size: 12px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
h4{
|
|
|
margin-bottom: 20px;
|
|
|
+ color:#fff;
|
|
|
}
|
|
|
- &>div{
|
|
|
- margin-bottom: 20px;
|
|
|
+ .count{
|
|
|
+ margin-bottom: 50px;
|
|
|
+ margin-top: 27px;
|
|
|
+ span{
|
|
|
+ padding: 0 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 160px;
|
|
|
+ height: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 28px;
|
|
|
+ padding-left: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-right: 60px;
|
|
|
+ }
|
|
|
+ .span1{
|
|
|
+ background: url(../images/hy.png);
|
|
|
+ }
|
|
|
+ .span2{
|
|
|
+ background: url(../images/qy.png);
|
|
|
+ }
|
|
|
+ .span3{
|
|
|
+ background: url(../images/fxd.png);
|
|
|
+ }
|
|
|
+ .span4{
|
|
|
+ background: url(../images/gkrw.png);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table{
|
|
|
+ width: 100%;
|
|
|
+ thead td{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px;
|
|
|
+ color:#D2D9E3;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -29,53 +141,129 @@
|
|
|
</style>
|
|
|
<template>
|
|
|
<section class="index">
|
|
|
- <p>概览</p>
|
|
|
- <div class="content">
|
|
|
- <h1 class="title">巴州区应急管理局风险管控可视化系统</h1>
|
|
|
+ <div class="content" :id="fullscreen">
|
|
|
+ <img @click="max" class="max" src="../images/max.png" alt="">
|
|
|
+ <img @click="min" class="min" src="../images/min.png" alt="">
|
|
|
+ <h1 class="title">
|
|
|
+ <img src="../images/bt2.png" alt="">
|
|
|
+ </h1>
|
|
|
<ul class="datas">
|
|
|
- <li>
|
|
|
- <div id="chart1" style="width: 350px;height:300px;"></div>
|
|
|
- <div id="chart2" style="width: 350px;height:300px;"></div>
|
|
|
- <div id="chart3" style="width: 350px;height:300px;"></div>
|
|
|
+ <li style="width:30%;">
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>安全风险实时统计</h4>
|
|
|
+ <div style="position:relative;">
|
|
|
+ <p class="all">
|
|
|
+ 32 <span>总风险(起)</span>
|
|
|
+ </p>
|
|
|
+ <div id="chart1" style="width: 100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ <div id="chart2" style="width: 100%;height:300px;"></div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>安全隐患实时统计</h4>
|
|
|
+ <div style="position:relative;">
|
|
|
+ <p class="all" style="top:75px;">
|
|
|
+ 24 <span>总隐患数(起)</span>
|
|
|
+ </p>
|
|
|
+ <div id="chart3" style="width: 100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li style="width:45%">
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>实时监测</h4>
|
|
|
+ <p class="count">
|
|
|
+ <span class="span1">行业5个</span>
|
|
|
+ <span class="span2">企业5个</span>
|
|
|
+ <span class="span3">风险点5个</span>
|
|
|
+ <span class="span4">管控任务5个</span>
|
|
|
+ </p>
|
|
|
+ <h4>行业风险统计</h4>
|
|
|
+ <div id="chart4" style="width: 100%;height:315px;"></div>
|
|
|
+ <br><br>
|
|
|
+ <h4>企业风险统计</h4>
|
|
|
+ <div id="chart5" style="width: 100%;height:315px;"></div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
</li>
|
|
|
- <li>
|
|
|
- <h4>行业风险统计</h4>
|
|
|
- <div id="chart4" style="width: 400px;height:300px;"></div>
|
|
|
- <h4>企业风险统计</h4>
|
|
|
- <div id="chart5" style="width: 400px;height:300px;"></div>
|
|
|
+ <li style="width:25%;padding:0;">
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>企业告警TOP5</h4>
|
|
|
+ <table cellpadding='0' cellspacing='0'>
|
|
|
+ <thead><td>序号</td><td>企业名称</td><td>告警次数</td></thead>
|
|
|
+ <tr><td><img src="../images/1.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
|
|
|
+ <tr><td><img src="../images/2.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
|
|
|
+ <tr><td><img src="../images/3.png" alt=""></td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
|
|
|
+ <tr><td>4</td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
|
|
|
+ <tr><td>5</td><td>巴中达芙妮</td><td style="text-align:center;">20</td></tr>
|
|
|
+ </table>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>风险企业TOP5</h4>
|
|
|
+ <div id="chart6" style="width: 100%;height:230px;"></div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>隐患企业TOP5</h4>
|
|
|
+ <div id="chart7" style="width: 100%;height:230px;"></div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import echarts from 'echarts';
|
|
|
export default {
|
|
|
data(){
|
|
|
return{
|
|
|
+ fullscreen:''
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
getData(){
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart1 = this.$echarts.init(document.getElementById('chart1'));
|
|
|
- var myChart2 = this.$echarts.init(document.getElementById('chart2'));
|
|
|
- var myChart3 = this.$echarts.init(document.getElementById('chart3'));
|
|
|
- var myChart4 = this.$echarts.init(document.getElementById('chart4'));
|
|
|
- var myChart5 = this.$echarts.init(document.getElementById('chart5'));
|
|
|
+ var myChart1 = this.$echarts.init(document.getElementById('chart1'),'dark');
|
|
|
+ var myChart2 = this.$echarts.init(document.getElementById('chart2'),'dark');
|
|
|
+ var myChart3 = this.$echarts.init(document.getElementById('chart3'),'dark');
|
|
|
+ var myChart4 = this.$echarts.init(document.getElementById('chart4'),'dark');
|
|
|
+ var myChart5 = this.$echarts.init(document.getElementById('chart5'),'dark');
|
|
|
+ var myChart6 = this.$echarts.init(document.getElementById('chart6'),'dark');
|
|
|
+ var myChart7 = this.$echarts.init(document.getElementById('chart7'),'dark');
|
|
|
+ this.myChart1=myChart1;
|
|
|
+ this.myChart2=myChart2;
|
|
|
+ this.myChart3=myChart3;
|
|
|
+ this.myChart4=myChart4;
|
|
|
+ this.myChart5=myChart5;
|
|
|
+ this.myChart6=myChart6;
|
|
|
+ this.myChart7=myChart7;
|
|
|
// 指定图表的配置项和数据
|
|
|
var option1 = {
|
|
|
- title: {
|
|
|
- text: '安全风险实时统计'
|
|
|
- },
|
|
|
- color:['#ef686a','#f6b481','#fcd554','#2b94eb'],
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ color:['#EF3030','#FF7729','#FFCC2C','#3FEDFF'],
|
|
|
tooltip: {formatter: '{b}: {c} ({d}%)'},
|
|
|
legend: {
|
|
|
y:'bottom',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
+ textStyle:{
|
|
|
+ color:'#8C8C8C',
|
|
|
+ },
|
|
|
data:['重大风险', '较大风险','一般风险','低风险']
|
|
|
},
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
- radius: ['45%', '70%'],
|
|
|
+ radius: ['55%', '60%'],
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false
|
|
|
@@ -85,43 +273,67 @@ export default {
|
|
|
{value: 100,name:'重大风险'},
|
|
|
{value: 200,name:'较大风险'},
|
|
|
{value: 50,name:'一般风险'},
|
|
|
- {value: 20,name:'低风险'},
|
|
|
+ {value: 200,name:'低风险'},
|
|
|
]
|
|
|
}]
|
|
|
};
|
|
|
var option2 = {
|
|
|
- color:['#3398dc'],
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ // color:['#3398dc'],
|
|
|
tooltip: {formatter: '{b}: {c}'},
|
|
|
grid: {
|
|
|
left: '1%',
|
|
|
right: '1%',
|
|
|
- bottom: '1%',
|
|
|
- top:'10px',
|
|
|
+ bottom: '30px',
|
|
|
+ // top:'50px',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: ['重大风险', '较大风险','一般风险','低风险']
|
|
|
+ data: ['重大风险', '较大风险','一般风险','低风险'],
|
|
|
},
|
|
|
- yAxis: {},
|
|
|
+ yAxis: {
|
|
|
+ axisLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'solid',
|
|
|
+ color:'#414B66'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
series: [{
|
|
|
type: 'bar',
|
|
|
- barWidth: 50,
|
|
|
- data: [5, 20, 36, 10]
|
|
|
+ barWidth: 20,
|
|
|
+ data: [5, 20, 36, 10],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#7AF7FF'},
|
|
|
+ {offset: 1, color: '#3687FF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
}]
|
|
|
};
|
|
|
var option3 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
title: {
|
|
|
- text: '安全隐患实时统计'
|
|
|
+ text: ''
|
|
|
},
|
|
|
- color:['#ef686a','#2b94eb'],
|
|
|
+ color:['#EF3030','#3FEDFF'],
|
|
|
tooltip: {formatter: '{b}: {c} ({d}%)'},
|
|
|
legend: {
|
|
|
y:'bottom',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
data:['重大风险','一般风险']
|
|
|
},
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
- // radius: ['45%', '70%'],
|
|
|
+ radius: ['55%', '60%'],
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false
|
|
|
@@ -134,29 +346,50 @@ export default {
|
|
|
}]
|
|
|
};
|
|
|
var option4 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
title: {
|
|
|
text: ''
|
|
|
},
|
|
|
legend: {
|
|
|
- // y:'bottom',
|
|
|
+ y:'bottom',
|
|
|
+ x:'left',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
+ textStyle:{
|
|
|
+ color:'#8C8C8C',
|
|
|
+ },
|
|
|
data:['重大风险', '较大风险','一般风险','低风险']
|
|
|
},
|
|
|
- color:['#ef686a','#f6b481','#fcd554','#2b94eb'],
|
|
|
+ color:['#EF3030','#FF7729','#FFCC2C','#3FEDFF'],
|
|
|
tooltip: {formatter: '{b}: {c}'},
|
|
|
grid: {
|
|
|
left: '1%',
|
|
|
right: '1%',
|
|
|
- bottom: '1%',
|
|
|
+ top: '10px',
|
|
|
+ bottom:'40px',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: ['危险化学品', '煤矿','非煤矿山','工贸行业']
|
|
|
},
|
|
|
- yAxis: {},
|
|
|
+ yAxis: {
|
|
|
+ axisLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'solid',
|
|
|
+ color:'#414B66'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
name: '重大风险',
|
|
|
type: 'bar',
|
|
|
+ stack:'风险',
|
|
|
+ barWidth:20,
|
|
|
data: [320, 332, 301, 334]
|
|
|
},
|
|
|
{
|
|
|
@@ -169,15 +402,77 @@ export default {
|
|
|
name: '一般风险',
|
|
|
type: 'bar',
|
|
|
stack:'风险',
|
|
|
+ barWidth:20,
|
|
|
data: [390, 320, 31, 140]
|
|
|
},
|
|
|
{
|
|
|
name: '低风险',
|
|
|
type: 'bar',
|
|
|
stack:'风险',
|
|
|
+ barWidth:20,
|
|
|
data: [90, 20, 31, 40]
|
|
|
},
|
|
|
]
|
|
|
+ };
|
|
|
+ var option6 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ color:['#3398dc'],
|
|
|
+ tooltip: {formatter: '{b}: {c}'},
|
|
|
+ legend: {
|
|
|
+ y:'bottom',
|
|
|
+ x:'left',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
+ textStyle:{
|
|
|
+ color:'#8C8C8C',
|
|
|
+ },
|
|
|
+ data:['风险点', '管控任务']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '10px',
|
|
|
+ top:'10px',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ data: ['巴中达芙妮', '巴中达芙妮2','巴中达芙妮3','巴中达芙妮4'],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '风险点',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth:10,
|
|
|
+ data: [320, 332, 301, 334],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#FFEE7F'},
|
|
|
+ {offset: 1, color: '#E8B35F'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '管控任务',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth:10,
|
|
|
+ data: [30, 132, 201, 34],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#7AF7FF'},
|
|
|
+ {offset: 1, color: '#3687FF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart1.setOption(option1);
|
|
|
@@ -185,11 +480,46 @@ export default {
|
|
|
myChart3.setOption(option3);
|
|
|
myChart4.setOption(option4);
|
|
|
myChart5.setOption(option4);
|
|
|
+ myChart6.setOption(option6);
|
|
|
+ myChart7.setOption(option6);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart1.resize();
|
|
|
+ myChart2.resize();
|
|
|
+ myChart3.resize();
|
|
|
+ myChart4.resize();
|
|
|
+ myChart5.resize();
|
|
|
+ myChart6.resize();
|
|
|
+ myChart7.resize();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reload(){
|
|
|
+ this.myChart1.resize();
|
|
|
+ this.myChart2.resize();
|
|
|
+ this.myChart3.resize();
|
|
|
+ this.myChart4.resize();
|
|
|
+ this.myChart5.resize();
|
|
|
+ this.myChart6.resize();
|
|
|
+ this.myChart7.resize();
|
|
|
},
|
|
|
-
|
|
|
+ max(){
|
|
|
+ this.fullscreen='fixed';
|
|
|
+ let _this=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.reload()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ min(){
|
|
|
+ this.fullscreen='';
|
|
|
+ let _this=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.reload()
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getData()
|
|
|
},
|
|
|
+ created(){
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
