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

<template>
  <view class="fire-detail">
    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @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">监测点：</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="#0eb4fc" size="14"></u-icon>
              <u-icon v-else name="arrow-up" color="#0eb4fc" 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="#0eb4fc" size="18"></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,
      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;
  box-sizing: border-box;

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

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

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

      .search-l {
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 10px;

        .search-label {
          font-size: 12px;
        }

        .search-select {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 150px;
          height: 26px;
          border-radius: 5px;
          border: 1px solid #0eb4fc;
          padding: 5px;
          box-sizing: border-box;
        }

        .select-item {
          position: absolute;
          bottom: -85px;
          left: 55px;
          width: 150px;
          height: 80px;
          background-color: #fff;
          border: 1px solid #eee;
          padding: 5px 10px;
          border-radius: 5px;
          overflow-y: auto;

          .item-box {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }

        }
      }

      .search-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80px;
        padding: 4px 10px;
        border-radius: 5px;
        background: #d4ecff;

        .icon-style {
          width: 14px;
          height: 14px;
        }

        .icon-text {
          font-size: 12px;
          font-weight: bold;
          color: #0eb4fc;
        }

      }
    }

  }


}
</style>