EOC-UI/src/views/left/comp/dispose/RiskProfile.vue

<template>
  <div class="risk_profile_container">
    <!-- 1.==================== -->
    <HeaderBoxContent :headerObj="headerObj"></HeaderBoxContent>
    <!-- <div class="risk_profile_header">
      <div class="risk_profile_title">

        <img src="../../../../assets/img/levelC.png" alt="" />
        <div class="risk_profile_name">05-2024-1210-01-不明原因肺炎</div>
        <div class="risk_profile_type">风险个案</div>
      </div>
      <div class="risk_profile_change_btn">
      </div>
    </div> -->

    <!-- 2.============================== -->
    <div class="risk_profile_info">
      <div class="risk_profile_info_top">
        <div v-for="item in infoList" :key="item.lable" class="risk_profile_info_top_item">
          <div class="risk_profile_info_top_name">
            <div class="risk_profile_info_top_name_lable">
              <img :src="getImgSrc(item.icon)" alt="" />
              <span>{{ item.lable }}</span>
            </div>
            <div class="risk_profile_info_top_name_value">{{ item.value }}</div>
          </div>
          <div class="line" v-if="item.icon !== '4'"></div>
        </div>
      </div>
      <div class="risk_profile_info_bottom">
        <div class="risk_profile_info_bottom_name">
          <img src="../../../../assets/img/risk_info_icon-5.png" alt="" />
          <span class="text">处置单位</span>
        </div>
        <div class="risk_profile_info_bottom-content">
          <div class="text">
            牵头单位
            <span class="text1">上海市疾控中心</span>
          </div>
          <div class="text">
            配合单位
            <span class="text1">长宁区疾控中心、静安区疾控中心</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 3.风险概括====================== -->
    <div class="risk_summary">
      <div class="risk_summary_header">
        <TowLevelTitle :title="'风险概括'"></TowLevelTitle>

        <div class="risk_summary_tag" @click="openAIDialogHandle"><img src="../../../../assets/img/动态评估.png" alt="">动态评估</div>
      </div>
      <div class="risk_summary_content">
        <div class="risk_bg risk_bg_color">
          <div class="risk_bg_info">
            <div class="risk_bg_info_item">
              <img src="../../../../assets/img/risk_info_icon-6.png" alt="" />
              <span>病种/信息</span>
              <div>不明原因肺炎</div>
            </div>
            <div class="risk_bg_info_item">
              <img src="../../../../assets/img/risk_info_icon-7.png" alt="" />
              <span>发生地址</span>
              <div>长宁区</div>
            </div>
          </div>
          <div class="risk_bg_info">
            <div class="risk_bg_info_item">
              <img src="../../../../assets/img/risk_info_icon-8.png" alt="" />
              <span>街道</span>
              <div>华阳路街道</div>
            </div>
            <div class="risk_bg_info_item">
              <img src="../../../../assets/img/risk_info_icon-9.png" alt="" />
              <span>详细地址</span>
              <div>武夷路528号</div>
            </div>
          </div>
        </div>
        <div class="risk_bg2 risk_bg_color">
          <div v-for="item in infoList2" :key="item.lable" class="risk_bg2_item">
            <div class="risk_bg2_name">
              <div class="risk_bg2_label">
                <img :src="getImgSrc(item.icon)" alt="" />
                <span>{{ item.lable }}</span>
              </div>
              <div class="risk_bg2_name_value">{{ item.value }}</div>
            </div>

            <div class="line" v-if="item.icon !== '12'"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 4.时间分布 地区分布 -->
    <div class="echarts_box">
      <div class="risk_bg_color time_item">
        <TowLevelTitle :title="'时间分布'" :buttons="timeButtons"></TowLevelTitle>
        <div class="time_echarts_bar" ref="timeChart"></div>
      </div>
      <div class="risk_bg_color area_item">
        <TowLevelTitle :title="'地区分布'"></TowLevelTitle>
        <div class="area_echarts_bar" ref="areaChart"></div>
      </div>
    </div>

    <!-- 5.核心流调 -->
    <div class="risk_bg_color core_flow_adjustment">
      <div class="core_flow_adjustment_header">
        <TowLevelTitle :title="'核心流调'"></TowLevelTitle>
        <div class="core_flow_adjustment_tag">
          <div class="tag investigated">
            已流调：
            <span>2</span>
          </div>
          <div class="tag pending">
            待流调：
            <span>2</span>
          </div>
          <div class="tag suspicious">
            可疑感染来源：
            <span>2</span>
          </div>
          <div class="tag local">
            本地感染：
            <span>2</span>
          </div>
        </div>
      </div>
      <div class="core_flow_adjustment_body">
        <div v-for="(item, index) in flowData" :key="item.lable" class="risk_profile_info_top_item">
          <div class="risk_profile_info_top_name">
            <div class="risk_profile_info_top_name_lable">
              <span>{{ item.lable }}</span>
            </div>
            <div class="risk_profile_info_top_name_list">
              <div class="risk_profile_info_top_name_value" v-for="v in item.list">{{ v.value }}</div>
            </div>
          </div>
          <div class="line" v-if="index !== 2"></div>
        </div>
      </div>
    </div>

    <!-- 6.风险人员 风险场所 -->
    <div class="risk_box">
      <div class="risk_personnel">
        <div class="risk_personnel_header">
          <TowLevelTitle :title="'风险人员'" class="risk_personnel_bg"></TowLevelTitle>
          <div class="risk_personnel_tag">
            已流调：
            <span>13</span>
          </div>
        </div>
        <div class="risk_bg_color risk_personnel_body">
          <div v-for="(item, index) in riskPersonnelData" :key="item.lable" class="risk_personnel_item">
            <div class="risk_profile_info_top_name">
              <span>{{ item.lable }}</span>
              <div>{{ item.value }}</div>
            </div>
            <div class="risk_personnel_line" v-if="index !== 2"></div>
          </div>
        </div>
      </div>

      <div class="risk_location">
        <TowLevelTitle :title="'风险场所'"></TowLevelTitle>
        <div class="risk_bg_color risk_location_body">
          <div v-for="(item, index) in riskLocationData" :key="item.lable" class="risk_location_item">
            <div class="risk_location_name">
              <span>{{ item.lable }}</span>
              <div>{{ item.value }}</div>
            </div>
            <div class="risk_location_line" v-if="index !== 1"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 7.检测情况 -->
    <div class="test_situation">
      <TowLevelTitle :title="'检测情况'" :buttons="testBottons"></TowLevelTitle>
      <div class="risk_bg_color test_situation_body">
        <div v-for="(item, index) in testData" :key="item.lable" class="test_situation_item">
          <div class="test_situation_name">
            <span>{{ item.lable }}</span>
            <div>{{ item.value }}</div>
          </div>
          <div class="test_situation_line" v-if="index !== 4"></div>
        </div>
      </div>
    </div>


    <!-- 动态评估 弹窗 -->
    <AiPublicRiskDialog v-if="dialogStore.riskAIDialogOpen2"> </AiPublicRiskDialog>
  </div>
