Situation-Awareness-Platform-Frontend/src/views/Jyh/AIRepair/index.vue

<template>
  <div class="ai-container">
    <div class="ai-container-card" style="width: 100%;" v-for="(rowItem, index) in list" :key="index">
      <Panel :expand="rowItem.expand">
        <template #header>
          <div class="ai-panel-header">
            <div style="padding: 20px 20px 0px 20px;">
              <img style="width: 60px; height: 50px;" src="@/assets/imgs/jyh/warning.png">
            </div>
            <div style="width: 100%; padding: 20px 20px 0px 0;">
              <div class="ai-panel-header-title">
                <div>
                  <d-tag color="red-w98" class="mr-1">严重</d-tag>
                  <span>Morgan</span>
                </div>
                <div style="cursor: pointer; display: flex; gap: 8px; align-items: center;" @click="rowItem.expand = !rowItem.expand">
                  <img style="width: 14px; height: 14px;" src="@/assets/imgs/jyh/collapseIcon.png">
                  <span>全部收起</span>
                </div>
              </div>
              <div class="ai-panel-header-sub-title">
                <div>
                  <span class="weak-text">安全问题</span>
                  <span>2</span>
                </div>
                <div>
                  <span class="weak-text">修复兼容性</span>
                  <span>2</span>
                  <img src="@/assets/imgs/jyh/help.png" class="icon-sm">
                  <d-tag class="ml-1" type="warning" size="sm">中</d-tag>
                </div>
                <div>
                  <span class="weak-text">升级版本</span>
                  <span>xxx</span>
                  <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="icon-sm">
                  <span>xxx</span>
                </div>
              </div>
            </div>
          </div>
        </template>

        <template #body>
          <div style="padding: 20px; width: 100%;">
            <Table :tableConfig="tableConfig" :dataSource="rowItem.data.listData"/>
          </div>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Panel from '@/components/AIRepair/Panel.vue';
import Table from '@/components/AIRepair/Table.vue';

const tableConfig = ref([
  {
    field: 'securityProblemCode',
    header: '安全问题编号',
    sortable: true,
    sortMethod: null
  },
  {
    field: 'type',
    header: '安全问题类型',
    sortable: false,
    sortMethod: null
  },
  {
    field: 'CWEcode',
    header: 'CWE编号',
    sortable: false,
    sortMethod: null
  },
  {
    field: 'score',
    header: '分值',
    sortable: true,
    sortMethod: null
  },
])


const list = ref([
  {
    expand: true,
    data: {
      listData: [
        {
          securityProblemCode: '1',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        },
        {
          securityProblemCode: '2',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        }
      ]
    }
  },
  {
    expand: true,
    data: {
      listData: [
      {
          securityProblemCode: '1',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        },
        {
          securityProblemCode: '2',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        }
      ]
    }
  },
  {
    expand: true,
    data: {
      listData: [
      {
          securityProblemCode: '1',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        },
        {
          securityProblemCode: '2',
          type: '安全问题',
          CWEcode: 'CWE-123',
          score: 100
        }
      ]
    }
  }
])


</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.ai-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  &-card {
    border-top: 2px solid $devui-danger;
    background-color: $devui-base-bg;
    border-radius: var(--devui-border-radius-card, 8px);
    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  }
}

.ai-panel-header {
  display: flex;
  flex-direction: row;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-sub-title {
    display: flex;
    align-items: center;
    margin-top: 10px;
    div {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-right: 20px;
      position: relative;
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -10px;
        height: 100%;
        width: 1px;
        background-color: $devui-line;
      }
    }
  }
}

.weak-text {
  color: $devui-text-weak;
}

.icon-sm {
  width: 14px;
  height: 14px;
}
</style>