FE-MultipleCollegeBigData/src/views/courtyardManage/courtyardHome.vue

<template>
  <div class="home-page">
    <headerComponent></headerComponent>
    <div class="left" v-if="showType">
      <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}" @click="checkedNumButton(0)" v-if="deptId">校院通知</li>
          <li :class="{'checked_li':checkedNum==1}" @click="checkedNumButton(1)">预警事件</li>
          <li :class="{'checked_li':checkedNum==2}" @click="checkedNumButton(2)" v-if="deptId">工作计划</li>
        </div>
        <div class="left_t_n">
          <el-carousel ref="el-carousel" class="swiper-container" @change="checkedNumChange" :interval="6000"
                       trigger="click" direction="vertical" indicator-position="none" height="410px">
            <el-carousel-item  v-if="deptId" 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,1)">
                    <div class="left_t_r_t">
                      <i>{{item.title}}</i>
                      <i>{{item.company}}</i>
                      <i>{{parseTime(item.createTime,'{y}-{m}-{d}')}}</i>
                      <img class="left_t_r_t_r" src="@/assets/image/index_icon8.png"/>
                    </div>
                    <div class="left_t_r_b over2">{{item.title}}</div>
                  </li>
                  <div v-if="infoList.length<=0"
                       style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据
                  </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item class="swiper-wrapper">
              <div class="swiper-slide">
                <!--预警事件通知-->
                <div class="left_t_r2" v-if="planList">
                  <div class="left_t_r2_title">
                    <p>预警事件通知</p>
                    <img src="@/assets/image/index_icon8.png" @click="eventUrl()"/>
                  </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,2)">
                      <i class="over">{{parseTime(item.warnTime,'{y}-{m}-{d} {h}:{i}')}}</i>
                      <i>{{item.warnContent}}</i>
                      <i>{{item.subName}}</i>
                      <img src="@/assets/image/index_icon8.png"/>
                    </li>
                  </div>
                  <div v-if="planList.length<=0"
                       style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据
                  </div>
                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item  v-if="deptId" class="swiper-wrapper">
              <div class="swiper-slide">
                <!--工作计划-->
                <div class="left_t_r3" v-if="workList">
                  <div class="left_t_r2_m">
                    <i>工作内容</i>
                    <i>执行单位</i>
                    <i>执行日期</i>
                  </div>
                  <div class="left_t_r2_b" v-for='(item,index2) in workList' :key="index2">
                    <li v-if="index2<7"  @click="openInfoUrl(item,3)">
                      <i class="over">{{item.title}}</i>
                      <i>{{item.company}}</i>
                      <i>{{parseTime(item.createTime,'{y}-{m}-{d}')}}</i>
                      <img src="@/assets/image/index_icon8.png"/>
                    </li>
                  </div>
                  <div v-if="workList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="left_b">
        <personnelAdmittanceECharts></personnelAdmittanceECharts>
      </div>
    </div>
    <div class="right" v-if="showType">
      <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_b">
        <p class="title-component-p">实验室安全监测</p>
        <newSubVideoComponent v-if="!warningList[0]"></newSubVideoComponent>
        <!--报警预案-->
        <div class="warning-max-big-box" v-if="warningList[0]">
          <div class="warning-for-box" v-for='(item,index8) in warningList' :key="index8">
            <img src="@/assets/image/index_icon14.png">
            <p class="warning-name">{{item.eventName}}</p>
            <div>
              <span v-for="(minItem,index9) in item.triggerUploadData" :key="index9">{{minItem.deviceName}}：{{minItem.deviceValue}}{{minItem.unit}}</span>
            </div>
            <p class="warning-button" @click="openRiskPlanUrl(item)">查看详情</p>
          </div>
        </div>
      </div>
    </div>
    <planAlarm ref="planAlarm"></planAlarm>
  </div>
</template>

