<template>
  <div class="ping_bj">
    <ul class="ping_top">
      <li class="ping_top_left">
        <p>{{ currentTime }}</p>
        <img src="../../../assets/daping/header_left.png">
      </li>
      <li>
        <div class="ping_top_zhong">
          <img src="../../../assets/logo/logo.png">
        </div>
        <img src="../../../assets/daping/header_center.png">
      </li>
      <li>
        <img src="../../../assets/daping/header_right.png">
      </li>
    </ul>
    <div class="ping_zhong">
      <div class="ping_zhong_left">
        <ul class="left_ul">
          <li class="left_li">
            <span class="ping_span"><i class="el-icon-set-up" style="font-size: 16px"></i>项目概况</span>
            <hr>
            <div class="container">
              <div class="item">
                <ul>
                  <li>占地面积</li>
                  <li>14000 ㎡</li>
                </ul>
              </div>
              <div class="item">
                <ul>
                  <li>建筑面积</li>
                  <li>25000 ㎡</li>
                </ul>
              </div>
            </div>
            <div class="container">
              <div class="item">
                <ul>
                  <li>写字楼面积</li>
                  <li>0 ㎡</li>
                </ul>
              </div>
              <div class="item">
                <ul>
                  <li>服务企业数</li>
                  <li>0 家</li>
                </ul>
              </div>
            </div>
            <div class="container">
              <div class="item">
                <ul>
                  <li>服务人数</li>
                  <li>2000 人</li>
                </ul>
              </div>
              <div class="item">
                <ul>
                  <li>公寓面积</li>
                  <li>0 ㎡</li>
                </ul>
              </div>
            </div>
          </li>
          <li class="left_li">
            <span class="ping_span"><i class="el-icon-set-up" style="font-size: 16px"></i>设备实时状态</span>
            <hr>
            <ul class="left_li_ul01">
              <li>
                <div class="left_li_div01">
                  <span class="div_span">88.1%</span>
                </div>
              </li>
              <li>
                <div class="left_li_div02">
                  <span class="div_span">11.9%</span>
                </div>
              </li>
              <li>
                <div class="left_li_div03">
                  <span class="div_span">24.6%</span>
                </div>
              </li>
            </ul>
            <ul class="left_li_ul02">
              <li>
                <div class="left_li_ul02_div">在线率</div>
              </li>
              <li>
                <div class="left_li_ul02_div">离线率</div>
              </li>
              <li>
                <div class="left_li_ul02_div">告警率</div>
              </li>
            </ul>
          </li>
          <li class="left_li">
            <span class="ping_span"><i class="el-icon-set-up" style="font-size: 16px"></i>24小时告警态势</span>
            <hr>
            <div ref="orderStatus" style="width: 100%;height: 80%"></div>
          </li>
          <li class="left_li">
            <span class="ping_span"><i class="el-icon-set-up" style="font-size: 16px"></i>30天历史告警分布【Top10】</span>
            <hr>
            <div ref="orderStatusBing" style="width: 100%;height: 80%"></div>
          </li>
        </ul>
      </div>
      <div class="ping_zhong_rigth">
        <div class="ping_rigth_top">
          <div class="ping_rigth_top01">
            <el-dropdown @command="(command) => handleCommand(command)">
              <el-button plain style="height: 80%;background-color: rgba(15,115,238,0);border-color: transparent;margin: 4px 0px;color: white"
                         type="primary">
                {{ value }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" style="background-color: rgba(15,115,238,0);border-color: transparent;">
                <el-dropdown-item v-for="(item, index) in options" :key="index" :command="item.value"
                                  style="color: white;">
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="ping_rigth_top_ditu"></div>
        </div>
        <div class="ping_rigth_di">
          <!-- DataV 组件 -->
          <dv-scroll-board ref="dvscrollbar" :config="config" style="width: 100%;height: 100%;"></dv-scroll-board>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listAlertLog} from '@/api/iot/alertLog';
import * as echarts from 'echarts';

export default {
  name: 'Daping',
  data() {
    return {
      config: {
        header: ['设备名称', '报警时间', '报警名称'],
        rowNum: 4, // 表格函行数
        headerHeight: 30, // 表头高度
        headerBGC: 'rgba(15,44,82,0.6)',
        oddRowBGC: 'rgba(12,34,62,0.6)', // 奇数行背景色
        evenRowBGC: 'rgba(20,57,105,0.6)', // 偶数行背景色
        indexHeader: '序号', // 第一行索引表头名
        index: true,
        carousel: 'single',
        align: ['center'],
        data: []
      },
      options: [
        {
          value: '选项1',
          label: '末端试水压力分项'
        }],
      value: '末端试水压力分项',
      currentTime: this.getCurrentDateTime()
    };
  },
  created() {
    this.updateDateTime();
    this.getList();
  },
  mounted() {
    this.initlineEquipments()
    this.initBIngEquipments()
  },
  methods: {
    handleCommand(command) {
      const option = this.options.find(item => item.value === command);
      this.value = option.label;
    },
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1; // 月份从0开始，所以需要+1
      const day = now.getDate();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();
      // 格式化为两位数字
      const formatNumber = (n) => n < 10 ? '0' + n : n;
      return `${year}-${formatNumber(month)}-${formatNumber(day)} ${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(seconds)}`;
    },
    updateDateTime() {
      this.currentTime = this.getCurrentDateTime();
      setInterval(() => {
        this.currentTime = this.getCurrentDateTime();
      }, 1000); // 每秒更新时间
    },
    // 折线图
    initlineEquipments() {
      const myEcharts = echarts.init(this.$refs.orderStatus);
      myEcharts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: 'white'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white'
          }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }, true);
    },
    //饼图
    initBIngEquipments() {
      const myEcharts = echarts.init(this.$refs.orderStatusBing);
      myEcharts.setOption({
        series: [
          {
            type: 'pie',
            data: [
              {name: '湿度告警', value: 93},
              {name: '温度告警', value: 32},
              {name: '变压器告警', value: 65},
              {name: 'FSU告警', value: 44},
              {name: '电压告警', value: 52},
            ],
            insideLabel: {
              show: true
            },
            roseType: true
          }
        ]
      }, true);
    },
    getList() {
      listAlertLog(this.queryParams).then((response) => {
        console.log(response)
        const data = response.rows;
        const datas = this.formatData(data)
        console.log(datas)
        this.config = {...this.config, data: datas};
        console.log(this.config);
      });
    },
    formatData(rows) {
      return rows.map((row, index) => {
        return [
          `${row.deviceName}`,
          `${row.createTime}`,
          `${row.alertName}`,
        ];
      });
    }
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}

