视频监控弹窗

src/assets/styles/element-ui.scss

@@ -185,6 +185,7 @@
     border-radius: 0;
     position: relative;
     padding: 4px 24px !important;
+    height: 80px;
     &::before {
       content: '';
       position: absolute;
@@ -207,7 +208,7 @@
     }
     .el-select__placeholder {
       color: #a0c7dc;
-      font-size: 36px;
+      font-size: 38px;
       height: 80px;
       line-height: 80px;
     }
@@ -321,15 +322,15 @@
   }
   .el-input__wrapper {
     box-shadow: none;
-    background-color: #0a3b87;
-    border: 1px solid #0d63c2;
+    background-color: rgba(26, 144, 255, 0.15) !important;
+    border: 4px solid rgba(26, 144, 255, 0.15) !important;
   }
   .el-input__inner {
     font-size: 32px;
     color: #a7ccdf;
     font-family: PingFang SC;
-    height: 55px;
-    line-height: 55px;
+    height: 72px;
+    line-height: 72px;
     &::placeholder {
       color: #a7ccdf;
     }
@@ -362,15 +363,15 @@
   position: relative;
   .el-input__wrapper {
     box-shadow: none;
-    background-color: #0d2f5d;
-    border: 1px solid #0a59a8;
+    background-color: rgba(26, 144, 255, 0.15) !important;
+    border: 4px solid rgba(26, 144, 255, 0.15) !important;
   }
   .el-input__inner {
     font-size: 32px;
     color: #a0c7dc;
     font-family: PingFang SC;
-    height: 55px;
-    line-height: 55px;
+    height: 72px;
+    line-height: 72px;
     &::placeholder {
       color: #a0c7dc;
     }

src/assets/styles/index.scss

@@ -369,3 +369,13 @@ aside {
     margin-left: 8px;
   }
 }
+
+.common-btn2 {
+  border: 3px solid #247dff;
+  border-radius: 8px;
+  background-color: #19326f;
+  color: #9bc3ff;
+  font-size: 38px;
+  cursor: pointer;
+  padding: 15px;
+}

src/components/Dialog/index.vue

@@ -89,7 +89,7 @@ const confirm = () => {
 
 <style lang="scss" scoped>
 .common-dialog {
-  padding: 0 20px 20px;
+  padding: 0 40px 40px;
   border: 4px solid #2c81ff;
   color: #ffffff;
   background-color: rgba(5, 18, 53, 0.85);

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -291,14 +291,6 @@ const deleteItem = (item) => {
         display: flex;
         .custom-input {
           width: 305px;
-          :deep(.el-input__wrapper) {
-            background-color: rgba(26, 144, 255, 0.15) !important;
-            border: 4px solid rgba(26, 144, 255, 0.15) !important;
-          }
-          :deep(.el-input__inner) {
-            height: 56px;
-            line-height: 56px;
-          }
         }
         .select-box {
           width: 176px !important;

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -11,14 +11,36 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showListDialog" type="lg" title="视频监控" hide-footer @closeDialog="reset">
+  <Dialog v-model="showListDialog" type="xl" title="视频监控" hide-footer @closeDialog="reset">
     <div class="search-box">
-      <div v-show="!editVideo" class="box-left" @click="activeEdit">
-        <el-button type="primary" size="large">编辑首页视频</el-button>
+      <div class="box-left">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px">
+          <el-form-item label="实景视频" prop="eventType">
+            <el-select
+              v-model="queryParams.realisticVideoType"
+              size="large"
+              class="custom-select"
+              popper-class="custom-select-popper"
+              :teleported="false"
+              placeholder="全部"
+            >
+              <el-option label="全部" value=""></el-option>
+              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="name">
+            <el-input class="custom-input2" placeholder="请输入摄像头名称" size="large" style="width: 300px" />
+          </el-form-item>
+          <el-form-item>
+            <div class="common-btn-primary" @click="handleQuery">搜索</div>
+            <div class="common-btn" @click="resetQuery">重置</div>
+          </el-form-item>
+        </el-form>
       </div>
+      <div v-show="!editVideo" class="common-btn" @click="activeEdit" style="margin-top: -32px">编辑</div>
       <div v-show="editVideo" class="edit-box">
-        <el-button type="primary" size="large" @click="handleSave">保存</el-button>
-        <el-button type="danger" size="large" @click="handleCancel">取消编辑</el-button>
+        <div class="common-btn-primary" @click="handleSave" style="margin-top: -32px">保存</div>
+        <div class="common-btn-danger" @click="handleCancel">取消</div>
         <div class="flex">
           <div v-for="(item, index) in editData" :key="index" class="box-item">
             <div class="edit-img">
@@ -28,23 +50,6 @@
           </div>
         </div>
       </div>
-      <div class="box-right">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-          <el-form-item style="width: 200px" label="实景视频" prop="eventType">
-            <el-select v-model="queryParams.realisticVideoType" placeholder="全部" clearable>
-              <el-option label="全部" value=""></el-option>
-              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="name">
-            <el-input placeholder="请输入摄像头名称" size="large" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery" size="large">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery" size="large">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
     </div>
     <div class="video-list2">
       <div v-for="(item, index) in dialogListData" :key="index" class="video-box" @click="selectItem(item)">
@@ -60,14 +65,16 @@
         </div>
       </div>
     </div>
-    <pagination
-      v-show="total > queryParams.size"
-      v-model:page="queryParams.current"
-      v-model:limit="queryParams.size"
-      :total="total"
-      :page-sizes="[5, 10, 20]"
-      @pagination="getList"
-    />
+    <div class="footer">
+      <pagination
+        v-show="total > queryParams.size"
+        v-model:page="queryParams.current"
+        v-model:limit="queryParams.size"
+        :total="total"
+        layout="total, prev, pager, next"
+        @pagination="getList"
+      />
+    </div>
   </Dialog>
 </template>
 
@@ -93,7 +100,7 @@ initData();
 const queryFormRef = ref();
 const queryParams = reactive({
   current: 1,
-  size: 10,
+  size: 8,
   realisticVideoType: '',
   name: ''
 });
@@ -267,9 +274,10 @@ const handleSave = () => {
   display: flex;
   flex-wrap: wrap;
   padding-top: 100px;
-  padding-left: 60px;
+  padding-left: 20px;
+  padding-right: 20px;
   .video-box {
-    width: 800px;
+    width: 780px;
     height: 356px;
     margin-right: 35.06px;
     cursor: pointer;
@@ -346,4 +354,53 @@ const handleSave = () => {
     color: #fff;
   }
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 30px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
 </style>

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -87,7 +87,7 @@
           <div class="line" style="margin-left: 40px"></div>
           <div class="finish-btn" @click="closeCommand">
             <div class="finish-icon"></div>
-            <div class="finish-text">结束处置</div>
+            <div class="finish-text">结束指挥</div>
           </div>
         </div>
       </div>

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -26,9 +26,9 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showQrCode" title="签到码" width="500px" height="500px">
+  <Dialog v-model="showQrCode" title="签到码" type="sm" hide-footer>
     <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%">
-      <img :src="qrCodeUrl" alt="" style="width: 370px; height: 370px" />
+      <img :src="qrCodeUrl" alt="" style="width: 900px; height: 900px" />
     </div>
   </Dialog>
 </template>
@@ -102,9 +102,9 @@ onMounted(() => {
   ];
   */
   getCheckinList(eventId.value).then((res) => {
-     listData.value = res.data;
+    listData.value = res.data;
   });
-  qrCodeUrl.value = import.meta.env.VITE_APP_BASE_API + 'api/event_management/checkin/qrcode?event_id=' + eventId.value;
+  qrCodeUrl.value = import.meta.env.VITE_APP_BASE_API2 + 'api/event_management/checkin/qrcode?event_id=' + eventId.value;
 });
 </script>
 

src/views/routineCommandMap/LeftSection/EventManage.vue

@@ -97,7 +97,7 @@
               </el-form-item>
             </el-col>
             <div class="flex">
-              <div class="common-btn-primary" @click="handleQuery" style="margin-top: -32px;">搜索</div>
+              <div class="common-btn-primary" @click="handleQuery" style="margin-top: -32px">搜索</div>
               <div class="common-btn" @click="resetQuery">重置</div>
             </div>
           </el-row>
@@ -125,19 +125,11 @@
         <div class="td">{{ item.event_status }}</div>
         <div class="td">{{ item.event_time }}</div>
         <div class="td">
-          <div @click="handleView(item)">查看</div>
-          <div @click="handleClose(item)">关闭事件</div>
+          <div class="common-btn2" @click="enterCommand(item)">进入指挥</div>
+<!--          <div class="common-btn2" style="margin-left: 20px" @click="handleClose(item)">关闭事件</div>-->
         </div>
       </div>
     </div>
-    <eventDetails v-model="eventDetailsState.show" :title="eventDetailsState.title" :event-id="eventId" @update:model-value="getList"></eventDetails>
-    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :event-id="eventId" @update:model-value="getList" />
-    <CloseEventDialog
-      v-model="closeDialogState.show"
-      :data="closeDialogState.form"
-      :event-id="eventId"
-      @update:model-value="handleCloseEventDialog"
-    />
     <div class="footer">
       <pagination
         v-show="total > 0"
@@ -148,6 +140,12 @@
         @pagination="getList"
       />
     </div>
+    <CloseEventDialog
+      v-model="closeDialogState.show"
+      :data="closeDialogState.form"
+      :event-id="eventId"
+      @update:model-value="handleCloseEventDialog"
+    />
   </Dialog>
 </template>
 
@@ -157,7 +155,6 @@ import { getEvent } from '@/api/duty/eventing';
 
 import EventEditDialog from '../eventing/EventEditDialog.vue';
 import CloseEventDialog from '../eventing/CloseEventDialog.vue';
-import eventDetails from '../eventing/eventDetails.vue';
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
   proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
@@ -245,50 +242,6 @@ const eventEditDialogState = reactive({
   show: false,
   title: ''
 });
-const eventDetailsState = reactive({
-  show: false,
-  title: ''
-});
-
-// const handleAdd = () => {
-//   eventId.value = '';
-//   eventEditDialogState.title = '新增事件';
-//   eventEditDialogState.show = true;
-// };
-
-// 修改事件
-// const handleUpdate = (row) => {
-//   if (row) {
-//     eventId.value = row.event_id;
-//     eventEditDialogState.title = '修改事件';
-//     eventEditDialogState.show = true;
-//   }
-// };
-//查看事件详情
-const handleView = (row) => {
-  // 查看事件详情逻辑
-  eventId.value = row.event_id;
-  eventDetailsState.title = '查看事件';
-  eventDetailsState.show = true;
-};
-
-// const handleDelete = (row) => {
-//   if (row) {
-//     ElMessageBox.confirm('确认删除事件吗?', '提示', {
-//       confirmButtonText: '确定',
-//       cancelButtonText: '取消',
-//       type: 'info'
-//     }).then(() => {
-//       eventList.value = eventList.value.filter((item) => item.eventId !== row.event_id);
-//       deleteEvent({ eventId: row.event_id }).then((res) => {
-//         proxy?.$modal.msgSuccess(res.msg);
-//         setTimeout(() => {
-//           getList();
-//         }, 500);
-//       });
-//     });
-//   }
-// };
 
 // 关闭事件
 const closeDialogState = reactive({
@@ -351,6 +304,17 @@ watch(
 const closeDialog = () => {
   emit('update:modelValue', false);
 };
+// 进入应急态界面
+const enterCommand = (item) => {
+  if (item) {
+    // 查看事件详情逻辑
+    console.log('进入指挥', item);
+    router.push({
+      path: '/emergencyCommandMap',
+      query: { event_id: item.event_id }
+    });
+  }
+};
 </script>
 
 <style lang="scss" scoped>