<script>
  import {
    systemNotifyList,
    laboratoryBigViewSelectTriggerInfo,
    laboratoryBigViewCollegeEventStatistics,
    laboratoryBigViewListCollegeApplyColumn,
    examBigViewNewStatistics,
    systemWarningNoticeNoMenuList,
    laboratoryClassTypeGetList
  } from '@/api/index'
  import Swiper from 'swiper'
  import mqtt from 'mqtt/dist/mqtt'
  import { Encrypt, Decrypt } from '@/utils/secret'
  import headerComponent from '../headerComponent.vue'
  import planAlarm from '@/components/planAlarm/planAlarm.vue'
  import newSubVideoComponent from '@/components/newSubVideoComponent.vue'
  import personnelAdmittanceECharts from '@/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue'

  export default {
    components: {
      headerComponent,
      planAlarm,
      personnelAdmittanceECharts,
      newSubVideoComponent
    },
    data() {
      return {
        showType:true,
        circularLogo: localStorage.getItem('circularLogo'),
        deptId: null,
        mtopicTwo: 'manage/work' + localStorage.getItem('userId'),
        timer: null,//定时器
        chartReload3: null,//定时器
        chartReload4: null,//定时器
        chartReload5: null,//定时器
        chartReload6: null,//定时器
        dataList: [],
        labList: [],//实验室人员
        infoList: [],//院校通知
        planList: [],//预警事件
        planTitle: '',//预警事件
        workList: [],//工作计划
        workTitle: '',//工作计划
        inspecremark: '',//安全检查时间
        inspeccheckZs: '',//安全检查隐患排查数
        inspeccheckWzg: '',//安全检查历史遗留
        inspeccheckYzg: '',//安全检查已整改
        labInfoList: [],//实验室信息
        controlTitle: '',//分级管控标题
        inspectBatchList: [],//安全检查批次列表
        //风险预案
        warningList: [],
        groupName: '',
        roomName: '',
        buildName: '',
        floorName: '',
        riskPlanId: '',//风险预案id
        subjectId: '',//实验室id
        sensorStr: '',//实验室id
        planId: '',//安全检查id
        checkedNum: 0,
        //首页总数
        resultCount: '',
        listcount: '',
        planResultCount: '',
        mySwiper: null,
        labTypeList: [],
        //v3
        classifyList: [],
        //MQTT请求参数-预案
        planOpic: 'lab/risk/plan/change',
        planClient: {}
      }
    },
    created() {
      this.$set(this, 'deptId', localStorage.getItem('deptId'))
    },
    mounted() {
      let self = this
      self.infoFun()
      self.warningPlanFun()
      self.workPlanFun()
      self.laboratoryBigViewSelectTriggerInfo()
      self.laboratoryBigViewCollegeEventStatistics()
      this.offPlanMQTT('on')
      this.timerPlay()
    },
    methods: {
      checkDept(){
        let self = this;
        if(!this.warningList[0]){
          this.$set(this, 'deptId', localStorage.getItem('deptId'))
          this.$set(this,'showType',false);
          setTimeout(function(){
            self.$set(self,'showType',true);
            self.infoFun();
            self.warningPlanFun();
            self.workPlanFun();
            self.laboratoryBigViewSelectTriggerInfo();
            self.laboratoryBigViewCollegeEventStatistics();
            self.$set(self,'checkedNum',0);
          },500);
        }

      },
      // 定时器
      timerPlay() {
        let self = this
        clearInterval(this.timer)
        this.timer = setInterval(function() {
          self.infoFun()
          self.warningPlanFun()
          self.workPlanFun()
          self.laboratoryBigViewSelectTriggerInfo()
          self.laboratoryBigViewCollegeEventStatistics()
        }, 50000 * 6)
      },
      /**V3新--------------start----**/
      // 切换轮播
      checkedNumButton(type) {
        if (type != this.checkedNum) {
          this.$set(this, 'checkedNum', type)
          this.$set(this.$refs['el-carousel'], 'activeIndex', type)
        }
      },
      checkedNumChange() {
        this.$set(this, 'checkedNum', this.$refs['el-carousel'].activeIndex)
      },
      //跳转页面
      tableButton(type, row) {
        if (type == 'classifyGradeDetail') {//实验室分类分级
          this.$router.push('./classifyGradeDetail')
        } else if (type == 'riskDetail') {//危险源统计
          this.$router.push('./riskDetail')
        } else if (type == 'dangerDetail') {//安全隐患统计
          this.$router.push('./dangerDetail')
        }
      },
      /**V3新--------------end----**/
      initSwiper() {
        let self = this
        self.mySwiper = new Swiper('.swiper-container', {
          //loop: true, // 循环模式选项
          //autoplay:true,
          autoplay: {
            delay: 12000,
            stopOnLastSlide: false,
            disableOnInteraction: true
          },
          direction: 'vertical',
          //监听滚动到第几页
          on: {
            slideChangeTransitionEnd: function() {
              self.checkedNum = this.realIndex
            }
          }
        })
      },
      //通知详情
      openInfoUrl(item, type) {
        this.$router.push(
          {
            path: './workInfoDetail',
            query: {
              item: item,
              type: type
            }
          })
      },
      //安全检查
      openinspectUrl() {
        this.$router.push({ path: './inspectDetail' })
      },
      //预警通知
      eventUrl() {
        this.$router.push({ path: './eventList' })
      },
      //进入实验室人员
      right_b_btn() {
        this.$router.push('./labPersonDetail')
      },
      //预案执行统计
      right_t_btn() {
        this.$router.push('./planDetail')
      },
      //获取报警信息
      openRiskPlanUrl(item) {
        this.$refs['planAlarm'].initialize(item)
      },
      //预案执行统计
      laboratoryBigViewCollegeEventStatistics() {
        let self = this
        let obj = {};
        if(!localStorage.getItem('deptId')){
          obj.buildId = localStorage.getItem('buildId');
        }
        laboratoryBigViewCollegeEventStatistics(obj).then((res) => {
          if (res.code == 200) {
            let dataX = []
            let dataValue = []
            let data = res.data.list
            self.planResultCount = res.data.total
            for (var i = 0; i < data.length; i++) {
              dataX.push(data[i].yearMonth)
              dataValue.push(data[i].count)
            }
            this.planFun(dataX, dataValue)

          }
        })
      },
      //校院通知
      infoFun: function() {
        let self = this
        systemNotifyList({ pageNum: 1, pageSize: 4, notifyType: 2 }).then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.contentText = item.content.replace(/<\/?.+?\/?>/g, '')
            })
            this.$set(self, 'infoList', res.data)
          }
        })
      },
      //预警事件
      warningPlanFun: function() {
        let self = this
        let obj = { page: 1, pageSize: 6 };
        if(!localStorage.getItem('deptId')){
          obj.buildId = localStorage.getItem('buildId');
        }
        systemWarningNoticeNoMenuList(obj).then((res) => {
          if (res.code == 200) {
            this.$set(self, 'planList', res.data.records)
          }
        })
      },
      //工作计划
      workPlanFun: function() {
        let self = this
        systemNotifyList({ pageNum: 1, pageSize: 4, notifyType: 3 }).then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.contentText = item.content.replace(/<\/?.+?\/?>/g, '')
            })
            this.$set(self, 'workList', res.data)
          }
        })
      },
      /*预案执行统计*/
      planFun: function(dataX, dataValue) {
        var paperDataURI = 'data:image/png;base64,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'
        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(this.chartReload3)
        this.chartReload3 = setInterval(function() {
          right_t_b.clear()
          right_t_b.setOption(planOption)
        }, 1000 * 20)
      },
      //预案-MQTT连接
      offPlanMQTT(type) {
        let self = this
        if (self.planClient.unsubscribe) {
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end()
          this.$set(this, 'planClient', {})
        }
        //判断传入参数如果存在 发起一次新的连接
        if (type) {
          this.planMQTT()
        }
      },
      //预案-MQTT订阅
      planMQTT() {
        let self = this
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        })
        this.planClient.on('connect', e => {
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              // console.log("预案-订阅成功:" + self.planOpic);
            } else {
              // console.log("预案-连接错误:" + err);
            }
          })
        })
        this.planClient.on('message', (topic, message) => {
          if (message) {
            console.log('预案-message', message)
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo()
          }
        })
      },
      //获取报警信息
      laboratoryBigViewSelectTriggerInfo: function() {
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then((res) => {
          if (res.code == 200) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].triggerUploadData = JSON.parse(res.data[i].triggerUploadData)
            }
            this.$set(this, 'warningList', res.data)
          }
        })

      }
    },

    beforeDestroy() {
      let self = this
      clearInterval(this.timer)
      self.offPlanMQTT()
    }

  }
