feat:更新任务管理详情任务

chenyao

2025-12-09 b51a317c7c3db9757317f34902fe869caae130b9

feat:更新任务管理详情任务

 src/api/home/index.js

@@ -127,4 +127,23 @@
        method: 'post',
        data,
    })
}

// 执行机巢详情
export const NestDetailApi = params => {
  return request({
    url: '/drone-device-core/wayline/waylineJobInfo/taskDetails',
    method: 'get',
    params,
  })
}

// 导出任务报表
export const exportTaskReports = params => {
  return request({
    url: `/drone-device-core/wayline/waylineJobInfo/downloadJob`,
    method: 'get',
    responseType: 'blob',
    params,
  })
}

 src/api/playback/index.js

New file
@@ -0,0 +1,53 @@
import request from '@/axios'

/**
 * 获取视频开始时间、结束时间、耗费时间、视频地址
 * @param {*} params jobld 传入任务id
 * @returns
 */
export const getAttachVideoByJobId = (params) => {
  return request({
    url: `/blade-resource/attach/getAttachVideoByJobId`,
    method: 'get',
    params,
  })
}

/**
 * 根据任务id获取飞行日志信息
 * @param {*} params jobld 传入任务id
 * @returns
 */
export const findFlightLogInfoByJobId = (params) => {
  return request({
    url: `/drone-device-core/log/droneFlightLogInfo/findFlightLogInfoByJobId`,
    method: 'get',
    params,
  })
}

/**
 * 根据任务id获取任务附件列表
 * @param {*} params wayLineJobId 传入任务id
 * @returns
 */
export const aiImagesPage = (params, data) => {
  return request({
    url: `/blade-resource/attach/aiImagesPage`,
    method: 'post',
    params,
    data
  })
}


export const getWaylinejobLiveRecordPage = (params) => {
  return request({
    url: `/drone-device-core/waylinejob/waylinejobLiveRecord/page`,
    method: 'get',
    params: {
      ...params,
      status: 2
    },
  })
}

 src/assets/images/home/inspection-vector.png

 src/assets/images/playbackVideo/close.svg

New file
@@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315681">
<g id="Vector">
<path id="Vector_2" d="M13.987 12.0025L19.8638 17.8792L17.8792 19.8638L12.0025 13.987L6.12125 19.8638L4.13672 17.8792L10.018 12.0025L4.13672 6.12125L6.12125 4.13672L12.0025 10.018L17.8792 4.13672L19.8638 6.12125L13.987 12.0025Z" fill="white"/>
</g>
</g>
</svg>

 src/assets/images/routePlan/eventList/activePointBg.png

 src/assets/images/routePlan/eventList/activePointBg.svg

New file
@@ -0,0 +1,43 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315614">
<g id="Group 48097214" filter="url(#filter0_ddd_1062_1824)">
<g id="Rectangle 5842" filter="url(#filter1_i_1062_1824)">
<rect x="5.38281" y="4.90039" width="23" height="23" rx="3.5" stroke="white"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_ddd_1062_1824" x="0.882812" y="0.400391" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.732941 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1062_1824"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1062_1824" result="effect2_dropShadow_1062_1824"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_1062_1824" result="effect3_dropShadow_1062_1824"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1062_1824" result="shape"/>
</filter>
<filter id="filter1_i_1062_1824" x="4.88281" y="4.40039" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1062_1824"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/customDirName.png

 src/assets/images/routePlan/eventList/delete.png

 src/assets/images/routePlan/eventList/deng0.png

 src/assets/images/routePlan/eventList/deng0.svg

New file
@@ -0,0 +1,34 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315950">
<g id="Group 1321315924">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_2597_3762)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_2597_3762)">
<path id="Vector" d="M13.8312 34.0199C13.5753 34.0203 13.3251 33.9447 13.1123 33.8027C12.8995 33.6607 12.7335 33.4587 12.6356 33.2224C12.5376 32.986 12.512 32.7259 12.562 32.475C12.612 32.224 12.7354 31.9936 12.9165 31.8129L34.239 10.4904C34.359 10.3704 34.5015 10.2751 34.6583 10.2102C34.8151 10.1452 34.9832 10.1118 35.153 10.1118C35.3227 10.1118 35.4908 10.1452 35.6476 10.2102C35.8044 10.2751 35.9469 10.3704 36.0669 10.4904C36.187 10.6104 36.2822 10.7529 36.3471 10.9097C36.4121 11.0665 36.4455 11.2346 36.4455 11.4044C36.4455 11.5741 36.4121 11.7422 36.3471 11.899C36.2822 12.0558 36.187 12.1983 36.0669 12.3184L14.7445 33.6408C14.5023 33.8833 14.1738 34.0196 13.8312 34.0199ZM24.1126 12.6027C24.2404 12.6027 24.3668 12.5955 24.4946 12.5955C26.026 12.59 27.5322 12.9861 28.8628 13.7443L30.7424 11.8646C28.5453 10.4275 25.9204 9.79049 23.309 10.0607C20.6975 10.331 18.2587 11.492 16.4025 13.3486C14.5462 15.2052 13.3857 17.6442 13.1159 20.2557C12.8461 22.8672 13.4836 25.4919 14.9211 27.6888L16.8022 25.8063C16.0483 24.4871 15.6495 22.9949 15.6448 21.4754C15.6261 16.7784 19.4257 12.798 24.1126 12.6027ZM35.9219 21.441C35.9284 19.4679 35.4201 17.5272 34.4472 15.8106L32.5288 17.7305C33.4181 19.6675 33.5797 21.8601 32.984 23.9066C32.3882 25.9531 31.075 27.7164 29.2849 28.8735L28.6933 29.2526V32.0125H20.2557V30.0021L17.6709 32.5868V35.7459C17.6721 36.6086 18.0153 37.4355 18.6252 38.0455C19.2352 38.6555 20.0622 38.9987 20.9248 38.9998H28.0242C28.8868 38.9987 29.7138 38.6555 30.3237 38.0455C30.9337 37.4355 31.2769 36.6086 31.278 35.7459V33.5102C31.301 33.3766 31.301 33.2402 31.278 33.1067V30.6368C32.7201 29.5766 33.8921 28.1915 34.6989 26.5938C35.5057 24.9962 35.9247 23.2308 35.9219 21.441ZM28.0242 36.4151H20.9248C20.8369 36.4151 20.7499 36.3978 20.6687 36.3642C20.5876 36.3305 20.5138 36.2812 20.4517 36.2191C20.3895 36.157 20.3402 36.0832 20.3066 36.002C20.273 35.9208 20.2557 35.8338 20.2557 35.7459V34.5972H28.6933V35.7459C28.6933 35.9234 28.6228 36.0936 28.4973 36.2191C28.3718 36.3446 28.2016 36.4151 28.0242 36.4151Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_2597_3762" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2597_3762"/>
</filter>
<clipPath id="clip0_2597_3762">
<rect width="29" height="29" fill="white" transform="translate(10 10)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/deng1.png

 src/assets/images/routePlan/eventList/deng1.svg

New file
@@ -0,0 +1,33 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315952">
<g id="Group 1321315922">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_2597_3738)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M24.0883 15.2602C28.6937 15.2602 32.4379 19.0078 32.4379 23.6098C32.4379 27.2484 30.1105 30.4406 26.6477 31.5551L25.1781 32.0297V34.5434H22.9984V32.0297L21.5289 31.5551C18.066 30.4406 15.7387 27.2449 15.7387 23.6098C15.7352 19.0043 19.4828 15.2602 24.0883 15.2602ZM24.0883 13.1367C18.3051 13.1367 13.6152 17.8266 13.6152 23.6098C13.6152 28.2715 16.6633 32.2195 20.875 33.5766V35.8266C20.875 36.2871 21.2512 36.6633 21.7117 36.6633H26.4578C26.9184 36.6633 27.2945 36.2871 27.2945 35.8266V33.5766C31.5063 32.2195 34.5543 28.275 34.5543 23.6098C34.5578 17.8266 29.8715 13.1367 24.0883 13.1367Z" fill="white"/>
<path id="Vector_2" d="M24.0879 21.8344C24.893 21.8344 25.5504 22.4883 25.5504 23.2969C25.5504 24.102 24.8965 24.7594 24.0879 24.7594C23.2828 24.7594 22.6254 24.1055 22.6254 23.2969C22.6254 22.4918 23.2793 21.8344 24.0879 21.8344ZM24.0879 19.7145C22.1086 19.7145 20.5055 21.3176 20.5055 23.2969C20.5055 25.2762 22.1086 26.8793 24.0879 26.8793C26.0672 26.8793 27.6703 25.2762 27.6703 23.2969C27.6703 21.3176 26.0637 19.7145 24.0879 19.7145ZM26.6754 40.8645H21.5004C20.9133 40.8645 20.4387 40.3898 20.4387 39.8027C20.4387 39.2156 20.9133 38.741 21.5004 38.741H26.6754C27.2625 38.741 27.7371 39.2156 27.7371 39.8027C27.7371 40.3898 27.259 40.8645 26.6754 40.8645ZM24.0879 11.8148C23.5008 11.8148 23.0262 11.3402 23.0262 10.7531V8.23945C23.0262 7.65234 23.5008 7.17773 24.0879 7.17773C24.675 7.17773 25.1496 7.65234 25.1496 8.23945V10.7566C25.1461 11.3402 24.6715 11.8148 24.0879 11.8148ZM33.8227 16.009C33.552 16.009 33.2812 15.907 33.0738 15.6996C32.659 15.2848 32.659 14.6133 33.0738 14.202L34.691 12.5461C35.1059 12.1312 35.7773 12.1312 36.1887 12.5461C36.6035 12.9609 36.6035 13.6324 36.1887 14.0438L34.5715 15.6996C34.3641 15.907 34.0934 16.009 33.8227 16.009ZM14.3566 16.009C14.0859 16.009 13.8152 15.907 13.6078 15.6996L11.8113 13.9137C11.3965 13.4988 11.3965 12.8273 11.8113 12.416C12.2262 12.0012 12.8977 12.0012 13.309 12.416L15.1055 14.202C15.5203 14.6168 15.5203 15.2883 15.1055 15.6996C14.9016 15.907 14.6309 16.009 14.3566 16.009ZM11.3438 24.9492H9.03047C8.44336 24.9492 7.96875 24.4746 7.96875 23.8875C7.96875 23.3004 8.44336 22.8258 9.03047 22.8258H11.3438C11.9309 22.8258 12.4055 23.3004 12.4055 23.8875C12.4055 24.4746 11.9309 24.9492 11.3438 24.9492ZM38.9695 24.9492H36.7898C36.2027 24.9492 35.7281 24.4746 35.7281 23.8875C35.7281 23.3004 36.2027 22.8258 36.7898 22.8258H38.9695C39.5566 22.8258 40.0312 23.3004 40.0312 23.8875C40.0312 24.4746 39.5566 24.9492 38.9695 24.9492Z" fill="white"/>
<path id="Vector_3" d="M24.0871 30.8699C23.5 30.8699 23.0254 30.3953 23.0254 29.8082V26.8762C23.0254 26.2891 23.5 25.8145 24.0871 25.8145C24.6742 25.8145 25.1488 26.2891 25.1488 26.8762V29.8082C25.1453 30.3953 24.6707 30.8699 24.0871 30.8699Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_2597_3738" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2597_3738"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/deng2.png

 src/assets/images/routePlan/eventList/deng2.svg

New file
@@ -0,0 +1,35 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315951">
<g id="Group 1321315923">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_2597_3749)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M9 24.8915V24.1085C9 20.8474 10.2955 17.7199 12.6014 15.4139C14.9074 13.108 18.0349 11.8125 21.296 11.8125L21.5661 11.8234C22.9037 11.9231 24.0564 12.7677 24.3573 14.0963C24.805 16.0809 25.3125 19.4431 25.3125 24.5C25.3125 29.5569 24.805 32.9191 24.3573 34.9037L24.2848 35.1629C23.8734 36.4244 22.6572 37.1875 21.296 37.1875V35.375C22.0518 35.375 22.4868 34.9563 22.5883 34.505C23.0052 32.6617 23.5 29.4336 23.5 24.5C23.5 20.1826 23.1212 17.1721 22.7478 15.2508L22.5883 14.495C22.4868 14.0437 22.0518 13.625 21.296 13.625C18.5156 13.625 15.8491 14.7295 13.883 16.6955C11.917 18.6616 10.8125 21.3281 10.8125 24.1085V24.8915C10.8125 27.6719 11.917 30.3384 13.883 32.3045C15.8491 34.2705 18.5156 35.375 21.296 35.375V37.1875L20.6616 37.1712C17.6241 37.0134 14.7528 35.7355 12.6024 33.5844C10.4519 31.4333 9.17497 28.5617 9.01812 25.5241L9 24.8897V24.8915Z" fill="white"/>
<path id="Vector_2" d="M17.9095 29.1109L21.3079 24.0159C21.3521 23.9504 21.3775 23.874 21.3815 23.7951C21.3855 23.7162 21.3679 23.6376 21.3307 23.5679C21.2934 23.4982 21.2378 23.44 21.17 23.3995C21.1021 23.359 21.0245 23.3378 20.9454 23.3381H18.2738V20.1299C18.274 20.0364 18.244 19.9454 18.1883 19.8703C18.1326 19.7952 18.0542 19.74 17.9647 19.7129C17.8752 19.6859 17.7794 19.6884 17.6914 19.7201C17.6034 19.7518 17.528 19.811 17.4763 19.8889L14.0761 24.9838C14.0319 25.0494 14.0065 25.1257 14.0025 25.2047C13.9985 25.2836 14.0161 25.3621 14.0534 25.4318C14.0906 25.5015 14.1462 25.5597 14.214 25.6002C14.2819 25.6407 14.3595 25.662 14.4386 25.6617H17.1102V28.8698C17.1101 28.9633 17.1401 29.0544 17.1957 29.1295C17.2514 29.2046 17.3298 29.2598 17.4193 29.2868C17.5088 29.3139 17.6047 29.3114 17.6926 29.2797C17.7806 29.248 17.856 29.1888 17.9077 29.1109H17.9095Z" fill="white"/>
<path id="Vector_3" d="M29.8765 14.9842L34.5855 12.2655C35.1087 11.9634 35.5214 12.074 35.8234 12.5972C36.1255 13.1204 36.015 13.5331 35.4917 13.8351L30.7827 16.5539C30.2595 16.856 29.8468 16.7454 29.5448 16.2222C29.2427 15.699 29.3532 15.2863 29.8765 14.9842Z" fill="white"/>
<path id="Vector_4" d="M31.6562 23.5938H37.0938C37.6979 23.5938 38 23.8958 38 24.5C38 25.1042 37.6979 25.4062 37.0938 25.4062H31.6562C31.0521 25.4062 30.75 25.1042 30.75 24.5C30.75 23.8958 31.0521 23.5938 31.6562 23.5938Z" fill="white"/>
<path id="Vector_5" d="M30.6616 32.4461L35.3706 35.1649C35.8939 35.467 36.0044 35.8796 35.7024 36.4028C35.4003 36.9261 34.9876 37.0366 34.4644 36.7346L29.7554 34.0158C29.2322 33.7137 29.1216 33.3011 29.4237 32.7778C29.7258 32.2546 30.1384 32.144 30.6616 32.4461Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_2597_3749" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2597_3749"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/deng4.png

 src/assets/images/routePlan/eventList/deng4.svg

New file
@@ -0,0 +1,34 @@
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315953">
<g id="Group 1321315921">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1867_7739)">
<rect x="0.4375" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.9375" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_1867_7739)">
<path id="Vector" d="M22.975 11H25.0875C25.575 11 26.0625 11.4875 26.0625 12.1375V36.025C26.0625 36.5125 25.575 37 25.0875 37H22.975C19.725 37 16.8 35.5375 14.85 33.1C12.7375 30.825 11.4375 27.575 11.4375 24C11.4375 20.425 12.7375 17.175 14.85 14.9C16.9625 12.4625 19.8875 11 22.975 11ZM22.8125 13.275V34.8875H24.4375V13.1125H23.4625C23.3 13.1125 22.975 13.1125 22.8125 13.275ZM21.1875 34.5625V13.4375C19.2375 13.925 17.775 14.9 16.475 16.3625C14.525 18.3125 13.55 21.075 13.55 24C13.55 26.925 14.6875 29.6875 16.475 31.6375C17.775 33.1 19.5625 34.075 21.5125 34.5625H21.1875ZM37.4375 24C37.4375 23.5125 37.1125 23.1875 36.625 23.1875H30.125C29.6375 23.1875 29.3125 23.5125 29.3125 24C29.3125 24.4875 29.6375 24.8125 30.125 24.8125H36.625C37.1125 24.8125 37.4375 24.4875 37.4375 24ZM34.5125 12.7875C34.1875 12.625 33.7 12.625 33.375 12.7875L28.825 17.5C28.5 17.825 28.5 18.3125 28.825 18.6375C29.15 18.9625 29.6375 18.9625 29.9625 18.6375L34.5125 14.0875C34.8375 13.7625 34.8375 13.1125 34.5125 12.7875ZM28.825 30.5L33.375 35.05C33.7 35.375 34.1875 35.375 34.5125 35.05C34.8375 34.725 34.8375 34.2375 34.5125 33.9125L29.9625 29.3625C29.6375 29.0375 29.15 29.0375 28.825 29.3625C28.5 29.6875 28.5 30.175 28.825 30.5Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1867_7739" x="0.4375" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1867_7739"/>
</filter>
<clipPath id="clip0_1867_7739">
<rect width="26" height="26" fill="white" transform="translate(11.4375 11)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/editicon.png

 src/assets/images/routePlan/eventList/editicon.svg

