<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="lcl-title">趋势分析</div>
      <div class="mt20">
        <el-date-picker
          v-model="queryParams.dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="timeBE"
        >
        </el-date-picker>
        <el-select
          v-model="monNumber"
          placeholder="请选择设备"
          class="mr10"
          @change="divSelectChange"
          clearable
        >
          <el-option
            v-for="item in deviceSelectList"
            :key="item.monNumber"
            :label="item.monName"
            :value="item.monNumber"
          >
          </el-option>
        </el-select>
        <!-- <el-button
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="handleQuery"
          >搜索</el-button
        > -->
        <el-button size="medium" @click="makeChart">生成曲线</el-button>
      </div>
    </el-card>
    <el-card class="mt10 box-card">
      <div class="lcl-title">地面隆起数据列表</div>
      <div class="mt10" id=" radar-table">
        <el-table
          :data="NbwyTableData"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{
            textAlign: 'center',
            height: '20px',
          }"
          :row-style="{ height: '20px' }"
        >
          <el-table-column align="center" prop="monNumber" label="监测编号">
          </el-table-column>
          <el-table-column align="center" prop="pointName" label="监测点位">
          </el-table-column>
          <el-table-column align="center" prop="monValue" label="监测值（mm）">
          </el-table-column>
          <el-table-column align="center" prop="monAlarmLevel" label="预警状态">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="监测时间">
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog title="" :visible.sync="dialogVisibleChart" width="50%">
      <div class="chart">
        <ChartsForLine :ChartsForLineParant="chartAllData" class="nbnb" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { uplifthistory, monDic } from "@/api/lclApi/lclapi";
export default {
  components: {
    ChartsForLine,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      deviceSelectList: [
        {
          monName: "1-1测斜仪",
          monNumber: "1-1测斜仪",
        },
      ],
      monNumber: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        monNumber: null,
        dates: [],
      },
      // 总条数
      total: 0,
      NbwyTableData: [
        {
          createTime: "2023-03-11 19:06:20",
          updateTime: "2023-03-11 08:38:13",
          monStatus: 0,
          pointName: 0,
          id: 14,
          monNumber: "2#沉降仪",
          monValueA: "0.2",
          monValueB: "0.21",
          monAlarmStatus: 0,
          monDept: "10m/20m",
        },
      ],
      dialogVisibleChart: false,
      chartAllData: {
        legendItem: ["a", "b"],
        xAxisData: ["q", "p"],
        yData: [],
        chartId: "chart",
        color: ["#f7af0b", "#05f57a", "#f40852"],
        chartType: "line",
        axisLabel: "#0562AF",
        itemColor: "rgba(42,148,226,1)",
        unit: "mm",
        bgc: "#fff",
        grid: {
          left: "10%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          z: 22,
        },
        showlegend: false,
      },
    };
  },
  created() {
    this.dialogVisibleChart = true;
  },
  mounted() {
    this.$nextTick(() => {
      this.dialogVisibleChart = false;
      this.monDicData();
      this.getList();
    });
  },
  methods: {
    timeBE() {
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {},
    // getRealList() {
    //   displacementreal().then((res) => {
    //     if (res && res.code === 200 && res.rows) {
    //       this.NbwyTableData = res.rows;
    //       this.total = res.total;
    //     }
    //   });
    // },
    //当前表格
    getList() {
      let that = this;
      uplifthistory(this.queryParams)
        .then((res) => {
          if (res && res.code === 200 && res.rows) {
            this.NbwyTableData = res.rows;
            this.total = res.total;
          }
        })
        .then(() => {
          that.chartAllData.legendItem = [];
          that.chartAllData.xAxisData = [];
          that.chartAllData.yData = [];
          that.chartAllData.legendItem = [this.queryParams.monNumber];
          that.chartAllData.xAxisData = that.NbwyTableData.map(
            (v) => v.createTime
          );
          that.chartAllData.yData.push(
            that.NbwyTableData.map((v) => Number(v.monValue))
          );
          // for(let i=0;i<that.chartAllData.length;i++){
          //   that.chartAllData.yData.push
          // }
        });
    },
    // 数据监测: 设备管理
    monDicData() {
      monDic({ monType: 4 }).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.deviceSelectList = res.rows;
        }
      });
    },
    //下拉框
    divSelectChange(e) {
      console.log(e);
      this.queryParams.monNumber = e || null;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    makeChart() {
      if (this.queryParams.monNumber) {
        this.getList();
        this.dialogVisibleChart = true;
      } else {
        this.$modal.msgWarning("请选择设备查看");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.data-watch {
  width: 100%;
  min-height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
}
.chart {
  width: 100%;
  min-height: 70vh;
  border: 1px solid teal;
  overflow: hidden;
  .nbnb {
    width: 100%;
    height: 70vh !important;
  }
}
</style>