FE-V2-BIG-DATA/src/views/home.vue

<template>
  <div class="main">
    <img class="bg_img" src="@/assets/image/bg.png"/>
    <div class="header">
      <img class="header_l" src="" />
      <div class="header_c">实验室安全智能监测与控制系统</div>
      <div class="header_r1">
        <img class="header_r1_l" src="@/assets/image/index_icon3.png"/>
        <i class="schoolName">****</i>
        <img class="header_r1_r" src="@/assets/image/index_icon4.png" @click="openBackManageUrl()"/>
      </div>
    </div>
    <div class="left">
      <div class="left_t">
        <img class="left_t_l" src="@/assets/image/index_icon5.png" />
        <div class="left_t_l1"></div>
        <div class="left_t_c">
          <li :class="{'checked_li':checkedNum==0}">校院通知</li>
          <li :class="{'checked_li':checkedNum==1}">工作计划</li>
          <li :class="{'checked_li':checkedNum==2}">安全检查</li>
          <li :class="{'checked_li':checkedNum==3}">分级管控</li>
        </div>
        <div class="left_t_n">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <!--院校通知-->
                <div class="left_t_r" v-if="infoList">
                  <li v-for='(item,index) in infoList' :key="index" @click="openInfoUrl(item)">
                    <div class="left_t_r_t">
                      <i>{{item.title}}</i>
                      <i>{{item.company}}</i>
                      <i>{{ item.createTime.substring(0,10)}}</i>
                      <img class="left_t_r_t_r" src="@/assets/image/index_icon8.png" />
                    </div>
                    <div class="left_t_r_b over2">{{item.conAbstract}}</div>
                  </li>
                  <div v-if="infoList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>
                </div>
              </div>
              <div class="swiper-slide">
                <!--工作计划-->
                <div class="left_t_r2" v-if="planList">
                  <!--<div class="left_t_r2_t">
                    <i>{{planTitle}}</i>
                  </div>-->
                  <div class="left_t_r2_m">
                    <i>工作内容</i>
                    <i>执行单位</i>
                    <i>执行日期</i>
                  </div>
                  <div class="left_t_r2_b" v-for='(item,index2) in planList' :key="index2">
                    <li v-if="index2<7"  @click="openInfoUrl(item)">
                      <i class="over">{{item.title}}</i>
                      <i>{{item.company}}</i>
                      <i>{{item.executionTime}}</i>
                       <img src="@/assets/image/index_icon8.png" @click="openPlanUrl()"/>
                    </li>
                  </div>
                  <div v-if="planList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>
                </div>
              </div>
              <div class="swiper-slide">
                <!--安全检查-->
                <div class="left_t_r3">
                  <div class="left_t_r2_t">
                    <i>{{inspecremark}}-安全检查</i>
                    <img src="@/assets/image/index_icon8.png" @click="openinspectUrl()"/>
                  </div>
                  <div class="left_t_r2_t2">
                    <i>本次隐患排查数：{{inspeccheckZs}}</i>
                    <i>历史遗留：{{inspeccheckWzg}}</i>
                    <i>本次已整改：{{inspeccheckYzg}}</i>
                  </div>
                  <div class="left_t_r2_m">
                    <i>实验室</i>
                    <i>类型</i>
                    <i>级别</i>
                    <i>隐患排查数</i>
                    <i>已整改</i>
                  </div>
                  <div class="left_t_r2_b" v-if="inspectList">
                    <li v-for='(item,index3) in inspectList' :key="index3">
                      <i class="over">{{item.laboratoryName}}</i>
                      <i>{{item.typeName}}</i>
                      <i>{{item.typeLevel}}</i>
                      <i>{{item.checkZs}}</i>
                      <i>{{item.checkYzg}}</i>
                    </li>
                  </div>
                   <div v-if="inspectList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>
                </div>
              </div>
              <div class="swiper-slide">
                <!--分级管控-->
                <div class="left_t_r4" v-if="controlList">
                  <div class="left_t_r2_t">
                    <i>{{controlTitle}}</i>
                    <img src="@/assets/image/index_icon8.png" @click="openControlUrl()"/>
                  </div>
                  <div class="left_t_r2_m">
                    <i>实验室</i>
                    <i>类型</i>
                    <i>级别</i>
                    <i>计划执行数</i>
                    <i>实际执行数</i>
                    <i>执行率</i>
                  </div>
                  <div class="left_t_r2_b" v-for='(item,index4) in controlList' :key="index4">
                    <li v-if="index4<7">
                      <i>{{item.subName}}</i>
                      <i>{{item.typeName}}</i>
                      <i v-if="item.levelName=='一级'" class="controlColorOne">{{item.levelName}}</i>
                      <i v-if="item.levelName=='二级'" class="controlColorTow">{{item.levelName}}</i>
                      <i v-if="item.levelName=='三级'" class="controlColorThree">{{item.levelName}}</i>
                      <i v-if="item.levelName=='四级'" class="controlColorFour">{{item.levelName}}</i>
                      <i>{{item.planNum}}</i>
                      <i>{{item.finishedNum}}</i>
                      <div class="left_t_r2_b_i6">
                        <progress  :value="item.rateNum" max="100"></progress>
                        <i>{{item.rateNum}}%</i>
                      </div>
                    </li>
                  </div>

                  <div v-if="controlList.length<=0" style="position:relative;left: 44%; top:20%;color:#fff;">暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left_b">
        <div class="left_b_t">
          <div class="left_b_t_l">
            <!--公共小标题-->
            <div class="small_title">
              <div class="small_title_l">人员违规统计-本月</div>
              <div class="small_title_r">
                <i>总违规人数：{{resultCount}}</i>
                <img class="left_b_t_l_btn"  src="@/assets/image/index_icon8.png" @click="left_b_t_l_btn"/>
              </div>
            </div>
            <div class="left_b_t_l_b" id="left_b_t_l_b"></div>
          </div>
          <div class="left_b_t_r">
            <!--公共小标题-->
            <div class="small_title">
              <div class="small_title_l">安全准入办理统计</div>
              <div class="small_title_r"  @click="left_b_t_r_btn">
                <i>准入办理总人数：{{listcount}}</i>
                <img class="left_b_t_r_btn"  src="@/assets/image/index_icon8.png"/>
              </div>
            </div>
            <div class="left_b_t_r_b" id="left_b_t_r_b"></div>
          </div>
        </div>
        <img class="left_b_t1" src="@/assets/image/index_icon12.png" />
        <!--实验室信息-->
        <!---->
        <div class="left_b_b" >
          <ul id="move_ani" :style="`animation-duration: ${labInfoList.length/0.1}s;height:${labInfoList.length*66*1.7}px;`">
            <template v-for='(item) in labInfoList' >
              <li v-if="item.sensorFunctionStatusList.length>0" :key="item.id">
                <div class="left_b_b_t">
                  <i>{{item.room}}</i>
                  <i>{{item.address}}</i>
                  <!--<i>正常</i>-->
                </div>
                <div class="left_b_b_b">
                  <i v-for='(item2,index) in item.sensorFunctionStatusList' :key="index">{{item2.funcName}}：{{item2.formatVal}}</i>
                </div>
              </li>
             </template>
          </ul>

        </div>
        <!--风险预案-->
        <div class="risk" >
          <!--:class="index==1:one_top risk_li"-->
          <li  v-for='(item,index7) in warningList' :key="index7">
            <img src="@/assets/image/index_icon14.png"/>
            <i class="risk_li_l">{{item.groupName}}</i>
            <i class="risk_li_l2">{{item.roomName}}</i>
            <i class="risk_li_l3">{{item.buildName}} {{item.floorName}}</i>
            <i class="risk_li_l4">{{item.sensorStr}}</i>
            <i @click="openRiskPlanUrl(item)">查看详情 >></i>
          </li>
        </div>
        <div class="risk_one"  >
          <!--:class="index==1:one_top risk_li"-->
          <li  v-for='(item,index9) in warningList' :key="index9">
            <img src="@/assets/image/index_icon14.png"/>
            <i class="risk_li_l">{{item.groupName}}</i>
            <i class="risk_li_l2">{{item.roomName}}</i>
            <i class="risk_li_l3">{{item.buildName}} {{item.floorName}}</i>
            <i class="risk_li_l4">{{item.sensorStr}}</i>
            <i @click="openRiskPlanUrl(item)">查看详情 >></i>
          </li>
        </div>

      </div>
    </div>
    <div class="right">
      <div class="right_t">
        <!--公共小标题-->
        <div class="small_title">
          <div class="small_title_l">预案执行计划</div>
          <div class="small_title_r" @click="right_t_btn">
            <i>风险预警总数：{{planResultCount}}</i>
            <img class="right_t_btn"  src="@/assets/image/index_icon8.png" />
          </div>
        </div>
        <div class="right_t_b" id="right_t_b"></div>
        <img class="left_b_t1" src="@/assets/image/index_icon12.png" />
      </div>
      <div class="right_m">
        <div class="right_m_l">
          <!--公共小标题-->
          <div class="small_title">
            <div class="small_title_l">安全隐患统计-本月</div>
            <div class="small_title_r2" @click="right_m_l_btn">
              <i>隐患总数：{{dangerCount}}</i>
              <img class="right_m_l_btn"  src="@/assets/image/index_icon8.png"/>
            </div>
          </div>
          <div class="right_m_l_b" id="right_m_l_b"></div>
        </div>
        <div class="right_m_r">
          <!--公共小标题-->
          <div class="small_title">
            <div class="small_title_l">危险源统计</div>
            <div class="small_title_r2" @click="right_m_r_btn">
              <!--<i>隐患总数：63</i>-->
              <img class="right_m_r_btn"  src="@/assets/image/index_icon8.png"/>
            </div>
          </div>
          <div class="right_m_r_b" id="right_m_r_b"></div>
        </div>
      </div>
      <img class="left_b_t1" src="@/assets/image/index_icon12.png" />
      <div class="right_b">
        <div class="right_b_l">
               <!--公共小标题-->
          <div class="small_title">
            <div class="small_title_l">进入实验室人员</div>
            <div class="small_title_r">
              <i>总人数：{{labResultCount}}</i>
              <img class="right_b_btn"  src="@/assets/image/index_icon8.png" @click="right_b_btn"/>
            </div>
          </div>
          <div class="right_b_l_b">
            <div class="right_b_l_b_t">
              <i>实验室名称</i>
              <i>当前人数</i>
            </div>
            <div class="right_b_l_b_b" v-if="labList">
              <li  v-for='(item,index10) in labList' :key="index10"><a :name="item.name">{{item.name}}</a><i>{{item.online}}</i></li>
            </div>
            <div v-if="labList.length<=0" style="position:absolute;left: 36%; top:38%;color:#fff;">暂无数据</div>
          </div>

        </div>
        <div class="right_b_r">
             <!--公共小标题-->
          <div class="small_title">
            <div class="small_title_l">实验室分类分级统计</div>
            <div class="small_title_r" style="width:100px;">
              <img class="right_b_btn"  src="@/assets/image/index_icon8.png" @click="classifyGrade"/>
            </div>
          </div>
          <div class="right_b_r_b">
            <div class="right_b_r_b_t">
              <li v-for='(item,index11) in labTypeList' :key="index11"><i></i><i>{{item.typeName}}({{item.totalNum}})</i></li>
            </div>
            <div class="right_b_r_b_b" id="right_b_r_b_b"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

