瀏覽代碼

字体样式调整

Hwf 7 月之前
父節點
當前提交
f799e23684

+ 1 - 2
src/types/components.d.ts

@@ -23,8 +23,6 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -104,6 +102,7 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

+ 5 - 4
src/views/emergencyCommandMap/LeftSection/index.vue

@@ -393,7 +393,7 @@ onUnmounted(() => {
       align-items: flex-start;
       color: #fff;
       flex-wrap: wrap;
-      width: 800px;
+      flex: 1;
       .event-item {
         font-size: 38px;
         margin-top: -20px;
@@ -442,11 +442,12 @@ onUnmounted(() => {
     }
   }
   .duration-box {
-    width: 662px;
+    width: 688px;
     height: 140px;
     margin-top: 125px;
     margin-left: 22px;
     background: url('@/assets/images/emergencyCommandMap/disasterInfo/durationBg.png');
+    background-size: 100% 100%;
     display: flex;
     .text {
       font-size: 44px;
@@ -486,8 +487,8 @@ onUnmounted(() => {
     flex-direction: column;
     justify-content: center;
     cursor: pointer;
-    margin-top: 35px;
-    margin-left: 40px;
+    margin: 35px 50px 0 30px;
+    align-items: center;
     .finish-icon {
       width: 97px;
       height: 107px;

+ 2 - 2
src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -140,7 +140,7 @@ onMounted(() => {
   top: 35px;
   right: 160px;
   color: #eaf3fc;
-  font-size: 36px;
+  font-size: 38px;
   cursor: pointer;
   z-index: 2;
   display: flex;
@@ -182,7 +182,7 @@ onMounted(() => {
       padding-left: 17px;
       background: url('@/assets/images/emergencyCommandMap/duty/tr.png') no-repeat;
       background-size: 100% 100%;
-      font-size: 36px;
+      font-size: 38px;
       margin-top: 30px;
       padding: 0 50px;
     }

+ 3 - 3
src/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue

@@ -67,7 +67,7 @@ const dataList = ref([
         margin-left: 20px;
         padding: 0 30px;
         .title2 {
-          font-size: 36px;
+          font-size: 44px;
           /* 设置字体透明 */
           color: transparent;
           /* 设置线性渐变,从红色渐变到蓝色 */
@@ -111,7 +111,7 @@ const dataList = ref([
         .text1 {
           flex: 1;
           color: #fff;
-          font-size: 32px;
+          font-size: 38px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -119,7 +119,7 @@ const dataList = ref([
         .text2 {
           width: 167px;
           margin-left: 40px;
-          font-family: "BEBAS-1";
+          font-family: BEBAS-1;
           color: #00e8ff;
         }
         .icon3 {

+ 28 - 23
src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -1,23 +1,21 @@
 <template>
-  <div>
-    <div class="table-content" :class="{ 'show-scroll': showScroll }">
-      <div v-for="(item, index) in dataList" :key="index" class="box1">
-        <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
-        <div class="box2">
-          <div class="box-header">
-            <div class="header-left">
-              <div class="box-title">{{ item.unit_name }}</div>
-              <div class="time">{{ item.update_time }}</div>
-              <div :class="item.processing_status === '已完成' ? 'success' : 'processing'">{{ item.processing_status }}</div>
-            </div>
-            <div class="btn" @click="openUpdateDialog(item)">更新</div>
+  <div class="table-content" :class="{ 'show-scroll': showScroll }">
+    <div v-for="(item, index) in dataList" :key="index" class="box1">
+      <div :class="item.processing_status === '已完成' ? 'success-icon' : 'processing-icon'"></div>
+      <div class="box2">
+        <div class="box-header">
+          <div class="header-left">
+            <div class="box-title">{{ item.unit_name ? item.unit_name : '茂名市应急局' }}</div>
+            <div class="time">{{ item.update_time }}</div>
+            <div :class="item.processing_status === '已完成' ? 'success' : 'processing'">{{ item.processing_status }}</div>
           </div>
-          <div class="box-content">{{ item.task_description }}</div>
+          <div class="btn" @click="openUpdateDialog(item)">更新</div>
         </div>
+        <div class="box-content">{{ item.task_description }}</div>
       </div>
     </div>
-    <button @click="toggleScroll" class="toggle-scroll-btn">{{ showScroll ? '收起' : '查看更多 >>' }}</button>
   </div>
+  <button @click="toggleScroll" class="toggle-scroll-btn">{{ showScroll ? '收起' : '查看更多 >>' }}</button>
 
   <RenWuGengXin
     v-model="newSectionState.showListDialog"
@@ -79,28 +77,34 @@ const toggleScroll = () => {
   showScroll.value = !showScroll.value;
 };
 
-onMounted(() => {
-  if (props.eventId) {
-    fetchData();
-  } else {
-    console.warn('RightTop did not receive eventId:', props.eventId);
+watch(
+  () => props.eventId,
+  () => {
+    if (!!props.eventId) {
+      fetchData();
+    }
+  },
+  {
+    immediate: true
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>
 .table-content {
-  height: 600px;
+  width: 100%;
+  height: 550px;
   overflow-y: hidden;
   &.show-scroll {
     overflow-y: auto;
   }
   .box1 {
+    width: 100%;
     display: flex;
     align-items: center;
   }
   .box2 {
-    width: 1642px;
+    flex: 1;
     background-image: url('@/assets/images/taskTracking/box1.png');
     background-repeat: no-repeat;
     background-size: 1642px 377px;
@@ -119,7 +123,7 @@ onMounted(() => {
       display: flex;
       align-items: center;
       .box-title {
-        font-size: 38px;
+        font-size: 44px;
         font-family: YouSheBiaoTiHei;
         color: #ffffff;
         background-image: url('@/assets/images/taskTracking/titleBox.png');
@@ -175,6 +179,7 @@ onMounted(() => {
     margin-top: 15px;
     z-index: 1;
     width: 123px;
+    min-width: 123px;
     height: 79px;
     background: url('@/assets/images/taskTracking/processing.png') no-repeat;
   }

+ 31 - 18
src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -12,7 +12,7 @@
 
       <!-- 预案通知部分修改为卡片式布局 -->
       <div v-else-if="activeTab === '预案通知'" class="preplan-notification">
-        <div class="table-content">
+        <div v-if="notifications.length > 0" class="table-content">
           <div v-for="(notification, index) in notifications" :key="index" class="box1">
             <div :class="notification.status === '发送失败' ? 'error-icon' : 'success-icon'"></div>
             <div class="box2">
@@ -35,6 +35,7 @@
             </div>
           </div>
         </div>
+        <div v-else class="tip">暂无数据</div>
       </div>
 
       <!-- 资源调度部分保持不变 -->
@@ -82,7 +83,8 @@ const fetchData = async () => {
       return;
     }
 
-    const response = await taskList({ eventId: 'YJSJ3295457527' });
+    const response = await taskList({ eventId: props.eventId });
+    // const response = await taskList({ eventId: "YJSJ3295457527" });
 
     if (response.code === 200) {
       console.log('查询成功预案:', response.data);
@@ -106,15 +108,17 @@ const updateTaskList = (tasks) => {
   }));
 };
 
-// 在组件挂载时获取数据
-onMounted(() => {
-  console.log('Mounting RightTop component');
-  if (props.eventId) {
-    fetchData();
-  } else {
-    console.warn('RightTop did not receive eventId:', props.eventId);
+watch(
+  () => props.eventId,
+  () => {
+    if (!!props.eventId) {
+      fetchData();
+    }
+  },
+  {
+    immediate: true
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>
@@ -156,9 +160,9 @@ onMounted(() => {
     overflow-y: auto;
 
     .box1 {
+      width: 100%;
       display: flex;
-      align-items: flex-start;
-      margin-bottom: 20px;
+      align-items: center;
 
       &:last-child {
         margin-bottom: 0;
@@ -166,11 +170,11 @@ onMounted(() => {
 
       .success-icon,
       .error-icon {
+        margin-right: -50px;
         width: 123px;
         height: 79px;
         background-repeat: no-repeat;
         background-size: contain;
-        margin-right: 20px;
       }
 
       .success-icon {
@@ -185,9 +189,14 @@ onMounted(() => {
         flex: 1;
         background-image: url('@/assets/images/taskTracking/box1.png');
         background-repeat: no-repeat;
-        background-size: 100% 377px; /* 适应容器宽度 */
-        padding: 20px 60px 20px 20px;
+        background-size: 1642px 377px;
+        background-position: bottom left;
+        padding: 20px 20px 20px 60px;
+        margin-top: 20px;
         position: relative;
+        &:first-child {
+          margin-top: 0;
+        }
 
         .box-header {
           display: flex;
@@ -200,7 +209,7 @@ onMounted(() => {
           }
 
           .box-title {
-            font-size: 38px;
+            font-size: 44px;
             font-family: YouSheBiaoTiHei;
             color: #ffffff;
             background-image: url('@/assets/images/taskTracking/titleBox.png');
@@ -257,8 +266,8 @@ onMounted(() => {
   .card-content {
     display: flex;
     flex-wrap: wrap;
-    padding-left: 80px;
-    width: 2500px;
+    padding: 0 80px;
+    width: 100%;
   }
 }
 
@@ -277,4 +286,8 @@ onMounted(() => {
   font-size: 36px;
   color: #fff;
 }
+.tip {
+  font-size: 44px;
+  text-align: center;
+}
 </style>

+ 28 - 30
src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="gradient-text title">路网视频</div>
       <div class="box-left">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
+        <el-input v-model="queryParams.query.keyword" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
@@ -26,7 +26,7 @@
       <div class="th">
         <div class="td">
           <el-select
-            v-model="queryParams.area"
+            v-model="queryParams.query.area"
             placeholder="所有区县"
             size="large"
             class="custom-select2"
@@ -34,17 +34,20 @@
             :teleported="false"
             @change="initData"
           >
+            <el-option label="所有区县" value="" />
             <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
           </el-select>
         </div>
         <div class="td">名称</div>
       </div>
-      <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
-        <div class="td">{{ item.area }}</div>
-        <div class="td">{{ item.name }}</div>
+      <div class="table-content">
+        <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
+          <div class="td">{{ item.area }}</div>
+          <div class="td">{{ item.name }}</div>
+        </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" title="江湖河库" width="2500px" height="1200px">
+    <Dialog v-if="showDialog" v-model="showDialog" title="路网视频" width="2500px" height="1200px">
       <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
         <HKVideo :dot_data="videoMonitorData" />
       </div>
@@ -54,8 +57,7 @@
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
-import Dialog from '@/components/Dialog/index.vue';
-import { deepClone } from '@/utils';
+import Dialog from './Dialog.vue';
 import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -63,18 +65,21 @@ const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
 const queryParams = reactive({
   current: 1,
   size: 10,
-  keyword: '',
-  type: '',
-  area: ''
+  query: {
+    keyword: '',
+    type: '1,2,3,4,5',
+    area: ''
+  }
 });
 let total = ref(0);
 const options = reactive([
-  { label: '检测站', value: '检测站', checked: true },
-  { label: '收费站', value: '收费站', checked: true },
-  { label: '高速公路', value: '高速公路', checked: true },
-  { label: '国道', value: '国道', checked: true },
-  { label: '省市县际道路', value: '省市县际道路', checked: true },
-  { label: '高速服务区', value: '高速服务区', checked: true }
+  // { label: '检测站', value: '1', checked: true },
+  { label: '收费站', value: '1', checked: true },
+  { label: '高速公路', value: '2', checked: true },
+  { label: '国道', value: '3', checked: true },
+  { label: '省市县际道路', value: '4', checked: true },
+  { label: '乡道', value: '5', checked: true },
+  // { label: '高速服务区', value: '高速服务区', checked: true }
 ]);
 const listData = ref([]);
 
@@ -88,20 +93,13 @@ const handleShowDialog = (row) => {
   });
 };
 const initData = () => {
-  let newQueryParams = deepClone(queryParams);
-  newQueryParams.query = {
-    area: queryParams.area,
-    keyword: queryParams.keyword
-  };
-  delete newQueryParams.area;
-  delete newQueryParams.keyword;
-  getRoadVideoList(newQueryParams).then((res) => {
+  getRoadVideoList(queryParams).then((res) => {
     listData.value = res.rows;
     total.value = res.total;
   });
 };
 const handleCancel = () => {
-  queryParams.keyword = '';
+  queryParams.query.keyword = '';
   initData();
 };
 const handleClick = (item) => {
@@ -112,7 +110,7 @@ const handleClick = (item) => {
       type.push(item.value);
     }
   });
-  queryParams.type = type.toString();
+  queryParams.query.type = type.toString();
   initData();
 };
 initData();
@@ -137,7 +135,7 @@ initData();
 .custom-table {
   width: 1499px;
   .table-content {
-    height: 880px;
+    height: 570px;
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -146,13 +144,13 @@ initData();
     height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     display: flex;
+    padding: 20px;
   }
   .tr {
     height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
-    //margin-left: -23px;
     display: flex;
-    padding-right: 20px;
+    padding: 20px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
     }

+ 2 - 2
src/views/routineCommandMap/RightSection/index.vue

@@ -55,7 +55,7 @@ import VideoMonitor from '@/views/emergencyCommandMap/LeftSection/VideoMonitor.v
 const planManageState = reactive({
   queryParams: {
     pageNum: 1,
-    pageSize: 10
+    pageSize: 4
   },
   listData: [],
   showListDialog: false,
@@ -74,7 +74,7 @@ const showPlanManageDetail = () => {
 const knowledgeBaseState = reactive({
   queryParams: {
     pageNum: 1,
-    pageSize: 5,
+    pageSize: 4,
     sortBy: 'publishDate',
     sortOrder: 'desc'
   },