一图作战右侧

package-lock.json

@@ -44,6 +44,7 @@
         "vue-i18n": "9.10.2",
         "vue-router": "4.3.2",
         "vue-types": "5.1.1",
+        "vue3-print-nb": "^0.1.4",
         "vxe-table": "4.5.22",
         "xlsx": "^0.18.5"
       },
@@ -10836,6 +10837,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/vue3-print-nb": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/vue3-print-nb/-/vue3-print-nb-0.1.4.tgz",
+      "integrity": "sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==",
+      "dependencies": {
+        "vue": "^3.0.5"
+      }
+    },
     "node_modules/vxe-table": {
       "version": "4.5.22",
       "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.5.22.tgz",

package.json

@@ -53,6 +53,7 @@
     "vue-i18n": "9.10.2",
     "vue-router": "4.3.2",
     "vue-types": "5.1.1",
+    "vue3-print-nb": "^0.1.4",
     "vxe-table": "4.5.22",
     "xlsx": "^0.18.5"
   },

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -3,13 +3,14 @@
     <div class="common-title gradient-text">联合值守</div>
     <div class="more-btn" @click="handleShowQrCode">
       <div class="code-icon"></div>
-      签到码
+      <div class="text">签到码</div>
     </div>
     <div class="card-content">
       <div class="custom-table">
         <div class="table-header">
-          <div v-for="(item, index) in tableHeader" :key="index" class="td">{{ item.name }}</div>
-          <div class="td2"></div>
+          <div class="td">值守单位</div>
+          <div class="td">值守人员</div>
+          <div class="td2">联系方式</div>
         </div>
         <div class="table-content">
           <div v-for="(item, index) in listData" :key="index" class="tr">
@@ -17,9 +18,9 @@
             <div class="td">
               <div>{{ item.nick_name }}（{{ item.duties }}）</div>
             </div>
-            <div class="td text">{{ item.phone }}</div>
-            <div class="td2">
+            <div class="td2 text">
               <div class="phone-btn"></div>
+              {{ item.phone }}
             </div>
           </div>
         </div>
@@ -47,20 +48,6 @@ directives: {
   print;
 }
 const route = useRoute();
-const tableHeader = reactive([
-  {
-    name: '值守单位',
-    key: 'dept_name'
-  },
-  {
-    name: '值守人员',
-    key: 'nick_name'
-  },
-  {
-    name: '联系方式',
-    key: 'phone'
-  }
-]);
 const listData = ref([]);
 let eventId = ref('');
 let qrCodeUrl = ref('');
