<template>
  <div class="dashboard-container">
    <div class="dashboard_editor_containerr">
      <ul class="index_container">
        <li class="left">
          <div class="each">
            <div class="icon">
              <p class="title">设备统计</p>
              <ul>
                <li>
                  <div>图标</div>
                  <p>设备总数：{{ allCount }} 台</p>
                </li>
                <li>
                  <div>图标</div>
                  <p>在线数：{{ online }} 台</p>
                </li>
                <li>
                  <div>图标</div>
                  <p>离线数：{{ offline }} 台</p>
                </li>
                <li>
                  <div>图标</div>
                  <p>在线率：{{ onlineRate }}%</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="each">
            <div class="table_pop">
              <div class="table_list">
                <p class="table_list_title">设备实时数据</p>
                <div class="table_list_container">
                  <el-table
                    :data="equipmentTable"
                    border
                    style="width: 100%"
                    height="600"
                    @row-click="detailsInfo"
                  >
                    <el-table-column
                      prop="deviceIdentifier"
                      label="设备编号"
                      align="center"
                    />
                    <el-table-column
                      prop="deviceName"
                      label="设备名称"
                      align="center"
                    />
                    <el-table-column
                      prop="status"
                      label="状态"
                      align="center"
                    />
                    <el-table-column
                      prop="updateTime"
                      label="数据更新时间"
                      align="center"
                    />
                  </el-table>
                  <el-pagination
                    style="text-align: center"
                    :current-page="equipmentPage"
                    :page-sizes="[20]"
                    :page-size="equipmentSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="equipmentTotal"
                    @size-change="equipmentSizeChange"
                    @current-change="equipmentCurrentChange"
                  />
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="right">
          <div class="each">
            <div class="table_list">
              <p class="table_list_title">事件告警列表</p>
              <div class="table_list_container">
                <el-table
                  :data="evnetAlarmTable"
                  border
                  style="width: 100%"
                  height="400"
                >
                  <el-table-column
                    prop="createTime"
                    label="告警时间"
                    align="center"
                  />
                  <el-table-column
                    prop="deviceIdentifier"
                    label="设备编号"
                    align="center"
                  />
                  <el-table-column
                    prop="deviceName"
                    label="设备名称"
                    align="center"
                  />
                  <el-table-column
                    prop="warnValue"
                    label="告警指标"
                    align="center"
                  />
                  <el-table-column
                    prop="warnIndex"
                    label="告警值"
                    align="center"
                  />
                  <el-table-column
                    prop="warnContent"
                    label="内容"
                    align="center"
                  />
                  <el-table-column prop="" label="状态" align="center" />
                </el-table>
                <el-pagination
                  style="text-align: center"
                  :current-page="tellPage"
                  :page-sizes="[10]"
                  :page-size="tellSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tellTotal"
                  @size-change="tellSizeChange"
                  @current-change="tellCurrentChange"
                />
              </div>
            </div>
          </div>
          <div class="each">
            <div class="chart">
              <el-date-picker
                v-model="searchTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="serchTimeData"
              />
              <indexEchart :echart-data="echartData" />
            </div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div class="form_container">
        <div class="top">
          <p>设备编号：{{ diaTop.deviceIdentifier }}</p>
          <p>数据更新时间：{{ diaTop.updateTime }}</p>
          <p>设备名称：{{ diaTop.deviceName }}</p>
          <p>设备位置：{{ diaTop.monitorObject }}</p>
        </div>
        <el-divider />
        <div class="bottom">
          <p>CO2：642（ppm)</p>
          <p>PM2.5：38（ug/m³)</p>
          <p>VOC：0（mg/m³)</p>
          <p>温度：27（℃)</p>
          <p>湿度：84（%RH)</p>
          <p>甲醛：5（ppm)</p>
          <p>PM10：43（ug/m³)</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import indexEchart from '@/components/Echarts/indexEchart'
