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

<template>
  <view class="device-detail">
    <view class="device-tab">
      <u-tabs
        class="devic-box-tab"
        :current="PageCur"
        :list="tabList"
        :activeStyle="activeTabStyle"
        :inactiveStyle="inactiveTabStyle"
        :itemStyle="tabItemStyle"
        lineColor="#2b7cff"
        :lineWidth="24"
        :lineHeight="3"
        @click="NavChange"
      ></u-tabs>
    </view>
    <view class="device-content">
      <view class="filter-card" v-if="PageCur != 0">
        <view class="filter-row">
          <view class="filter-label">
            <text class="req">*</text>
            <text>开始时间</text>
          </view>
          <uni-datetime-picker
            class="filter-picker"
            :clear-icon="false"
            placeholder="请选择开始时间"
            :disabled="isDisabled"
            type="datetime"
            v-model="datetimeStart"
            @change="changeStart"
          />
          <view
            class="filter-btn btn-primary"
            :class="{ 'is-disabled': isDisabled }"
            @click="getSearch"
            >查询</view
          >
        </view>
        <view class="filter-row">
          <view class="filter-label">
            <text class="req">*</text>
            <text>结束时间</text>
          </view>
          <uni-datetime-picker
            class="filter-picker"
            :clear-icon="false"
            placeholder="请选择结束时间"
            :disabled="isDisabled"
            type="datetime"
            v-model="datetimeEnd"
            @change="changeEnd"
          />
          <view
            class="filter-btn btn-plain"
            :class="{ 'is-disabled': isDisabled }"
            @click="getReset"
            >重置</view
          >
        </view>
      </view>
      <view class="bot-area">
        <view class="h-table">
          <view class="table-head">
            <view
              class="head-item"
              v-for="(item, index) in currentHead"
              :key="index"
              :style="{ width: item.width }"
              >{{ item.title }}</view
            >
          </view>
          <view class="table-content">
            <view
              class="content-tr"
              v-for="(ite, ind) in currentData"
              :key="ind"
            >
              <view
                class="content-td"
                v-for="(col, ci) in currentHead"
                :key="ci"
                :style="{ width: col.width }"
                >{{ cellText(ite, col.key) }}</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: "报警历史" }],
      tabItemStyle: { height: "46px", padding: "0 24px" },
      activeTabStyle: {
        color: "#000000",
        fontWeight: "bold",
        fontSize: "15px",
      },
      inactiveTabStyle: { color: "#666666", fontSize: "15px" },
      headList: [
        { title: "设备名称", key: "devicename", width: "20%" },
        { title: "报警类型", key: "nwartype_dictText", width: "20%" },
        { title: "报警开始时间", key: "starttime", width: "34%" },
        { title: "报警描述", key: "wardescrip", width: "26%" },
      ],
      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();
    },
    //表格单元格文本
    cellText(item, key) {
      const value = item ? item[key] : "";
      return value === null || value === undefined || value === ""
        ? "--"
        : value;
    },
  },
  computed: {
    //当前表格表头
    currentHead() {
      return this.headList;
    },
    //当前表格数据
    currentData() {
      return this.isDisabled ? this.tableData : this.tableDataHis;
    },
  },
};
</script>

<style lang="scss" scoped>
.device-detail {
  position: relative;
  // 撑满父容器高度：tab 固定在顶部，滚动区域在 tab 下面
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;

  .device-tab {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9f9fb;
    border-radius: 5px;
    border: 1px solid #fff;
    margin-bottom: 10px;
  }

  .device-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow-y: auto;

    /* 查询条件卡片 */
    .filter-card {
      flex-shrink: 0;
      width: 100%;
      padding: 12px 10px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 10px;

      .filter-row {
        width: 100%;
        display: flex;
        align-items: center;

        & + .filter-row {
          margin-top: 10px;
        }

        .filter-label {
          flex-shrink: 0;
          width: 64px;
          display: flex;
          align-items: center;
          font-size: 13px;
          color: #333;

          .req {
            color: #f5222d;
            font-size: 13px;
            margin-right: 3px;
          }
        }

        .filter-picker {
          flex: 1;
          min-width: 0;
        }

        .filter-btn {
          flex-shrink: 0;
          width: 64px;
          height: 32px;
          margin-left: 8px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          font-size: 13px;
        }

        .btn-primary {
          color: #fff;
          background: linear-gradient(90deg, #3f8cff 0%, #2b7cff 100%);
        }

        .btn-plain {
          color: #2b7cff;
          background-color: #fff;
          border: 1px solid #2b7cff;
        }

        .is-disabled {
          opacity: 0.6;
        }
      }
    }

    .bot-area {
      flex: 1;
      min-height: 0;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(43, 124, 255, 0.08);

      .h-table {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #bcd7fb;
        border-radius: 4px;
        overflow: hidden;

        .table-head {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          height: 38px;
          background-color: transparent;
          border-bottom: 1px solid #bcd7fb;
          box-sizing: border-box;

          .head-item {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            font-size: 12px;
            font-weight: 600;
            color: #1a6dff;
            text-align: center;
            border-right: 1px solid #bcd7fb;

            &:last-child {
              border-right: none;
            }
          }
        }

        .table-content {
          flex: 1;
          min-height: 0;
          overflow-y: auto;

          .content-tr {
            display: flex;
            align-items: stretch;
            min-height: 44px;
            box-sizing: border-box;
            border-bottom: 1px solid #cfe1fa;

            &:last-child {
              border-bottom: none;
            }

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

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

            .content-td {
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              padding: 6px 4px;
              font-size: 12px;
              color: #333;
              text-align: center;
              word-break: break-all;
              border-right: 1px solid #cfe1fa;

              &:last-child {
                border-right: none;
              }
            }
          }
        }
      }
    }
  }
}

/* 日期选择器样式覆盖 */
::v-deep .uni-date-editor--x {
  box-sizing: border-box;
  height: 32px;
  border-radius: 4px;
  border-color: #dcdfe6;
  background-color: #fff;
}

::v-deep .uni-date-x {
  flex-direction: row-reverse;
  height: 32px;
  background-color: transparent;
}

::v-deep .uni-date-x .icon-calendar {
  padding-left: 0;
  padding-right: 6px;
}

::v-deep .uni-date__x-input {
  height: 32px !important;
  line-height: 32px !important;
  padding-left: 8px !important;
  font-size: 12px !important;
  color: #333 !important;
  text-align: left;
}
</style>