New file
@@ -0,0 +1,10 @@
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame" clip-path="url(#clip0_507_3282)">
<path id="Vector" d="M0.046875 11.7813H10.0461V10.8647H0.046875V11.7813ZM1.71342 9.03146V6.9297L4.62987 3.7216L6.54056 5.82336L3.62411 9.03146H1.71342ZM6.29641 1.8884L8.2071 3.99016L7.12968 5.17533L5.21899 3.07357L6.29641 1.8884ZM9.0912 4.31464C9.13 4.27207 9.16079 4.22149 9.18179 4.16582C9.20279 4.11014 9.21361 4.05045 9.21361 3.99016C9.21361 3.92988 9.20279 3.87019 9.18179 3.81451C9.16079 3.75883 9.13 3.70826 9.0912 3.66569L6.59139 0.915893C6.55269 0.873213 6.50671 0.839351 6.45609 0.816247C6.40548 0.793143 6.35121 0.78125 6.29641 0.78125C6.24161 0.78125 6.18735 0.793143 6.13673 0.816247C6.08611 0.839351 6.04013 0.873213 6.00143 0.915893L0.880146 6.55022V9.94806H3.96908L9.0912 4.31464Z" fill="#FBC634"/>
</g>
<defs>
<clipPath id="clip0_507_3282">
<rect width="10" height="11" fill="white" transform="translate(0.046875 0.78125)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/gimbalPitchRotate.png

 src/assets/images/routePlan/eventList/gimbalPitchRotate.svg

New file
@@ -0,0 +1,27 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315678">
<g id="Group 1321315605">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16901)">
<rect y="0.732422" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="1.23242" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M15.1375 13.3502L16.0375 14.2502L15.8215 14.0342L15.1375 13.3502ZM16.5025 14.2907L15.3655 13.1537C15.2335 12.9677 15.2155 12.7787 15.3115 12.5837C15.4075 12.3947 15.5485 12.3002 15.7375 12.3002H19.1875C19.4875 12.3002 19.6375 12.4502 19.6375 12.7502V16.2002C19.6435 16.3027 19.6157 16.4044 19.5582 16.4895C19.5007 16.5746 19.4169 16.6385 19.3195 16.6712C19.1125 16.7552 18.9385 16.7267 18.799 16.5887L17.731 15.5192L17.5285 15.6452C16.1723 16.4808 15.054 17.6513 14.281 19.0442C13.808 19.7711 13.455 20.5692 13.2355 21.4082C13.0043 22.2528 12.8873 23.1245 12.8875 24.0002C12.8875 25.7552 13.351 27.4052 14.278 28.9502C15.007 30.2612 16.0885 31.3952 17.521 32.3492L17.7265 32.4857L18.784 31.4282C18.97 31.2962 19.159 31.2782 19.354 31.3742C19.543 31.4702 19.6375 31.6112 19.6375 31.8002V35.2502C19.6375 35.5502 19.4875 35.7002 19.1875 35.7002H15.7375C15.5485 35.7002 15.4135 35.6147 15.3355 35.4437C15.265 35.2937 15.31 35.1587 15.4675 35.0402L15.484 35.0267L16.6525 33.8597L16.36 33.6542C14.9317 32.6489 13.7337 31.3511 12.8455 29.8472C11.674 27.8372 11.0875 25.9382 11.0875 24.1502C11.0875 22.0907 11.6245 20.1407 12.697 18.3002L12.6985 18.2972L12.7015 18.2942C13.4905 16.8467 14.6605 15.5807 16.21 14.4962L16.5025 14.2907ZM20.1625 27.3002C20.1625 27.5072 20.242 27.6527 20.4025 27.7397C20.4734 27.781 20.5549 27.8005 20.6368 27.7957C20.7188 27.7909 20.7974 27.762 20.863 27.7127L20.878 27.7037L23.1625 26.6492V27.7502C23.1625 28.2887 23.365 28.7597 23.7715 29.1662C24.1765 29.5712 24.649 29.7752 25.1875 29.7752H35.6875C36.226 29.7752 36.697 29.5727 37.1035 29.1662C37.5085 28.7612 37.7125 28.2887 37.7125 27.7502V20.2502C37.7125 19.7117 37.51 19.2407 37.1035 18.8342C36.6985 18.4292 36.226 18.2252 35.6875 18.2252H25.1875C24.649 18.2252 24.178 18.4277 23.7715 18.8342C23.5788 19.0162 23.4253 19.2357 23.3206 19.4792C23.2158 19.7227 23.162 19.9851 23.1625 20.2502V21.3512L20.8765 20.2967L20.8615 20.2877C20.7265 20.1977 20.578 20.2052 20.4145 20.3087C20.2465 20.4152 20.1625 20.5457 20.1625 20.7002V27.3002ZM24.9625 21.0002C24.9625 20.7137 25.0525 20.4782 25.234 20.2967C25.4155 20.1167 25.651 20.0252 25.9375 20.0252H34.9375C35.224 20.0252 35.4595 20.1152 35.6395 20.2967C35.7306 20.3891 35.8018 20.4992 35.8488 20.6202C35.8957 20.7412 35.9174 20.8705 35.9125 21.0002V27.0002C35.9176 27.1298 35.8962 27.259 35.8495 27.38C35.8028 27.501 35.7319 27.6111 35.641 27.7037C35.5485 27.7945 35.4383 27.8655 35.3173 27.9122C35.1964 27.9588 35.0671 27.9803 34.9375 27.9752H25.9375C25.651 27.9752 25.4155 27.8852 25.234 27.7037C25.1432 27.6111 25.0723 27.501 25.0256 27.38C24.9789 27.259 24.9574 27.1298 24.9625 27.0002V21.0002Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16901" x="0" y="0.732422" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16901"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/gimbalRotate.png

 src/assets/images/routePlan/eventList/hover.png

 src/assets/images/routePlan/eventList/hover.svg

New file
@@ -0,0 +1,31 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315675">
<g id="Group 1321315326">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16881)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_1870_16881)">
<path id="Vector" d="M20.4375 29.96C20.7175 31.72 19.5175 33.4 17.7575 33.68C15.9575 33.96 14.3175 32.76 14.0375 31C13.7575 29.24 14.9575 27.56 16.7175 27.28C17.0775 27.24 17.3975 27.24 17.7575 27.28C18.1175 26.92 18.4375 26.56 18.7175 26.2C17.0375 25.64 15.2375 26.08 14.0375 27.28C12.2775 29.04 12.2775 31.92 14.0375 33.68C15.7975 35.44 18.6775 35.44 20.4375 33.68C21.6375 32.44 22.0775 30.64 21.5175 29.04C21.1575 29.32 20.7975 29.6 20.4375 29.96ZM30.3575 26.04C30.6375 26.4 30.9575 26.76 31.2775 27.12C33.0375 26.84 34.7175 28.04 34.9975 29.8C35.2775 31.56 34.0775 33.24 32.3175 33.52C30.5575 33.8 28.8775 32.6 28.5975 30.84C28.5575 30.52 28.5575 30.16 28.5975 29.84C28.2375 29.48 27.8775 29.2 27.5175 28.92C26.9575 30.56 27.3975 32.36 28.5975 33.56C30.3575 35.32 33.2375 35.32 34.9975 33.56C36.7575 31.8 36.7575 28.92 34.9975 27.16C33.7975 25.92 31.9975 25.48 30.3575 26.04ZM28.6775 16.36C28.3975 14.6 29.5975 12.92 31.3575 12.64C33.1175 12.36 34.7975 13.56 35.0775 15.32C35.3575 17.08 34.1575 18.76 32.3975 19.04C32.0775 19.08 31.7175 19.08 31.3575 19.04C30.9975 19.44 30.6775 19.8 30.4375 20.12C32.0775 20.68 33.8775 20.24 35.0775 19.04C36.8375 17.28 36.8375 14.4 35.0775 12.64C33.3175 10.88 30.4375 10.88 28.6775 12.64C27.4775 13.84 27.0375 15.64 27.5975 17.28C27.9175 17 28.2775 16.72 28.6775 16.36ZM18.4775 19.8C18.1975 19.44 17.8775 19.08 17.5175 18.72C15.7575 19 14.0775 17.8 13.7975 16.04C13.5175 14.28 14.7175 12.6 16.4775 12.32C18.2375 12.04 19.9175 13.24 20.1975 15C20.2375 15.36 20.2375 15.72 20.1975 16.04C20.5575 16.4 20.9175 16.72 21.2775 17C21.8375 15.36 21.4375 13.52 20.1975 12.32C18.4375 10.56 15.5575 10.56 13.7975 12.32C12.0375 14.08 12.0375 16.96 13.7975 18.72C15.0375 19.96 16.8375 20.36 18.4775 19.8ZM24.5975 21.8C23.8775 21.8 23.2775 22.4 23.2775 23.12C23.2775 23.84 23.8775 24.44 24.5975 24.44C25.3175 24.44 25.9175 23.84 25.9175 23.12C25.9175 22.76 25.7975 22.44 25.5175 22.2C25.2775 21.92 24.9175 21.8 24.5975 21.8Z" fill="white"/>
<path id="Vector_2" d="M30.9175 30.8003C30.9975 30.8803 31.1575 31.0803 31.1975 31.1203L31.2375 31.1603C31.6775 31.5603 32.3175 31.6003 32.7175 31.2003C33.0775 30.8403 33.0775 30.2403 32.7175 29.8003L32.4375 29.5203C32.3975 29.4803 32.3575 29.4803 32.3575 29.4403C31.3175 28.4803 27.9575 25.2003 27.9975 23.2803V22.7603C27.9975 20.8403 31.3175 17.6003 32.3575 16.6403L32.4375 16.5603C32.5575 16.4803 32.6375 16.3603 32.7175 16.2803C33.0375 15.8403 33.0775 15.2403 32.7175 14.8803C32.3575 14.6003 31.7175 14.6403 31.2375 15.0403C31.2375 15.0403 31.1975 15.0403 31.1975 15.0803C31.1575 15.1203 30.9575 15.3203 30.9175 15.4003C29.9175 16.4803 26.9175 19.5203 25.0375 19.6403H24.2375C22.3175 19.5603 19.1575 16.3203 18.1975 15.2803L18.1175 15.2003C18.0375 15.0803 17.9175 15.0003 17.8375 14.9203C17.3975 14.6003 16.7975 14.5603 16.4375 14.9203C16.0775 15.2803 16.0775 15.9603 16.4775 16.4003C16.4775 16.4003 16.4775 16.4403 16.5175 16.4403C16.5575 16.4803 16.7575 16.6803 16.8375 16.7203C17.8775 17.7203 20.7975 20.5603 21.0775 22.4403C21.1175 22.6403 21.1175 23.4803 21.0375 23.7203C20.6375 25.6003 17.8375 28.3603 16.8375 29.3203C16.7575 29.4003 16.5575 29.5603 16.5175 29.6003L16.4775 29.6403C16.0775 30.0803 16.0375 30.7203 16.4375 31.1203C16.7975 31.4803 17.3975 31.4803 17.8375 31.1203L18.1175 30.8403C18.1575 30.8003 18.1575 30.7603 18.1975 30.7603C19.1175 29.7603 22.1575 26.6403 24.0775 26.4403H25.0375C26.9575 26.7203 29.9175 29.7603 30.9175 30.8003ZM26.0375 24.5603C25.2375 25.3603 23.9175 25.3603 23.1175 24.5603C22.3175 23.7603 22.3175 22.4403 23.1175 21.6403C23.9175 20.8403 25.2375 20.8403 26.0375 21.6403C26.8375 22.4403 26.8375 23.7203 26.0375 24.5603Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16881" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16881"/>
</filter>
<clipPath id="clip0_1870_16881">
<rect width="24" height="24" fill="white" transform="translate(12.4375 11)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv1.svg

New file
@@ -0,0 +1,36 @@
<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315685">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_4994)">
<path d="M4.69336 9.97852C4.69336 7.76938 6.48422 5.97852 8.69336 5.97852H30.748C32.9572 5.97852 34.748 7.76938 34.748 9.97852V18.85C34.748 21.0591 32.9572 22.85 30.748 22.85H8.69336C6.48422 22.85 4.69336 21.0591 4.69336 18.85V9.97852Z" fill="url(#paint0_linear_507_4994)"/>
</g>
<g id="-100" filter="url(#filter1_d_507_4994)">
<path d="M10.4434 15.4727H7.24414V14.7168H10.4434V15.4727ZM15.6873 18.4375H14.7263V11.1777C14.6521 11.252 14.5427 11.3379 14.3982 11.4355C14.2576 11.5293 14.0974 11.623 13.9177 11.7168C13.742 11.8105 13.5545 11.8984 13.3552 11.9805C13.1599 12.0625 12.9685 12.127 12.781 12.1738V11.2012C12.992 11.1426 13.2146 11.0645 13.449 10.9668C13.6873 10.8652 13.9197 10.7539 14.1462 10.6328C14.3767 10.5078 14.5935 10.3789 14.7966 10.2461C14.9998 10.1094 15.1755 9.97656 15.324 9.84766H15.6873V18.4375ZM24.1304 14.2012C24.1304 14.9043 24.0659 15.5273 23.937 16.0703C23.812 16.6133 23.6284 17.0723 23.3862 17.4473C23.148 17.8184 22.853 18.1016 22.5015 18.2969C22.1538 18.4883 21.7573 18.584 21.312 18.584C20.8902 18.584 20.5132 18.4922 20.1812 18.3086C19.853 18.1211 19.5757 17.8496 19.3491 17.4941C19.1226 17.1387 18.9507 16.7031 18.8335 16.1875C18.7163 15.668 18.6577 15.0742 18.6577 14.4062C18.6577 13.6719 18.7183 13.0234 18.8394 12.4609C18.9644 11.8984 19.146 11.4277 19.3843 11.0488C19.6226 10.666 19.9175 10.3789 20.2691 10.1875C20.6245 9.99219 21.0308 9.89453 21.4878 9.89453C23.2495 9.89453 24.1304 11.3301 24.1304 14.2012ZM23.146 14.2949C23.146 11.9043 22.5777 10.709 21.4409 10.709C20.2417 10.709 19.6421 11.9258 19.6421 14.3594C19.6421 16.6289 20.23 17.7637 21.4058 17.7637C22.5659 17.7637 23.146 16.6074 23.146 14.2949ZM30.8391 14.2012C30.8391 14.9043 30.7747 15.5273 30.6458 16.0703C30.5208 16.6133 30.3372 17.0723 30.095 17.4473C29.8567 17.8184 29.5618 18.1016 29.2102 18.2969C28.8626 18.4883 28.4661 18.584 28.0208 18.584C27.5989 18.584 27.222 18.4922 26.8899 18.3086C26.5618 18.1211 26.2845 17.8496 26.0579 17.4941C25.8313 17.1387 25.6595 16.7031 25.5423 16.1875C25.4251 15.668 25.3665 15.0742 25.3665 14.4062C25.3665 13.6719 25.427 13.0234 25.5481 12.4609C25.6731 11.8984 25.8548 11.4277 26.093 11.0488C26.3313 10.666 26.6262 10.3789 26.9778 10.1875C27.3333 9.99219 27.7395 9.89453 28.1966 9.89453C29.9583 9.89453 30.8391 11.3301 30.8391 14.2012ZM29.8548 14.2949C29.8548 11.9043 29.2864 10.709 28.1497 10.709C26.9505 10.709 26.3509 11.9258 26.3509 14.3594C26.3509 16.6289 26.9387 17.7637 28.1145 17.7637C29.2747 17.7637 29.8548 16.6074 29.8548 14.2949Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_4994" x="0.593359" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_4994"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_4994" result="shape"/>
</filter>
<filter id="filter1_d_507_4994" x="-4.75586" y="-2.15234" width="47.5957" height="32.7363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_4994"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_4994" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_4994" x1="19.7207" y1="5.97852" x2="19.7207" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv2.svg

New file
@@ -0,0 +1,36 @@
<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315686">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_4998)">
<path d="M4.41406 9.97852C4.41406 7.76938 6.20492 5.97852 8.41406 5.97852H30.4688C32.6779 5.97852 34.4688 7.76938 34.4688 9.97852V18.85C34.4688 21.0591 32.6779 22.85 30.4688 22.85H8.41406C6.20492 22.85 4.41406 21.0591 4.41406 18.85V9.97852Z" fill="url(#paint0_linear_507_4998)"/>
</g>
<g id="-10" filter="url(#filter1_d_507_4998)">
<path d="M13.7422 15.4727H10.543V14.7168H13.7422V15.4727ZM18.9861 18.4375H18.0252V11.1777C17.9509 11.252 17.8416 11.3379 17.697 11.4355C17.5564 11.5293 17.3962 11.623 17.2166 11.7168C17.0408 11.8105 16.8533 11.8984 16.6541 11.9805C16.4587 12.0625 16.2673 12.127 16.0798 12.1738V11.2012C16.2908 11.1426 16.5134 11.0645 16.7478 10.9668C16.9861 10.8652 17.2185 10.7539 17.4451 10.6328C17.6755 10.5078 17.8923 10.3789 18.0955 10.2461C18.2986 10.1094 18.4744 9.97656 18.6228 9.84766H18.9861V18.4375ZM27.4292 14.2012C27.4292 14.9043 27.3648 15.5273 27.2359 16.0703C27.1109 16.6133 26.9273 17.0723 26.6851 17.4473C26.4468 17.8184 26.1519 18.1016 25.8003 18.2969C25.4527 18.4883 25.0562 18.584 24.6109 18.584C24.189 18.584 23.812 18.4922 23.48 18.3086C23.1519 18.1211 22.8745 17.8496 22.648 17.4941C22.4214 17.1387 22.2495 16.7031 22.1323 16.1875C22.0152 15.668 21.9566 15.0742 21.9566 14.4062C21.9566 13.6719 22.0171 13.0234 22.1382 12.4609C22.2632 11.8984 22.4448 11.4277 22.6831 11.0488C22.9214 10.666 23.2163 10.3789 23.5679 10.1875C23.9234 9.99219 24.3296 9.89453 24.7866 9.89453C26.5484 9.89453 27.4292 11.3301 27.4292 14.2012ZM26.4448 14.2949C26.4448 11.9043 25.8765 10.709 24.7398 10.709C23.5405 10.709 22.9409 11.9258 22.9409 14.3594C22.9409 16.6289 23.5288 17.7637 24.7046 17.7637C25.8648 17.7637 26.4448 16.6074 26.4448 14.2949Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_4998" x="0.314063" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_4998"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_4998" result="shape"/>
</filter>
<filter id="filter1_d_507_4998" x="-1.45703" y="-2.15234" width="40.8867" height="32.7363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_4998"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_4998" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_4998" x1="19.4414" y1="5.97852" x2="19.4414" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv3.svg

New file
@@ -0,0 +1,36 @@
<svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315687">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_5002)">
<path d="M5.13477 9.97852C5.13477 7.76938 6.92563 5.97852 9.13477 5.97852H31.1895C33.3986 5.97852 35.1895 7.76938 35.1895 9.97852V18.85C35.1895 21.0591 33.3986 22.85 31.1895 22.85H9.13477C6.92563 22.85 5.13477 21.0591 5.13477 18.85V9.97852Z" fill="url(#paint0_linear_507_5002)"/>
</g>
<g id="-1" filter="url(#filter1_d_507_5002)">
<path d="M17.6973 15.4727H14.498V14.7168H17.6973V15.4727ZM22.9412 18.4375H21.9802V11.1777C21.906 11.252 21.7966 11.3379 21.6521 11.4355C21.5115 11.5293 21.3513 11.623 21.1716 11.7168C20.9959 11.8105 20.8084 11.8984 20.6091 11.9805C20.4138 12.0625 20.2224 12.127 20.0349 12.1738V11.2012C20.2459 11.1426 20.4685 11.0645 20.7029 10.9668C20.9412 10.8652 21.1736 10.7539 21.4002 10.6328C21.6306 10.5078 21.8474 10.3789 22.0505 10.2461C22.2537 10.1094 22.4295 9.97656 22.5779 9.84766H22.9412V18.4375Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_5002" x="1.03477" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5002"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5002" result="shape"/>
</filter>
<filter id="filter1_d_507_5002" x="2.49805" y="-2.15234" width="32.4434" height="32.5898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5002"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5002" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_5002" x1="20.1621" y1="5.97852" x2="20.1621" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv4.svg

New file
@@ -0,0 +1,36 @@
<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315688">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_5006)">
<path d="M4.59766 9.97852C4.59766 7.76938 6.38852 5.97852 8.59766 5.97852H30.6523C32.8615 5.97852 34.6523 7.76938 34.6523 9.97852V18.85C34.6523 21.0591 32.8615 22.85 30.6523 22.85H8.59766C6.38852 22.85 4.59766 21.0591 4.59766 18.85V9.97852Z" fill="url(#paint0_linear_507_5006)"/>
</g>
<g id="+1" filter="url(#filter1_d_507_5006)">
<path d="M19.1719 15.332H16.8047V17.6934H16.0254V15.332H13.6641V14.5469H16.0254V12.1855H16.8047V14.5469H19.1719V15.332ZM25.0017 18.4375H24.0408V11.1777C23.9666 11.252 23.8572 11.3379 23.7127 11.4355C23.572 11.5293 23.4119 11.623 23.2322 11.7168C23.0564 11.8105 22.8689 11.8984 22.6697 11.9805C22.4744 12.0625 22.283 12.127 22.0955 12.1738V11.2012C22.3064 11.1426 22.5291 11.0645 22.7634 10.9668C23.0017 10.8652 23.2341 10.7539 23.4607 10.6328C23.6912 10.5078 23.908 10.3789 24.1111 10.2461C24.3142 10.1094 24.49 9.97656 24.6384 9.84766H25.0017V18.4375Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_5006" x="0.497656" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5006"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5006" result="shape"/>
</filter>
<filter id="filter1_d_507_5006" x="1.66406" y="-2.15234" width="35.3379" height="32.5898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5006"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5006" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_5006" x1="19.625" y1="5.97852" x2="19.625" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv5.svg

