<template>
  <div class="jyl">
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="jyl-con">
            <div class="lcl-title">监测示意图</div>
            <div class="">
              <img src="../../assets/images/jyl/02.png" alt="" />
            </div>
            <div class="lcl-title">24小时降雨量变化曲线</div>
            <div class="chart-jyl">
              <ChartsForLine :ChartsForLineParant="lineData" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="jyl-con">
            <div class="lcl-title">近7天预报</div>
            <div class="weather-jyl">
              <el-descriptions direction="vertical" :column="4" border>
                <el-descriptions-item label="今天">
                  <div>晴</div>
                  <div>22~30</div>
                </el-descriptions-item>
                <el-descriptions-item label="明天"
                  ><div>晴</div>
                  <div>22~30</div></el-descriptions-item
                >
                <el-descriptions-item label="后天" :span="2"
                  ><div>晴</div>
                  <div>22~30</div></el-descriptions-item
                >
                <el-descriptions-item label="03-25">
                  <div>晴</div>
                  <div>22~30</div>
                </el-descriptions-item>
                <el-descriptions-item label="03-26"
                  ><div>晴</div>
                  <div>22~30</div></el-descriptions-item
                >
                <el-descriptions-item label="03-27"
                  ><div>晴</div>
                  <div>22~30</div></el-descriptions-item
                >
              </el-descriptions>
            </div>
          </div>
          <div class="jyl-con">
            <div class="lcl-title">历史降雨量柱状图(近一周)</div>
            <div class="jyl-bar">
              <ChartsForLine :ChartsForLineParant="lineDataBar" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="jyl-con">
            <div class="lcl-title">历史数据</div>
            <div class="">
              <el-table
                :data="hisDatajyl"
                height="350"
                border
                stripe
                style="width: 100%"
                :header-cell-style="{
                  textAlign: 'center',
                  height: '20px',
                }"
                :row-style="{ height: '20px' }"
              >
                <el-table-column
                  align="center"
                  type="index"
                  width="50"
                  label="序号"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="createTime"
                  label="监测时间"
                />
                <el-table-column
                  align="center"
                  prop="monValue"
                  label="监测值(mm)"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="monStatus"
                  label="报警状态"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.monStatus == 0">正常</span>
                    <span v-if="scope.row.monStatus == 1">停止</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="jyl-con">
            <div class="lcl-title">报警数据列表</div>
            <div class="">
              <el-table
                :data="alarmData"
                height="350"
                border
                stripe
                style="width: 100%"
                :header-cell-style="{
                  textAlign: 'center',
                  height: '20px',
                }"
                :row-style="{ height: '20px' }"
              >
                <el-table-column
                  align="center"
                  type="index"
                  width="50"
                  label="序号"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="alarmTime"
                  label="监测时间"
                />
                <el-table-column
                  align="center"
                  prop="alarmValue"
                  label="监测值(mm)"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="alarmIfRes"
                  label="报警状态"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.alarmLevel == 1" style="color: red"
                      >红色报警</span
                    >
                    <span v-if="scope.row.alarmLevel == 2" style="color: orange"
                      >橙色报警</span
                    >
                    <span v-if="scope.row.alarmLevel == 3" style="color: yellow"
                      >黄色报警</span
                    >
                    <span v-if="scope.row.alarmLevel == 4" style="color: blue"
                      >蓝色报警</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
// import { api } from '@vue/api'

import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import {
  rainfallhistory,
  rainfallImage,
  nearlyWeekImage,
  dataAlarm,
} from "@/api/lclApi/lclapi";
export default {
  name: "jyl",
  components: {
    ChartsForLine,
  },
  props: [],
  data() {
    return {
      lineData: {
        name: "降雨量",
        chartId: "jyl",
        chartType: "line",
        color: ["#1890FF", "#05f57a", "#f40852"],
        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,
        legendItem: ["降雨量"],
        // xAxisData: that.allXDataForEchart,
        xAxisData: ["03/01", "03/02"],
        yData: [[2, 4]],
      },
      lineDataBar: {
        name: "降雨量",
        chartId: "jylbar",
        chartType: "line",
        color: ["#1890FF", "#f40852", "#f7af0b"],
        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,
        legendItem: ["降雨量"],
        // xAxisData: that.allXDataForEchart,
        xAxisData: ["03/01"],
        yData: [[2]],
      },
      hisDatajyl: [
        {
          createTime: "2023-03-20 08:26:17",
          updateTime: null,
          monStatus: 0,
          pointName: "+205马道 内部位移监测点",
          id: 1,
          monNumber: "降雨量",
          monValue: "0.41",
          monValueAll: "4",
          monAlarmStatus: 0,
          weekCreateTime: null,
        },
      ],
      alarmData: [],
    };
  },
  watch: {},
  created() {
    this.$nextTick(function () {
      this.lineData.yData = [[4, 7]];
      this.lineDataBar.chartType = "bar";
    });
  },
  mounted() {
    this.$nextTick(function () {
      this.getHisList();
      this.get24hList();
      this.getWeekList();
      this.getAlarm();
    });
  },
  methods: {
    //历史
    getHisList() {
      let that = this;
      rainfallhistory().then((res) => {
        if (res && res.code === 200 && res.rows) {
          that.hisDatajyl = res.rows;
        }
      });
    },
    //24h
    get24hList() {
      this.lineData.yData = [];
      rainfallImage().then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.lineData.xAxisData = res.rows.map((v) => v.weekCreateTime);
          this.lineData.yData.push(res.rows.map((v) => v.monValue));
        }
      });
    },
    //week
    getWeekList() {
      this.lineDataBar.yData = [];
      nearlyWeekImage().then((res) => {
        if (res && res.code === 200 && res.rows) {
          console.log(res.rows.map((v) => v.monValue));
          this.lineDataBar.xAxisData = res.rows.map((v) =>
            v.weekCreateTime.split("-").slice(1).join("/")
          );
          this.lineDataBar.yData.push(res.rows.map((v) => v.monValue));
        }
      });
    },
    //dataAlarm
    getAlarm() {
      let that = this;
      dataAlarm({ monType: 11 }).then((res) => {
        if (res && res.code === 200 && res.rows) {
          that.alarmData = res.rows;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.jyl {
  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;
      }
    }
    img {
      width: 100%;
      max-height: 350px;
      object-fit: scale-down;
    }
    .chart-jyl {
      width: 100%;
      height: 350px;
    }
    .weather-jyl,
    .jyl-bar {
      width: 100%;
      height: 350px;
      overflow: hidden;
    }
    .weather-jyl {
      padding-top: 30px;
    }
    ::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;
    }
  }
}
</style>