</template>
<script setup>
import AiPublicRiskDialog  from './dialog/AiPublicRiskDialog'
import HeaderBoxContent from './common/HeaderBoxContent'
import * as echarts from 'echarts'
import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import TowLevelTitle from '@/components/TowLevelTitle'
import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()

const headerObj = ref({
  level: 'C',
  title: '05-2024-1210-01-不明原因肺炎',
  typeList: ['风险个案']
})

const riskProfileBottons = ref([{ id: 1, name: '风险概况', active: false }])

const infoList = ref([
  { lable: '报告时间', value: '2024-10-01 12:12', icon: '1' },
  { lable: '报告单位', value: '长宁区疾控中心', icon: '2' },
  { lable: '信息来源', value: '上海市瑞金医院', icon: '3' },
  { lable: '状态', value: '处置中', icon: '4' }
])

function getImgSrc(picName) {
  return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
}

const infoList2 = ref([
  { lable: '病例数', value: 3, icon: '10' },
  { lable: '重症数', value: 0, icon: '11' },
  { lable: '死亡数', value: 0, icon: '12' }
])

const timeButtons = ref([
  { id: 1, name: '发布时间', active: false },
  { id: 2, name: '报告时间', active: true }
])

function openAIDialogHandle() {
   dialogStore.setRiskAI2DialogOpen(true)
}

