广播紧急通知

src/assets/js/common.js

@@ -2772,6 +2772,14 @@ var HttpReq = function(){
           data:data,
         })
       },
+      //紧急通知确认状态
+      ddNoticeReadStatus: function(param){
+        return request({
+          url: '/api/Notice/jinJiNoticeReadStatus',
+          method: 'get',
+          params:param,
+        })
+      },
 
 		},
 

src/views/MLargeScreen/components/smallComponents/DPcomputer17.vue

@@ -12,7 +12,10 @@
               <div>录音回放</div>
             </dt>
             <dd v-for="(item,index) in recentNoticeData" :key="index">
-              <div>{{ item.noticeClass }}</div>
+              <div>
+                <span v-if="item.noticeClass==='紧急通知'" style="cursor: pointer;text-decoration:underline;" @click="openConfirmView(item)">{{item.noticeClass}} <i class="el-icon-search"></i></span>
+                <span v-else>{{ item.noticeClass }}</span>
+              </div>
               <div>{{ item.createTime }}</div>
               <div style="cursor: pointer;text-decoration:underline;"
                    @click="item.noticeClass == '智能调度' ? '' : item.noticeClass == '人工调度' ? '' : selectSituation(item)">
@@ -23,6 +26,40 @@
         </div>
       </div>
     </div>
+    <div class="vonfirm-view-box"  v-if="confirmViewShow">
+      <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">通知确认情况</div>
+     <div class="rolling" style="padding:0;height: 3vh">
+        <div class="table-box">
+          <dl>
+            <dt>
+              <div style="width:10%"></div>
+              <div style="width:60%;text-align:left;padding-left:10px;">车牌号</div>
+              <div style="width:30%;text-align:right;padding-right:30px;">状态</div>
+            </dt>
+          </dl>
+        </div>
+      </div>
+      <div style="padding:0;height: 47vh">
+        <div class="rolling" style="height: 100%">
+          <div class="table-box">
+            <dl>
+              <dd v-for="(item,index) in carList" :key="index">
+                <div style="width:10%"></div>
+                <div style="width:60%;text-align:left;padding-left:10px;">{{item.carNumber}}</div>
+                <div style="width:30%;text-align:right;padding-right:5px;">
+                  <span v-if="item.isRead===0" style="color:#a3a3a3">未确认</span>
+                  <span v-else style="color:mediumseagreen">已确认</span>
+                  <i style="color:lightgray" class="el-icon-s-promotion"></i>
+                </div>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <div class="voiceAppContent_4">
+        <button class="voiceAppContent_4_btns" @click="closeConfirmView()">关闭窗口</button>
+      </div>
+    </div>
     <!-- 播放器 -->
     <audio id="audioIndex" controls currentTime autoplay :src="srcUrl" style="display:none"></audio>
   </div>
@@ -38,12 +75,26 @@ export default {
       DPcomputer17BoxTimer: null,
       recentNoticeData: [], //近期通知列表
       srcUrl: null,
+      confirmViewShow: false,
+      carList: [],
     }
   },
   mounted() {
     this.loadData();
   },
   methods: {
+    openConfirmView(item){
+      this.confirmViewShow = true;
+      this.carList = [];
+      HttpReq.truckDispatching.ddNoticeReadStatus({id:item.id}).then((res) => {
+        if (res.code == 200) {
+          this.carList = res.data||[];
+        }
+      })
+    },
+    closeConfirmView(){
+      this.confirmViewShow = false;
+    },
     loadData() {
       this.srcUrl = null;
       //近期通知列表
@@ -51,7 +102,6 @@ export default {
         if (res.code == 200) {
           this.recentNoticeData = res.data.content;
         }
-        ;
       })
 
       this.DPcomputer17BoxTimer = setInterval(() => {
@@ -60,7 +110,6 @@ export default {
           if (res.code == 200) {
             this.recentNoticeData = res.data.content;
           }
-          ;
         })
       }, 5000)
 
@@ -286,4 +335,41 @@ export default {
   font-size: 15px;
   color: #A6F6F9;
 }
+.DPcomputer17Box .vonfirm-view-box {
+  position: absolute;
+  bottom: 33vh;
+  left: 0.7vw;
+  height: 58vh;
+  width: 18.5vw;
+  z-index: 50;
+  background: no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
+  background-size: 100% 100%;
+  padding: 10px 10px 0px;
+  box-sizing: border-box;
+}
+.DPcomputer17Box .voiceAppContent_4 {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: space-evenly;
+}
+
+.DPcomputer17Box .voiceAppContent_4_btns {
+  background-color: #112251;
+  border: 1px solid #00FCF9;
+  color: #00FFFF;
+  border-radius: 5px;
+  height: 2.5vh;
+  /*margin: 5px 2vw 3px;*/
+  width: 25%;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.DPcomputer17Box .voiceAppContent_4_btns:active {
+  background: linear-gradient(to top, #007EFF, #30CFBE);
+  border: 1px solid #00FCF9;
+  color: white;
+}
 </style>