New file
@@ -0,0 +1,36 @@
<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315689">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_5010)">
<path d="M4.31836 9.97852C4.31836 7.76938 6.10922 5.97852 8.31836 5.97852H30.373C32.5822 5.97852 34.373 7.76938 34.373 9.97852V18.85C34.373 21.0591 32.5822 22.85 30.373 22.85H8.31836C6.10922 22.85 4.31836 21.0591 4.31836 18.85V9.97852Z" fill="url(#paint0_linear_507_5010)"/>
</g>
<g id="+10" filter="url(#filter1_d_507_5010)">
<path d="M15.4707 15.332H13.1035V17.6934H12.3242V15.332H9.96289V14.5469H12.3242V12.1855H13.1035V14.5469H15.4707V15.332ZM21.3005 18.4375H20.3396V11.1777C20.2654 11.252 20.156 11.3379 20.0115 11.4355C19.8709 11.5293 19.7107 11.623 19.531 11.7168C19.3552 11.8105 19.1677 11.8984 18.9685 11.9805C18.7732 12.0625 18.5818 12.127 18.3943 12.1738V11.2012C18.6052 11.1426 18.8279 11.0645 19.0623 10.9668C19.3005 10.8652 19.533 10.7539 19.7595 10.6328C19.99 10.5078 20.2068 10.3789 20.4099 10.2461C20.613 10.1094 20.7888 9.97656 20.9373 9.84766H21.3005V18.4375ZM29.7437 14.2012C29.7437 14.9043 29.6792 15.5273 29.5503 16.0703C29.4253 16.6133 29.2417 17.0723 28.9995 17.4473C28.7612 17.8184 28.4663 18.1016 28.1148 18.2969C27.7671 18.4883 27.3706 18.584 26.9253 18.584C26.5034 18.584 26.1265 18.4922 25.7945 18.3086C25.4663 18.1211 25.189 17.8496 24.9624 17.4941C24.7359 17.1387 24.564 16.7031 24.4468 16.1875C24.3296 15.668 24.271 15.0742 24.271 14.4062C24.271 13.6719 24.3316 13.0234 24.4527 12.4609C24.5777 11.8984 24.7593 11.4277 24.9976 11.0488C25.2359 10.666 25.5308 10.3789 25.8823 10.1875C26.2378 9.99219 26.6441 9.89453 27.1011 9.89453C28.8628 9.89453 29.7437 11.3301 29.7437 14.2012ZM28.7593 14.2949C28.7593 11.9043 28.1909 10.709 27.0542 10.709C25.855 10.709 25.2554 11.9258 25.2554 14.3594C25.2554 16.6289 25.8433 17.7637 27.0191 17.7637C28.1792 17.7637 28.7593 16.6074 28.7593 14.2949Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_5010" x="0.218359" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5010"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5010" result="shape"/>
</filter>
<filter id="filter1_d_507_5010" x="-2.03711" y="-2.15234" width="43.7812" height="32.7363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5010"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5010" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_5010" x1="19.3457" y1="5.97852" x2="19.3457" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/hv6.svg

New file
@@ -0,0 +1,36 @@
<svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315690">
<g id="Rectangle 34624646" filter="url(#filter0_d_507_5014)">
<path d="M5.03906 9.97852C5.03906 7.76938 6.82992 5.97852 9.03906 5.97852H31.0938C33.3029 5.97852 35.0938 7.76938 35.0938 9.97852V18.85C35.0938 21.0591 33.3029 22.85 31.0938 22.85H9.03906C6.82992 22.85 5.03906 21.0591 5.03906 18.85V9.97852Z" fill="url(#paint0_linear_507_5014)"/>
</g>
<g id="+100" filter="url(#filter1_d_507_5014)">
<path d="M12.4258 15.332H10.0586V17.6934H9.2793V15.332H6.91797V14.5469H9.2793V12.1855H10.0586V14.5469H12.4258V15.332ZM18.2556 18.4375H17.2947V11.1777C17.2205 11.252 17.1111 11.3379 16.9666 11.4355C16.8259 11.5293 16.6658 11.623 16.4861 11.7168C16.3103 11.8105 16.1228 11.8984 15.9236 11.9805C15.7283 12.0625 15.5369 12.127 15.3494 12.1738V11.2012C15.5603 11.1426 15.783 11.0645 16.0173 10.9668C16.2556 10.8652 16.488 10.7539 16.7146 10.6328C16.9451 10.5078 17.1619 10.3789 17.365 10.2461C17.5681 10.1094 17.7439 9.97656 17.8923 9.84766H18.2556V18.4375ZM26.6987 14.2012C26.6987 14.9043 26.6343 15.5273 26.5054 16.0703C26.3804 16.6133 26.1968 17.0723 25.9546 17.4473C25.7163 17.8184 25.4214 18.1016 25.0698 18.2969C24.7222 18.4883 24.3257 18.584 23.8804 18.584C23.4585 18.584 23.0816 18.4922 22.7495 18.3086C22.4214 18.1211 22.1441 17.8496 21.9175 17.4941C21.6909 17.1387 21.5191 16.7031 21.4019 16.1875C21.2847 15.668 21.2261 15.0742 21.2261 14.4062C21.2261 13.6719 21.2866 13.0234 21.4077 12.4609C21.5327 11.8984 21.7144 11.4277 21.9527 11.0488C22.1909 10.666 22.4859 10.3789 22.8374 10.1875C23.1929 9.99219 23.5991 9.89453 24.0562 9.89453C25.8179 9.89453 26.6987 11.3301 26.6987 14.2012ZM25.7144 14.2949C25.7144 11.9043 25.146 10.709 24.0093 10.709C22.8101 10.709 22.2105 11.9258 22.2105 14.3594C22.2105 16.6289 22.7984 17.7637 23.9741 17.7637C25.1343 17.7637 25.7144 16.6074 25.7144 14.2949ZM33.4075 14.2012C33.4075 14.9043 33.343 15.5273 33.2141 16.0703C33.0891 16.6133 32.9055 17.0723 32.6634 17.4473C32.4251 17.8184 32.1302 18.1016 31.7786 18.2969C31.4309 18.4883 31.0345 18.584 30.5891 18.584C30.1673 18.584 29.7903 18.4922 29.4583 18.3086C29.1302 18.1211 28.8528 17.8496 28.6262 17.4941C28.3997 17.1387 28.2278 16.7031 28.1106 16.1875C27.9934 15.668 27.9348 15.0742 27.9348 14.4062C27.9348 13.6719 27.9954 13.0234 28.1165 12.4609C28.2415 11.8984 28.4231 11.4277 28.6614 11.0488C28.8997 10.666 29.1946 10.3789 29.5462 10.1875C29.9016 9.99219 30.3079 9.89453 30.7649 9.89453C32.5266 9.89453 33.4075 11.3301 33.4075 14.2012ZM32.4231 14.2949C32.4231 11.9043 31.8548 10.709 30.718 10.709C29.5188 10.709 28.9192 11.9258 28.9192 14.3594C28.9192 16.6289 29.5071 17.7637 30.6829 17.7637C31.843 17.7637 32.4231 16.6074 32.4231 14.2949Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_507_5014" x="0.939063" y="3.87852" width="42.2547" height="29.0711" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/>
<feGaussianBlur stdDeviation="3.05"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0526756 0 0 0 0 0.100962 0 0 0 0.42 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5014"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5014" result="shape"/>
</filter>
<filter id="filter1_d_507_5014" x="-5.08203" y="-2.15234" width="50.4902" height="32.7363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.266667 0 0 0 0 0.413333 0 0 0 0 1 0 0 0 0.67 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_507_5014"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_507_5014" result="shape"/>
</filter>
<linearGradient id="paint0_linear_507_5014" x1="20.0664" y1="5.97852" x2="20.0664" y2="22.85" gradientUnits="userSpaceOnUse">
<stop stop-color="#147FF2"/>
<stop offset="1" stop-color="#0045AC"/>
</linearGradient>
</defs>
</svg>

 src/assets/images/routePlan/eventList/megaphone0.png

 src/assets/images/routePlan/eventList/megaphone0.svg

New file
@@ -0,0 +1,34 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315959">
<g id="Group 1321315682">
<g id="Group 1321315608">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16944)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_1870_16944)">
<path id="Vector" d="M26.5138 15.4912C27.2841 15.4912 28.0219 15.64 28.7272 15.9376C29.4076 16.2244 30.0106 16.6305 30.5345 17.1544C31.0584 17.6783 31.4645 18.2812 31.7512 18.9617C32.0473 19.6654 32.1961 20.4032 32.1961 21.1751V25.8251C32.1961 26.597 32.0473 27.3348 31.7512 28.0385C31.4673 28.7144 31.054 29.3284 30.5345 29.8458C30.0171 30.3652 29.4032 30.7786 28.7272 31.0625C28.0219 31.3601 27.2857 31.5089 26.5138 31.5089C26.2396 31.5089 25.9766 31.4 25.7828 31.2061C25.5889 31.0122 25.4799 30.7493 25.4799 30.4751C25.4799 30.2009 25.5889 29.9379 25.7828 29.744C25.9766 29.5501 26.2396 29.4412 26.5138 29.4412H26.5231C26.9968 29.442 27.466 29.3489 27.9036 29.1675C28.3412 28.9861 28.7386 28.7198 29.0728 28.3841C29.4102 28.0491 29.6774 27.6503 29.8589 27.211C30.0404 26.7716 30.1325 26.3004 30.1299 25.8251V21.1751C30.1319 20.6998 30.0395 20.2288 29.858 19.7895C29.6766 19.3502 29.4097 18.9513 29.0728 18.616C28.7379 18.2786 28.3391 18.0114 27.8997 17.8298C27.4603 17.6483 26.9892 17.5562 26.5138 17.5589C26.3262 17.56 26.1419 17.5099 25.9808 17.4139C25.8196 17.318 25.6876 17.1799 25.5991 17.0146C25.5106 16.8492 25.4689 16.6628 25.4785 16.4755C25.4881 16.2882 25.5486 16.107 25.6535 15.9516C25.7478 15.8098 25.8756 15.6935 26.0258 15.6132C26.1759 15.5328 26.3435 15.4909 26.5138 15.4912Z" fill="white"/>
<path id="Vector_2" d="M25.4799 30.4755V9.55046H26.5138V10.5843C25.4536 10.5843 24.3717 10.9021 23.2634 11.5376C22.3334 12.0708 21.4127 12.8117 20.4982 13.7603C19.5337 14.7644 18.6804 15.8698 17.9531 17.0571C17.8629 17.2146 17.7327 17.3454 17.5757 17.4363C17.4186 17.5273 17.2403 17.575 17.0588 17.5748H12.5638C12.4957 17.5733 12.4279 17.5857 12.3648 17.6113C12.3016 17.6369 12.2443 17.6751 12.1964 17.7236C12.1474 17.7712 12.1088 17.8284 12.0829 17.8916C12.057 17.9548 12.0445 18.0227 12.0461 18.091V28.8015C12.0461 28.941 12.0972 29.065 12.1995 29.1657C12.2466 29.2146 12.3033 29.2533 12.3659 29.2794C12.4286 29.3056 12.4959 29.3186 12.5638 29.3176H17.0588C17.2417 29.3169 17.4216 29.365 17.5796 29.4572C17.7377 29.5493 17.8683 29.682 17.9578 29.8415C18.6832 31.0454 19.5359 32.1679 20.5013 33.1895C21.4158 34.1536 22.3381 34.9069 23.2681 35.4494C24.3748 36.0942 25.4567 36.4166 26.5138 36.4166V37.4505H25.4799V30.4755ZM27.5461 30.4755V37.4505C27.5463 37.5861 27.5197 37.7206 27.468 37.846C27.4162 37.9714 27.3402 38.0854 27.2443 38.1814C27.1484 38.2774 27.0345 38.3536 26.9092 38.4056C26.7838 38.4576 26.6495 38.4843 26.5138 38.4843C25.0831 38.4843 23.654 38.0658 22.2265 37.2335C21.1275 36.5933 20.0534 35.7191 19.0025 34.614C17.9216 33.4705 16.9684 32.2128 16.1598 30.863L17.0588 30.3515V31.3853H12.5638C12.2245 31.3858 11.8884 31.319 11.575 31.1889C11.2617 31.0588 10.9771 30.868 10.7379 30.6274C10.4971 30.3881 10.3061 30.1037 10.1757 29.7903C10.0454 29.4769 9.97831 29.1409 9.97839 28.8015V18.091C9.97839 17.3718 10.2326 16.7611 10.741 16.2573C10.9779 16.0149 11.2617 15.8233 11.5751 15.6944C11.8885 15.5654 12.2249 15.5016 12.5638 15.5071H17.0588V16.541L16.1629 16.0248C16.9743 14.6914 17.9291 13.4508 19.0102 12.325C20.0611 11.2369 21.1353 10.3766 22.2342 9.74576C23.6602 8.92736 25.0862 8.51661 26.5122 8.51661C26.6481 8.5162 26.7827 8.54266 26.9084 8.59447C27.034 8.64628 27.1481 8.72242 27.2442 8.8185C27.3403 8.91458 27.4164 9.02872 27.4682 9.15434C27.52 9.27995 27.5465 9.41457 27.5461 9.55046V30.4755Z" fill="white"/>
<path id="Vector_3" d="M38.3403 22.4936C38.5414 22.5325 38.7264 22.6304 38.8716 22.7749C39.0169 22.9193 39.1158 23.1038 39.1557 23.3047C39.1956 23.5057 39.1747 23.7139 39.0958 23.903C39.0168 24.092 38.8833 24.2532 38.7123 24.366C38.5427 24.4799 38.3431 24.5409 38.1388 24.5411H34.2638C34.0762 24.5422 33.892 24.4921 33.7308 24.3962C33.5696 24.3002 33.4377 24.1621 33.3491 23.9968C33.2606 23.8314 33.2189 23.645 33.2285 23.4577C33.2381 23.2704 33.2986 23.0893 33.4036 22.9338C33.4978 22.792 33.6256 22.6757 33.7758 22.5954C33.9259 22.515 34.0935 22.4732 34.2638 22.4734H38.1388C38.2055 22.4734 38.2737 22.4796 38.3403 22.4936ZM33.7461 18.9317L37.1019 16.9942C37.2489 16.9083 37.4149 16.8602 37.5851 16.8542C37.7553 16.8481 37.9243 16.8843 38.077 16.9596C38.2298 17.0348 38.3615 17.1467 38.4605 17.2853C38.5594 17.4238 38.6225 17.5848 38.6441 17.7537C38.6707 17.9563 38.6367 18.1622 38.5461 18.3455C38.4556 18.5287 38.3128 18.6809 38.1357 18.7829L34.78 20.7204C34.633 20.8059 34.4671 20.8537 34.2971 20.8596C34.1272 20.8655 33.9584 20.8292 33.8058 20.754C33.6533 20.6788 33.5217 20.567 33.4229 20.4286C33.324 20.2903 33.2609 20.1296 33.2393 19.9609C33.2125 19.7584 33.2463 19.5526 33.3365 19.3694C33.4268 19.1862 33.5693 19.0339 33.7461 18.9317ZM38.3 28.3495C38.4948 28.518 38.6196 28.7532 38.6499 29.0089C38.6802 29.2647 38.6138 29.5226 38.4637 29.7319C38.3136 29.9412 38.0907 30.0869 37.8387 30.1402C37.5867 30.1936 37.3239 30.1509 37.1019 30.0204L33.7461 28.0829C33.5528 27.973 33.4002 27.8035 33.3111 27.5998C33.222 27.3961 33.2012 27.169 33.2517 26.9524C33.3023 26.7359 33.4215 26.5415 33.5916 26.3983C33.7617 26.2551 33.9736 26.1707 34.1956 26.1578C34.3996 26.1442 34.603 26.1917 34.78 26.2942L38.1357 28.2317C38.1942 28.2655 38.2492 28.3049 38.3 28.3495Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16944" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16944"/>
</filter>
<clipPath id="clip0_1870_16944">
<rect width="31" height="31" fill="white" transform="translate(9.4375 8)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/megaphone1.png

 src/assets/images/routePlan/eventList/megaphone1.svg

New file
@@ -0,0 +1,37 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315957">
<g id="Group 1321315954">
<g id="Group 1321315924">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1112_1559)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_1112_1559)">
<path id="Vector" d="M34.7569 17.9502C34.8817 18.183 35.0935 18.357 35.3461 18.4342C35.5988 18.5115 35.8717 18.4856 36.1054 18.3624L37.9883 17.3629C38.2211 17.2381 38.3951 17.0263 38.4723 16.7737C38.5496 16.521 38.5237 16.2481 38.4005 16.0144C38.2759 15.7814 38.064 15.6072 37.8113 15.53C37.5586 15.4527 37.2856 15.4787 37.052 15.6022L35.1711 16.6017C34.9381 16.7263 34.7639 16.9381 34.6865 17.1907C34.6091 17.4434 34.6347 17.7164 34.7579 17.9502H34.7569ZM37.9883 28.2183L36.1064 27.2178C35.8727 27.0945 35.5998 27.0687 35.3472 27.1459C35.0945 27.2232 34.8827 27.3972 34.7579 27.63C34.6347 27.8638 34.6091 28.1368 34.6865 28.3894C34.7639 28.6421 34.9381 28.8538 35.1711 28.9785L37.052 29.979C37.2856 30.1025 37.5586 30.1285 37.8113 30.0512C38.064 29.974 38.2759 29.7998 38.4005 29.5668C38.5237 29.3331 38.5496 29.0602 38.4723 28.8076C38.3951 28.5549 38.2211 28.3431 37.9883 28.2183ZM35.6372 23.5679H37.3606C37.625 23.5674 37.8784 23.4621 38.0653 23.2752C38.2522 23.0882 38.3575 22.8349 38.358 22.5705C38.3575 22.3062 38.2522 22.0528 38.0653 21.8659C37.8784 21.6789 37.625 21.5737 37.3606 21.5731H35.6382C35.3739 21.5737 35.1205 21.6789 34.9336 21.8659C34.7467 22.0528 34.6414 22.3062 34.6409 22.5705C34.6417 22.8347 34.747 23.0878 34.9339 23.2745C35.1208 23.4612 35.3741 23.5663 35.6382 23.5669L35.6372 23.5679ZM32.6222 17.0015H28.9475C28.6834 17.0023 28.4302 17.1077 28.2435 17.2946C28.0568 17.4815 27.9517 17.7347 27.9512 17.9989V28.1592C27.952 28.4232 28.0572 28.6762 28.2439 28.8629C28.4306 29.0495 28.6835 29.1548 28.9475 29.1556H32.6222C32.8862 29.1548 33.1392 29.0495 33.3259 28.8629C33.5125 28.6762 33.6178 28.4232 33.6186 28.1592V17.9989C33.6178 17.7349 33.5125 17.4819 33.3259 17.2952C33.1392 17.1086 32.8862 17.0033 32.6222 17.0025V17.0015ZM31.6249 27.1618H29.9449V18.9963H31.6249V27.1618Z" fill="white"/>
<path id="Vector_2" d="M28.9771 9.5918H28.9222C28.6962 9.59171 28.4774 9.67087 28.3038 9.81551L18.4625 15.9366H11.4818C11.2174 15.9371 10.964 16.0424 10.7771 16.2293C10.5902 16.4162 10.4849 16.6696 10.4844 16.934V28.6479C10.4864 29.1968 10.9318 29.6422 11.4818 29.6443H12.4357V36.4127C12.4365 36.6768 12.5419 36.9299 12.7288 37.1166C12.9157 37.3034 13.1689 37.4085 13.4331 37.409H17.0467C17.3107 37.4082 17.5636 37.303 17.7503 37.1163C17.937 36.9296 18.0422 36.6767 18.043 36.4127V29.6443H18.4687L28.3049 35.7622C28.4781 35.9068 28.6965 35.986 28.9222 35.9859H28.9771C29.2339 35.9851 29.48 35.8827 29.6616 35.7011C29.8433 35.5195 29.9457 35.2734 29.9465 35.0165V10.5623C29.9462 10.3051 29.844 10.0586 29.6623 9.87671C29.4806 9.6948 29.2342 9.59235 28.9771 9.5918ZM16.0493 35.4153H14.4284V29.6836H16.0493V35.4153ZM20.0161 17.3182L27.9517 12.382V33.1957L20.0161 28.2595V17.3182ZM12.4771 17.9314H18.0223V27.6505H12.4781V17.9314H12.4771Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1112_1559" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1112_1559"/>
</filter>
<clipPath id="clip0_1112_1559">
<rect width="29" height="29" fill="white" transform="translate(10 9)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/megaphone2.png

 src/assets/images/routePlan/eventList/megaphone2.svg

