<template>
  <div class="jyl">
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <div
            v-for="item in lineData"
            :key="item.id"
            class="jyl-con jyl-con-left"
          >
            <div class="lcl-title">{{ item.name }}</div>
            <div class="chart-jyl">
              <ChartsForLine :ChartsForLineParant="item" />
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="jyl-con jyl-con-left">
            <div class="lcl-title">监测示意图</div>
            <div class="">
              <img src="../../assets/images/PM/02.png" alt="" />
            </div>
          </div>
          <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="monName" label="监测项" />
                <el-table-column
                  align="center"
                  prop="createTime"
                  label="监测时间"
                />
                <el-table-column align="center" prop="monValue" label="监测值">
                  <template slot-scope="scope">
                    <span
                      >{{ scope.row.monValue }}（{{ scope.row.monUnit }}）</span
                    >
                  </template>
                </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="monName" label="监测项" />
                <el-table-column
                  align="center"
                  prop="alarmTime"
                  label="监测时间"
                />
                <el-table-column align="center" prop="monValue" label="监测值">
                  <template slot-scope="scope">
                    <span
                      >{{ scope.row.monValue }}（{{ scope.row.monUnit }}）</span
                    >
                  </template>
                </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 {
  meteorologicalhistory,
  meteorologicalimage,
  dataAlarm,
} from "@/api/lclApi/lclapi";
export default {
  name: "jyl",
  components: {
    ChartsForLine,
  },
  props: [],
  data() {
    return {
      lineData: [
        {
          name: "+205马道 地下水位监测点",
          chartId: "radar-chart",
          color: ["#f7af0b", "#05f57a", "#f40852"],
          value: [
            {
              name: "1-1测斜仪",
              value: [
                {
                  createTime: "2023-03-11 14:05:51",
                  updateTime: "2023-03-11 08:37:51",
                  monStatus: 0,
                  pointName: "+205马道 地下水位监测点",
                  id: 8,
                  monNumber: "1-1测斜仪",
                  monName: "1-1测斜仪",
                  monValueA: "0.1",
                  monValueB: "0.11",
                  monAlarmStatus: 0,
                  monDept: "10m",
                  disValue: "0.149",
                },
              ],
            },
          ],
        },
      ],
      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.getChartList();
      this.getAlarm();
    });
  },
  methods: {
    //历史
    getHisList() {
      let that = this;
      meteorologicalhistory().then((res) => {
        if (res && res.code === 200 && res.rows) {
          that.hisDatajyl = res.rows;
        }
      });
    },
    //24h
    get24hList() {
      this.lineData.yData = [];
      meteorologicalimage().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
    getChartList() {
      this.lineDataBar.yData = [];
      meteorologicalimage()
        .then((res) => {
          if (res && res.code === 200 && res.rows) {
            this.lineData = 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));
          }
        })
        .then(() => {
          var yFData = this.lineData.map((v) => v.value);
          var allYdata = [];
          var sonData = [];
          for (let i = 0; i < yFData.length; i++) {
            var yDataitem = [];
            for (let j = 0; j < yFData[i].length; j++) {
              yDataitem.push(yFData[i][j].value);
            }
            sonData.push(yDataitem);
          }
          for (let i = 0; i < sonData.length; i++) {
            var hhh = [];
            for (let j = 0; j < sonData[i].length; j++) {
              hhh.push(sonData[i][j].map((v) => v.disValue));
            }
            allYdata.push(hhh);
          }

          this.allYDataForEchart = allYdata;
        })
        .then(() => {
          let that = this;
          this.lineData = this.lineData.map((v, k) => {
            console.log(v.value[0]);
            return {
              name: v.name,
              chartId: `nbwy-${k + 1}`,
              color: ["#f7af0b", "#05f57a", "#f40852"],
              chartType: "line",
              axisLabel: "#0562AF",
              itemColor: "rgba(42,148,226,1)",
              unit: v.value[0].value[0].monUnit,
              bgc: "#fff",
              grid: {
                left: "10%",
                right: "5%",
                bottom: "10%",
                top: "15%",
                z: 22,
              },
              showlegend: true,
              legendItem: v.value.map((item) => item.name),
              // xAxisData: that.allXDataForEchart,
              xAxisData: v.value[0].value.map((item, kk) => item.createTime),
              yData: that.allYDataForEchart[k],
            };
          });
        });
    },
    //dataAlarm
    getAlarm() {
      let that = this;
      dataAlarm({ monType: 12 }).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%;
    .jyl-con {
      width: 100%;
      height: 380px;
      overflow: hidden;
    }
    .jyl-con-left {
      float: left;
      width: 50%;
      height: 380px;
    }
    .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%;
      height: 320px;
      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>