deerflow-code/situation-overview-web/src/components/ActionPlanning/PerformanceEvaluation.vue

<template>
  <div class="performance-evaluation">
    <!-- 六度量样式 -->
    <div class="six-metrics">
      <t-row :gutter="16">
        <t-col :span="4">
          <div class="item-left">
            <div class="metrices-item item-completed" style="margin-left: 50px;">
              <div class="item-value">
                108<i>个</i>
              </div>
              <div class="item-label">
                大V转发
              </div>
            </div>
            <div class="metrices-item item-completed" style="margin-left: 10px;">
              <div class="item-value">
                387<i>家</i>
              </div>
              <div class="item-label">
                媒体报道
              </div>
            </div>
            <div class="metrices-item item-completed" style="margin-left: 50px;">
              <div class="item-value">
                16<i>个</i>
              </div>
              <div class="item-label">
                传播平台
              </div>
            </div>
          </div>
        </t-col>
        <t-col :span="3">
          <div class="item-center">
            <div class="level-content">
              <div class="metrices-item item-center-bg">
                <div class="level-text">
                  五级
                </div>
                <div class="level-list">
                  <span class="list-item" v-for="(item, index) in levelList" :class="{ 'item-active': item.checked }"
                    :key="index">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="">
                      <path fill="currentColor"
                        d="M313.6 924.48a70.4 70.4 0 0 1-74.152-5.365 70.4 70.4 0 0 1-27.992-68.875l37.888-220.928L88.96 472.96a70.4 70.4 0 0 1 3.788-104.225A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 100.246-28.595 70.4 70.4 0 0 1 25.962 28.595l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z">
                      </path>
                    </svg>
                  </span>
                </div>
                <div class="item-label">
                  评估等级
                </div>
              </div>
            </div>
          </div>
        </t-col>
        <t-col :span="5">
          <div class="item-right">
            <div class="metrices-item item-incomplete">
              <div class="item-value">
                0<i>个</i>
              </div>
              <div class="item-label">
                线下活动
              </div>
            </div>
            <div class="metrices-item item-completed" style="margin-left: 50px;">
              <div class="item-value">
                6<i>个</i>
              </div>
              <div class="item-label">
                官方回应
              </div>
            </div>
            <div class="metrices-item item-completed">
              <div class="item-value">
                5<i>个</i>
              </div>
              <div class="item-label" style="padding-left: 5px;">
                关键节点
              </div>
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
    <!-- tab标签页 -->
    <TabsContent :tabIndex="tabIndex" :tabsList="tabsList" @taskDetailsC="taskDetailsChange"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TabsContent from '../views/TabsContent.vue';

defineProps({
  msg: String,
})

const levelList = ref([
  { title: 1, checked: true },
  { title: 1, checked: true },
  { title: 1, checked: true },
  { title: 1, checked: true },
  { title: 1, checked: true },
  { title: 1, checked: false },
])
const tabIndex = ref('cognition'); // cognition 认知影响 spread 传播效果 action 行动脉络
const tabsList = ref([
  { label: '认知影响', value: 'cognition' },
  { label: '传播效果', value: 'spread' },
  { label: '行动脉络', value: 'action' },
])

// 标签页切换
const taskDetailsChange = (value) => {
  tabIndex.value = value;
}

</script>

<style scoped lang="less">
.performance-evaluation {
  z-index: 500;
  color: #fff;
  padding: 10px;

  .six-metrics {
    width: 100%;
    padding-top: 15px;
    margin-bottom: 25px;

    .item-left {
      width: 100%;
      height: 100%;
    }

    .item-center {
      width: 100%;
      height: 100%;
      position: relative;

      .level-content {
        padding-left: 15px;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .item-right {
      width: 100%;
      height: 100%;
    }

    .metrices-item {
      width: 100px;
      height: 62px;
      padding-top: 7px;
      text-align: center;
    }

    .item-value {
      color: #01e1e9;
      font-size: var(--titleSize);
      font-family: 'DDINBold';
      font-weight: 700;
      line-height: var(--fontSize);

      i {
        font-size: 12px;
        font-style: normal;
        color: #fff;
        font-weight: 300;
        margin-left: 5px;
      }
    }

    .item-label {
      font-family: Noto Sans S Chinese;
    }

    .level-text {
      font-size: 24px;
      font-family: Noto Sans S Chinese;
      font-weight: 700;
      padding-top: 5px;
      animation: levelBreath 2s ease-in-out infinite;
    }

    .level-list {
      width: 120px;
      margin-top: 25px;

      .list-item {
        svg {
          width: 20px;
          color: #05727a;
        }
      }

      .item-active {
        svg {
          color: #00ffff !important;
        }
      }
    }

    .item-completed {
      background: url('../../assets/icon/tj-blue.png') no-repeat;
      background-size: cover;
    }

    .item-incomplete {
      background: url('../../assets/icon/tj-grey.png') no-repeat;
      background-size: cover;
    }

    .item-center-bg {
      background: url('../../assets/icon/cen-top.png') no-repeat;
      background-size: cover;
    }
  }
}

// 级别动画
@keyframes levelBreath {
  0% {
    text-shadow: 0 0 0 #f90;
  }

  50% {
    text-shadow: 0 0 25px #f90;
  }

  100% {
    text-shadow: 0 0 0 #f90;
  }
}
</style>