IOT/SourceCode/ui/fbs-ui_app2/pages_company/company.vue

<template>
	<view>
		<view class="img" @click="jumpMap"><image src="/static/image/map2.png"></image></view>
		<view class="no-data" v-if="!id"><image src="/static/image/no-data.png" mode="scaleToFill"></image></view>
		<view class="" v-if="id">
			<u-sticky bgColor="#fff">
				<u-tabs
					:list="tabList"
					:current="currentTabIndex"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)',
					}"
					:lineWidth="tabLineWidth"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)',
					}"
					@click="click"
					style="justify-content: center;"
				></u-tabs>
			</u-sticky>
			<scroll-view>
				<Charts v-if="currentTabIndex == 0" :companyId="id"></Charts>
				<Alarm v-if="currentTabIndex == 1" :companyId="id"></Alarm>
				<Info v-if="currentTabIndex == 2" :companyId="id"></Info>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { log } from "@/utils/base.js";
import Charts from "./components/charts.vue";
import Alarm from "./components/alarm.vue";
import Info from "./components/info.vue";

export default {
	components: {
		Charts,
		Info,
		Alarm,
	},
	data() {
		return {
			id: "",
			tabList: [],
			currentTabIndex: 0,
			tabLineWidth: 80,
			name: "",
		};
	},
	onLoad(opt) {
		this.id = opt.id ? decodeURIComponent(opt.id) : "";
		this.name = opt.name ? decodeURIComponent(opt.name) : "";
		if (this.name) {
			uni.setNavigationBarTitle({
				title: this.name,
			});
		}
		this.currentTabIndex = 0;
		log("===>COMPANY_ID_NAME", this.id, this.name, this.currentTabIndex);
		this.tabList.push(
			...[
				{
					id: "1",
					name: "商户概览",
					badge: {
						value: 0,
					},
				},
				{
					id: "2",
					name: "报警信息",
				},
				{
					id: "3",
					name: "商户档案",
				},
			]
		);
	},
	mounted() {
		this.currentTabIndex = 0;
	},
	methods: {
		jumpMap() {
			uni.navigateTo({
				url: `/pages_map/map?id=${this.id}&name=${this.name}`,
			});
		},
		click(item) {
			//console.log("item", item);
			this.currentTabIndex = item.index;
			//#ifdef MP-WEIXIN
			/* if (item.index > 0) {
				uni.navigateTo({
					url: `/pages_company/info?id=${this.id}&name=${this.name}&index=${item.index}`,
				});
			} */
			//#endif
		},
	},
};
</script>

<style lang="scss">
.no-data {
	width: 100%;
	height: 300px;
	margin-top: 10%;
	image {
		width: 100%;
		height: 100%;
	}
}
.img {
	position: absolute;
	right: 25px;
	top: 10px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	// background-color: $uni-color-primary;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	z-index: 1000;

	image {
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
}
</style>