< script setup>
import { onMounted, h, ref, watch, getCurrentInstance } from 'vue' ;
import { notification, Button } from 'ant-design-vue' ;
onMounted ( ( ) => {
const list = [ { id: '11' , warnLevel: '严重' , ... } , ... ] showMessage ( list) ;
} ) ;
function showMessage ( ) {
for ( const item of list) { const index = shownNotifications. findIndex ( ( key ) => key. id === item. id) ; if ( index === - 1 ) { const btn = ( ) => h ( 'div' , { class : 'notification-btn-wrapper' , } , [ h ( Button, { type: 'primary' , size: 'small' , onClick : ( ) => handleConfirm ( item) , } , { default : ( ) => '确认' } ) , ] ) ; notification. open ( { message: '门架交易数据异常' , description: h ( 'div' , { } , [ h ( 'div' , { class : 'ct-div' } , [ h ( 'div' , [ h ( 'div' , { class : 'label' } , '发生时间' ) , h ( 'div' , { class : 'value' } , item. statisticalDate) ] ) , h ( 'div' , [ h ( 'div' , { class : 'label' } , '预警级别' ) , h ( 'div' , { class : ` value ${ item. warnLevel === '严重' ? 'warnLevel' : '' } ` } , item. warnLevel) ] ) , ] ) , h ( 'div' , { class : 'label' } , '异常描述' ) , h ( 'div' , { class : 'value warnDesc' } , item. warnDesc) ] ) , btn, bottom: '10px' , key: item. id, duration: null , placement: 'bottomRight' , class : 'notification-custom-class' , onClose : ( ) => handleClose ( item) , } ) ; setShownNotifications ( item. id) ; } }
} < / script>
<style lang="less">
.notification-custom-class { padding : 0; box-sizing : border-box; border-radius : 8px;.ant-notification-notice-content { .ant-notification-notice-message { height : 32px; border-bottom : 1px solid #0000000F; display : flex; align-items : center; padding-left : 10px; box-sizing : border-box; margin-bottom : 0; color : #262626; font-family : PingFang SC; font-weight : bold; font-size : 14px; } .ant-notification-notice-description { padding : 5px 10px; box-sizing : border-box; } .label { color : #00000072; font-family : PingFang SC; font-weight : 500; font-size : 12px; line-height : 22px; margin-bottom : 2px; } .value { opacity : 1; color : #262626; font-family : PingFang SC; font-weight : 500; font-size : 12px; line-height : 22px; margin-bottom : 2px;&:last-child { margin-bottom : 0; } } .ct-div { display : flex; align-items : center;> div { flex : 1; margin-right : 10px;&:last-child { margin-right : 0; } } } .warnDesc { height : 60px; overflow-y : auto; } .warnLevel { color : #FF0000; font-weight : bold; } } .ant-notification-notice-btn { height : 32px; width : 100%; display : flex; justify-content : center; align-items : center; opacity : 1; margin-top : 0; border-top : 1px solid #0000000F;.notification-btn-wrapper { width : 100%; display : flex; justify-content : center; align-items : center; } } .ant-notification-notice-close { top : 7px; }
}
</style>
