|
|
@@ -0,0 +1,538 @@
|
|
|
+<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{
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .datas{
|
|
|
+ // margin-bottom: 60px;
|
|
|
+ display: flex;
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ padding-right: 20px;
|
|
|
+ vertical-align: top;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ margin-bottom: 40px;
|
|
|
+ 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);
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table{
|
|
|
+ width: 100%;
|
|
|
+ thead td{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px;
|
|
|
+ color:#D2D9E3;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <section class="index">
|
|
|
+ <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/bt1.png" alt="">
|
|
|
+ </h1>
|
|
|
+ <ul class="datas">
|
|
|
+ <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:230px;"></div>
|
|
|
+ </div>
|
|
|
+ <div id="chart2" style="width: 100%;height:250px;"></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:40%">
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>系统实时监测</h4>
|
|
|
+ <p class="count">
|
|
|
+ <span class="span3">风险点5个</span>
|
|
|
+ <span class="span4">管控任务5个</span>
|
|
|
+ </p>
|
|
|
+ <h4>风险点任务</h4>
|
|
|
+ <div id="chart4" style="width: 100%;height:310px;"></div>
|
|
|
+ <br><br>
|
|
|
+ <h4>风险点任务</h4>
|
|
|
+ <div id="chart5" style="width: 100%;height:310px;"></div>
|
|
|
+ <img class="bottom" src="../images/bk.png" alt="">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li style="width:30%;padding:0;">
|
|
|
+ <div class="li">
|
|
|
+ <img class="top" src="../images/bk.png" alt="">
|
|
|
+ <h4>最新告警</h4>
|
|
|
+ <table cellpadding='0' cellspacing='0'>
|
|
|
+ <!-- <thead><td>序号</td><td>企业名称</td><td>告警次数</td></thead> -->
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11:20</td></tr>
|
|
|
+ <tr><td>加油区</td><td>加油机损坏</td><td>2020-07-08 12:11: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:378px;"></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'),'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');
|
|
|
+ this.myChart1=myChart1;
|
|
|
+ this.myChart2=myChart2;
|
|
|
+ this.myChart3=myChart3;
|
|
|
+ this.myChart4=myChart4;
|
|
|
+ this.myChart5=myChart5;
|
|
|
+ this.myChart6=myChart6;
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ let color=['#dc402c','#ee5930','#fcd865','#3074b5']
|
|
|
+ var option1 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ color:color,
|
|
|
+ tooltip: {formatter: '{b}: {c} ({d}%)'},
|
|
|
+ legend: {
|
|
|
+ y:'bottom',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
+ textStyle:{
|
|
|
+ color:'#8C8C8C',
|
|
|
+ },
|
|
|
+ data:['重大风险', '较大风险','一般风险','低风险']
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['55%', '60%'],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {value: 100,name:'重大风险'},
|
|
|
+ {value: 200,name:'较大风险'},
|
|
|
+ {value: 50,name:'一般风险'},
|
|
|
+ {value: 200,name:'低风险'},
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ var option2 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ // color:['#3398dc'],
|
|
|
+ tooltip: {formatter: '{b}: {c}'},
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '20px',
|
|
|
+ // top:'50px',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['重大风险', '较大风险','一般风险','低风险'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'solid',
|
|
|
+ color:'#414B66'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ 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: ''
|
|
|
+ },
|
|
|
+ color:['#dc402c','#fcd865'],
|
|
|
+ tooltip: {formatter: '{b}: {c} ({d}%)'},
|
|
|
+ legend: {
|
|
|
+ y:'bottom',
|
|
|
+ itemWidth:8,
|
|
|
+ itemHeight:8,
|
|
|
+ data:['重大风险','一般风险']
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['55%', '60%'],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {value: 3,name:'重大风险'},
|
|
|
+ {value: 10,name:'一般风险'},
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ var option4 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ // color:['#3398dc'],
|
|
|
+ tooltip: {formatter: '{b}: {c}'},
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '20px',
|
|
|
+ top:'20px',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['加油区', '加油区1','加油区2','加油区3','加油区4','加油区5'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'solid',
|
|
|
+ color:'#414B66'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ data: [5, 20, 36, 10,70,100],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#7AF7FF'},
|
|
|
+ {offset: 1, color: '#3687FF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ let day=[],data=[];
|
|
|
+ for(let i=1;i<25;i++){
|
|
|
+ day.push(i)
|
|
|
+ data.push(Math.ceil(Math.random()*50+20))
|
|
|
+ }
|
|
|
+ var option5 = {
|
|
|
+ backgroundColor:'rgba(0,0,0,0)',
|
|
|
+ // color:['#3398dc'],
|
|
|
+ tooltip: {formatter: '{b}: {c}'},
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '20px',
|
|
|
+ top:'20px',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: day,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine:{
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ splitLine:{
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'solid',
|
|
|
+ color:'#414B66'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'line',
|
|
|
+ smooth: 0.6,
|
|
|
+ data: data,
|
|
|
+ areaStyle: {},
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#7AF7FF'},
|
|
|
+ {offset: 1, color: '#3687FF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ 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: ['加油区1', '加油区2','加油区3','加油区4','加油区5'],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show:false
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '风险点',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth:10,
|
|
|
+ data: [320, 332, 301, 334,690],
|
|
|
+ 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,270],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#7AF7FF'},
|
|
|
+ {offset: 1, color: '#3687FF'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 使用刚指定的配置项和数据显示图表。
|
|
|
+ myChart1.setOption(option1);
|
|
|
+ myChart2.setOption(option2);
|
|
|
+ myChart3.setOption(option3);
|
|
|
+ myChart4.setOption(option4);
|
|
|
+ myChart5.setOption(option5);
|
|
|
+ myChart6.setOption(option6);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart1.resize();
|
|
|
+ myChart2.resize();
|
|
|
+ myChart3.resize();
|
|
|
+ myChart4.resize();
|
|
|
+ myChart5.resize();
|
|
|
+ myChart6.resize();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reload(){
|
|
|
+ this.myChart1.resize();
|
|
|
+ this.myChart2.resize();
|
|
|
+ this.myChart3.resize();
|
|
|
+ this.myChart4.resize();
|
|
|
+ this.myChart5.resize();
|
|
|
+ this.myChart6.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>
|
