Merge branch 'dev' into pre-production

src/option/distribution/VehicleStowage.js

@@ -762,3 +762,60 @@ export const orderDetailColumnList = [
     sortable: false,
   },
 ];
+
+/** 异常订单 */
+export const abnormalOrderColumnList = [
+  {
+    prop: 'waybillNo',
+    label: '运单号',
+    width: '130',
+    type: 30,
+    values: '',
+    checkarr: [],
+    fixed: true,
+    sortable: false,
+    head: false,
+  },
+  {
+    prop: 'orderCode',
+    label: '订单号',
+    width: '130',
+    type: 30,
+    values: '',
+    checkarr: [],
+    fixed: true,
+    sortable: false,
+    head: false,
+  },
+  {
+    prop: 'planNum',
+    label: '计划数',
+    width: '130',
+    type: 30,
+    values: '',
+    checkarr: [],
+    fixed: true,
+    sortable: false,
+    head: false,
+  },
+  {
+    prop: 'realNum',
+    label: '装车数',
+    width: '130',
+    type: 30,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: false,
+  },
+  {
+    prop: 'handQuantity',
+    label: '在库数',
+    width: '130',
+    type: 30,
+    values: '',
+    checkarr: [],
+    fixed: false,
+    sortable: false,
+  },
+];

src/utils/print.js

