baianxi_admin/src/views/Index1.vue

<style lang="scss">
  .index{
      .content{
        background: #151932;
        color:#fff;
        padding:0 20px;
        position:  relative;
        .max,.min{
          position: absolute;
          top: 40px;
          right: 20px;
          cursor: pointer;
          z-index: 999;
        }
        .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;
        position: relative;
        span{
          position: absolute;
          top: 10px;
          width: 80%;
          text-align: center;
          left: 0;
          right: 0;
          margin: auto;
          font-size: 25px;
          line-height: 70px;
        }
      }
      .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 height="90px" width="100%" src="../images/bg_2.jpg" alt="">
          <span>{{info.realname}}可视化系统</span>
        </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:'',
      info:{}
    }
  },
  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:  [
                    {
                    value:20,
                    itemStyle:{
                        color:color[0]
                    }
                    },{
                    value:60,
                    itemStyle:{
                        color:color[1]
                    }
                    },{
                    value:120,
                    itemStyle:{
                        color:color[2]
                    }
                    },{
                    value:204,
                    itemStyle:{
                        color:color[3]
                    }
                    },
                ],
            }]
        };
        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(){
    this.$api.getInfo().then(res=>{
				this.info=res.data.data
		})
  }
}
</script>