应急态调整

src/components/HKVideo/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div id="HKVideo" class="HKVideo1"></div>
+  <div :id="'HKVideo' + id" class="HKVideo1"></div>
 </template>
 
 <script lang="ts" setup>
 interface Props {
   url: string;
+  id: string;
 }
 const props = withDefaults(defineProps<Props>(), {});
 //下方为海康视频播放器所需变量
@@ -14,11 +15,11 @@ let time;
 async function getScript() {
   const { JSPlugin }: any = window;
   oPlugin.value = new JSPlugin({
-    szId: 'HKVideo', // 当前的视频播放的节点，需要英文字母开头，必填
+    szId: 'HKVideo' + props.id, // 当前的视频播放的节点，需要英文字母开头，必填
     szBasePath: '/', // 这里必须指向h5player.min.js文件 把这个文件再放在src里面的一个文件夹中，因为放置在public的文件这里指向不到
     openDebug: true,
     // 分屏播放
-    iMaxSplit: 4,
+    iMaxSplit: 1,
     iCurrentSplit: 1,
     // 设置样式
     oStyle: {
@@ -68,13 +69,13 @@ function initPlugin() {
 
 //   // 播放初始化
 function realplay() {
-  console.log('播放初始化');
+  console.log('播放初始化', props.url);
   console.log(oPlugin.value.currentWindowIndex, 'oPlugin.value.currentWindowIndex');
   oPlugin.value
     .JS_Play(
       props.url, //视频地址链接
       {
-        playURL: 'props.url' // 流媒体播放时必传
+        playURL: props.url // 流媒体播放时必传
       },
       oPlugin.value.currentWindowIndex //这个应该是视频下标吧 具体我也不太清楚
     )

src/components/HeaderSection/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="headerSection">
     <div class="header-left">
-      <el-button class="custom-button" type="primary" @click="jumpGlobeMap">全景地图</el-button>
+      <el-button class="custom-button" type="primary" @click="jumpGlobeMap">全域地图</el-button>
     </div>
     <div class="header-middle">
       <div class="header-title">应急指挥一张图</div>

src/views/emergencyCommandMap/LeftSection.vue

@@ -5,27 +5,53 @@
         <div>事件信息</div>
         <div class="header-right">
           <div class="duration">{{ formattedDuration }}</div>
-          <el-button class="custom-button" type="danger" plain>结束处理</el-button>
+          <el-button class="custom-button" type="danger" plain @click="endProcess">结束处理</el-button>
         </div>
       </div>
       <div class="card-content">
-        <div style="line-height: 207px">值班时间：08-30-17：30</div>
-        <div style="line-height: 207px">带班领导：张珊珊</div>
-        <div style="line-height: 207px">值班时间：林珊珊、张珊珊</div>
+        <div style="line-height: 80px">事件名称：{{ eventInformation.name }}</div>
+        <div style="line-height: 80px">事件类型：{{ eventInformation.type }}</div>
+        <div style="line-height: 80px">事件等级：{{ eventInformation.grade }}</div>
+        <div style="line-height: 80px">事件地点：{{ eventInformation.address }}</div>
+        <div style="line-height: 80px">事件状态：{{ eventInformation.status }}</div>
+        <div style="line-height: 80px">上报时间：{{ eventInformation.time }}</div>
+        <div style="line-height: 80px">报送单位：{{ eventInformation.unit }}</div>
       </div>
     </div>
-    <div class="card">
+    <div class="card" style="height: 435px">
       <div class="card-header">
         <div>综合值守</div>
       </div>
       <div class="card-content">
+        <div style="line-height: 80px">值班时间：{{ comprehensiveDutyState.time }}</div>
+        <div class="card-flex" style="line-height: 80px">
+          <div>带班领导：{{ comprehensiveDutyState.classLeader }}</div>
+          <div>副班人员：{{ comprehensiveDutyState.deputyShiftPerson }}</div>
+        </div>
+        <div class="card-flex" style="line-height: 80px">
+          <div>主班领导：{{ comprehensiveDutyState.mainShiftPerson }}</div>
+          <div>备班领导：{{ comprehensiveDutyState.backupPerson }}</div>
+        </div>
       </div>
     </div>
-    <div class="card">
+    <div class="card" style="height: 990px">
       <div class="card-header">
         <div>分析研判</div>
       </div>
-      <div class="card-content flex" style="height: 100%"></div>
+      <div class="card-content">
+        <div v-for="(item, index) in analyzeJudge" :key="index" class="line">
+          <div>{{ item.label }}</div>
+          <div class="line-content">
+            <div v-for="(item2, index2) in item.children" :key="index2" class="content-item">
+              <el-icon size="72px" style="margin-right: 10px;"><Shop /></el-icon>
+              <div class="text-box">
+                <div class="">{{ item2.data + item2.unit }}</div>
+                <div class="">{{ item2.label }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,6 +60,7 @@
 const duration = ref(0);
 const formattedDuration = ref('');
 
+const router = useRouter();
 const updateDuration = () => {
   duration.value += 1;
   const days = Math.floor(duration.value / (24 * 3600));
@@ -43,8 +70,101 @@ const updateDuration = () => {
   formattedDuration.value = `持续时长：${days}天${hours}小时${minutes}分${seconds}秒`;
 };
 
+// 事件信息
+const eventInformation = ref({
+  name: '',
+  type: '',
+  grade: '',
+  address: '',
+  status: '',
+  time: '',
+  unit: ''
+});
+// 综合值守
+const comprehensiveDutyState = ref({
+  time: '',
+  classLeader: '',
+  deputyShiftPerson: '',
+  mainShiftPerson: '',
+  backupPerson: ''
+});
+
+// 分析研判
+const analyzeJudge = ref({})
+
+// 结束
+const endProcess = () => {
+  router.push('/');
+};
+
+const initData = () => {
+  // 事件信息
+  eventInformation.value = {
+    name: 'xxxxxx应急指挥事件',
+    type: '自然灾害',
+    grade: '一级',
+    address: '广东省茂名市茂南区',
+    status: '进行中',
+    time: '2024/7/1 09:00:00',
+    unit: 'xxx局'
+  };
+  // 综合值守
+  comprehensiveDutyState.value = {
+    // 值班时间
+    time: '08:30-17:30',
+    // 带班领导
+    classLeader: '张珊珊',
+    // 副班人员
+    deputyShiftPerson: '王珊珊',
+    // 主班人员
+    mainShiftPerson: '林珊珊',
+    // 备班人员
+    backupPerson: '刘珊珊'
+  };
+  // 分析研判
+  analyzeJudge.value = [
+    {
+      label: '基础数据',
+      children: [
+        { icon: 'user', label: '人口', data: 200, unit: '万人' },
+        { icon: 'user', label: '人口密度', data: 23, unit: '人/km²' }
+      ]
+    },
+    {
+      label: '协同应急',
+      children: [
+        { icon: 'user', label: '专家', data: 10, unit: '个' },
+        { icon: 'user', label: '救援队伍', data: 10, unit: '支' },
+        { icon: 'user', label: '通信机构', data: 10, unit: '所' },
+        { icon: 'user', label: '医疗机构', data: 10, unit: '间' },
+        { icon: 'user', label: '救援车辆', data: 10, unit: '辆' }
+      ]
+    },
+    {
+      label: '重点场所',
+      children: [
+        { icon: 'user', label: '救助站', data: 10, unit: '个' },
+        { icon: 'user', label: '应急庇护场所', data: 10, unit: '个' },
+        { icon: 'user', label: '人防工程', data: 10, unit: '个' },
+        { icon: 'user', label: '水利工程', data: 10, unit: '个' },
+        { icon: 'user', label: '物资仓库', data: 10, unit: '个' }
+      ]
+    },
+    {
+      label: '重点防护场所',
+      children: [
+        { icon: 'user', label: '高危企业', data: 10, unit: '个' },
+        { icon: 'user', label: '加油站', data: 10, unit: '个' },
+        { icon: 'user', label: '学校', data: 10, unit: '个' },
+        { icon: 'user', label: '养老院', data: 10, unit: '个' }
+      ]
+    }
+  ];
+};
+
 onMounted(() => {
-  setInterval(updateDuration, 1000);
+  initData();
+  setInterval(updateDuration, 800);
 });
 </script>
 
@@ -73,6 +193,14 @@ onMounted(() => {
       align-items: center; /* 确保子元素在垂直方向居中对齐 */
     }
   }
+  .card-content {
+    font-size: 34px;
+  }
+  .card-flex {
+    width: 80%;
+    display: flex;
+    justify-content: space-between;
+  }
   &:last-child {
     margin-bottom: 0;
   }
@@ -106,7 +234,7 @@ onMounted(() => {
 .table {
   table-layout: fixed;
   border-collapse: collapse;
-  width: 100%;
+  width: 80%;
   thead {
     .td {
       background-color: #fafafa;
@@ -122,14 +250,27 @@ onMounted(() => {
     }
   }
 }
+.line {
+  .line-content {
+    display: flex;
+    flex-wrap: wrap;
+    .content-item {
+      width: 25%;
+      margin-top: 10px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
 @keyframes slide {
   0% {
-    transform: translateX(-100%);
+    transform: translateX(-80%);
   }
   80% {
     transform: translateX(92px);
   }
-  100% {
+  80% {
     transform: translateX(0);
   }
 }

src/views/emergencyCommandMap/MiddleSection.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="middle-section">
-    1
+    <GlobalMap />
   </div>
 </template>
 
 <script lang="ts" setup>
-
+import GlobalMap from '@/views/globalMap/index.vue';
 </script>
 
 <style lang="scss" scoped>

src/views/emergencyCommandMap/RightSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="right-section">
-    <div class="card">
+    <div class="card" style="height: 180px">
       <div class="header-container">
         <div class="task-header">
           <el-button class="custom-button" type="primary" plain>任务下达</el-button>
@@ -11,6 +11,8 @@
           <el-button class="custom-button" type="primary" plain @click="goToHome">返回首页</el-button>
         </div>
       </div>
+    </div>
+    <div class="card" style="height: 935px;">
       <div class="card-header">
         <div>视频监控</div>
         <div class="more">查看更多</div>
@@ -22,12 +24,13 @@
             <span>{{ item.time }}</span>
           </div>
           <div class="video-content">
-            <img class="img" src="@/assets/images/profile.jpg" alt="" />
+            <video :src="item.url" controls autoplay muted style="width: 100%; height: 100%" />
+<!--            <img class="img" src="@/assets/images/profile.jpg" alt="" />-->
           </div>
         </div>
       </div>
     </div>
-    <div class="card">
+    <div class="card" style="height: 978px">
       <div class="card-header">
         <div>动态消息</div>
       </div>
@@ -160,8 +163,13 @@ const handleClose = () => {
   display: flex;
   flex-wrap: wrap;
   .video-box {
-    width: 485px;
+    width: 723px;
     margin-right: 46px;
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      margin-bottom: 15px;
+    }
     &:nth-child(3),
     &:nth-child(6) {
       margin-right: 0;

src/views/emergencyCommandMap/index.vue

@@ -16,7 +16,7 @@ import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
 
 onMounted(() => {
-/*  autofit.init(
+  autofit.init(
     {
       dw: 8960,
       dh: 2520,
@@ -24,7 +24,7 @@ onMounted(() => {
       resize: true
     },
     false
-  );*/
+  );
 });
 
 onUnmounted(() => {
@@ -38,7 +38,7 @@ onUnmounted(() => {
   //height: 100vh;
   width: 8960px;
   height: 2560px;
-  background-color: #f2f2f2;
+  background-color: #030526;
   font-size: 74px;
   .dashboard-content {
     padding: 69px;

src/views/globalMap/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="global-map">
-    <MapLogical v-show="activeMap === 'logical'" :mapData="mapData" />
-    <Map v-show="activeMap !== 'logical'" ref="mapRef" :activeMap="activeMap" />
+    <MapLogical v-if="activeMap === 'logical'" :mapData="mapData" />
+    <Map v-else ref="mapRef" :activeMap="activeMap" />
     <!--左侧菜单-->
     <LeftMenu @addMarkers="addMarkers" style="position: absolute; top: 20px; left: 20px" />
     <!--更换地图类型-->
@@ -21,6 +21,7 @@ import TimeAxis from '@/components/TimeAxis/index.vue';
 
 const mapData = reactive(logicalData);
 let mapRef = ref(null);
+// logical vectorgraph satellite
 let activeMap = ref('logical');
 
 const swtichMap = (key) => {

src/views/routineCommandMap/LeftSection.vue

@@ -74,11 +74,11 @@ const router = useRouter();
 const comprehensiveDutyState = reactive({
   data: {
     // 值班时间
-    time: '',
+    time: '08:30-17:30',
     // 带班领导
-    classLeader: '',
+    classLeader: '张珊珊',
     // 值班人员
-    operatorOnDuty: ''
+    operatorOnDuty: '王珊珊'
   }
 });
 

src/views/routineCommandMap/RightSection.vue

@@ -6,13 +6,15 @@
         <div class="more" @click="showvideoMonitorList">查看更多</div>
       </div>
       <div class="card-content video-list">
-        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box" @click="showVideoDialog(item)">
+        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box">
           <div class="video-header">
             <span>{{ item.label }}</span>
             <span>{{ item.time }}</span>
           </div>
           <div class="video-content">
-            <img class="img" src="@/assets/images/profile.jpg" alt="" />
+            <video :src="item.url" controls autoplay muted style="width: 100%; height: 100%" />
+<!--            <HKVideo :id="item.id" :url="item.url" />-->
+<!--            <img class="img" src="@/assets/images/profile.jpg" alt="" />-->
           </div>
         </div>
       </div>
@@ -48,7 +50,7 @@
   </div>
   <!--视频弹窗-->
   <Dialog v-model="videoMonitorState.showDetailDialog" :title="videoMonitorState.detailData.label" width="70%">
-    <HKVideo :url="videoMonitorState.detailData.url" />
+<!--    <HKVideo :url="videoMonitorState.detailData.url" />-->
   </Dialog>
   <Dialog v-model="videoMonitorState.showListDialog" title="视频监控列表" width="70%"></Dialog>
   <!--预案管理弹窗-->
@@ -73,7 +75,7 @@ const videoMonitorState = reactive({
 // 显示视频列表
 const showvideoMonitorList = () => {
   videoMonitorState.showListDialog = true;
-}
+};
 // 显示视频弹窗
 const showVideoDialog = (item) => {
   videoMonitorState.detailData = item;
@@ -114,12 +116,12 @@ const showKnowledgeBaseDetail = () => {
 const initData = () => {
   // 视频监控数据
   videoMonitorState.listData = [
-    { label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
-    { label: '摄像头二', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
-    { label: '摄像头三', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
-    { label: '摄像头四', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
-    { label: '摄像头五', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
-    { label: '摄像头六', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' }
+    { id: 1, label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 2, label: '摄像头二', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 3, label: '摄像头三', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 4, label: '摄像头四', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 5, label: '摄像头五', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+    { id: 6, label: '摄像头六', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' }
   ];
   // 预案管理数据
   planManageState.listData = [
@@ -239,7 +241,7 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
   .video-box {
-    width: 485px;
+    width: 723px;
     margin-right: 46px;
     &:nth-child(3),
     &:nth-child(6) {