增加应急态入口界面

src/components/HeaderSection/index.vue

@@ -49,6 +49,7 @@ import { Search } from '@element-plus/icons-vue';
 import { getWeather } from '@/api/dashboard/weatherApi';
 import { onMounted } from 'vue';
 
+const router = useRouter();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 
@@ -107,6 +108,10 @@ const updateCurrentDate = () => {
   });
 };
 
+// 跳转全域地图
+const jumpGlobeMap = () => {
+  router.push('/globalMap');
+};
 onMounted(() => {
   fetchWeather();
   updateCurrentDate();

src/router/index.ts

@@ -54,11 +54,11 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '',
-    component: () => import('@/views/dashboard/index.vue')
+    component: () => import('@/views/routineCommandMap/index.vue')
   },
   {
     path: '/index',
-    component: () => import('@/views/dashboard/index.vue'),
+    component: () => import('@/views/routineCommandMap/index.vue'),
     name: 'Index'
   },
   {
@@ -76,10 +76,15 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: '/index',
-    component: () => import('@/views/dashboard/index.vue'),
-    name: 'Index'
+    path: '/emergencyCommandMap',
+    component: () => import('@/views/emergencyCommandMap/index.vue'),
+    name: 'emergencyCommandMap'
   },
+  {
+    path: '/globalMap',
+    component: () => import('@/views/globalMap/index.vue'),
+    name: 'globalMap'
+  }
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/emergencyCommandMap/LeftSection.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="left-section">
+    <div class="card">
+      <div class="card-header">
+        <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>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <div>综合值守</div>
+      </div>
+      <div class="card-content">
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <div>分析研判</div>
+      </div>
+      <div class="card-content flex" style="height: 100%">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.left-section {
+  width: 1685px;
+  height: calc(2560px - 345px);
+  display: flex;
+  flex-direction: column;
+  font-size: 74px;
+}
+.card {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 26px;
+  padding: 46px 69px;
+  margin-bottom: 69px;
+  animation-name: slide;
+  .card-header {
+    margin-bottom: 20px;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &:nth-child(1) {
+    animation-duration: 0.5s; // 新增
+  }
+  &:nth-child(2) {
+    height: 667.5px;
+    animation-duration: 1s; // 新增
+  }
+  &:nth-child(3) {
+    height: 667.5px;
+    animation-duration: 1.5s; // 新增
+  }
+}
+.table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    .td {
+      background-color: #fafafa;
+      border: 5px solid #ebebeb;
+    }
+  }
+  .tr {
+    .td {
+      width: auto;
+      font-size: 28px;
+      padding: 10px 5px;
+      border-bottom: 5px solid #ebebeb;
+    }
+  }
+}
+@keyframes slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  80% {
+    transform: translateX(92px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

src/views/emergencyCommandMap/RightSection.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="right-section">
+    <div class="card">
+      <div class="card-header">
+        <div>视频监控</div>
+        <div class="more">查看更多</div>
+      </div>
+      <div class="card-content video-list">
+        <div v-for="(item, index) in videoUrl" :key="index" class="video-box" @click="showVideoDialog(item)">
+          <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="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <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>-->
+</template>
+
+<script lang="ts" setup>
+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 showVideoDialog = (item) => {
+  console.log(item);
+  videoDialogData = item;
+  videoDialogVisible.value = true;
+};
+// 关闭视频弹窗
+const handleClose = () => {
+  videoDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.right-section {
+  width: 1685px;
+  height: calc(2560px - 345px);
+  display: flex;
+  flex-direction: column;
+  font-size: 74px;
+}
+
+.card {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 26px;
+  padding: 46px 69px;
+  margin-bottom: 69px;
+  animation-name: slide;
+
+  .card-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:nth-child(1) {
+    animation-duration: 0.5s; // 新增
+  }
+
+  &:nth-child(2) {
+    height: 667.5px;
+    animation-duration: 1s; // 新增
+  }
+
+  &:nth-child(3) {
+    height: 667.5px;
+    animation-duration: 1.5s; // 新增
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(100%);
+  }
+  80% {
+    transform: translateX(-92px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.more {
+  color: #1890ff;
+  cursor: pointer;
+}
+
+.video-list {
+  display: flex;
+  flex-wrap: wrap;
+  .video-box {
+    width: 485px;
+    margin-right: 46px;
+    &:nth-child(3),
+    &:nth-child(6) {
+      margin-right: 0;
+    }
+  }
+}
+.video-box {
+  cursor: pointer;
+  .video-header {
+    background-color: #7f7f7f;
+    padding: 0 10px;
+    font-size: 30px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .video-content {
+    padding: 15px;
+    background-color: #ccc;
+    .img {
+      width: 100%;
+      height: 250px;
+    }
+  }
+}
+</style>

src/views/dashboard/index.vue → src/views/emergencyCommandMap/index.vue

@@ -10,21 +10,21 @@
 </template>
 
 <script lang="ts" setup>
-import LeftSection from '@/views/dashboard/LeftSection.vue';
-import RightSection from '@/views/dashboard/RightSection.vue';
-import MiddleSection from '@/views/dashboard/MiddleSection.vue';
+import LeftSection from './LeftSection.vue';
+import RightSection from './RightSection.vue';
+import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
 
 onMounted(() => {
-  // autofit.init(
-  //   {
-  //     dw: 8960,
-  //     dh: 2520,
-  //     el: '#dashboard-container',
-  //     resize: true
-  //   },
-  //   false
-  // );
+  autofit.init(
+    {
+      dw: 8960,
+      dh: 2520,
+      el: '#dashboard-container',
+      resize: true
+    },
+    false
+  );
 });
 
 onUnmounted(() => {

src/views/dashboard/LeftSection.vue → src/views/routineCommandMap/LeftSection.vue

@@ -36,16 +36,33 @@
       <div class="card-header">
         <div>事件接报</div>
       </div>
-      <div class="card-content flex" style="height: 100%">
-        <!--<Chart :option="option1" />-->
+      <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>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in listData2" :key="index" class="tr">
+            <td class="td">{{ item.name }}</td>
+            <td class="td">{{ item.type }}</td>
+            <td class="td">{{ item.address }}</td>
+            <td class="td">{{ item.time }}</td>
+            <td class="td">{{ item.status }}</td>
+            <td class="td">
+              <div class="flex">
+                <div @click="enterCommand">进入指挥</div>
+              </div>
+            </td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { chartOption1 } from './optionsData';
-
+const router = useRouter();
 // 巡查消息
 const columns = [
   { label: '巡检任务', key: 'task' },
@@ -65,7 +82,26 @@ const listData = reactive([
 ]);
 
 // 事件接报
-const option1 = reactive(chartOption1);
+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 enterCommand = () => {
+  router.push('/emergencyCommandMap');
+};
 </script>
 
 <style lang="scss" scoped>

src/views/routineCommandMap/MiddleSection.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="middle-section">
+    1
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+.middle-section {
+  margin: 0 15px;
+  flex: 1;
+  height: 100%;
+  animation: slideAndFade 1.5s;
+}
+
+@keyframes slideAndFade {
+  0% {
+    transform: translateY(218px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+</style>

src/views/routineCommandMap/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="dashboard-container" class="dashboard-container">
+    <HeaderSection />
+    <div class="dashboard-content">
+      <LeftSection />
+      <MiddleSection />
+      <RightSection />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LeftSection from './LeftSection.vue';
+import RightSection from './RightSection.vue';
+import MiddleSection from './MiddleSection.vue';
+import autofit from 'autofit.js';
+
+onMounted(() => {
+  autofit.init(
+    {
+      dw: 8960,
+      dh: 2520,
+      el: '#dashboard-container',
+      resize: true
+    },
+    false
+  );
+});
+
+onUnmounted(() => {
+  autofit.off();
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  //width: 100%;
+  //height: 100vh;
+  width: 8960px;
+  height: 2560px;
+  background-color: #f2f2f2;
+  font-size: 74px;
+  .dashboard-content {
+    padding: 69px;
+    display: flex;
+    height: calc(2560px - 207px);
+  }
+}
+</style>

src/views/routineCommandMap/optionsData.ts

@@ -0,0 +1,15 @@
+export const chartOption1 = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+};