New file
@@ -0,0 +1,40 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315958">
<g id="Group 1321315955">
<g id="Group 1321315924">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1112_1560)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_1112_1560)">
<g id="Group 1321315956">
<path id="Subtract" d="M35.3477 27.1471C35.6002 27.07 35.8729 27.0962 36.1064 27.2194L37.9883 28.2194C38.2211 28.3442 38.3954 28.5566 38.4727 28.8092C38.5497 29.0618 38.5236 29.3345 38.4004 29.568C38.2758 29.801 38.0642 29.9752 37.8115 30.0524C37.5588 30.1297 37.2854 30.1037 37.0518 29.9801L36.0186 29.4303C35.8411 28.646 35.533 27.9119 35.1172 27.2516C35.1887 27.2077 35.266 27.1721 35.3477 27.1471ZM32.6221 17.0026V17.0036C32.8861 17.0044 33.1395 17.1099 33.3262 17.2965C33.5128 17.4832 33.6183 17.7367 33.6191 18.0007V25.5524C33.0275 25.068 32.3547 24.6795 31.625 24.4079V18.9977H29.9453V24.0104C29.6932 23.983 29.4371 23.9684 29.1777 23.9684C28.7593 23.9684 28.3494 24.0066 27.9512 24.0768V18.0007C27.9517 17.7365 28.0574 17.4825 28.2441 17.2956C28.4308 17.1089 28.6842 17.0034 28.9482 17.0026H32.6221ZM37.3613 21.5749C37.6254 21.5755 37.8786 21.6802 38.0654 21.8669C38.2524 22.0538 38.3579 22.3076 38.3584 22.5719C38.3578 22.8362 38.2522 23.0892 38.0654 23.276C37.8786 23.4629 37.6255 23.5683 37.3613 23.569H35.6377L35.6387 23.568C35.3746 23.5675 35.1214 23.4626 34.9346 23.276C34.7477 23.0894 34.6415 22.8361 34.6406 22.5719C34.6412 22.3076 34.7467 22.0538 34.9336 21.8669C35.1205 21.68 35.3743 21.5754 35.6387 21.5749H37.3613ZM37.0518 15.6032C37.2853 15.4797 37.5589 15.4537 37.8115 15.5309C38.0641 15.6081 38.2757 15.7825 38.4004 16.0153C38.5236 16.249 38.5499 16.5224 38.4727 16.7751C38.3954 17.0277 38.2211 17.2391 37.9883 17.3639L36.1055 18.3639C35.8719 18.4871 35.5992 18.5124 35.3467 18.4352C35.0941 18.358 34.8817 18.1846 34.7568 17.9518H34.7578C34.6347 17.7181 34.6091 17.4447 34.6865 17.1921C34.7639 16.9394 34.9389 16.7278 35.1719 16.6032L37.0518 15.6032Z" fill="white"/>
<path id="Subtract_2" d="M28.9766 9.59082C29.2337 9.59137 29.4804 9.69407 29.6621 9.87598C29.8438 10.0579 29.946 10.3044 29.9463 10.5615V24.0098C29.6939 23.9823 29.4375 23.9678 29.1777 23.9678C28.7593 23.9678 28.3494 24.006 27.9512 24.0762V12.3809L20.0156 17.3174V28.2588L22.2852 29.6709C22.2046 30.0961 22.1612 30.5347 22.1611 30.9834C22.1611 31.3235 22.1866 31.6582 22.2334 31.9854L18.4688 29.6436H18.043V36.4121C18.0421 36.676 17.9366 36.9286 17.75 37.1152C17.5634 37.3018 17.3107 37.4073 17.0469 37.4082H13.4326C13.1686 37.4076 12.9153 37.3028 12.7285 37.1162C12.5417 36.9295 12.4364 36.6762 12.4355 36.4121V29.6436H11.4814C10.9316 29.6414 10.4866 29.1962 10.4844 28.6475V16.9336C10.4849 16.6692 10.5904 16.4154 10.7773 16.2285C10.9642 16.0418 11.2173 15.9361 11.4814 15.9355H18.4619L28.3037 9.81445C28.4772 9.66994 28.6961 9.59075 28.9219 9.59082H28.9766ZM14.4277 29.6826V35.4141H16.0488V29.6826H14.4277ZM12.4775 17.9307V27.6494H18.0225V17.9307H12.4775Z" fill="white"/>
</g>
<path id="Vector" d="M34.7823 28.624C34.1971 27.2343 33.1163 26.1115 31.7498 25.4738C30.3833 24.8361 28.8286 24.7289 27.3876 25.173C25.9465 25.6171 24.7218 26.5808 23.9513 27.8771C23.1808 29.1733 22.9195 30.7097 23.218 32.1878C23.5166 33.6659 24.3537 34.9803 25.5669 35.876C26.78 36.7716 28.2827 37.1844 29.7832 37.0344C31.2837 36.8844 32.6749 36.1822 33.6868 35.0641C34.6986 33.9461 35.2589 32.4919 35.2589 30.9839C35.26 30.1733 35.0979 29.3707 34.7823 28.624ZM29.1965 36.0012C26.4299 36.0012 24.1792 33.7505 24.1792 30.9839C24.1782 29.802 24.5963 28.6579 25.3592 27.7552L32.4253 34.8212C31.5225 35.5842 30.3784 36.0023 29.1965 36.0012ZM33.1508 34.0685L26.1119 27.0296C26.9921 26.3399 28.0783 25.9656 29.1965 25.9667C31.963 25.9667 34.2137 28.2174 34.2137 30.9839C34.2148 32.1021 33.8405 33.1884 33.1508 34.0685Z" fill="white" stroke="white" stroke-width="0.6"/>
</g>
</g>
<defs>
<filter id="filter0_i_1112_1560" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1112_1560"/>
</filter>
<clipPath id="clip0_1112_1560">
<rect width="29" height="29" fill="white" transform="translate(10 9)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/panoShot.png

 src/assets/images/routePlan/eventList/panoShot.svg

New file
@@ -0,0 +1,29 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315920">
<g id="Group 1321315682">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16927)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M27.0641 18.2863V12.3395L27.9266 12.4316C32.4312 12.9113 35.5297 14.0082 35.6531 15.7363H35.6562L35.6531 29.7254L35.6562 29.7973C35.6562 32.7926 30.6141 35.0441 24.7812 35.2504L24.3547 35.2629L23.9375 35.266C18.125 35.266 12.8 33.1785 12.2609 30.2457L12.2297 30.0254L12.2188 29.7973V15.7379L12.225 15.7363L12.2281 15.6738C12.4094 14.0941 15.1016 13.052 19.0781 12.5316L19.9484 12.4301L20.8125 12.3379V18.2848C22.8896 18.5315 24.9886 18.5315 27.0656 18.2848L27.0641 18.2863ZM29.1094 26.2957L24.2344 31.1738L21.5641 28.5051L17.4 32.6707C19.0531 33.2441 21.1328 33.6348 23.3297 33.6957L23.9312 33.7035L24.3328 33.7004C28.6016 33.6223 32.4031 32.3051 33.6578 30.841L29.1094 26.2973V26.2957ZM13.7797 17.8707V29.7582L13.7875 29.9082C13.8609 30.6457 14.6281 31.3863 15.8453 32.016L21.5656 26.2973L24.2328 28.9629L29.1109 24.0879L34.0953 29.0707L34.0922 17.8738C32.9828 18.5426 31.3578 19.0973 29.4406 19.4832C29.0266 19.5707 28.5969 19.6473 28.1594 19.716L27.0625 19.8707C26.4969 19.9285 25.9172 19.9723 25.3297 20.0004L24.4453 20.0301L23.9375 20.0348C22.875 20.0348 21.8219 19.9738 20.8094 19.8613L20.8109 19.8707L20.4156 19.8145C19.7552 19.7315 19.0985 19.622 18.4469 19.4863C16.525 19.0988 14.8906 18.5426 13.7797 17.8707ZM17.6875 21.9379C18.1019 21.9379 18.4993 22.1025 18.7924 22.3955C19.0854 22.6886 19.25 23.086 19.25 23.5004C19.25 23.9148 19.0854 24.3122 18.7924 24.6052C18.4993 24.8983 18.1019 25.0629 17.6875 25.0629C17.2731 25.0629 16.8757 24.8983 16.5826 24.6052C16.2896 24.3122 16.125 23.9148 16.125 23.5004C16.125 23.086 16.2896 22.6886 16.5826 22.3955C16.8757 22.1025 17.2731 21.9379 17.6875 21.9379ZM28.625 14.0895V18.0441L28.8469 18.0035C29.3 17.9145 29.7359 17.816 30.15 17.7098C31.6969 17.2988 32.9312 16.7504 33.6094 16.1379L33.7672 15.9848L33.9984 15.7379H34.0578C33.7828 15.2957 31.9156 14.6082 29.2797 14.1863L28.625 14.0895ZM19.2469 18.0441V14.0895L18.9719 14.1285C16.1391 14.5441 14.1062 15.2738 13.8156 15.7379H13.8766L14.1078 15.9848C14.7438 16.6613 16.0641 17.2707 17.7547 17.716C18.0438 17.791 18.3453 17.8613 18.6547 17.927L19.2469 18.0441Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16927" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16927"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/rotateYaw.png

 src/assets/images/routePlan/eventList/rotateYaw.svg

New file
@@ -0,0 +1,28 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315676">
<g id="Group 1321315603">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16888)">
<rect y="0.732422" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="1.23242" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M32.1875 17.7324C31.3125 16.4824 30.3125 15.4824 28.9375 14.7324C27.4375 13.9824 25.6875 13.4824 23.9375 13.4824C22.1875 13.4824 20.4375 13.9824 18.9375 14.8574C17.6875 15.6074 16.5625 16.6074 15.6875 17.7324L13.9375 15.9824V20.9824H18.9375L17.0625 19.1074C17.8125 17.9824 18.6875 17.1074 19.8125 16.4824C21.0625 15.7324 22.4375 15.3574 23.8125 15.3574C25.1875 15.3574 26.6875 15.7324 27.8125 16.4824C28.9375 17.1074 29.9375 18.1074 30.5625 19.1074L28.9375 20.9824H33.9375V15.9824L32.1875 17.7324Z" fill="white"/>
<path id="Vector_2" d="M24.8125 19.3574L23.9375 17.4824L23.0625 19.3574L16.8125 33.1074L15.8125 35.2324L17.9375 34.3574L23.8125 31.9824L29.6875 34.3574L31.8125 35.2324L30.8125 33.1074L24.8125 19.3574ZM24.3125 30.1074L23.9375 29.9824L23.5625 30.1074L19.4375 31.7324L23.9375 21.9824L28.3125 31.7324L24.3125 30.1074Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16888" x="0" y="0.732422" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16888"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/startRecord.png

 src/assets/images/routePlan/eventList/startRecord.svg

New file
@@ -0,0 +1,29 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315673">
<g id="Group 48097214">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16873)">
<rect y="0.53418" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="1.03418" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M30.4552 34.265H13.7076C12.0928 34.265 10.7789 32.9088 10.7789 31.2419V16.7575C10.7789 15.0906 12.0928 13.7344 13.7076 13.7344H30.4552C32.0699 13.7344 33.3838 15.0906 33.3838 16.7575V31.2419C33.3838 32.9088 32.0699 34.265 30.4552 34.265ZM13.7076 15.75C13.1693 15.75 12.7313 16.2022 12.7313 16.7578V31.2422C12.7313 31.7978 13.1693 32.25 13.7076 32.25H30.4552C30.9934 32.25 31.4315 31.7978 31.4315 31.2422V16.7575C31.4315 16.2019 30.9934 15.7497 30.4552 15.7497H13.7076V15.75Z" fill="white"/>
<path id="Vector_2" d="M36.8598 31.2313C36.4756 31.2313 36.0918 31.1269 35.7415 30.9184L31.6146 28.4588L32.5909 26.7134L36.7178 29.1731C36.8416 29.2469 36.9488 29.2047 37.0018 29.1731C37.0548 29.1416 37.1438 29.0666 37.1438 28.9194V19.0809C37.1438 18.9338 37.0548 18.8588 37.0018 18.8272C36.9488 18.7956 36.8416 18.7534 36.7178 18.8272L32.5909 21.2866L31.6146 19.5413L35.7415 17.0816C36.4417 16.6644 37.2779 16.6641 37.9778 17.0816C38.678 17.4988 39.0961 18.2463 39.0961 19.0806V28.9191C39.0961 29.7534 38.678 30.5009 37.9778 30.9181C37.6278 31.1269 37.2437 31.2309 36.8595 31.2313H36.8598Z" fill="white"/>
<path id="Vector_3" d="M20.3774 28.1783C20.0205 28.1783 19.6639 28.0814 19.3387 27.8873C18.6885 27.4998 18.3 26.8055 18.3 26.0305V21.9689C18.3 21.1936 18.6882 20.4995 19.3387 20.112C19.989 19.7242 20.7655 19.7245 21.4161 20.112L24.8237 22.143C25.4739 22.5305 25.8624 23.2245 25.8624 23.9998C25.8624 24.7752 25.4742 25.4692 24.8237 25.8567L21.4161 27.8877C21.091 28.0814 20.734 28.1786 20.3774 28.1786V28.1783ZM20.3783 21.8383C20.3602 21.8383 20.3387 21.843 20.315 21.8573C20.2527 21.8945 20.2527 21.9486 20.2527 21.9689V26.0305C20.2527 26.0508 20.2527 26.1048 20.315 26.142C20.3774 26.1795 20.4228 26.1523 20.4398 26.142L23.8474 24.1111C23.8646 24.1008 23.9097 24.0739 23.9097 23.9995C23.9097 23.9252 23.8643 23.898 23.8474 23.888L20.4398 21.857C20.4292 21.8508 20.408 21.838 20.3783 21.838V21.8383Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16873" x="0" y="0.53418" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16873"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/stopRecord.png

 src/assets/images/routePlan/eventList/stopRecord.svg

New file
@@ -0,0 +1,28 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315674">
<g id="Group 1321315325">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16866)">
<rect y="0.267578" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.767578" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M16.9346 19.7317C16.7514 19.9377 16.6563 20.2075 16.6697 20.4829V28.0979C16.6697 28.3056 16.7261 28.5094 16.8328 28.6876C16.9396 28.8658 17.0928 29.0117 17.276 29.1096C17.4545 29.1997 17.6559 29.2346 17.8543 29.2098C18.0527 29.1849 18.2392 29.1015 18.39 28.9701L21.5335 26.2753L16.9346 19.7317ZM36.3278 15.4778C36.0638 15.4785 35.8046 15.5475 35.5751 15.6779C33.7967 16.6795 31.3761 18.1769 29.7939 19.1752V16.1018C29.8399 15.7134 29.7298 15.3227 29.4877 15.0155C29.2457 14.7084 28.8916 14.5099 28.5032 14.4639H28.4996V14.4704H19.0978L20.459 16.4046H27.8593V26.9355L29.9019 29.8413L35.647 32.9552C35.8815 33.0723 36.1421 33.1275 36.4039 33.1154C36.6657 33.1033 36.9201 33.0245 37.1428 32.8863C37.3655 32.7481 37.5491 32.5552 37.6762 32.326C37.8033 32.0968 37.8696 31.8388 37.8688 31.5767V17.0188C37.8681 16.1216 37.1321 15.4778 36.3278 15.4778ZM36.1406 31.258L29.9001 27.8753V21.1546C31.2291 20.3055 34.0767 18.5227 36.1406 17.3437V31.258Z" fill="white"/>
<path id="Vector_2" d="M25.696 32.1965H12.0667V16.4039H14.596L13.2364 14.469H11.623C11.428 14.4693 11.235 14.5083 11.0552 14.5836C10.8753 14.659 10.7122 14.7692 10.5752 14.908C10.432 15.0466 10.3188 15.213 10.2426 15.3972C10.1665 15.5813 10.129 15.7791 10.1326 15.9783V32.6225C10.1312 33.0199 10.2872 33.4017 10.5665 33.6844C10.8458 33.9672 11.2256 34.1279 11.623 34.1314H27.0561L25.696 32.1965ZM32.4814 35.8614H30.183L13.7718 12.6729H16.0703L32.4814 35.8614Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16866" x="0" y="0.267578" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16866"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/takePhoto.png

 src/assets/images/routePlan/eventList/takePhoto.svg

New file
@@ -0,0 +1,27 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315679">
<g id="Group 1321315606">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16907)">
<rect y="0.464844" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.964844" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M26.585 12.7773C27.0259 12.7774 27.4583 12.8987 27.835 13.1278C28.2117 13.357 28.5182 13.6852 28.7211 14.0767L30.1077 16.7532H35.429C36.0672 16.7532 36.6792 17.0067 37.1305 17.4579C37.5817 17.9092 37.8353 18.5212 37.8353 19.1594V34.4336C37.8353 35.0718 37.5817 35.6838 37.1305 36.1351C36.6792 36.5863 36.0672 36.8398 35.429 36.8398H12.6562C12.0181 36.8398 11.406 36.5863 10.9548 36.1351C10.5035 35.6838 10.25 35.0718 10.25 34.4336V19.1594C10.25 18.5212 10.5035 17.9092 10.9548 17.4579C11.406 17.0067 12.0181 16.7532 12.6562 16.7532H17.9156L19.2473 14.1028C19.4476 13.7044 19.7547 13.3694 20.1343 13.1354C20.514 12.9013 20.9511 12.7774 21.3971 12.7773H26.5843H26.585ZM26.585 14.8398H21.3971C21.3335 14.8399 21.2712 14.8576 21.2171 14.891C21.1629 14.9244 21.1191 14.9721 21.0905 15.0289L19.4721 18.2471C19.3864 18.4179 19.2548 18.5616 19.0921 18.662C18.9294 18.7624 18.742 18.8156 18.5509 18.8157H12.6562C12.5651 18.8157 12.4776 18.8519 12.4132 18.9163C12.3487 18.9808 12.3125 19.0682 12.3125 19.1594V34.4336C12.3125 34.5248 12.3487 34.6122 12.4132 34.6767C12.4776 34.7411 12.5651 34.7773 12.6562 34.7773H35.4283C35.5195 34.7773 35.6069 34.7411 35.6714 34.6767C35.7358 34.6122 35.7721 34.5248 35.7721 34.4336V19.1594C35.7721 19.0682 35.7358 18.9808 35.6714 18.9163C35.6069 18.8519 35.5195 18.8157 35.4283 18.8157H29.4801C29.2912 18.8155 29.1059 18.7636 28.9446 18.6654C28.7832 18.5671 28.6519 18.4265 28.565 18.2588L26.8896 15.0255C26.8606 14.9695 26.8168 14.9226 26.7629 14.8899C26.7091 14.8572 26.6473 14.8398 26.5843 14.8398H26.585ZM23.9821 21.039C25.3496 21.039 26.6612 21.5823 27.6281 22.5493C28.5951 23.5162 29.1384 24.8278 29.1384 26.1953C29.1384 27.5628 28.5951 28.8743 27.6281 29.8413C26.6612 30.8083 25.3496 31.3515 23.9821 31.3515C22.6146 31.3515 21.3031 30.8083 20.3361 29.8413C19.3691 28.8743 18.8259 27.5628 18.8259 26.1953C18.8259 24.8278 19.3691 23.5162 20.3361 22.5493C21.3031 21.5823 22.6146 21.039 23.9821 21.039ZM23.9821 23.1015C23.1616 23.1015 22.3747 23.4275 21.7945 24.0077C21.2143 24.5879 20.8884 25.3748 20.8884 26.1953C20.8884 27.0158 21.2143 27.8027 21.7945 28.3829C22.3747 28.9631 23.1616 29.289 23.9821 29.289C24.8026 29.289 25.5895 28.9631 26.1697 28.3829C26.7499 27.8027 27.0759 27.0158 27.0759 26.1953C27.0759 25.3748 26.7499 24.5879 26.1697 24.0077C25.5895 23.4275 24.8026 23.1015 23.9821 23.1015ZM34.6384 13.8203C34.9119 13.8203 35.1742 13.9289 35.3676 14.1223C35.561 14.3157 35.6696 14.578 35.6696 14.8515C35.6696 15.125 35.561 15.3873 35.3676 15.5807C35.1742 15.7741 34.9119 15.8828 34.6384 15.8828H32.5759C32.3024 15.8828 32.0401 15.7741 31.8467 15.5807C31.6533 15.3873 31.5446 15.125 31.5446 14.8515C31.5446 14.578 31.6533 14.3157 31.8467 14.1223C32.0401 13.9289 32.3024 13.8203 32.5759 13.8203H34.6384Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16907" x="0" y="0.464844" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16907"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/eventList/takePhotoOrientation.svg

