IOT/UI/IOTADMIN.VUE/src/views/iot/device/index.vue

<script setup lang="ts" name="Device">
import apis from "@a"
import Gateway from "./_gateway.vue"
import Meter from "./_meter.vue"
import appStore from "@s"

const orgTreeRef = ref()
const gatewayRef = ref()
const meterRef = ref()
const orgOptions = ref<any[]>([])
const orgId = ref(0)
const id = ref(0)

function handleQueryGateway() {
	if (orgId.value) {
		id.value = 0
		gatewayRef.value?.query(orgId.value)
	}
}

function handleQueryMeter(v: number) {
	id.value = v
}
function handleCreateMeter(v: number) {
	meterRef.value?.createMeter(v)
}

function init() {
	apis.sysApi.orgTreeSelect(appStore.authStore.user.orgId).then((res) => {
		orgOptions.value = res.data
	})
}

onMounted(init)
</script>

<template>
	<div class="app-container d-flex flex-column">
		<el-row :gutter="10">
			<el-col v-if="orgOptions.length > 0 && orgOptions[0]?.children?.length" :span="4">
				<OrgTree
					ref="orgTreeRef"
					v-model="orgId"
					:data="orgOptions"
					@node-click="handleQueryGateway"></OrgTree>
			</el-col>
			<el-col :span="orgOptions.length > 0 && orgOptions[0]?.children?.length ? 20 : 24">
				<div class="w-100" style="height: calc(100vh - 140px)">
					<div class="w-100" style="height: 65%">
						<Gateway
							ref="gatewayRef"
							@create-meter="handleCreateMeter"
							@query-meter="handleQueryMeter" />
					</div>
					<div class="w-100" style="height: 35%">
						<Meter ref="meterRef" :id="id"></Meter>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>