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:'',
	  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;
	  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>