import {
  getLogoInfo,
  getYearControlInfo,
  groupGetList,
  indexCollegeListCheck,
  indexListRelease,
  listCollegeApplyColumn,
  listCollegeJh,
  listCollegeTz,
  mySub, newStatistics,
  onlineSumByBigView,
  optionCharts,
  queryHazardColumnar,
  workInfo,
  getUrlConfig,
  requestUrl, getTypeCount, getFiedCount
} from "../api/http"
import Swiper from 'swiper'
import $ from 'jquery'
import mqtt from 'mqtt/dist/mqtt'
import { Encrypt,Decrypt} from '@/utils/secret.js'
export default {

  data(){

    return {
      //MQTT请求参数-传感器
      mtopic:"lab/bigview",
      mtopicTwo:"manage/work"+localStorage.getItem('userId'),
      timer: '',//定时器
      dataList:[],
      labList:[],//实验室人员
      infoList:[],//工作通知
      planList:[],//工作计划
      planTitle:'',//工作计划
      inspectList:[],//安全检查
      inspecremark:'',//安全检查时间
      inspeccheckZs:'',//安全检查隐患排查数
      inspeccheckWzg:'',//安全检查历史遗留
      inspeccheckYzg:'',//安全检查已整改
      labInfoList:[],//实验室信息
      controlList:[],//分级管控
      controlTitle:'',//分级管控标题
      inspectBatchList:[],//安全检查批次列表
      //风险预案
      warningList:[],
      groupName:'',
      roomName:'',
      buildName:'',
      floorName:'',
      riskPlanId:'',//风险预案id
      subjectId:'',//实验室id
      sensorStr:'',//实验室id
      laboratoryId:'',//安全检查实验室检查批次id
      checkedNum:0,
      //首页总数
      resultCount:'',
      listcount:'',
      planResultCount:'',
      dangerCount:'',
      labResultCount:'',
      mySwiper:null,
      labTypeList:[]

    }
  },
  methods: {
    initSwiper: function () {
      let _this=this;
      _this.mySwiper= new Swiper('.swiper-container', {
        //loop: true, // 循环模式选项
        //autoplay:true,
        autoplay: {
          delay: 12000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        direction : 'vertical',
        //监听滚动到第几页
        on:{
          slideChangeTransitionEnd: function () {
            _this.checkedNum=this.realIndex
          }
        },
      });
    },
    //安全准入办理统计
    left_b_t_r_btn(){
      this.$router.push('./admittanceDetail')
    },
    //安全隐患统计
    right_m_l_btn(){
      this.$router.push('./dangerDetail')
    },
    //人员违规统计
    left_b_t_l_btn(){
      this.$router.push('./illegalDetail')
    },
    //工作通知
    openInfoUrl(d){
      this.$router.push({path:'./workInfoDetail',query:{key:d.id}})
    },
    //工作计划
    openPlanUrl(){
      this.$router.push('./workPlanDetail')
    },
    //分级管控
    openControlUrl(){
      this.$router.push('./controlDetail')
    },
    //安全检查
    openinspectUrl(){
      this.$router.push({path:'./inspectDetail',query:{key:this.laboratoryId}})

    },
    //安全检查批次
    openinspectBatchUrl(d){
      this.$router.push({path:'./inspectDetail',query:{key:d.id}})
    },
    //进入实验室人员
    right_b_btn(){
      this.$router.push('./labPersonDetail')
    },
    //预案执行统计
    right_t_btn(){
      this.$router.push('./planDetail')
    },

    //危险源统计
    right_m_r_btn(){
      this.$router.push('./riskDetail')
    },
    //实验室分类分级
    classifyGrade(){
      this.$router.push('./classifyGradeDetail')
    },

    //获取报警信息
    openRiskPlanUrl(d){
      this.$router.push({path:'./warningDetail',query:{key:d.id,subjectId:d.subjectId}})
    },
    //跳转后台管理
    openBackManageUrl(){
      window.location.href = localStorage.getItem('pcVisitUrl')
    },
    //MQTT订阅
    subscriptionMQTT(){
      let _this = this;
      this.client = mqtt.connect(localStorage.getItem('mqttUrl'), {
        username: localStorage.getItem('mqttUser'),
        password:localStorage.getItem('mqttPassword')
      });
      this.client.on("connect", e =>{
        console.log("连接成功",e);
        this.client.subscribe(this.mtopic, (err) => {
          if (!err) {
            console.log("警报通道订阅成功:" + this.mtopic);
          }
        });
      });
      this.client.on("message", (topic, message) => {
        if (message){
          let data = JSON.parse(message)

          if(topic == this.mtopic){
            //报警
            if(data.data == 'SUB_RISKPLAN_GROUP'){
              console.log("预案信息",data);
              _this.warningInfoFun();
            }
          }
        }
      });
    },

    getAjaxData: function () {
      let _this = this;
      //获取logo图片
      getLogoInfo({}).then((res) =>{
          if(res.code==200){
            $(".header_l").attr("src",requestUrl+res.data.rectangleLogo);
            $(".schoolName").html(res.data.schoolName);

            localStorage.setItem('logoImg',requestUrl+res.data.rectangleLogo)
          }
      })
      getUrlConfig().then(response => {
        console.log('开发配置',response.data)
        //判定http或者https
        let urlText = window.location.href.split('://')[0]+'://';
        let outerNet=window.location.href.indexOf(response.data.ipIdentify) == -1//true外网 false 内网
        if(outerNet){//外网
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+response.data.fileExtranetUrl)
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+response.data.cameraExtranetAgent)
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',response.data.ipIdentify)
          //摄像头访问地址
          localStorage.setItem('cameraUrl',urlText+response.data.cameraExtranetUrl)
          //MQTT地址
          localStorage.setItem('mqttUrl','wss://'+Decrypt(response.data.mqttExtranetUrl))
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(response.data.mqttExtranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(response.data.mqttExtranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+response.data.screenExtranetUrl)
          //后台访问地址
          localStorage.setItem('pcVisitUrl',urlText+response.data.pcExtranetUrl)
        }else{
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+response.data.fileIntranetUrl)
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+response.data.cameraIntranetAgent)
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',response.data.ipIdentify)
          //摄像头访问地址
          localStorage.setItem('cameraUrl',urlText+response.data.cameraIntranetUrl)
          //MQTT地址
          localStorage.setItem('mqttUrl','ws://'+Decrypt(response.data.mqttIntranetUrl))
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(response.data.mqttIntranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(response.data.mqttIntranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+response.data.screenIntranetUrl)
          //后台访问地址
          localStorage.setItem('pcVisitUrl',urlText+response.data.pcIntranetUrl)
        }



      });



      //安全隐患统计
      optionCharts({type:localStorage.getItem('deptLevel')}).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataCount=[];
          let data=res.data.list;
          _this.dangerCount=res.data.count
          for (var i = 0; i < 3; i++) {
            dataX.push( data[i].optionName)
            dataCount.push(data[i].count)
          }
          dataX.reverse()
          dataCount.reverse()

          this.safetyFun(dataX,dataCount)

        }
      })
      //人员违规统计
      newStatistics({}).then((res) =>{
        if(res.code==200){
          let illegalX=[];
          let illegalData=[];
          let data=res.data.list;
          _this.resultCount=res.data.resultCount;//总数

          if(data.length<=0){
            for (let i = 0; i <4; i++) {
              illegalX.push('其他')
              illegalData.push(0)
            }
          }else{
            data.forEach(function (item) {
              illegalX.push(item.content)
              illegalData.push(item.count)
            })

          }
          this.illegalFun(illegalX,illegalData)

        }
      })
      //安全准入办理统计
      listCollegeApplyColumn({}).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataValue=[];
          let data=res.data.listTg;
          _this.listcount=res.data.listcount////总数
          for (var i = 0; i < data.length; i++) {
            dataX.push( data[i].applyMonth)
            dataValue.push(data[i].applyNum);

          }
          this.admittanceFun(dataX,dataValue)

        }
      })
      //预案执行统计
      getYearControlInfo({}).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataValue=[];
          let data=res.data.list;
          _this.planResultCount=res.data.resultCount
          for (var i = 0; i < data.length; i++) {
            dataX.push( data[i].yearMonth)
            dataValue.push(data[i].num)
          }
          this.planFun(dataX,dataValue)

        }
      })
      //危险源统计
      queryHazardColumnar({}).then((res) =>{
        if(res.code==200){
          // let dataX=[
          //   {
          //     value:'73',
          //     name:'危化品 73kg',
          //   },
          //   {
          //     value:'62',
          //     name:'气瓶 62瓶',
          //   },
          //   {
          //     value:'51',
          //     name:'冷热设备 51台',
          //   },
          //   {
          //     value:'34',
          //     name:'特种设备 34台',
          //   },
          //
          // ];
          let dataX=[];
          let data=res.data;
          data.forEach(function (item) {
            if(item.totalNum==0){
              dataX.push({value:'', name:item.dictLabel+' '+item.totalNum})
            }else{
              dataX.push({value:item.totalNum, name:item.dictLabel+' '+item.totalNum})
            }

          })
          this.riskFun(dataX)

        }
      })
      //实验室人员
      onlineSumByBigView({pageNumStr:1,pageSizeStr:50}).then((res) =>{
        if(res.code==200){
          let data=res.data.list;
          _this.labResultCount=res.data.resultCount
          _this.labList=data
        }
      })
      //实验室分类
      getTypeCount({}).then((res) =>{
        if(res.code==200){
            let data=res.data
            this.labTypeList=data
        }
      })
      //实验室分级
      getFiedCount({}).then((res) =>{
        if(res.code==200){
          let _this=this;
          let data=res.data
          let dataX=[]
          data.forEach(function (item) {
              dataX.push({name:item.classifiedName,value:item.totalNum})
          })
          _this.classifyFun(dataX)
        }
      })
      //分级管控
      workInfo({pageNum:1,pageSize:9,type:localStorage.getItem('deptLevel')}).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.controlList=data.list
          _this.controlTitle=data.title

        }
      })
      //安全检查批次
      indexListRelease({pageNum:1,pageSize:10}).then((res) =>{
        if(res.code==200){
          let data=res.rows;
          let list=[];
          let num=0;
          if(data.length<10){

            for(var i=0;i<10;i++){

              if(num==data.length){
                num=0;
              }
              list.push(data[num])
              num++;

            }
            _this.inspectBatchList=list
          }else{
            _this.inspectBatchList=data
          }


        }
      })
      //实验室信息
      mySub({}).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.labInfoList=[]
          data.forEach(function (item){
            if(item.sensorFunctionStatusList.length>0){
              _this.labInfoList.push(item)
            }
          })
          /* _this.controlList=data.list
           _this.controlTitle=data.title*/

        }
      })
    },

    //工作通知
    infoFun:function(){
      let _this=this;
      listCollegeTz({pageNum:1,pageSize:4,notifyType:2}).then((res) =>{
        if(res.code==200){
          let data=res.rows;
          _this.infoList=data
        }
      })
    },
    //工作计划
    workPlanFun:function(){
      let _this=this;
      listCollegeJh({pageNum:1,pageSize:10,notifyType:1}).then((res) =>{
        if(res.code==200){
          let data=res.rows;
          _this.planList=data
          //_this.planTitle=res.data.list.title
        }
      })
    },
    //安全检查
    safetyInspectFun:function(){
      let _this=this;
      indexCollegeListCheck({pageNum:1,pageSize:10}).then((res) =>{
        if(res.code==200){
          let data=res.rows;
          _this.inspectList=data
          for (var i = 0; i < data.length; i++) {
            _this.inspecremark=data[0].remark;
            _this.inspeccheckWzg=data[0].listVo[0].checkWzg;
            _this.inspeccheckYzg=data[0].listVo[0].checkYzg;
            _this.inspeccheckZs=data[0].listVo[0].checkZs;
            _this.laboratoryId=data[0].id;
          }
        }
      })

    },
    //获取报警信息
    warningInfoFun:function(){
      let _this=this

      groupGetList({status:1}).then((res) =>{
        if(res.code==200) {
          let data = res.data
          if (res.data.length > 0) {
            _this.warningList=data
            if (res.data.length == 1) {
              $('.left_b_b').css('display', 'none');
              $('.risk').css('display', 'none');
              $('.risk_one').css('display', 'block');
            } else if (res.data.length > 1) {

              $('.risk').css('display', 'block')
              $('.risk_one').css('display', 'none');
              $('.left_b_t').css('display', 'none')
              $('.left_b_b').css('display', 'none')
            }
          } else {
            $('.risk').css('display', 'none');
            $('.risk_one').css('display', 'none');
            $('.left_b_b').css('display', 'block');
          }

        }
      })

    },

    /*人员违规统计*/
    illegalFun:function(illegalX,illegalData) {

         let  illegalOption = {
            grid: {
              left: '6%',
              right: '14%',
              bottom: '3%',
              top:'14%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                //rotate:(-10),
                textStyle: {//改变X轴字体颜色
                  color: '#fff',
                  fontSize:14,
                  align: 'left' //**
                },
                interval: 0,//使x轴上的文字显示完全,
                //设置一行显示几个字,自己设置
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 3;
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                }
              },
              axisTick:{//去掉X轴刻度
                show:false,
              },
              axisLine:{
                show:true,
                lineStyle:{
                  color:'#848cae',//改变X轴颜色
                  width:2,

                }
              },
              data: illegalX
            },
            yAxis: {
              type: 'value',
              splitLine:{
                show:true,
                lineStyle:{
                  color:'#314288',
                  opacity:'.2',

                }
              },

              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff',
                }
              },
              axisTick:{
                show:false,
              },
              axisLine:{
                lineStyle:{
                  color:'#848cae',
                  width:2,
                }
              }
            },
            series: [{
              data: illegalData,
              label:{
                show:true,
                color:'#fff',
                formatter:function(data){
                  return data.value;
                }
              },
              type: 'line',
              smooth: true,//让折线平滑
              symbolSize:8,   //拐点圆的大小
              itemStyle: {
                normal: {
                  color: "#917FFF",
                  lineStyle:{
                    width:4,
                    type:'solid'  //'dotted'虚线 'solid'实线
                  }
                },
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#917FFF'
                  }, {
                    offset: 1,
                    color: 'rgba(0, 0, 0, 0.5)'
                  }])
                }
              },
            }]
          };
          var left_m_b = this.$echarts.init(document.getElementById('left_b_t_l_b'));
          left_m_b.setOption(illegalOption);
            //定时动画
           clearInterval(chartReload);
           var chartReload = setInterval(function(){
             left_m_b.clear();
             left_m_b.setOption(illegalOption);
           },1000*6);

        },
    /*安全准入办理统计*/
    admittanceFun:function(dataX,dataValue) {
      var paperDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABqCAYAAAC1StHGAAAAAXNSR0IArs4c6QAAAx9JREFUWEfFmVlv00AUhc+1E6ep6AK8AC/8A/4E7zzywjPiiQdU9kVICCEEiH0pRYAoKkuhLGUTW1ERQuyV+A1tQyElblrsxok9aCYOWCVIIacSVxpFGXu+OfeM72icCHT0uQtTpfIKqchalcZKlUV75FiibDGXESrYQaTER1EqGFK26qlk0p+xprMgGCgsR6DWiS2rYallykIWFmAaYgAUEME0ieAjlHGJVH/kyFlB/1QvJFoFCx2w4zEqMbaqAZpheDEIEaYQWoOCa4VJ2FhkbtI36GZmrxN6sAb9gokrdnc+H3bai5GOLySVJxl6UC30JAGQcsOCtHeNuqUlTkd5aQqRI7/Trqmpya99KkBKCk6ugpZcqSgd60c9JchGjoWw00bYbiHMClRGAMuqyo0iSKBg+RFSxQi2G8EKIp2tL20bxjxRKmvMkViB1HFRKUAlVkX0V/GlrUsDkDXpGZOU8TGJqKVv+vUksclKtIKuMQ+IAUmTkqbVjJ3bp1NYsHHck7mAxIIkmXMXVhnApnEPtRT+svx1u6t2+NK6ub6CRlhGQesWEpDdmvvTxEamr97jS8u2XF0TG2GYFFq2s4AdJCCz8wvnQWbX/wY4rIL07gnOAwOQOdXYyENQ3aF8Se2ZaK6YqiUeA+qUc4MifLH3fuUUGACjwNpHKjAARoHs/8Z5YACMAhwgFRgApeBgngQcynMm4jCr4AgLODpJenCMBRxnASe+kymcZAGnWMBpFnCmQHrQzQLOsoAeFnDOJT0475LlfGE+ANSWdrHoAap62P7nEF9wqehBH/ebCX3cNwBKQS8LuDxNKuibJj3QAMqDKyzg6gyp4PoM6YEGUB70swpu/CAV3GQBAyzgFgu4zQLueKSJd1nAIAu4xwLu+6QHD1jAQxbwiAU89sn94MksCXjKAp6xgOfzAaD2xKFZ8ojzggUMaw+afP3Xb+/QAOqIM1wiq/FliUzh1XwAKA9eswo0gFLwJiDLWQNoBRTgrU6BeZTfsSm8ZwEfymQtGECTHuhfdfGRBXxiASPlADD/sDQTZcFIxQWU08xoQIKf1XEgxrNrNF0AAAAASUVORK5CYII='
      var admittanceOption = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'16%',
          containLabel: true
        },

        "xAxis": [{
          "type": "category",
          "data": dataX,
          /*"axisTick": {
              "alignWithLabel": true
          },*/
          axisTick: {
            show: false,

          },
          "nameTextStyle": {
            "color": "#82b0ec"
          },
          "axisLine": {
            show: true,
            "lineStyle": {
              "color": "#486CC2",
              width:2,
            }
          },
          "axisLabel": {
            "textStyle": {
              "color": "#fff",
              fontSize:14,
            },
            //margin: 20
          }
        }],
        "yAxis": [
          {

            axisTick: {
              show: false,

            },
            //坐标轴
            "axisLine": {
              show: true,
              "lineStyle": {
                "color": "#486CC2",
                width:2,
              }
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize:16,
              }
            },
            //分格线
            splitLine: {
              show: false,
              lineStyle: {
                color: '#4784e8',
                type:'dashed',
                opacity:0.4,
              }
            }
          },
        ],

        series: [

          {
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              }
            },
            data: dataValue,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            // symbol: "diamond",
            symbol: 'image://' + paperDataURI,
            // symbolOffset: [0, "-50%"],
            //symbolSize: [30, 22],
            zlevel: 2,
          },

        ],
        tooltip: {
          trigger: "axis",
          show: false,
        },
      };
      var left_b_b = this.$echarts.init(document.getElementById('left_b_t_r_b'));
      left_b_b.setOption(admittanceOption);
      //定时动画
      clearInterval(chartReload2);
      var chartReload2 = setInterval(function(){
        left_b_b.clear();
        left_b_b.setOption(admittanceOption);
      },1000*4);
    },
    /*预案执行统计*/
    planFun:function(dataX,dataValue) {
      var paperDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAACECAYAAACUGttzAAAAAXNSR0IArs4c6QAABg9JREFUaEO1mktvHEUUhc/tdgLJMpuxY8dJTByyhR2IJVt2rPkZbJEgJCCeAgQCCQQCIRAg3iAEAoEgAsczjp3YIeRlO2BFkRC2FM/Y8+iLbnW1M7G7qvpW4tnYnsfnM6dO3bpV3YTND+ZkdLp1P5AcB+hegGnLe7Y8QUCSAgMJaHUFdO1i++YPMaej0937GL0nwHiACANhKHIoJUBzGenSLKi50rkBnuQdIzvXH0yYH+eM7iFCWh1KoJWrSJbmQGvX5R+1DHjkBO9KdrcfAvNjTDgiXywMJSBNAc6QXLuE5Oo58ztI1FOLRk6s7MHuXQ8T86MgHgPD4Wnf00TAQArqtJD+PQdaXgILNBkAyWtAi0anVo8x6BGAhl0qCSwqAPMzAScpY/U/Tv+ZI2ouU/4a2fcYSovuPnvlXzD2uKE3XmH5+EAK7nWzdn16jXudOylNEzNwNz9adGRuYQ3AHWFP7TvE1yzjtYlJRpISJUmZdaJ4sUmMXZXBSQIwY22ikX97+XvrIwKcJkDGWJ9omKnjBB+ei1PctmC4FMeCg1aowBILsWKzx/J8/4PQosOzcVaEFZ9ebBKUqUCFVByOAYsVJwNxG59RKrYety3YmQo12E6Q9mQjH66yuMngjU8rFRsQQxSbMNxWcCWPTy02oUmF9Xi9f/DKcjyuBVfxWOrx+JRScZ/HZq1x1YooMDPWJRW+6naooVRc5nFZPVaD+zz21uPK4GLkq3gsE+RQXWmFVez1WMB3xYJ9RciAJ5WK7ZontYKJytc8Az6pBBeDV58ycSvpKfKGJRo8acGuCTI2caUJsLqv6DSm3GVTFOdgxdKUJuCM0bUzzzmlx/640oS2EwKjEwT/rlS8MXiBWnFwW8EaK6zHnUa+5jl7t4MnIq0QsK8ex4LX63XTxZPMxLKyeeA3ZSqKvqIeGLwDvyqtsLXCeOyzYr8SbL56xmgXYEryvc3mPYgBa1JR5HgqkIr9vyjBEjdmdE418g2hqwjt/1npsVUsYGfvZjaQSnDhcXDwDFjpsVjRE8W+Qj/6kxJsc9ydDlnxY5zHQfA+JViKjin0IcUGfCseu+K274ftskILtlO6W6TCpXjk+wpW2DMQMyFsKnohjyuB+wuMnXm96Xp+ouJU/F0Fxf1gWyt6M3mhN+CyPciIFmwVm7j56nFVcCGqyHFvJgAe/lYfN6kVmVjh83j4mziw8dgL/loPloOQrs8K6Y/3fqUDG4+lbIY81oIlXsbj04GyufdLneI8t4zemRD4i0iwKJYmaOvxo+S7RUOf68CFx8YK19IUAy6syEKDN/SZTvEG+IzNcZkVsvwPfaoF56fc2exkPkGc4E+0+zw5us/Q8yk2HqvB+WGTF2ysUIDNiXcxQWZtjl1xG/xYa0U+QTIB+zqhwY8iwXOBmWfAyr7CKPaBZfAGP4wAw4K9VnwQacXZkMexYLEiqDjWY1d1kxzX3tdZYXIc8pgLcIziPz1WGPB7OsUb1U3A+S69fMsbDZbB83r8bqRiiVsQHOPxuUDcau9EKhawb2caDS4Gz9Uf196OVOyLm5kgAt4Wj9+KAMvM+yvkcQxY6rGAfUWoFgsOxu3NCCsqKX4jIhWy/DussMdDLarFgKWjP9+wF9BvLkK3DA4P3usRVojH50OpeC0CLDkWsLcex4CN4kAbWwuATb9m14iNK47M4POBNrb2qt+Kzftvc78KZ+ALIfArC7rDf3utKbsQGrwYsHh88XaDzapswfkS4lilX1ZaIeBKil9Sgu3ONGzFtoFfjFBceOwt9DHgwmNvw6IFb06Fa9dUe0FpRX8qvIqfV4KLVFwKTZBtAz+3oG9YJBUexWQ6oWeVVtjB48shKwQc02L1gUvu8mrR4DNxinshxbFgn8fmurQBa6wwZZKRzYc2kE/HWbE9YKkVPsVm9/+UUnEx8wTs6iuiwEWtCHp8fF6/Shsr7E0FZWueUawFF2XzcuA2iMFjSsUFuFDs2kurwUWOF0KKn4xUfKvgLQVG7tZFhmxBZp7nbLN29HKbQDvK2pnS5wqPfYoZbaodnV8mYKcavDhlL3SXtljX/wdq6JsQCOkG3QAAAABJRU5ErkJggg=='
      var planOption = {

        /*内边距*/
        grid: {
          top: '14%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          data:dataX,
          //坐标轴
          axisLine: {
            lineStyle: {
              "color": "#486CC2",
              width:2,
            }
          },
          axisTick: {
            show: false,

          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize:14,
            }
          }
        },
        yAxis: [
          {
            axisTick: {
              show: false,

            },
            //坐标轴
            axisLine: {
              lineStyle: {
                "color": "#486CC2",
                width:2,
              }
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize:16,
              }
            },
            //分格线
            splitLine: {
              show: false,
              lineStyle: {
                color: '#4784e8'
              }
            }
          }
        ],

        series: [

          {
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              }
            },
            data:dataValue,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            // symbol: "diamond",
            symbol: 'image://' + paperDataURI,
            // symbolOffset: [0, "-50%"],
            //symbolSize: [30, 22],
            zlevel: 2,
          },

        ],
        tooltip: {
          trigger: "axis",
          show: false,
        },
      };
      var right_t_b = this.$echarts.init(document.getElementById('right_t_b'));
      right_t_b.setOption(planOption);
      //定时动画
      clearInterval(chartReload3);
      var chartReload3 = setInterval(function(){
        right_t_b.clear();
        right_t_b.setOption(planOption);
      },1000*4);
    },
    /*安全隐患统计*/
    safetyFun:function(dataX,dataValue) {
      let safetyOption =  {

        tooltip: {
          /*trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }*/
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'14%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show:false,
            textStyle: {//改变X轴字体颜色
              color: '#1463E3',

            },
          },
          axisTick:{//去掉X轴刻度
            show:false,
          },
          axisLine:{
            show:false,
            lineStyle:{
              color:'#fff',//改变X轴颜色

            }
          },
          splitLine: {           // 分隔线
            show: false,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              color: ['rgba(44,118,239,1)'],
              width: 1,
              type: 'solid',
              opacity:0.1
            },

          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {//改变X轴字体颜色
              color: '#fff',
              fontSize:14,

            },
          },
          axisTick:{//去掉X轴刻度
            show:false,
          },
          axisLine:{
            show:false,
            lineStyle:{
              color:'#2C76EF',//改变X轴颜色

            }
          },

          data: dataX
        },
        series: [
          {
            name: '安全隐患',
            type: 'bar',
            barGap: 0.1,
            barMaxWidth: '20%',
            label: {
              normal: {
                show: true,
                position: 'right',
                fontSize: 14,
                textStyle: {
                  color: '#fff',
                }
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5, //统计条弧度
                color: {

                  colorStops: [{
                    offset: 0,
                    color: '#1CC3F5' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#006FFF' // 100% 处的颜色
                  }],
                  globalCoord: false, // 缺省为 false

                }
              },
            },
            data: dataValue
          },

        ]
      };
      var left_t_b = this.$echarts.init(document.getElementById('right_m_l_b'));
      left_t_b.setOption(safetyOption);
      //定时动画
      clearInterval(chartReload4);
      var chartReload4 = setInterval(function(){
        left_t_b.clear();
        left_t_b.setOption(safetyOption);
      },1000*5);
    },
     /*危险源统计*/
     riskFun:function(dataX) {

      let riskOption =   {

        color: ['#58aecf', '#3b43cc', '#84bb77','#ebb474','#9b43ce'],//颜色
        legend: {
          type: 'scroll',
          orient: 'vertical',
          itemGap:20,
          itemWidth :14,
          textStyle:{
            color:'#fff',
            fontSize:14,
          },
          left: '5%',
          top: '20%',


        },
        series: [
          {

            type: 'pie',
            radius: ['30%', '70%'],
            center: ['74%', '50%'],
            roseType: 'area',
            label: {
              normal: {
                show: false,

              },

            },
            itemStyle: {
              borderRadius: 0
            },
            data:dataX,
            /*data: [
                { value: 40, name: '危险品  40%' },
                { value: 38, name: '气瓶数量  30%' },
                { value: 32, name: '冷热设备数量  20%' },
                { value: 30, name: '特种设备数量  15%' },
                { value: 28, name: '其他' },

            ]*/
          }
        ]
      };
      var right_m_b = this.$echarts.init(document.getElementById('right_m_r_b'));
      right_m_b.setOption(riskOption);
       //定时动画
       clearInterval(chartReload5);
       var chartReload5 = setInterval(function(){
         right_m_b.clear();
         right_m_b.setOption(riskOption);
       },1000*6);
    },
    /*实验室分级统计*/
    classifyFun(dataX){
      var colorList = ['#d02c2c', '#ff9b17', '#0183fa','#0a9419'];
      let classifyOption = {
        series: [{
          type: 'pie',
          z: 3,
          center: ['45%', '55%'],
          radius: ['40%', '55%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              formatter: (params) => {
                return '{b|' + params.name + '}' + '{c|(' + params.value + ')}'+ '{a|' +params.percent.toFixed(0)+  ' %}'
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [0, -10],
              height: 30,
              fontSize: 12,
              align: 'center',
              color: '#fff',
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 12,
                  color: '#fff',

                },
                c: {
                  fontSize: 12,
                  lineHeight: 12,
                  color: '#fff'
                },
                d: {
                  fontSize: 12,
                  lineHeight: 12,
                  color: '#fff',

                },

              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 16,
              lineStyle: {
                width: 1,
                color:'#fff'
              }
            }
          },
          data: dataX
        }]
      };
      var right_b_r_b_b = this.$echarts.init(document.getElementById('right_b_r_b_b'));
      right_b_r_b_b.setOption(classifyOption);
      //定时动画
      clearInterval(chartReload6);
      var chartReload6 = setInterval(function(){
        right_b_r_b_b.clear();
        right_b_r_b_b.setOption(classifyOption);
      },1000*6);
    },
  },
  mounted: function () {


    let _this=this;
    _this.getAjaxData();
    _this.warningInfoFun();
    _this.infoFun();
    _this.workPlanFun();
    _this.safetyInspectFun();
    _this.initSwiper();
    _this.subscriptionMQTT();
    // let timer = setInterval(() => {
    //     _this.getAjaxData();
    //     _this.infoFun();
    //     _this.workPlanFun();
    //     _this.safetyInspectFun();
    // },12000)
    //中间部分点击方法
    $(".left_t_c li").click(function(){
      let index = $(".left_t_c li").index(this);
      _this.mySwiper.slideTo(index, 1000, false);

      $(this).parent().children().removeClass();
      $(this).addClass("checked_li");
    });


  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

@function rw($px){

  @return $px*100/1920 *1vw;
}
@function rh($px){

  @return $px*100/1080 *1vh;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.over2{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.main {
  width: rw(1920);
  height: rh(1080);
  /* background: url("../img/index_bg.png") no-repeat;
   background-size: 100% 100%;*/
  position: relative;
  left: 0;
  top: 0;
  z-index: 50;
  .bg_img{
    width: rw(1920);
    height: rh(1080);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;
  }
  /*公共小标题*/
  .small_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .small_title_l{
      font-size: rh(18);
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #1ED0F8;
      line-height: rh(18);
    }
    .small_title_r{
      width: rw(300);
      text-align: right;
      >i{
        width: rw(200);
        display: inline-block;
        font-size: rh(14);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: rh(14);
        text-align: right;
        margin-right: rw(12);
      }
      >img{
        width: rw(12);
        height: rh(12);
        cursor: pointer;
        position: relative;
        top: rh(0);
      }
    }
    .small_title_r2{
      width: rw(140);
      text-align: right;
      >i{
        width: rw(100);
        display: inline-block;
        font-size: rh(14);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: rh(14);
        text-align: right;
        margin-right: rw(12);
      }
      >img{
        width: rw(12);
        height: rh(12);
        cursor: pointer;
        position: relative;
        top: rh(-2);
      }
    }
  }
  .header {
    width: 100%;
    position: absolute;
    left: rw(0);
    top: rh(0);
    z-index: 50;
    display: flex;
    justify-content: flex-start;
    .header_l{
      width: rw(182);
      height: rh(44);
      margin: rh(10) 0 0 rw(40);
    }
    .header_c{
      width: rw(1180);
      height: rh(152);
      margin-left: rw(136);
      background: url("~@/assets/image/index_icon2.png") no-repeat;
      background-size: 100% 100%;
      font-size: rh(30);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height:rh(30);
      text-align: center;
      padding-top: rh(26);
    }
    .header_r1{
      margin-left: rw(116);
      height: rh(64);
      display: flex;
      justify-content: flex-start;
      cursor: pointer;
      align-items: center;

      .header_r1_l{
        width: rw(24);
        height: rh(24);
      }
      >i{
        font-size: rh(18);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: rh(18);
        margin-left: rw(14);
        display: inline-block;
        width: rw(154);
      }
      .header_r1_r{
        width: rw(24);
        height: rh(24);
      }
    }
  }
  .left{
    position: absolute;
    left: rw(52);
    top: rh(66);
    z-index: 50;

    .left_t{
      display: flex;
      justify-content: flex-start;
      .left_t_l{
        width: rw(18);
        height: rh(166);
        margin-top: rh(40);
      }
      .left_t_l1{
        width: rw(4);
        height: rh(446);
        background: #004C95;
        margin-left: rw(4);
      }

      .left_t_c{
        margin-top: rh(68);
        >li{
          width: rw(308);
          height: rh(74);
          background: url("~@/assets/image/index_icon6.png") no-repeat;
          background-size: 100% 100%;
          font-size: rh(34);
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: rh(80);
          color: #FFFFFF;
          padding-left: rw(120);
          margin-bottom: rh(40);
          cursor: pointer;
        }
        >li:nth-of-type(4){
          margin-bottom: 0;
        }
        .checked_li{
          background: url("~@/assets/image/index_icon7.png") no-repeat;
          background-size: 100% 100%;
        }
        .unchecked{
          background: url("~@/assets/image/index_icon6.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      .left_t_n{
        overflow: hidden;
        width: rw(672);
        height: rh(406);
        margin-left: rw(36);
        margin-top: rh(82);
        /*校院通知*/
        .left_t_r{

          width: rw(672);
          height: rh(406);
          background: url("~@/assets/image/index_icon9.png") no-repeat;
          background-size: 100% 100%;
          padding: rh(12) rw(28) 0;
          box-sizing: border-box;
          >li{
            width: 100%;
            height: rh(90);
            border-bottom: 1px solid #2098B7;
            padding-top: rh(18);
            .left_t_r_t{
              height: rh(16);
              display: flex;
              justify-content: flex-start;
              align-items: center;
              >i{
                display: inline-block;
                font-size: rh(16);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: rh(16);
              }
              >i:nth-of-type(1){
                width: rw(242);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                margin-right: rw(20);
              }
              >i:nth-of-type(2){
                width: rw(208);
              }
              >i:nth-of-type(3){
                width: rw(128);
              }
              >img{
                width: rw(12);
                height: rh(12);
                cursor: pointer;
              }
            }
            .left_t_r_b{
              margin-top: rh(12);
              font-size: rh(14);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(18);
            }
          }
        }
        /*工作计划*/
        .left_t_r2{

          width: rw(672);
          height: rh(406);
          background: url("~@/assets/image/index_icon9.png") no-repeat;
          background-size: 100% 100%;

          padding: rh(10) rw(16) 0;
          box-sizing: border-box;
          .left_t_r2_t{
            width: 100%;
            height: rh(50);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            >i{
              width: rw(624);
              display: inline-block;
              font-size: rh(18);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(50);
              text-align: center;
            }
            >img{
              width: rw(12);
              height: rh(12);
              cursor: pointer;
            }
          }
          .left_t_r2_m{
            background: rgba(15, 96, 124, 0.2);
            height: rh(50);
            width: 100%;
            display: flex;
            justify-content: flex-start;

            >i{
              display: inline-block;
              font-size: rh(16);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(50);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            }
            >i:nth-of-type(1){
              width: rw(272);
              margin-left: rw(22);
              margin-right: rw(20);
            }
            >i:nth-of-type(2){
              width: rw(214);
            }
            >i:nth-of-type(3){
              width: rw(100);
            }

          }
          .left_t_r2_b{
            >li{
              height: rh(40);
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              >i{
                display: inline-block;
                font-size: rh(16);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: rh(40);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
              }
              >i:nth-of-type(1){
                width: rw(272);
                margin-left: rw(22);
                margin-right: rw(20);
              }
              >i:nth-of-type(2){
                width: rw(214);
              }
              >i:nth-of-type(3){
                // width: rw(146);
                width: rw(100);
              }
              >img{
                width:rw(12);
                height: rh(12);
                margin-left: rw(10);
              }
            }
            >li:nth-of-type(even){
              background: rgba(41, 124, 158, 0.2);
            }
          }
        }
        /*安全检查*/
        .left_t_r3{

          width: rw(672);
          height: rh(406);
          background: url("~@/assets/image/index_icon9.png") no-repeat;
          background-size: 100% 100%;

          padding: rh(10) rw(16) 0;
          box-sizing: border-box;
          .left_t_r2_t{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: rh(26);
            >i{
              width: rw(624);
              display: inline-block;
              font-size: rh(18);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(18);
              text-align: center;
            }
            >img{
              width: rw(12);
              height: rh(12);
              cursor: pointer;
            }
          }
          .left_t_r2_t2{
            width: 100%;
            height: rh(56);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            >i{
              width: rw(624);
              display: inline-block;
              font-size: rh(16);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(56);
              text-align: center;
            }

          }
          .left_t_r2_m{
            background: rgba(15, 96, 124, 0.2);
            height: rh(50);
            width: 100%;
            display: flex;
            justify-content: flex-start;

            >i{
              display: inline-block;
              font-size: rh(16);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(50);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            }
            >i:nth-of-type(1){
              width: rw(184);
              margin-left: rw(22);
            }
            >i:nth-of-type(2){
              width: rw(110);
            }
            >i:nth-of-type(3){
              width: rw(106);
            }
            >i:nth-of-type(4){
              width: rw(156);
            }
            >i:nth-of-type(5){
              width: rw(72);
            }
          }
          .left_t_r2_b{
            >li{
              height: rh(40);
              width: 100%;
              display: flex;
              justify-content: flex-start;

              >i{
                display: inline-block;
                font-size: rh(14);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: rh(40);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
              }
              >i:nth-of-type(1){
                width: rw(184);
                margin-left: rw(22);
              }
              >i:nth-of-type(2){
                width: rw(110);
              }
              >i:nth-of-type(3){
                width: rw(106);
              }
              >i:nth-of-type(4){
                width: rw(156);
              }
              >i:nth-of-type(5){
                width: rw(72);
              }
              >img{
                width:rw(12);
                height: rh(12);
              }
            }
            >li:nth-of-type(even){
              background: rgba(41, 124, 158, 0.2);
            }
          }
        }
        /*分级管控*/
        .left_t_r4{
          width: rw(672);
          height: rh(406);
          background: url("~@/assets/image/index_icon9.png") no-repeat;
          background-size: 100% 100%;

          padding: rh(10) rw(16) 0;
          box-sizing: border-box;

          .left_t_r2_t{
            width: 100%;
            height: rh(50);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            >i{
              width: rw(624);
              display: inline-block;
              font-size: rh(18);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(50);
              text-align: center;
            }

            >img{
              width: rw(12);
              height: rh(12);
              cursor: pointer;
            }
          }
          .left_t_r2_m{
            background: rgba(15, 96, 124, 0.2);
            height: rh(50);
            width: 100%;
            display: flex;
            justify-content: flex-start;

            >i{
              display: inline-block;
              font-size: rh(16);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(50);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            }
            >i:nth-of-type(1){
              width: rw(150);
              margin-left: rw(22);
            }
            >i:nth-of-type(2){
              width: rw(68);
            }
            >i:nth-of-type(3){
              width: rw(60);
            }
            >i:nth-of-type(4){
              width: rw(102);
            }
            >i:nth-of-type(5){
              width: rw(108);
            }
            >i:nth-of-type(6){
              width: rw(140);
            }

          }
          .left_t_r2_b{
            >li{
              height: rh(40);
              width: 100%;
              display: flex;
              justify-content: flex-start;

              >i{
                display: inline-block;
                font-size: rh(16);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: rh(40);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
              }
              >i:nth-of-type(1){
                width: rw(150);
                margin-left: rw(22);
              }
              >i:nth-of-type(2){
                width: rw(68);
              }
              >i:nth-of-type(3){
                width: rw(60);
              }
              >i:nth-of-type(4){
                width: rw(102);
              }
              >i:nth-of-type(5){
                width: rw(108);
              }
              >i:nth-of-type(6){
                width: rw(140);
              }
              .left_t_r2_b_i6{

                width: rw(140);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                >progress{
                  width: rw(90);
                }
                >i{
                  display: inline-block;
                  width: rw(40);
                  font-size: rh(14);
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #FFFFFF;
                  margin-left: rw(6);
                }
              }
            }
            .controlColorOne{
              color: #FF4448;
            }
            .controlColorTow{
              color: #F98556;
            }
            .controlColorThree{
              color: #46AF2D;
            }
            .controlColorFour{
              color: #5688F9;
            }
            >li:nth-of-type(even){
              background: rgba(41, 124, 158, 0.2);
            }
          }
        }

      }

    }
    .left_b{
      width: rw(1027);
      height: rh(452);
      background: url("~@/assets/image/index_icon10.png") no-repeat;
      background-size: 100% 100%;
      margin-top: rh(20);
      margin-left: rw(16);
      .left_b_t{
        display: flex;
        justify-content: flex-start;

        .left_b_t_l{
          width: rw(482);
          padding-top: rh(28);
          margin-left: rw(14);
          .left_b_t_l_b{
            width: rw(482);
            height: rh(268);
          }
        }
        .left_b_t_r{
          width: rw(468);
          padding-top: rh(28);
          margin-left: rw(34);
          .left_b_t_r_b{
            width: rw(468);
            height: rh(268);
          }
        }
      }
      .left_b_t1{
        width: rw(952);
        height: rh(2);
        margin-left: rw(48);
      }
      .left_b_b{
        width: 100%;
        height: rh(112);
        overflow: hidden;
        background: 0;
        >ul{
          /*height: rh(2000);*/
          animation-name: move;
          //animation-duration: 6s;
          /* 设置无限循环 */
          animation-timing-function: linear; // 动画速度曲线，匀速
          animation-iteration-count: infinite; // 动画循环无限次播放
          >li{
            width: rw(966);
            height: auto;
            margin: 0 rw(30);
            background: rgba(30, 118, 142, 0.2);
            margin-bottom: rh(12);
            padding: rh(12) 0;
            box-sizing: border-box;
            .left_b_b_t{
              display: flex;
              justify-content: flex-start;
              >i{
                display: inline-block;
                font-size: rh(16);
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #00FAFF;
                line-height: rh(16);

              }
              >i:nth-of-type(1){
                margin-right: rw(42);
                margin-left: rw(12);
              }
              >i:nth-of-type(2){
                font-weight: bold;
                margin-right: rw(8);
              }
              >i:nth-of-type(3){
                color: #00AA3C;
              }
            }
            .left_b_b_b{
              width: 100%;
              display: flex;
              justify-content: flex-start;
              overflow: hidden;
              margin-top: rh(16);
              margin-left: rw(12);
              flex-wrap: wrap;
              >i{
                display: inline-block;
                font-size: rh(14);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height:rh(18);
                margin-right: rw(30);

              }
            }
          }
        }

      }
      .left_b_b:hover>ul
      {
        cursor: pointer;
        animation-play-state: paused ;
      }
      .showClass{
        display: block;
      }
      /*风险预案*/
      .risk{

        width: rw(1028);
        height: rh(458);
        position: absolute;
        left: rw(0);
        top: rh(512);
        z-index: 200;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        padding-left: rw(34);
        padding-top: rh(50);
        overflow-y: auto;
        display: none;
        >li{
          -webkit-animation: ani 2s linear infinite;
          background: url("~@/assets/image/index_icon13.png") no-repeat;
          background-size: 100% 100%;
          width:100%;
          height: rh(100);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: rh(40);
          >img{
            width: rw(40);
            height: rh(40);
            margin-left: rw(28);
            margin-right: rw(12);
          }
          >i{
            display: inline-block;
            font-size: rh(18);
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: rh(22);
          }
          >i:nth-of-type(1){
            font-size: rh(22);
            width: rw(144);
          }
          >i:nth-of-type(2){
            width: rw(76);
          }
          >i:nth-of-type(3){
            width: rw(288);
          }
          >i:nth-of-type(4){
            width: rw(248);
          }
          >i:nth-of-type(5){
            width: rw(120);
          }
        }
        .one_top{
          margin-top: rh(276);
        }
      }
      .risk_one{

        width: rw(956);
        height: rh(100);
        position: absolute;
        left: rw(34);
        top: rh(838);
        z-index: 200;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        overflow: hidden;
        >li{
          -webkit-animation: ani 2s linear infinite;
          background: url("~@/assets/image/index_icon13.png") no-repeat;
          background-size: 100% 100%;
          width:100%;
          height: rh(100);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: rh(40);
          >img{
            width: rw(40);
            height: rh(40);
            margin-left: rw(28);
            margin-right: rw(12);
          }
          >i{
            display: inline-block;
            font-size: rh(18);
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: rh(22);
          }
          >i:nth-of-type(1){
            font-size: rh(22);
            width: rw(144);
          }
          >i:nth-of-type(2){
            width: rw(76);
          }
          >i:nth-of-type(3){
            width: rw(288);
          }
          >i:nth-of-type(4){
            width: rw(248);
          }
          >i:nth-of-type(5){
            width: rw(120);
          }
        }
      }
    }
  }
  .right{
    width: rw(748);
    height: rh(880);
    position: absolute;
    right: rw(62);
    top: rh(148);
    z-index: 50;
    background: url("~@/assets/image/index_icon11.png") no-repeat;
    background-size: 100% 100%;
    padding: rh(34) rw(30) 0 rw(34);
    box-sizing: border-box;
    .right_t{
      width: rw(684);
      .right_t_b{
        width: rw(684);
        height: rh(226);
      }
    }
    .right_m{
      margin-top: rh(26);
      display: flex;
      justify-content: flex-start;
      .right_m_l{
        width: rw(304);
        .right_m_l_b{
          width: rw(304);
          height: rh(214);
        }
      }
      .right_m_r{
        margin-left: rw(46);
        .right_m_r_b{
          width: rw(334);
          height: rh(214);
        }
      }
    }
    .right_b{
      margin-top: rh(18);
      display: flex;
      justify-content: space-between;
      .right_b_l{
        width: rw(304);
        /*小标题*/
        .small_title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .small_title_l{
            font-size: rh(18);
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #1ED0F8;
            line-height: rh(18);
          }
          .small_title_r{
            flex: 1;
            text-align: right;
            >i{
              width: rw(100);
              display: inline-block;
              font-size: rh(14);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(14);
              text-align: right;
              margin-right: rw(12);
            }
            >img{
              width: rw(12);
              height: rh(12);
              cursor: pointer;
              position: relative;
              top: rh(0);
            }
          }
          .small_title_r2{
            width: rw(140);
            text-align: right;
            >i{
              width: rw(100);
              display: inline-block;
              font-size: rh(14);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(14);
              text-align: right;
              margin-right: rw(12);
            }
            >img{
              width: rw(12);
              height: rh(12);
              cursor: pointer;
              position: relative;
              top: rh(-2);
            }
          }
        }
        .right_b_l_b{
          position: relative;
          .right_b_l_b_t{
            height: rh(48);
            display: flex;
            justify-content: flex-start;
            border-bottom: 1px solid #00FAFF;
            margin-top: rh(16);
            >i{
              display: inline-block;
              font-size: rh(16);
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #00FAFF;
              line-height: rh(48);
              margin-left: rw(6);
            }
            >i:nth-of-type(1){
              width: rw(223);
            }
            >i:nth-of-type(2){
              width: rw(84);
            }
          }
          .right_b_l_b_b{
            height: rh(190);
            overflow-y: auto;
            background: 0;
            >li{
              height: rh(40);
              display: flex;
              justify-content: flex-start;
              border-bottom: 1px solid #00DFFF;
              >a{
                width: rw(223);
                display: inline-block;
                font-size: rh(14);
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #fff;
                line-height: rh(40);
                margin-left: rw(6);
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
              }
              >i{
                width: rw(84);
                text-align: center;
                padding-right: rw(50);
                display: inline-block;
                font-size: rh(14);
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #fff;
                line-height: rh(40);
                margin-left: rw(6);
              }
            }

          }
        }
      }
      .right_b_r{
        width: rw(334);
        /*小标题*/
        .small_title {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .small_title_l{
            font-size: rh(18);
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #1ED0F8;
            line-height: rh(18);
          }
        }
        .right_b_r_b_t{
          display: flex;
          justify-content: flex-start;
          flex-wrap:wrap;
          margin-top: rh(10);
          >li{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: rw(30);
            >i:nth-of-type(1){
              width:rw(8);
              height: rh(8);
              background: #FFFFFF;
              border-radius:rh(4);
              margin-right: rw(4);
            }
            >i:nth-of-type(2){
              font-size: rh(12);
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              line-height: rh(32);
            }
          }
        }
        .right_b_r_b_b{
          width: rw(344);
          height: rh(204);
          color: ['#E9BA44', '#0086F1', '#21B532','#1B96EA'],//颜色
        }
      }

    }
  }

}
/*滚动动画*/
@keyframes move{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-70%);
  }
}
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>