reactor:综合概览-通知公告详情弹窗+无数据显示

src/views/announce-detail-popup/index.vue

@@ -5,29 +5,35 @@
       <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="visible = false" />
     </div>
     <div class="announce-detail-popup-content">
-        <div class="title">{{ detail.announcementName }}</div>
-        <div class="time">{{ detail.createTime }}</div>
-        <div class="content">{{ detail.announcementContent }}</div>
-        <img :src="detai.images"/>
+      <div class="title">{{ detail.announcementName }}</div>
+      <div class="time">{{ formatDate(detail.createTime) }}</div>
+      <div class="content">{{ detail.announcementContent }}</div>
+      <img :src="detail.images" />
     </div>
   </div>
 </template>
 
 <script>
+import moment from 'moment'
 export default {
   name: 'AnnounceDetailPopup',
   data() {
     return {
       visible: false,
-      detail:{}
+      detail: {}
     }
   },
   mounted() {
     this.$globalEventBus.$on('clickAnnouncePopup', (data) => {
       this.visible = true
-      this.detail = data
+      this.detail = data.list
     })
   },
+  methods:{
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    }
+  },
   destroyed() {
     this.$globalEventBus.$off('clickAnnouncePopup')
   }
@@ -40,7 +46,7 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -80%);
-  width: px-to-rem(600);
+  width: px-to-rem(455);
   z-index: 9999;
   .announce-detail-popup-title {
     background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
@@ -58,7 +64,32 @@ export default {
     }
   }
   .announce-detail-popup-content {
-
+    background: rgba(35, 61, 108, 0.8);
+    padding: px-to-rem(18);
+    .title {
+      font-weight: bold;
+      font-size: px-to-rem(16);
+      color: #ffffff;
+      text-align: center;
+      padding: 0 px-to-rem(0) px-to-rem(9) px-to-rem(0);
+    }
+    .time {
+      text-align: right;
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      margin-bottom: px-to-rem(11);
+    }
+    .content {
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+    }
+    img {
+      width: px-to-rem(416);
+      height: px-to-rem(221);
+      margin-top: px-to-rem(11);
+    }
   }
 }
 </style>

src/views/announcement-management/index.vue

@@ -90,7 +90,7 @@
         <el-form-item label="公告内容" prop="announcementContent">
           <el-input type="textarea" :rows="7" v-model="form.announcementContent"> </el-input>
         </el-form-item>
-        <el-form-item label="上传图片" required>
+        <el-form-item label="上传图片" prop="images">
           <el-upload
             class="avatar-uploader"
             action="/api/announcement/uploadImage"
