baianxi_admin/src/views/GovermentData.vue

<style lang="scss">
  .goverdata{
      .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: 15px;
          width: 80%;
          text-align: center;
          left: 0;
          right: 0;
          margin: auto;
          font-size: 22px;
          line-height: inherit;
          font-weight:300;
        }
      }
      .datas{
        // margin-bottom: 60px;
        display: flex;     
        &>li{
          list-style: none;
          padding-right: 30px;
          vertical-align: top;
          .li{
            background: rgba(39, 51, 76, 0.64);
            cursor: pointer;
            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: 80px;
              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: 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;
              cursor: pointer;
            }
            .span1{
              background: url(../images/hy.png);
            }
            .span2{
              background: url(../images/qy.png);
              margin-right: 0;
            }
            .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;
            }
          }
        }
      }
      .company_top{
        li{
          list-style: none;
          color: #D2D9E3;
          line-height: 25px;
          font-size: 14px;
          display: flex;
          vertical-align: middle;
          span{
            display: block;
            // width: 8%;
            text-align: center;
            min-width: 34px;
            line-height: 38px;
            img{
              position: relative;
              top:5px;
              // left:3px;
            }
          }
          .second{
            width: 58%;
            padding:0 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            // text-align: left;
            // padding-left: 10px;
          }
        }
        .thead{
          font-size: 16px;
        }
        .outer_div{
          height: 190px;
          overflow: hidden;
          .inner_div{
            position: relative;
            animation:move 15s infinite linear;
            margin-top:190px;
          }
          .inner_div:hover{
            animation-play-state: paused;
          }
          .inner_div li:hover{
            cursor: pointer;
          }
        }
        
        @keyframes move {
           0%{
              transform: translateY(0);
          }
          100%{
              transform: translateY(-266px);
          }
        }
      }
      .tc{
          position: fixed;
          width: calc(100vw - 290px);
          top:100px;
          left: 250px;
          // right: 0;
          // margin: auto;
          padding: 10px;
          background: rgba(39, 51, 76, 1);
          z-index: 999;
          text-align: right;
          i{
            cursor: pointer;
          }
      }
  }
</style>
<template>
  <section class="index goverdata">
    <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_1.jpg" alt="">
          <span>{{info.name}}<br>可视化系统</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:250px;"></div>
                </div>
                <div id="chart2" style="width: 100%;height:330px;"></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:95px;" 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:285px;"></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">行业 {{data.industry_count}} 个</span>
                  <span class="span2" @click='goTo("/company")'>企业 {{data.enterprise_count}} 个</span><br>
                  <span class="span3" @click='goTo("/danger")'>风险点 {{data.riskpoint_count}} 个</span>
                  <span class="span4" @click='goTo("/dangertask")'>管控任务 {{data.monittask_count}} 个</span><br>
                </p>
                <h4>行业风险统计</h4>
                <div id="chart4" @click="zindex1=9999" style="width: 100%;height:330px;"></div>
                <br><br>
                <h4>行业隐患统计</h4>
                <div id="chart5"  @click="zindex2=9999" style="width: 100%;height:320px;"></div>
                <img class="bottom" src="../images/bk.png" alt="">
            </div>
          </li>
          <li style="width:25%;padding:0;">
            <div class="li">
              <img class="top" src="../images/bk.png" alt="">
              <h4>企业告警TOP5</h4>
              <ol class="company_top">
                <li class="thead"><span>序号</span><span class="second">企业名称</span><span>告警次数</span></li>
                <div class="outer_div">
                  <div class="inner_div">
                    <li @click="goTo('/warning')" v-for="(item,index) in data.enterprise_warning_top5" :key="index">
                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
                      <span v-if="index>2">{{index+1}}</span>
                      <span class="second">{{item.enterprise_name}}</span>
                      <span>{{item.value}}</span>
                    </li>
                    <!-- <li v-for="(item,index) in data.enterprise_warning_top5" :key="index+'_'+index">
                      <span v-if="index==0"><img src="../images/1.png" alt=""></span>
                      <span v-if="index==1"><img src="../images/2.png" alt=""></span>
                      <span v-if="index==2"><img src="../images/3.png" alt=""></span>
                      <span v-if="index>2">{{index+1}}</span>
                      <span class="second">{{item.enterprise_name}}</span>
                      <span>{{item.value}}</span>
                    </li> -->
                  </div>
                </div>
              </ol>
             
              <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:300px;"></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 class="tc" :style="'z-index:'+zindex1">
         <i class="el-icon-close" @click="zindex1=-1"></i>
          <div id="chart8" style="width: 100%;height:500px;"></div>
       </div>
       <div class="tc" :style="'z-index:'+zindex2">
         <i class="el-icon-close" @click="zindex2=-1"></i>
          <div id="chart9" style="width: 100%;height:500px;"></div>
       </div>   
    </div>
  </section>
