信息报告

src/views/left/comp/dispose/InformationReport.vue

@@ -16,149 +16,176 @@
         <div>切换事件</div>
       </div>
     </div>
+    <el-scrollbar class="profile_scroll-box">
+      <StepsTool :step-list="stepList" :active-index="1">
+        <template #title="{ data, index }">
+          <div class="title-info1">
+            <div class="title">{{ data.title || "" }}</div>
+            <div class="right-item">
+              <div class="depart">{{ data.depart1 || "" }}</div>
+              <div class="arrow-box"></div>
+              <div class="depart">{{ data.depart2 || "" }}</div>
+            </div>
+          </div>
+        </template>
+        <!-- 信息报告 -->
+        <template #infoReport="{ data, index }">
+          <div class="info-box">
+            <div class="info-item">
+              <span
+                class="content"
+                :class="{ 'no-expend': !data.expendFlag }"
+                v-html="data.strContent"
+              ></span>
+            </div>
+            <div class="collapse-box">
+              <div
+                class="icon-box"
+                :class="{ 'up-icon': data.expendFlag }"
+                @click="data.expendFlag = !data.expendFlag"
+              ></div>
+              <span class="text-box">{{
+                !data.expendFlag ? "展开" : "收起"
+              }}</span>
+            </div>
+          </div>
+        </template>
+      </StepsTool>
+    </el-scrollbar>
   </div>
 </template>
 <script setup>
-import * as echarts from 'echarts'
-import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
-import TowLevelTitle from '@/components/TowLevelTitle'
+import * as echarts from "echarts";
+import StepsTool from "../../../right/components/common/StepsTool.vue";
 
-const infoList = ref([
-  { lable: '报告时间', value: '2024-10-01 12:12', icon: '1' },
-  { lable: '报告单位', value: '长宁区疾控中心', icon: '2' },
-  { lable: '信息来源', value: '上海市瑞金医院', icon: '3' },
-  { lable: '状态', value: '处置中', icon: '4' }
-])
+import {
+  ref,
+  watch,
+  computed,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+} from "vue";
+
+const stepList = ref([
+  {
+    date: "12-14",
+    time: "18:35",
+    title: "初次报告",
+    depart1: "青浦区疾控中心",
+    depart2: "上海市疾控中心、青浦区卫健委(疾控局)",
+    //信息报告
+    describeSlot: "infoReport",
+    strContent: `<span>2024年12月14日9时，我中心接复旦大学附属中山医院青浦分院报告接诊1例可疑不明原因肺炎监测病例。<span style="color:#FFD43C">初步情况如下:</span></span><br>
+    <span style="display:inline-block;color:#FFD43C;margin: 5px 0;">个案基本情况:</span><br>   
+    <span>姓名:周卫国，男，65岁，职业:离退人员，现住址:上海市闵行区七莘路456号3号楼601室。</span><br>
+    <span style="display:inline-block;color:#FFD43C;margin: 5px 0;">临床表现:</span><br>   
+    <span>病例于12月12日起出现发热症状，体温最高39℃，自行服用布洛芬，体温反复，继而出现咳嗽,呈阵发性连声咳,咳少许白粘痰。12月13日上午病例症状未缓解，出现气促，前往中山医院青浦分院就诊，指氧饱和度85%，胸部CT平扫提示:右肺上叶、两肺下叶炎症，以“肺炎”收住院</span><br>   
+    <span style="display:inline-block;color:#FFD43C;margin: 5px 0;">检测情况:</span><br>   
+    <span>12月13日14时，中山医院青浦分院检测结果为:肺炎支原体IgM阴性、肺炎衣原体lgM阴性、呼吸道合胞病毒IgM阴性、腺病毒lgM阴性、柯萨奇病毒B组抗原阴性、百日咳lgG阴性、新型冠状病毒抗原阴性、流感抗原阴性。</span><br>       
+    `,
+    expendFlag: false,
+  },
+  {
+    date: "12-14",
+    time: "18:35",
+    title: "进程报告",
+    depart1: "上海市疾控中心",
+    depart2: "上海市疾控局",
+    //信息报告
+    describeSlot: "infoReport",
+    strContent: `2024年12月14日10时，我中心接青浦区疾控中心报告接诊1例可疑不明原因肺炎监测病例，风险级别上升。现续报如下:经调查，病例儿子以及在杭州聚餐的2名外地亲属均出现发热、咳嗽等症状。
+      经市、区联合快速风险评估，研判认为，因具有临床表现相似性、发病人群聚集性、流行病学关联性，并出现了重症肺炎表现的病例，疫情风险等级提升为B级。
+      下一步处置措施意见:提请市疾控局调度指挥;加强病例单人单间管理，开展市区多病原检测和宏基因测序;开展市区流行病学联合调查。`,
+    expendFlag: false,
+  },
+]);
 
 function getImgSrc(picName) {
-  return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
+  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 }
-])
-
 //4.时间分布 地区分布
 // 初始化时间分布图（蓝色渐变）
 const initTimeChart = () => {
-  if (!timeChart.value) return
-  const chart = echarts.init(timeChart.value)
+  if (!timeChart.value) return;
+  const chart = echarts.init(timeChart.value);
   chart.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
+    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 轴颜色
+      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 轴背景横线虚线
+      type: "value",
+      axisLine: { lineStyle: { color: "#4A90E2" } }, // Y 轴颜色
+      splitLine: { lineStyle: { type: "dashed", color: "#ccc" } }, // Y 轴背景横线虚线
     },
     series: [
       {
-        type: 'bar',
+        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' }
-          ])
+            { offset: 0, color: "rgba(63, 174, 253, 0)" },
+            { offset: 1, color: "#3FAEFD" },
+          ]),
         },