@@ -141,6 +141,14 @@ import moment from 'moment'
 import { getAnnouncementList, toPublish, toTakeDown, toDelete, toAddAnnouncement, toUpdateAnnouncement } from '@/api/announcementApi'
 export default {
   data() {
+    const valiIcon = (rule, value, callback) => {
+      // 图片验证
+      if (this.fileList.length == 0) {
+        callback(new Error('请上传图片'))
+      } else {
+        callback()
+      }
+    }
     return {
       objClass: {
         upLoadShow: true,
@@ -188,7 +196,8 @@ export default {
         announcementName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
         announcementContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
         address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
-        createrName: [{ required: true, message: '请输入创建人', trigger: 'blur' }]
+        createrName: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
+        images: [{ required: true, validator: valiIcon, trigger: 'change' }]
       },
       announcementId: ''
     }
@@ -197,7 +206,8 @@ export default {
     this.fetchData()
   },
   methods: {
-    handlePicChange() {
+    handlePicChange(file,fileList) {
+      this.fileList = fileList
       this.objClass.upLoadHide = true
       this.objClass.upLoadShow = false
     },
@@ -243,10 +253,11 @@ export default {
     },
     handleEdit(row) {
       this.form = JSON.parse(JSON.stringify(row))
-      console.info(row)
+      this.objClass.upLoadHide = true
+      this.objClass.upLoadShow = false
+      this.fileList = [{url:row.images}]
       const obj = this.statusOptions.find((item) => item.label == row.announcementStatus)
       this.form.announcementStatus = obj ? obj.value : 2
-      console.info(this.form)
       this.title = '编辑公告'
       this.titleType = 'edit'
       this.addDialogVisible = true

src/views/comprehensive-overview/left.vue

@@ -4,21 +4,29 @@
       <div class="left">
         <BaseMain title="通知公告">
           <template v-slot:mainArea>
-            <div class="main-container">
-              <div class="img-txt" v-if="noticeList.length > 0">
-                <el-image class="img" :src="noticeList[0].url"></el-image>
-                <div class="txt">{{ noticeList[0].txt }}</div>
+            <div class="main-container h380">
+              <template v-if="noticeList.length > 0">
+              <div class="img-txt" v-if="noticeList.length > 0" @click="toSee(noticeList[0])">
+                <el-image class="img" :src="noticeList[0].images"></el-image>
+                <div class="txt">{{ noticeList[0].announcementName }}</div>
               </div>
               <div class="list" v-for="item in noticeDataList" :key="item.id">
                 <div class="left">
-                  <el-image :src="item.url" class="img"></el-image>
+                  <el-image :src="item.images" class="img"></el-image>
                 </div>
                 <div class="right">
-                  <div class="title">{{ item.txt }}</div>
-                  <div class="date">{{ item.date }}</div>
-                  <div class="detailBtn">详情</div>
+                  <div class="title">{{ item.announcementName }}</div>
+                  <div class="date">{{ formatDate(item.createTime) }}</div>
+                  <div class="detailBtn" @click="toSee(item)">详情</div>
                 </div>
               </div>
+               </template>
+               <template v-else>
+                <div class="noData">
+                  <img src="@/assets/image/comprehensive/noData.png" alt="">
+                  <div class="txt">暂无公告信息</div>
+                </div>
+               </template>
             </div>
           </template>
         </BaseMain>
@@ -66,23 +74,6 @@
                   <span class="value blue">538.85 <span>km²</span></span>
                 </div>
               </div>
-              <!-- <div class="table-card" v-for="item in tableInfo" :key="item.id">
-                <div class="title">{{ item.title }}</div>
-                <div class="base-info-card">
-                  <div class="base-info-item">
-                    <span>堤防长度</span>
-                    <span class="value">{{ item.len }} <span>km</span></span>
-                  </div>
-                  <div class="base-info-item pl20">
-                    <span>防洪标准</span>
-                    <span class="value">{{ item.year }} <span>年一遇</span></span>
-                  </div>
-                  <div class="base-info-item pl20">
-                    <span>设计流量</span>
-                    <span class="value">{{ item.sl }} <span>m³/人</span></span>
-                  </div>
-                </div>
-              </div> -->
               <div class="title-area borderT">
                 <div class="left">渭河生态区兴平段</div>
                 <div class="right">河道长度：30.6km</div>
@@ -123,10 +114,10 @@
 </template>
 
 <script>
+import moment from 'moment'
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseMain from '@/components/base-main/base-main.vue'
-import noticeUrl from '@/assets/image/comprehensive/bg1.png'
-import iUrl from '@/assets/image/comprehensive/bg2.png'
+import {getAnnouncementList} from '@/api/announcementApi'
 export default {
   components: {
     BaseMain,
@@ -134,26 +125,7 @@ export default {
   },
   data() {
     return {
-      noticeList: [
-        {
-          id: 1,
-          url: noticeUrl,
-          txt: '朝元阁峻临秦岭，羯鼓楼高俯渭河',
-          date: '2025-05-04 10:00:00'
-        },
-        {
-          id: 2,
-          url: iUrl,
-          txt: '离亭当日唱离歌，只为柔条傍渭河',
-          date: '2025-05-04 10:00:00'
-        },
-        {
-          id: 3,
-          url: iUrl,
-          txt: '离亭当日唱离歌，只为柔条傍渭河',
-          date: '2025-05-04 10:00:00'
-        }
-      ],
+      noticeList: [],
       noticeDataList: [],
       tableInfo: [
         {
@@ -173,11 +145,25 @@ export default {
       ]
     }
   },
-  created() {
-    this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
-    console.info(this.noticeDataList)
+  mounted(){
+    this.fetchData()
   },
-  methods: {}
+  methods: {
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    },
+     fetchData() {
+      getAnnouncementList({ announcementStatus: '1',pageNum: 1,
+        pageSize: 3}).then((res) => {
+        this.noticeList = res.data.records
+        this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
+      })
+    },
+    toSee(data){
+      console.info(data)
+      this.$globalEventBus.$emit('clickAnnouncePopup',{list:data})
+    }
+  }
 }
 </script>
 
@@ -187,8 +173,24 @@ export default {
   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
+  .h380{
+    height: px-to-rem(419);
+  }
   .main-container {
     padding: px-to-rem(10);
+    .noData{
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      img{
+        margin-top: px-to-rem(70);
+        margin-bottom: px-to-rem(20);
+      }
+      .txt{
+        color: #fff;
+        font-size: px-to-rem(14);
+      }
+    }
     .title-area {
       display: flex;
       justify-content: space-between;
@@ -261,10 +263,10 @@ export default {
         .detailBtn {
           width: px-to-rem(48);
           height: px-to-rem(24);
-          line-height: px-to-rem(24);
+          line-height: px-to-rem(25);
           background: linear-gradient(0deg, #468adb 0%, #366dae 100%);
           border-radius: px-to-rem(4);
-          border: px-to-rem(1) solid;
+          border: px-to-rem(1) solid transparent;
           font-weight: 400;
           font-size: px-to-rem(14);
           color: #ffffff;

src/views/index.vue

@@ -21,6 +21,7 @@
           <WaterStationPopup />
           <VideoPlay/>
           <PlanDialog/>
+          <AnnounceDetailPopup/>
         </div>
       </el-main>
     </el-container>
@@ -41,6 +42,7 @@ import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
 import PlanDialog from './components/layerList/planDialog.vue'
 import VideoPlay from './video-play-popup/index.vue'
+import AnnounceDetailPopup from './announce-detail-popup/index.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -57,7 +59,8 @@ export default {
     AddInspectionTask,
     SmartEarlyWarning,
     PlanDialog,
-    VideoPlay
+    VideoPlay,
+    AnnounceDetailPopup
   },
   data() {
     return {