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>