.ping_bj {
  width: 100%;
  height: 953px;
  background-image: url("../../../assets/daping/bg.png");
  background-size: cover;
}

.ping_top {
  margin: 0;
  padding: 0;
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 允许弹性项目换行 */
  justify-content: space-around; /* 弹性项目在主轴上均匀分布 */
  align-items: center; /* 弹性项目在交叉轴上居中对齐 */
}

.ping_top li {
  flex: 1; /* 每个列表项都占据可用空间 */
  height: 45px;
}

.ping_top_left p {
  position: absolute;
  color: white;
  margin: 15px 25px;
}

.ping_top_zhong {
  width: 100px;
  height: 28px;
  position: absolute;
  margin: 16px 13%
}

.ping_zhong {
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 允许弹性项目换行 */
  height: 90%;
}

.ping_zhong_left {
  width: 30%;
  height: 100%;
  margin: 25px 30px;
  background-color: #0f2c5280;
}

.ping_zhong_left .left_ul {
  width: 100%;
  height: 100%;
  margin: 12px -17px;
}

.ping_zhong_left .left_ul .left_li {
  width: 100%;
  height: 22%;
  margin: 20px 0px;
}

.ping_zhong_rigth {
  width: 60%;
  height: 100%;
  margin: 25px 30px;
}

.ping_rigth_top {
  width: 100%;
  height: 70%;
  border: 1px rgba(255, 255, 255, 0) solid;
}

.ping_rigth_di {
  width: 100%;
  height: 30%;
}

.ping_rigth_top01 {
  width: 100%;
  height: 40px;
  background-color: #dadada38;
  margin: 20px 0px;
}

.ping_rigth_top_ditu {
  height: 38%;
  width: 70%;
  min-width: 360px;
  background-size: 100% 100%;
  margin: 15% auto;
  background-position: 50%;
  position: relative;
  background-image: url("../../../assets/daping/index_bg3.png");
}

.ping_span {
  color: white;
  font-size: 16px;
}

.container {
  display: flex;
  justify-content: space-around; /* 项目之间的空间相等 */
  align-items: stretch; /* 默认值，项目占满交叉轴 */
  height: 20%; /* 容器高度 */
  margin-top: 5px;
}

.item {
  flex: 1; /* 项目可以伸展以填满空间 */
  margin: 10px; /* 项目之间的间距 */
  background-color: rgba(17, 51, 91, 0.84);
  text-align: center;
  height: 100%;
}

.container .item ul {
  margin: 0;
  padding: 0;
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 允许弹性项目换行 */
  justify-content: space-around; /* 弹性项目在主轴上均匀分布 */
  align-items: center; /* 弹性项目在交叉轴上居中对齐 */
  color: white;
  height: 100%;
}

.container .item ul li {
  flex: 1; /* 每个列表项都占据可用空间 */
  font-size: 12px;
}

.left_li .left_li_ul01 {
  margin: 0;
  padding: 0;
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 允许弹性项目换行 */
  justify-content: space-around; /* 弹性项目在主轴上均匀分布 */
  align-items: center; /* 弹性项目在交叉轴上居中对齐 */
  height: 60%;
}

.left_li .left_li_ul01 li {
  flex: 1; /* 每个列表项都占据可用空间 */
}

.left_li_div01 {
  width: 82px;
  height: 82px;
  background-image: url("../../../assets/daping/index_dev_icon1.png");
}

.left_li_div02 {
  width: 82px;
  height: 82px;
  background-image: url("../../../assets/daping/index_dev_icon2.png");
}

.left_li_div03 {
  width: 82px;
  height: 82px;
  background-image: url("../../../assets/daping/index_dev_icon3.png");
}

.div_span {
  margin: 0px 22%;
  color: white;
  line-height: 80px;
}

.left_li .left_li_ul02 {
  margin: 0;
  padding: 0;
  display: flex; /* 设置为弹性布局 */
  flex-wrap: wrap; /* 允许弹性项目换行 */
  justify-content: space-around; /* 弹性项目在主轴上均匀分布 */
  align-items: center; /* 弹性项目在交叉轴上居中对齐 */
  height: 24%;
  color: white;
  margin-top: -10px;
}

.left_li .left_li_ul02 .left_li_ul02_div {
  margin: 0px -70%;
}
</style>