-        barBackgroundStyle: { color: 'rgba(74, 144, 226, 0.2)' } // 背景透明色
-      }
-    ]
-  })
-}
+        barBackgroundStyle: { color: "rgba(74, 144, 226, 0.2)" }, // 背景透明色
+      },
+    ],
+  });
+};
 
 // 初始化地区分布图（黄色渐变）
 const initAreaChart = () => {
-  if (!areaChart.value) return
-  const chart = echarts.init(areaChart.value)
+  if (!areaChart.value) return;
+  const chart = echarts.init(areaChart.value);
   chart.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
+    tooltip: { trigger: "axis" },
+    grid: { left: "10%", right: "5%", top: "15%", bottom: "18%" }, // 调整四周距离
     xAxis: {
-      type: 'category',
-      data: ['长宁区', '闵行区'],
-      axisLine: { lineStyle: { color: '#FBA541' } } // X 轴颜色
+      type: "category",
+      data: ["长宁区", "闵行区"],
+      axisLine: { lineStyle: { color: "#FBA541" } }, // X 轴颜色
     },
     yAxis: {
-      type: 'value',
-      axisLine: { lineStyle: { color: '#FBA541' } }, // Y 轴颜色
-      splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
+      type: "value",
+      axisLine: { lineStyle: { color: "#FBA541" } }, // Y 轴颜色
+      splitLine: { lineStyle: { type: "dashed", color: "#ccc" } }, // Y 轴背景横线虚线
     },
     series: [
       {
-        type: 'bar',
+        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' }
-          ])
-        }
-      }
-    ]
-  })
-}
+            { 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 }
-])
+const timeChart = ref(null);
+const areaChart = ref(null);
 
 // 在组件挂载后初始化 ECharts
 onMounted(() => {
-  initTimeChart()
-  initAreaChart()
-})
+  initTimeChart();
+  initAreaChart();
+});
 </script>
 <style lang="scss" scoped>
 * {
@@ -176,7 +203,12 @@ onMounted(() => {
   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;
+  border-image: linear-gradient(
+      180deg,
+      rgba(0, 150, 255, 1),
+      rgba(7, 108, 208, 1)
+    )
+    1 1;
 
   .risk_profile_header {
     width: 100%;
@@ -218,7 +250,8 @@ onMounted(() => {
         color: transparent;
 
         /* 光泽效果：文本阴影 */
-        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
+        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;
@@ -246,7 +279,7 @@ onMounted(() => {
     .risk_profile_change_btn {
       border-radius: 2px 2px 2px 2px;
       // border: 1px solid rgba(47, 154, 255, 0.82);
-      background: rgba(8,255,229,0.1);
+      background: rgba(8, 255, 229, 0.1);
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -268,61 +301,123 @@ onMounted(() => {
       }
     }
   }
+  .profile_scroll-box {
+    height: calc(100% - 80px);
+    .info-box {
+      .info-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        padding-left: 26px;
+        &::after {
+          position: absolute;
+          width: 24px;
+          height: 28px;
+          top: 0px;
+          left: 0px;
+          content: "";
+          background-image: url("../../../../assets/img/原创-箭头right.png");
+        }
+        .content {
+          margin-top: 5px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: normal;
+          font-size: 17px;
+          color: rgba(255, 255, 255, 0.8);
+          margin-left: 10px;
+          line-height: 24px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          line-height: 1.5;
+        }
+        .no-expend {
+          word-break: break-all;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 5;
+          -webkit-box-orient: vertical;
+        }
+        &.info-item-image {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+      }
+      .collapse-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        .icon-box {
+          width: 25px;
+          height: 25px;
+          background-image: url("../../../../assets/img/a-shouqi1 1@2x.png");
+          background-size: 100% 100%;
+          transform: rotate(-90deg);
+        }
+        .up-icon {
+          transform: rotate(90deg);
+        }
+        .text-box {
+          margin-left: 5px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: normal;
+          font-size: 18px;
+          color: #04fafe;
+          letter-spacing: 1px;
+          text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
+    .title-info1 {
+      .title {
+        min-width: 79px;
+        height: 32px;
+        line-height: 32px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: normal;
+        font-size: 20px;
+        color: #50e0ff;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+      .right-item {
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        padding-left: 10px;
+        width: 510px;
+        height: 35px;
+        background: linear-gradient(
+          270deg,
+          rgba(62, 174, 255, 0) 0%,
+          #1b82cbb1 85%,
+          rgba(27, 129, 203, 0.3) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        .depart {
+          font-family: Alibaba PuHuiTi;
+          font-size: 16px;
+          color: #50e0ff;
+          text-align: left;
+        }
+        .arrow-box {
+          width: 26px;
+          height: 29px;
+          background-image: url("../../../../assets/img/连线方向箭头.png");
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
 }
 
-// .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;
@@ -332,7 +427,12 @@ onMounted(() => {
   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%);
+  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>

src/views/right/components/common/StepsTool.vue

@@ -82,6 +82,7 @@ const props = defineProps({
       .time {
         font-family: YouSheBiaoTiHei;
         color: #50e0ff;
+        white-space: nowrap;
         text-align: left;
         font-style: normal;
         text-transform: none;
@@ -114,7 +115,6 @@ const props = defineProps({
           top: 0;
           bottom: -7px;
           left: 14px;
-          z-index: -1;
         }
       }
     }