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

<template>
  <view class="fire-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      :activeStyle="{ color: '#000', fontWeight: 'bold' }"
      @click="NavChange"
    ></u-tabs>
    <view class="fire-content-box">
      <view class="search-area" v-if="PageCur != 2">
        <view class="search-l">
          <view class="search-label">
            <text class="req">*</text>
            <text>监测点 </text>
          </view>
          <view class="search-select" @click="changeSelect">
            <view class="select-val">{{ searchText }}</view>
            <view class="select-icon">
              <u-icon
                v-if="isShowSelect"
                name="arrow-down"
                color="#2b7cff"
                size="14"
              ></u-icon>
              <u-icon v-else name="arrow-up" color="#2b7cff" size="14"></u-icon>
            </view>
          </view>
          <view class="select-item" v-if="!isShowSelect">
            <view
              class="item-box"
              v-for="(ite, ind) in selectList"
              :key="ind"
              @click="choiceSelect(ite)"
              >{{ ite.name }}
            </view>
          </view>
        </view>
        <view class="search-r">
          <!-- <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" /> -->
          <u-icon name="warning-fill" color="#2b7cff" size="14"></u-icon>
          <text class="icon-text">低风险</text>
        </view>
      </view>
      <!-- 内因火灾-密闭监测 -->
      <view class="fire-content" v-if="PageCur == 0 && isShow">
        <fireDetailMb :detailMb="detailData"></fireDetailMb>
      </view>
      <!-- 内因火灾-采空区 -->
      <view class="fire-content" v-if="PageCur == 0 && !isShow">
        <fireDetailCkq :detailCkq="detailData"></fireDetailCkq>
      </view>
      <!-- 外因火灾 -->
      <view class="fire-content" v-if="PageCur == 1">
        <fireDetailOut :detailWy="detailData"></fireDetailOut>
      </view>
      <!-- 火灾指标 -->
      <view class="fire-content-zb" v-if="PageCur == 2">
        <fireDetailZb :detailZb="menuList"></fireDetailZb>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import fireDetailMb from "./fire-detail-mb.vue";
import fireDetailCkq from "./fire-detail-ckq.vue";
import fireDetailOut from "./fire-detail-out.vue";
import fireDetailZb from "./fire-detail-zb.vue";
export default {
  name: "fireDetail",
  components: {
    fireDetailMb,
    fireDetailCkq,
    fireDetailOut,
    fireDetailZb,
  },
  props: {},
  watch: {},
  data() {
    return {
      timer: "",
      isShow: false,
      // 必须是数字，u-tabs 内部用 === 比较下标，字符串 "0" 会导致默认选中项拿不到 activeStyle
      PageCur: 0,
      tabList: [
        { name: "内因火灾" },
        { name: "外因火灾" },
        { name: "火灾指标" },
      ],
      searchText: "",
      isShowSelect: true,
      selectList: [],
      menuList: [],
      detailData: {},
    };
  },
  beforeDestroy() {
    this.timer = null;
    clearTimeout(this.timer);
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    NavChange: function (item) {
      clearTimeout(this.timer);
      this.PageCur = item.index;
      if (this.PageCur == 1) {
        this.selectList = this.menuList.external.map((el) => {
          return {
            name: el.systemname,
            warn: "低风险",
            deviceID: el.id,
            strtype: el.strtype,
          };
        });
        this.searchText = this.selectList[0].name;
        this.getMonitor(this.selectList[0].deviceID, true);
      } else if (this.PageCur == 0) {
        this.selectList = this.menuList.internal.map((el) => {
          return {
            name: el.systemname,
            warn: "低风险",
            deviceID: el.id,
            strtype: el.strtype,
          };
        });
        this.searchText = this.selectList[0].name;
        this.getMonitor(this.selectList[0].deviceID, true);
      } else {
        this.selectList = [];
      }
    },
    changeSelect() {
      this.isShowSelect = !this.isShowSelect;
    },
    choiceSelect(val) {
      clearTimeout(this.timer);
      this.searchText = val.name;
      this.isShowSelect = true;
      if (this.searchText.indexOf("采空") != -1) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
      this.getMonitor(val.deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this;
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, "fire");
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },
    //获取内因火灾下拉选项数据
    getTabList() {
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: "fire" })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result;
              console.log(result, "result-------");
              this.menuList = result;
              this.selectList = result.internal.map((el) => {
                return {
                  name: el.systemname,
                  warn: "低风险",
                  deviceID: el.id,
                  strtype: el.strtype,
                };
              });
              this.searchText = this.selectList[0].name;
              this.getMonitor(this.selectList[0].deviceID, true);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取选项详情数据
    getSysWarnList(id, type) {
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result;
              this.detailData = data;
              console.log(this.detailData, "火灾详情数据----------");
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
  computed: {},
};
</script>

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

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

  .fire-content-box {
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    overflow-y: auto;

    .search-area {
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: #eaeefc;
      border-radius: 10px;
      margin-bottom: 10px;

      .search-l {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;

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

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

        .search-select {
          flex: 1;
          min-width: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 32px;
          margin-left: 8px;
          padding: 0px 8px;
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid #2b7cff;

          .select-val {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .select-icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
          }
        }

        .select-item {
          position: absolute;
          top: 40px;
          left: 58px;
          width: calc(100% - 58px);
          max-height: 150px;
          box-sizing: border-box;
          padding: 5px 10px;
          background-color: #fff;
          border: 1px solid #e5e9f2;
          border-radius: 5px;
          box-shadow: 0 2px 8px rgba(43, 124, 255, 0.12);
          overflow-y: auto;
          z-index: 10;

          .item-box {
            height: 26px;
            line-height: 26px;
            font-size: 13px;
            color: #333;
          }
        }
      }

      .search-r {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        margin-left: 8px;
        padding: 0px 8px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #2b7cff;
        background-color: #d2e0fc;
        .icon-style {
          width: 14px;
          height: 14px;
        }

        .icon-text {
          margin-left: 3px;
          font-size: 12px;
          color: #2b7cff;
        }
      }
    }
  }
}
</style>