//4.时间分布 地区分布
// 初始化时间分布图（蓝色渐变）
const initTimeChart = () => {
  if (!timeChart.value) return
  const chart = echarts.init(timeChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
    xAxis: {
      type: 'category',
      data: ['12/04', '12/05', '12/06', '12/07', '12/08', '12/09', '12/10'],
      axisLine: { lineStyle: { color: '#4A90E2' } } // X 轴颜色
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#4A90E2' } }, // Y 轴颜色
      splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
    },
    series: [
      {
        type: 'bar',
        data: [3, 6, 2, 9, 5, 8, 10],
        barWidth: 30,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: 'rgba(63, 174, 253, 0)' },
            { offset: 1, color: '#3FAEFD' }
          ])
        },
        barBackgroundStyle: { color: 'rgba(74, 144, 226, 0.2)' } // 背景透明色
      }
    ]
  })
}

// 初始化地区分布图（黄色渐变）
const initAreaChart = () => {
  if (!areaChart.value) return
  const chart = echarts.init(areaChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
    xAxis: {
      type: 'category',
      data: ['长宁区', '闵行区'],
      axisLine: { lineStyle: { color: '#FBA541' } } // X 轴颜色
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#FBA541' } }, // Y 轴颜色
      splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
    },
    series: [
      {
        type: 'bar',
        data: [5, 9],
        barWidth: 30,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: 'rgba(251,165,65,0)' },
            { offset: 1, color: '#FBA541' }
          ])
        }
      }
    ]
  })
}

// 绑定 ECharts 容器
const timeChart = ref(null)
const areaChart = ref(null)

// 5.核心流调
const flowData = ref([
  { lable: '外出外来史', list: [{ value: '李梦康:2024-10-01从杭州回来' }, { value: '李梦康:2024-10-01从杭州回来' }] },
  { lable: '疑似病例接触史', value: 0, list: [{ value: '李梦康:2024-10-01接触病例张三' }] },
  { lable: '可疑动物接触史', value: 0, list: [{ value: '毛超:2024-10-01接触活禽' }] }
])

// 风险人员
const riskPersonnelData = ref([
  { lable: '密接', value: 5 },
  { lable: '共同暴露者', value: 0 },
  { lable: '其它风险人员', value: 0 }
])

const riskLocationData = ref([
  { lable: '场所数', value: 2 },
  { lable: '已完成消杀', value: 2 }
])

// 检测情况
const testBottons = ref([
  { id: 1, name: '全部', active: true },
  { id: 2, name: '病例', active: false },
  { id: 2, name: '密接', active: false },
  { id: 2, name: '共同暴露者', active: false },
  { id: 2, name: '其它风险人员', active: false },
  { id: 2, name: '其它', active: false }
])

const testData = ref([
  { lable: '采样数', value: 7 },
  { lable: '检测数', value: 7 },
  { lable: '阳性数', value: 2 },
  { lable: '阴性数', value: 5 },
  { lable: '检测中', value: 0 }
])

