Vent-App/pages/device/index.vue

<template>
  <view>
    <!-- 建议放在外层 -->
    <u-navbar
      title="设备中心"
      :bgImage="backPic"
      :bgStatusImage="backPic0"
      @leftClick="devicemenuShow"
      :safeAreaInsetTop="true"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="list" size="20"> </u-icon>
      </view>
    </u-navbar>

    <view v-if="menushow" class="menupage">
      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
    </view>
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      @click="NavChange"
    ></u-tabs>
    <view class="">
      <home
        cur="home"
        :showColum="showColum"
        v-if="PageCur == '0' && !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>
</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)",
      PageCur: "0",
      showColum: {},
      menushow: false,
      deviceType: "gate",
      tabList: [
        {
          name: "设备监测",
        },
        {
          name: "历史数据",
        },
        {
          name: "操作记录",
        },
      ],
    };
  },
  created() {
    this.getShowColum();
  },
  onLoad: function () {
    this.PageCur = "0";
  },
  methods: {
    NavChange: function (item) {
      this.PageCur = item.index;
      this.menushow = false;
    },
    devicemenuShow(e) {
      this.menushow = !this.menushow;
    },
    menuClick(id) {
      // debugger
      // this.TabCur = id;
      this.deviceType = id;
      console.log(this.deviceType, "设备类型");
      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;
            } 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-tab {
  // margin-top: 50px;
}
</style>