index.vue

<template>
  <div class="data-watch">
    <el-card class="box-card">
      <div class="lcl-title">实时预报警</div>
      <div class="mt20">
        <el-select
          v-model="queryParams.monType"
          placeholder="请选择设备类型"
          class="mr10"
          clearable
          @change="divSelectChange"
        >
          <el-option
            v-for="item in SelectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </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" type="index" width="50" label="序号">
          </el-table-column>
          <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="monDept" label="深度">
          </el-table-column>
          <el-table-column align="center" prop="monValueA" label="监测值-a">
          </el-table-column>
          <el-table-column align="center" prop="monValueB" label="监测值-b">
          </el-table-column>
          <el-table-column align="center" prop="monDept" 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-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>
        <!-- <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 { dataAlarmreal, 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: 999999,
        monType: null,
      },
      // 总条数
      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,
      },
      SelectOptions: [
        { label: "表面位移", value: "1" },
        { label: "内部位移", value: "2" },
        { label: "地表裂缝", value: "3" },
        { label: "支护结构", value: "4" },
        { label: "土(墙)体土压力", value: "5" },
        { label: "地下水位", value: "6" },
        { label: "渗水压力", value: "7" },
        { label: "爆破振动", value: "8" },
        { label: "智能监测机器人", value: "9" },
        { label: "降雨量", value: "10" },
        { label: "地面隆起", value: "11" },
      ],
    };
  },
  created() {
    this.dialogVisibleChart = true;
  },
  mounted() {
    this.$nextTick(() => {
      this.dialogVisibleChart = false;
      // this.monDicData();
      this.getList();
    });
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {},
    // getRealList() {
    //   displacementreal().then((res) => {
    //     if (res && res.code === 200 && res.rows) {
    //       this.NbwyTableData = res.rows;
    //       this.total = res.total;
    //     }
    //   });
    // },
    //当前表格
    getList() {
      let that = this;
      dataAlarmreal(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 = that.NbwyTableData.map(
      //     (v) => v.monName
      //   );
      //   that.chartAllData.xAxisData = that.NbwyTableData.map(
      //     (v) => v.createTime
      //   );
      //   let aaa = that.NbwyTableData.map((v) => Number(v.disValue));
      //   that.chartAllData.yData.push(aaa);
      //   // for(let i=0;i<that.chartAllData.length;i++){
      //   //   that.chartAllData.yData.push
      //   // }
      // });
    },
    // 数据监测: 设备管理
    monDicData() {
      monDic({ monType: 2 }).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.deviceSelectList = res.rows;
        }
      });
    },
    //下拉框
    divSelectChange(e) {
      console.log(e);
      this.queryParams.monType = e;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    makeChart() {
      if (this.queryParams.monType) {
        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>