hb_sis_zhfx/src/views/Others/otherComponent.vue

<template>
	<tab :data="tabData" @select="select" />
	<el-row>
		<el-col :span="3">
			<el-tree :data="elTreeData.data[currTab]" :props="elTreeData.defaultProps" @node-click="handleNodeClick"></el-tree>
		</el-col>
		<el-col :span="21">
			<tab :data="tabData2[currTab]" @select="select2" />
			<Fj v-if="currTab == 0" :currTab="currTab2" height="85vh"/>
			<Syz v-if="currTab == 1" :currTab="currTab2" height="85vh"/>
		</el-col>
	</el-row>
</template>

<script>
	import Tab from "../../components/coms/tabs/tab.vue";
	import Fj from "./otherComponentFj.vue";
	import Syz from "./otherComponentSyz.vue";
	export default {
		components: {Tab,Fj,Syz},
		data() {
			return {
				currTab: 0,
				currTab2: 0,
				tabData: [{
						id: "0",
						text: "风机",
					},
					{
						id: "1",
						text: "升压站",
					}
				],
				tabData2: [
					[{
							id: "0",
							text: "位置",
						},
						{
							id: "1",
							text: "技术参数",
						},
						{
							id: "2",
							text: "预防性维护",
						},
						{
							id: "3",
							text: "设备历史",
						},
						{
							id: "4",
							text: "设备维护操作记录",
						}
					],
					[{
							id: "0",
							text: "位置2",
						},
						{
							id: "1",
							text: "技术参数",
						},
						{
							id: "2",
							text: "预防性维护",
						},
						{
							id: "3",
							text: "设备历史",
						},
						{
							id: "4",
							text: "设备维护操作记录",
						}
					],
				],
				elTreeData: {
					data: [[{
							label: "一级 1",
							children: [{
								label: "二级 1-1",
								children: [{
									label: "三级 1-1-1",
								}, ],
							}, ],
						},
						{
							label: "一级 2",
							children: [{
									label: "二级 2-1",
									children: [{
										label: "三级 2-1-1",
									}, ],
								},
								{
									label: "二级 2-2",
									children: [{
										label: "三级 2-2-1",
									}, ],
								},
							],
						},
						{
							label: "一级 3",
							children: [{
									label: "二级 3-1",
									children: [{
										label: "三级 3-1-1",
									}, ],
								},
								{
									label: "二级 3-2",
									children: [{
										label: "三级 3-2-1",
									}, ],
								},
							],
						},
					],
					[{
							label: "mw一级 1",
							children: [{
								label: "二级 1-1",
								children: [{
									label: "三级 1-1-1",
								}, ],
							}, ],
						},
						{
							label: "一级 2",
							children: [{
									label: "二级 2-1",
									children: [{
										label: "三级 2-1-1",
									}, ],
								},
								{
									label: "二级 2-2",
									children: [{
										label: "三级 2-2-1",
									}, ],
								},
							],
						},
						{
							label: "一级 3",
							children: [{
									label: "二级 3-1",
									children: [{
										label: "三级 3-1-1",
									}, ],
								},
								{
									label: "二级 3-2",
									children: [{
										label: "三级 3-2-1",
									}, ],
								},
							],
						},
					]],
					defaultProps: {
						children: "children",
						label: "label",
					},
				},
			};
		},
		methods: {
			select(data) {
				if (data.id != this.currTab) {
					this.currTab = parseInt(data.id);
					this.currTab2 = 0;
				}
			},
			select2(data) {
				console.log(data)
				this.currTab2 = parseInt(data.id);
			},
		},
		created() {

		},
		mounted() {},
	};
</script>

<style lang="less" scoped>

</style>