|  | @@ -0,0 +1,78 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="page">
 | 
	
		
			
				|  |  | +    <el-card shadow="nover">
 | 
	
		
			
				|  |  | +      <el-form inline>
 | 
	
		
			
				|  |  | +        <el-form-item label="选择产品" prop="productKey">
 | 
	
		
			
				|  |  | +          <el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
 | 
	
		
			
				|  |  | +            <el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
 | 
	
		
			
				|  |  | +              <span style="float: left">{{ item.name }}</span>
 | 
	
		
			
				|  |  | +              <span style="float: right; font-size: 13px">{{ item.key }}</span>
 | 
	
		
			
				|  |  | +            </el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <el-form-item label="选择设备" prop="deviceKey">
 | 
	
		
			
				|  |  | +          <el-select v-model="params.deviceKey" filterable placeholder="请选择设备" @change="deviceChange">
 | 
	
		
			
				|  |  | +            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
 | 
	
		
			
				|  |  | +              <span style="float: left">{{ item.name }}</span>
 | 
	
		
			
				|  |  | +              <span style="float: right; font-size: 13px">{{ item.key }}</span>
 | 
	
		
			
				|  |  | +            </el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <el-form-item label="选择属性" prop="deviceKey">
 | 
	
		
			
				|  |  | +          <el-select v-model="params.deviceKey" filterable placeholder="请选择属性" @change="deviceChange">
 | 
	
		
			
				|  |  | +            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
 | 
	
		
			
				|  |  | +              <span style="float: left">{{ item.name }}</span>
 | 
	
		
			
				|  |  | +              <span style="float: right; font-size: 13px">{{ item.key }}</span>
 | 
	
		
			
				|  |  | +            </el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item>
 | 
	
		
			
				|  |  | +          <el-button type="primary" class="ml10" @click="getData">
 | 
	
		
			
				|  |  | +            <el-icon>
 | 
	
		
			
				|  |  | +              <ele-Search />
 | 
	
		
			
				|  |  | +            </el-icon>
 | 
	
		
			
				|  |  | +            查询
 | 
	
		
			
				|  |  | +          </el-button>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +      </el-form>
 | 
	
		
			
				|  |  | +    </el-card>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script lang="ts" setup>
 | 
	
		
			
				|  |  | +import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
 | 
	
		
			
				|  |  | +import { ElMessageBox, ElMessage } from 'element-plus';
 | 
	
		
			
				|  |  | +import api from '/@/api/device';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const productList = ref<any[]>([])
 | 
	
		
			
				|  |  | +const deviceList = ref<any[]>([])
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const params = reactive({
 | 
	
		
			
				|  |  | +  productKey: '',
 | 
	
		
			
				|  |  | +  deviceKey: '',
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +api.product.getLists({ status: 1 }).then((res: any) => {
 | 
	
		
			
				|  |  | +  productList.value = res.product || [];
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function getData() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function productChange(productKey: string) {
 | 
	
		
			
				|  |  | +  params.deviceKey = ''
 | 
	
		
			
				|  |  | +  deviceList.value = []
 | 
	
		
			
				|  |  | +  api.device.allList({ productKey }).then((res: any) => {
 | 
	
		
			
				|  |  | +    deviceList.value = res.device;
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function deviceChange() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</script>
 |