|
@@ -4,28 +4,26 @@
|
|
|
<slot name="action" />
|
|
|
</template>
|
|
|
<template #atom="{ item }">
|
|
|
- <div v-if="item.raw === fuseModel"
|
|
|
- @click="updateCurrent(item.raw)"
|
|
|
- >
|
|
|
+ <div v-if="item.raw === fuseModel" @click="updateCurrent(item.raw)">
|
|
|
<ModelList
|
|
|
class="scene-model-list"
|
|
|
- :class="{active: current === fuseModel}"
|
|
|
+ :class="{ active: current === fuseModel }"
|
|
|
:title="getModelTypeDesc(fuseModel as any)"
|
|
|
:show-content="showModelList"
|
|
|
>
|
|
|
- <template #action>
|
|
|
+ <!-- <template #action>
|
|
|
<ui-icon
|
|
|
:type="`pull-${showModelList ? 'up' : 'down'}`"
|
|
|
@click="showModelList = !showModelList"
|
|
|
ctrl
|
|
|
/>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
</ModelList>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="scene"
|
|
|
- :class="{disabled: item.raw.status !== SceneStatus.SUCCESS}"
|
|
|
- @click="updateCurrent(item.raw)"
|
|
|
+ <div
|
|
|
+ class="scene"
|
|
|
+ :class="{ disabled: item.raw.status !== SceneStatus.SUCCESS }"
|
|
|
+ @click="updateCurrent(item.raw)"
|
|
|
v-else
|
|
|
>
|
|
|
<p>{{ item.raw.name }}</p>
|
|
@@ -35,56 +33,59 @@
|
|
|
</List>
|
|
|
|
|
|
<Teleport to="#layout-app">
|
|
|
- <div>
|
|
|
- 123
|
|
|
- </div>
|
|
|
+ <div>123</div>
|
|
|
</Teleport>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, nextTick, ref, watch } from 'vue'
|
|
|
-import { scenes, SceneType, SceneTypeDesc, fuseModels, SceneStatus } from '@/store'
|
|
|
-import List from '@/components/list/index.vue'
|
|
|
-import ModelList from '../model-list/index.vue'
|
|
|
-import { fuseModel, getModelTypeDesc } from '@/model'
|
|
|
+import { computed, nextTick, ref, watch } from "vue";
|
|
|
+import { scenes, SceneType, SceneTypeDesc, fuseModels, SceneStatus } from "@/store";
|
|
|
+import List from "@/components/list/index.vue";
|
|
|
+import ModelList from "../model-list/index.vue";
|
|
|
+import { fuseModel, getModelTypeDesc } from "@/model";
|
|
|
|
|
|
-import type { ModelType, FuseModelType } from '@/model'
|
|
|
-import type { Scene } from '@/store'
|
|
|
+import type { ModelType, FuseModelType } from "@/model";
|
|
|
+import type { Scene } from "@/store";
|
|
|
|
|
|
-const emit = defineEmits<{ (e: 'update:current', data: ModelType): void }>()
|
|
|
-const props = defineProps<{ current: ModelType }>()
|
|
|
-const showModelList = ref(true)
|
|
|
+const emit = defineEmits<{ (e: "update:current", data: ModelType): void }>();
|
|
|
+const props = defineProps<{ current: ModelType }>();
|
|
|
+const showModelList = ref(true);
|
|
|
|
|
|
const list = computed(() => {
|
|
|
- const sceneList = scenes.value.map(scene => ({
|
|
|
+ const sceneList = scenes.value.map((scene) => ({
|
|
|
raw: scene,
|
|
|
- select: props.current !== fuseModel
|
|
|
- && (props.current.num === scene.num )
|
|
|
- && props.current.type === scene.type
|
|
|
- }))
|
|
|
+ select:
|
|
|
+ props.current !== fuseModel &&
|
|
|
+ props.current.num === scene.num &&
|
|
|
+ props.current.type === scene.type,
|
|
|
+ }));
|
|
|
if (fuseModels.value.length) {
|
|
|
// return [{ raw: fuseModel }, ...sceneList]
|
|
|
- return [{ raw: fuseModel }]
|
|
|
+ return [{ raw: fuseModel }];
|
|
|
} else {
|
|
|
- return sceneList
|
|
|
+ return sceneList;
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
const updateCurrent = (scene: FuseModelType | Scene) => {
|
|
|
- console.log(scene)
|
|
|
+ console.log(scene);
|
|
|
if (scene === fuseModel) {
|
|
|
- emit('update:current', scene)
|
|
|
+ emit("update:current", scene);
|
|
|
} else {
|
|
|
- emit('update:current', { type: scene.type, num: scene.num })
|
|
|
+ emit("update:current", { type: scene.type, num: scene.num });
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-const stopWatch = watch(list, () => {
|
|
|
- if (!list.value.some(model => model.raw === fuseModel) && list.value.length) {
|
|
|
- updateCurrent(list.value[0].raw as any)
|
|
|
- nextTick(() => stopWatch())
|
|
|
- }
|
|
|
-}, { immediate: true })
|
|
|
+const stopWatch = watch(
|
|
|
+ list,
|
|
|
+ () => {
|
|
|
+ if (!list.value.some((model) => model.raw === fuseModel) && list.value.length) {
|
|
|
+ updateCurrent(list.value[0].raw as any);
|
|
|
+ nextTick(() => stopWatch());
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
@@ -110,10 +111,11 @@ const stopWatch = watch(list, () => {
|
|
|
|
|
|
.header {
|
|
|
padding: 30px 20px 20px;
|
|
|
+
|
|
|
h3 {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|