Vent-App/pages/warndata/components/device-detail.vue

<template>
  <view class="device-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      @click="NavChange"
    ></u-tabs>
    <view class="device-content">
      <view class="top-area">
        <view class="date-box" style="margin-bottom: 10px">
          <view class="date-text">开始时间:</view>
          <uni-datetime-picker
            :clear-icon="false"
            placeholder="请选择开始时间..."
            :disabled="isDisabled"
            type="datetime"
            v-model="datetimeStart"
            @change="changeStart"
          />
          <u-button
            type="primary"
            size="small"
            :disabled="isDisabled"
            @click="getSearch"
            >查询</u-button
          >
        </view>
        <view class="date-box">
          <view class="date-text">结束时间:</view>
          <uni-datetime-picker
            :clear-icon="false"
            placeholder="请选择结束时间..."
            :disabled="isDisabled"
            type="datetime"
            v-model="datetimeEnd"
            @change="changeEnd"
          />
          <u-button
            type="primary"
            size="small"
            :disabled="isDisabled"
            @click="getReset"
            >重置</u-button
          >
        </view>
      </view>
      <view class="bot-area">
        <view class="h-table">
          <view class="table-head" v-if="isDisabled">
            <view
              class="head-item"
              v-for="(item, index) in headList"
              :key="index"
              >{{ item.title }}</view
            >
          </view>
          <view class="table-headHis" v-else>
            <view
              class="head-item"
              v-for="(item, index) in headListHis"
              :key="index"
              >{{ item.title }}</view
            >
          </view>
          <view class="table-content" v-if="isDisabled">
            <view class="content-tr" v-for="(ite, ind) in tableData" :key="ind">
              <view class="content-td td">{{ ite.devicename }}</view>
              <view class="content-td td1">{{ ite.nwartype_dictText }}</view>
              <view class="content-td td2">{{ ite.starttime }}</view>
              <!-- <view class="content-td td3">{{ ite.endTime }}</view> -->
              <view class="content-td td3">{{ ite.wardescrip }}</view>
            </view>
          </view>
          <view class="table-contentHis" v-else>
            <view
              class="content-tr"
              v-for="(ite, ind) in tableDataHis"
              :key="ind"
            >
              <view class="content-td td">{{ ite.devicename }}</view>
              <view class="content-td td1">{{ ite.nwartype_dictText }}</view>
              <view class="content-td td2">{{ ite.starttime }}</view>
              <view class="content-td td3">{{ ite.warntime }}</view>
              <view class="content-td td4">{{ ite.wardescrip }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import uniDatetimePicker from "../../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
export default {
  name: "deviceDetail",
  components: {
    uniDatetimePicker,
  },
  props: {},
  watch: {},
  data() {
    return {
      isDisabled: true,
      datetimeStart: null,
      datetimeEnd: null,
      PageCur: "0",
      tabList: [{ name: "实时预警" }, { name: "报警历史" }],
      headList: [
        { title: "设备名称" },
        { title: "报警类型" },
        { title: "报警开始时间" },
        // { title: '报警持续时间' },
        { title: "报警描述" },
      ],
      headListHis: [
        { title: "设备名称" },
        { title: "报警类型" },
        { title: "开始时间" },
        { title: "持续时间" },
        { title: "报警描述" },
      ],
      tableData: [],
      tableDataHis: [],
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    NavChange: function (item) {
      this.PageCur = item.index;
      this.isDisabled = item.index ? false : true;
      if (item.index) {
        (this.datetimeStart = Date.now() - 1 * 24 * 3600 * 1000),
          (this.datetimeEnd = Date.now()),
          this.getHistoryList();
      } else {
        this.getTableList();
      }
    },
    //开始时间选项切换
    changeStart(date) {
      console.log(date, "date------------");
      this.datetimeStart = date;
    },
    //结束时间选项切换
    changeEnd(date) {
      this.datetimeEnd = date;
    },
    //获取实时监测列表数据
    getTableList() {
      new Promise((resolve, reject) => {
        api
          .warningList({ isok: 0 })
          .then((response) => {
            if (response.data.code == 200) {
              console.log(response.data, "设备详情数据-------");
              let data = response.data.result;
              this.tableData = data.list;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取历史监测列表数据
    getHistoryList() {
      new Promise((resolve, reject) => {
        api
          .historyList({
            pages: 1,
            size: 200,
            starttime_begin: this.datetimeStart,
            starttime_end: this.datetimeEnd,
          })
          .then((response) => {
            if (response.data.code == 200) {
              console.log(response.data, "设备历史详情数据-------");
              let data = response.data.result;
              this.tableDataHis = data.records;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //查询列表数据
    getSearch() {
      this.getHistoryList();
    },
    //重置列表数据
    getReset() {
      this.datetimeStart = Date.now() - 1 * 24 * 3600 * 1000;
      this.datetimeEnd = Date.now();
      this.getHistoryList();
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.device-detail {
  position: relative;
  box-sizing: border-box;

  .devic-box-tab {
    padding: 0px 10px !important;
  }

  .device-content {
    height: 704px;
    box-sizing: border-box;
    overflow-y: auto;

    .top-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;

      .date-box {
        width: 100%;
        display: flex;
        align-items: center;

        .date-text {
          font-size: 12px;
        }

        .uni-date {
          flex: 2.5;
          border: 1px solid #0eb4fc;
          border-radius: 5px;
          margin: 0px 5px;
        }

        .u-button {
          flex: 1;
          font-size: 12px;
        }
      }
    }

    .bot-area {
      width: 100%;
      height: calc(100% - 96px);
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;

      .h-table {
        width: 100%;
        height: 100%;
        border: 1px solid #0eb4fc;

        .table-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
          border-bottom: 1px solid #0eb4fc;
          padding: 0px 10px;
          box-sizing: border-box;

          .head-item {
            font-size: 12px;
            color: #0eb4fc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;

            &:nth-child(1) {
              width: 20%;
            }

            &:nth-child(2) {
              width: 20%;
            }

            &:nth-child(3) {
              width: 35%;
            }

            &:nth-child(4) {
              width: 25%;
            }
          }
        }

        .table-headHis {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
          border-bottom: 1px solid #0eb4fc;
          padding: 0px 10px;
          box-sizing: border-box;

          .head-item {
            font-size: 12px;
            color: #0eb4fc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;

            &:nth-child(1) {
              width: 15%;
            }

            &:nth-child(2) {
              width: 15%;
            }

            &:nth-child(3) {
              width: 30%;
            }

            &:nth-child(4) {
              width: 20%;
            }

            &:nth-child(5) {
              width: 20%;
            }
          }
        }

        .table-content {
          height: calc(100% - 36px);
          overflow-y: auto;

          .content-tr {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 10px;
            box-sizing: border-box;

            &:nth-child(odd) {
              background-color: #f3faff;
            }

            &:nth-child(even) {
              background-color: #e8f5ff;
            }

            .content-td {
              height: 100%;
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }

            .td {
              width: 20%;
            }

            .td1 {
              width: 20%;
            }

            .td2 {
              width: 35%;
            }

            .td3 {
              width: 25%;
            }
          }
        }

        .table-contentHis {
          height: calc(100% - 36px);
          overflow-y: auto;

          .content-tr {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 10px;
            box-sizing: border-box;

            &:nth-child(odd) {
              background-color: #f3faff;
            }

            &:nth-child(even) {
              background-color: #e8f5ff;
            }

            .content-td {
              height: 100%;
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }

            .td {
              width: 15%;
            }

            .td1 {
              width: 15%;
            }

            .td2 {
              width: 30%;
            }

            .td3 {
              width: 20%;
            }

            .td4 {
              width: 20%;
            }
          }
        }
      }
    }
  }
}

::v-deep .uni-date__x-input {
  height: 28px !important;
  line-height: 28px !important;
}
</style>