fuse-code/src/layout/scene-list/index.vue

<template>
  <List key="id" :data="list" class="scene-list">
    <template #action>
      <slot name="action" />
    </template>
    <template #atom="{ item }">
      <div
        v-if="item.raw === fuseModel"
        @click="updateCurrent(item.raw)"
        class="all-scene-model-list"
      >
        <ModelList
          :class="{ active: current === fuseModel }"
          :title="getModelTypeDesc(fuseModel as any)"
          :show-content="showModelList"
        >
          <template #action>
            <ui-icon
              :type="`pull-${showModelList ? 'up' : 'down'}`"
              @click="showModelList = !showModelList"
              ctrl
            />
          </template>
        </ModelList>
      </div>
      <div
        class="scene"
        :class="{ disabled: item.raw.status !== SceneStatus.SUCCESS }"
        @click="updateCurrent(item.raw)"
        v-else-if="item.raw.type !== SceneType.SWMX"
      >
        <div
          :class="{full:!(canSync(item as Scene) && !voffline && currentLayout === RoutesName.show)} "
        >
          <p>
            {{ item.raw.name }}
          </p>
          <p>
            {{ SceneTypeDesc[item.raw.type as SceneType] }}
          </p>
        </div>
        <Button
          size="small"
          type="primary"
          ghost
          style="float: right"
          v-if="canSync(item as Scene) && !voffline && currentLayout === RoutesName.show"
          @click.stop="sync(item as Scene)"
        >
          同屏勘验
        </Button>
      </div>
    </template>
  </List>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, watch } from "vue";
import {
  scenes,
  SceneType,
  SceneTypeDesc,
  fuseModels,
  SceneStatus,
  getSWKKSyncLink,
  caseProject,
} from "@/store";
import List from "@/components/list/index.vue";
import ModelList from "../model-list/index.vue";
import { fuseModel, getModelTypeDesc } from "@/model";
import { Button } from "ant-design-vue";

import type { ModelType, FuseModelType } from "@/model";
import type { Scene } from "@/store";
import { currentLayout, RoutesName } from "@/router";

const emit = defineEmits<{ (e: "update:current", data: ModelType): void }>();
const props = defineProps<{ current: ModelType }>();
const showModelList = ref(true);

const voffline = offline;
const canSync = (scene: Scene) =>
  [
    SceneType.SWKK,
    SceneType.DSFXJ,
    SceneType.SWKJ,
    SceneType.SWSSMX,
    SceneType.SWYDMX,
  ].includes(scene.raw.type);

const sync = async (scene: Scene) => {
  const link = await getSWKKSyncLink(scene);
  window.open(link);
};

const list = computed(() => {
  const sceneList = true
    ? scenes.value
        .filter((scene) => scene.type !== SceneType.SWMX)
        .map((scene) => ({
          raw: scene,
          select:
            props.current !== fuseModel &&
            props.current.num === scene.num &&
            props.current.type === scene.type,
        }))
    : [];
  if (fuseModels.value.length) {
    return [{ raw: fuseModel }, ...sceneList];
  } else {
    return sceneList;
  }
});

const updateCurrent = (scene: FuseModelType | Scene) => {
  if (scene === fuseModel) {
    emit("update:current", scene);
  } else {
    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 }
);
</script>

<style lang="scss">
.scene-list > .content > li {
  padding: 0 !important;
}

.scene {
  padding: 0 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
  > div {
    flex: 1;
    max-width: 100%;
    &.full {
      max-width: 100%;
    }
    &:not(.full) {
      max-width: calc(100% - 80px);
    }
  }

  p {
    height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    line-height: 1.5em;
  }
}

.all-scene-model-list .scene-model-list {
  margin-bottom: -20px;
  margin-top: -20px;

  .header {
    padding: 30px 20px 20px;
    h3 {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
    }
  }

  &.active .header {
    background-color: rgba(0, 200, 175, 0.16);
  }

  .content li:last-child .atom-content {
    border: none;
  }
}
</style>