New file
@@ -0,0 +1,31 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315679">
<g id="Group 1321315606">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_2189_1833)">
<rect width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.5" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame" clip-path="url(#clip0_2189_1833)">
<path id="Subtract" d="M26.585 12.3125C27.0259 12.3126 27.4583 12.4339 27.835 12.6631C28.2117 12.8922 28.5179 13.2208 28.7207 13.6123L30.1074 16.2881H35.4287C36.0669 16.2881 36.6796 16.5419 37.1309 16.9932C37.5819 17.4443 37.8349 18.0563 37.835 18.6943V24H35.7725V18.6943C35.7724 18.6032 35.7353 18.5156 35.6709 18.4512C35.6066 18.3871 35.5195 18.3507 35.4287 18.3506H29.4805C29.2916 18.3505 29.1057 18.2984 28.9443 18.2002C28.7832 18.102 28.6523 17.9615 28.5654 17.7939L26.8896 14.5605C26.8607 14.5046 26.8165 14.4575 26.7627 14.4248C26.7089 14.3922 26.6469 14.375 26.584 14.375H21.3975C21.3339 14.3751 21.2709 14.3924 21.2168 14.4258C21.1627 14.4592 21.1194 14.5077 21.0908 14.5645L19.4717 17.7822C19.3859 17.953 19.2544 18.0969 19.0918 18.1973C18.9292 18.2976 18.7418 18.3505 18.5508 18.3506H12.6562C12.5651 18.3506 12.4775 18.3868 12.4131 18.4512C12.3487 18.5156 12.3126 18.6032 12.3125 18.6943V33.9688C12.3125 34.0599 12.3486 34.1474 12.4131 34.2119C12.4776 34.2764 12.5651 34.3125 12.6562 34.3125H25V36.375H12.6562C12.0181 36.375 11.4063 36.1212 10.9551 35.6699C10.5038 35.2187 10.25 34.6069 10.25 33.9688V18.6943C10.2501 18.0562 10.5039 17.4444 10.9551 16.9932C11.4063 16.542 12.0181 16.2881 12.6562 16.2881H17.916L19.2471 13.6377C19.4474 13.2393 19.7552 12.9049 20.1348 12.6709C20.5143 12.4369 20.9515 12.3125 21.3975 12.3125H26.585ZM23.9824 20.5742C25.3497 20.5743 26.661 21.1173 27.6279 22.084C28.174 22.63 28.5856 23.2862 28.8398 24H26.5459C26.4361 23.8373 26.3108 23.6838 26.1699 23.543C25.5898 22.9628 24.8028 22.6368 23.9824 22.6367C23.162 22.6367 22.3751 22.9629 21.7949 23.543C21.2147 24.1232 20.8887 24.91 20.8887 25.7305C20.8887 26.551 21.2147 27.3378 21.7949 27.918C22.3751 28.4981 23.162 28.8242 23.9824 28.8242C24.3327 28.8242 24.6754 28.7607 25 28.6475V30.7852C24.6674 30.8521 24.3267 30.8867 23.9824 30.8867C22.6149 30.8867 21.3029 30.343 20.3359 29.376C19.3692 28.409 18.8262 27.0978 18.8262 25.7305C18.8262 24.3629 19.369 23.051 20.3359 22.084C21.3029 21.1171 22.615 20.5742 23.9824 20.5742ZM34.6387 13.3555C34.9119 13.3555 35.1739 13.4641 35.3672 13.6572C35.5606 13.8506 35.6699 14.1132 35.6699 14.3867C35.6699 14.6602 35.5606 14.9228 35.3672 15.1162C35.1739 15.3093 34.9119 15.4179 34.6387 15.418H32.5762C32.3027 15.418 32.0401 15.3095 31.8467 15.1162C31.6533 14.9228 31.5449 14.6602 31.5449 14.3867C31.5449 14.1132 31.6533 13.8506 31.8467 13.6572C32.0401 13.4639 32.3027 13.3555 32.5762 13.3555H34.6387Z" fill="white"/>
<path id="F" d="M29.9482 37V26.0909H37.1712V27.9925H32.2546V30.592H36.6918V32.4936H32.2546V37H29.9482Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_2189_1833" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2189_1833"/>
</filter>
<clipPath id="clip0_2189_1833">
<rect width="33" height="33" fill="white" transform="translate(7.5 7.5)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/eventList/titlebg.png

 src/assets/images/routePlan/eventList/zoom.png

 src/assets/images/routePlan/eventList/zoom.svg

New file
@@ -0,0 +1,28 @@
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315680">
<g id="Group 1321315607">
<g id="Rectangle 5842">
<g filter="url(#filter0_i_1870_16913)">
<rect y="0.197266" width="48" height="48" rx="4" fill="#195BAD" fill-opacity="0.5"/>
</g>
<rect x="0.5" y="0.697266" width="47" height="47" rx="3.5" stroke="#306FCA"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M34.9738 38.2056C34.6246 38.2056 34.2745 38.0736 34.0086 37.8059L28.5475 32.3447C28.0158 31.812 28.0158 30.9471 28.5475 30.4145C29.0801 29.8828 29.9451 29.8828 30.4777 30.4145L35.9389 35.8765C36.4706 36.4092 36.4706 37.2742 35.9389 37.8059C35.674 38.0736 35.3248 38.2056 34.9738 38.2056ZM16.5818 24.8934C16.0169 24.8934 15.5577 24.4347 15.5577 23.8698C15.5606 20.3164 18.1629 17.4248 21.3653 17.4248C21.9302 17.4248 22.3894 17.8844 22.3894 18.4489C22.3894 19.0138 21.9297 19.473 21.3653 19.473C19.2928 19.473 17.6092 21.4458 17.6092 23.8698C17.6059 24.4347 17.1491 24.8934 16.5818 24.8934ZM37.6377 14.213H31.3859C30.9227 14.213 30.5457 13.8365 30.5457 13.3724V12.9364C30.5457 12.4722 30.9227 12.0957 31.3859 12.0957H37.6387C38.1019 12.0957 38.4789 12.4722 38.4789 12.9364V13.3724C38.4789 13.837 38.1019 14.213 37.6377 14.213Z" fill="white"/>
<path id="Vector_2" d="M33.4536 16.2805V10.0291C33.4536 9.56495 33.8296 9.18848 34.2947 9.18848H34.7299C35.195 9.18848 35.571 9.56498 35.571 10.0291V16.281C35.571 16.7452 35.195 17.1216 34.7299 17.1216H34.2947C33.8296 17.1212 33.4536 16.7447 33.4536 16.2805ZM22.0027 35.4734C15.6036 35.4734 10.3961 30.2668 10.3961 23.8672C10.3961 17.4681 15.6036 12.2634 22.0027 12.2634C28.4014 12.2634 33.6099 17.4709 33.6099 23.87C33.6099 30.2687 28.4052 35.4734 22.0027 35.4734ZM22.0027 14.9953C17.1088 14.9953 13.1281 18.9761 13.1281 23.87C13.1281 28.7634 17.1088 32.7446 22.0027 32.7446C26.8962 32.7446 30.8774 28.7634 30.8774 23.87C30.8774 18.9761 26.8962 14.9953 22.0027 14.9953Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_i_1870_16913" x="0" y="0.197266" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="8"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.375 0 0 0 0 0.645833 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1870_16913"/>
</filter>
</defs>
</svg>

 src/assets/images/routePlan/pointAirLine/followHeight.svg

New file
@@ -0,0 +1,8 @@
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321316140">
<g id="Group 1321315613">
<rect id="Rectangle 34624927" x="0.484375" y="0.489258" width="26.0977" height="26.0977" rx="4" fill="black" fill-opacity="0"/>
</g>
<path id="Vector" d="M7.66692 11.3464L7 10.7144L8.66679 9.13549C8.85677 8.9555 9.14273 8.9555 9.33271 9.13549L10.9995 10.7154L10.3326 11.3454L9.47569 10.5344V16.4661L10.3326 15.6541L10.9995 16.2861L9.33271 17.865C9.24321 17.9512 9.12397 17.9995 8.99975 18C8.87554 17.9995 8.75629 17.9512 8.66679 17.865L7 16.2851L7.66692 15.6551L8.52381 16.4661V10.5344L7.66692 11.3464ZM11.9994 15.4231C12.0001 14.816 12.2236 14.2303 12.6273 13.7769C13.0311 13.3235 13.5872 13.034 14.1901 12.9633C14.2317 12.9597 14.2735 12.9597 14.3151 12.9633H18.4746C18.8629 12.9532 19.2319 12.7919 19.503 12.5137C19.7741 12.2354 19.9258 11.8623 19.9258 11.4739C19.9258 11.0854 19.7741 10.7123 19.503 10.4341C19.2319 10.1558 18.8629 9.99451 18.4746 9.98445H13.2282C13.0978 9.98445 12.9726 9.93261 12.8804 9.84035C12.7881 9.74809 12.7363 9.62295 12.7363 9.49247C12.7363 9.36199 12.7881 9.23686 12.8804 9.1446C12.9726 9.05233 13.0978 9.0005 13.2282 9.0005H18.4766C18.8055 8.99388 19.1325 9.05297 19.4384 9.1743C19.7442 9.29562 20.0228 9.47675 20.2578 9.70708C20.4928 9.93741 20.6795 10.2123 20.8069 10.5157C20.9344 10.8191 21 11.1448 21 11.4739C21 11.8029 20.9344 12.1287 20.8069 12.432C20.6795 12.7354 20.4928 13.0103 20.2578 13.2406C20.0228 13.471 19.7442 13.6521 19.4384 13.7734C19.1325 13.8948 18.8055 13.9538 18.4766 13.9472H14.4731C14.2742 13.9421 14.0764 13.9768 13.8912 14.0493C13.706 14.1219 13.5372 14.2307 13.3948 14.3696C13.2523 14.5084 13.1391 14.6743 13.0618 14.8576C12.9845 15.0408 12.9447 15.2377 12.9447 15.4366C12.9447 15.6355 12.9845 15.8324 13.0618 16.0157C13.1391 16.199 13.2523 16.3649 13.3948 16.5037C13.5372 16.6425 13.706 16.7514 13.8912 16.824C14.0764 16.8965 14.2742 16.9312 14.4731 16.9261H20.5063C20.6368 16.9261 20.7619 16.9779 20.8542 17.0702C20.9464 17.1624 20.9983 17.2876 20.9983 17.418C20.9983 17.5485 20.9464 17.6736 20.8542 17.7659C20.7619 17.8582 20.6368 17.91 20.5063 17.91H14.4731C14.1471 17.91 13.8244 17.8456 13.5234 17.7205C13.2224 17.5953 12.9492 17.4119 12.7193 17.1808C12.4894 16.9497 12.3075 16.6755 12.1839 16.3738C12.0604 16.0722 11.9977 15.7491 11.9994 15.4231Z" fill="white"/>
</g>
</svg>

 src/assets/images/routePlan/pointAirLine/info0.png

 src/assets/images/routePlan/pointAirLine/info1.png

 src/assets/images/routePlan/pointAirLine/info2.png

 src/assets/images/routePlan/pointAirLine/info3.png

 src/assets/images/routePlan/pointAirLine/info4.png

 src/assets/images/routePlan/pointAirLine/pointIcon.png

 src/assets/images/routePlan/pointAirLine/pointOfInterest.svg

New file
@@ -0,0 +1,18 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315987">
<g id="Group 1321315981">
<circle id="Ellipse 2591" cx="17" cy="17" r="17" fill="#2674FD"/>
</g>
<g id="Group 1321315980">
<g id="Frame" clip-path="url(#clip0_850_2428)">
<path id="Vector" d="M13.8132 16.9996C13.8132 17.8475 14.15 18.6606 14.7496 19.2601C15.3491 19.8597 16.1622 20.1965 17.0101 20.1965C17.858 20.1965 18.6711 19.8597 19.2706 19.2601C19.8702 18.6606 20.207 17.8475 20.207 16.9996C20.207 16.1517 19.8702 15.3386 19.2706 14.7391C18.6711 14.1395 17.858 13.8027 17.0101 13.8027C16.1622 13.8027 15.3491 14.1395 14.7496 14.7391C14.15 15.3386 13.8132 16.1517 13.8132 16.9996Z" fill="white"/>
<path id="Vector_2" d="M27.0005 16.4006H25.9815C25.6818 11.915 22.0953 8.32848 17.6096 8.02877V7.00977H16.4108V8.02877C11.9252 8.32848 8.33869 11.915 8.03899 16.4006H7V17.5994H8.03899C8.33869 22.085 11.9252 25.6715 16.4108 25.9713V26.9903H17.6096V25.9713C22.0953 25.6715 25.6818 22.085 25.9815 17.5994H27.0005V16.4006ZM17.6096 24.7624V21.9951H16.4108V24.7624C12.5945 24.4727 9.53752 21.4157 9.2478 17.5994H12.0051V16.4006H9.2478C9.53752 12.5843 12.5945 9.52731 16.4108 9.23759V12.0049H17.6096V9.23759C21.4259 9.52731 24.4829 12.5843 24.7726 16.4006H22.0053V17.5994H24.7726C24.4829 21.4157 21.4259 24.4727 17.6096 24.7624Z" fill="white"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_850_2428">
<rect width="20" height="20" fill="white" transform="translate(7 7)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/pointAirLine/pointOfInterest1.svg

New file
@@ -0,0 +1,31 @@
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315986">
<g id="Group 1321315982">
<g id="Ellipse 2591" filter="url(#filter0_d_850_2427)">
<circle cx="26" cy="26" r="17" fill="#2674FD"/>
<circle cx="26" cy="26" r="16" stroke="white" stroke-width="2"/>
</g>
</g>
<g id="Group 1321315983">
<g id="Frame" clip-path="url(#clip0_850_2427)">
<path id="Vector" d="M22.8132 25.9996C22.8132 26.8475 23.15 27.6606 23.7496 28.2601C24.3491 28.8597 25.1622 29.1965 26.0101 29.1965C26.858 29.1965 27.6711 28.8597 28.2706 28.2601C28.8702 27.6606 29.207 26.8475 29.207 25.9996C29.207 25.1517 28.8702 24.3386 28.2706 23.7391C27.6711 23.1395 26.858 22.8027 26.0101 22.8027C25.1622 22.8027 24.3491 23.1395 23.7496 23.7391C23.15 24.3386 22.8132 25.1517 22.8132 25.9996Z" fill="white"/>
<path id="Vector_2" d="M36.0005 25.4006H34.9815C34.6818 20.915 31.0953 17.3285 26.6096 17.0288V16.0098H25.4108V17.0288C20.9252 17.3285 17.3387 20.915 17.039 25.4006H16V26.5994H17.039C17.3387 31.085 20.9252 34.6715 25.4108 34.9713V35.9903H26.6096V34.9713C31.0953 34.6715 34.6818 31.085 34.9815 26.5994H36.0005V25.4006ZM26.6096 33.7624V30.9951H25.4108V33.7624C21.5945 33.4727 18.5375 30.4157 18.2478 26.5994H21.0051V25.4006H18.2478C18.5375 21.5843 21.5945 18.5273 25.4108 18.2376V21.0049H26.6096V18.2376C30.4259 18.5273 33.4829 21.5843 33.7726 25.4006H31.0053V26.5994H33.7726C33.4829 30.4157 30.4259 33.4727 26.6096 33.7624Z" fill="white"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_850_2427" x="0.3" y="0.3" width="51.4" height="51.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4.35"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0144231 0 0 0 0 0.292295 0 0 0 0 1 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_850_2427"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_850_2427" result="shape"/>
</filter>
<clipPath id="clip0_850_2427">
<rect width="20" height="20" fill="white" transform="translate(16 16)"/>
</clipPath>
</defs>
</svg>

 src/assets/images/routePlan/pointAirLine/saveButton.png

 src/assets/images/signMachineNest/videoshow.png

 src/components/PlanarRouteLineList/PlanarRouteLineList.vue

@@ -1,13 +1,3 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-06-10 15:34:31
 * @LastEditors  : yuan
 * @LastEditTime : 2025-06-10 15:53:47
 * @FilePath     : \src\components\PlanarRouteLineList\PlanarRouteLineList.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-06-10 15:34:31
-->
<template>
    <div class="route-line-list" :class="customClass" v-show="props.curRouteLineData.templateType === 'mapping3d'">
        <div :class="{ active: item.select }" v-for="(item, index) in props.curRouteLineData.data" :key="index"

 src/components/PlaybackVideo/PlaybackVideo.vue

New file
@@ -0,0 +1,141 @@
<template>
    <el-dialog
        class="ztzf-dialog-video playback-dialog"
        v-model="isShow"
        append-to-body
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :show-close="false"
    >
        <template #header>
            <div class="title">视频回放</div>

            <div class="close" @click="isShow = false"></div>
        </template>

        <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
            <div class="mpa-container">
                <MapContainer ref="mapContainerEle" />
            </div>

            <div class="video-player-container">
                <VideoPlayer ref="videoPlayerEle" />
            </div>

            <div v-show="photoEleShow" class="photo-list-container">
                <PhotoList ref="photoListEle" />
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import PhotoList from '@/components/PlaybackVideo/components/PhotoList.vue'
import VideoPlayer from '@/components/PlaybackVideo/components/VideoPlayer.vue'
import MapContainer from '@/components/PlaybackVideo/components/MapContainer.vue'
import { getWaylinejobLiveRecordPage, findFlightLogInfoByJobId, aiImagesPage } from '@/api/playback/'
const isShow = defineModel('show', {
    type: Boolean,
    default: true,
})

const detailData = defineModel('detailData', {
    type: Object,
    default: () => ({}),
})

const props = defineProps(['detailsData'])

const loading = ref(true)
const photoEleShow = ref(false)

const positionData = ref(null)
const attachmentData = ref(null)

const mapContainerEle = ref(null)
const videoPlayerEle = ref(null)
const photoListEle = ref(null)

const jobId = inject('jobId')

provide('videoData', detailData)
provide('positionData', positionData)
provide('attachmentData', attachmentData)

watch(isShow, newVal => {
    if (newVal) {
        init()
    }
})