@@ -106,7 +93,6 @@ const handleDownLoad = () => {
 };
 onMounted(() => {
   eventId.value = route.query.event_id as string;
-  /*
   listData.value = [
     {
       dept_name: '市应急局',
@@ -145,19 +131,19 @@ onMounted(() => {
       duties: '职务'
     }
   ];
-  */
-  getCheckinList(eventId.value).then((res) => {
-    listData.value = res.data;
-  });
+  // getCheckinList(eventId.value).then((res) => {
+  //   listData.value = res.data;
+  // });
   qrCodeUrl.value = import.meta.env.VITE_APP_BASE_API2 + 'api/event_management/checkin/qrcode?event_id=' + eventId.value;
 });
 </script>
 
 <style lang="scss" scoped>
 .duty-card {
-  width: 1965px;
-  height: 549px;
+  width: 529px;
+  height: 223px;
   background: url('@/assets/images/emergencyCommandMap/duty/dutyBg.png') no-repeat;
+  background-size: 100% 100%;
   position: relative;
   color: #fff;
   animation-name: slideRight;
@@ -165,9 +151,8 @@ onMounted(() => {
   .card-content {
     display: flex;
     flex-wrap: wrap;
-    padding-top: 100px;
-    padding-left: 140px;
-    width: 2500px;
+    padding-top: 47px;
+    height: 223px;
   }
 }
 .search-box {
@@ -178,72 +163,80 @@ onMounted(() => {
 }
 .more-btn {
   position: absolute;
-  top: 35px;
-  right: 160px;
+  top: 14px;
+  right: 52px;
   color: #eaf3fc;
-  font-size: 38px;
+  font-size: 14px;
   cursor: pointer;
   z-index: 2;
   display: flex;
   align-items: center;
+  .text {
+    margin-top: -3px;
+  }
   .code-icon {
-    width: 80px;
-    height: 80px;
+    width: 35px;
+    height: 35px;
     background: url('@/assets/images/emergencyCommandMap/duty/code.png') no-repeat;
-    margin-top: 10px;
+    background-size: 100% 100%;
   }
 }
 .custom-table {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 10px;
   .table-header {
     display: flex;
-    width: 1772px;
-    height: 54px;
+    width: 520px;
+    height: 21px;
     background: url('@/assets/images/emergencyCommandMap/duty/header.png') no-repeat;
-    font-size: 38px;
-    padding: 0 50px;
+    background-size: 100% 100%;
+    font-size: 16px;
+    padding: 0 13px;
     .td {
       flex: 1;
     }
     .td2 {
-      width: 100px;
+      width: 155px;
       text-align: center;
     }
   }
   .table-content {
-    height: 350px;
+    height: 130px;
     overflow-y: auto;
     .tr {
       display: flex;
-      align-items: flex-end;
-      width: 1791px;
-      height: 70px;
-      margin-left: -17px;
-      padding-left: 17px;
-      background: url('@/assets/images/emergencyCommandMap/duty/tr.png') no-repeat;
-      background-size: 100% 100%;
-      font-size: 38px;
-      margin-top: 30px;
-      padding: 0 50px;
+      align-items: center;
+      width: 520px;
+      height: 21px;
+      background-color: rgba(44, 129, 255, 0.1);
+      //background: url('@/assets/images/emergencyCommandMap/duty/tr.png') no-repeat;
+      //background-size: 100% 100%;
+      font-size: 14px;
+      margin-top: 12px;
+      padding: 0 15px;
     }
     .td {
       flex: 1;
     }
     .td2 {
-      width: 100px;
+      width: 155px;
       text-align: center;
+      position: relative;
+      .phone-btn {
+        position: absolute;
+        top: -12px;
+        left: 0;
+        cursor: pointer;
+        width: 49px;
+        height: 49px;
+        background: url('@/assets/images/emergencyCommandMap/duty/phone.png') no-repeat;
+        background-size: 100% 100%;
+      }
     }
     .text {
       color: #08d9ff;
       font-family: 'BEBAS-1';
     }
-    .phone-btn {
-      cursor: pointer;
-      width: 69px;
-      height: 69px;
-      background: url('@/assets/images/emergencyCommandMap/duty/phone.png') no-repeat;
-    }
   }
 }
 </style>

src/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue

@@ -36,20 +36,21 @@ const dataList = ref([
 
 <style lang="scss" scoped>
 .supervision-container {
-  width: 1966px;
-  height: 494px;
+  width: 529px;
+  height: 248px;
   background: url('@/assets/images/emergencyCommandMap/supervision/supervisionBg.png') no-repeat;
   position: relative;
   color: #fff;
-  padding-top: 120px;
+  padding-top: 47px;
+  padding-left: 10px;
   animation-name: slideRight;
   animation-duration: 1.5s;
   .content {
-    height: 280px;
+    height: 190px;
     overflow-y: auto;
-    padding-left: 125px;
+    padding-left: 68px;
     .item {
-      font-size: 32px;
+      font-size: 12px;
       position: relative;
       margin-top: 20px;
       &:first-child {
@@ -58,7 +59,7 @@ const dataList = ref([
       .title-box {
         width: 100%;
         .title2 {
-          font-size: 44px;
+          font-size: 16px;
           /* 设置字体透明 */
           color: transparent;
           /* 设置线性渐变，从红色渐变到蓝色 */
@@ -75,50 +76,50 @@ const dataList = ref([
       .icon1,
       .icon2 {
         position: absolute;
-        top: 47px;
-        left: -110px;
+        top: 15px;
+        left: -50px;
       }
       .icon1 {
-        width: 107px;
-        height: 113px;
+        width: 47px;
+        height: 47px;
         background: url('@/assets/images/emergencyCommandMap/supervision/icon1.png') no-repeat;
       }
       .icon2 {
-        width: 107px;
-        height: 113px;
+        width: 46px;
+        height: 47px;
         background: url('@/assets/images/emergencyCommandMap/supervision/icon2.png') no-repeat;
       }
       .text-box {
-        width: 1762px;
-        height: 115px;
         background: url('@/assets/images/emergencyCommandMap/supervision/box.png') no-repeat;
+        background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 0 80px;
+        padding: 5px 20px;
         position: relative;
         .text1 {
           flex: 1;
           color: #fff;
-          font-size: 38px;
+          font-size: 14px;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
         }
         .text2 {
-          width: 167px;
-          margin-left: 40px;
+          white-space: nowrap;
+          margin-left: 30px;
           font-family: BEBAS-1;
           color: #00e8ff;
         }
         .icon3 {
           position: absolute;
-          top: 13px;
-          left: 40px;
-          width: 33px;
-          height: 50px;
+          top: 6px;
+          left: 4px;
+          width: 12px;
+          height: 18px;
           background: url('@/assets/images/emergencyCommandMap/supervision/right.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
     }

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -7,11 +7,13 @@
           <div class="header-left">
             <div class="box-title">{{ item.unit_name ? item.unit_name : '茂名市应急局' }}</div>
             <div class="time">{{ item.update_time }}</div>
+          </div>
+          <div class="header-right">
             <div :class="item.processing_status === '已完成' ? 'success-bg' : item.processing_status === '已完成' ? 'primary-bg' : 'processing-bg'">
               {{ item.processing_status }}
             </div>
+            <div class="btn" @click="openUpdateDialog(item)">更新</div>
           </div>
-          <div class="btn" @click="openUpdateDialog(item)">更新</div>
         </div>
         <div class="box-content">{{ item.task_description }}</div>
       </div>
@@ -144,7 +146,7 @@ watch(
 <style lang="scss" scoped>
 .table-content {
   width: 100%;
-  height: 550px;
+  height: 290px;
   overflow-y: auto;
   &.show-scroll {
     overflow-y: auto;
@@ -155,13 +157,14 @@ watch(
     align-items: center;
   }
   .box2 {
-    flex: 1;
+    width: 510px;
+    min-height: 85px;
     background-image: url('@/assets/images/taskTracking/box1.png');
     background-repeat: no-repeat;
-    background-size: 1642px 377px;
+    background-size: 100% 100%;
     background-position: bottom left;
-    padding: 20px 20px 20px 60px;
-    margin-top: 20px;
+    padding: 10px 10px 10px 20px;
+    margin-top: 15px;
     position: relative;
     &:first-child {
       margin-top: 0;
@@ -170,63 +173,74 @@ watch(
   .box-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     .header-left {
       display: flex;
       align-items: center;
       .box-title {
-        font-size: 44px;
+        font-size: 16px;
         font-family: YouSheBiaoTiHei;
         color: #ffffff;
         background-image: url('@/assets/images/taskTracking/titleBox.png');
         background-repeat: no-repeat;
-        background-size: 311px 56px;
+        background-size: 102px 18px;
         background-position: bottom left;
-        padding-left: 50px;
+        padding-left: 20px;
       }
       .time {
-        font-size: 32px;
+        font-size: 12px;
         color: #00e8ff;
-        margin-left: 70px;
+        margin-left: 10px;
       }
     }
+    .header-right {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
     .success-bg,
     .processing-bg,
     .btn {
-      width: 154px;
-      height: 56px;
-      line-height: 56px;
-      font-size: 32px;
+      white-space: nowrap;
+      padding: 3px 7px;
+      font-size: 12px;
       color: #ffffff;
-      border-radius: 10px;
+      border-radius: 11px;
       text-align: center;
       margin-left: 30px;
     }
     .btn {
+      padding: 0 7px;
+      height: 19px;
+      line-height: 19px;
       background-color: #247dff;
       cursor: pointer;
     }
   }
   .box-content {
     color: #fff;
-    font-size: 38px;
-    line-height: 98px;
+    font-size: 14px;
+    line-height: 20px;
   }
   .success-icon {
-    margin-right: -50px;
+    margin-right: -15px;
     margin-top: 15px;
     z-index: 1;
-    width: 123px;
-    height: 79px;
+    width: 40px;
+    min-width: 40px;
+    height: 26px;
     background: url('@/assets/images/taskTracking/success.png') no-repeat;
+    background-size: 100% 100%;
   }
   .processing-icon {
-    margin-right: -50px;
+    margin-right: -15px;
     margin-top: 15px;
     z-index: 1;
-    width: 123px;
-    min-width: 123px;
-    height: 79px;
+    width: 41px;
+    min-width: 41px;
+    height: 30px;
     background: url('@/assets/images/taskTracking/processing.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .more {

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -126,7 +126,7 @@ watch(
   display: flex;
   justify-content: flex-start; /* 选项卡靠左对齐 */
   padding: 0;
-  margin-left: 10px;
+  margin-left: 20px;
   margin-top: 47px;
   .active {
     background: url('@/assets/images/emergencyCommandMap/tabActive.png') no-repeat;
@@ -135,7 +135,7 @@ watch(
 
   li {
     cursor: pointer;
-    padding: 10px;
+    padding: 0 8px 5px;
     font-size: 16px;
     color: #fff;
     width: 114px;
@@ -158,7 +158,7 @@ watch(
   width: 100%;
 
   .table-content {
-    height: 550px;
+    height: 290px;
     overflow-y: auto;
 
     .box1 {
@@ -249,7 +249,7 @@ watch(
         .box-content {
           color: #fff;
           width: 100%;
-          font-size: 38px;
+          font-size: 14px;
           line-height: 1.5;
           margin-top: 10px;
         }
@@ -270,7 +270,7 @@ watch(
   .card-content {
     display: flex;
     flex-wrap: wrap;
-    padding: 0 0 0 80px;
+    padding: 0 0 0 20px;
     width: 100%;
   }
 }
@@ -280,11 +280,11 @@ watch(
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 16px;
   color: #fff;
 }
 .tip {
-  font-size: 44px;
+  font-size: 16px;
   text-align: center;
 }
 </style>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -33,8 +33,8 @@
       </div>
     </div>
     <RightTop :event-id="eventId" />
-<!--    <PublicOpinionSupervision />-->
-<!--    <JointDuty />-->
+    <PublicOpinionSupervision />
+    <JointDuty />
     <StartPlan v-if="startPlanState.show" v-model:show="startPlanState.show" :title="startPlanState.title" :event-id="startPlanState.eventId" />
     <SelectPlan v-model="selectPlanState.show" :title="selectPlanState.title" :temp-event-id="eventId" @update-plan="updatePlan" />
     <RenWuDengJi v-if="renWuDengJiState.show" v-model:show="renWuDengJiState.show" :event-id="eventId" />
@@ -168,7 +168,7 @@ const updatePlan = (data: { eventId: string }) => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  font-size: 36px;
+  font-size: 14px;
   padding-top: 57px;
   padding-bottom: 150px;
   margin-left: 65px;