@@ -47,6 +47,13 @@ const print = (nodeList, type = 'deliveryPrint') => {
   // 初始化打印实例
   let LODOP = getLodop();
 
+  // const _count = LODOP.GET_PRINTER_COUNT();
+
+  // for (let index = 0; index < _count; index++) {
+  //   const name = LODOP.GET_PRINTER_NAME(index);
+  //   console.log('name :>> ', name);
+  // }
+
   // 当列表内没有元素时, 退出函数
   if (nodeList.length === 0) return;
 
@@ -68,13 +75,6 @@ const print = (nodeList, type = 'deliveryPrint') => {
 
 const newPrint = nodeName => {
   if (nodeName) return hwyPrintNew(nodeName);
-  // const nodeList = document.querySelectorAll('.el-dialog__body>div>div>div')
-
-  // for (const iterator of nodeList) {
-  //   //$Print(iterator)
-
-  //   console.log(iterator, 'iterator');
-  // }
 
   hwyPrintNew('.el-dialog__body>div>div>div');
 };

src/views/desk/DataBoard.vue

@@ -905,13 +905,13 @@
                 () =>
                   handleDetails('trunklineCarsDataColumn', '干线车次统计 - 在途 - 车', {
                     tip: '在途',
-                    prop: 'inTransitNum',
+                    prop: 'onTheWayNum',
                   })
               "
             >
               <div class="data_box mb10">
                 <div class="data mr5px underline">
-                  {{ details.trunklineCarsDataInfo.inTransitNum || 0 }}
+                  {{ details.trunklineCarsDataInfo.onTheWayNum || 0 }}
                 </div>
                 <div class="">车</div>
               </div>
@@ -926,13 +926,13 @@
                 () =>
                   handleDetails('trunklineCarsDataColumn', '干线车次统计 - 作业 - 车', {
                     tip: '作业',
-                    prop: 'workNum',
+                    prop: 'workingNum',
                   })
               "
             >
               <div class="data_box mb10">
                 <div class="data mr5px underline">
-                  {{ details.trunklineCarsDataInfo.workNum || 0 }}
+                  {{ details.trunklineCarsDataInfo.workingNum || 0 }}
                 </div>
                 <div class="">车</div>
               </div>
@@ -947,13 +947,13 @@
                 () =>
                   handleDetails('trunklineCarsDataColumn', '干线车次统计 - 卸车完成 - 车', {
                     tip: '卸车完成',
-                    prop: 'unloadNum',
+                    prop: 'unloadCompleteNum',
                   })
               "
             >
               <div class="data_box mb10">
                 <div class="data mr5px underline">
-                  {{ details.trunklineCarsDataInfo.unloadNum || 0 }}
+                  {{ details.trunklineCarsDataInfo.unloadCompleteNum || 0 }}
                 </div>
                 <div class="">车</div>
               </div>
@@ -1841,10 +1841,10 @@ const details = reactive({
   },
   /** 干线车次数据 */
   trunklineCarsDataInfo: {
-    inTransitNum: 0,
+    onTheWayNum: 0,
     totalNum: 0,
-    unloadNum: 0,
-    workNum: 0,
+    unloadCompleteNum: 0,
+    workingNum: 0,
   },
   /** 异常卸车数据 */
   unloadAbnormalDataInfo: {
@@ -2136,7 +2136,7 @@ const initTrunklineHandOrderData = async () => {
 /** 请求干线车次数据 */
 const initTrunklineCarsData = async () => {
   const _obj: any = {};
-  const _keyArr = ['inTransitNum', 'totalNum', 'unloadNum', 'workNum'];
+  const _keyArr = ['onTheWayNum', 'totalNum', 'unloadCompleteNum', 'workingNum'];
   for (let i = 0; i < _keyArr.length; i++) {
     const value = _keyArr[i];
 

src/views/distribution/artery/VehicleArrivalManagement.vue

@@ -397,9 +397,9 @@
                   </el-dropdown-item>
 
                   <!-- 配载图片 -->
-                  <!-- <el-dropdown-item>
+                  <el-dropdown-item>
                     <el-text @click="handleShowVehicleImgs(slotProps.scope)"> 配载图片 </el-text>
-                  </el-dropdown-item> -->
+                  </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -462,6 +462,40 @@
           </template>
         </tablecmt>
       </el-dialog>
+
+      <!-- 异常订单详情 -->
+      <el-dialog
+        title="异常订单详情"
+        v-model="details.popUpShow.abnormalOrderVisited"
+        width="80%"
+        :append-to-body="false"
+      >
+        <div class="flex-c-sb mb20">
+          <div class="abnormalTip flex1 mr20">订单计划数与在库数不一致，无法手动装车，请调整</div>
+
+          <el-button type="primary" icon="download" @click="handleExportAbnormal">导出</el-button>
+        </div>
+        <tablecmt
+          ref="abnormalOrderTableNode"
+          :columnList="details.abnormalOption.columnList"
+          :tableData="details.abnormalOption.data"
+          :isInitHeigt="false"
+          style="height: 50vh"
+        >
+          <template #default="slotProps">
+            <el-text
+              @click="
+                () => {
+                  const row = { ...slotProps.scope.row };
+                  row.id = row.loadId;
+                  handleGoWaybill({ row });
+                }
+              "
+              >{{ slotProps.scope.row.carsNo }}</el-text
+            >
+          </template>
+        </tablecmt>
+      </el-dialog>
     </div>
   </basic-container>
 
@@ -664,7 +698,11 @@ import {
   ChecksWhetherTheWarehouseIsSelected,
 } from '@/utils/util';
 import { columnList } from '@/option/distribution/VehicleArrivalManagement';
-import { packageColumnList, orderDetailColumnList } from '@/option/distribution/VehicleStowage';
+import {
+  packageColumnList,
+  orderDetailColumnList,
+  abnormalOrderColumnList,
+} from '@/option/distribution/VehicleStowage';
 import {
   postloadArriveCarsPageList,
   postloadArriveCarByLoadId,
@@ -709,6 +747,7 @@ Mydata.value = JSON.parse(localStorage.getItem('my_data')); //获取本地仓库
 
 const truckLoadingDetailNodeRef = ref();
 const searchOrderTableNode = ref();
+const abnormalOrderTableNode = ref();
 
 const details = reactive({
   /** 是否开启搜索 */
@@ -784,6 +823,8 @@ const details = reactive({
     unloadReport: false,
     /** 订单配载锁定详情 */
     searchOrderVisited: false,
+    /** 异常订单 */
+    abnormalOrderVisited: false,
   },
   /** 全屏 */
   fullscreenObj: {
@@ -841,6 +882,13 @@ const details = reactive({
     columnList: deepClone(orderDetailColumnList),
     searchText: '',
   },
+  /** 异常数据配置 */
+  abnormalOption: {
+    /** 异常订单表头 */
+    columnList: deepClone(abnormalOrderColumnList),
+    /** 异常数据 */
+    data: [],
+  },
 });
 
 const tableNode = ref();
@@ -1638,8 +1686,14 @@ const handleManualLoading = ({ row }) => {
         details.loadingObj.pageLoading = true;
 
         const response = await postManualLoadingloadId({ loadId: row.id });
-        if (response.data.code !== 200) return;
-        ElMessage.success(response.data.msg);
+        const { code, data, msg } = response.data;
+        if (code !== 200) return;
+        ElMessage.success(msg);
+
+        if (getObjType(data) === 'array' && data.length > 0) {
+          details.abnormalOption.data = data;
+          details.popUpShow.abnormalOrderVisited = true;
+        }
         onLoad();
       } catch (error) {
         console.log('error :>> ', error);
@@ -1810,6 +1864,23 @@ const searchOrder = async () => {
     details.loadingObj.searchOrder = false;
   }
 };
+
+/** 异常数据导出 */
+const handleExportAbnormal = () => {
+  const time = new Date().getTime();
+  exportExcelByDom(abnormalOrderTableNode.value.$el, '异常数据' + ' - ' + time + '.xlsx');
+};
+
+/** 配载图片 */
+const handleShowVehicleImgs = ({ row }) => {
+  $router.push({
+    path: '/distribution/artery/VehicleNodeImgs',
+    query: {
+      name: `${row.carsNo} - 节点图片`,
+      loadId: row.id,
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">
@@ -1909,4 +1980,31 @@ const searchOrder = async () => {
     position: absolute;
   }
 }
+
+// 异常提示
+.abnormalTip {
+  $abnormarlColor: #ff5722;
+  $margin: 20px;
+
+  color: $abnormarlColor;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+
+  &::before {
+    content: '';
+    height: 1px;
+    width: 20px;
+    background-color: $abnormarlColor;
+    margin-right: $margin;
+  }
+
+  &::after {
+    content: '';
+    height: 1px;
+    flex: 1;
+    margin-left: $margin;
+    background-color: $abnormarlColor;
+  }
+}
 </style>

src/views/distribution/artery/VehicleNodeImgs.vue

@@ -10,7 +10,7 @@
           :key="item.nodeId"
           :class="{
             VehicleLineNode_item: true,
-            notActive: false,
+            notActive: details.nowWarehoseIndex < index,
             choose: details.activeIndex === index,
           }"
           @click="() => handleCheckNode(item, index)"
@@ -34,74 +34,83 @@
 
       <!-- 图片容器 -->
       <div class="VehicleLineImgs_container">
-        <div class="mb20 align-center">
-          <div class="VehicleLineImgs_container_title">装车前图片</div>
+        <!-- 装车前图片 -->
+        <template v-if="details.activeIndex !== details.loadLineArr.length - 1">
+          <div class="mb20 align-center">
+            <div class="VehicleLineImgs_container_title">装车前图片</div>
 
-          <el-button
-            type="primary"
-            icon="edit"
-            @click="() => handleEdit('beforeLoad', beforeLoadImgArr, '装车前图片')"
+            <el-button
+              type="primary"
+              icon="edit"
+              @click="() => handleEdit('beforeLoad', beforeLoadImgArr, '装车前图片')"
+              v-if="details.myWarehouseId === details.loadLineArr[details.activeIndex]?.nodeId"
+            >
+              编辑
+            </el-button>
+          </div>
+          <div
+            class="VehicleLineImgs_container_list mb20"
+            v-for="(item, index) in beforeLoadImgArr"
+            :key="item.type + '-' + item.position"
           >
-            编辑
-          </el-button>
-        </div>
-        <div
-          class="VehicleLineImgs_container_list mb20"
-          v-for="(item, index) in beforeLoadImgArr"
-          :key="item.type + '-' + item.position"
-        >
-          <div class="title">{{ item.title }}</div>
+            <div class="title">{{ item.title }}</div>
 
-          <div class="item">
-            <el-image
-              v-for="(value, i) in item.imgArr"
-              :key="value.url"
-              style="width: 150px; height: 150px; margin: 5px; border-radius: 5px"
-              :src="value.url"
-              :zoom-rate="1.2"
-              :max-scale="7"
-              :min-scale="0.2"
-              :preview-src-list="item.imgArr.map(val => val.url)"
-              :initial-index="i"
-              fit="cover"
-            />
+            <div class="item">
+              <el-image
+                v-for="(value, i) in item.imgArr"
+                :key="value.url"
+                style="width: 150px; height: 150px; margin: 5px; border-radius: 5px"
+                :src="value.url"
+                :zoom-rate="1.2"
+                :max-scale="7"
+                :min-scale="0.2"
+                :preview-src-list="item.imgArr.map(val => val.url)"
+                :initial-index="i"
+                fit="cover"
+              />
+            </div>
           </div>
-        </div>
+        </template>
 
-        <div class="mb20 align-center">
-          <div class="VehicleLineImgs_container_title">发车前图片</div>
+        <!-- 发车前图片 -->
+        <template v-if="details.activeIndex !== details.loadLineArr.length - 1">
+          <div class="mb20 align-center">
+            <div class="VehicleLineImgs_container_title">发车前图片</div>
 
-          <el-button
-            type="primary"
-            icon="edit"
-            @click="() => handleEdit('boforeStart', boforeStartImgArr, '发车前图片')"
+            <el-button
+              type="primary"
+              icon="edit"
+              @click="() => handleEdit('boforeStart', boforeStartImgArr, '发车前图片')"
+              v-if="details.myWarehouseId === details.loadLineArr[details.activeIndex]?.nodeId"
+            >
+              编辑
+            </el-button>
+          </div>
+          <div
+            class="VehicleLineImgs_container_list mb20"
+            v-for="(item, index) in boforeStartImgArr"
+            :key="item.type + '-' + item.position"
           >
-            编辑
-          </el-button>
-        </div>
-        <div
-          class="VehicleLineImgs_container_list mb20"
-          v-for="(item, index) in boforeStartImgArr"
-          :key="item.type + '-' + item.position"
-        >
-          <div class="title">{{ item.title }}</div>
+            <div class="title">{{ item.title }}</div>
 
-          <div class="item">
-            <el-image
-              v-for="(value, i) in item.imgArr"
-              :key="value.url"
-              style="width: 150px; height: 150px; margin: 5px; border-radius: 5px"
-              :src="value.url"
-              :zoom-rate="1.2"
-              :max-scale="7"
-              :min-scale="0.2"
-              :preview-src-list="item.imgArr.map(val => val.url)"
-              :initial-index="i"
-              fit="cover"
-            />
+            <div class="item">
+              <el-image
+                v-for="(value, i) in item.imgArr"
+                :key="value.url"
+                style="width: 150px; height: 150px; margin: 5px; border-radius: 5px"
+                :src="value.url"
+                :zoom-rate="1.2"
+                :max-scale="7"
+                :min-scale="0.2"
+                :preview-src-list="item.imgArr.map(val => val.url)"
+                :initial-index="i"
+                fit="cover"
+              />
+            </div>
           </div>
-        </div>
+        </template>
 
+        <!-- 卸车前图片 -->
         <template v-if="details.activeIndex !== 0">
           <div class="mb20 align-center">
             <div class="VehicleLineImgs_container_title">卸车前图片</div>
@@ -110,6 +119,7 @@
               type="primary"
               icon="edit"
               @click="() => handleEdit('beforeUnload', beforeUnloadImgArr, '卸车前图片')"
+              v-if="details.myWarehouseId === details.loadLineArr[details.activeIndex]?.nodeId"
             >
               编辑
             </el-button>
@@ -205,7 +215,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
+import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
 /** 获取字典 */
 import { getDictionaryBiz } from '@/api/system/dict';
 import { deepClone, getObjType, ChecksWhetherTheWarehouseIsSelected } from '@/utils/util';
@@ -243,6 +253,7 @@ type ImgArr = {
 type LoadItme = {
   nodeName?: string;
   nodeId?: string;
+  nowWarehouseId?: string;
   /** 装车前图片 */
   beforeLoadImgArr?: ImgArr;
   /** 发车前图片 */
@@ -263,6 +274,7 @@ const details = reactive({
   title: '',
   loadLineArr: [] as LoadItme[],
   activeIndex: 0,
+  nowWarehoseIndex: 0,
   /** 提交类型 */
   editType: 'beforeLoad' as 'beforeLoad' | 'boforeStart' | 'beforeUnload',
   /** 回显数据 */
@@ -288,6 +300,8 @@ const details = reactive({
   headers: {
     'Blade-Auth': 'bearer ' + getToken(),
   },
+  /** 当前用户选择的仓库 */
+  myWarehouseId: '',
 });
 
 // 装车前
@@ -363,6 +377,15 @@ const handleAddImg = (arr, addArr, isHavePosition = true) => {
   }
 };
 
+/** 获取当前用户的仓库id */
+const getWarehouseId = () => {
+  const myData = JSON.parse(localStorage.getItem('my_data') || '') || {};
+
+  details.myWarehouseId = myData.id;
+};
+
+getWarehouseId();
+
 /** 配载图片显示 */
 const initImgList = async () => {
   try {
@@ -373,11 +396,13 @@ const initImgList = async () => {
     details.loadLineArr = [];
     for (let i = 0; i < data.length; i++) {
       const value = data[i];
-      const { loadingObject, startObject, unloadObject, carsLoadLineEntity } = value;
+      const { loadingObject, startObject, unloadObject, carsLoadLineEntity, nowWarehouseId } =
+        value;
 
       const _obj: LoadItme = {
         nodeId: '',
         nodeName: '',
+        nowWarehouseId: '',
         beforeLoadImgArr: [
           {
             title: '车厢卫生',
@@ -468,6 +493,12 @@ const initImgList = async () => {
       if (getObjType(carsLoadLineEntity) === 'object') {
         _obj.nodeName = carsLoadLineEntity.nodeName;
         _obj.nodeId = carsLoadLineEntity.nodeId;
+        _obj.nowWarehouseId = nowWarehouseId;
+
+        if (details.myWarehouseId === _obj.nodeId) {
+          details.nowWarehoseIndex = i;
+          details.activeIndex = i;
+        }
       } else {
         ElMessage.warning('存在异常节点信息');
         return;
@@ -498,9 +529,10 @@ const initImgList = async () => {
   }
 };
 
-initImgList();
+// initImgList();
 
 const handleCheckNode = (item, index) => {
+  if (details.nowWarehoseIndex < index) return;
   details.activeIndex = index;
 };
 
@@ -643,6 +675,8 @@ const handleEditSubmit = async () => {
     details.loadingObj.imgEdit = false;
   }
 };
+
+watch(() => $route.fullPath, initImgList, { immediate: true });
 </script>
 
 <style lang="scss" scoped>
@@ -681,7 +715,7 @@ const handleEditSubmit = async () => {
 
   // 节点
   .VehicleLineNode_item {
-    $transition: all 0.3s;
+    $transition: all 1s;
     $activeColor: #0bc80b;
     $disabled: #808080 !important ;
 
@@ -702,8 +736,9 @@ const handleEditSubmit = async () => {
       }
 
       .VehicleLineNode_item_container {
-        background-color: #fff !important;
+        background-color: #f5f7fa !important;
         cursor: no-drop;
+        border-radius: 0;
       }
     }
 

src/views/distribution/artery/VehicleStowage.vue

@@ -367,9 +367,9 @@
                     </el-dropdown-item>
 
                     <!-- 配载图片 -->
-                    <!-- <el-dropdown-item>
+                    <el-dropdown-item>
                       <el-text @click="handleShowVehicleImgs(slotProps.scope)"> 配载图片 </el-text>
-                    </el-dropdown-item> -->
+                    </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -433,6 +433,40 @@
           </template>
         </tablecmt>
       </el-dialog>
+
+      <!-- 异常订单详情 -->
+      <el-dialog
+        title="异常订单详情"
+        v-model="details.popUpShow.abnormalOrderVisited"
+        width="80%"
+        :append-to-body="false"
+      >
+        <div class="flex-c-sb mb20">
+          <div class="abnormalTip flex1 mr20">订单计划数与在库数不一致，无法手动装车，请调整</div>
+
+          <el-button type="primary" icon="download" @click="handleExportAbnormal">导出</el-button>
+        </div>
+        <tablecmt
+          ref="abnormalOrderTableNode"
+          :columnList="details.abnormalOption.columnList"
+          :tableData="details.abnormalOption.data"
+          :isInitHeigt="false"
+          style="height: 50vh"
+        >
+          <template #default="slotProps">
+            <el-text
+              @click="
+                () => {
+                  const row = { ...slotProps.scope.row };
+                  row.id = row.loadId;
+                  handleGoWaybill({ row });
+                }
+              "
+              >{{ slotProps.scope.row.carsNo }}</el-text
+            >
+          </template>
+        </tablecmt>
+      </el-dialog>
     </div>
   </basic-container>
 
@@ -604,6 +638,7 @@ import {
   columnList,
   packageColumnList,
   orderDetailColumnList,
+  abnormalOrderColumnList,
 } from '@/option/distribution/VehicleStowage';
 import {
   postloadCarsPageList,
@@ -625,6 +660,7 @@ import { useRouter, useRoute } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import print from '@/utils/print';
 import { dateNow } from '@/utils/date';
+import { exportExcelByDom } from '@/utils/export';
 
 const ArteryPrintTemplateV2 = defineAsyncComponent(
   () => import('@/components/ArteryPrintTemplateV2/ArteryPrintTemplateV2.vue')
@@ -646,6 +682,7 @@ console.log('Mydata :>> ', Mydata);
 const tableNodeRef = ref();
 const truckLoadingDetailNodeRef = ref();
 const searchOrderTableNode = ref();
+const abnormalOrderTableNode = ref();
 
 const details = reactive<any>({
   /** 是否开启搜索 */
@@ -719,6 +756,8 @@ const details = reactive<any>({
     listOfLoadedWagons: false,
     /** 订单配载锁定详情 */
     searchOrderVisited: false,
+    /** 异常订单 */
+    abnormalOrderVisited: false,
   },
   /** 列表Dom节点 */
   listNode: '',
@@ -755,6 +794,13 @@ const details = reactive<any>({
     columnList: deepClone(orderDetailColumnList),
     searchText: '',
   },
+  /** 异常数据配置 */
+  abnormalOption: {
+    /** 异常订单表头 */
+    columnList: deepClone(abnormalOrderColumnList),
+    /** 异常数据 */
+    data: [],
+  },
 });
 
 const loadStatus = reactive([
@@ -1480,8 +1526,15 @@ const handleManualLoading = ({ row }) => {
         details.loadingObj.pageLoading = true;
 
         const response = await postManualLoadingloadId({ loadId: row.id });
-        if (response.data.code !== 200) return;
-        ElMessage.success(response.data.msg);
+        const { code, data, msg } = response.data;
+        if (code !== 200) return;
+        ElMessage.success(msg);
+
+        if (getObjType(data) === 'array' && data.length > 0) {
+          details.abnormalOption.data = data;
+          details.popUpShow.abnormalOrderVisited = true;
+        }
+
         initOnload();
       } catch (error) {
         console.log('error :>> ', error);
@@ -1618,6 +1671,7 @@ const searchOrder = async () => {
   }
 };
 
+/** 配载图片 */
 const handleShowVehicleImgs = ({ row }) => {
   $router.push({
     path: '/distribution/artery/VehicleNodeImgs',
@@ -1627,6 +1681,12 @@ const handleShowVehicleImgs = ({ row }) => {
     },
   });
 };
+
+/** 异常数据导出 */
+const handleExportAbnormal = () => {
+  const time = new Date().getTime();
+  exportExcelByDom(abnormalOrderTableNode.value.$el, '异常数据' + ' - ' + time + '.xlsx');
+};
 </script>
 
 <style scoped lang="scss">
@@ -1751,4 +1811,31 @@ const handleShowVehicleImgs = ({ row }) => {
     position: absolute;
   }
 }
+
+// 异常提示
+.abnormalTip {
+  $abnormarlColor: #ff5722;
+  $margin: 20px;
+
+  color: $abnormarlColor;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+
+  &::before {
+    content: '';
+    height: 1px;
+    width: 20px;
+    background-color: $abnormarlColor;
+    margin-right: $margin;
+  }
+
+  &::after {
+    content: '';
+    height: 1px;
+    flex: 1;
+    margin-left: $margin;
+    background-color: $abnormarlColor;
+  }
+}
 </style>

src/views/wel/bulletinboard/bulletinboard.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="el_top">
-    <div>
-      通知总数: <span>{{ announcements.length }}</span>
-    </div>
     <el-button class="el_t_button" @click="toggleAnnouncements">公告栏</el-button>
   </div>
   <transition name="slide">
@@ -15,14 +12,18 @@
           @click="showDetails(item, index)"
         >
           <span v-if="isToday(item.releaseTime)" class="red-dot"></span>
-          <h2><span>标题：</span>{{ item.title }}</h2>
+          <h2>{{ item.title }}</h2>
           <p class="date">时间:{{ item.releaseTime }}</p>
         </div>
 
         <el-empty description="暂无公告通知" v-if="!announcements.length" />
       </div>
+      <div class="footer">
+        <span>消息数: {{ announcements.length }}</span>
+      </div>
     </div>
   </transition>
+
   <el-dialog
     v-model="centerDialogVisible"
     :title="currentAnnouncement.title"
@@ -132,7 +133,7 @@ const toggleAnnouncements = () => {
 /* 顶部栏 */
 .el_top {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 600px;
@@ -145,7 +146,7 @@ const toggleAnnouncements = () => {
   position: relative;
 
   .el_t_button {
-    width: 120px;
+    width: 100%;
     height: 40px;
     background-color: #172e60;
     color: #fff;
@@ -293,4 +294,18 @@ const toggleAnnouncements = () => {
     margin: 0;
   }
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 6px;
+  span {
+    display: flex;
+    border: 1px solid;
+    padding: 4px;
+    font-size: 14px;
+    border-radius: 15px;
+    min-width: 80px;
+    justify-content: center;
+  }
+}
 </style>