add

index.html

@@ -7,10 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>交通运输应急指挥系统</title>
 
-<!--    <script src="../webClient/defaultConfig.js"></script>-->
-<!--    <script src="../webClient/initWebSocket.js"></script>-->
-<!--    <script src="../webClient/webClient_initWnd.js"></script>-->
+    <!--    <script src="../webClient/defaultConfig.js"></script>-->
+    <!--    <script src="../webClient/initWebSocket.js"></script>-->
+    <!--    <script src="../webClient/webClient_initWnd.js"></script>-->
 
+    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
     <link rel="stylesheet" href="http://61.147.254.211:21009/minemapapi/v2.1.0/minemap.css">
     <script src="http://61.147.254.211:21009/minemapapi/v2.1.0/minemap.js"></script>
     <script>
@@ -173,4 +174,4 @@
     <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
+</html>

src/components/Card/index.scss

@@ -1,67 +1,96 @@
 @import '../../styles/utils.scss';
-
 .el-loading-mask {
-  background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 .card-container {
-  width: 470px;
-  height: 472px;
-  width: px2rem(470px * 2);
-  height: px2rem(770px / 2 * 2);
-  background-position: top center;
-  background-size: cover;
-  z-index: 1;
-  box-sizing: border-box;
-  padding: px2rem(60px * 2) px2rem(30px * 2) px2rem(25px * 2);
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-  animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-
-  > div {
-    flex: 1;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
+    width: 470px;
+    height: 472px;
+    width: px2rem(470px * 2);
+    height: px2rem(770px / 2 * 2);
+    background-position: top center;
+    background-size: cover;
+    z-index: 1;
+    box-sizing: border-box;
+    padding: px2rem(60px * 2) px2rem(30px * 2) px2rem(25px * 2);
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    animation: fadeInBottom 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    >div {
+        flex: 1;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #39d6fe;
+            border-radius: 3px;
+        }
     }
-    &::-webkit-scrollbar-track {
-      background: transparent;
+    &-bg-message-list {
+        background-image: url('../../assets/card-bg/frame_information.png');
     }
-    &::-webkit-scrollbar-thumb {
-      background: #39d6fe;
-      border-radius: 3px;
+    &-bg-incident-info {
+        background-image: url('../../assets/card-bg/frame_sjxx.png');
     }
-  }
-  &-bg-message-list {
-    background-image: url('../../assets/card-bg/frame_information.png');
-  }
-  &-bg-incident-info {
-    background-image: url('../../assets/card-bg/frame_sjxx.png');
-  }
-  &-bg-command-chain {
-    background-image: url('../../assets/card-bg/frame_zhtx.png');
-  }
-  &-bg-incident-plan {
-    background-image: url('../../assets/card-bg/frame_czfa.png');
-  }
-  &-bg-emergency-linkage {
-    background-image: url('../../assets/card-bg/frame_yjld.png');
-  }
-
-  &-bg-execution-log {
-    width: 939px;
-    height: 554px;
-    width: px2rem(939px * 2);
-    height: px2rem(554px * 2 - 182px);
-    background-image: url('../../assets/card-bg/frame_zxrz.png');
-  }
-  &-bg-live-monitoring {
-    width: 939px;
-    height: 390px;
-    width: px2rem(939px * 2);
-    height: px2rem(390px * 2 - 172px);
-    background-image: url('../../assets/card-bg/frame_skjc.png');
-  }
-}
+    &-bg-command-chain {
+        background-image: url('../../assets/card-bg/frame_zhtx@2x.png');
+        margin-top: px2rem(-63px * 2);
+    }
+    &-bg-incident-plan {
+        background-image: url('../../assets/card-bg/frame_czfa.png');
+    }
+    &-bg-emergency-linkage {
+        background-image: url('../../assets/card-bg/frame_yjld.png');
+    }
+    &-bg-accident-scene {
+        background-image: url('../../assets/card-bg/frame_sgxc@2x.png');
+        width: px2rem(472px * 2);
+        height: px2rem(302px * 2);
+        margin-top: px2rem(20px * 2);
+        >div {
+            height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
+        }
+        .el-carousel__container {
+            height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
+        }
+        .el-carousel__item h3 {
+            color: #475669;
+            font-size: 18px;
+            opacity: 0.75;
+            line-height: px2rem(302px * 2 - 60px * 2 - 25px * 2);
+            margin: 0;
+            text-align: center;
+        }
+        .el-carousel__item:nth-child(2n) {
+            // background-color: #99a9bf;
+        }
+        .el-carousel__item:nth-child(2n+1) {
+            // background-color: #d3dce6;
+        }
+    }
+    &-bg-execution-log {
+        width: 939px;
+        height: 554px;
+        width: px2rem(939px * 2);
+        height: px2rem(554px * 2 - 182px);
+        background-image: url('../../assets/card-bg/frame_zxrz.png');
+    }
+    &-bg-live-monitoring {
+        width: 943px;
+        height: 939px;
+        width: px2rem(472px * 2);
+        height: px2rem(469px * 2);
+        background-image: url('../../assets/card-bg/frame_skjc@2x.png');
+        .livec {
+            height: px2rem((469px * 2 - 60px * 2 - 25px *2)/2 - 10px*2);
+            margin-top: px2rem(20px *2);
+            overflow: hidden;
+        }
+    }
+}

src/components/Card/index.tsx

@@ -9,6 +9,7 @@ export type CardType =
   | 'incident-plan'
   | 'emergency-linkage'
   | 'execution-log'
+  | 'accident-scene'
   | 'live-monitoring';
 
 export default defineComponent({

src/views/IncidentDetail/AccidentCard/index.tsx

@@ -0,0 +1,66 @@
+import Card from '@/components/Card';
+import { BaseMediaUrl } from '@/constants/constants';
+import { useIncidentStore } from '@/store';
+import { time } from 'console';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue-demi';
+
+export default defineComponent({
+  name: 'AccidentCard',
+  setup() {
+    const store = useIncidentStore();
+
+    const liveRef = ref<HTMLElement>();
+    const timer = ref();
+    const current = ref(0);
+
+    const carousel = ref(null);
+    onMounted(() => { 
+      setTimeout(() => {
+        carousel.value.setActiveItem(0);
+      }, 500);
+    })
+
+    onUnmounted(() => {
+      clearInterval(timer.value);
+    });
+    // debugger
+
+    return () => (
+      <Card cardType="accident-scene">
+        <div>
+          <el-carousel ref={carousel} autoplay={false} arrow="always">
+            {(store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).map(
+              (item) => (
+                <el-carousel-item>
+                  <img
+                    style="height:100%;width:100%;object-fit: contain;"
+                    src={
+                      item
+                    }
+                  />
+                </el-carousel-item>
+              ),
+            )}
+            {(store.incidentDetail?.baseInfo?.video?.split(',') ?? []).map(
+              (item) => (
+                <el-carousel-item>
+                  <video
+                    style="height:100%;width:100%"
+                    src={BaseMediaUrl + item}
+                    controls
+                  />
+                </el-carousel-item>
+              ),
+            )}
+          </el-carousel>
+        </div>
+      </Card>
+    );
+  },
+});

src/views/IncidentDetail/CommandChainCard/index.tsx

@@ -1,13 +1,22 @@
 import Card from '@/components/Card';
-import { computed, defineComponent } from 'vue-demi';
+import { computed, defineComponent,onMounted } from 'vue-demi';
 // @ts-ignore
 import command from '@/assets/icons/detail/command@2x.png';
 // @ts-ignore
 import co_organized from '@/assets/icons/detail/co_organized@2x.png';
 // @ts-ignore
 import host from '@/assets/icons/detail/host@2x.png';
+// @ts-ignore
+import main_organized from '@/assets/icons/detail/department@2x.png';
+// @ts-ignore
+import co_organizer from '@/assets/icons/detail/co_organizer@2x.png';
+// @ts-ignore
+import bg_zbm from '@/assets/card-bg/bg_zbm@2x.png';
+
 import { useCommonStore, useIncidentStore } from '@/store';
 
+
+
 export default defineComponent({
   name: 'CommandChainCard',
   setup() {
@@ -18,10 +27,24 @@ export default defineComponent({
       commonStore.globalDict['zhdd_org_upload']?.find(
         (i) => i?.dictValue?.toString() === value?.toString(),
       )?.dictLabel ?? '-';
+    onMounted(() => {
+
+
+    });
 
+    var templist = store?.incidentDetail?.baseInfo?.assistDept?.split(',');
+    const xblist = templist == undefined ? [] : templist ;
+    
+    // const xblist = ['2', '2', '2', '2'];
+    // console.log(xblist);
+
+    // console.log(xblist.length == 0);
+
+
+    // debugger
     return () => (
       <Card cardType="command-chain">
-        <div class="command-chain-container">
+        {/* <div class="command-chain-container" >
           <div class="chain-item">
             <span class="title">指挥部门</span>
             <span class="desc">市交通运输局</span>
@@ -43,6 +66,49 @@ export default defineComponent({
             </span>
             <img class="logo" src={host} alt="" />
           </div>
+        </div> */}
+        <div class="command-chain-container" id="ss" style="position:relative">
+          <div class="main-dept">
+            <div>
+              <div class="dept" id="11" datatype="1">
+                <img src={main_organized} />
+                主办部门
+              </div>
+              <div class="deptline"></div>
+            </div>
+
+            <div class="dept-list">
+              <div class="dept-name" id="22">
+                <div></div>
+                {getDept(store.incidentDetail?.baseInfo?.madinDept)}
+              </div>
+            </div>
+          </div>
+          <div class="main-dept" v-show={xblist.length!=0}>
+            <div>
+              <div class="dept" datatype="2">
+                <img src={co_organizer} />
+                协办部门
+              </div>
+              <div class="deptline"></div>
+            </div>
+
+            <div class="dept-list">
+              <div
+                class="leftline"
+                style="position: absolute;background: white;width: 1px;left: 0;"></div>
+              {xblist
+                ? xblist!
+                : [].map((item, index) => (
+                    <div
+                      class="dept-name"
+                      datatype={index == xblist.length - 1 ? '' : '0'}>
+                      <div></div>
+                      {getDept(item)}
+                    </div>
+                  ))}
+            </div>
+          </div>
         </div>
       </Card>
     );

src/views/IncidentDetail/IncidentInfoCard/index.tsx

@@ -7,6 +7,13 @@ import IconLevel from '@/assets/icons/detail/level@2x.png';
 import IconSource from '@/assets/icons/detail/source@2x.png';
 // @ts-ignore
 import IconStyle from '@/assets/icons/detail/style@2x.png';
+
+// @ts-ignore
+import IconLevel2 from '@/assets/icons/detail/level2@2x.png';
+// @ts-ignore
+import IconSource2 from '@/assets/icons/detail/source2@2x.png';
+// @ts-ignore
+import IconStyle2 from '@/assets/icons/detail/style2@2x.png';
 // @ts-ignore
 import IconTitle from '@/assets/icons/detail/title@2x.png';
 import { useCommonStore, useIncidentStore } from '@/store';
@@ -24,27 +31,27 @@ export default defineComponent({
     const store = useIncidentStore();
     const commonStore = useCommonStore();
     const list = computed(() => [
-      {
-        label: '事件标题',
-        icon: IconTitle,
-        prop: 'name' as const,
-        value: store.incidentDetail?.baseInfo?.name,
-      },
+      // {
+      //   label: '事件标题',
+      //   icon: IconTitle,
+      //   prop: 'name' as const,
+      //   value: store.incidentDetail?.baseInfo?.name,
+      // },
       {
         label: '事件类型',
-        icon: IconStyle,
+        icon: IconStyle2,
         prop: 'type' as const,
         dict: 'zhdd_incident_type' as const,
       },
       {
         label: '事件来源',
-        icon: IconSource,
+        icon: IconSource2,
         prop: 'source' as const,
         dict: 'zhdd_incident_source' as const,
       },
       {
         label: '事件等级',
-        icon: IconLevel,
+        icon: IconLevel2,
         prop: 'level' as const,
         dict: 'zhdd_incident_level' as const,
       },
@@ -52,12 +59,13 @@ export default defineComponent({
 
     return () => (
       <Card cardType="incident-info">
+        <div class="info-title">{ store.incidentDetail?.baseInfo?.name}</div>
         <div class="info-container">
           {list.value.map((item, idx) => (
             <div class="info-item">
               <div class="info-item-lebel" data-idx={idx}>
                 <img src={item.icon} alt={item.label} />
-                <span>{item.label}</span>
+                {/* <span>{item.label}</span> */}
               </div>
               <div class="info-item-value">
                 {(item.value

src/views/IncidentDetail/LiveMonitoringCard/index.tsx

@@ -19,110 +19,20 @@ export default defineComponent({
     const timer = ref();
     const current = ref(0);
 
-    const length = computed(
-      () =>
-        (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).length +
-        (store.incidentDetail?.baseInfo?.video?.split(',') ?? []).length,
-    );
-
-    // onMounted(() => {
-    //   let itemWidth = 0;
-    //   let liveWidth = 0;
-    //   let contentWidth = 0;
-    //   timer.value = setInterval(() => {
-    //     if (liveRef.value) {
-    //       itemWidth =
-    //         itemWidth ||
-    //         (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
-    //       contentWidth =
-    //         contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
-    //       liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
-    //       const count = Math.floor(liveWidth / (contentWidth || 1));
-
-    //       const transformCount = length.value / count || 1;
-
-    //       current.value += 1;
-
-    //       if (current.value < transformCount) {
-    //         liveRef.value.style.transform = `translateX(-${
-    //           itemWidth * count * current.value
-    //         }px)`;
-    //       } else {
-    //         current.value = 0;
-    //         liveRef.value.style.transform = `translateX(0px)`;
-    //       }
-    //     }
-    //   }, 2000);
-    // });
-
-    const handleChangeArrow = (arrow: 'left' | 'right') => {
-      let itemWidth = 0;
-      let liveWidth = 0;
-      let contentWidth = 0;
-      if (liveRef.value) {
-        itemWidth =
-          itemWidth ||
-          (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
-        contentWidth =
-          contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
-        liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
-        const count = Math.floor(liveWidth / (contentWidth || 1));
-
-        const transformCount = length.value / count || 1;
-
-        current.value =
-          arrow === 'right' ? current.value + 1 : current.value - 1;
-
-        if (current.value < transformCount && current.value >= 0) {
-          liveRef.value.style.transform = `translateX(-${
-            itemWidth * count * current.value
-          }px)`;
-        } else {
-          current.value = 0;
-          liveRef.value.style.transform = `translateX(0px)`;
-        }
-      }
-    };
-
-    onUnmounted(() => {
-      clearInterval(timer.value);
-    });
 
     return () => (
       <Card cardType="live-monitoring">
-        <el-button
-          icon="el-icon-arrow-left"
-          onClick={() => handleChangeArrow('left')}
-          type="info"
-          circle
-        />
-        <el-button
-          icon="el-icon-arrow-right"
-          onClick={() => handleChangeArrow('right')}
-          type="info"
-          circle
-        />
-        <div class="live-container">
-          <div
-            style={{
-              width: `calc((1.0911458333rem + 10px) * ${length.value}) `,
-            }}
-            ref={liveRef}>
-            {(store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).map(
-              (item) => (
-                <div class="live-item">
-                  <img src={BaseMediaUrl + item} />
-                </div>
-              ),
-            )}
-            {(store.incidentDetail?.baseInfo?.video?.split(',') ?? []).map(
-              (item) => (
-                <div class="live-item">
-                  <video src={BaseMediaUrl + item} controls />
-                </div>
-              ),
-            )}
-          </div>
+        <div class="livec">
+          <img
+            style="width: 100%;height: 100%;"
+            src="https://img1.baidu.com/it/u=1650334584,1209303936&fm=253&fmt=auto&app=120&f=JPEG?w=1129&h=642"
+          />
+        </div>
+        <div class="livec">
+          <img
+            style="width: 100%;height: 100%;"
+            src="https://img1.baidu.com/it/u=1650334584,1209303936&fm=253&fmt=auto&app=120&f=JPEG?w=1129&h=642"
+          />
         </div>
       </Card>
     );

src/views/IncidentDetail/index.scss

@@ -1,631 +1,636 @@
 @use 'sass:math';
 @import '../../styles/utils.scss';
-
 .live-video-container-left {
-  position: absolute;
-  z-index: 1;
-  height: 100%;
-  width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
-
-  animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-
-  &.right {
-    right: 0;
-    animation: fadeInRight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-    .live-video-container {
-      left: unset;
-      right: px2rem(30px * 2);
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
+    animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    &.right {
+        right: 0;
+        animation: fadeInRight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+        .live-video-container {
+            left: unset;
+            right: px2rem(30px * 2);
+        }
     }
-  }
 }
 
 .live-video-container {
-  background-image: url('../../assets/card-bg/live_video_bg.png');
-  background-size: cover;
-  position: absolute;
-  left: px2rem(30px * 2);
-  top: calc(50% + px2rem(52px * 2));
-  transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
-  width: px2rem(1964px);
-  height: px2rem(233.5px * 2) * 3 + px2rem(34px * 2) + px2rem(32px * 2) +
-    px2rem(25px * 2);
-  // display: flex;
-  // flex-wrap: wrap;
-  box-sizing: border-box;
-  padding: px2rem(50px) px2rem(74px) px2rem(64px);
-
-  .live-video-close {
-    position: absolute;
-    right: px2rem(-60px);
-    // right: px2rem(0px);
-    top: 50%;
-    transform: translateY(-50%);
-    width: px2rem(60px);
-    height: px2rem(170px);
-    background-image: url('../../assets/card-bg/pack.png');
+    background-image: url('../../assets/card-bg/live_video_bg.png');
     background-size: cover;
-    cursor: pointer;
-  }
-
-  .popup-container {
-    background-image: url('../../assets/card-bg/frame_video.png');
-
-    float: left;
-    margin-bottom: px2rem(34px);
-
-    &:first-child,
-    &:nth-child(3),
-    &:nth-child(5) {
-      margin-right: px2rem(35px);
-    }
-
-    &:nth-child(5),
-    &:nth-child(6) {
-      margin-bottom: unset;
-    }
-
-    width: px2rem(445px * 2);
-    height: px2rem(233.5px * 2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    video {
-      max-height: 100%;
-      max-width: 100%;
-      height: px2rem(442px);
-      width: px2rem(862px);
-    }
-  }
-}
-
-.incident-detail-page-container {
-  flex: 1;
-  position: absolute;
-  width: 100%;
-  height: 100vh;
-
-  .detail-left,
-  .detail-right {
     position: absolute;
+    left: px2rem(30px * 2);
     top: calc(50% + px2rem(52px * 2));
     transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
-    height: max-content;
-    z-index: 1;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .detail-left {
-    left: px2rem(30px * 2);
-    width: calc(px2rem(470px * 2) * 2 + px2rem(21px * 2));
-    // height: calc(px2rem(472px) * 2 + px2rem(21px));
-  }
-
-  .detail-right {
-    right: px2rem(30px * 2);
-    width: px2rem(939px * 2);
-    // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
-  }
-
-  .echarts {
-    width: px2rem(642px * 2);
-    height: px2rem(887px * 2);
-    position: absolute;
-    top: px2rem(38px * 2);
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .card-container {
-    // position: absolute;
-    // top: px2rem(83px);
-
-    &-bg-incident-info {
-      // left: px2rem(30px);
-      margin-right: px2rem(21px * 2);
-
-      .info-container {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        justify-content: center;
-      }
-
-      .info-item {
-        display: flex;
-        align-items: center;
-        padding-bottom: px2rem(52px);
-
-        &:last-child {
-          padding-bottom: 0;
-        }
-
-        line-height: px2rem(50px * 2);
-        height: px2rem(50px * 2);
-        font-size: px2rem(18px * 2);
-        flex: 1;
-        width: 100%;
-
-        .info-item-lebel {
-          padding: 0 px2rem(20px * 2);
-          border-top-left-radius: px2rem(50px * 2);
-          border-bottom-left-radius: px2rem(50px * 2);
-          display: flex;
-          align-items: center;
-
-          img {
-            min-width: 13px;
-            min-height: 13px;
-            width: px2rem(18px * 2);
-            height: px2rem(18px * 2);
-          }
-
-          span {
-            padding-left: px2rem(13px * 2);
-          }
-
-          &[data-idx='0'] {
-            background: linear-gradient(to right, #035fd8, #1acfff);
-          }
-
-          &[data-idx='1'] {
-            background: linear-gradient(to right, #ff8b45, #f6b35c);
-          }
-
-          &[data-idx='2'] {
-            background: linear-gradient(to right, #8d48e9, #d789ff);
-          }
-
-          &[data-idx='3'] {
-            background: linear-gradient(to right, #05b382, #48e9c2);
-          }
-        }
-
-        .info-item-value {
-          flex: 1;
-          padding: 0 px2rem(20px * 2);
-          background-color: #01016b;
-          border-top-right-radius: px2rem(50px * 2);
-          border-bottom-right-radius: px2rem(50px * 2);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    &-bg-command-chain {
-      // left: px2rem(521px);
-      .command-chain-container {
-        position: relative;
-
-        .chain-item {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          top: px2rem(24px * 2);
-          width: px2rem(165px * 2);
-          height: px2rem(106px * 2);
-          box-sizing: border-box;
-          margin-bottom: calc(px2rem(65px * 2) - 2px);
-
-          border: 2px solid #feb459;
-          border-top-left-radius: 10px;
-          border-top-right-radius: 10px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-
-          .title {
-            font-size: px2rem(17px * 2);
-            color: #feb459;
-            padding-bottom: px2rem(13px * 2);
-          }
-
-          .desc {
-            text-align: center;
-            box-sizing: border-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 100%;
-            padding: 0 px2rem(6px * 2);
-            font-size: px2rem(13px * 2);
-          }
-
-          .logo {
-            position: absolute;
-            width: px2rem(40px * 2);
-            height: px2rem(40px * 2);
-            // min-width: 20px;
-            // min-height: 20px;
-            z-index: 1;
-            bottom: px2rem(-40px * 2);
-            left: 50%;
-            transform: translateX(-50%)
-              translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
-          }
-
-          &::after {
-            content: '';
-            position: absolute;
-            left: -2px;
-            bottom: calc(px2rem(-65px * 2) - 2px);
-            width: 0;
-            height: 0;
-            border-top: px2rem(65px * 2) solid #feb459;
-            border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
-            border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
-          }
-
-          &:nth-child(3),
-          &:nth-child(2) {
-            bottom: px2rem((40px - 40px) * 2);
-            margin-bottom: 0;
-            top: unset;
-            left: px2rem(20px * 2);
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            border-color: #33d3a8;
-            transform: unset;
-
-            .title {
-              color: #33d3a8;
-            }
-
-            .logo {
-              bottom: unset;
-              top: px2rem(-40px * 2);
-              left: 50%;
-              transform: translateX(-50%)
-                translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
-            }
-
-            border-bottom-left-radius: 10px;
-            border-bottom-right-radius: 10px;
-
-            &::after {
-              position: absolute;
-              left: -2px;
-              bottom: unset;
-              top: calc(px2rem(-65px * 2) - 2px);
-              border-bottom: px2rem(65px * 2) solid #33d3a8;
-              border-top: unset;
-              border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
-              border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
-            }
-          }
-
-          &:nth-child(3) {
-            left: unset;
-            right: px2rem(20px * 2);
-            border-color: #1bbbf8;
-
-            .title {
-              color: #1bbbf8;
-            }
-
-            &::after {
-              border-bottom-color: #1bbbf8;
-            }
-          }
-        }
-      }
+    width: px2rem(1964px);
+    height: px2rem(233.5px * 2) * 3 + px2rem(34px * 2) + px2rem(32px * 2) + px2rem(25px * 2);
+    // display: flex;
+    // flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: px2rem(50px) px2rem(74px) px2rem(64px);
+    .live-video-close {
+        position: absolute;
+        right: px2rem(-60px);
+        // right: px2rem(0px);
+        top: 50%;
+        transform: translateY(-50%);
+        width: px2rem(60px);
+        height: px2rem(170px);
+        background-image: url('../../assets/card-bg/pack.png');
+        background-size: cover;
+        cursor: pointer;
     }
-
-    &-bg-incident-plan {
-      // top: px2rem(482px + 83px);
-      // left: px2rem(30px);
-      margin-top: px2rem(21px * 2);
-      margin-right: px2rem(21px * 2);
-
-      .plan-container {
-        .el-checkbox__inner {
-          width: px2rem(16px * 2);
-          min-width: 14px;
-          height: px2rem(16px * 2);
-          min-height: 14px;
-          background-color: transparent;
-
-          &::after {
-            width: px2rem(10px);
-            height: px2rem(20px);
-            left: px2rem(8px);
-          }
+    .popup-container {
+        background-image: url('../../assets/card-bg/frame_video.png');
+        float: left;
+        margin-bottom: px2rem(34px);
+        &:first-child,
+        &:nth-child(3),
+        &:nth-child(5) {
+            margin-right: px2rem(35px);
         }
-
-        .el-checkbox__label {
-          color: #fff;
-          padding-left: px2rem(28px);
+        &:nth-child(5),
+        &:nth-child(6) {
+            margin-bottom: unset;
         }
-
-        .plan-item {
-          display: flex;
-          align-items: center;
-          margin-right: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          padding-bottom: px2rem(20px);
-
-          & > span {
-            font-size: px2rem(18px * 2);
-            font-weight: 400;
-          }
+        width: px2rem(445px * 2);
+        height: px2rem(233.5px * 2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        video {
+            max-height: 100%;
+            max-width: 100%;
+            height: px2rem(442px);
+            width: px2rem(862px);
         }
-      }
     }
+}
 
-    &-bg-emergency-linkage {
-      // top: px2rem(482px + 83px);
-      // left: px2rem(521px);
-      margin-top: px2rem(21px * 2);
-
-      .linkage-chain-container {
+.incident-detail-page-container {
+    flex: 1;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    .detail-left,
+    .detail-right {
+        position: absolute;
+        top: calc(50% + px2rem(52px * 2));
+        transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
+        height: max-content;
+        z-index: 1;
         display: flex;
         flex-wrap: wrap;
-        align-items: center;
-
-        .linkage-item {
-          width: 50%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          font-size: px2rem(18px * 2);
-          cursor: pointer;
-
-          img {
-            width: px2rem(117px * 2);
-            height: px2rem(102px * 2);
-          }
-
-          span {
-            margin-top: px2rem(10px * 2);
-            margin-bottom: px2rem(10px * 2);
-            color: #87baf8;
-          }
-        }
-      }
     }
-
-    &-bg-execution-log {
-      // right: px2rem(22px);
-      position: relative;
-
-      &::before {
-        content: '';
+    .detail-left {
+        left: px2rem(30px * 2);
+        width: calc(px2rem(480px * 2) * 2 + px2rem(21px * 2));
+        // height: calc(px2rem(472px) * 2 + px2rem(21px));
+    }
+    .detail-right {
+        right: px2rem(30px * 2);
+        width: px2rem(939px * 2);
+        // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
+    }
+    .echarts {
+        width: px2rem(642px * 2);
+        height: px2rem(887px * 2);
         position: absolute;
-        width: 14px;
-        height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
-
-        background: #112692;
-        top: calc(px2rem(80px + 20px));
+        top: px2rem(38px * 2);
         left: 50%;
         transform: translateX(-50%);
-        z-index: -1;
-      }
-
-      .execution-log-container {
-        padding: px2rem(20px * 2) 0;
-
-        .log-item {
-          position: relative;
-          margin-bottom: px2rem(40px * 2);
-          min-height: px2rem(48px * 2);
-
-          .log-label {
-            font-size: px2rem(18px * 2);
-            font-weight: 400;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-            text-align: right;
-            width: calc(50% - 42px);
-            position: absolute;
-            left: 0;
-
-            & > span {
-              justify-content: right;
-              display: flex;
-              overflow: hidden;
-
-              &:last-child {
-                font-size: px2rem(16px * 2);
-              }
+    }
+    .card-container {
+        // position: absolute;
+        // top: px2rem(83px);
+        &-bg-incident-info {
+            // left: px2rem(30px);
+            margin-right: px2rem(21px * 2);
+            .info-title {
+                margin-top: px2rem(20px * 2);
+                background: url('../../assets/card-bg/kuang_biaoti@2x.png') no-repeat;
+                background-position: center;
+                background-size: 100% 100%;
+                max-height: px2rem(56px * 2);
+                line-height: px2rem(56px * 2);
+                text-align: center;
+                font-size: px2rem(22px * 2);
+                font-weight: 700;
+                color: #0ed0ff;
             }
-          }
-
-          .log-time {
-            height: px2rem(48px * 2);
-            line-height: px2rem(48px * 2);
-            background-color: #3db3ea;
-            font-size: px2rem(24px * 2);
-            font-family: DIN Alternate, DIN Alternate-Bold;
-            font-weight: 700;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateY(-50%) translateX(px2rem(-24px));
-            border-top-left-radius: px2rem(48px * 2);
-            border-bottom-left-radius: px2rem(48px * 2);
-            padding-left: px2rem(58px * 2);
-            padding-right: px2rem(10px * 2);
-
-            .logo-icon {
-              position: absolute;
-              height: px2rem(44px * 2);
-              width: px2rem(44px * 2);
-              background-color: #092093;
-              top: px2rem(2px * 2);
-              left: px2rem(2px * 2);
-              border-radius: px2rem(44px * 2);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              .el-icon {
-                font-size: px2rem(40px);
-              }
+            .info-container {
+                padding-top: px2rem(30px * 2);
+                display: flex;
+                flex-direction: column;
+                align-items: start;
+                justify-content: center;
             }
-
-            &::before,
-            &::after {
-              content: '';
-              right: px2rem(-18px * 2);
-              position: absolute;
-              border-left: px2rem(18px * 2) solid transparent;
-              border-right: px2rem(18px * 2) solid transparent;
+            .info-item {
+                display: flex;
+                align-items: center;
+                padding-bottom: px2rem(20px);
+                &:last-child {
+                    padding-bottom: 0;
+                }
+                line-height: px2rem(50px * 2);
+                height: px2rem(50px * 2);
+                font-size: px2rem(18px * 2);
+                flex: 1;
+                width: 100%;
+                .info-item-lebel {
+                    // padding: 0 px2rem(20px * 2);
+                    z-index: 1;
+                    // border-top-left-radius: px2rem(50px * 2);
+                    // border-bottom-left-radius: px2rem(50px * 2);
+                    display: flex;
+                    align-items: center;
+                    img {
+                        min-width: 13px;
+                        min-height: 13px;
+                        width: px2rem(50px * 2);
+                        height: px2rem(50px * 2);
+                    }
+                    span {
+                        padding-left: px2rem(13px * 2);
+                    }
+                    // &[data-idx='0'] {
+                    //     background: linear-gradient(to right, #035fd8, #1acfff);
+                    // }
+                    // &[data-idx='1'] {
+                    //     background: linear-gradient(to right, #ff8b45, #f6b35c);
+                    // }
+                    // &[data-idx='2'] {
+                    //     background: linear-gradient(to right, #8d48e9, #d789ff);
+                    // }
+                    // &[data-idx='3'] {
+                    //     background: linear-gradient(to right, #05b382, #48e9c2);
+                    // }
+                }
+                .info-item-value {
+                    flex: 1;
+                    margin-left: px2rem(-20px * 2);
+                    height: px2rem(50px * 2);
+                    padding: 0 px2rem(36px * 2);
+                    background-color: #01016b;
+                    // border-top-right-radius: px2rem(50px * 2);
+                    // border-bottom-right-radius: px2rem(50px * 2);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
-
-            &::before {
-              border-top: px2rem(24px * 2) solid #3db3ea;
+        }
+        &-bg-command-chain {
+            // left: px2rem(521px);
+            margin-right: px2rem(21px * 2);
+            .command-chain-container {
+                position: relative;
+                .chain-item {
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(24px * 2);
+                    width: px2rem(165px * 2);
+                    height: px2rem(106px * 2);
+                    box-sizing: border-box;
+                    margin-bottom: calc(px2rem(65px * 2) - 2px);
+                    border: 2px solid #feb459;
+                    border-top-left-radius: 10px;
+                    border-top-right-radius: 10px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    .title {
+                        font-size: px2rem(17px * 2);
+                        color: #feb459;
+                        padding-bottom: px2rem(13px * 2);
+                    }
+                    .desc {
+                        text-align: center;
+                        box-sizing: border-box;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        width: 100%;
+                        padding: 0 px2rem(6px * 2);
+                        font-size: px2rem(13px * 2);
+                    }
+                    .logo {
+                        position: absolute;
+                        width: px2rem(40px * 2);
+                        height: px2rem(40px * 2);
+                        // min-width: 20px;
+                        // min-height: 20px;
+                        z-index: 1;
+                        bottom: px2rem(-40px * 2);
+                        left: 50%;
+                        transform: translateX(-50%) translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
+                    }
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: -2px;
+                        bottom: calc(px2rem(-65px * 2) - 2px);
+                        width: 0;
+                        height: 0;
+                        border-top: px2rem(65px * 2) solid #feb459;
+                        border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
+                        border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
+                    }
+                    &:nth-child(3),
+                    &:nth-child(2) {
+                        bottom: px2rem((40px - 40px) * 2);
+                        margin-bottom: 0;
+                        top: unset;
+                        left: px2rem(20px * 2);
+                        border-top-left-radius: 0;
+                        border-top-right-radius: 0;
+                        border-color: #33d3a8;
+                        transform: unset;
+                        .title {
+                            color: #33d3a8;
+                        }
+                        .logo {
+                            bottom: unset;
+                            top: px2rem(-40px * 2);
+                            left: 50%;
+                            transform: translateX(-50%) translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
+                        }
+                        border-bottom-left-radius: 10px;
+                        border-bottom-right-radius: 10px;
+                        &::after {
+                            position: absolute;
+                            left: -2px;
+                            bottom: unset;
+                            top: calc(px2rem(-65px * 2) - 2px);
+                            border-bottom: px2rem(65px * 2) solid #33d3a8;
+                            border-top: unset;
+                            border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
+                            border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
+                        }
+                    }
+                    &:nth-child(3) {
+                        left: unset;
+                        right: px2rem(20px * 2);
+                        border-color: #1bbbf8;
+                        .title {
+                            color: #1bbbf8;
+                        }
+                        &::after {
+                            border-bottom-color: #1bbbf8;
+                        }
+                    }
+                }
+                .main-dept {
+                    margin-bottom: px2rem(24px * 2);
+                    >div {
+                        display: table-cell;
+                        position: relative;
+                        width: 38%;
+                    }
+                }
+                .deptline {
+                    position: absolute;
+                    background: white;
+                    width: 8%;
+                    height: 1px;
+                    right: 0;
+                    top: 50%;
+                }
+                .dept-list {
+                    display: table-cell;
+                    padding-left: px2rem(20px * 2);
+                    .leftline {
+                        top: px2rem(50px);
+                        bottom: px2rem(50px);
+                    }
+                }
+                text-align: right;
+                .dept-name {
+                    >div {
+                        position: absolute;
+                        height: 1px;
+                        background: white;
+                        left: px2rem(20px * -2);
+                        width: px2rem(20px * 2);
+                        top: px2rem(50px);
+                    }
+                    position: relative;
+                    background-image: url('../../assets/card-bg/bg_zbm@2x.png');
+                    width: px2rem(241px * 2);
+                    height: px2rem(50px * 2);
+                    background-size: 100% 100%;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    text-align: center;
+                    line-height: px2rem(50px * 2);
+                    font-size: px2rem(16px * 2);
+                    &[datatype='0'] {
+                        margin-bottom: px2rem(10px * 2);
+                    }
+                    // margin-bottom: px2rem(10px * 2);
+                }
+                .dept {
+                    width: px2rem(131px * 2);
+                    height: px2rem(43px * 2);
+                    background-size: 100% 100%;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    text-align: center;
+                    line-height: px2rem(43px * 2);
+                    font-size: px2rem(16px * 2);
+                    font-weight: 700;
+                    // float: left;
+                    margin: 0;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    &[datatype='1'] {
+                        background-image: url('../../assets/card-bg/bg_zbbm@2x.png');
+                        color: #49ffc7;
+                    }
+                    &[datatype='2'] {
+                        background-image: url('../../assets/card-bg/bg_xbbm@2x.png');
+                        color: #fff75b;
+                    }
+                    img {
+                        width: px2rem(18px * 2);
+                        height: px2rem(18px * 2);
+                        vertical-align: middle;
+                        margin-right: px2rem(9px * 2);
+                    }
+                }
             }
-
-            &::after {
-              bottom: 0;
-              border-bottom: px2rem(24px * 2) solid #3db3ea;
+        }
+        &-bg-incident-plan {
+            // top: px2rem(482px + 83px);
+            // left: px2rem(30px);
+            margin-top: px2rem(21px * 2);
+            margin-right: px2rem(21px * 2);
+            .plan-container {
+                .el-checkbox__inner {
+                    width: px2rem(16px * 2);
+                    min-width: 14px;
+                    height: px2rem(16px * 2);
+                    min-height: 14px;
+                    background-color: transparent;
+                    &::after {
+                        width: px2rem(10px);
+                        height: px2rem(20px);
+                        left: px2rem(8px);
+                    }
+                }
+                .el-checkbox__label {
+                    color: #fff;
+                    padding-left: px2rem(28px);
+                }
+                .plan-item {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    padding-bottom: px2rem(20px);
+                    &>span {
+                        font-size: px2rem(18px * 2);
+                        font-weight: 400;
+                    }
+                }
             }
-          }
-
-          &.log-item-3,
-          &.log-item-1 {
-            .log-label {
-              left: unset;
-              right: 0;
-              text-align: left;
-
-              & > span {
-                justify-content: left;
-              }
+        }
+        &-bg-emergency-linkage {
+            // top: px2rem(482px + 83px);
+            // left: px2rem(521px);
+            margin-top: px2rem(21px * 2);
+            .linkage-chain-container {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                .linkage-item {
+                    width: 50%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    font-size: px2rem(18px * 2);
+                    cursor: pointer;
+                    img {
+                        width: px2rem(117px * 2);
+                        height: px2rem(102px * 2);
+                    }
+                    span {
+                        margin-top: px2rem(10px * 2);
+                        margin-bottom: px2rem(10px * 2);
+                        color: #87baf8;
+                    }
+                }
             }
-
-            .log-time {
-              left: unset;
-              right: 50%;
-              top: 50%;
-              transform: translateY(-50%) translateX(px2rem(24px));
-              border-top-left-radius: unset;
-              border-bottom-left-radius: unset;
-
-              border-top-right-radius: px2rem(48px * 2);
-              border-bottom-right-radius: px2rem(48px * 2);
-
-              padding-left: px2rem(10px * 2);
-              padding-right: px2rem(58px * 2);
-              background-color: #09b283;
-
-              .logo-icon {
-                top: px2rem(2px * 2);
-                left: unset;
-                right: px2rem(2px * 2);
-                border-radius: px2rem(44px * 2);
-              }
-
-              &::before,
-              &::after {
+        }
+        &-bg-execution-log {
+            // right: px2rem(22px);
+            position: relative;
+            &::before {
                 content: '';
-                right: unset;
-                left: px2rem(-18px * 2);
-              }
-
-              &::before {
-                border-top-color: #09b283;
-              }
-
-              &::after {
-                border-bottom-color: #09b283;
-              }
-            }
-          }
-
-          &.log-item-3 {
-            .log-time {
-              background-color: #eaa33f;
-
-              &::before {
-                border-top-color: #eaa33f;
-              }
-
-              &::after {
-                border-bottom-color: #eaa33f;
-              }
+                position: absolute;
+                width: 14px;
+                height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
+                background: #112692;
+                top: calc(px2rem(80px + 20px));
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: -1;
             }
-          }
-
-          &.log-item-2 {
-            .log-time {
-              background-color: #c172f9;
-
-              &::before {
-                border-top-color: #c172f9;
-              }
-
-              &::after {
-                border-bottom-color: #c172f9;
-              }
+            .execution-log-container {
+                padding: px2rem(20px * 2) 0;
+                .log-item {
+                    position: relative;
+                    margin-bottom: px2rem(40px * 2);
+                    min-height: px2rem(48px * 2);
+                    .log-label {
+                        font-size: px2rem(18px * 2);
+                        font-weight: 400;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        text-align: right;
+                        width: calc(50% - 42px);
+                        position: absolute;
+                        left: 0;
+                        &>span {
+                            justify-content: right;
+                            display: flex;
+                            overflow: hidden;
+                            &:last-child {
+                                font-size: px2rem(16px * 2);
+                            }
+                        }
+                    }
+                    .log-time {
+                        height: px2rem(48px * 2);
+                        line-height: px2rem(48px * 2);
+                        background-color: #3db3ea;
+                        font-size: px2rem(24px * 2);
+                        font-family: DIN Alternate, DIN Alternate-Bold;
+                        font-weight: 700;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translateY(-50%) translateX(px2rem(-24px));
+                        border-top-left-radius: px2rem(48px * 2);
+                        border-bottom-left-radius: px2rem(48px * 2);
+                        padding-left: px2rem(58px * 2);
+                        padding-right: px2rem(10px * 2);
+                        .logo-icon {
+                            position: absolute;
+                            height: px2rem(44px * 2);
+                            width: px2rem(44px * 2);
+                            background-color: #092093;
+                            top: px2rem(2px * 2);
+                            left: px2rem(2px * 2);
+                            border-radius: px2rem(44px * 2);
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            .el-icon {
+                                font-size: px2rem(40px);
+                            }
+                        }
+                        &::before,
+                        &::after {
+                            content: '';
+                            right: px2rem(-18px * 2);
+                            position: absolute;
+                            border-left: px2rem(18px * 2) solid transparent;
+                            border-right: px2rem(18px * 2) solid transparent;
+                        }
+                        &::before {
+                            border-top: px2rem(24px * 2) solid #3db3ea;
+                        }
+                        &::after {
+                            bottom: 0;
+                            border-bottom: px2rem(24px * 2) solid #3db3ea;
+                        }
+                    }
+                    &.log-item-3,
+                    &.log-item-1 {
+                        .log-label {
+                            left: unset;
+                            right: 0;
+                            text-align: left;
+                            &>span {
+                                justify-content: left;
+                            }
+                        }
+                        .log-time {
+                            left: unset;
+                            right: 50%;
+                            top: 50%;
+                            transform: translateY(-50%) translateX(px2rem(24px));
+                            border-top-left-radius: unset;
+                            border-bottom-left-radius: unset;
+                            border-top-right-radius: px2rem(48px * 2);
+                            border-bottom-right-radius: px2rem(48px * 2);
+                            padding-left: px2rem(10px * 2);
+                            padding-right: px2rem(58px * 2);
+                            background-color: #09b283;
+                            .logo-icon {
+                                top: px2rem(2px * 2);
+                                left: unset;
+                                right: px2rem(2px * 2);
+                                border-radius: px2rem(44px * 2);
+                            }
+                            &::before,
+                            &::after {
+                                content: '';
+                                right: unset;
+                                left: px2rem(-18px * 2);
+                            }
+                            &::before {
+                                border-top-color: #09b283;
+                            }
+                            &::after {
+                                border-bottom-color: #09b283;
+                            }
+                        }
+                    }
+                    &.log-item-3 {
+                        .log-time {
+                            background-color: #eaa33f;
+                            &::before {
+                                border-top-color: #eaa33f;
+                            }
+                            &::after {
+                                border-bottom-color: #eaa33f;
+                            }
+                        }
+                    }
+                    &.log-item-2 {
+                        .log-time {
+                            background-color: #c172f9;
+                            &::before {
+                                border-top-color: #c172f9;
+                            }
+                            &::after {
+                                border-bottom-color: #c172f9;
+                            }
+                        }
+                    }
+                }
             }
-          }
-        }
-      }
-    }
-
-    &-bg-live-monitoring {
-      // top: px2rem(564px + 83px);
-      // right: px2rem(22px);
-      margin-top: px2rem(48px);
-
-      .el-button {
-        position: absolute;
-        z-index: 1;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        transition: var(--el-transition-duration);
-        background-color: var(--el-carousel-arrow-background);
-        height: px2rem(80px);
-        width: px2rem(80px);
-        font-size: px2rem(34px);
-
-        &:hover {
-          background-color: var(--el-carousel-arrow-hover-background);
-        }
-
-        &:first-child {
-          left: 0;
         }
-      }
-
-      .live-container {
-        overflow-x: hidden;
-        overflow-y: hidden;
-
-        > div {
-          width: calc(px2rem(419px) + 10px);
-          height: 100%;
-          display: flex;
-          transition: transform 0.5s;
-        }
-
-        .live-item {
-          width: px2rem(419px);
-          // height: px2rem(285px);
-          text-align: center;
-          margin-right: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex: 1;
-
-          img,
-          video {
-            max-width: 100%;
-            max-height: 100%;
-          }
+        &-bg-live-monitoring {
+            // top: px2rem(564px + 83px);
+            // right: px2rem(22px);
+            width: px2rem(472px * 2);
+            // margin-top: px2rem(48px);
+            .el-button {
+                position: absolute;
+                z-index: 1;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 0;
+                transition: var(--el-transition-duration);
+                background-color: var(--el-carousel-arrow-background);
+                height: px2rem(80px);
+                width: px2rem(80px);
+                font-size: px2rem(34px);
+                &:hover {
+                    background-color: var(--el-carousel-arrow-hover-background);
+                }
+                &:first-child {
+                    left: 0;
+                }
+            }
+            .live-container {
+                overflow-x: hidden;
+                overflow-y: auto;
+                >div {
+                    // width: calc(px2rem(419px) + 10px);
+                    height: 100%;
+                    display: flex;
+                    transition: transform 0.5s;
+                }
+                .live-item {
+                    width: px2rem(419px);
+                    // height: px2rem(285px);
+                    text-align: center;
+                    margin-right: 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex: 1;
+                    img,
+                    video {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                }
+            }
         }
-      }
+        &-bg-accident-scene {}
     }
-  }
-}
+}

src/views/IncidentDetail/index.tsx

@@ -14,6 +14,7 @@ import IncidentPlanCard from './IncidentPlanCard';
 import LiveMonitoringCard from './LiveMonitoringCard';
 import ExecutionLogCard from './ExecutionLogCard';
 import LiveVideoCard from './LiveVideoCard';
+import AccidentCard from './AccidentCard';
 import './index.scss';
 import { watch } from 'fs';
 import { isEmpty } from 'lodash';
@@ -100,16 +101,20 @@ export default defineComponent({
           {!markerStore.livevideovisible && (
             <div class="detail-left">
               <IncidentInfoCard />
+              <LiveMonitoringCard />
+              {/* <IncidentPlanCard /> */}
+              {/* <EmergencyLinkageCard /> */}
               <CommandChainCard />
-              <IncidentPlanCard />
-              <EmergencyLinkageCard />
+              <AccidentCard/>
             </div>
           )}
 
           {!daHuaStore.dahuaUserVisible && (
             <div class="detail-right">
+               <IncidentPlanCard />
               <ExecutionLogCard />
-              <LiveMonitoringCard />
+             
+              {/* <LiveMonitoringCard /> */}
             </div>
           )}
         </div>