</script>
<style lang="scss" scoped>
  * {
    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;
  }

  .home-page {
    width: 1920px;
    height: 1080px;
    background-image: url("../../assets/ZDimages/yjdpbg@1x.png");
    background-size: 1920px 1080px;
    position: relative;
    left: 0;
    top: 0;
    z-index: 50;
    .bg_img {
      width: 1920px;
      height: 1080px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 50;
    }
    /*公共小标题*/
    .small_title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .small_title_l {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #1ED0F8;
        line-height: 18px;
      }
      .small_title_r {
        width: 280px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > i {
          // width: 200px;
          display: inline-block;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          text-align: right;
          margin-right: 12px;
        }
        > img {
          width: 12px;
          height: 12px;
          cursor: pointer;
          position: relative;
          top: 0;
        }
      }
      .small_title_r2 {
        //width: 140px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > i {
          width: 100px;
          display: inline-block;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          text-align: center;
        }
        > img {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
      }
    }
    .header {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 50;
      display: flex;
      justify-content: flex-start;
      .position-img-button-left-box {
        cursor: pointer;
        position: absolute;
        top: 4px;
        left: 410px;
        display: flex;
        width: 190px;
        height: 24px;
        img {
          width: 24px;
          height: 18px;
          display: inline-block;
          margin: 4px 0;
        }
        p {
          color: #24D1F9;
          font-size: 16px;
          line-height: 24px;
          margin-left: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }
      }
      .position-img-button-right-box {
        cursor: pointer;
        position: absolute;
        top: 4px;
        right: 385px;
        display: flex;
        width: 190px;
        height: 24px;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
        }
        p {
          color: #24D1F9;
          font-size: 16px;
          line-height: 24px;
          margin-left: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }
      }
      .header_l {
        width: 250px;
        height: 55px;
      }
      .header_c {
        width: 1180px;
        height: 152px;
        margin-left: 136px;
        /*background: url("~@/assets/image/index_icon2.png") no-repeat;*/
        /*background-size: 100% 100%;*/
        padding-top: 26px;
        position: relative;
        .header_c-p{
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 30px;
          text-align: center;
          padding-left: 70px;
        }
        .header_l-position {
          z-index: 10;
          position: absolute;
          top: 17px;
          left: 330px;
          width: 50px;
          height: 50px;
        }
      }
      .header_r1 {
        margin-left: 116px;
        height: 64px;
        display: flex;
        justify-content: flex-start;
        cursor: pointer;
        align-items: center;

        .header_r1_l {
          width: 24px;
          height: 24px;
        }
        > i {
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 18px;
          margin-left: 14px;
          display: inline-block;
          width: 154px;
        }
        .header_r1_r {
          width: 24px;
          height: 24px;
        }
      }
      .position-button-right-bottom-1{
        position:absolute;
        bottom:20px;
        right:325px;
        color:#fff;
        background-color:#013147;
        border:2px solid #1d94b2;
        border-radius:10px;
        font-size:18px;
        height:50px;
        line-height:44px;
        width:120px;
        text-align: center;
        cursor: pointer;
      }
      .position-button-right-bottom-2{
        position:absolute;
        bottom:20px;
        right:170px;
        color:#fff;
        background-color:#013147;
        border:2px solid #1d94b2;
        border-radius:10px;
        font-size:18px;
        height:50px;
        line-height:44px;
        width:120px;
        text-align: center;
        cursor: pointer;
      }
    }
    .left {
      position: absolute;
      left: 52px;
      top: 66px;
      z-index: 50;

      .left_t {
        display: flex;
        justify-content: flex-start;
        .left_t_l {
          width: 18px;
          height: 166px;
          margin-top: 80px;
        }
        .left_t_l1 {
          width: 4px;
          height: 400px;
          background: #004C95;
          margin-left: 4px;
          margin-top:80px;
        }

        .left_t_c {
          margin-top: 82px;
          > li {
            width: 308px;
            height: 74px;
            background: url("~@/assets/image/index_icon6.png") no-repeat;
            background-size: 100% 100%;
            font-size: 34px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            line-height: 80px;
            color: #FFFFFF;
            padding-left: 120px;
            margin-bottom: 40px;
            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: 672px;
          height: 406px;
          margin-left: 36px;
          margin-top: 82px;
          /*校院通知*/
          .left_t_r {

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

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

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

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

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

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

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

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

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

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

            padding: 10px 16px 0;
            box-sizing: border-box;

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

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

              > i {
                display: inline-block;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 50px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              > i:nth-child(1) {
                width: 130px;
                margin-left: 22px;
              }
              > i:nth-child(2) {
                width: 120px;
              }
              > i:nth-child(3) {
                width: 140px;
              }
              > i:nth-child(4) {
                width: 140px;
              }
              > i:nth-child(5) {
                width: 80px;
              }
            }
            .left_t_r2_b {
              > li {
                height: 40px;
                width: 100%;
                display: flex;
                justify-content: flex-start;

                > i {
                  display: inline-block;
                  font-size: 16px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #FFFFFF;
                  line-height: 40px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                > i:nth-child(1) {
                  width: 130px;
                  margin-left: 22px;
                }
                > i:nth-child(2) {
                  width: 120px;
                }
                > i:nth-child(3) {
                  width: 140px;
                }
                > i:nth-child(4) {
                  width: 140px;
                }
                > i:nth-child(5) {
                  width: 80px;
                }
              }
              .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: 1027px;
        height: 452px;
        background: url("~@/assets/image/index_icon10.png") no-repeat;
        background-size: 100% 100%;
        margin-top: 20px;
        margin-left: 16px;
        overflow: hidden;
        .left_b_t {
          display: flex;
          justify-content: flex-start;

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

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

                }
              }
            }
          }

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

          width: 1028px;
          height: 458px;
          position: absolute;
          left: 0px;
          top: 512px;
          z-index: 200;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 34px;
          padding-top: 50px;
          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: 100px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 40px;
            > img {
              width: 40px;
              height: 40px;
              margin-left: 28px;
              margin-right: 12px;
            }
            > i {
              display: inline-block;
              font-size: 18px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 22px;
            }
            > i:nth-of-type(1) {
              font-size: 22px;
              width: 144px;
            }
            > i:nth-of-type(2) {
              width: 76px;
            }
            > i:nth-of-type(3) {
              width: 288px;
            }
            > i:nth-of-type(4) {
              width: 248px;
            }
            > i:nth-of-type(5) {
              width: 120px;
            }
          }
          .one_top {
            margin-top: 276px;
          }
        }
      }
    }
    .right {
      width: 748px;
      height: 880px;
      position: absolute;
      right: 62px;
      top: 148px;
      z-index: 50;
      background: url("~@/assets/image/index_icon11.png") no-repeat;
      background-size: 100% 100%;
      padding: 34px 30px 0 34px;
      box-sizing: border-box;
      .right_t {
        width: 684px;
        .right_t_b {
          width: 684px;
          height: 226px;
        }
      }
      .right_b {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .title-component-p{
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #1ED0F8;
          line-height: 18px;
          height:18px;
          margin-bottom:20px;
        }
        //滚动条
        .warning-max-big-box::-webkit-scrollbar{
          width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
          height: 0;
        }
        .warning-max-big-box::-webkit-scrollbar-thumb{
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
          background: rgba(255,255,255,0);
        }
        .warning-max-big-box::-webkit-scrollbar-track{
          -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
          border-radius: 0;
          background: rgba(255,255,255,0);
        }
        .warning-max-big-box {
          width:680px;
          padding: 5px 0 0;
          height: 500px;
          z-index: 200;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-items: center;
          overflow-y: scroll;
          .warning-for-box {
            -webkit-animation: ani 2s linear infinite;
            background: url("~@/assets/image/index_icon13.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-right:10px;
            margin-bottom: 10px;
            img {
              width: 40px;
              height: 40px;
              margin-left: 28px;
              margin-right: 12px;
            }
            .warning-name {
              display: inline-block;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 22px;
              font-size: 22px;
              width: 200px;
            }
            div {
              flex: 1;
              span {
                display: inline-block;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 22px;
                margin-right: 20px;
              }
            }
            .warning-button {
              display: inline-block;
              font-size: 18px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 22px;
              margin-right: 20px;
              cursor: pointer;
            }
          }
        }

      }
    }
  }

  /*滚动动画*/
  @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>