右侧面板搭建

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="steps-box">
+    <div
+      class="steps-item"
+      v-for="(step, index) in stepList"
+      :key="index"
+      :class="{ active: index + 1 == activeIndex }"
+    >
+      <div class="left-box">
+        <slot name="left" :index="index" :data="step">
+          <div class="time-box">
+            <span class="date">{{ step.date || "" }}</span>
+            <span class="time">{{ step.time || "" }}</span>
+          </div>
+        </slot>
+      </div>
+      <div class="icon-box">
+        <slot name="icon" :index="index" :data="step">
+          <div class="icon-content">
+            <img
+              class="node-box"
+              src="../../../../assets/img/activesteps.png"
+              v-if="index + 1 == activeIndex"
+            />
+            <img
+              v-else
+              class="node-box"
+              src="../../../../assets/img/noActivesteps.png"
+            />
+          </div>
+        </slot>
+      </div>
+      <div class="right-box">
+        <slot name="title" :index="index" :data="step">
+          <div class="title-info">
+            <div class="title">{{ step.title || "" }}</div>
+            <div class="right-item">
+              <div class="depart">{{ step.depart || "" }}</div>
+              <div class="name">{{ step.name || "" }}</div>
+            </div>
+          </div>
+        </slot>
+        <slot
+          v-if="step.describeSlot"
+          :name="step.describeSlot"
+          :index="index"
+          :data="step"
+        ></slot>
+        <slot v-else name="describe" :index="index" :data="step">
+          <div class="describe-box"></div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  stepList: {
+    type: Array,
+    default: () => [],
+  },
+  activeIndex: {
+    type: [Number, String],
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.steps-box {
+  padding: 10px;
+  .steps-item {
+    display: flex;
+    min-height: 100px;
+    .left-box {
+      .time-box {
+        display: flex;
+        flex-direction: column;
+      }
+      .date,
+      .time {
+        font-family: YouSheBiaoTiHei;
+        color: #50e0ff;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+      .date {
+        font-size: 21px;
+      }
+      .time {
+        font-size: 19px;
+      }
+    }
+    .icon-box {
+      width: 40px;
+      margin-left: 10px;
+      margin-top: 5px;
+      .icon-content {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        .node-box {
+          width: 30px;
+          height: 30px;
+          z-index: 3;
+        }
+        &::after {
+          position: absolute;
+          content: "";
+          width: 3px;
+          background-color: #23aad367;
+          top: 0;
+          bottom: -7px;
+          left: 14px;
+          z-index: -1;
+        }
+      }
+    }
+    .right-box {
+      margin-left: 12px;
+      padding-bottom: 25px;
+      .title-info {
+        display: flex;
+        .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-left: 10px;
+          width: 270px;
+          height: 32px;
+          margin-left: 20px;
+          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;
+          }
+          .name {
+            font-family: Alibaba PuHuiTi;
+            font-weight: normal;
+            font-size: 16px;
+            color: #ffffff;
+            text-align: left;
+            margin-left: 20px;
+          }
+        }
+      }
+      .describe-box {
+      }
+    }
+    &:first-child {
+      .icon-content {
+        &::after {
+          top: 5px;
+        }
+      }
+    }
+    &:last-child {
+      .icon-content {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/right/components/handleProcess/comp/emergencyManage.vue

@@ -8,16 +8,315 @@
         />收起
       </div>
     </rightMediumTitleContent>
+    <el-scrollbar class="scroll-box">
+      <StepsTool :step-list="stepList" :active-index="1">
+        <!-- 信息报告 -->
+        <template #infoReport="{ data, index }">
+          <div class="info-box">
+            <div class="info-item">
+              <span class="title">进程报告-报市疾控局</span>
+            </div>
+          </div>
+        </template>
+        <!-- 作业处置 -->
+        <template #workhandle="{ data, index }">
+          <div class="info-box">
+            <div
+              class="info-item"
+              v-for="(descrbe, index) in data.descrbeList"
+              :key="index"
+              :class="{ 'info-item-image': descrbe.imgUrl }"
+            >
+              <span class="title">{{ descrbe.title }}</span>
+              <template v-if="descrbe.labelList">
+                <span
+                  class="title"
+                  v-for="(item, index1) in descrbe.labelList"
+                  :key="index1"
+                >
+                  {{ item.name }}<span class="num">{{ item.num }}</span>
+                </span>
+              </template>
+              <img
+                class="image-box"
+                v-if="descrbe.imgUrl"
+                src="../../../../../assets/img/1-1综合态势-市级.png"
+              />
+            </div>
+          </div>
+        </template>
+      </StepsTool>
+    </el-scrollbar>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import rightMediumTitleContent from "../../common/RightMediumTitleContent.vue";
 import { useRightPanelStore } from "@/store/rightPanel";
+import StepsTool from "../../common/StepsTool.vue";
+
 const rightPanelStore = useRightPanelStore();
 const handleClose = () => {
-  rightPanelStore.rightPanelVisible = '';
+  rightPanelStore.rightPanelVisible = "";
 };
+
+const stepList = ref([
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "信息报告",
+    depart: "市疾控",
+    name: "应急处-张佳佳",
+    //信息报告
+    describeSlot: "infoReport",
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    //作业处置
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "人员管控：",
+        labelList: [
+          {
+            name: "密接",
+            num: "25",
+          },
+          {
+            name: "共同暴露",
+            num: "25",
+          },
+        ],
+      },
+      {
+        title: "场所管控：",
+        labelList: [
+          {
+            name: "排查",
+            num: "10",
+          },
+          {
+            name: "消毒",
+            num: "5",
+          },
+        ],
+      },
+      {
+        title: "病媒管控：",
+        labelList: [
+          {
+            name: "病媒控制",
+            num: "25",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "开展流调工作，队伍已到达现场",
+        imgUrl: "11",
+      },
+    ],
+    //作业处置
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "人员管控：",
+        labelList: [
+          {
+            name: "密接",
+            num: "25",
+          },
+          {
+            name: "共同暴露",
+            num: "25",
+          },
+        ],
+      },
+      {
+        title: "场所管控：",
+        labelList: [
+          {
+            name: "排查",
+            num: "10",
+          },
+          {
+            name: "消毒",
+            num: "5",
+          },
+        ],
+      },
+      {
+        title: "病媒管控：",
+        labelList: [
+          {
+            name: "病媒控制",
+            num: "25",
+          },
+        ],
+      },
+    ],
+    //作业处置
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "人员管控：",
+        labelList: [
+          {
+            name: "密接",
+            num: "25",
+          },
+          {
+            name: "共同暴露",
+            num: "25",
+          },
+        ],
+      },
+      {
+        title: "场所管控：",
+        labelList: [
+          {
+            name: "排查",
+            num: "10",
+          },
+          {
+            name: "消毒",
+            num: "5",
+          },
+        ],
+      },
+      {
+        title: "病媒管控：",
+        labelList: [
+          {
+            name: "病媒控制",
+            num: "25",
+          },
+        ],
+      },
+    ],
+    //作业处置
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "人员管控：",
+        labelList: [
+          {
+            name: "密接",
+            num: "25",
+          },
+          {
+            name: "共同暴露",
+            num: "25",
+          },
+        ],
+      },
+      {
+        title: "场所管控：",
+        labelList: [
+          {
+            name: "排查",
+            num: "10",
+          },
+          {
+            name: "消毒",
+            num: "5",
+          },
+        ],
+      },
+      {
+        title: "病媒管控：",
+        labelList: [
+          {
+            name: "病媒控制",
+            num: "25",
+          },
+        ],
+      },
+    ],
+    //作业处置
+  },
+  {
+    date: "05-25",
+    time: "16:25",
+    title: "作业处置",
+    depart: "市疾控",
+    name: "传染病类应急队伍",
+    describeSlot: "workhandle",
+    descrbeList: [
+      {
+        title: "人员管控：",
+        labelList: [
+          {
+            name: "密接",
+            num: "25",
+          },
+          {
+            name: "共同暴露",
+            num: "25",
+          },
+        ],
+      },
+      {
+        title: "场所管控：",
+        labelList: [
+          {
+            name: "排查",
+            num: "10",
+          },
+          {
+            name: "消毒",
+            num: "5",
+          },
+        ],
+      },
+      {
+        title: "病媒管控：",
+        labelList: [
+          {
+            name: "病媒控制",
+            num: "25",
+          },
+        ],
+      },
+    ],
+    //作业处置
+  },
+]);
 </script>
 
 <style lang="scss" scoped>