// 在组件挂载后初始化 ECharts
onMounted(() => {
  initTimeChart()
  initAreaChart()
})
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.risk_profile_container {
  position: absolute;
  top: 42px;
  left: 0px;
  width: 700px;
  height: 892px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(7, 108, 208, 1)) 1 1;

  .risk_profile_header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .risk_profile_title {
      display: flex;
      align-items: center;
      gap: 20px;

      > img {
        width: 40px;
        height: 37px;
      }

      .risk_profile_name {
        // width: 352px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 24px;
        color: #e2ffff;
        line-height: 24px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;

        /* 金属光泽渐变效果 */
        background: linear-gradient(to top, #49ffff 4%, #ffffff 100%);
        -webkit-background-clip: text;
        /* 文字应用渐变 */
        background-clip: text;

        /* 使文字透明，背景渐变会应用到文字 */
        color: transparent;

        /* 光泽效果：文本阴影 */
        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);

        /* 给文字加一些柔和的过渡效果 */
        transition: all 0.3s ease;
        font-style: italic;
        transform: skewX(-5deg);
      }

      .risk_profile_type {
        height: 24px;
        width: 158px;
        background: url(../../../../assets/img/待核实.png) no-repeat;
        background-size: 100% 100%;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 14px;
        color: #ffd15c;
        line-height: 24px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .risk_profile_change_btn {
      width: 64px;
      height: 50px;
      background: url(../../../../assets/img/changeRisk.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .risk_profile_info {
    width: 100%;
    display: flex;
    flex-direction: column;
    .risk_profile_info_top {
      width: 100%;
      height: 40px;
      display: flex;

      .risk_profile_info_top_item {
        display: flex;
        align-items: center;

        .risk_profile_info_top_name {
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
          text-align: left;
          font-style: normal;
          text-transform: none;

          .risk_profile_info_top_name_lable {
            display: flex;
            align-items: center;

            > img {
              width: 18px;
              height: 18px;
              margin-right: 4px;
            }
          }

          .risk_profile_info_top_name_value {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: #04fafe;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-style: normal;
            text-transform: none;
          }
        }

        .line {
          height: 24px;
          width: 2px;
          background: #88eaff;
          background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
          margin: 0 16px;
        }
      }
    }

    .risk_profile_info_bottom {
      margin: 12px 0;

      .risk_profile_info_bottom_name {
        display: flex;
        align-items: center;
        margin-bottom: 3px;

        > img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }

      .risk_profile_info_bottom-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .risk_summary {
    width: 100%;
    height: 100px;
    .risk_summary_header {
      width: 100%;
      position: relative;
      >img{
        margin-right: 5px;
        width: 14px;
        height: 14px;
      }
      .risk_summary_tag {
        position: absolute;
        top: 0px;
        right: 5px;
        width: 90px;
        height: 24px;
        // background: linear-gradient(90deg, #59a7da 0%, rgba(22, 116, 178, 0) 100%);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #6fe5ff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 14px;
        color: #9ffdff;
        font-style: normal;
        text-transform: none;
      }
    }
    .risk_summary_content {
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      height: 64px;
      margin-top: 8px;

      .risk_bg {
        padding: 8px;
        box-sizing: border-box;
        width: 360px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .risk_bg_info {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          font-style: normal;
          text-transform: none;

          .risk_bg_info_item {
            display: flex;
            align-items: center;

            > img {
              width: 18px;
              height: 18px;
            }

            > span {
              // margin: 0 4px 0 8px;
              margin: 0 4px;
              box-sizing: border-box;
              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
              font-weight: normal;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.7);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }

      .risk_bg_color {
        background: rgba(0, 170, 255, 0.08);
        border-radius: 0px 0px 0px 0px;
      }

      .risk_bg2 {
        padding: 8px;
        box-sizing: border-box;
        // width: 263px;
        flex: 1;
        height: 64px;
        display: flex;
        align-items: center;
        .risk_bg2_item {
          display: flex;
          align-items: center;
          .risk_bg2_name {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            text-align: left;
            font-style: normal;
            text-transform: none;
            > img {
              width: 18px;
              height: 18px;
            }
            .risk_bg2_label {
              display: flex;
              align-items: center;
            }
          }
          .risk_bg2_name_value {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: #04fafe;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }

  .echarts_box {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 12px 0;
    .time_item {
      width: 360px;
      height: 211px;
      padding: 8px;
      box-sizing: border-box;
      .time_echarts_bar {
        width: 100%;
        height: 176px;
      }
    }
    .area_item {
      padding: 8px;
      box-sizing: border-box;
      flex: 1;
      height: 211px;
      // width: ;
      .area_echarts_bar {
        width: 100%;
        height: 176px;
      }
    }
  }

  .core_flow_adjustment {
    padding: 8px;
    box-sizing: border-box;
    .core_flow_adjustment_header {
      position: relative;

      .core_flow_adjustment_tag {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        // color: #fff;
      }
    }
    .core_flow_adjustment_body {
      // width: 645px;
      width: 100%;
      height: 78px;
      display: flex;
      align-items: center;
      .risk_profile_info_top_item {
        display: flex;
        align-items: center;
        .risk_profile_info_top_name {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 13px;
          color: #697c91;
          line-height: 14px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          .risk_profile_info_top_name_lable {
            width: 203px;
            height: 18px;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            background: linear-gradient(to top, #43bcdb 0%, #ffffff 100%);

            /* 金属光泽渐变效果 */
            // background: linear-gradient(to top, #49ffff 4%, #e2ffff 100%);
            -webkit-background-clip: text;
            /* 文字应用渐变 */
            background-clip: text;

            /* 使文字透明，背景渐变会应用到文字 */
            color: transparent;

            /* 光泽效果：文本阴影 */
            text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);

            /* 给文字加一些柔和的过渡效果 */
            transition: all 0.3s ease;
          }
          .risk_profile_info_top_name_list {
            height: 36px;
            width: 100%;
            .risk_profile_info_top_name_value {
              margin: 5px 0px;
            }
          }
        }
      }
    }
  }

  .risk_box {
    display: flex;
    gap: 10px;
    width: 100%;
    height: 100px;
    // margin: 10px 0;
    margin-top: 10px;
    margin-bottom: 15px;
    .risk_personnel {
      width: 399px;
      height: 100%;
      .risk_personnel_header {
        position: relative;

        .risk_personnel_tag {
          position: absolute;
          top: 0px;
          right: 0px;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          text-align: left;
          font-style: normal;
          text-transform: none;
          > span {
            color: #04fafe;
          }
        }
      }
      .risk_personnel_body {
        width: 399px;
        height: 63px;
        display: flex;
        align-items: center;
        margin: 11px auto 0px;
        .risk_personnel_item {
          display: flex;
          align-items: center;
          margin: 0 auto;

          .risk_profile_info_top_name {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            > div {
              font-family: Roboto, Roboto;
              font-weight: bold;
              font-size: 20px;
              color: #04fafe;
            }
          }
          .risk_personnel_line {
            height: 24px;
            width: 2px;
            background: #88eaff;
            background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
            margin-left: 36px;
          }
        }
      }
    }

    .risk_location {
      width: 100%;
      height: 100%;
      .risk_location_body {
        width: 100%;
        height: 63px;
        display: flex;
        align-items: center;
        margin: 11px auto 0px;
        .risk_location_item {
          display: flex;
          align-items: center;
          margin: 0 auto;

          .risk_location_name {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            > div {
              font-family: Roboto, Roboto;
              font-weight: bold;
              font-size: 20px;
              color: #04fafe;
            }
          }
          .risk_location_line {
            height: 24px;
            width: 2px;
            background: #88eaff;
            background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
            margin-left: 36px;
          }
        }
      }
    }
  }

  .test_situation {
    width: 100%;
    height: 100px;
    .test_situation_body {
      height: 63px;
      display: flex;
      align-items: center;
      margin: 11px auto 0px;
      .test_situation_item {
        display: flex;
        align-items: center;
        margin: 0 auto;

        .test_situation_name {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          > div {
            font-family: Roboto, Roboto;
            font-weight: bold;
            font-size: 20px;
            color: #04fafe;
          }
        }
        .test_situation_line {
          height: 24px;
          width: 2px;
          background: #88eaff;
          background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
          margin-left: 43px;
        }
      }
    }
  }
}

.tag {
  font-size: 16px;
  padding: 0px 12px;
  box-sizing: border-box;
  // border-radius: 6px;
  font-weight: bold;
  width: fit-content;
  height: 24px;
  line-height: 24px;
  text-align: center;
  // p
}
/* 已流调 */
.investigated {
  color: #50e0ff;
  background: linear-gradient(270deg, rgba(62, 174, 255, 0.1) 0%, rgba(27, 129, 203, 0.3) 51%, rgba(27, 129, 203, 0.1) 100%);
}

/* 待流调 */
.pending {
  color: #ff9950;
  background: linear-gradient(270deg, rgba(255, 153, 80, 0.1) 0%, rgba(255, 153, 80, 0.3) 51%, rgba(255, 153, 80, 0.1) 100%);
}

/* 可疑感染来源 */
.suspicious {
  color: #ffd43c;
  background: linear-gradient(270deg, rgba(62, 174, 255, 0.1) 0%, rgba(255, 218, 123, 0.3) 51%, rgba(255, 218, 123, 0.1) 100%);
}

/* 本地感染 */
.local {
  color: #ffffff;
}

.text {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  text-transform: none;
}

.text1 {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 16px;
  color: #04fafe;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-style: normal;
  text-transform: none;
}
.risk_bg_color {
  background: rgba(0, 170, 255, 0.08);
  border-radius: 0px 0px 0px 0px;
}

.line {
  height: 24px;
  width: 2px;
  background: #88eaff;
  background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
  margin: 0 10px;
}
</style>