Vent-App/pages/device/index.vue

<template>
  <view class="devic-box">
    <!-- 建议放在外层 -->
    <u-navbar :bgStatusImage="backPic0" :bgImage="backPic" title="设备监测" @leftClick="devicemenuShow"
      :safeAreaInsetTop="true" :fixed="true" height="50px" bgColor="transparent" titleStyle="fw600 fs-18"
      leftIconColor="#303133">
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20"> </u-icon>
      </view>
    </u-navbar>
    <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"
        @click="NavChange"></u-tabs>
      <view class="">
        <!-- <home cur="home" :showColum="showColum" v-if="pageCurNew == '0' && !menushow" :key="0" :deviceType="deviceType"
          @setMenushow="setMenushow"></home> -->
        <home 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: "",
      // tabList: [
      //   {
      //     name: "设备监测",
      //   },
      //   {
      //     name: "历史数据",
      //   },
      //   {
      //     name: "操作记录",
      //   },
      // ],
      tabListNew: [],
    };
  },
  created() {
    this.getShowColum();
  },
  onLoad: function () {
    // this.PageCur = "0";
  },
  methods: {
    NavChange: function (item) {
      console.log("item", item);
      // this.PageCur = item.index;
      this.deviceType = item.id;
      this.menushow = false;
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    menuClick(params) {
      debugger;
      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);
  margin-top: 50px;
  overflow-y: auto;
  // background: #f4f7fd;
}

.menupage {
  min-height: 100%;
  // background: #f4f7fd;
}

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