const init = async () => {
    loading.value = true
    await nextTick()

    Promise.all([
        findFlightLogInfoByJobId({ jobId: jobId.value }),
        aiImagesPage({ size: 30, current: 1 }, { size: 30, current: 1, wayLineJobId: jobId.value, resultTypes: [0, 2] }),
    ]).then(([positionDetails, attachmentDetails]) => {
        let arr = positionDetails.data.data.filter(item => {
            return item.create_time >= detailData.value.start_time && item.create_time <= detailData.value.end_time
        })

        positionData.value = arr.sort((a, b) => a.create_time - b.create_time)

        attachmentData.value =
            attachmentDetails.data.data.records
                .filter(item => {
                    return (
                        item.metadata.createdTime >= detailData.value.start_time &&
                        item.metadata.createdTime <= detailData.value.end_time
                    )
                })
                .map(item => ({
                    ...item,
                    metadata: {
                        ...item.metadata,
                        createdTime: item.metadata.createdTime,
                    },
                })) || []

        photoEleShow.value = attachmentData.value.length > 0

        videoPlayerEle.value.init(detailData.value, attachmentData.value)
        mapContainerEle.value.init(positionData.value, props.detailsData, props.taskData)
        photoListEle.value.init(detailData.value, attachmentData.value)

        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.mpa-container {
    position: absolute;
    top: 58px;
    left: 10px;
    width: 338px;
    height: 206px;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
}

.video-player-container {
    width: 100%;
    height: 100%;
}

.photo-list-container {
    position: absolute;
    top: 58px;
    right: 10px;
    width: 338px;
    height: calc(100% - 116px);
    z-index: 1;
    border-radius: 8px;
    background: rgba(2, 2, 2, 0.6);
    overflow: hidden;
    backdrop-filter: blur(13.7px);
}
</style>

 src/components/PlaybackVideo/components/MapContainer.vue

New file
@@ -0,0 +1,227 @@
<template>
    <div class="ztzf-cesium map-box" id="map">
        <PlanarRouteLineList
            :curRouteLineData="curRouteLineData"
            @routeLineListClick="routeLineListClick"
            :customClass="'airline-list'"
        />
    </div>
</template>

<script setup>
import _ from 'lodash'
import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js'
// import { getWaylineSplitApi } from '@/api/routePlan'

import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'

import { flyVisual } from '@/utils/cesium/mapUtil'

import * as Cesium from 'cesium'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import aircraftGltf from '@/assets/gltf/aircraft.gltf'
import EventBus from '@/utils/eventBus'

// 加载航线hook
const {
    curRouteLineData,
    routeLineListClick,
    initViewer,
    renderPreviewLine,
    removePreviewLine,
    resetCurRouteLineData,
    renderDroneRouteLine,
} = useRouteLine()

let viewer = null
let publicCesiumInstance = null

const initMap = () => {
    publicCesiumInstance = new PublicCesium({
        dom: 'map',
        terrain: true,
        flatMode: false,
        layerMode: 4,
        contour: true,
    })

    viewer = publicCesiumInstance.getViewer()
    viewer.scene.globe.depthTestAgainstTerrain = true

    initViewer(viewer)
}

// 绘制线和飞行
const drawLine = async detailsData => {
    detailsData.way_lines.forEach(async item => {
        // if (item.is_split) {
        //     getWaylineSplitApi(item.workspace_id).then(async res => {
        //         // 大航线拆分
        //         let result = res.data.data
        //         littleFileLine.value = result.wayline_file_list
        //         let bigPolygonList = await renderPreviewLine(
        //             import.meta.env.VITE_APP_AIRLINE_URL + result.object_key,
        //             result.wayline_type,
        //             result.wayline_file_list
        //         )
        //         emit('wayLineFileSelected', bigPolygonList)
        //     })
        // } else {
        await renderPreviewLine(item.url, item.wayline_type)
        // }
    })
}

let arrowLineMaterialProperty = new ArrowLineMaterialProperty({
    color: new Cesium.Color(128 / 255, 215 / 255, 255 / 255, 1),
    directionColor: new Cesium.Color(1, 1, 1, 1),
    outlineColor: new Cesium.Color(1, 1, 1, 1),
    outlineWidth: 0,
    speed: 5,
})

let droneEntity = null
let planarRouteEntity = null
let sampledPosition

const initPlanarRoute = data => {
    flyVisual({ positionsData: data.map(i => [i.longitude, i.latitude, i.height]), viewer, multiple: 3.2 })

    if (planarRouteEntity) {
        viewer.entities.remove(planarRouteEntity)
        planarRouteEntity = null
    }

    planarRouteEntity = viewer.entities.add({
        polyline: {
            width: 4,
            positions: data.map(i =>
                Cesium.Cartesian3.fromDegrees(Number(i.longitude), Number(i.latitude), Number(i.height))
            ),
            material: arrowLineMaterialProperty,
            clampToGround: false,
        },
    })
}

let startJulian = null
let endJulian = null

const init = async (positionData, detailsData) => {
    await nextTick()

    if (!viewer) initMap()

    resetCurRouteLineData()
    removePreviewLine()

    drawLine(detailsData)

    // initPlanarRoute(positionData)

    // sampledPosition = new Cesium.SampledPositionProperty()
    // positionData.forEach(item => {
    //     const time = toJulianDate(item.create_time)
    //     const pos = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.height)
    //     sampledPosition.addSample(time, pos)
    // })

    // // 3️⃣ 设置 Clock
    // startJulian = toJulianDate(positionData[0].create_time)
    // endJulian = toJulianDate(positionData[positionData.length - 1].create_time)
    // viewer.clock.startTime = startJulian.clone()
    // viewer.clock.stopTime = endJulian.clone()
    // viewer.clock.currentTime = startJulian.clone()
    // viewer.clock.multiplier = 1
    // viewer.clock.shouldAnimate = false
    // viewer.clock.clockRange = Cesium.ClockRange.CLAMPED

    // if (droneEntity) {
    //     viewer.entities.remove(droneEntity)
    //     droneEntity = null
    // }

    // droneEntity = viewer.entities.add({
    //     availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: startJulian, stop: endJulian })]),
    //     position: sampledPosition,
    //     model: {
    //         uri: aircraftGltf, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
    //         scale: 1, //缩放比例
    //         minimumPixelSize: 64, //最小像素大小，可以避免太小看不见
    //         maximumScale: 128,
    //     },
    // })
}

// ========== 播放/暂停/倍速/重播 控制 ==========
const mapAnimationPlay = () => {
    if (!viewer) return
    viewer.clock.shouldAnimate = true
}

const mapAnimationPause = () => {
    if (!viewer) return
    viewer.clock.shouldAnimate = false
}

const mapAnimationSetSpeed = speed => {
    if (!viewer) return
    viewer.clock.multiplier = speed
}

const mapAnimationReplay = () => {
    if (!viewer) return
    viewer.clock.currentTime = startJulian.clone()
    viewer.clock.shouldAnimate = true
}

// 传入一个时间，跳转到该时间点
const mapAnimationSetCurrentTime = time => {
    if (!viewer) return
    // 支持传入 Date 或毫秒数
    let julian = toJulianDate(time)

    viewer.clock.currentTime = julian
    // 如果希望暂停时也能直接跳过去：强制暂停后更新
    // viewer.clock.shouldAnimate = false
}

// 转换函数：毫秒 → JulianDate
function toJulianDate(ms) {
    return Cesium.JulianDate.fromDate(new Date(ms))
}

onMounted(() => {
    // EventBus.on('mapAnimationPlay', mapAnimationPlay)
    // EventBus.on('mapAnimationPause', mapAnimationPause)
    // EventBus.on('mapAnimationSetSpeed', mapAnimationSetSpeed)
    // EventBus.on('mapAnimationReplay', mapAnimationReplay)
    // EventBus.on('mapAnimationSetCurrentTime', mapAnimationSetCurrentTime)
})

onBeforeUnmount(() => {
    droneEntity && viewer.entities.remove(droneEntity)
    droneEntity = null
    viewer?.entities?.removeAll()
    publicCesiumInstance?.viewerDestroy()
    publicCesiumInstance = null
    viewer = null
    // EventBus.off('mapAnimationPlay', mapAnimationPlay)
    // EventBus.off('mapAnimationPause', mapAnimationPause)
    // EventBus.off('mapAnimationSetSpeed', mapAnimationSetSpeed)
    // EventBus.off('mapAnimationReplay', mapAnimationReplay)
    // EventBus.off('mapAnimationSetCurrentTime', mapAnimationSetCurrentTime)
})

defineExpose({
    init,
})
</script>

<style lang="scss" scoped>
.map-box {
    width: 100%;
    height: 100%;
}
</style>

 src/components/PlaybackVideo/components/PhotoList.vue

New file
@@ -0,0 +1,184 @@
<template>
    <div class="photo-container">
        <div class="photo-statistics">
            <div class="label">事件照片</div>
            <div class="num">{{ eventsPhotoArr.length }}</div>
        </div>
        <div class="photo-statistics">
            <div class="label">照片总数</div>
            <div class="num">{{ allPhotoArr.length }}</div>
        </div>
        <div class="list-box">
            <div class="item" v-for="(item, ind) in allPhotoArr" :key="ind">
                <el-image
                    style="width: 100%; height: 100%"
                    :src="item.smallUrl"
                    :preview-src-list="[item.showUrl]"
                    fit="cover"
                    preview-teleported
                ></el-image>

                <div class="bottom-box">
                    <div class="time">{{ item.metadata.createdTime }}</div>

                    <div class="status pending" v-show="item.status === 0">待处理</div>
                    <div class="status reviewed" v-show="item.status === 2">待审核</div>
                    <div class="status processing" v-show="item.status === 3">处理中</div>
                    <div class="status done" v-show="item.status === 4">已完成</div>
                    <div class="status ended" v-show="item.status === 5">已完结</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getShowImg, getSmallImg } from '@/utils/util'

const eventsPhotoArr = ref([])
const allPhotoArr = ref([])

const init = async (vData, pData) => {
    await nextTick()

    allPhotoArr.value = pData.map(item => ({
        ...item,
        showUrl: getShowImg(item.link),
        smallUrl: getSmallImg(item.link),
        metadata: {
            ...item.metadata,
            createdTime: formatTimeDiff(item.metadata.createdTime, vData.start_time),
        },
    }))
    eventsPhotoArr.value = pData.filter(item => item.resultType === 2) || []
}

defineExpose({
    init,
})

function formatTimeDiff(timestamp1, timestamp2) {
    // 计算差值（毫秒）
    const diffMs = Math.abs(timestamp1 - timestamp2)

    // 转换为秒
    const totalSeconds = Math.floor(diffMs / 1000)

    // 计算小时、分钟、秒
    const hours = Math.floor(totalSeconds / 3600)
    const minutes = Math.floor((totalSeconds % 3600) / 60)
    const seconds = totalSeconds % 60

    // 格式化为两位数
    const pad = num => num.toString().padStart(2, '0')

    // 根据是否有小时决定格式
    if (hours > 0) {
        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
    } else {
        return `${pad(minutes)}:${pad(seconds)}`
    }
}
</script>

<style lang="scss" scoped>
.photo-container {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    text-transform: none;

    .photo-statistics {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 44px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    padding: 0 30px; // 添加内边距让内容有间距
    box-sizing: border-box; // 确保边框包含在宽度内
    border-radius: 4px; // 添加圆角让边框更明显
    background: rgba(0, 0, 0, 0.3); // 添加背景色让边框更清晰

        .num {
            color: #ff974d;
        }
    }

    .list-box {
        margin-top: 16px;
        height: 0;
        flex: 1;
        overflow: hidden;
        overflow-y: auto;

        .item {
            margin-top: 10px;
            position: relative;
            width: 100%;
            height: 190px;
            background: #ff974d;
            border-radius: 8px 8px 8px 8px;
            overflow: hidden;

            &:first-child {
                margin-top: 0;
            }

            .bottom-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 32px;
                width: 305px;
                background: rgba(20, 18, 18, 0.8);
                border-radius: 0 0 8px 8px;

                .status {
                    padding: 0 8px;
                    line-height: 24px;
                    border-radius: 4px 4px 4px 4px;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }

                // 待处理
                .pending {
                    background: #ff7411;
                }
                // 待审核
                .reviewed {
                    background: #ff472f;
                }
                // 处理中
                .processing {
                    background: #ffff61;
                }
                // 已完成
                .done {
                    background: #06d957;
                }
                // 已完结
                .ended {
                    background: #06d957;
                }
            }
        }
    }
}
</style>

 src/components/PlaybackVideo/components/VideoPlayer.vue

New file
@@ -0,0 +1,170 @@
<template>
    <video ref="videoEle" class="video-js video-container"></video>
</template>

<script setup>
// import videoSrc from '@/assets/mp4/DJI_20250917140642_0001_V.mp4'
import { inputEmits } from 'element-plus'
import videojs from 'video.js'
import zhCN from 'video.js/dist/lang/zh-CN.json'
// 添加中文语言支持
videojs.addLanguage('zh-CN', zhCN)
import 'videojs-markers'
import EventBus from '@/utils/eventBus'

const videoEle = ref(null)

let player = null

const videoData = inject('videoData')

const init = async (vData, pData) => {
    await nextTick()

    if (!player) {
        player = videojs(videoEle.value, {
            html5: {
                preload: 'auto', // 可选值：'auto', 'metadata', 'none'
            },
            controls: true, // 启用默认控件
            playbackRates: [0.5, 1, 1.5, 2],
        })
    }

    player.src(vData.play_url)

    player.on('play', play)

    player.on('pause', pause)

    player.on('ratechange', ratechange)

    player.on('error', error)

    player.controlBar.playToggle.on('click', click)

    player.on('seeked', seeked)

    console.log(pData, vData, 1)

    pData.length > 0 &&
        player.markers({
            showTime: false,
            showTooltips: true,
            markerStyle: {
                'width': '6px',
                'background-color': 'red',
            },
            markerTip: {
                display: false,
            },
            onMarkerClick: marker => {
                console.log(`点击了标记：${marker.text}`)
            },
            onMarkerReached: marker => {
                console.log(`到达标记：${marker.text}`)
            },

            markers: pData.map((item, ind) => {
                let className = 'ended'

                switch (item.status) {
                    case 0:
                        className = 'pending'
                        break

                    case 2:
                        className = 'reviewed'
                        break

                    case 3:
                        className = 'processing'
                        break

                    case 4:
                        className = 'done'
                        break

                    case 5:
                        className = 'ended'
                        break

                    default:
                        className = 'noneEvent'
                        break
                }

                return {
                    time: getTimestampDiffInSeconds(item.metadata.createdTime, vData.start_time), // 标记时间，单位为秒
                    class: className,
                }
            }),
        })
}

function play() {
    console.log('播放按钮被点击')
    // EventBus.emit('mapAnimationPlay')
}

function pause() {
    console.log('暂停按钮被点击')
    // EventBus.emit('mapAnimationPause')
}

function ratechange() {
    console.log('播放速率已改变，当前速率: ' + player.playbackRate())
    // EventBus.emit('mapAnimationSetSpeed', player.playbackRate())
}

let retryCount = 0
const maxRetries = 3
function error() {
    if (player.error().code === 2 && retryCount < maxRetries) {
        retryCount++
        console.log(`尝试重新加载 (${retryCount}/${maxRetries})`)
        setTimeout(() => player.src(player.currentSrc()), 2000)
    }
}

function click() {
    if (player.hasClass('vjs-ended')) {
        console.log('重播按钮被点击')
        // 执行重播相关操作
        // EventBus.emit('mapAnimationReplay')
    }
}

function seeked() {
    const time = player.currentTime() * 1000 + videoData.value.videoStartTime

    // EventBus.emit('mapAnimationSetCurrentTime', time)
}

onBeforeUnmount(() => {
    if (player) {
        player.dispose()
    }
})

defineExpose({
    init,
})

function getTimestampDiffInSeconds(timestamp1, timestamp2) {
    // 计算两个时间戳的绝对差值（毫秒）
    const diffInMilliseconds = Math.abs(timestamp1 - timestamp2)

    // 将毫秒转换为秒
    const diffInSeconds = diffInMilliseconds / 1000

    return diffInSeconds
}
</script>

<style lang="scss" scoped>
.video-container {
    width: 100%;
    height: 100%;
}
</style>

 src/const/drc.js

@@ -2,9 +2,9 @@
import startRecordImg from '@/assets/images/aiNowFly/event/startRecord.png'
import takePhotoImg from '@/assets/images/aiNowFly/event/takePhoto.png'
// import TakePhoto from '@/views/RoutePlan/PointAirLine/EventEdit/TakePhoto.vue'
// import TakePhotoOrientedShoot from '@/views/RoutePlan/PointAirLine/EventEdit/TakePhotoOrientedShoot.vue'
// import CameraZoom from '@/views/RoutePlan/PointAirLine/EventEdit/CameraZoom.vue'
// import RotateYaw from '@/views/RoutePlan/PointAirLine/EventEdit/RotateYaw.vue'
// import GimbalYawRotate from '@/views/RoutePlan/PointAirLine/EventEdit/GimbalYawRotate.vue'
// import GimbalPitchRotate from '@/views/RoutePlan/PointAirLine/EventEdit/GimbalPitchRotate.vue'
// import HoverTime from '@/views/RoutePlan/PointAirLine/EventEdit/HoverTime.vue'
import _ from 'lodash'
@@ -91,154 +91,167 @@
    return _.cloneDeep(params)
}

// export const pointEventList = [
//     {
//         label: '单拍',
//         key: 'takePhoto',
//         component: TakePhoto,
//         imgUrl: getImageUrl('takePhoto.png'),
//         params: [
//             { name: '拍摄照片文件后缀', key: 'file_suffix', value: '' },
//             { name: '拍摄照片存储类型', key: 'payload_lens_index', value: '' },
//             { name: '是否使用全局存储类型', key: 'use_global_payload_lens_index', value: 1 },
//         ],
//     },
//     {
//         label: '开始录像',
//         key: 'startRecord',
//         component: TakePhoto,
//         imgUrl: getImageUrl('startRecord.png'),
//         params: [
//             { name: '拍摄照片文件后缀', key: 'file_suffix', value: '' },
//             {
//                 name: '拍摄照片存储类型',
//                 key: 'payload_lens_index',
//                 value: 'wide',
//             },
//             { name: '是否使用全局存储类型', key: 'use_global_payload_lens_index', value: '1' },
//         ],
//     },
//     {
//         label: '结束录像',
//         key: 'stopRecord',
//         imgUrl: getImageUrl('stopRecord.png'),
//         params: [],
//     },
//     {
//         label: '相机变焦',
//         component: CameraZoom,
//         key: 'zoom',
//         imgUrl: getImageUrl('zoom.png'),
//         params: [{ name: '变焦焦距', key: 'focal_length', value: 5 }],
//     },
//
//     {
//         label: '云台偏航角',
//         key: 'gimbalRotate',
//         component: GimbalYawRotate,
//         imgUrl: getImageUrl('gimbalRotate.png'),
//         params: [
//             { name: '云台偏航角转动坐标系', key: 'gimbal_heading_yaw_base', value: 'north' },
//             { name: '云台转动模式', key: 'gimbal_rotate_mode', value: 'absoluteAngle' },
//             { name: '是否使能云台Pitch转动', key: 'gimbal_pitch_rotate_enable', value: 0 },
//             { name: '云台Pitch转动角度', key: 'gimbal_pitch_rotate_angle', value: 0 },
//             { name: '是否使能云台Roll转动    ', key: 'gimbal_roll_rotate_enable', value: 0 },
//             { name: '云台Roll转动角度', key: 'gimbal_roll_rotate_angle', value: 0 },
//             { name: '是否使能云台Yaw转动', key: 'gimbal_yaw_rotate_enable', value: 1 },
//             { name: '云台Yaw转动角度', key: 'gimbal_yaw_rotate_angle', value: 0 },
//         ],
//     },
//     {
//         label: '云台俯仰角',
//         key: 'gimbalPitchRotate',
//         component: GimbalPitchRotate,
//         imgUrl: getImageUrl('gimbalPitchRotate.png'),
//         params: [
//             { name: '云台偏航角转动坐标系', key: 'gimbal_heading_yaw_base', value: 'north' },
//             { name: '云台转动模式', key: 'gimbal_rotate_mode', value: 'absoluteAngle' },
//             { name: '是否使能云台Pitch转动', key: 'gimbal_pitch_rotate_enable', value: 1 },
//             { name: '云台Pitch转动角度', key: 'gimbal_pitch_rotate_angle', value: 0 },
//             { name: '是否使能云台Roll转动    ', key: 'gimbal_roll_rotate_enable', value: 0 },
//             { name: '云台Roll转动角度', key: 'gimbal_roll_rotate_angle', value: 0 },
//             { name: '是否使能云台Yaw转动', key: 'gimbal_yaw_rotate_enable', value: 0 },
//             { name: '云台Yaw转动角度', key: 'gimbal_yaw_rotate_angle', value: 0 },
//         ],
//     },
//     {
//         label: '飞行器偏航角',
//         key: 'rotateYaw',
//         component: RotateYaw,
//         imgUrl: getImageUrl('rotateYaw.png'),
//         params: [
//             {
//                 name: '飞行器目标偏航角',
//                 key: 'aircraft_heading',
//                 value: 0,
//             },
//         ],
//     },
//     {
//         label: '悬停等待',
//         key: 'hover',
//         imgUrl: getImageUrl('hover.png'),
//         component: HoverTime,
//         params: [{ name: '飞行器悬停等待时间', key: 'hover_time', value: 10 }],
//     },
//     {
//         label: '全景拍照',
//         key: 'panoShot',
//         imgUrl: getImageUrl('panoShot.png'),
//     },
//     {
//         label: '喊话器',
//         key: 'megaphone',
//         hide: hideEventMegaphone,
//         imgUrl: getImageUrl('megaphone0.png'),
//         children: [
//             {
//                 label: '开始喊话',
//                 key: 'megaphone',
//                 component: Megaphone,
//                 imgUrl: getImageUrl('megaphone1.png'),
//                 params: getMegaphoneParams(0),
//             },
//             {
//                 label: '结束喊话',
//                 key: 'megaphone',
//                 imgUrl: getImageUrl('megaphone2.png'),
//                 params: getMegaphoneParams(1),
//             },
//         ],
//     },
//     {
//         label: '探照灯',
//         key: 'searchlight',
//         hide: hideEventSearchlight,
//         imgUrl: getImageUrl('deng4.png'),
//         children: [
//             {
//                 label: '照明',
//                 key: 'searchlight',
//                 component: Searchlight,
//                 imgUrl: getImageUrl('deng1.png'),
//                 params: getSearchlightParams(1),
//             },
//             {
//                 label: '爆闪',
//                 key: 'searchlight',
//                 component: Searchlight,
//                 imgUrl: getImageUrl('deng2.png'),
//                 params: getSearchlightParams(2),
//             },
//             {
//                 label: '关闭探照灯',
//                 key: 'searchlight',
//                 imgUrl: getImageUrl('deng0.png'),
//                 params: getSearchlightParams(0),
//             },
//         ],
//     },
// ]
// 点事件列表
export const pointEventList = [
    {
        label: '单拍',
        key: 'takePhoto',
        keyboardKey:'KeyJ',
        component: '',
        imgUrl: getImageUrl('takePhoto.svg'),
        params: [
            { name: '拍摄照片文件后缀', key: 'file_suffix', value: '' },
            { name: '拍摄照片存储类型', key: 'payload_lens_index', value: '' },
            { name: '是否使用全局存储类型', key: 'use_global_payload_lens_index', value: 1 },
        ],
    },
    {
        label: '定向拍照',
        key: 'orientedShoot',
        keyboardKey:'KeyJ',
        component: '',
        imgUrl: getImageUrl('takePhotoOrientation.svg'),
        params: [
            { name: '俯仰角', key: 'gimbal_pitch_rotate_angle', value: '' },
            { name: '偏航角', key: 'gimbal_yaw_rotate_angle', value: '' },
            { name: '偏航角', key: 'aircraft_heading', value: '' },
            { name: '变焦焦距', key: 'focal_length', value: '' },
            { name: '是否使用全局存储类型', key: 'use_global_payload_lens_index', value: 1 },
            { name: '存储类型', key: 'payload_lens_index', value: '' },
            { name: '定向相机类型', key: 'oriented_camera_type', value: '' },
        ],
    },
    {
        label: '开始录像',
        key: 'startRecord',
        keyboardKey:'KeyK',
        component: '',
        imgUrl: getImageUrl('startRecord.svg'),
        params: [
            { name: '拍摄照片文件后缀', key: 'file_suffix', value: '' },
            {
                name: '拍摄照片存储类型',
                key: 'payload_lens_index',
                value: 'wide',
            },
            { name: '是否使用全局存储类型', key: 'use_global_payload_lens_index', value: '1' },
        ],
    },
    {
        label: '结束录像',
        key: 'stopRecord',
        keyboardKey:'KeyL',
        imgUrl: getImageUrl('stopRecord.svg'),
        params: [],
    },
    {
        label: '相机变焦',
        component: '',
        key: 'zoom',
        keyboardKey:'KeyI',
        imgUrl: getImageUrl('zoom.svg'),
        params: [{ name: '变焦焦距', key: 'focal_length', value: 5 }],
    },
    {
        label: '云台俯仰角',
        key: 'gimbalRotate',
        keyboardKey:'KeyO',
        component: '',
        imgUrl: getImageUrl('gimbalPitchRotate.svg'),
        params: [
            { name: '云台偏航角转动坐标系', key: 'gimbal_heading_yaw_base', value: 'north' },
            { name: '云台转动模式', key: 'gimbal_rotate_mode', value: 'absoluteAngle' },
            { name: '是否使能云台Pitch转动', key: 'gimbal_pitch_rotate_enable', value: 1 },
            { name: '云台Pitch转动角度', key: 'gimbal_pitch_rotate_angle', value: 0 },
            { name: '是否使能云台Roll转动    ', key: 'gimbal_roll_rotate_enable', value: 0 },
            { name: '云台Roll转动角度', key: 'gimbal_roll_rotate_angle', value: 0 },
            { name: '是否使能云台Yaw转动', key: 'gimbal_yaw_rotate_enable', value: 0 },
            { name: '云台Yaw转动角度', key: 'gimbal_yaw_rotate_angle', value: 0 },
        ],
    },
    {
        label: '飞行器偏航角',
        key: 'rotateYaw',
        keyboardKey:'KeyU',
        component: '',
        imgUrl: getImageUrl('rotateYaw.svg'),
        params: [
            {
                name: '飞行器目标偏航角',
                key: 'aircraft_heading',
                value: 0,
            },
        ],
    },
    {
        label: '悬停等待',
        key: 'hover',
        keyboardKey:'KeyH',
        imgUrl: getImageUrl('hover.svg'),
        component: '',
        params: [{ name: '飞行器悬停等待时间', key: 'hover_time', value: 10 }],
    },
    {
        label: '全景拍照',
        key: 'panoShot',
        keyboardKey:'KeyY',
        imgUrl: getImageUrl('panoShot.svg'),
    },
    {
        label: '喊话器',
        key: 'megaphone',
        hide: hideEventMegaphone,
        imgUrl: getImageUrl('megaphone0.svg'),
        children: [
            {
                label: '开始喊话',
                key: 'megaphone',
                keyboardKey: 'KeyM',
                component: '',
                imgUrl: getImageUrl('megaphone1.svg'),
                params: getMegaphoneParams(0),
            },
            {
                label: '结束喊话',
                key: 'megaphone',
                keyboardKey: 'KeyN',
                imgUrl: getImageUrl('megaphone2.svg'),
                params: getMegaphoneParams(1),
            },
        ],
    },
    {
        label: '探照灯',
        key: 'searchlight',
        hide: hideEventSearchlight,
        imgUrl: getImageUrl('deng4.svg'),
        children: [
            {
                label: '照明',
                key: 'searchlight',
                keyboardKey: 'KeyT',
                component: '',
                imgUrl: getImageUrl('deng1.svg'),
                params: getSearchlightParams(1),
            },
            {
                label: '爆闪',
                key: 'searchlight',
                keyboardKey: 'KeyG',
                component: '',
                imgUrl: getImageUrl('deng2.svg'),
                params: getSearchlightParams(2),
            },
            {
                label: '关闭探照灯',
                key: 'searchlight',
                keyboardKey: 'KeyB',
                imgUrl: getImageUrl('deng0.svg'),
                params: getSearchlightParams(0),
            },
        ],
    },
]

