山大课题数据库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

54 lines
1.5 KiB

<script setup>
import { computed, defineProps, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { PEND_TYPE } from '@/config/config';
const props = defineProps({ status: String });
const store = useStore();
const devices = computed(() => store.state.device.devices); // 设备/站点列表
const deviceId = ref(''); // 选中的设备id
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
const statusType = computed(() => PEND_TYPE[props.status].type);
// 监听currentDeviceId
watch(
() => currentDeviceId.value,
newValue => {
if (newValue && deviceId.value !== newValue) {
deviceId.value = newValue;
}
},
{ immediate: true },
);
/**
* 设备id修改
* 更新store里的deviceId
*/
function onChange(event) {
store.commit('device/setCurrentDeviceId', event);
}
</script>
<template>
<div class="mb-3">
<span class="text-sm text-gray-500">选择站点</span>
<el-select v-model="deviceId" placeholder="选择站点" @change="onChange">
<el-option
v-for="item in devices"
:key="item.deviceId"
:label="`${item.address}-${item.deviceId}`"
:value="item.deviceId"
></el-option>
</el-select>
<!-- <span class="text-sm text-gray-500 ml-10">获取状态:</span>
<el-tag type="success">{{ get }}</el-tag>-->
<template v-if="props.status">
<span class="text-sm text-gray-500 ml-10">设置状态:</span>
<el-tag :type="statusType">{{ props.status }}</el-tag>
</template>
</div>
</template>