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" 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"
          @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: "",
      //左上角三横线菜单
      navMenuShow: false,
      navMenuList: [
        // component：切换到外层 index.vue 的 tab 组件；url：跳转独立页面
        { name: "瓦斯日报", component: "gasreport" },
      ],
      // tabList: [
      //   {
      //     name: "设备监测",
      //   },
      //   {
      //     name: "历史数据",
      //   },
      //   {
      //     name: "操作记录",
      //   },
      // ],
      tabListNew: [],
    };
  },
  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: {
    NavChange: function (item) {
      console.log("item", item);
      // this.PageCur = item.index;
      this.navMenuShow = false;
      this.deviceType = item.id;
      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;
      this.pageCurNew = this.tabListNew.find(
        (item) => item.id == params.id
      ).index;
      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;
}

.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>