export const cameraModeList = [
    {

 src/main.js

@@ -42,6 +42,10 @@
import 'styles/common.scss'
import * as Cesium from 'cesium'

// 视频回放
import 'video.js/dist/video-js.css'
import "videojs-markers/dist/videojs.markers.css"

// 业务组件
import tenantPackage from './views/system/tenantpackage.vue'
// 地图依赖

 src/styles/common.scss

@@ -3,6 +3,8 @@
@import './base.scss';
@import './tool.scss';
@import './element-ui.scss';
// video-js 直播回放 样式
@import './video-js.scss';
// 地图编辑样式
@import './mapEdit.scss';

@@ -120,6 +122,32 @@
  bottom: 0;
}

.ztzf-cesium {
  .cesium-viewer {
    height: 100%;
    overflow: hidden;

    .cesium-viewer-cesiumWidgetContainer {
      width: 100%;
      height: 100%;

      .cesium-widget {
        width: 100%;
        height: 100%;

        canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .cesium-viewer-bottom {
    display: none;
  }
}

// ele样式覆盖
@import './element-ui.scss';
// 顶部右侧显示

 src/styles/element-ui.scss

@@ -552,6 +552,101 @@
          }
      }
  }
.ztzf-custom-qrcode-popover {
    background: url("@/assets/images/home/eventOverviewDetail/qrCodeBg.png") no-repeat center center !important;
    background-size: cover !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px;
    min-width: 173px !important;
    height: 180px !important;

    /* 隐藏默认箭头 */
    .el-popper__arrow {
        display: none !important;
    }

    /* 调整二维码内容区域样式 */
    .qrcode-content {
        background: #fff;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 146px;
        height: 130px;
        margin-top: 12px;

        .close-btn {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 20px;
            height: 20px;

            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
        }
    }
}

.ztzf-dialog-video {
    background: #0f1929;
    box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
    border-radius: 20px 0px 0px 0px;
    border: 2px solid;
    padding: 0 !important;

    border-image: linear-gradient(180deg,
                    rgba(81, 168, 255, 0),
                    rgba(48, 111, 202, 1),
                    rgba(255, 255, 255, 1),
                    rgba(27, 148, 255, 1)) 2 2;

    .el-dialog__header {
        width: 100%;
        height: 47px;
        //padding: 0;
        margin-bottom: 14px;
        //background: url("/src/assets/images/home/inspection-vector.png") no-repeat center;
        //background-size: 100% 100%;
        font-weight: bold;
        font-size: 16px;
        line-height: 47px;
    }

    .el-dialog__title {
        width: 112px;

        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;

        text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
        margin-left: 16px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .el-dialog .el-dialog__header {
        padding: 0px !important;
        padding-left: 0px !important;
    }

    .el-scrollbar__thumb {
        background: #13c6ff !important;
    }
}
  //======以下针对表格功能 增删查改样式和弹窗=========
  .ztzf-dialog-mange {
    .el-dialog__body {

 src/styles/video-js.scss

New file
@@ -0,0 +1,196 @@
.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-time-tooltip {
    white-space: nowrap;
}

.video-js .vjs-volume-tooltip {
    white-space: nowrap;
}

.playback-dialog {
    position: relative;
    margin: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    background: transparent;
    border: none;

    .el-dialog__header {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        background: rgba(2, 2, 2, 0.6);
        border-radius: 0px 0px 0px 0px;
        backdrop-filter: blur(13.7px);
        z-index: 9;

        .title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .close {
            width: 24px;
            height: 24px;
            background: url('@/assets/images/playbackVideo/close.svg') no-repeat center / 100% 100%;
            cursor: pointer;
        }
    }

    .el-dialog__body {
        position: relative;
        height: 0;
        flex: 1;
        background: transparent;

        &>div {
            width: 100%;
            height: 100%;
        }
    }
}

.vjs-marker {
    position: relative;
    width: 1px;
    background: transparent !important;
    // transform: translateX(4px) !important;

    &::after {
        content: '';
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 2px;
    }

    &::before {
        content: '';
        position: absolute;
        left: -7px;
        bottom: 14px;
        width: 14px;
        height: 14px;
        border-radius: 50% !important;
    }

    // 待处理
    &.pending {
        &::after {
            height: 9px;
            background: #ff7411 !important;
        }

        &::before {
            bottom: 9px;
            background: #ff7411 !important;
        }
    }

    // 待审核
    &.reviewed {
        &::after {
            height: 6px;
            background: #ff472f !important;
        }

        &::before {
            bottom: 6px;
            background: #ff472f !important;
        }
    }

    // 处理中
    &.processing {
        &::after {
            height: 12px;
            background: #ffff61 !important;
        }

        &::before {
            bottom: 12px;
            background: #ffff61 !important;
        }
    }

    // 已完成
    &.done {
        &::after {
            height: 16px !important;
            background: #06d957 !important;
        }

        &::before {
            bottom: 16px;
            background: #06d957 !important;
        }
    }

    // 已完结
    &.ended {
        &::after {
            height: 16px !important;
            background: #06d957 !important;
        }

        &::before {
            bottom: 16px;
            background: #06d957 !important;
        }
    }

    // 待处理
    &.noneEvent {
        &::after {
            height: 16px;
            background: #76F6FF !important;
        }

        &::before {
            bottom: 16px;
            background: #76F6FF !important;
        }
    }
}

.vjs-marker:hover {
    transform: scale(1, 1) !important;
}

.vjs-progress-control.vjs-control {
    .vjs-tip {
        bottom: 54px !important;
        transform: translateX(3px);
    }
}

.vjs-control-bar {
    height: 48px !important;
    background: rgba(2, 2, 2, 0.52) !important;

    &>.vjs-control {
        margin-top: auto !important;
        height: 30px !important;
    }
}

.vjs-playback-rate .vjs-menu {
    z-index: 99;
}

 src/views/RoutePlan/PointAirLine/pointWayLineUtils.js

@@ -6,7 +6,7 @@
import _, { cloneDeep, throttle } from 'lodash'
import * as turf from '@turf/turf'
import { DRONE_LIST } from '@/const/device'
import { cameraModeList } from '@/const/drc'
import { cameraModeList, pointEventList } from '@/const/drc'
import { getCameraInfoApi } from '@/api/payload'
import takeoffImg from '@/assets/images/routePlan/pointAirLine/takeoff.svg'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
@@ -147,6 +147,25 @@
    }
}

// 获取寻找的事件
export function getFindAction(action) {
    let find = pointEventList.find(item => item.key === action?.action_actuator_func)
    if (find?.key === 'searchlight') {
        const { val: typeVal } = actionHasKey(action, 'searchlight_operate_type')
        const list = ['关闭探照灯', '照明', '爆闪']
        find = find.children.find(item => item.label === list?.[typeVal])
    }
    if (find?.key === 'megaphone') {
        const { val: typeVal } = actionHasKey(action, 'megaphone_operate_type')
        const list = ['开始喊话', '结束喊话']
        find = _.cloneDeep(find.children.find(item => item.label === list?.[typeVal]))
        if (list?.[typeVal] === '开始喊话' && !action?.action_actuator_func_param?.megaphone_file_md5 && find) {
            find.label = '未选择喊话文件'
        }
    }
    return find
}


// 处理保存参数
export function handleSaveParams ({ pointList, startPoint, globalSettings }) {

 src/views/job/components/DeviceJobDetails.vue

@@ -1,24 +1,61 @@
<!-- 历史任务详情 -->
<template>
  <el-dialog class="ztzf-dialog" append-to-body modal-class="detailsOfHistoricalTasks" v-model="isShow" title="历史任务详情"
  <el-dialog class="ztzf-dialog" append-to-body modal-class="detailsOfHistoricalTasks" v-model="isShow" title="巡检任务详情"
    :width="pxToRem(1800)" :close-on-click-modal="false" :destroy-on-close="true">
    <div class="content">
      <div class="contentLeft">
        <div class="machineTableDetailsTitle"><img src="/src/assets/images/task/sign.svg" alt=""><span>详情</span></div>
        <div class="machineTableDetailsTitle"><img src="/src/assets/images/task/sign.svg" alt="">
          <div class="title">
            详情
          </div>

          <div class="btn" v-show="videoData.length > 0">
            <el-button
              class="playback-video-btn"
              v-show="videoData.length == 1"
              type="primary"
              @click="openPlaybackVideoDialog(videoData[0])"
              size="small"
            >
              回放直播
            </el-button>

            <el-popover placement="bottom-start" popper-class="ztzf-custom-popover bottom">
              <template #reference>
                <el-button class="playback-video-btn" v-show="videoData.length > 1" type="primary" size="small">
                  回放直播
                </el-button>
              </template>

              <div class="playback-video-list">
                <div v-for="(item, index) in videoData" :key="index">
                  {{ formatTimestamp(item.execute_time) }}

                  <div class="play-btn" @click="openPlaybackVideoDialog(item)">播放</div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
        <div class="infoBox">
          <div class="itemBoxLeft">
            <div v-for="(item, index) in infoList" :key="index" class="itemCon">
              <div class="itemBox">
                <div class="itemTitle">{{ item.name }}：</div>
                <div truncated class="itemValue" v-if="item.name !== '飞行事件' && item.name !== '任务执行次数'">{{
                  item.value ? item.value : '--' }}</div>
                <div class="itemValue" v-if="item.name === '任务执行次数'">{{ item.value ? item.value : '0'
                }}次</div>
                <div truncated class="itemValue" v-if="item.name !== '飞行事件' && item.name !== '任务执行次数'">
                  {{ item.value ? item.value : '--' }}
                </div>
                <div class="itemValue" v-if="item.name === '任务执行次数'">{{ item.value ? item.value : '0' }}次</div>
                <!-- 飞行事件 -->
                <div class="flightEvents" v-if="item.name === '飞行事件'">
                  <template v-if="flightEvents.length">
                    <img v-for="(item, index) in flightEvents" alt="" :src="item.img" :title="item.name"
                      :key="index"></img>
                    <img
                      v-for="(item, index) in flightEvents"
                      alt=""
                      :src="item.imgUrl"
                      :title="item.label"
                      :key="index"
                    />
                  </template>
                  <div class="itemValue" v-else>--</div>
                </div>
@@ -27,7 +64,7 @@
          </div>

        </div>
        <JobRelatedEvents :jobTimes="jobTimes" :batchNo="batchNo" />
        <JobRelatedEvents :jobTimes="jobTimes" :batchNo="batchNo" :waylineJobId="waylineJobId" :detailName="detailName" :isShowExportTheTask="isShowExportTheTask"/>
        <div class="devicetitle" v-if="isShow">
          <div>
            <img src="/src/assets/images/task/sign.svg" alt="">
@@ -55,37 +92,77 @@
            </div>
          </div>
        </div>
<!--        <div class="imgListBox">-->
<!--          &lt;!&ndash; 图片显示 &ndash;&gt;-->
<!--          <template v-for="(item, index) in achievementList.slice(0, visibleCount)" :key="index">-->
<!--            <div class="result-item">-->
<!--              <el-checkbox v-model="item.checked" />-->
<!--              <div class="itemName">{{ item.createTime }}</div>-->
<!--              &lt;!&ndash; 正射 &ndash;&gt;-->
<!--              <el-image v-if="item.resultType === 4" :src="item.smallUrl" :preview-src-list="[item.showUrl]" fit="cover"-->
<!--                preview-teleported />-->
<!--              &lt;!&ndash; 全景 &ndash;&gt;-->
<!--              <img v-else-if="item.resultType === 5" class="quanjing" @click="clickpanorama(item)" :src="item?.smallUrl"-->
<!--                alt="" />-->
<!--              &lt;!&ndash; 视频 &ndash;&gt;-->
<!--              <div v-else-if="item.resultType === 1" class="videotime">-->
<!--                <img class="videoDisplay" :src="convertVideoUrlToThumbnail(item.link)" alt=""-->
<!--                  @click="enterFullScreen(index)" />-->
<!--                <img @click="enterFullScreen(index)" class="videobutton" src="@/assets/images/task/videoshow.png"-->
<!--                  alt="" />-->
<!--              </div>-->
<!--              &lt;!&ndash; 图片 &ndash;&gt;-->
<!--              <el-image v-else :src="item.smallUrl" :preview-src-list="[item.showUrl]" preview-teleported-->
<!--                :initial-index="index" fit="cover" />-->


<!--            </div>-->

<!--          </template>-->

<!--        </div>-->
        <div class="imgListBox">
          <!-- 图片显示 -->
          <template v-for="(item, index) in achievementList.slice(0, visibleCount)" :key="index">
            <div class="result-item">
              <el-checkbox v-model="item.checked" />
              <div class="itemName">{{ item.createTime }}</div>
              <!-- 正射 -->
              <el-image v-if="item.resultType === 4" :src="item.smallUrl" :preview-src-list="[item.showUrl]" fit="cover"
                preview-teleported />
              <el-image v-if="item.resultType === 4"  :src="item?.smallUrl" fit="cover" preview-teleported @click="clickPlay(index)"/>
              <!-- 全景 -->
              <img v-else-if="item.resultType === 5" class="quanjing" @click="clickpanorama(item)" :src="item?.smallUrl"
                alt="" />
              <img
                v-else-if="item.resultType === 5"
                class="quanjing"
                @click="clickPlay(index)"
                :src="item?.smallUrl"
                alt=""
              />
              <!-- 视频 -->
              <div v-else-if="item.resultType === 1" class="videotime">
                <img class="videoDisplay" :src="convertVideoUrlToThumbnail(item.link)" alt=""
                  @click="enterFullScreen(index)" />
                <img @click="enterFullScreen(index)" class="videobutton" src="@/assets/images/task/videoshow.png"
                  alt="" />
                <img
                  class="videoDisplay"
                  :src="convertVideoUrlToThumbnail(item.link)"
                  alt=""
                  @click="clickPlay(index)"
                />
                <img
                  @click="clickPlay(index)"
                  class="videobutton"
                  src="@/assets/images/signMachineNest/videoshow.png"
                  alt=""
                />
              </div>
              <!-- 图片 -->
              <el-image v-else :src="item.smallUrl" :preview-src-list="[item.showUrl]" preview-teleported
                :initial-index="index" fit="cover" />


              <el-image v-else :src="item?.smallUrl" fit="cover" preview-teleported  @click="clickPlay(index)"/>
            </div>

          </template>

        </div>
        <el-image-viewer v-if="showViewer" :url-list="previewUrls" :initial-index="activeIndex"
          @close="showViewer = false" />
        <el-image-viewer
          v-if="showViewer"
          :url-list="previewUrls"
          :initial-index="activeIndex"
          @close="showViewer = false"
        />
        <div class="cg-empty" v-if="achievementList.length === 0">暂无数据</div>
      </div>

      <div class="content-right" v-if="isShow">
@@ -106,12 +183,19 @@
  <!-- 全景360 -->
  <PanoramaPopup v-if="'全景'" v-model:panoramaParamsShow="panoramaParamsShow"
    v-model:panoramaParamsUrl="panoramaParamsUrl" />

  <PlaybackVideo v-model:show="playbackVideo" v-model:detailData="openVideoDetail" :detailsData="detailsData" />
  <FileTypePlay v-model:show="carouselShow" :list="achievementList" :cIndex="currentIndex"></FileTypePlay>
</template>

<script setup>
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'
import PlaybackVideo from '@/components/PlaybackVideo/PlaybackVideo.vue'
import FileTypePlay from '@/views/job/components/FileTypePlay.vue';
import { getWaylinejobLiveRecordPage } from '@/api/playback'
import { getShowImg, getSmallImg, getzsSmallImg, getzsShowImg, aLinkDownloadUtil } from '@/utils/util'
import { getaiImagesPageAPI, cancelDownloadApi, getDownloadStatusApi, attachDownload, aiImagesPage } from '@/api/dataCenter/dataCenter'
import { getFindAction } from '@/views/RoutePlan/PointAirLine/pointWayLineUtils'
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getEventMediaListApi, getJobDetails, getJobInfoFiles, getJobsAllFiles } from '@/api/job/task'
@@ -127,6 +211,9 @@
const showAll = ref(false) // 是否展示全部
let loadingData
const fullscreenVideo = ref(null)
const playbackVideo = ref(false)
const carouselShow = ref(false) // 是否轮播
const currentIndex = ref(-1)
// 视频播放事件处理
const handleVideoPlay = (event) => {
  if (event.target.playbackRate !== 0.75) {
@@ -157,12 +244,13 @@
const infoList = ref([
  { name: '任务编号', value: '', field: 'job_info_num' },
  { name: '任务名称', value: '', field: 'name' },
  { name: '任务类型', value: '', field: 'industry_type_str' },
  { name: '任务类型', value: '', field: 'rep_rule_type' },
  { name: '飞行事件', value: '', field: 'event_number' },
  { name: '所属机巢', value: '', field: 'device_names' },
  { name: '创建人', value: '', field: 'creator_name' },
  { name: '所属部门', value: '', field: 'dept_name' },
  { name: '任务时间', value: '', field: 'cycle_time_value' },
  { name: '任务频次', value: '', field: 'rep_rule_type' },
  { name: '关联算法', value: '', field: 'ai_type_str' },
  { name: '自定义识别区', value: '', field: 'enable_custom_area' },
  { name: '任务描述', value: '', field: 'remark' },
@@ -192,7 +280,10 @@
const achievementList = ref([])
const props = defineProps(['wayLineJobInfoId', 'waylineJobId', 'batchNo', 'jobId'])
const wayLineJobInfoId = computed(() => props.wayLineJobInfoId)
const jobId = computed(() => props.jobId)
provide('wayLineJobInfoId', wayLineJobInfoId)
provide('jobId', jobId)

// 可见数量
const visibleCount = computed(() =>
  showAll.value ? achievementList.value.length : Math.min(5, achievementList.value.length)
@@ -204,51 +295,59 @@

const flightEvents = ref([])
const jobTimes = ref([])
const historyTime = ref('')
const jumpDataCenter = ref(null)
const cycle_time = ref(null)
const detailName = ref(null)
const isShowExportTheTask = ref(null)

const getDetails = () => {
  const params = {
    wayLineJobInfoId: props.wayLineJobInfoId,
    waylineJobId: props.waylineJobId,
    // waylineJobId: props.waylineJobId,
    batchNo: props.batchNo
  }
  getJobDetails(params).then(res => {
    detailsData.value = res.data.data
    jobTimes.value = res.data.data.job_times
    jumpDataCenter.value = res.data.data
    cycle_time.value = res.data.data.cycle_time_value
    detailName.value = detailsData.value.name
    const aiTypeStr = detailsData.value.ai_type_str || '';
    isShowExportTheTask.value = aiTypeStr && !/人|车|船/.test(aiTypeStr)
    infoList.value.forEach(item => {
      item.value = detailsData.value?.[item.field] || '--'
      if (item.name === '任务频次') {
        const { rep_rule_type = '', final_cycle_frequency = '' } = detailsData?.value || {}
        item.value = rep_rule_type ? final_cycle_frequency : '1次'
      } else {
        item.value = detailsData.value?.[item.field] || '--'
        item.value = detailsData?.value.rep_rule_type ? detailsData?.value.final_cycle_frequency : '1次'
      }
      if (item.name === '任务类型') {
        const { rep_rule_type = '' } = detailsData?.value || {}
        item.value = rep_rule_type ? '周期任务' : '临时任务'
      }
      if (item.name === '飞行事件') {
        const { action_modes = [] } = detailsData?.value || {}
        flightEvents.value = action_modes.flatMap(({ actionActuatorFunc }) =>
          droneEventList.filter(({ value }) => actionActuatorFunc === value)
        )
        flightEvents.value = action_modes.flatMap(getFindAction)
      }
      if (item.name === '自定义识别区') {
      if (item.name === '自定义识别区' && infoList?.value[9].value !== '--') {
        item.value = res.data.data.enable_custom_area ? '是' : '否'
      }

    })

    getJobsAllFiles({
      wayLineJobId: detailsData.value.way_lines.map(item => item.job_id).join(','),
      resultTypes: [0, 1, 2, 4, 5],
      orderByCreateTime: true,
    }).then(res => {
      if (res.data.code !== 200) return
      achievementList.value = res.data.data.records.map(i => ({
    }).then(result => {
      if (result.data.code !== 200) return
      achievementList.value = result.data.data.records.map(i => ({
        ...i,
        checked: false,
        smallUrl: i.resultType === 4 ? getzsSmallImg(i.link) : getSmallImg(i.link),
        showUrl: i.resultType === 4 ? getzsShowImg(i.link) : getShowImg(i.link),
      }))
      total.value = res.data.data.total
      total.value = result.data.data.total

      yuanImages.value = res.data.data.records.filter(item => item.resultType !== 1)
      yuanImages.value = result.data.data.records.filter(item => item.resultType !== 1)
    })
    // flystatus.value = res.data.data.ai_type_str
  })
}
// 播放
@@ -321,8 +420,43 @@
    EventBus.emit('useGlobalWS-messageHandler', { biz_code: 'DOWNLOAD_PROGRESS', data: { status: 'CANCELLED', type: 'htlsrwxq' } })
  })
}

// 执行机巢详情
// const taskData = ref([])
// const getNestDetailApi = () => {
//   const params = {
//     jobInfoId: props.wayLineJobInfoId,
//     batchNo: props.batchNo,
//   }
//   NestDetailApi(params).then(res => {
//     taskData.value = res.data.data
//   })
// }

// 获取回放直播列表
const videoData = ref([])
const openVideoDetail = ref({})
const getVideoList = () => {
  getWaylinejobLiveRecordPage({ job_info_id: props.wayLineJobInfoId }).then(videoDetails => {
    videoData.value = videoDetails.data.data.records
  })
}

const openPlaybackVideoDialog = data => {
  playbackVideo.value = true
  openVideoDetail.value = data
}



function clickPlay(index) {
  carouselShow.value = true
  currentIndex.value = index
}

onMounted(() => {
  getDetails()
  getVideoList()
})
</script>

@@ -355,7 +489,8 @@
    overflow: auto;

    .machineTableDetailsTitle {
      margin-bottom: 10px;
      display: flex;
      //margin-bottom: 10px;
      // background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
      border-bottom: 2px solid #e4e7ed;
      background-size: 100% 100%;
@@ -363,9 +498,10 @@
      img {
        width: 15px;
        height: 15px;
        margin-top: 6px;
      }

      span {
      .title {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
@@ -375,6 +511,12 @@
        text-align: left;
        margin-bottom: 8px;
      }

      .btn {
        margin-left: 16px;
        margin-bottom: 8px;
        line-height: 20px;
      }
    }

    .devicetitle {

 src/views/job/components/FileTypePlay.vue

New file
@@ -0,0 +1,158 @@
<template>
  <!--  <div class="file-type-play">-->
  <el-image-viewer
    v-if="isShow"
    ref="preview"
    :url-list="playList"
    :initial-index="currentActiveIndex"
    @close="closeImageViewer"
    @switch="onViewerSwitch"
    teleported>
  </el-image-viewer>
</template>

<script setup>
import { getShowImg } from '@/utils/util'

const currentActiveIndex = ref(0)

const isShow = defineModel('show', {
  type: Boolean,
  default: true,
})

const props = defineProps(['list','cIndex'])

const playList = ref([])

function getQJUrl(url) {
  return `https://wrj.shuixiongit.com/dronePanorama/html/simple-index.html?path=${getShowImg(url)}`
}

function closeImageViewer() {
  isShow.value = false
}

function onViewerSwitch (index) {
  currentActiveIndex.value = index
  videoImageSwitch()
}

const videoImageSwitch = () => {
  nextTick(() => {
    const viewerCanvas = document.querySelector('.el-image-viewer__canvas');
    const viewerActions = document.querySelector('.el-image-viewer__actions');
    const parentDOM = document.querySelector('.el-image-viewer__wrapper');

    // const maskLayer = document.querySelector('.el-image-viewer__mask'); // 获取遮罩层

    // 清理之前可能存在的视频或全景图元素
    const existingVideo = parentDOM?.querySelector('.preview-video');
    const existingIframe = parentDOM?.querySelector('.preview-panorama');

    if (existingVideo) existingVideo.remove();
    if (existingIframe) existingIframe.remove();

    const item = props.list[currentActiveIndex.value];

    if (item?.resultType === 1) {
      // ========== 处理视频 ==========
      // 隐藏图片查看器的UI
      if (viewerActions) viewerActions.style.display = 'none';
      if (viewerCanvas) viewerCanvas.style.display = 'none';

      // 创建并添加视频元素
      const videoDom = document.createElement('video');
      videoDom.className = 'preview-video';
      // videoDom.autoplay = true;
      videoDom.muted = true;
      videoDom.playsInline = true;
      videoDom.loop = true;
      videoDom.controls = true;
      videoDom.preload = 'auto';
      videoDom.src = item.object_key || item.link;

      videoDom.style.position = 'relative';
      // 添加视频样式
      videoDom.style.width = '100%';
      videoDom.style.height = '100%';
      videoDom.style.objectFit = 'contain';

      // 添加事件监听器
      videoDom.addEventListener('play', (event) => {
        // 设置播放速度为 0.75
        if (event.target.playbackRate !== 0.75) {
          event.target.playbackRate = 0.75;
        }
      });

      videoDom.addEventListener('ended', () => {
        // 重置视频播放时间为 0 并重新加载
        videoDom.currentTime = 0;
        videoDom.load();
      });

      if (parentDOM) {
        parentDOM.appendChild(videoDom);
      }
    } else if (item?.resultType === 5) {
      // ========== 处理全景图 ==========
      // 隐藏图片查看器的UI（如果全景图不需要查看器UI）
      // if (maskLayer) maskLayer.style.display = 'none';
      if (viewerActions) viewerActions.style.display = 'none';
      if (viewerCanvas) viewerCanvas.style.display = 'none';

      // 创建并添加iframe元素
      const iframeDom = document.createElement('iframe');
      iframeDom.className = 'preview-panorama';
      iframeDom.src = getQJUrl(item?.link); // 使用你的全景图URL生成函数
      iframeDom.frameBorder = '0'; // 注意：frameBorder 是 camelCase
      iframeDom.allow = 'fullscreen'; // 允许全屏，如果需要
      iframeDom.title = '全景图浏览';

      // 添加iframe样式
      // iframeDom.style.zIndex = '2000'; // 比遮罩层的 2000 高
      iframeDom.style.position = 'relative';
      iframeDom.style.width = '100%';
      iframeDom.style.height = '100%';
      iframeDom.style.border = 'none';

      // 如果需要，可以设置iframe的加载策略
      iframeDom.loading = 'eager';

      if (parentDOM) {
        parentDOM.appendChild(iframeDom);
      }
    } else {
      // ========== 处理图片（或其他类型） ==========
      // 显示图片查看器的UI
      if (viewerCanvas) viewerCanvas.style.display = 'flex';
      if (viewerActions) viewerActions.style.display = 'flex';
    }
  });
};

watch(isShow, async newVal => {
  if (newVal) {
    playList.value = props.list.map((item) => item.link)
    currentActiveIndex.value = props.cIndex
    videoImageSwitch()

  }
})
</script>
<style lang="scss">
.el-image-viewer__wrapper {
  .el-image-viewer__canvas {
    img {
      height: 90%;
      top: 5%;
    }
  }

  .preview-video {
    max-height: 96%;
  }
}

</style>

 src/views/job/components/JobRelatedEvents.vue

@@ -2,12 +2,13 @@
    <div class="JobRelatedEvents">
        <div class="machineTableDetailsTitle">
            <img src="/src/assets/images/task/sign.svg" alt="">
        <p>
            关联事件
            <span>{{ total }}</span>
            件
        </p>
    </div>
      <div class="title">
        关联事件<span>{{ total }}</span>件
      </div>
      <div class="exportBtn" v-if="props.isShowExportTheTask">
        <el-button class="playback-video-btn" type="primary" @click="exportTheTask" size="small">导出报表</el-button>
      </div>
      </div>
    <div class="search">
        <div class="searchBox">
            <div class="item">
@@ -44,15 +45,21 @@
            :row-class-name="tableRowClassName"
            :data="list"
            style="width: 100%"
            :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
        >
            <el-table-column label="序号" type="index" width="60" align="center">
                <template #default="{ $index }">
                    {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
                </template>
            </el-table-column>
            <el-table-column prop="event_num" label="事件编号"  align="center"/>
      :row-style="{ height: pxToRem(48), fontSize: pxToRem(14), 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center', height: pxToRem(36), fontSize: pxToRem(14) }"
    >
      <el-table-column label="序号" type="index" :width="pxToRemNum(60)">
        <template #default="{ $index }">
          {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="event_num" label="事件编号" :width="pxToRemNum(160)">
        <template #default="scope">
          <el-tooltip-copy :content="scope.row.event_num" :showCopyText="true">
            {{ scope.row.event_num }}
          </el-tooltip-copy>
        </template>
      </el-table-column>
            <el-table-column show-overflow-tooltip prop="event_name" label="事件名称"  align="center"/>
            <el-table-column show-overflow-tooltip prop="remark" label="事件地址"  align="center"/>
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法"  align="center"/>
@@ -66,11 +73,30 @@
                    <div class="ended" v-if="scope.row.status === 5">已完结</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="90" align="center">
                <template #default="scope">
                    <div class="ztzf-view btnItem" @click="examine(scope.row)">查看</div>
                </template>
            </el-table-column>
      <el-table-column label="操作" :width="pxToRemNum(150)">
        <template #default="scope">
          <div class="btnGroups">
            <el-popover
              v-if="scope.row.status === 3 || scope.row.status === 0"
              popper-class="ztzf-custom-qrcode-popover"
              :width="pxToRem(119)"
              :visible="scope.row.showQR"
              placement="top"
              title=""
              trigger="click"
            >
              <template #reference>
                <el-button type="text" @click="QRCode(scope.row)">事件导航</el-button>
              </template>
              <div class="qrcode-content">
                <div class="close-btn" @click.stop="scope.row.showQR = false">×</div>
                <CreateQRcode v-if="scope.row.showQR" :latAndLon="latAndLon"></CreateQRcode>
              </div>
            </el-popover>
            <el-button icon="el-icon-view" type="text" @click="examine(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
        </el-table>
    </div>
    <el-pagination
@@ -88,20 +114,21 @@
</template>
<script setup>
import { useStore } from 'vuex'
import { wgs84ToGcj02 } from '@/utils/coordinateTransformation'
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'
import { getDeviceEventList } from '@/api/job/task'
import { dayjs, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { pxToRem } from '@/utils/rem'
import { NestDetailApi, exportTaskReports } from '@/api/home'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
const router = useRouter();
const emit = defineEmits(['refresh'])
const props = defineProps({
    jobTimes: Array,
    batchNo: Number,
})
const props = defineProps(['jobTimes', 'batchNo', 'waylineJobId','detailName','isShowExportTheTask'])
const taskData = ref('')
const algorithmChange = val => {
    params.value.ai_types = val
  handleSearch()
}
const loading = ref(false)
const list = ref()
@@ -114,7 +141,7 @@
})
const sizeParams = ref({
    current: 1,
    size: 10,
    size: 5,
})
// 日期选择
const changeselect = () => {
@@ -136,16 +163,20 @@
const wayLineJobInfoId = inject('wayLineJobInfoId')

const getList = () => {
    if (!wayLineJobInfoId.value) return
    params.value.way_line_job_info_id = wayLineJobInfoId.value
    params.value.batchNo = props.batchNo
    loading.value = true
    getDeviceEventList(params.value, sizeParams.value).then(res => {
        const resData = res?.data?.data || {}
        list.value = resData.records
        total.value = resData.total
        loading.value = false
    })
  if (!wayLineJobInfoId.value) return
  params.value.way_line_job_info_id = wayLineJobInfoId.value
  params.value.batch_no = props.batchNo
  loading.value = true
  getDeviceEventList(params.value, sizeParams.value).then(res => {
    const resData = res?.data?.data || {}
    list.value = resData.records.map(item => ({
      ...item,
      showQR: false, // 为每条数据添加showQR状态
    }))
    total.value = resData.total
    loading.value = false
    // store.commit('setJobEventList', list.value)
  })
}

const pageChange = val => {
@@ -176,46 +207,73 @@
    getList()
}
const handleSearch = () => {
    // console.log('sousuo', params.value)

    getList()
}
// 二维码
const latAndLon = ref(null)
const QRCode = item => {
  const [gcjLng, gcjLat] = wgs84ToGcj02(Number(item.longitude), Number(item.latitude))
  latAndLon.value = `${gcjLng},${gcjLat}`
  list.value.forEach(i => {
    i.showQR = i.id === item.id ? !i.showQR : false
  })
}
// 导出任务报表
const exportTheTask = () => {
  const params = {
    wayLineJobInfoId: wayLineJobInfoId.value,
    waylineJobId: props.waylineJobId,
    batchNo: props.batchNo,
  }
  exportTaskReports(params).then(res => {
    const elink = document.createElement('a')
    elink.download = props.detailName + '.docx'
    elink.style.display = 'none'
    const blob = new Blob([res.data])
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    document.body.removeChild(elink)
  })
}
onMounted(() => {
    getList()
})
</script>
<style lang="scss">
// .custom-date-picker .el-picker-panel__content .el-date-table td.disabled div {
//     background-color: #00193b !important;
//     color: #505050 !important;
//     cursor: not-allowed;
// }
</style>
<style scoped lang="scss">
.JobRelatedEvents {
    .machineTableDetailsTitle {
    margin-bottom: 16px;
    // background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
        border-bottom: 2px solid #e4e7ed;
    background-size: 100% 100%;
    img{
            width: 15px;
            height: 15px;}
    p {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: #363636;
        line-height: 20px;
        text-align: left;
        margin-bottom: 8px;
        span {
            font-size: 26px;
            color: #0282ff;
            font-weight: bold;
        }
    }
}
    display: flex;
    border-bottom: 2px solid #e4e7ed;
    margin-bottom: 16px;
    //justify-content: space-between;
    align-content: center;
    .exportBtn {
      margin-left: 16px;
      //margin-bottom: 8px;
      //line-height: 20px;
    }
    img {
      margin-top: 6px;
        width: 15px;
        height: 15px;
    }
    .title {
      display: inline-block;
      margin-left: 10px;
      font-size: 16px;
      color: #363636;
      line-height: 20px;
      text-align: left;
      margin-bottom: 8px;

      span {
        font-size: 26px;
        color: #0282ff;
        font-weight: bold;
      }
    }
  }

// 待处理
.pending {

 src/views/job/components/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -114,7 +114,7 @@
    /> -->
    <!-- 历史任务详情 -->
    <DeviceJobDetails v-if="isShowDeviceJobDetails" v-model:show="isShowDeviceJobDetails" :wayLineJobInfoId="rowData.id"
        :batchNo="rowData.batch_no" :jobId="jobId"/>
        :batchNo="rowData.batch_no" :jobId="jobId" :waylineJobId="rowData.wayline_job_id"/>
    <CancelTaskDialog ref="cancelTaskDialogRef" v-model:isShowCancelTask="isShowCancelTask" :row-data="rowData"
        @refresh="getJobList" />
</template>