@@ -38,6 +337,9 @@ const handleClose = () => {
       rgba(7, 108, 208, 1)
     )
     1 1;
+  .scroll-box {
+    height: calc(100% - 70px);
+  }
   .right-button-box {
     position: absolute;
     display: flex;
@@ -64,5 +366,49 @@ const handleClose = () => {
     background-image: url("../../../../../assets/img/image-bottom.png");
     background-size: 100% 100%;
   }
+  .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");
+      }
+      .title {
+        font-family: Alibaba PuHuiTi;
+        font-weight: normal;
+        font-size: 17px;
+        color: #ffffff;
+        margin-left: 10px;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        .num {
+          color: #50e0ff;
+          margin-left: 8px;
+        }
+      }
+      &.info-item-image {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .image-box {
+        width: 102px;
+        height: 64px;
+        border-radius: 0px 0px 0px 0px;
+        object-fit: fill;
+        margin-top: 5px;
+      }
+    }
+  }
 }
 </style>

src/views/right/components/handleProcess/index.vue

@@ -128,12 +128,13 @@
       </div>
     </div>
   </div>
+  <EmergencyManage />
+
   <EmergencyManage v-if="rightPanelStore.rightPanelVisible == '应急管理'" />
   <PeopleCd v-if="rightPanelStore.rightPanelVisible == '出动人员'" />
   <CarCd v-if="rightPanelStore.rightPanelVisible == '出动车辆'" />
   <MedicalReport v-if="rightPanelStore.rightPanelVisible == '病例报告'" />
   <ProruptionCase v-if="rightPanelStore.rightPanelVisible == '突发事件'" />