</template>
<script>
import echarts from 'echarts';
export default {
  data(){
    return{
      zindex1:-1,
      zindex2:-1,
      fullscreen:'',
      info:{},
      data:{},
      count:0
    }
  },
  methods:{
    getData(){   
      this.$api.getChartData({type:'zf'}).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;
          //行业风险
          let fx_data=[],fx_data_more=[],fx_name=[];
          for(let j=0;j<data.industry_fx_data[0].data.length;j++){
              fx_name.push(data.industry_fx_data[0].data[j].name)
          }
          for(let i=0;i<data.industry_fx_data.length;i++){
            let _data=data.industry_fx_data[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            fx_data.push({
                type: 'bar',
                stack:'风险',
                barWidth:20,
                data: array,
                name:data.industry_fx_data[i].name
            })
          }
          for(let i=0;i<data.industry_fx_data_more.length;i++){
            let _data=data.industry_fx_data_more[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            fx_data_more.push({
                type: 'bar',
                stack:'风险',
                barWidth:20,
                data: array,
                name:data.industry_fx_data_more[i].name
            })
          }
          //行业隐患
          let yh_data=[],yh_data_more=[],yh_name=[];
          for(let j=0;j<data.industry_yh_data[0].data.length;j++){
              yh_name.push(data.industry_yh_data[0].data[j].name)
          }
          for(let i=0;i<data.industry_yh_data.length;i++){
            let _data=data.industry_yh_data[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            yh_data.push({
                type: 'bar',
                stack:'隐患',
                barWidth:20,
                data: array,
                name:data.industry_yh_data[i].name
            })
          }
          for(let i=0;i<data.industry_yh_data_more.length;i++){
            let _data=data.industry_yh_data_more[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            yh_data_more.push({
                type: 'bar',
                stack:'隐患',
                barWidth:20,
                data: array,
                name:data.industry_yh_data[i].name
            })
          }
      // 基于准备好的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');
      var myChart7 = this.$echarts.init(document.getElementById('chart7'),'dark');
      var myChart8 = this.$echarts.init(document.getElementById('chart8'),'dark');
      var myChart9 = this.$echarts.init(document.getElementById('chart9'),'dark');
      this.myChart1=myChart1;
      this.myChart2=myChart2;
      this.myChart3=myChart3;
      this.myChart4=myChart4;
      this.myChart5=myChart5;
      this.myChart6=myChart6;
      this.myChart7=myChart7;
      // 指定图表的配置项和数据
      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
			  }]
      };
      var option4 = {
        backgroundColor:'rgba(0,0,0,0)',
        title: {
				  text: ''
        },
        legend: {
          y:'bottom',
          x:'left',
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            color:'#8C8C8C',
          },
				  data:['重大风险', '较大风险','一般风险','低风险']
			  },
        color:color,
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '1%',
            right: '1%',
            top: '10px',
            bottom:'40px',
            containLabel: true
        },
        xAxis: {
				  data:fx_name
			  },
			  yAxis: {
          axisLine:{
            show:false
          },
          splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#414B66'
              }
          },
        },
			  series: fx_data
      };
      var option5 = {
        backgroundColor:'rgba(0,0,0,0)',
        title: {
				  text: ''
        },
        legend: {
          y:'bottom',
          x:'left',
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            color:'#8C8C8C',
          },
				  data:['重大隐患','一般隐患']
			  },
        color:['#dc402c','#fcd865'],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '1%',
            right: '1%',
            top: '10px',
            bottom:'40px',
            containLabel: true
        },
        xAxis: {
				  data:yh_name
			  },
			  yAxis: {
          axisLine:{
            show:false
          },
          splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#414B66'
              }
          },
        },
			  series: yh_data
      };
      var option8 = {
        backgroundColor:'rgba(39, 51, 76, 1)',
        title: {
				  text: ''
        },
        legend: {
          y:'bottom',
          x:'left',
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            color:'#8C8C8C',
          },
				  data:['重大风险', '较大风险','一般风险','低风险']
			  },
        color:color,
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '1%',
            right: '1%',
            top: '10px',
            bottom:'40px',
            containLabel: true
        },
        xAxis: {
				  data:fx_name
			  },
			  yAxis: {
          axisLine:{
            show:false
          },
          splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#414B66'
              }
          },
        },
			  series: fx_data_more
      };
      var option9 = {
        backgroundColor:'rgba(0,0,0,0)',
        title: {
				  text: ''
        },
        legend: {
          y:'bottom',
          x:'left',
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            color:'#8C8C8C',
          },
				  data:['重大隐患','一般隐患']
			  },
        color:['#dc402c','#fcd865'],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '1%',
            right: '1%',
            top: '10px',
            bottom:'40px',
            containLabel: true
        },
        xAxis: {
				  data:yh_name
			  },
			  yAxis: {
          axisLine:{
            show:false
          },
          splitLine:{
              show:true,
              lineStyle:{
                type:'solid',
                color:'#414B66'
              }
          },
        },
			  series: yh_data_more
      };
      //企业风险
      let qy_fx_data=[],qy_fx_name=[];
      for(let j=0;j<data.enterprise_fx_data[1].data.length;j++){
        let text=data.enterprise_fx_data[1].data[j].enterprise_name;
        let length=text.length/3
        let br_text=text.slice(0,length)+'\n'+text.slice(length,length*2)+'\n'+text.slice(length*2,text.length)
        qy_fx_name.push(br_text)
      }
      for(let i=0;i<data.enterprise_fx_data.length;i++){
            let _data=data.enterprise_fx_data[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            qy_fx_data.push({
                type: 'bar',
                stack:'隐患',
                barWidth:10,
                data: array,
                name:data.enterprise_fx_data[i].name,
                // itemStyle: {
                //       color: new echarts.graphic.LinearGradient(
                //           0, 0, 0, 1,
                //           [
                //               {offset: 0, color: '#FFEE7F'},
                //               {offset: 1, color: '#E8B35F'}
                //           ]
                //       )
                // },
            })
      }
      var option6 = {
        backgroundColor:'rgba(0,0,0,0)',
        color:color,
        tooltip: {trigger: 'axis',},
        legend: {
          y:'bottom',
          x:'left',
          itemWidth:8,
          itemHeight:8,
          textStyle:{
            color:'#8C8C8C',
          },
				  data:['重大风险', '较大风险','一般风险','低风险']
			  },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '50px',
            top:'10px',
            containLabel: true
        },
        yAxis: {
          data: qy_fx_name, 
			  },
			  xAxis: {
          show:false
        },
			  series: qy_fx_data
      };
      //企业隐患
      let qy_yh_data=[],qy_yh_name=[];
      for(let j=0;j<data.enterprise_yh_data[0].data.length;j++){

              let text=data.enterprise_yh_data[0].data[j].enterprise_name;
              let length=text.length/3
              let br_text=text.slice(0,length)+'\n'+text.slice(length,length*2)+'\n'+text.slice(length*2,text.length)
              qy_yh_name.push(br_text)
      }
      for(let i=0;i<data.enterprise_yh_data.length;i++){
            let _data=data.enterprise_yh_data[i].data,array=[];
            for(let j=0;j<_data.length;j++){
              array.push(_data[j].value)
            }
            qy_yh_data.push({
                type: 'bar',
                stack:'隐患',
                barWidth:10,
                data: array,
                name:data.enterprise_yh_data[i].name,
                // itemStyle: {
                //       color: new echarts.graphic.LinearGradient(
                //           0, 0, 0, 1,
                //           [
                //               {offset: 0, color: '#FFEE7F'},
                //               {offset: 1, color: '#E8B35F'}
                //           ]
                //       )
                // },
            })
      }
      var option7 = {
        backgroundColor:'rgba(0,0,0,0)',
        color:['#dc402c','#fcd865'],
        tooltip: {trigger: 'axis',},
        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: qy_yh_name, 
			  },
			  xAxis: {
          show:false
        },
			  series: qy_yh_data
      };
		  // 使用刚指定的配置项和数据显示图表。
		  myChart1.setOption(option1);
      myChart2.setOption(option2);  
      myChart3.setOption(option3);  
      myChart4.setOption(option4);  
      myChart5.setOption(option5);  
      myChart6.setOption(option6);  
      myChart7.setOption(option7);  
      myChart8.setOption(option8);  
      myChart9.setOption(option9);  
      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)
    },
    goTo(path){
      this.$router.push(path)
    }
  },
  mounted(){
     this.getData()
  },
  created(){
    this.$api.getInfo().then(res=>{
				this.info=res.data.data
		})
  }
}
</script>