弹窗逻辑

src/components/Dialog/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="overlay">
+  <div v-if="modelValue" class="dialog-wrap">
+    <div class="overlay" @click="closeDialog"></div>
     <div class="dialog">
       <div class="dialog-header">
-        <div class="dialog-title"></div>
-        <div class="icon-close">
+        <div class="dialog-title">{{ title }}</div>
+        <div class="icon-close" @click="closeDialog">
           <el-icon size="100px"><Close /></el-icon>
         </div>
       </div>
@@ -13,28 +14,43 @@
 
 <script lang="ts" setup>
 interface Props {
-  visible: boolean;
+  modelValue: boolean;
   title?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
-  visible: false
+  modelValue: false
 });
+const emit = defineEmits(['update:modelValue']);
+
+// 关闭弹窗
+const closeDialog = () => {
+  emit('update:modelValue', false);
+};
 </script>
 
 <style lang="scss" scoped>
-.overlay {
+.dialog-wrap {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 2000;
-  background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    cursor: pointer;
+  }
   .dialog {
     width: 5000px;
     height: 2000px;
@@ -55,6 +71,5 @@ const props = withDefaults(defineProps<Props>(), {
       cursor: pointer;
     }
   }
-
 }
 </style>

src/views/routineCommandMap/LeftSection.vue

@@ -5,23 +5,24 @@
         <div>综合值守</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: 207px">值班时间：{{ comprehensiveDutyState.data.time }}</div>
+        <div style="line-height: 207px">带班领导：{{ comprehensiveDutyState.data.classLeader }}</div>
+        <div style="line-height: 207px">值班时间：{{ comprehensiveDutyState.data.operatorOnDuty }}</div>
       </div>
     </div>
     <div class="card">
       <div class="card-header">
         <div>巡查消息</div>
+        <div class="more" @click="showInspectionNewsState">查看更多</div>
       </div>
       <div class="card-content">
         <table class="table">
           <thead>
             <tr class="tr">
-              <td v-for="(item, index) in columns" :key="index" class="td">{{ item.label }}</td>
+              <td v-for="(item, index) in inspectionNewsState.columns" :key="index" class="td">{{ item.label }}</td>
             </tr>
           </thead>
-          <tr v-for="(item, index) in listData" :key="index" class="tr">
+          <tr v-for="(item, index) in inspectionNewsState.listData" :key="index" class="tr">
             <td class="td">{{ item.name }}</td>
             <td class="td">{{ item.type }}</td>
             <td class="td">{{ item.address }}</td>
@@ -35,15 +36,16 @@
     <div class="card">
       <div class="card-header">
         <div>事件接报</div>
+        <div class="more" @click="showvideoMonitorList">查看更多</div>
       </div>
       <div class="card-content" style="height: 100%">
         <table class="table">
           <thead>
             <tr class="tr">
-              <td v-for="(item, index) in columns2" :key="index" class="td">{{ item.label }}</td>
+              <td v-for="(item, index) in inspectionNewsState.columns" :key="index" class="td">{{ item.label }}</td>
             </tr>
           </thead>
-          <tr v-for="(item, index) in listData2" :key="index" class="tr">
+          <tr v-for="(item, index) in inspectionNewsState.listData" :key="index" class="tr">
             <td class="td">{{ item.name }}</td>
             <td class="td">{{ item.type }}</td>
             <td class="td">{{ item.address }}</td>
@@ -59,49 +61,99 @@
       </div>
     </div>
   </div>
+  <!--巡查消息弹窗-->
+  <Dialog v-model="inspectionNewsState.showListDialog" title="巡查消息列表" width="70%"></Dialog>
 </template>
 
 <script lang="ts" setup>
+import Dialog from '@/components/Dialog/index.vue';
+
 const router = useRouter();
+
+// 综合值守
+const comprehensiveDutyState = reactive({
+  data: {
+    // 值班时间
+    time: '',
+    // 带班领导
+    classLeader: '',
+    // 值班人员
+    operatorOnDuty: ''
+  }
+});
+
 // 巡查消息
-const columns = [
-  { label: '巡检任务', key: 'task' },
-  { label: '巡检类型', key: 'type' },
-  { label: '巡检地点', key: 'address' },
-  { label: '巡检时间', key: 'time' },
-  { label: '巡检结果', key: 'result' },
-  { label: '巡检图像', key: 'img' }
-];
-const listData = reactive([
-  { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-  { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-  { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-  { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-  { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
-  { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
-]);
+const inspectionNewsState = reactive({
+  showListDialog: false,
+  columns: [
+    { label: '巡检任务', key: 'task' },
+    { label: '巡检类型', key: 'type' },
+    { label: '巡检地点', key: 'address' },
+    { label: '巡检时间', key: 'time' },
+    { label: '巡检结果', key: 'result' },
+    { label: '巡检图像', key: 'img' }
+  ],
+  listData: []
+});
+// 显示更多巡查消息
+const showInspectionNewsState = () => {
+  inspectionNewsState.showListDialog = true;
+};
 
 // 事件接报
-const columns2 = [
-  { label: '事件名称', key: 'name' },
-  { label: '事件类型', key: 'type' },
-  { label: '地点', key: 'address' },
-  { label: '上报时间', key: 'time' },
-  { label: '事件状态', key: 'status' },
-  { label: '操作', key: 'operate' }
-];
-const listData2 = reactive([
-  { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
-  { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
-  { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
-  { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
-  { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
-  { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' }
-]);
+const eventReporting = reactive({
+  showListDialog: false,
+  columns: [
+    { label: '事件名称', key: 'name' },
+    { label: '事件类型', key: 'type' },
+    { label: '地点', key: 'address' },
+    { label: '上报时间', key: 'time' },
+    { label: '事件状态', key: 'status' },
+    { label: '操作', key: 'operate' }
+  ],
+  listData: []
+});
+// 显示更多巡查消息
+const showEventReporting = () => {
+  eventReporting.showListDialog = true;
+};
+
 // 进入应急态界面
 const enterCommand = () => {
   router.push('/emergencyCommandMap');
 };
+
+// 初始化数据
+const initData = () => {
+  // 综合值守数据
+  comprehensiveDutyState.data = {
+    time: '08:30-17:30',
+    classLeader: '张珊珊',
+    operatorOnDuty: '林珊珊、张珊珊'
+  };
+  // 巡查消息数据
+  inspectionNewsState.listData = [
+    { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+    { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
+  ];
+  // 事件接报
+  eventReporting.listData = [
+    { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
+    { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
+    { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
+    { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
+    { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' },
+    { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', status: '正常' }
+  ];
+};
+// 加载完成事件
+onMounted(() => {
+  initData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -120,7 +172,11 @@ const enterCommand = () => {
   margin-bottom: 69px;
   animation-name: slide;
   .card-header {
+    width: 100%;
     margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   &:last-child {
     margin-bottom: 0;
@@ -156,6 +212,10 @@ const enterCommand = () => {
     }
   }
 }
+.more {
+  color: #1890ff;
+  cursor: pointer;
+}
 @keyframes slide {
   0% {
     transform: translateX(-100%);

src/views/routineCommandMap/RightSection.vue

@@ -3,10 +3,10 @@
     <div class="card">
       <div class="card-header">
         <div>视频监控</div>
-        <div class="more">查看更多</div>
+        <div class="more" @click="showvideoMonitorList">查看更多</div>
       </div>
       <div class="card-content video-list">
-        <div v-for="(item, index) in videoUrl" :key="index" class="video-box" @click="showVideoDialog(item)">
+        <div v-for="(item, index) in videoMonitorState.listData" :key="index" class="video-box" @click="showVideoDialog(item)">
           <div class="video-header">
             <span>{{ item.label }}</span>
             <span>{{ item.time }}</span>
@@ -19,21 +19,44 @@
     </div>
     <div class="card">
       <div class="card-header">
-        <div>巡查消息</div>
+        <div>预案管理</div>
+        <div class="more" @click="showMorePlanManageList">查看更多</div>
+      </div>
+      <div class="card-content">
+        <div class="img-list">
+          <div v-for="(item, index) in planManageState.listData" :key="index" class="img-item" @click="showPlanManageDetail">
+            <img class="img" :src="item.img" alt="" />
+            <div class="img-text">{{ item.title }}</div>
+          </div>
+        </div>
       </div>
-      <div class="card-content"></div>
     </div>
     <div class="card">
       <div class="card-header">
-        <div>事件接报</div>
+        <div>应急知识库</div>
+        <div class="more" @click="showKnowledgeBaseList">查看更多</div>
+      </div>
+      <div class="card-content">
+        <div class="img-list">
+          <div v-for="(item, index) in knowledgeBaseState.listData" :key="index" class="img-item" @click="showKnowledgeBaseDetail">
+            <img class="img" :src="item.img" alt="" />
+            <div class="img-text">{{ item.title }}</div>
+          </div>
+        </div>
       </div>
-      <div class="card-content"></div>
     </div>
   </div>
   <!--视频弹窗-->
-  <!--  <Dialog v-model="videoDialogVisible" :title="videoDialogData.label" width="70%" :before-close="handleClose">-->
-  <!--    <HKVideo :url="videoDialogData.url" />-->
-  <!--  </Dialog>-->
+  <Dialog v-model="videoMonitorState.showDetailDialog" :title="videoMonitorState.detailData.label" width="70%">
+    <HKVideo :url="videoMonitorState.detailData.url" />
+  </Dialog>
+  <Dialog v-model="videoMonitorState.showListDialog" title="视频监控列表" width="70%"></Dialog>
+  <!--预案管理弹窗-->
+  <Dialog v-model="planManageState.showListDialog" title="预案管理列表" width="70%"></Dialog>
+  <Dialog v-model="planManageState.showDetailDialog" title="预案管理详情" width="70%"></Dialog>
+  <!--应急知识库弹窗-->
+  <Dialog v-model="knowledgeBaseState.showListDialog" title="应急知识库列表" width="70%"></Dialog>
+  <Dialog v-model="knowledgeBaseState.showDetailDialog" title="应急知识库详情" width="70%"></Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -41,28 +64,114 @@ import Dialog from '@/components/Dialog/index.vue';
 import HKVideo from '@/components/HKVideo/index.vue';
 
 // 视频监控
-const videoUrl = reactive([
-  { 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' }
-]);
-// 视频弹窗显隐
-let videoDialogVisible = ref(false);
-let videoDialogData = reactive({});
-
+const videoMonitorState = reactive({
+  listData: [],
+  showListDialog: false,
+  showDetailDialog: false,
+  detailData: { label: '', url: '' }
+});
+// 显示视频列表
+const showvideoMonitorList = () => {
+  videoMonitorState.showListDialog = true;
+}
 // 显示视频弹窗
 const showVideoDialog = (item) => {
-  console.log(item);
-  videoDialogData = item;
-  videoDialogVisible.value = true;
+  videoMonitorState.detailData = item;
+  videoMonitorState.showDetailDialog = true;
+};
+
+// 预案管理
+const planManageState = reactive({
+  listData: [],
+  showListDialog: false,
+  showDetailDialog: false
+});
+// 显示预案管理列表弹窗
+const showMorePlanManageList = () => {
+  planManageState.showListDialog = true;
+};
+// 显示预案管理详情弹窗
+const showPlanManageDetail = () => {
+  planManageState.showDetailDialog = true;
+};
+
+// 应急知识库
+const knowledgeBaseState = reactive({
+  listData: [],
+  showListDialog: false,
+  showDetailDialog: false
+});
+// 显示应急知识库列表
+const showKnowledgeBaseList = () => {
+  knowledgeBaseState.showListDialog = true;
 };
-// 关闭视频弹窗
-const handleClose = () => {
-  videoDialogVisible.value = false;
+// 显示应急知识库详情
+const showKnowledgeBaseDetail = () => {
+  knowledgeBaseState.showDetailDialog = true;
 };
+
+// 初始化数据
+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' }
+  ];
+  // 预案管理数据
+  planManageState.listData = [
+    {
+      title: '广东省城市轨道交通运营突发事件应急预案',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: '广东省城市轨道交通运营突发事件应急预案',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: '广东省城市轨道交通运营突发事件应急预案',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: '广东省城市轨道交通运营突发事件应急预案',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: '广东省城市轨道交通运营突发事件应急预案',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    }
+  ];
+  // 应急知识库数据
+  knowledgeBaseState.listData = [
+    {
+      title: 'xxx市轨道交通运营突发事件',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: 'xxx市轨道交通运营突发事件',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: 'xxx市轨道交通运营突发事件',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: 'xxx市轨道交通运营突发事件',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    },
+    {
+      title: 'xxx市轨道交通运营突发事件',
+      img: 'https://img0.baidu.com/it/u=1918456140,3851309096&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
+    }
+  ];
+};
+// 加载完成事件
+onMounted(() => {
+  initData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -84,6 +193,7 @@ const handleClose = () => {
 
   .card-header {
     width: 100%;
+    margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -157,4 +267,30 @@ const handleClose = () => {
     }
   }
 }
+
+.img-list {
+  display: flex;
+  justify-content: space-between;
+  .img-item {
+    width: 280px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    .img {
+      width: 260px;
+      height: 360px;
+    }
+    .img-text {
+      margin-top: 20px;
+      font-size: 32px;
+      overflow: hidden;
+      display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
+      -webkit-line-clamp: 2; /* 行数，值可以改，表示展示X行后多余的缩略展示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      word-break: break-all;
+    }
+  }
+}
 </style>

src/views/routineCommandMap/planManage/Details.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/routineCommandMap/planManage/index.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>