<template>
  <div class="alert">
    <div class="top">
      <Panel class="alert-mess" title="预警信息实时发布">
        <div class="zhu-box">
          <div class="hr"></div>
          <div class="zhu">
            <p>2021-06-22 15:23</p>
            <div class="hd-bg">
              <div class="mess-icon-txt">
                <i class="iconfont icon-bianxing-01"></i>
                <span>D</span>
              </div>
              <p>水平位移</p>
            </div>
            <div class="mess-main">
              <p>
                <span>D8</span>
              </p>
              <p>
                <span>D17</span>
              </p>
              <p>
                <span>D18</span>
              </p>
              <p>
                <span>D5</span>
              </p>
            </div>
          </div>
          <div class="zhu">
            <p>2022-06-22 15:23</p>
            <div class="hd-bg">
              <div class="mess-icon-txt">
                <i class="iconfont icon-bianxing-01"></i>
                <span>DC</span>
              </div>
              <p>垂直位移</p>
            </div>
            <div class="mess-main">
              <!-- <p></p> -->
            </div>
          </div>
          <div class="zhu">
            <p>2022-06-22 15:23</p>
            <div class="hd-bg">
              <div class="mess-icon-txt">
                <i class="iconfont icon-yingbian-copy"></i>
                <span>UP</span>
              </div>
              <p>坝体渗流</p>
            </div>
            <div class="mess-main">
              <!-- <p>
                <span></span>
              </p> -->
            </div>
          </div>
          <div class="zhu">
            <p>2022-06-22 15:23</p>
            <div class="hd-bg">
              <div class="mess-icon-txt">
                <i class="iconfont icon-shenliu-01"></i>

                <span>R/L</span>
              </div>
              <p>绕坝渗流</p>
            </div>
            <div class="mess-main">
              <!-- <p v-for="item2 in 1" :key="item2">
                <span>LD1</span>
                <span> </span>
              </p> -->
            </div>
          </div>
          <div class="zhu">
            <p>2022-06-22 15:23</p>
            <div class="hd-bg">
              <div class="mess-icon-txt">
                <i class="iconfont icon-yingbian"></i>
                <span>N/S</span>
              </div>
              <p>防渗墙应力应变</p>
            </div>
            <div class="mess-main">
              <!-- <p v-for="item2 in 1" :key="item2">
                <span>LD1</span>
                <span> </span>
              </p> -->
            </div>
          </div>
        </div>
      </Panel>
      <div class="right">
        <Panel class="alert-core" title="预警中心">
          <img src="@/assets/images/alert/bg.png" />
        </Panel>
        <Panel
          class="alert-chart"
          title="当年各项预警发布统计及处理完成比对"
          width="100%"
        >
          <div id="top-chart"></div>
        </Panel>
      </div>
    </div>
    <div class="bottom">
      <div class="alert-list">
        <div class="title">
          <button
            @click="buttonBtn(1)"
            :class="{ buttonActive: buttonIndex === 1 }"
          >
            待处理预警
          </button>
          <button
            @click="buttonBtn(2)"
            :class="{ buttonActive: buttonIndex === 2 }"
          >
            已处理预警
          </button>
        </div>
        <div class="content">
          <div class="table-title">
            <p>时间</p>
            <p>预警等级</p>
            <p>预警项目</p>
            <p>预警点位</p>
          </div>
          <div class="table" v-if="buttonIndex === 1">
            <!-- <div
              class="row"
              v-for="(item, index) in 2"
              :key="item"
              @click="rowBtn(index)"
              :class="{ rowActive: rowIndex === index }"
            >
              <p>2021-08-13</p>
              <p>一级预警</p>
              <p>表面变形</p>
              <p>LD4</p>
            </div> -->
          </div>
          <div class="table" v-if="buttonIndex === 2">
            <div
              class="row"
              v-for="(item, index) in alreardyList"
              :key="index"
              @click="rowBtn(item, index)"
              :class="{ rowActive: rowIndex === index }"
            >
              <p>{{ item.time }}</p>
              <p>{{ item.level }}</p>
              <p>{{ item.project }}</p>
              <p>{{ item.dian }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="alert-line">
        <div class="title">
          <button
            @click="buttonBtn2(1)"
            :class="{ buttonActive: buttonIndex2 === 1 }"
          >
            预警处理流程
          </button>
          <button
            @click="buttonBtn2(2)"
            :class="{ buttonActive: buttonIndex2 === 2 }"
          >
            流程图
          </button>
        </div>
        <img src="@/assets/images/alert/bg2.png" v-if="rowIndex < 0" />
        <div class="hr" v-if="rowIndex >= 0 && buttonIndex2 === 1">
          <div
            class="ok"
            :class="{
              first: proIndex === 1,
              second: proIndex === 2,
              third: proIndex === 3,
              fourth: proIndex === 4,
            }"
          ></div>
        </div>
        <div class="progress" v-if="rowIndex >= 0 && buttonIndex2 === 1">
          <div class="pro" v-for="(item, index) in 4" :key="index">
            <div class="pro-hd" :class="{ proHd2: item > proIndex }"></div>
            <div
              class="box"
              :class="{ box2: item > proIndex }"
              @click="progressBtn"
            >
              <i class="iconfont icon-xueyeyujing" v-if="item === 1"></i>
              <i class="iconfont icon-anquan" v-if="item === 2"></i>
              <i class="iconfont icon-yujing-copy" v-if="item === 3"></i>
              <i class="iconfont icon-jiechuguanlian" v-if="item === 4"></i>
              <p>
                {{
                  item === 1
                    ? "预警发布"
                    : item === 2
                    ? "预警核验"
                    : item === 3
                    ? "预警处置"
                    : "预警解除"
                }}
              </p>
            </div>
          </div>
        </div>
        <div class="process" v-if="rowIndex >= 0 && buttonIndex2 === 2">
          <div class="no-warn1" :class="{ dis_hidden: progressObj.warn }"></div>
          <div class="no-warn2" :class="{ dis_hidden: progressObj.warn }"></div>
          <div class="process-top">
            <div class="process1" @click="progressBtn"></div>
            <div class="process2" @click="progressBtn"></div>
            <div class="process3" @click="progressBtn"></div>
          </div>
          <div class="process-bottom">
            <div class="process7" @click="progressBtn"></div>
            <div class="process6" @click="progressBtn"></div>
            <div class="process5" @click="progressBtn"></div>
            <div class="process4" @click="progressBtn"></div>
          </div>
          <div class="jian1" :class="{ dis_hidden: !progressObj.warn }"></div>
          <div class="jian2" :class="{ dis_hidden: progressObj.warn }"></div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="conShow"
      :before-close="conClose"
      class="flagDialog2"
      :append-to-body="false"
      :modal-append-to-body="false"
      v-if="conShow"
    >
      <template #title>
        <div class="title">
          <div class="icon1"></div>
          <span>隐患处置进度</span>
          <div class="icon2"></div>
        </div>
      </template>
      <p class="p">Ⅱ级-黄色预警</p>
      <div class="content">
        <div class="img">
          <div class="process p2">
            <div
              class="no-warn1"
              :class="{ dis_hidden: progressObj.warn }"
            ></div>
            <div
              class="no-warn2"
              :class="{ dis_hidden: progressObj.warn }"
            ></div>
            <div class="process-top">
              <div class="process1" @click="progressBtn"></div>
              <div class="process2" @click="progressBtn"></div>
              <div class="process3" @click="progressBtn"></div>
            </div>
            <div class="process-bottom">
              <div class="process7" @click="progressBtn"></div>
              <div class="process6" @click="progressBtn"></div>
              <div class="process5" @click="progressBtn"></div>
              <div class="process4" @click="progressBtn"></div>
            </div>
            <div class="jian1" :class="{ dis_hidden: !progressObj.warn }"></div>
            <div class="jian2" :class="{ dis_hidden: progressObj.warn }"></div>
          </div>
        </div>
        <!-- 1 -->
        <div class="dialog-mess-list" v-if="rowIndex === 0">
          <!-- 预警发布 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警发布</h4>
                <div class="time">2022-09-18<span>14:47</span></div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">
                  大坝水平位移监测点D16为4.5cm，超过临界值3cm。
                </div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警核验 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警核验</h4>
                <div class="time">2022-09-18<span>15:45</span></div>
              </div>
              <div class="myp">
                <span>核验点位：</span>
                <div class="txt">D8</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">已核验，为当日台湾地震影响，大坝无异常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警处置 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警处置</h4>
                <div class="time">2022-09-18<span>15:50</span></div>
              </div>
              <div class="myp">
                <span>处置点位：</span>
                <div class="txt">D8</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>处置情况：</span>
                <div class="txt">已处置，正常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警解除 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警解除</h4>
                <div class="time">2022-09-18<span>15:55</span></div>
              </div>
              <div class="myp">
                <span>解除描述：</span>
                <div class="txt">二级预警解除。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
        </div>
        <!-- 2 -->
        <div class="dialog-mess-list" v-else-if="rowIndex === 1">
          <!-- 预警发布 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警发布</h4>
                <div class="time">2022-09-18<span>14:47</span></div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">
                  大坝水平位移监测点D17为5.3cm，超过临界值3.2cm。
                </div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警核验 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警核验</h4>
                <div class="time">2022-09-18<span>16:15</span></div>
              </div>
              <div class="myp">
                <span>核验点位：</span>
                <div class="txt">D17</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">已核验，为当日台湾地震影响，大坝无异常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警处置 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警处置</h4>
                <div class="time">2022-09-18<span>16:20</span></div>
              </div>
              <div class="myp">
                <span>处置点位：</span>
                <div class="txt">D17</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>处置情况：</span>
                <div class="txt">已处置，正常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警解除 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警解除</h4>
                <div class="time">2022-09-18<span>16:25</span></div>
              </div>
              <div class="myp">
                <span>解除描述：</span>
                <div class="txt">二级预警解除。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
        </div>
        <!-- 3 -->
        <div class="dialog-mess-list" v-else-if="rowIndex === 2">
          <!-- 预警发布 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警发布</h4>
                <div class="time">2022-09-18<span>14:47</span></div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">
                  大坝水平位移监测点D16为4.0cm,超过临界值2.8cm。
                </div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警核验 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警核验</h4>
                <div class="time">2022-09-18<span>16:40</span></div>
              </div>
              <div class="myp">
                <span>核验点位：</span>
                <div class="txt">D18</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">已核验，为当日台湾地震影响，大坝无异常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警处置 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警处置</h4>
                <div class="time">2022-09-18<span>16:45</span></div>
              </div>
              <div class="myp">
                <span>处置点位：</span>
                <div class="txt">D18</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>处置情况：</span>
                <div class="txt">已处置，正常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警解除 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警解除</h4>
                <div class="time">2022-09-18<span>16:50</span></div>
              </div>
              <div class="myp">
                <span>解除描述：</span>
                <div class="txt">二级预警解除。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
        </div>
        <!-- 4 -->
        <div class="dialog-mess-list" v-else>
          <!-- 预警发布 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警发布</h4>
                <div class="time">2021-06-22<span>15:23</span></div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">
                  大坝水平位移监测点SJ1为5cm，超临界值大坝水平位移监测点SJ1为
                  5cm，超临界值大坝水平位移监测点SJ1为5cm。
                </div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警核验 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警核验</h4>
                <div class="time">2021-06-22<span>16:33</span></div>
              </div>
              <div class="myp">
                <span>核验点位：</span>
                <div class="txt">D5</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>预警内容：</span>
                <div class="txt">已核验，无明显异常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警处置 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警处置</h4>
                <div class="time">2021-06-22<span>16:40</span></div>
              </div>
              <div class="myp">
                <span>处置点位：</span>
                <div class="txt">D5</div>
              </div>
              <div class="myp">
                <span>推送对象：</span>
                <div class="txt">
                  水库负责人（张晟阳）、安全责任人（张永泰）、安全巡查员（陈方军）
                </div>
              </div>
              <div class="myp">
                <span>处置情况：</span>
                <div class="txt">经过修复，已恢复正常。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
          <!-- 预警解除 -->
          <div class="dialog-mess">
            <div class="left">
              <div class="title">
                <h4>预警解除</h4>
                <div class="time">2021-06-22<span>16:50</span></div>
              </div>
              <div class="myp">
                <span>解除描述：</span>
                <div class="txt">二级预警解除。</div>
              </div>
            </div>
            <div class="img-box"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  mounted () {
    this.initTopChart()
    window.addEventListener('resize', this.initTopChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initTopChart)
  },
  data () {
    return {
      // 外面的流程图
      progressObj: {
        warn: true
      },
      // 弹窗
      conShow: false,
      rowIndex: -1,
      buttonIndex: 1,
      buttonIndex2: 1,
      proIndex: 4,
      alreardyList: [
        {
          time: '2022-09-18',
          level: '二级预警',
          project: '水平位移',
          dian: 'D8'
        },
        {
          time: '2022-09-18',
          level: '二级预警',
          project: '水平位移',
          dian: 'D17'
        },
        {
          time: '2022-09-18',
          level: '二级预警',
          project: '水平位移',
          dian: 'D18'
        },
        {
          time: '2021-06-22',
          level: '二级预警',
          project: '水平位移',
          dian: 'D5'
        }
      ]
    }
  },
  methods: {
    conClose () {
      this.conShow = false
    },
    // 左侧列表按钮
    rowBtn (item, index) {
      this.buttonIndex2 = 1
      this.rowIndex = index
      console.log(item)
      if (index === 0) {
        this.progressObj.warn = false
      } else if (index === 1) {
        this.progressObj.warn = false
      } else if (index === 2) {
        this.progressObj.warn = false
      } else if (index === 3) {
        this.progressObj.warn = true
      }
    },
    // 右侧处理流程按钮
    progressBtn () {
      this.conShow = true
    },
    // 左侧俩按钮
    buttonBtn (num) {
      if (this.buttonIndex === num) return
      this.buttonIndex = num
      this.rowIndex = -1
    },
    // 右侧俩按钮
    buttonBtn2 (num) {
      if (this.buttonIndex2 === num) return
      this.buttonIndex2 = num
    },
    initTopChart () {
      const myChart = this.echarts.init(document.getElementById('top-chart'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 0,
          top: 18,
          bottom: 10,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#4EE7FE'
            }, {
              offset: 1, color: '#63FFE3'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#74ACFF'
            }, {
              offset: 1, color: '#F1CBFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['表面水平位移', '表面垂直位移', '绕坝渗流', '坝体渗流', '防渗墙应力应变'],
          axisLabel: {
            show: true,
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 14,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.4)'
            } // 样式
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          max: 4,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.4)'
            }
          },
          axisLabel: {
            show: true,
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 14
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#0C3061', {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 158, 226, 0.15)'
                }, {
                  offset: 1, color: 'rgba(0, 158, 226, 0)'
                }],
                global: false
              }]
            }
          }
        },
        series: [
          {
            name: '发布数量',
            barWidth: 15,
            data: [3, 0, 0, 0, 0],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            }
          },
          {
            name: '处理数量',
            barWidth: 15,
            data: [3, 0, 0, 0, 0],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.process {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 100%;
  flex: 1;
  padding: 0 58px 0 14px;
  .no-warn1 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 260px;
    height: 100%;
    background-color: #0c3061;
  }
  .no-warn2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 604px;
    height: 110px;
    background-color: #0c3061;
  }
  .process-top {
    display: flex;
    justify-content: space-between;
    height: 111px;
    margin-bottom: 42px;
    .process1 {
      width: 321px;
      height: 100%;
      background: url("~@/assets/images/alert/process/first/1.png") no-repeat
        left bottom / 100% 100%;
      cursor: pointer;
    }
    .process2 {
      width: 322px;
      height: 100%;
      background: url("~@/assets/images/alert/process/first/2.1.png") no-repeat
        left bottom / 101% 102%;
      cursor: pointer;
    }
    .process3 {
      width: 335px;
      height: 100%;
      background: url("~@/assets/images/alert/process/first/3.1.png") no-repeat
        left bottom / 104% 102%;
      cursor: pointer;
    }
  }
  .process-bottom {
    display: flex;
    justify-content: space-between;
    height: 63px;
    .process4 {
      width: 374px;
      height: 100%;
      background: url("~@/assets/images/alert/process/first/5.1.png") no-repeat
        right bottom / 101% 103%;
      cursor: pointer;
    }
    .process5 {
      width: 320px;
      height: 100%;
      margin-right: 10px;
      background: url("~@/assets/images/alert/process/first/6.1.png") no-repeat
        right bottom / 100% 103%;
      cursor: pointer;
    }
    .process6 {
      width: 162px;
      height: 100%;
      margin-right: 10px;
      background: url("~@/assets/images/alert/process/first/7.1.png") no-repeat
        right bottom / 101% 103%;
      cursor: pointer;
    }
    .process7 {
      width: 125px;
      height: 100%;
      margin-right: 10px;
      background: url("~@/assets/images/alert/process/first/8.1.png") no-repeat
        right bottom / 100% 103%;
      cursor: pointer;
    }
  }
  .jian1 {
    position: absolute;
    right: 14px;
    top: 120px;
    width: 33px;
    height: 115px;
    background: url("~@/assets/images/alert/process/first/4.1.png") no-repeat
      left top / 100% 100%;
  }
  .jian2 {
    position: absolute;
    top: 160px;
    left: 415px;
    width: 334px;
    height: 40px;
    background: url("~@/assets/images/alert/process/first/9.1.png") no-repeat
      left top / 100% 100%;
  }
}
.process.p2 {
  width: 100%;
  height: 100%;
  .no-warn1 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 260px;
    height: 100%;
    background-color: #0c3061;
  }
  .no-warn2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 604px;
    height: 90px;
    background-color: #0c3061;
  }
  .jian1 {
    position: absolute;
    right: 14px;
    top: 100px;
    width: 33px;
    height: 115px;
    background: url("~@/assets/images/alert/process/first/4.1.png") no-repeat
      left top / 100% 100%;
  }
  .jian2 {
    position: absolute;
    top: 140px;
    left: 415px;
    width: 334px;
    height: 40px;
    background: url("~@/assets/images/alert/process/first/9.1.png") no-repeat
      left top / 100% 100%;
  }
}
.alert {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .top {
    display: flex;
    margin-bottom: 10px;
    .alert-mess {
      display: flex;
      margin-right: 10px;
      width: 1020px !important;
      height: 590px !important;
      .zhu-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        .hr {
          position: absolute;
          top: 64px;
          width: 940px;
          height: 3px;
          background-image: linear-gradient(
            90deg,
            rgba(58, 213, 200, 0.4),
            rgba(58, 213, 200, 0.16)
          );
        }
        .zhu {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 160px;
          margin-right: 35px;
          p {
            color: transparent;
            font-size: 16px;
            margin-bottom: 35px;
          }
          .hd-bg {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 107px;
            padding-top: 17px;
            background: url("~@/assets/images/alert/green.png") no-repeat top
              center / 103% 100%;
            .bgRed {
              background: url("~@/assets/images/alert/red.png") no-repeat top
                center / 103% 100% !important;
            }
            .bgYellow {
              background: url("~@/assets/images/alert/yellow.png") no-repeat top
                center / 103% 100% !important;
            }
            .mess-icon-txt {
              display: flex;
              align-items: center;
              height: 40px;
              i {
                color: rgba(255, 255, 255, 0.6);
                font-size: 40px;
              }
              span {
                color: rgba(255, 255, 255, 0.6);
                font-size: 32px;
                font-weight: 700;
                margin-left: 15px;
              }
            }
            p {
              color: #fff;
              font-size: 16px;
              margin-top: 25px;
              font-weight: 700;
            }
          }
          .mess-main {
            width: 100%;
            height: 325px;
            background-image: linear-gradient(
              90deg,
              rgba(74, 234, 101, 0.15),
              rgba(74, 234, 101, 0.06)
            );
            overflow: auto;
            &::-webkit-scrollbar {
              // 滚动条整体样式
              width: 6px; // 竖向滚动条宽度
              height: 0; // 横向滚动条高度
            }
            &::-webkit-scrollbar-thumb {
              // 滚动条内滑块样式
              background-color: #6d9dbc;
              border-radius: 3px;
            }
            &::-webkit-scrollbar-track {
              // 滚动条轨道样式
              background-color: #2a5c8a;
            }
            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 34px;
              margin: 1px 0;
              padding: 0 28px;
              border-bottom: 1px solid #0c3061;
              span {
                color: rgba(255, 255, 255, 0.8);
                font-size: 14px;
              }
            }
          }
        }
        // .zhu:nth-child(2) p {
        //   color: #fff !important;
        // }
        .zhu:last-child {
          margin-right: 0;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      height: 590px;
      .alert-core {
        height: 100% !important;
        height: 290px !important;
        margin-bottom: 10px;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 650px;
          height: 250px;
        }
      }
      .alert-chart {
        flex: 1;
        #top-chart {
          width: 630px;
          height: 250px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    flex: 1;
    .alert-list {
      display: flex;
      flex-direction: column;
      width: 586px;
      height: 100%;
      margin-right: 10px;
      .title {
        height: 40px;
        background-color: #12407f;
        button {
          width: 180px;
          height: 100%;
          text-align: center;
          line-height: 40px;
          background-color: transparent;
          color: #fff;
          font-size: 18px;
        }
        .buttonActive {
          background: #005fa9;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 10px;
        background-color: #0c3061;
        .table-title {
          display: flex;
          align-items: center;
          height: 40px;
          background-color: rgba(96, 255, 246, 0.2);
          p {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            color: #fff;
            font-size: 16px;
          }
        }
        .table {
          height: 246px;
          background-color: rgba(96, 255, 246, 0.05);
          overflow: auto;
          &::-webkit-scrollbar {
            // 滚动条整体样式
            width: 6px; // 竖向滚动条宽度
            height: 0; // 横向滚动条高度
          }
          &::-webkit-scrollbar-thumb {
            // 滚动条内滑块样式
            background-color: rgba(109, 157, 188, 1);
            border-radius: 3px;
          }
          &::-webkit-scrollbar-track {
            // 滚动条轨道样式
            background-color: rgba(42, 92, 138, 1);
          }
          .row {
            display: flex;
            align-items: center;
            height: 50px;
            margin: 1px;
            background-color: rgba(96, 255, 246, 0.05);
            cursor: pointer;
            &:hover {
              background-color: rgba(96, 255, 246, 0.35);
            }
            &.rowActive {
              background-color: rgba(96, 255, 246, 0.35) !important;
            }
            p {
              display: flex;
              justify-content: center;
              align-items: center;
              flex: 1;
              color: #fff;
              font-size: 16px;
            }
          }
        }
      }
    }
    .alert-line {
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1;
      background-color: #0c3061;
      .title {
        height: 40px;
        background-color: #12407f;
        button {
          width: 180px;
          height: 100%;
          text-align: center;
          line-height: 40px;
          background-color: transparent;
          color: #fff;
          font-size: 18px;
        }
        .buttonActive {
          background: #005fa9;
        }
      }
      .hr {
        position: absolute;
        top: 94px;
        left: 50%;
        transform: translateX(-50%);
        width: 1022px;
        height: 4px;
        background-color: rgba(236, 183, 99, 0.5);
        .ok {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 255, 255, 0.7);
        }
        .first {
          width: 100px !important;
        }
        .second {
          width: 374px !important;
        }
        .third {
          width: 647px;
        }
      }
      .progress {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 1022px;
        margin: 0 auto;
        flex: 1;
        padding-top: 42px;
        .pro {
          width: 200px;
          height: 100%;
          background: transparent;
          display: flex;
          flex-direction: column;
          align-items: center;
          .pro-hd {
            width: 142px;
            height: 74px;
            background: url("~@/assets/images/alert/top1.png") no-repeat center /
              100% 100%;
          }
          .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 144px;
            background: url("~@/assets/images/alert/box1.png") no-repeat center /
              100% 100%;
            cursor: pointer;
            &:hover {
              background: url("~@/assets/images/alert/box1_active.png")
                no-repeat center / 100% 100%;
            }
            i {
              font-size: 63px;
              color: rgba(255, 255, 255, 0.8);
            }
            p {
              margin-top: 22px;
              color: #fff;
              font-size: 16px;
              font-weight: 700;
            }
          }
          .box2 {
            background: url("~@/assets/images/alert/box2.png") no-repeat center /
              100% 100% !important;
          }
          .proHd2 {
            background: url("~@/assets/images/alert/top2.png") no-repeat center /
              100% 100%;
          }

          .box2.box {
            &:hover {
              background: url("~@/assets/images/alert/box2_active.png")
                no-repeat center / 100% 100% !important;
            }
          }
        }
      }
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 26px;
        width: 380px;
        height: 248px;
      }
    }
  }
}
.flagDialog2 ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    width: 1124px !important;
    height: 900px;
    margin-top: 90px !important;
    margin-bottom: 0 !important;
    .el-dialog__header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 0;
      background-color: #12407f;
      .title {
        display: flex;
        align-items: center;
        .icon1 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_left.png") center /
            100% 100%;
        }
        .icon2 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_right.png") center /
            100% 100%;
        }
        span {
          color: #fff;
          font-size: 20px;
          margin: 0 20px;
        }
      }
      .el-dialog__headerbtn {
        .el-dialog__close {
          &::before {
            color: #fff;
          }
        }
      }
    }
    .el-dialog__body {
      flex: 1;
      background-color: #0c3061;
      padding: 0 20px 25px;
      overflow: hidden;
      .p {
        width: 100%;
        height: 56px;
        line-height: 56px;
        // color: #ff4d4d;
        color: orange;
        text-align: center;
        font-size: 16px;
        // background-color: rgba(96, 255, 246, 0.05);
      }
      .content {
        width: 100%;
        height: 770px;
        background-color: transparent;
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 10px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #5b9ebf;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #2a5c8a;
        }
        .img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 264px;
          background-color: #0c3061;
          margin-bottom: 10px;
          .process {
            margin: 0;
            .process1,
            .process2,
            .process3,
            .process4,
            .process5,
            .process6,
            .process7 {
              cursor: default;
            }
          }
        }
        .dialog-mess {
          display: flex;
          align-items: center;
          position: relative;
          width: 100%;
          padding: 20px 30px;
          background-color: rgba(96, 255, 246, 0.05);
          margin-bottom: 10px;
          .left {
            width: 540px;
            margin-right: 50px;
            .title {
              display: flex;
              height: 16px;
              color: #60fff6;
              border-left: 2px solid #60fff6;
              padding-left: 12px;
              white-space: nowrap;
              margin-bottom: 30px;
              h4 {
                font-size: 16px;
                margin-right: 20px;
              }
              .time {
                margin-top: 2px;
                font-size: 14px;
                span {
                  margin-left: 10px;
                }
              }
            }
            .myp {
              display: flex;
              color: #e0e4e9;
              margin-bottom: 30px;
              font-size: 14px;
              span {
                height: 100%;
              }
              .txt {
                flex: 1;
              }
            }
            .myp:last-child {
              margin-bottom: 0;
            }
          }
          .img-box {
            height: 114px;
            img {
              width: 114px;
              height: 114px;
              margin-right: 6px;
            }
            img:last-child {
              margin-right: 0;
            }
          }
        }
        .dialog-mess:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
