<template>
  <div class="analysis">
    <div class="left">
      <Panel class="statistics" title="预警统计" width="100%">
        <div class="flag-box">
          <div class="box" v-for="item in 3" :key="item" @click="flagBtn(item)">
            <div
              :class="{
                icon1: item === 1,
                icon2: item === 2,
                icon3: item === 3,
              }"
            ></div>
            <p :class="{ p1: item === 1, p2: item === 2, p3: item === 3 }">
              {{ item === 1 ? "红色预警" : item === 2 ? "黄色预警" : "正常" }}
            </p>
            <animate-number
              class="animate-number"
              from="0"
              :to="item === 1 ? 1 : item === 2 ? 0 : 23"
              duration="1000"
              easing="easeOutQuad"
              :formatter="(num) => num.toFixed(0)"
            />
          </div>
        </div>
        <div class="message-box">
          <div
            class="message"
            :class="{ messageActive: messageIndex === index }"
            v-for="(item, index) in messageList"
            :key="index"
            @click="messageBtn(index)"
          >
            <div class="message-title">
              <div class="icon-txt">
                <div class="icon"></div>
                <span>{{ item.title }}</span>
              </div>
              <button @click="conBtn(item.title)">结论</button>
            </div>
            <div class="four-box">
              <div class="mechart-box">
                <div
                  :id="'messageChart' + (index + 1)"
                  class="message-chart"
                ></div>
                <span>21</span>
              </div>
              <div class="txt-box">
                <div class="txt1">
                  <span>7</span>
                  <p>红色预警</p>
                </div>
                <div class="txt2">
                  <span>7</span>
                  <p>黄色预警</p>
                </div>
                <div class="txt3">
                  <span>7</span>
                  <p>正&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Panel>
      <Panel class="conclusion" title="研判结论" width="100%">
        <p>
          大坝安全监测性态整体正常，暂未发现重大隐患问题；大坝测点 LD09
          附近可能发生滑坡，建议开展下游坡面滑坡隐患问题专项巡查。
        </p>
      </Panel>
    </div>
    <div class="center">
      <img src="@/assets/images/analysis/bg.png" />
      <div class="btn-box">
        <div
          class="btn"
          v-for="item in 2"
          :key="item"
          :class="{
            btn1Active: centerBtnIndex === 1 && item === 1,
            btn2Active: centerBtnIndex === 2 && item === 2,
          }"
          @click="centerBtn(item)"
        >
          <div :class="{ icon1: item === 1, icon2: item === 2 }"></div>
          <p>{{ item === 1 ? "三维场景" : "二维场景" }}</p>
        </div>
      </div>
    </div>
    <div class="right">
      <Panel class="details" title="监测明细" height="100%">
        <template #title>
          <el-select
            class="details-select"
            v-model="value"
            placeholder="全部"
            size="small"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div
          class="detail-box"
          @click="detailBtn(item)"
          @mouseenter="detailEnter(item, index)"
          @mouseleave="detailLeave"
          v-for="(item, index) in detailList"
          :key="index"
          :class="{
            bgRed: item.status === 'red',
            bgYellow: item.status === 'yellow',
            bgGreen: item.status === 'green',
            bgRedActive: detailFlag === 'red' && index === detaiIndex,
            bgYellowActive: detailFlag === 'yellow' && index === detaiIndex,
            bgGreenActive: detailFlag === 'green' && index === detaiIndex,
          }"
        >
          <div class="detail-top">
            <div class="icon-txt">
              <div
                class="icon"
                :class="{
                  iconRed: item.status === 'red',
                  iconYellow: item.status === 'yellow',
                  iconGreen: item.status === 'green',
                }"
              ></div>
              <p>{{ item.time }}</p>
            </div>
            <span
              :class="{
                fzRed: item.status === 'red',
                fzYellow: item.status === 'yellow',
                fzGreen: item.status === 'green',
              }"
            >
              {{
                item.status === "red"
                  ? "红色预警"
                  : item.status === "yellow"
                  ? "黄色预警"
                  : "正&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常"
              }}
            </span>
          </div>
          <div class="detail-bottom">
            <span class="span1">{{ item.name }}</span>
            <span class="span2">【PR12】</span>
            <span class="span3">14.12cm</span>
          </div>
          <div
            class="line"
            :class="{
              lineRed: item.status === 'red',
              lineYellow: item.status === 'yellow',
              lineGreen: item.status === 'green',
            }"
          ></div>
        </div>
      </Panel>
    </div>
    <!-- 弹层 -->
    <el-dialog
      :visible.sync="flagShow"
      :before-close="handleClose"
      class="flagDialog1"
      :append-to-body="false"
      :modal-append-to-body="false"
    >
      <template #title>
        <div class="title">
          <div class="icon1"></div>
          <span>{{ dialogTitle }}</span>
          <div class="icon2"></div>
        </div>
      </template>
      <div class="content">
        <div class="table">
          <el-table
            height="100%"
            :data="tableData"
            style="width: 100%"
            :header-row-style="{
              background: 'rgba(96, 255, 246, 0.2)',
              color: '#7DFBFD',
            }"
            :header-cell-style="{
              background: 'transparent',
              border: 0,
            }"
            :row-style="{ color: '#fff', background: 'transparent' }"
            :cell-style="{
              background: 'transparent',
              borderBottom: '1px solid #0c3061',
            }"
            :class="{
              tableRed: flagIndex === 1,
              tableYellow: flagIndex === 2,
              tableGreen: flagIndex === 3,
            }"
          >
            <el-table-column
              prop="time"
              label="预警时间"
              width="366"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="level"
              label="预警级别"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="place"
              label="监测点位"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="监测值"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="project"
              label="预警项目"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <Elpagination />
      </div>
    </el-dialog>
    <!-- 结论弹层 -->
    <el-dialog
      :visible.sync="conShow"
      :before-close="conClose"
      class="flagDialog2"
      :append-to-body="false"
      :modal-append-to-body="false"
    >
      <template #title>
        <div class="title">
          <div class="icon1"></div>
          <span>{{ dialogTitle }}</span>
          <div class="icon2"></div>
        </div>
      </template>
      <div class="content">
        <p>
          1、所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm
        </p>
        <p>2、所有测点深层水平位移均未超出其历史极值；</p>
        <p>3、所有测点深层水平位移符合变形规律；</p>
        <p>
          1、所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm
        </p>
        <p>2、所有测点深层水平位移均未超出其历史极值；</p>
        <p>3、所有测点深层水平位移符合变形规律；</p>
        <p>
          1、所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm所有测点深层水平位移在设计和理论范围内，最大位移为13.06mm
        </p>
        <p>2、所有测点深层水平位移均未超出其历史极值；</p>
        <p>3、所有测点深层水平位移符合变形规律；</p>
      </div>
    </el-dialog>
    <!-- 监测点弹层 -->
    <el-dialog
      :visible.sync="detailShow"
      :before-close="detailClose"
      class="flagDialog3"
      :append-to-body="false"
      :modal-append-to-body="false"
    >
      <template #title>
        <div class="title">
          <div class="icon1"></div>
          <span>{{ dialogTitle }}</span>
          <div class="icon2"></div>
        </div>
      </template>
      <div
        class="content"
        :class="{ bt: activeName === 'third' || activeName === 'fourth' }"
      >
        <el-tabs
          class="detailTabs"
          :stretch="true"
          v-model="activeName"
          @tab-click="tabClick"
        >
          <el-tab-pane label="研判结论" name="first">
            <div class="head"></div>
            <div class="p-box">
              <p>
                坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,
              </p>
              <p>均在规范要求内的正常范围内波动。</p>
              <p>
                坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,
              </p>
              <p>均在规范要求内的正常范围内波动。</p>
              <p>
                坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,
              </p>
              <p>均在规范要求内的正常范围内波动。</p>
              <p>
                坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,
              </p>
              <p>均在规范要求内的正常范围内波动。</p>
              <p>
                坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,坝体测点ZD1横向振速最大值为1cm/s,竖向振速最大值为2cm/s,
              </p>
              <p>均在规范要求内的正常范围内波动。</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="过程线" name="second">
            <div id="processChart"></div>
            <div class="time-box">
              <span>时间：</span>
              <el-date-picker
                :editable="false"
                @change="timeChange"
                size="small"
                class="detail-select-time"
                popper-class="detail-date"
                v-model="selectTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-tab-pane>
          <el-tab-pane label="基础信息" name="third">
            <div
              class="mess-box"
              v-for="(item, index) in messList"
              :key="index"
            >
              <div class="txt">{{ item.name }}</div>
              <span>{{ item.txt }}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="理论反演云图" name="fourth">
            <img src="@/assets/images/engineering/img1.png" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Analysis',
  mounted () {
    for (let i = 1; i <= 20; i++) {
      this.tableData.push({
        time: '2021-09-23 09:23',
        level: '黄色预警',
        place: 'LD-1',
        count: '22.00mm',
        project: '表面变形'
      })
    }
    this.initChart()
    window.addEventListener('resize', this.initChart)
    window.addEventListener('resize', this.initProcessChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
    window.removeEventListener('resize', this.initProcessChart)
  },
  data () {
    return {
      // 日期选择
      selectTime: [],
      // 监测点弹窗基本信息数据列表
      messList: [
        {
          name: '设备名称',
          txt: 'LD9'
        }, {
          name: '纵向桩号(m)',
          txt: '0+656.75'
        }, {
          name: '轴距(m)',
          txt: '坝下0+000.15'
        }, {
          name: '高程(m)',
          txt: '33.4'
        }, {
          name: '设备类型',
          txt: 'F-1A型强制归心盘，SZX型不锈钢水准标心'
        }, {
          name: '埋设时间',
          txt: '2012-05-17'
        }, {
          name: '设备厂家',
          txt: '南京水利科学研究院'
        }, {
          name: '传感器类型',
          txt: 'ABISA'
        }
      ],
      // 监测点elment标签页
      activeName: 'first',
      // 监测点弹层
      detailShow: false,
      // 结论弹窗
      conShow: false,
      // 弹窗标题
      dialogTitle: '',
      // 预警同级标识按钮
      flagIndex: 1,
      // 预警统计信息按钮Index
      messageIndex: 0,
      // 预警统计信息列表
      messageList: [
        {
          title: '表面水平位移',
          red: 7,
          yellow: 7,
          normal: 7
        },
        {
          title: '表面垂直位移',
          red: 7,
          yellow: 7,
          normal: 7
        },
        {
          title: '绕坝渗流',
          red: 7,
          yellow: 7,
          normal: 7
        },
        {
          title: '坝体渗流',
          red: 7,
          yellow: 7,
          normal: 7
        },
        {
          title: '防渗墙应力应力',
          red: 7,
          yellow: 7,
          normal: 7
        },
        {
          title: '防渗墙应力应变',
          red: 7,
          yellow: 7,
          normal: 7
        }
      ],
      // 检测明细下拉菜单
      options: [{
        value: '全部',
        label: '全部'
      }, {
        value: '表面水平位移',
        label: '表面水平位移'
      }, {
        value: '表面垂直位移',
        label: '表面垂直位移'
      }, {
        value: '绕坝渗流',
        label: '绕坝渗流'
      }, {
        value: '坝体渗流',
        label: '坝体渗流'
      }, {
        value: '防渗墙应力应变',
        label: '防渗墙应力应变'
      }],
      value: '全部',
      // 监测明细数据列表
      detailList: [
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'red'
        },
        {
          name: '表面垂直位移',
          time: '2021-12-02  13:23:14',
          status: 'red'
        },
        {
          name: '绕坝渗流',
          time: '2021-12-02  13:23:14',
          status: 'yellow'
        },
        {
          name: '坝体渗流',
          time: '2021-12-02  13:23:14',
          status: 'yellow'
        },
        {
          name: '防渗墙应力应变',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        },
        {
          name: '表面水平位移',
          time: '2021-12-02  13:23:14',
          status: 'green'
        }
      ],
      // 鼠标进入 监测明细数据列表 变色
      detailFlag: null,
      detaiIndex: null,
      // 二维三维场景按钮标识
      centerBtnIndex: 1,
      // 预警统计弹层
      flagShow: false,
      // 预警弹层列表
      tableData: []
    }
  },
  methods: {
    timeChange () {
      console.log('时间改变事件触发')
    },
    tabClick (tab, event) {
      // console.log(tab, event)
      this.$nextTick(() => {
        this.initProcessChart()
      })
    },
    // 监测点
    detailBtn (item) {
      console.log(item)
      this.detailShow = true
      this.dialogTitle = 'ZDI监测点情况'
    },
    detailClose () {
      this.detailShow = false
      this.activeName = 'first'
    },
    // 结论
    conBtn (conTitle) {
      this.conShow = true
      this.dialogTitle = conTitle
    },
    conClose () {
      this.conShow = false
    },
    // 预警统计信息按钮
    messageBtn (i) {
      this.messageIndex = i
    },
    // 监测明细进入事件
    detailEnter (item, i) {
      this.detaiIndex = i
      if (item.status === 'red') {
        this.detailFlag = 'red'
      } else if (item.status === 'yellow') {
        this.detailFlag = 'yellow'
      } else if (item.status === 'green') {
        this.detailFlag = 'green'
      }
    },
    // 监测明细离开事件
    detailLeave () {
      this.detailFlag = null
      this.detaiIndex = null
    },
    // 二维三维按钮
    centerBtn (item) {
      this.centerBtnIndex = item
    },
    // 预警统计最上面三个按钮
    flagBtn (item) {
      this.flagIndex = item
      this.flagShow = true
      this.dialogTitle = '预警统计'
      if (item === 1) {

      } else if (item === 2) {

      } else if (item === 3) {

      }
    },
    // 预警统计弹层
    handleClose () {
      this.flagShow = false
    },
    initChart () {
      this.initMessageChart1()
      this.initMessageChart2()
      this.initMessageChart3()
      this.initMessageChart4()
      this.initMessageChart5()
      this.initMessageChart6()
    },
    // 表面水平位移
    initMessageChart1 () {
      const myChart = this.echarts.init(document.getElementById('messageChart1'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 表面垂直位移
    initMessageChart2 () {
      const myChart = this.echarts.init(document.getElementById('messageChart2'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 绕坝渗流
    initMessageChart3 () {
      const myChart = this.echarts.init(document.getElementById('messageChart3'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 坝体渗流
    initMessageChart4 () {
      const myChart = this.echarts.init(document.getElementById('messageChart4'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 防渗墙应力
    initMessageChart5 () {
      const myChart = this.echarts.init(document.getElementById('messageChart5'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 防渗墙应变
    initMessageChart6 () {
      const myChart = this.echarts.init(document.getElementById('messageChart6'))
      const option = {
        color: ['#FF6969', '#FFC05D', '#9CF6BA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initProcessChart () {
      const myChart = this.echarts.init(document.getElementById('processChart'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['UP2-1'],
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          itemStyle: {
            borderWidth: 0
          },
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: ['#FF8E07'],
        grid: {
          left: '90px',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.8)'
            } // 线的样式
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#fff'
            } // 样式
          },
          axisLabel: {
            show: true,
            fontSize: 14,
            margin: 15
          }
        },
        yAxis: {
          type: 'value',
          name: '单位（mm）',
          nameGap: 25, // 坐标轴名称与轴线之间的距离,
          nameTextStyle: {
            fontSize: 14
          }, // 样式

          axisLabel: {
            show: true,
            fontSize: 14,
            margin: 23
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255, 0.3)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#fff'
            } // 样式
          }
        },
        series: [
          {
            name: 'UP2-1',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            symbol: 'circle',
            symbolSize: 9,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#fff', // 图形的描边颜色
              borderWidth: 2, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowColor: 'red' // 阴影颜色
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.fzRed {
  color: #ff839d;
}
.iconRed {
  background-color: #ff839d;
}
.lineRed {
  background: rgba(255, 131, 157, 0.4);
}
.bgRed {
  background-color: rgba(255, 131, 157, 0.1);
}
.bgRedActive {
  background-color: rgba(255, 131, 157, 0.3) !important;
}
.fzYellow {
  color: #ffd369;
}
.iconYellow {
  background-color: #ffd369;
}
.lineYellow {
  background: rgba(255, 211, 105, 0.4);
}
.bgYellow {
  background-color: rgba(255, 211, 105, 0.1);
}
.bgYellowActive {
  background-color: rgba(255, 211, 105, 0.3) !important;
}
.fzGreen {
  color: #60fff6;
}
.iconGreen {
  background-color: #60fff6;
}
.lineGreen {
  background: rgba(125, 251, 244, 0.4);
}
.bgGreen {
  background-color: rgba(125, 251, 244, 0.1);
}
.bgGreenActive {
  background-color: rgba(125, 251, 244, 0.3) !important;
}

.analysis {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .left {
    display: flex;
    flex-direction: column;
    width: 354px;
    height: 100%;
    .statistics ::v-deep {
      height: 780px;
      overflow: hidden;
      .panel-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .flag-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          width: 108px;
          height: 125px;
          background: url("~@/assets/images/engineering/flag_bg.png") no-repeat
            center / 100% 100%;
          cursor: pointer;
          &:hover {
            background: url("~@/assets/images/engineering/flag_active.png")
              no-repeat center / 100% 100%;
          }
          span {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 26px;
          }
          .icon1,
          .icon2,
          .icon3 {
            display: flex;
            justify-content: center;
            width: 62px;
            height: 74px;
            margin-top: 15px;
            opacity: 0.5;
          }
          .icon1 {
            background: url("~@/assets/images/engineering/icon_red.png")
              no-repeat center / 100% 100%;
          }
          .icon2 {
            background: url("~@/assets/images/engineering/icon_yellow.png")
              no-repeat center / 100% 100%;
          }
          .icon3 {
            background: url("~@/assets/images/engineering/icon_green.png")
              no-repeat center / 100% 100%;
          }
          p {
            margin-top: 9px;
            font-size: 14px;
          }
          .p1 {
            color: #ff6969;
          }
          .p2 {
            color: #ffc05d;
          }
          .p3 {
            color: #9cf6ba;
          }
        }
      }
      .message-box {
        width: 100%;
        flex: 1;
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 6px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #6d9dbc;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #10202d;
        }

        .message {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 117px;
          padding: 13px 11px 16px 20px;
          background: url("~@/assets/images/engineering/message_bg.png")
            no-repeat center / 100% 100%;
          cursor: pointer;
          &:hover {
            background: url("~@/assets/images/engineering/message_active.png")
              no-repeat center / 100% 100%;
          }

          .message-title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            .icon-txt {
              display: flex;
              align-items: center;
              .icon {
                width: 3px;
                height: 16px;
                margin-right: 8px;
                background-color: #60fff6;
              }
              span {
                color: #60fff6;
                font-size: 16px;
              }
            }
            button {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 51px;
              height: 21px;
              background-color: #006191;
              border: 1px solid #60fff6;
              border-radius: 3px;
              color: #fff;
              font-size: 14px;
            }
          }
          .four-box {
            display: flex;
            .mechart-box {
              position: relative;
              width: 60px;
              height: 60px;
              span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: rgba(255, 255, 255, 0.9);
                font-size: 18px;
              }
              .message-chart {
                width: 60px;
                height: 60px;
                margin-right: 10px;
              }
            }

            .txt-box {
              display: flex;
              .txt1,
              .txt2,
              .txt3 {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 78px;
                height: 60px;
                border-left: 1px solid rgba(96, 255, 246, 0.2);
                span {
                  margin-bottom: 18px;
                }
              }
              .txt1 {
                color: #ff6969;
                span {
                  font-size: 18px;
                }
                p {
                  font-size: 14px;
                }
              }
              .txt2 {
                color: #ffc05d;
                span {
                  font-size: 18px;
                }
                p {
                  font-size: 14px;
                }
              }
              .txt3 {
                color: rgba(255, 255, 255, 0.8);
                span {
                  font-size: 18px;
                }
                p {
                  font-size: 14px;
                }
              }
            }
          }
        }
        .messageActive {
          background: url("~@/assets/images/engineering/message_active.png")
            no-repeat center / 100% 100% !important;
        }
      }
    }
    .conclusion {
      flex: 1;
      p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 937px;
    height: 100%;
    background-color: #0c3061;
    .btn-box {
      display: flex;
      position: absolute;
      left: 22px;
      bottom: 18px;
      .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80px;
        height: 54px;
        background-color: rgba(96, 255, 246, 0.1);
        color: #60fff6;
        cursor: pointer;
        .icon1 {
          width: 29px;
          height: 22px;
          margin-bottom: 5px;
          margin-top: 4px;
          background: url("~@/assets/images/engineering/3.png") no-repeat top
            left / 100% 100%;
        }
        .icon2 {
          width: 24px;
          height: 23px;
          margin-bottom: 5px;
          margin-top: 4px;
          background: url("~@/assets/images/engineering/2.png") no-repeat top
            left / 100% 100%;
        }
        p {
          font-size: 16px;
        }
      }
      .btn1Active {
        background-color: rgba(96, 255, 246, 0.7) !important;
        color: #fff;
        .icon1 {
          background: url("~@/assets/images/engineering/3_active.png") no-repeat
            top left / 100% 100%;
        }
      }
      .btn2Active {
        background-color: rgba(96, 255, 246, 0.7) !important;
        color: #fff;
        .icon2 {
          background: url("~@/assets/images/engineering/2_active.png") no-repeat
            top left / 100% 100%;
        }
      }
      .btn:first-child {
        margin-right: 10px;
      }
    }
    img {
      width: 854px;
      height: 854px;
    }
  }
  .right {
    width: 372px;
    height: 100%;
    background-color: #0c3061;
    .details ::v-deep {
      .popper__arrow {
        left: 35px !important;
      }
      .el-popper[x-placement^="bottom"] .popper__arrow::after {
        top: 0;
      }
      .el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-color: transparent;
        border-bottom-color: #00679b;
      }
    }
    .details ::v-deep {
      input::placeholder {
        color: #fff;
      }
      .details-select {
        position: absolute;
        top: 4px;
        right: 10px;
        width: 115px;
        .el-input__inner {
          color: #fff;
          background: #00679b;
          border: 1px solid rgba(96, 255, 246, 0.5);
          padding-left: 10px;
          padding-right: 20px;
        }

        .el-icon-arrow-up:before {
          color: #fff;
        }
        .el-input__suffix {
          right: 0;
        }
        .el-select-dropdown {
          position: absolute;
          left: -25px !important;
          width: 140px;
          margin: 0;
          margin-top: 10px;
          padding: 10px 5px;
          background: #00679b;
          border: 0;
          span {
            color: #fff;
          }
          .selected {
            background-color: #39a0bb;
            border-radius: 2px;
          }
          .hover {
            background-color: #39a0bb;
            border-radius: 2px;
          }
          .el-scrollbar__view {
            padding: 0;
          }
          .el-select-dropdown__item {
            display: flex;
            align-items: center;
            padding: 0 0 0 10px;
            height: 26px;
            margin-bottom: 5px;
          }
          .el-select-dropdown__item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .detail-box {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 60px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      .line {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 1px;
        transform: translateY(-50%);
      }
      .detail-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 0 12px;
        .icon-txt {
          display: flex;
          align-items: center;
          .icon {
            width: 6px;
            height: 6px;
            margin-right: 10px;
            border-radius: 50%;
          }
        }
      }
      .detail-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 0 12px;
        .span2 {
          margin-left: 60px;
        }
      }
    }
    .detail-box:last-child {
      margin-bottom: 0;
    }
  }
}
// 预警统计弹层
.flagDialog1 ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    width: 1200px;
    height: 716px;
    .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: 20px;
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.table ::v-deep {
  width: 100%;
  height: 566px;
  &::-webkit-scrollbar {
    // 滚动条整体样式
    width: 10px; // 竖向滚动条宽度
    height: 0; // 横向滚动条高度
  }
  &::-webkit-scrollbar-thumb {
    // 滚动条内滑块样式
    background-color: #5b9ebf;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道样式
    background-color: #2a5c8a;
  }
  .el-table {
    width: 100%;
    background-color: rgba(96, 255, 246, 0.05);
    &::before {
      height: 0;
    }
    thead tr th.el-table__cell {
      background-color: transparent;
    }
  }
  .tableRed tbody tr td:nth-child(2) {
    color: #ff839d;
  }
  .tableYellow tbody tr td:nth-child(2) {
    color: #ffd369;
  }
  .tableGreen tbody tr td:nth-child(2) {
    color: #00ffff;
  }
}
// 结论弹层
.flagDialog2 ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    width: 716px;
    height: 484px;
    .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: 10px;
      overflow: hidden;
      .content {
        width: 100%;
        height: 100%;
        background-color: rgba(96, 255, 246, 0.05);
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 10px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #5b9ebf;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #2a5c8a;
        }
        p {
          width: 100%;
          padding: 20px;
          color: #fff;
          font-size: 18px;
          line-height: 30px;
          border-bottom: 1px solid #0c3061;
        }
      }
    }
  }
}
// 监测点
.flagDialog3 ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    width: 1200px;
    height: 726px;
    .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 20px 20px;
      .content {
        width: 100%;
        height: 100%;
        background-color: rgba(96, 255, 246, 0.05);
      }
      .bt {
        background-color: transparent;
      }
    }
  }
}
.detailTabs ::v-deep {
  .el-tabs__header {
    margin-bottom: 0;
    .el-tabs__nav-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 64px;
      &::after {
        height: 0;
      }
      background-color: #0c3061;
      .el-tabs__nav-scroll {
        .el-tabs__nav {
          width: 528px;
          .el-tabs__item {
            color: #fff;
            font-size: 16px;
          }
          .is-active {
            color: rgba(0, 255, 255, 0.7);
          }
          .el-tabs__active-bar {
            background-color: #00ffff;
            width: 20% !important;
          }
        }
      }
    }
  }
  .el-tabs__content {
    .el-tab-pane:nth-child(1) {
      .head {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70px;
        background-color: rgba(96, 255, 246, 0.1);
        color: rgba(0, 255, 255);
        font-size: 18px;
      }
      .p-box {
        height: 522px;
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 10px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #5b9ebf;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #2a5c8a;
        }
        p {
          width: 100%;
          padding: 25px 30px;
          color: #fff;
          font-size: 18px;
          line-height: 30px;
          border-bottom: 1px solid #0c3061;
        }
      }
    }
    .el-tab-pane:nth-child(2) {
      display: flex;
      justify-content: center;
      position: relative;
      #processChart {
        width: 100%;
        height: 476px;
        margin-top: 84px;
      }
      .time-box {
        display: flex;
        align-items: center;
        position: absolute;
        top: 23px;
        right: 14px;
        color: #fff;
        span {
          font-size: 14px;
          margin-right: 13px;
        }
      }
    }
    .el-tab-pane:nth-child(3) {
      position: relative;
      .mess-box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 70px;
        background: rgba(96, 255, 246, 0.05);
        border-bottom: 1px solid rgba(12, 48, 97);
        color: #fff;
        font-size: 18px;
        .txt {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 220px;
          height: 50px;
          margin-right: 30px;
          border-right: 1px solid rgba(125, 251, 244, 0.2);
          color: rgba(125, 251, 244);
        }
      }
    }
    .el-tab-pane:nth-child(4) {
      display: flex;
      align-items: center;
      position: relative;
      height: 592px;
      overflow: auto;
      img {
        width: 100%;
      }
    }
  }
}
.detail-select-time ::v-deep {
  width: 300px;
  background-color: rgba(18, 48, 71, 0.4);
  border: 1px solid rgba(125, 251, 252, 0.4);
  cursor: pointer !important;
  .el-range-input {
    &::placeholder {
      color: #ccc;
    }
    color: #fff;
    background-color: transparent;
  }
  .el-range-separator {
    color: #fff;
  }
}
</style>
