<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="watch-left">
        <img :src="`${appPicApi}${picUrl}`" alt="" />
        <div class="watch-topRight">
          <div class="ex-pic">
            <img src="../../../assets/images/baopo/02.png" alt="" />
            <span>监测示意图</span>
          </div>
        </div>
      </div>
      <div class="watch-right">
        <div class="lcl-title">
          <div>监测数据</div>
          <div>
            <span style="font-size: 14px">起始日期：</span>
            <el-date-picker
              v-model="queryParams.startTime"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
              :editable="false"
              size="small"
            >
            </el-date-picker
            >{{ " -" }}
            <el-date-picker
              v-model="queryParams.endTime"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
              :editable="false"
              size="small"
            >
            </el-date-picker>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getchart"
              >搜索</el-button
            >
          </div>
        </div>
        <div id="radar-table">
          <el-table
            :data="baopoTableData"
            height="390"
            border
            stripe
            style="width: 100%"
            :header-cell-style="{
              textAlign: 'center',
              height: '20px',
            }"
            :row-style="{ height: '20px' }"
          >
            <el-table-column
              align="center"
              prop="createTime"
              label="监测时间"
            />
            <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="震动幅度(cm/s)"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="monFrequency"
              label="震动主频(Hz)"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="clb"></div>
        <div class="lcl-title">监测曲线</div>
        <div class="chart-container">
          <div class="chartbaopo">
            <ChartsForLine :ChartsForLineParant="AllChartData" />
          </div>
          <!-- <div class="chartbaopoName">{{ item[0].id }}</div> -->
        </div>
        <div class="clb"></div>
      </div>
      <div class="clb"></div>
    </el-card>
  </div>
</template>
<script>
// import { defineComponent } from "@vue/composition-api";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { getSevenTime } from "@/components/lclEcharts/time";
import { blastinghistory, imageList } from "@/api/lclApi/lclapi";
export default {
  data() {
    return {
      baopoTableData: [
        {
          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",
        },
      ],
      AllChartData: {
        name: "1#爆破振动传感器",
        chartId: `baopo`,
        color: ["#f7af0b", "#05f57a", "#f40852"],
        chartType: "line",
        axisLabel: "#0562AF",
        itemColor: "rgba(42,148,226,1)",
        unit: "cm/s",
        bgc: "#fff",
        grid: {
          left: "5%",
          right: "2%",
          bottom: "10%",
          top: "15%",
          z: 22,
        },
        showlegend: false,
        legendItem: ["1#爆破振动传感器"],
        xAxisData: ["q", "p"],
        yData: [],
      },
      allYDataForEchart: [],
      allXDataForEchart: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 99999,
        startTime: "2022-01-17",
        endTime: "2023-03-17",
      },
      dataVal: "",
      appPicApi: "",
      picUrl: "",
    };
  },
  components: {
    ChartsForLine,
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getchart();
      let getTime = getSevenTime(7);
      this.queryParams.startTime = getTime[0];
      this.queryParams.endTime = getTime[getTime.length - 1];
      this.appPicApi = this.$store.getters.appPicApi;
      imageList({ monType: 9 }).then((res) => {
        this.picUrl = res.rows[0].image;
      });
    });
  },
  methods: {
    getchart() {
      let that = this;
      blastinghistory(this.queryParams)
        .then((res) => {
          if (res && res.code === 200 && res.rows) {
            that.baopoTableData = res.rows;
            that.AllChartData.xAxisData = res.rows.map(
              (item) => item.createTime
            );
            that.AllChartData.yData = [res.rows.map((item) => item.monValue)];
            console.log(that.AllChartData);
          }
        })
        .then(() => {});
    },
    gettime() {
      var date = new Date();
      //年
      var year = date.getFullYear();
      //月
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1; //日 var
      day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //时 var
      hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //分 var
      mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //秒 var
      ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var nowTime = year + "-" + month + "-" + day;
      return nowTime;
    },
  },
};
</script>
<style lang="scss" scoped>
.clb {
  clear: both;
}
.data-watch {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // border-radius: 10px;
  // background-color: teal;
  .box-card {
    width: 100%;
    .watch-left {
      width: 45%;
      float: left;
      position: relative;
      > img {
        border-radius: 4px;

        display: block;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
        object-fit: scale-down;
      }
      .watch-topRight {
        width: 20%;
        height: 20%;
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        .ex-pic {
          position: relative;
          width: 100%;
          height: 100%;
          > img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
          }
          > span {
            position: absolute;
            left: 10px;
            top: 0px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
    .watch-right {
      width: 55%;
      padding: 10px;
      float: left;
      .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;
        }
      }
      #radar-table {
        width: 100%;
        height: 100%;
        margin: 10px 0;
        // border: 1px solid #c7d8ee;
        box-sizing: border-box;
        ::v-deep .el-table--border,
        ::v-deep .el-table--group {
          border: 1px solid #c7d8ee !important;
        }
        // 设置滚动条的宽度
        ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          width: 6px;
        }
        // 设置滚动条的背景色和圆角
        ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
          background-color: #c7d8ee;
          border-radius: 8px;
        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::v-deep ::-webkit-scrollbar {
          width: 6px;
          /*滚动条宽度*/
          height: 12px;
          /*滚动条高度*/
          background-color: white;
        }

        /*定义滑块 内阴影+圆角*/
        ::v-deep ::-webkit-scrollbar-thumb {
          box-shadow: inset 0 0 0px white;
          -webkit-box-shadow: inset 0 0 0px white;
          background-color: rgb(193, 193, 193);
          /*滚动条的背景颜色*/
          border-radius: 20px;
        }

        //解决表格固定列时的压样式问题
        .el-table__fixed {
          height: 100px;
          width: 12px;
        }
      }
      .chart-container {
        width: 100%;
        height: 280px;
        float: left;
        border: 1px solid #0562af;
        box-sizing: border-box;
        margin: 5px auto;

        overflow: hidden;
        .chartbaopo {
          width: 100%;
          height: 260px;
        }
        .chartbaopoName {
          font-size: 20px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
</style>