import crudDmModbusDevice from '@/api/dmModbusDevice'
import crudDmEnvHistoryWarn from '@/api/dm/envmonitor/historydata/dmEnvHistoryWarn'
import crudDmEnvHistoryData from '@/api/dm/envmonitor/historydata/dmEnvHistoryData'
import crudDmModbusDeviceStatus from '@/api/dmModbusDeviceStatus'
export default {
  name: 'Dashboard',
  components: { indexEchart },
  data() {
    return {
      allCount: null,
      online: null,
      offline: null,
      onlineRate: null,
      evnetAlarmTable: [],
      equipmentTable: [],
      equipmentPage: 1, // 获取设备历史数据页码
      equipmentSize: 20, // 获取设备历史数据条数
      equipmentTotal: 0, // 获取设备历史数据总数
      tellPage: 1, // 获取告警数据页码
      tellSize: 10, // 获取告警数据条数
      tellTotal: 0, // 获取告警数据总数
      dialogVisible: false,
      echartData: [],
      diaTop: {},
      diaBottom: {},
      searchTime: [new Date() - 1000 * 60 * 60 * 24 * 30, new Date()]
    }
  },
  created() {
    const _that = this
    _that.getModbusStatistics()
    _that.getEnvHistoryWarn(null)
    _that.getEnvHistoryData(null)
    _that.getModbusDeviceStatus(null)
  },
  methods: {
    detailsInfo(row, column, event) {
      const _this = this
      _this.dialogVisible = true
      _this.diaTop = row
      _this.diaBottom =
        row.dmEnvHistoryModbusDataSet[row.dmEnvHistoryModbusDataSet.length - 1]
    },
    /**
     * 获取modbus设备统计数据
     */
    getModbusStatistics() {
      const _that = this
      crudDmModbusDevice.getModbusStatistics().then((res) => {
        _that.allCount = res.allCount
        _that.online = res.online
        _that.offline = res.offline
        _that.onlineRate = res.onlineRate
      })
    },
    /**
     * 获取告警列表数据
     */
    getEnvHistoryWarn(data) {
      if (data == null) {
        // data = "page=0&size=10&sort=id,ASC";
        data = `page=${this.tellPage - 1}&size=${this.tellSize}&sort=id,desc`
      }
      crudDmEnvHistoryWarn.get(data).then((res) => {
        this.evnetAlarmTable = res.content
        this.tellTotal = res.totalElements
      })
    },
    /**
     * 获取告警数据分页
     */
    tellSizeChange(val) {
      this.equipmentPage = val - 1
      this.getEnvHistoryWarn()
    },
    tellCurrentChange(val) {
      this.tellPage = val - 1
      this.getEnvHistoryWarn()
    },
    /**
     * 获取设备历史数据
     */
    getEnvHistoryData(data) {
      if (data == null) {
        // data = "page=0&size=10&sort=id,ASC";
        data = `page=${this.equipmentPage - 1}&size=${
          this.equipmentSize
        }&sort=id,desc`
      }
      crudDmEnvHistoryData.get(data).then((res) => {
        console.log(res)
        this.equipmentTable = res.content
        this.equipmentTotal = res.totalElements
        this.equipmentTable.forEach((item) => {
          item.status = item.deviceState ? '在线' : '离线'
        })
      })
    },
    /**
     * 获取设备历史数据分页
     */
    equipmentSizeChange(val) {
      this.equipmentPage = val - 1
      this.getEnvHistoryData()
    },
    equipmentCurrentChange(val) {
      this.equipmentPage = val - 1
      this.getEnvHistoryData()
    },
    /**
     * 获取设备在线日志
     */
    getModbusDeviceStatus(data) {
      if (data == null) {
        console.log()
        data = `page=0&size=10&createTime=${this.changeTime(
          new Date(this.searchTime[0])
        )}&createTime=${this.changeTime(this.searchTime[1])}&sort=id,desc`
      }
      crudDmModbusDeviceStatus.get(data).then((res) => {
        this.echartData = res.content
      })
    },
    serchTimeData(value) {
      this.searchTime = [
        this.changeTime(value[0]),
        this.changeTimeEnd(value[1])
      ]
    },
    changeTime(date) {
      var Y = date.getFullYear() // 2021
      var M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1 // 10
      var D = date.getDate() // 28
      return `${Y}-${M}-${D} 00:00:00 ` // 2021-10-28 17:51:08
    },
    changeTimeEnd(date) {
      var Y = date.getFullYear() // 2021
      var M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1 // 10
      var D = date.getDate() // 28
      return `${Y}-${M}-${D} 23:59:59 ` // 2021-10-28 17:51:08
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
* {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard_editor_containerr {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .index_container {
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;
    overflow: hidden;
    li {
      width: 49%;
      .each {
        width: 100%;
        margin: 20px 10px 0 0;
      }
    }
  }
  .icon {
    background-color: #fff;
    padding: 10px;
    .title {
      text-align: left;
    }
    ul {
      display: flex;
      padding: 0;
      li {
        flex: 1;
        text-align: center;
        div {
          width: 60px;
          height: 60px;
          background-color: #ccc;
          margin: 18px auto;
          line-height: 60px;
        }
        p {
          margin-top: 10px;
        }
      }
    }
  }
  .table_list {
    background-color: #fff;
    padding: 10px;
    .table_list_container {
      margin-top: 20px;
      padding: 10px;
    }
  }
  .chart {
    background-color: #fff;
    padding: 10px;
  }
}
.form_container {
  .top {
    display: flex;
    flex-wrap: wrap;
    p {
      margin-bottom: 20px;
      width: 50%;
    }
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    p {
      margin-top: 20px;
      width: 50%;
    }
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
