<template>
  <div class="realTimeData">
    <vue-scroll style="height: 100%">
      <el-form
        :inline="true"
        size="medium"
        class="demo-form-inline whiteBlock"
        style="padding: 10px 0 10px 18px"
      >
        <el-form-item style="margin: 0">
          <!-- 请选择 -->
          <el-select
            v-model="devSn"
            filterable
            :placeholder="$t('message.safeMangeCheck.pleaseChoose')"
            @change="changeDev"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.devName"
              :value="item.devSn"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="flex content1">
        <div class="table_wrap whiteBlock">
          <!-- 实时数据 -->
          <div class="state_title pageTitle">{{$t('message.devManage.realData.realData')}}</div>
          <ul ref="tableBox" class="table_box">
            <!-- :style="{ width: showWidth + 'px' }" -->
            <vue-scroll>
            <li
              v-for="(item, index) in pointList"
              :key="index" @click="changePoint(item)"
              :class="checkedPointNo == item.pointNo ? 'checkedPoint' : ''"
            >
            <div class="pointNo">{{ item.pointNo }}</div>
              <div class="item">
                <div>
                  {{
                    item.temperatureThreshold
                      ? item.temperatureThreshold
                      : "--"
                  }}℃
                </div>
              </div>
            </li>
            </vue-scroll>
          </ul>
        </div>
        <div class="alarm_wrap whiteBlock">
          <!-- 报警信息 -->
          <div class="state_title pageTitle">{{$t('message.devManage.realData.dangerInfo')}}</div>
          <vue-scroll style="height: calc(100% - 80px)">
            <el-table
              ref="multipleTable"
              :data="alarmList"
              style="width: 100%"
              class="tables"
            >
            <!-- 报警类型 -->
              <el-table-column
                prop="alarmType"
                :label="$t('message.devManage.realData.dangeerType')"
              ></el-table-column>
              <!-- 报警等级 -->
              <el-table-column prop="alarmLevel" :label="$t('message.devManage.realData.dangerLevel')">
                <template slot-scope="scope">
                  <!-- 紧急告警 -->
                  <div v-if="scope.row.alarmLevel == 1">{{$t('message.devManage.realData.urgencyAlarm')}}</div>
                  <!-- 重要告警 -->
                  <div v-if="scope.row.alarmLevel == 2">{{$t('message.devManage.realData.improtanceAlarm')}}</div>
                  <!-- 次要告警 -->
                  <div v-if="scope.row.alarmLevel == 3">{{$t('message.devManage.realData.minorAlarm')}}</div>
                  <!-- 提示告警 -->
                  <div v-if="scope.row.alarmLevel == 4">{{$t('message.devManage.realData.tipAlarm')}}</div>
                </template>
              </el-table-column>
              <!-- 报警值 -->
              <el-table-column prop="alarmValue" :label="$t('message.devManage.realData.alarmNum')">
                <template slot-scope="scope">
                  <div>{{ scope.row.alarmValue }}°</div>
                </template>
              </el-table-column>
              <!-- 监测点位 -->
              <el-table-column
                prop="pointNo"
                :label="$t('message.devManage.realData.montorLocation')"
              ></el-table-column>
            </el-table>
          </vue-scroll>
          <el-pagination
            class="pagerBox"
            style="margin-top: 10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
      <div class="echart whiteBlock">
          <!-- 温度曲线 -->
        <div class="state_title pageTitle">{{$t('message.devManage.realData.temperatureLine')}}
          <div style="position:absolute;top:-6px;left:100px">
          <el-select 
            v-model="type"
            :placeholder="$t('message.safeMangeCheck.pleaseChoose')"
            @change="changeTime" size="medium"
          >
            <el-option :label="$t('message.devManage.realData.twoFourHours')" :value="1"> </el-option>
            <el-option :label="$t('message.devManage.realData.fourEightHours')" :value="2"> </el-option>
          </el-select>
        </div>
        </div>
        
        <div ref="timeChart" style="width: 100%; height: calc(100% - 40px)"></div>
        <!-- 暂无数据 -->
        <div v-if="chartList.length == 0" class="nodata whiteBlock">
          <img src="@/assets/images/noData.png" />
          <div>{{$t('message.devManage.realData.noData')}}</div>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import {
  getSelectDevApi,
  getAlarmListApi,
  getChartListApi,
} from "@/assets/js/api/concreteMonitoring.js";
import echarts from 'echarts4';;
export default {
  data() {
    return {
      projectSn: "",
      page: 1,
      pageSize: 10,
      total: 0,
      devSn: "",
      options: [],
      pointList: [], // 点位信息
      pointListLength: 0,
      showWidth: 0, //每个格子的宽度
      alarmList: [],
      type: 1,
      chartList: [],
      checkedPointNo: 1,
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
  },
  mounted() {
    this.getSelectDevList();
  },
  methods: {
    //获取设备列表
    getSelectDevList() {
      let data = {
        projectSn: this.projectSn,
      };
      getSelectDevApi(data).then((res) => {
        if (res.code == 200) {
          this.options = res.result;
          this.devSn = res.result[0].devSn;
          this.pointList = res.result[0].pointList;
          this.pointListLength = res.result[0].pointList.length;
          this.checkedPointNo = res.result[0].pointList[0].pointNo;
          // let tableBox = this.$refs.tableBox;
          // let offsetWidth = tableBox.offsetWidth; //获取表格的总宽
          // let multiple =
          //   this.pointListLength == 256
          //     ? 16
          //     : this.pointListLength == 64 || this.pointListLength == 128
          //     ? 8
          //     : this.pointListLength == 16 || this.pointListLength == 32
          //     ? 4
          //     : this.pointListLength == 8
          //     ? 2
          //     : 0; //判断显示的列数
          // let width1 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 9 / 10;
          // let width2 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 8 / 10;
          // let width3 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 7 / 10;
          // this.showWidth =
          //   multiple == 16 || this.pointListLength == 128
          //     ? width1
          //     : this.pointListLength == 64
          //     ? width2
          //     : width3;

          this.getAlarmList();
          this.getChartList();
        }
      });
    },
    //切换设备
    changeDev(val) {
      this.devSn = val;
      this.checkedPointNo = 1;
      this.options.forEach((item, index) => {
        if (item.devSn == val) {
          this.pointList = item.pointList;
          this.pointListLength = item.pointList.length;
          // let tableBox = this.$refs.tableBox;
          // let offsetWidth = tableBox.offsetWidth; //获取表格的总宽
          // let multiple =
          //   this.pointListLength == 256
          //     ? 16
          //     : this.pointListLength == 64 || this.pointListLength == 128
          //     ? 8
          //     : this.pointListLength == 16 || this.pointListLength == 32
          //     ? 4
          //     : this.pointListLength == 8
          //     ? 2
          //     : 0; //判断显示的列数
          // let width1 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 9 / 10;
          // let width2 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 8 / 10;
          // let width3 =
          //   offsetWidth / (this.pointListLength / multiple) - 2 + 7 / 10;
          // this.showWidth =
          //   multiple == 16 || this.pointListLength == 128
          //     ? width1
          //     : this.pointListLength == 64
          //     ? width2
          //     : width3;
        }
      });
      this.getAlarmList();
      this.getChartList();
    },

    //切换点位
    changePoint(val) {
      this.checkedPointNo = val.pointNo;
      this.getChartList();
    },

    //切换条数
    handleSizeChange(e) {
      this.pageSize = e;
      this.getAlarmList();
    },
    //切换分页
    handleCurrentChange(e) {
      this.page = e;
      this.getAlarmList();
    },
    //获取报警列表
    getAlarmList() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        devSn: this.devSn,
        projectSn: this.projectSn,
      };
      getAlarmListApi(data).then((res) => {
        if (res.code == 200) {
          this.alarmList = res.result.records;
          this.total = res.result.total;
        }
      });
    },

    //切换时间段类型
    changeTime(e) {
      this.type = e;
      this.getChartList();
    },

    //获取图表数据
    getChartList() {
      let data = {
        devSn: this.devSn,
        pointNo: this.checkedPointNo,
        type: this.type,
      };
      getChartListApi(data).then((res) => {
        if (res.code == 200) {
          this.chartList = res.result;
          if (res.result.length > 0) {
            let xArr = [];
            let dataArr = [];
            res.result.forEach((item, index) => {
              xArr.push(item.receiveTime);
              dataArr.push(item.temperature);
            });
            this.createdEchart(xArr, dataArr);
          } else {
            this.createdEchart([], []);
          }
        }
      });
    },

    //创建图表
    createdEchart(xArr, data) {
      let timeChart = echarts.init(this.$refs.timeChart);
      if (xArr.length == 0) {
        timeChart.clear();
      }
      let option = {
        grid: {
          left: "5%",
          top: "15%",
          bottom: "10%",
          right: "5%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xArr,
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: data,
            type: "line",
            smooth: true,
          },
        ],
      };
      timeChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.flex2 {
  display: flex;
}
.realTimeData {
  width: 100%;
  height: 100%;
}
.content1 {
  width: 100%;
  height: 50%;
  margin: 12px 0;
}
.table_wrap {
  width: 60%;
  height: 100%;
  box-sizing: border-box;
  padding: 12px 15px;
}
.table_box {
  width: 100%;
  height: calc(100% - 40px);
  flex-wrap: wrap;
  box-sizing: border-box;
}
.table_box li {
  border: 1px solid rgba(18, 41, 75, 0.21);
  color: rgba(50, 59, 93, 1);
  border-radius: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 7px;
  margin-bottom: 7px;
  width: 100px;
  height: 74px;
  .item {
    font-size: 19px;
  }
  .pointNo {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    background-color: rgba(44, 51, 80, 0.08);
    width: 35px;
    height: 27px;
    line-height: 22px;
    // padding-left: 6px;
    border-bottom-right-radius: 35px;
    text-align: center;
  }
  &.checkedPoint {
    background-color: rgba(72, 141, 236, 0.05);
    border-color: @--color-primary-deep;
    .pointNo{
      background-color: @--color-primary-deep;
      color: white;
    }
    .item{
      color: @--color-primary-deep;
    }
  }
}
.alarm_wrap {
  margin-left: 12px;
  height: 100%;
  width: 40%;
  box-sizing: border-box;
  padding: 12px 15px;
}
.echart {
  height: 40%;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
}


.nodata {
  text-align: center;
  margin-top: 20px;
  color: #c3d4fd;
  font-size: 15px;
  z-index: 999;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>