Vent-App/pages/device/index.vue

<template>
  <view class="devic-box">
    <!-- 建议放在外层 -->
    <u-navbar
      :bgStatusImage="backPic0"
      :bgImage="backPic"
      title="设备监测"
      @leftClick="onLeftClick"
      :safeAreaInsetTop="true"
      :fixed="true"
      height="50px"
      bgColor="transparent"
      titleStyle="fw600 fs-18"
      leftIconColor="#303133"
    >
      <view class="u-nav-slot" slot="left">
        <!-- 菜单选择页显示三横线，选完设备类型进入列表后显示返回键 -->
        <view v-if="menushow" class="menu-icon">
          <view class="menu-line"></view>
          <view class="menu-line"></view>
          <view class="menu-line"></view>
        </view>
        <u-icon v-else name="arrow-left" size="20" color="#303133"></u-icon>
      </view>
    </u-navbar>
    <!-- 左上角三横线展开的菜单 -->
    <view
      v-if="navMenuShow"
      class="nav-menu-mask"
      @tap="navMenuShow = false"
    ></view>
    <view v-if="navMenuShow" class="nav-menu-panel">
      <view
        class="nav-menu-item"
        v-for="(item, index) in navMenuList"
        :key="index"
        @tap="navMenuClick(item)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="devic-box-content">
      <view v-if="menushow" class="menupage">
        <DeviceMenu @menuClick="menuClick"></DeviceMenu>
      </view>

      <!-- <u-tabs v-if="!menushow" class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs> -->
      <u-tabs
        v-if="!menushow"
        class="devic-box-tab"
        :current="pageCurNew"
        :list="tabListNew"
        activeStyle="color: #000000; font-weight: 700;"
        @click="NavChange"
      ></u-tabs>
      <!-- 安全监控：设备类型筛选（默认一氧化碳） -->
      <view v-if="!menushow && isSafeMonitor" class="devic-box-filter">
        <view class="filter-row" @click="openDataTypePicker">
          <text class="filter-label">设备类型</text>
          <text class="filter-value">{{
            dataTypeName || "请选择设备类型"
          }}</text>
          <u-icon
            :name="dataTypeShow ? 'arrow-up' : 'arrow-down'"
            size="12"
            color="#2b7cff"
          ></u-icon>
        </view>
        <!-- 下拉面板 -->
        <view v-if="dataTypeShow" class="filter-dropdown">
          <view class="filter-dropdown-scroll">
            <view class="filter-option-loading" v-if="!dataTypeLoaded">
              <text class="filter-option-text">加载中...</text>
            </view>
            <view
              class="filter-option"
              :class="{ active: item.code === dataTypeCode }"
              v-for="item in dataTypeOptions"
              :key="item.code"
              @click.stop="onDataTypeSelect(item)"
            >
              <text class="filter-option-text">{{ item.name }}</text>
              <u-icon
                v-if="item.code === dataTypeCode"
                name="checkbox-mark"
                size="12"
                color="#2b7cff"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <!-- 点空白处关闭下拉 -->
      <view
        v-if="dataTypeShow"
        class="filter-dropdown-mask"
        @touchmove.stop.prevent
        @click="dataTypeShow = false"
      ></view>
      <view v-if="!menushow" class="devic-box-list">
        <!-- <home cur="home" :showColum="showColum" v-if="pageCurNew == '0' && !menushow" :key="0" :deviceType="deviceType"
          @setMenushow="setMenushow"></home> -->
        <home
          ref="homeRef"
          cur="home"
          :showColum="showColum"
          v-if="!menushow"
          :key="0"
          :deviceType="deviceType"
          :filterParams="dataTypeFilterParams"
          @setMenushow="setMenushow"
        ></home>
        <!-- <history :key="1" cur="history" :showColum="showColum" :deviceType="deviceType"
          v-if="PageCur == '1' && !menushow" @setMenushow="setMenushow"></history>
        <operation :key="2" :showColum="showColum" :deviceType="deviceType" cur="operation"
          v-if="PageCur == '2' && !menushow" @setMenushow="setMenushow"></operation> -->
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import DeviceMenu from "./devicemenu/devicemenu.vue";
export default {
  components: {
    DeviceMenu,
  },
  data() {
    return {
      // backPic0: "url(/static/topnavbar0.png)",
      // backPic: "url(../../static/topnavbar.png)",
      backPic0: "",
      backPic: "",
      // PageCur: "0",
      pageCurNew: "",
      showColum: {},
      menushow: true,
      deviceType: "",
      deviceTypeName: "", //当前设备分类名称
      //左上角三横线菜单
      navMenuShow: false,
      navMenuList: [
        // component：切换到外层 index.vue 的 tab 组件；url：跳转独立页面
        { name: "瓦斯日报", component: "gasreport" },
      ],
      // tabList: [
      //   {
      //     name: "设备监测",
      //   },
      //   {
      //     name: "历史数据",
      //   },
      //   {
      //     name: "操作记录",
      //   },
      // ],
      tabListNew: [],
      //安全监控的设备类型筛选（默认一氧化碳 0004）
      dataTypeList: [],
      dataTypeCode: "0004",
      dataTypeName: "一氧化碳",
      dataTypeShow: false,
      dataTypeLoaded: false,
      dataTypeLoading: false,
    };
  },
  computed: {
    //当前是否为安全监控分类（id 或名称两种方式兼容）
    isSafeMonitor() {
      const id = String(this.deviceType || "").toLowerCase();
      const name = String(this.deviceTypeName || "");
      return id.indexOf("safetymonitor") > -1 || name.indexOf("安全监控") > -1;
    },
    //下拉选项：“全部” + 接口返回的设备类型
    dataTypeOptions() {
      return [{ code: "", name: "全部" }].concat(this.dataTypeList || []);
    },
    //下发给列表的筛选条件：全部时传空对象
    dataTypeFilterParams() {
      if (!this.isSafeMonitor) {
        return null;
      }
      return this.dataTypeCode ? { dataTypeName: this.dataTypeCode } : {};
    },
  },
  watch: {
    //切到安全监控分类时拉取设备类型下拉项
    deviceType() {
      this.ensureDataTypeOptions();
    },
    deviceTypeName() {
      this.ensureDataTypeOptions();
    },
  },
  created() {
    this.getShowColum();
  },
  onLoad: function () {
    // this.PageCur = "0";
  },
  onShow() {
    // 从设备详情页返回时，恢复子组件的轮询并立即刷新数据
    this.$nextTick(() => {
      const homeRef = this.$refs.homeRef;
      if (homeRef && typeof homeRef.restartTimer === "function") {
        homeRef.restartTimer();
      }
    });
  },
  methods: {
    // 是安全监控分类时才去拉设备类型下拉项
    ensureDataTypeOptions() {
      if (this.isSafeMonitor) {
        this.loadDataTypeOptions();
      }
    },
    // 安全监控：拉取设备类型下拉项，默认选中一氧化碳
    loadDataTypeOptions() {
      if (this.dataTypeLoaded || this.dataTypeLoading) {
        return;
      }
      this.dataTypeLoading = true;
      api
        .getCodeDict({ devicetype: "safetymonitor", code: "dataTypeName" })
        .then((response) => {
          const raw = response && response.data;
          const list = Array.isArray(raw)
            ? raw
            : raw && Array.isArray(raw.result)
            ? raw.result
            : [];
          this.dataTypeList = list;
          this.dataTypeLoaded = true;
          // 默认选中一氧化碳，找不到就取第一项
          const target =
            list.find((item) => item.code === this.dataTypeCode) || list[0];
          if (target) {
            this.dataTypeCode = target.code;
            this.dataTypeName = target.name;
          }
        })
        .catch(() => {})
        .then(() => {
          this.dataTypeLoading = false;
        });
    },
    openDataTypePicker() {
      // 下拉浮层：选项未加载完时先拉一次
      if (!this.dataTypeLoaded) {
        this.loadDataTypeOptions();
      }
      this.dataTypeShow = !this.dataTypeShow;
    },
    onDataTypeSelect(item) {
      this.dataTypeShow = false;
      if (!item) {
        return;
      }
      // code 为空表示“全部”
      this.dataTypeCode = item.code || "";
      this.dataTypeName = item.name || "全部";
    },
    NavChange: function (item) {
      console.log("item", item);
      // this.PageCur = item.index;
      this.navMenuShow = false;
      this.deviceType = item.id;
      this.deviceTypeName = item.name || "";
      this.menushow = false;
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    //左上角图标：菜单选择页展开三横线菜单，已进入列表页则返回菜单选择
    onLeftClick() {
      if (this.menushow) {
        this.toggleNavMenu();
      } else {
        this.navMenuShow = false;
        this.menushow = true;
      }
    },
    //左上角三横线菜单：展开/收起
    toggleNavMenu() {
      this.navMenuShow = !this.navMenuShow;
    },
    //点击菜单项：优先切换外层 tab 组件，否则跳转独立页面
    navMenuClick(item) {
      this.navMenuShow = false;
      if (!item) {
        return;
      }
      if (item.component) {
        this.$emit("changePage", item.component);
        return;
      }
      if (!item.url) {
        return;
      }
      uni.navigateTo({
        url: item.url,
        fail: () => {
          uni.showToast({ title: "页面不存在", icon: "none" });
        },
      });
    },
    menuClick(params) {
      debugger;
      this.navMenuShow = false;
      let data = params.menu
        .map((item) => item.children)
        .flatMap((i) => i)
        .map((v, index) => {
          return {
            name: v.itemText,
            id: v.itemValue,
            index: index,
          };
        });
      this.deviceType = params.id;
      this.tabListNew = data;
      const cur = this.tabListNew.find((item) => item.id == params.id);
      this.deviceTypeName = (cur && cur.name) || "";
      this.pageCurNew = cur ? cur.index : 0;
      console.log("data", data);
      this.menushow = false;
    },
    getShowColum() {
      new Promise((resolve, reject) => {
        api
          .getShowColum({})
          .then((response) => {
            if (response.data.code == 200) {
              var showlist = response.data.result;
              this.$store.commit("SET_SHOWCOLUM", showlist);
              this.showColum = showlist;
              console.log("showColum", this.showColum);
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    setMenushow(params) {
      if (params) {
        this.menushow = params.menushow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .devic-box {
//   // background: #f4f7fd;
// }

.devic-box-content {
  height: calc(100vh - 101px - var(--status-bar-height, 0px));
  margin-top: calc(50px + var(--status-bar-height, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // background: #f4f7fd;
}

/* u-tabs 固定在顶部，只有下方列表区域滚动 */
.devic-box-tab {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* 安全监控的设备类型筛选条，固定在 tab 下方 */
.devic-box-filter {
  position: relative;
  z-index: 21;
  flex-shrink: 0;
  margin: 0px 15px;
  padding: 0px 16rpx;
  height: 72rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  background-color: #f9f9fb;
  border: 1rpx solid #fff;

  .filter-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }

  .filter-label {
    flex-shrink: 0;
    font-size: 26rpx;
    color: #303133;
    margin-right: 12rpx;
  }

  .filter-value {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #2b7cff;
    text-align: right;
    margin-right: 8rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 下拉面板：贴着筛选条下方展开，限制高度内部滚动 */
  .filter-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8rpx;
    max-height: 420rpx;
    background-color: #ffffff;
    border: 1rpx solid #e6ecf8;
    border-radius: 10rpx;
    box-shadow: 0 8rpx 24rpx rgba(43, 124, 255, 0.12);
    overflow: hidden;
    box-sizing: border-box;
  }

  .filter-dropdown-scroll {
    max-height: 420rpx;
    overflow-y: auto;
  }

  .filter-option,
  .filter-option-loading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 72rpx;
    padding: 0px 16rpx;
    box-sizing: border-box;
  }

  .filter-option-text {
    font-size: 26rpx;
    color: #303133;
  }

  .filter-option.active,
  .filter-option:active {
    background-color: #f2f7ff;
  }

  .filter-option.active .filter-option-text {
    color: #2b7cff;
    font-weight: 600;
  }
}

/* 下拉展开时的透明遮罩，点空白关闭 */
.filter-dropdown-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: transparent;
}

.devic-box-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.menupage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  // background: #f4f7fd;
}

::v-deep .u-tabs__wrapper {
  margin: 0px 15px !important;
}

//左上角三横线图标
.menu-icon {
  width: 18px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .menu-line {
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background-color: #303133;
  }
}

//三横线展开的下拉菜单
.nav-menu-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 998;
}

.nav-menu-panel {
  position: fixed;
  left: 10px;
  top: calc(var(--status-bar-height) + 54px);
  width: 140px;
  padding: 4px 0px;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 999;

  .nav-menu-item {
    height: 44px;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #303133;

    &:active {
      background-color: #f2f6ff;
    }

    & + .nav-menu-item {
      border-top: 1px solid #f0f2f5;
    }
  }
}
</style>