baianxi_admin/src/views/CompanyData.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;
          font-weight:300;
        }
      }
      .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;
              }
            }
          .li_new{
            background: rgba(39, 51, 76, 0.64);
            margin-bottom: 30px;
            padding: 20px;
            position: relative;
            &::before{
              content: url(../images/bk-1.png);
              position: absolute;
              right:0;
              top:-5px;
              transform: rotate(90deg);
            }
            &::after{
              content: url(../images/bk-1.png);
              position: absolute;
              right:0;
              bottom:-5px;
              transform: rotate(180deg);
            }
          }
          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">
                    {{count}}   <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;" v-if='data.yh_data'>
                    {{data.yh_data[0].value+data.yh_data[1].value}}   <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">风险点 {{data.riskpoint_count}} 个</span>
                  <span class="span4">管控任务 {{data.monittask_count}} 个</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_new">
              <img class="top" src="../images/bk-1.png" alt="">
              <h4>最新告警</h4>
              <table cellpadding='0' cellspacing='0'>
                <!-- <thead><td>序号</td><td>企业名称</td><td>告警次数</td></thead> -->
                <tr v-for="(item,index) in data.latest_warning" :key='index'>
                  <td>{{item.riskpoint_name}}</td>
                  <td>{{item.monit_name}}</td><td>{{item.ctime}}</td></tr>
              </table>
              <img class="bottom" src="../images/bk-1.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:{},
      count:0,
      data:{}
    }
  },
  methods:{
    getData(){  
      this.$api.getChartData({type:'qy'}).then(res=>{
              this.data=res.data.data
              var data=res.data.data;
              let count=0;
              for(let i=0;i<data.risk_data.length;i++){
                count+=data.risk_data[i].value
              }
              this.count=count;
          
          // 基于准备好的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: data.risk_data
              }]
            };
            var option2 = {
              backgroundColor:'rgba(0,0,0,0)',
              color:color,
              tooltip: {formatter: '{b}: {c}'},
              grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '30px',
                  // 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:data.risk_data[0].value,
                    itemStyle:{
                      color:color[0]
                    }
                  },{
                    value:data.risk_data[1].value,
                    itemStyle:{
                      color:color[1]
                    }
                  },{
                    value:data.risk_data[2].value,
                    itemStyle:{
                      color:color[2]
                    }
                  },{
                    value:data.risk_data[3].value,
                    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:data.yh_data
              }]
            };
            let fxd_name=[]
            for(let i=0;i<data.riskpoint_count_data.length;i++){
              fxd_name.push(data.riskpoint_count_data[i].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: fxd_name,
                    },
                    yAxis: {
                axisLine:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'solid',
                        color:'#414B66'
                    }
                },
                },
                series: [{
                type: 'bar',
                barWidth: 20,
                data:  data.riskpoint_count_data,
                itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#7AF7FF'},
                                {offset: 1, color: '#3687FF'}
                            ]
                        )
                },
                }]
            };
            let fxd_date_name=[]
            for(let i=0;i<data.time_count.length;i++){
              fxd_date_name.push(data.time_count[i].date)
            }
            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: fxd_date_name,
                    },
                    yAxis: {
                axisLine:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'solid',
                        color:'#414B66'
                    }
                },
                },
                series: [{
                type: 'line',
                smooth: 0.6,
                data:  data.time_count,
                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>