-  
 </template>
 
 <script setup>
@@ -141,7 +142,7 @@ import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 import rightMinTitleContent from "../common/RightMinTitleContent.vue";
 import rightMediumTitleContent from "../common/RightMediumTitleContent.vue";
-import EmergencyManage from "./comp/EmergencyManage.vue";
+import EmergencyManage from "./comp/emergencyManage.vue";
 import PeopleCd from "./comp/PeopleCd.vue";
 import CarCd from "./comp/CarCd.vue";
 import MedicalReport from "./comp/MedicalReport.vue";

vite.config.js

@@ -1,74 +1,74 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import postcsspxtoviewport from 'postcss-px-to-viewport'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import postcsspxtoviewport from "postcss-px-to-viewport";
 
 // https://vite.dev/config/
 export default defineConfig({
   server: {
     open: true,
-    prot: 8088
+    prot: 8088,
   },
   resolve: {
     // https://cn.vitejs.dev/config/#resolve-alias
     alias: {
       // 设置路径
-      '~': path.resolve(__dirname, './'),
+      "~": path.resolve(__dirname, "./"),
       // 设置别名
-      '@': path.resolve(__dirname, './src')
+      "@": path.resolve(__dirname, "./src"),
     },
     // https://cn.vitejs.dev/config/#resolve-extensions
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
   },
 
   optimizeDeps: {
     // 开发时 解决这些commonjs包转成esm包
     include: [
-      '@jiaminghi/c-render',
-      '@jiaminghi/c-render/lib/plugin/util',
-      '@jiaminghi/charts/lib/util/index',
-      '@jiaminghi/charts/lib/util',
-      '@jiaminghi/charts/lib/extend/index',
-      '@jiaminghi/charts',
-      '@jiaminghi/color',
-      'highcharts',
-      'highcharts/highcharts-3d'
-    ]
+      "@jiaminghi/c-render",
+      "@jiaminghi/c-render/lib/plugin/util",
+      "@jiaminghi/charts/lib/util/index",
+      "@jiaminghi/charts/lib/util",
+      "@jiaminghi/charts/lib/extend/index",
+      "@jiaminghi/charts",
+      "@jiaminghi/color",
+      "highcharts",
+      "highcharts/highcharts-3d",
+    ],
   },
   plugins: [
     vue(),
- 
+
     AutoImport({
-      resolvers: [ElementPlusResolver()]
+      resolvers: [ElementPlusResolver()],
     }),
     Components({
-      resolvers: [ElementPlusResolver()]
-    })
+      resolvers: [ElementPlusResolver()],
+    }),
   ],
   css: {
     postcss: {
       plugins: [
         postcsspxtoviewport({
-          unitToConvert: 'px', // 要转化的单位
+          unitToConvert: "px", // 要转化的单位
           // viewportHeight: 1080, // 可选，视口高度，通常不需要设置
           viewportWidth: 3840, // UI设计稿的宽度
           unitPrecision: 4, // 转换后的精度，即小数点位数
-          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
           // viewportUnit: 'vh', // 指定需要转换成的视窗单位，默认vw
           // fontViewportUnit: 'vh', // 指定字体需要转换成的视窗单位，默认vw
-          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
-          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
+          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
           selectorBlackList: [], // 指定不转换为视窗单位的类名，
           minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
           mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
           replace: true, // 是否转换后直接更换属性值
           exclude: [/node_modules\/(?!element-plus)/], // 设置忽略文件，用正则做目录名匹配
-          landscape: false // 是否处理横屏情况
-        })
-      ]
-    }
+          landscape: false, // 是否处理横屏情况
+        }),
+      ],
+    },
   },
-})
+});