4pc/src/view/step-tree-v2/example/step.vue

<template>
  <div
    class="step-layout"
    @click="emit('click')"
    :style="{ '--statusColor': currentColor }"
  >
    <div class="step-header">
      <span class="type">{{ item.name }}</span>
      <span class="title">{{ item.displayName }}</span>
      <span class="icons">
        <img src="./image/g.png" v-if="props.item.status === 'success'" />
        <img src="./image/x.png" v-else-if="props.item.status === 'error'" />

        <template v-if="'serviceTypeParallel' in item">
          <img src="./image/p.png" v-if="item.serviceTypeParallel" />
          <img src="./image/c.png" v-else />
        </template>
      </span>
    </div>

    <div class="step-hosts" v-if="item.hosts?.length">
      <span v-for="host in item.hosts" @click.stop="$emit('clickHost', host)">
        {{ host.host }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataStep } from "../type";
import { computed } from "vue";

const props = defineProps<{ item: DataStep }>();
const emit = defineEmits<{
  (e: "click"): void;
  (e: "clickHost", host: DataStep["hosts"][number]): void;
}>();

const defaultColor = "#d4f8c3";
const colorMap = {
  success: "#30d567",
  error: "#ff4238",
  running: "#ecf752",
  waiting: "#89beb2",
};
const currentColor = computed(() =>
  props.item.status in colorMap ? colorMap[props.item.status] : defaultColor
);
</script>

<style scoped lang="scss">
.step-layout {
  border-radius: 8px;
  color: rgb(51, 51, 51);
  font-family: "微软雅黑";
  background-color: var(--pColor);
  max-width: 400px;
  min-width: 100px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 10px;
  background: #8ebeb2;

  .type {
    font-weight: bold;
  }

  .title {
    margin: 0 20px;
  }

  .icons {
    img {
      width: 20px;
      height: 20px;
      :not(:last-child) {
        margin-right: 5px;
      }
    }
  }
}

.step-hosts {
  padding: 5px;
  display: flex;
  justify-content: center;
  background: #fff;
  font-size: 12px;
  flex-wrap: wrap;

  span {
    padding: 6px 10px;
    border: 2px solid var(--statusColor);
    color: var(--statusColor);
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }
}
</style>