优化 websocket 消息

src/App.vue

@@ -10,6 +10,10 @@
 import {defineComponent} from 'vue'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
 import {useStore} from 'vuex'
+import store from "@/store";
+import {setCallback} from "@/utils/websocket";
+import {ElMessageBox, ElNotification} from "element-plus";
+import sleep from "@/utils/sleep";
 
 export default defineComponent({
   name: 'App',
@@ -27,6 +31,37 @@ export default defineComponent({
       store.commit('app/setWindowSize', getWindowSize())
     }
 
+    onMounted(() => {
+
+      setCallback('refreshToken', (data) => {
+        store.commit('user/tokenChange', data.token)
+      })
+
+
+      setCallback('sidSingle', async () => {
+        await store.dispatch('user/loginOut')
+        await ElMessageBox.alert('您的账号已在其他地方登陆，如需修改密码请在个人中心中修改。', '提示', {
+          type: 'warning',
+        })
+      })
+
+      setCallback('systemNotification', async (data) => {
+        if (data.count) {
+          let newCount = store.state.app.unreadMessageCount + data.count
+          store.commit('app/setUnreadMessageCount', newCount)
+        }
+
+        ElNotification({
+          title: typeof data.title === 'undefined' ? '新消息' : data.title,
+          message: data.message,
+          dangerouslyUseHTMLString: true,
+          type: typeof data.type === 'undefined' ? 'warning' : data.type,
+          duration: 0,
+        })
+
+      })
+    })
+
     return {
       locale,
     }

src/components/progress/Index.vue

@@ -21,7 +21,7 @@
             </ul>
           </el-tab-pane>
           <el-tab-pane label="结果" name="结果" v-if="jdt.closeButton">
-            <el-result icon="SuccessFilled" :title="jdt.title" :sub-title="tips">
+            <el-result icon="success" :title="jdt.title" :sub-title="tips">
               <template #extra>
                 <el-button @click="closeModal" type="warning" icon="Close" index="small"> 关闭</el-button>
                 <el-button @click="exportExcel" type="primary" icon="Download" index="small"> 导出Excel</el-button>
@@ -42,11 +42,15 @@ import {Export} from '@/utils/ExportExcel'
 import {makePercentage} from './progUtils'
 import {stringNotBlank} from '@/utils/blank-utils'
 import {reactive, watch} from 'vue'
+import store from "@/store";
+import Cookies from "js-cookie";
+import {endLoading} from "@/utils/loading";
 
 export default {
   setup() {
     const store = useStore()
     const jdt = computed(() => {
+      console.log(store.state.app.jdt, '监听')
       return store.state.app.jdt
     })
     const cptUpldRsTxt = computed(() => {
@@ -82,6 +86,13 @@ export default {
     const tabName = ref('上传')
 
     const socketCallback = (data) => {
+
+      store.commit('app/setJdt', {
+        title: Cookies.get('jdtTitle'),
+        isOpen: true,
+        closeButton: false,
+      })
+      endLoading()
       total.value = data.total
       index.value = data.index
       percentage.value = makePercentage(data.index, data.total)
@@ -198,7 +209,7 @@ export default {
     )
 
     onMounted(() => {
-      setCallback(socketCallback)
+      setCallback('jdtMessage', socketCallback)
     })
 
     return {

src/utils/request.js

@@ -97,13 +97,13 @@ service.interceptors.response.use(
     },
     (error) => {
         endLoading()
-        store.commit('app/closeButton', true)
         ElMessage({
             message: error,
             type: 'error',
             duration: 2500,
             showClose: true,
         })
+        store.commit('app/setJdt', {title: '', isOpen: false, closeButton: true})
         return Promise.reject(error)
     }
 )

src/utils/websocket.js

@@ -1,124 +1,140 @@
-import { ElMessageBox, ElNotification } from 'element-plus'
+import {ElMessageBox, ElNotification} from 'element-plus'
 import Cookies from 'js-cookie'
 import router from '@/router'
 import store from '@/store'
-import { endLoading } from './loading'
+import {endLoading} from './loading'
 
 const socketUrl = import.meta.env.VITE_SOCKET_URL
 
 let webSocket = null
-let globalCallback = null
+let globalCallback = new Map()
 
 export function closeWebSocket() {
-  store.commit('user/closeSid')
-  if (webSocket !== null) {
-    webSocket.close()
-    webSocket = null
-  }
-}
-
-export function setCallback(callback) {
-  if (callback !== null) {
-    globalCallback = callback
-    console.log('global callback settled.')
-  }
+    store.commit('user/closeSid')
+    if (webSocket !== null) {
+        webSocket.close()
+        webSocket = null
+    }
 }
 
-export function initWebSocket(sid, force) {
-  if ('WebSocket' in window) {
-    if (webSocket === null || force) {
-      const url = socketUrl + sid
-      webSocket = new WebSocket(url)
+export function setCallback(messageName, callback) {
+    if (globalCallback.has(messageName)) {
+        globalCallback.get(messageName).push(callback)
+    } else {
+        globalCallback.set(messageName, [callback])
     }
-  } else {
-    alert('该浏览器不支持websocket!')
-    webSocket = 'unsupport'
-  }
+    console.log(`websocket 监听通道 ${messageName},已监听 ${globalCallback.get(messageName).length} 个`)
+}
 
-  webSocket.onopen = function () {
-    console.log('WebSocket连接成功')
-  }
 
-  webSocket.onmessage = function (e) {
-    let data = JSON.parse(e.data)
-    if (data.name === 'refreshToken') {
-      store.commit('user/tokenChange', data.token)
-    } else if (data.name === 'systemNotification') {
-      if (data.count) {
-        let newCount = store.state.app.unreadMessageCount + data.count
-        store.commit('app/setUnreadMessageCount', newCount)
-      }
+function sendAMessage(name, data) {
+    if (globalCallback.has(name)) {
+        globalCallback.get(name).forEach(item => {
+            item(data)
+        })
+    }
+}
 
-      ElNotification({
-        title: typeof data.title === 'undefined' ? '新消息' : data.title,
-        message: data.message,
-        dangerouslyUseHTMLString: true,
-        type: typeof data.type === 'undefined' ? 'warning' : data.type,
-        duration: 0,
-      })
-      if (data.refreshDelay) {
-        setTimeout(() => {
-          location.reload()
-        }, data.refreshDelay)
-      }
-      if (null !== globalCallback) {
-        globalCallback(data)
-      }
-    } else if (data.name === 'jdtMessage') {
-      if (null != globalCallback) {
-        if (!store.state.app.jdt.isOpen) {
-          store.commit('app/setJdt', {
-            title: Cookies.get('jdtTitle'),
-            isOpen: true,
-            closeButton: false,
-          })
+export function initWebSocket(sid, force) {
+    if ('WebSocket' in window) {
+        if (webSocket === null || force) {
+            const url = socketUrl + sid
+            webSocket = new WebSocket(url)
         }
-        endLoading()
-        globalCallback(data)
-      }
-    } else if (data.name === 'sidSingle') {
-      store.dispatch('user/loginOut')
-      ElMessageBox.alert('您的账号已在其他地方登陆，如需修改密码请在个人中心中修改。', '提示', {
-        type: 'warning',
-      })
-        .then(() => {})
-        .catch(() => {})
     } else {
-      if (null !== globalCallback) {
-        globalCallback(data)
-      }
+        alert('该浏览器不支持websocket!')
+        webSocket = 'unsupport'
     }
-  }
 
-  webSocket.onclose = function () {
-    webSocket = null
-    let sid
-    if (router.currentRoute.value.path === '/triageRoomScreen') {
-      sid = Cookies.get('room-screen-sid')
-    } else {
-      sid = store.state.user.sid
+    webSocket.onopen = function () {
+        console.log('WebSocket连接成功')
     }
-    if (!sid) {
-      if (router.currentRoute.value.path === '/login') {
+
+
+    webSocket.onmessage = function (e) {
+        let data = JSON.parse(e.data)
+        sendAMessage(data.name, data.data)
         return
-      }
-      ElMessageBox.confirm('未检测到WebSocket连接的sid，请重新登录。', '提示', {
-        showCancelButton: false,
-        type: 'warning',
-      }).then(() => {
-        router.push('/login')
-      })
-    } else {
-      if (router.currentRoute.value.path === '/triageFloorScreen') {
-        sid += '-triageFloorScreen'
-      }
-      setTimeout(() => {
-        initWebSocket(sid)
-      }, 3000)
+        if (data.name === 'refreshToken') {
+            store.commit('user/tokenChange', data.token)
+        } else if (data.name === 'systemNotification') {
+            if (data.count) {
+                let newCount = store.state.app.unreadMessageCount + data.count
+                store.commit('app/setUnreadMessageCount', newCount)
+            }
+
+            ElNotification({
+                title: typeof data.title === 'undefined' ? '新消息' : data.title,
+                message: data.message,
+                dangerouslyUseHTMLString: true,
+                type: typeof data.type === 'undefined' ? 'warning' : data.type,
+                duration: 0,
+            })
+            if (data.refreshDelay) {
+                setTimeout(() => {
+                    location.reload()
+                }, data.refreshDelay)
+            }
+            if (null !== globalCallback) {
+                globalCallback(data)
+            }
+        } else if (data.name === 'jdtMessage') {
+            if (null != globalCallback) {
+                if (!store.state.app.jdt.isOpen) {
+                    store.commit('app/setJdt', {
+                        title: Cookies.get('jdtTitle'),
+                        isOpen: true,
+                        closeButton: false,
+                    })
+                }
+                endLoading()
+                globalCallback(data)
+            }
+        } else if (data.name === 'sidSingle') {
+            store.dispatch('user/loginOut')
+            ElMessageBox.alert('您的账号已在其他地方登陆，如需修改密码请在个人中心中修改。', '提示', {
+                type: 'warning',
+            })
+                .then(() => {
+                })
+                .catch(() => {
+                })
+        } else {
+            if (null !== globalCallback) {
+                globalCallback(data)
+            }
+        }
     }
-  }
 
-  webSocket.onerror = function () {
-    console.error('WebSocket连接发生错误')
-  }
+    webSocket.onclose = function () {
+        webSocket = null
+        let sid
+        if (router.currentRoute.value.path === '/triageRoomScreen') {
+            sid = Cookies.get('room-screen-sid')
+        } else {
+            sid = store.state.user.sid
+        }
+        if (!sid) {
+            if (router.currentRoute.value.path === '/login') {
+                return
+            }
+            ElMessageBox.confirm('未检测到WebSocket连接的sid，请重新登录。', '提示', {
+                showCancelButton: false,
+                type: 'warning',
+            }).then(() => {
+                router.push('/login')
+            })
+        } else {
+            if (router.currentRoute.value.path === '/triageFloorScreen') {
+                sid += '-triageFloorScreen'
+            }
+            setTimeout(() => {
+                initWebSocket(sid)
+            }, 3000)
+        }
+    }
+
+    webSocket.onerror = function () {
+        console.error('WebSocket连接发生错误')
+    }
 }

src/views/medical-insurance/allpatient/SetSheetUpload.vue

@@ -421,7 +421,9 @@ export default {
     )
 
     const upldAllList = () => {
-      upldSetlList(selections.value)
+      upldSetlList(selections.value).catch(() => {
+        store.commit('app/setJdt', {title: '', isOpen: false, closeButton: true})
+      })
     }
 
     const upldSelections = () => {

src/views/medical-insurance/inpatient/InHospFeeUpload.vue

@@ -8,7 +8,7 @@
       <el-button type="primary" @click="weiGuiTuiFeiFenXiDialogOpen(true)">违规费用分析</el-button>
       <el-popover placement="left" width="730" trigger="click">
         <template #reference>
-          <el-button type="warning" icon="CircleClose" plain>错误信息 ({{ errorMessages.length }}) </el-button>
+          <el-button type="warning" icon="CircleClose" plain>错误信息 ({{ errorMessages.length }})</el-button>
         </template>
         <el-tag type="info">错误信息</el-tag>
         <el-divider direction="vertical"></el-divider>
@@ -26,7 +26,8 @@
       </el-tag>
     </el-header>
     <el-main>
-      <el-tag type="info">治疗明细</el-tag><el-tag>合计：￥ {{ fees.xmSum }}</el-tag>
+      <el-tag type="info">治疗明细</el-tag>
+      <el-tag>合计：￥ {{ fees.xmSum }}</el-tag>
       <el-table :data="fees.xm" stripe :height="feeTableHeight">
         <el-table-column prop="detailSn" label="流水号" width="80"></el-table-column>
         <el-table-column prop="chargeCodeMx" label="院内码" width="100"></el-table-column>
@@ -38,17 +39,18 @@
         <el-table-column prop="ybSelfFlag" label="是否报销" width="80"></el-table-column>
       </el-table>
       <el-pagination
-        @size-change="handleXmSizeChange"
-        @current-change="handleCurrentXmChange"
-        :current-page="page.xmPage"
-        :page-sizes="[10, 30, 50, 70, 100, 300]"
-        :page-size="page.xmPageSize"
-        layout="total, sizes, prev, pager, next"
-        :total="fees.xmTotal"
+          @size-change="handleXmSizeChange"
+          @current-change="handleCurrentXmChange"
+          :current-page="page.xmPage"
+          :page-sizes="[10, 30, 50, 70, 100, 300]"
+          :page-size="page.xmPageSize"
+          layout="total, sizes, prev, pager, next"
+          :total="fees.xmTotal"
       >
       </el-pagination>
       <div style="height: 5px"></div>
-      <el-tag type="info">药品明细</el-tag><el-tag>合计：￥ {{ fees.ypSum }}</el-tag>
+      <el-tag type="info">药品明细</el-tag>
+      <el-tag>合计：￥ {{ fees.ypSum }}</el-tag>
       <el-table :data="fees.yp" stripe :height="feeTableHeight">
         <el-table-column prop="detailSn" label="流水号" width="80"></el-table-column>
         <el-table-column prop="chargeCodeMx" label="院内码" width="100"></el-table-column>
@@ -60,13 +62,13 @@
         <el-table-column prop="ybSelfFlag" label="是否报销" width="80"></el-table-column>
       </el-table>
       <el-pagination
-        @size-change="handleYpSizeChange"
-        @current-change="handleCurrentYpChange"
-        :current-page="page.ypPage"
-        :page-sizes="[10, 30, 50, 70, 100, 300]"
-        :page-size="page.ypPageSize"
-        layout="total, sizes, prev, pager, next"
-        :total="fees.ypTotal"
+          @size-change="handleYpSizeChange"
+          @current-change="handleCurrentYpChange"
+          :current-page="page.ypPage"
+          :page-sizes="[10, 30, 50, 70, 100, 300]"
+          :page-size="page.ypPageSize"
+          layout="total, sizes, prev, pager, next"
+          :total="fees.ypTotal"
       >
       </el-pagination>
       <div class="m-wrapper" v-show="showProgress">
@@ -79,7 +81,8 @@
             <div style="padding: 10px">
               <div style="margin-bottom: 10px">{{ uploadIndexText }} ...</div>
               <div style="margin-bottom: 10px" v-show="percentage === 100">上传结束，正在进行费用计算 ...</div>
-              <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage" status="success"></el-progress>
+              <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage"
+                           status="success"></el-progress>
               <div style="height: 5px"></div>
             </div>
           </div>
@@ -87,28 +90,30 @@
       </div>
     </el-main>
     <el-dialog v-model="weiGuiTuiFeiFenXiDialog" title="违规费用分析" :fullscreen="true">
-      <wei-gui-fei-yong-fen-xi :init="weiGuiTuiFeiInit" @open="weiGuiTuiFeiOpenDialog" ref="weiGui" :patient="weiGuiJiBenXinXi"></wei-gui-fei-yong-fen-xi>
+      <wei-gui-fei-yong-fen-xi :init="weiGuiTuiFeiInit" @open="weiGuiTuiFeiOpenDialog" ref="weiGui"
+                               :patient="weiGuiJiBenXinXi"></wei-gui-fei-yong-fen-xi>
     </el-dialog>
-    <MedfeeAnalyse v-if="showFeeDetl" type="unsettled" :mdtrt-id="patient.mdtrtId" @close="showFeeDetl = false" />
+    <MedfeeAnalyse v-if="showFeeDetl" type="unsettled" :mdtrt-id="patient.mdtrtId" @close="showFeeDetl = false"/>
   </el-container>
 </template>
 
 <script>
 import store from '@/store'
-import { computed, onActivated, onDeactivated, onMounted, reactive, ref, watch } from 'vue'
-import { fetchNotUploadedFees } from '@/api/inpatient/patient'
-import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
-import { nullPatient } from '@/utils/validate'
-import { multipleUpload } from '@/api/inpatient/yibao'
-import { hospitalizationPreSettlement, uploadFeeDetail, revokeUploadFees } from '@/api/medical-insurance/si-inpatient'
-import { uploadInjuryFees, cancelInjuryFee, injuryPrecal } from '@/api/medical-insurance/si-injury'
-import { setCallback } from '@/utils/websocket'
-import { getGreatestRole } from '@/utils/permission'
-import { baseinfo } from '@/data/inpatient'
+import {computed, onActivated, onDeactivated, onMounted, reactive, ref, watch} from 'vue'
+import {fetchNotUploadedFees} from '@/api/inpatient/patient'
+import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'
+import {nullPatient} from '@/utils/validate'
+import {multipleUpload} from '@/api/inpatient/yibao'
+import {hospitalizationPreSettlement, uploadFeeDetail, revokeUploadFees} from '@/api/medical-insurance/si-inpatient'
+import {uploadInjuryFees, cancelInjuryFee, injuryPrecal} from '@/api/medical-insurance/si-injury'
+import {setCallback} from '@/utils/websocket'
+import {getGreatestRole} from '@/utils/permission'
+import {baseinfo} from '@/data/inpatient'
 import WeiGuiFeiYongFenXi from '@/components/inpatient/WeiGuiFeiYongFenXi.vue'
 import MedfeeAnalyse from '../../../components/medical-insurance/medfee-analyse/Index.vue'
+
 export default {
-  components: { WeiGuiFeiYongFenXi, MedfeeAnalyse },
+  components: {WeiGuiFeiYongFenXi, MedfeeAnalyse},
   setup() {
     const feeTableHeight = (store.state.app.windowSize.h - 200) / 2
     const injuryMode = computed(() => {
@@ -166,7 +171,7 @@ export default {
     onActivated(() => {
       actived.value = true
       store.commit('app/setCurrentPageName', 'inHospFeeUpload')
-      setCallback(socketCallback)
+      setCallback('feeUpdated', socketCallback)
     })
 
     onDeactivated(() => {
@@ -175,18 +180,18 @@ export default {
     })
 
     watch(
-      () => patient.value.inpatientNo,
-      () => {
-        if (actived.value) {
-          if (patient.value.inpatientNo) {
-            fetchProjectFees()
-            fetchMedicineFees()
-            weiGuiTuiFeiFenXiDialogOpen(false)
-          } else {
-            clearFees()
+        () => patient.value.inpatientNo,
+        () => {
+          if (actived.value) {
+            if (patient.value.inpatientNo) {
+              fetchProjectFees()
+              fetchMedicineFees()
+              weiGuiTuiFeiFenXiDialogOpen(false)
+            } else {
+              clearFees()
+            }
           }
         }
-      }
     )
 
     const errorMessages = ref([])
@@ -247,23 +252,23 @@ export default {
         const sid = store.getters['user/sid']
         patient.value.sid = sid
         uploadInjuryFees(patient.value)
-          .then((res) => {
-            fetchProjectFees()
-            fetchMedicineFees()
-            showProgress.value = false
-            percentage.value = 0
-            patient.value.chargeYb = res.fundPay
-            ElMessageBox.alert(res, '成功', {
-              type: 'success',
-              confirmButtonText: '确定',
+            .then((res) => {
+              fetchProjectFees()
+              fetchMedicineFees()
+              showProgress.value = false
+              percentage.value = 0
+              patient.value.chargeYb = res.fundPay
+              ElMessageBox.alert(res, '成功', {
+                type: 'success',
+                confirmButtonText: '确定',
+              })
+            })
+            .catch(() => {
+              showProgress.value = false
+              percentage.value = 0
+              fetchProjectFees()
+              fetchMedicineFees()
             })
-          })
-          .catch(() => {
-            showProgress.value = false
-            percentage.value = 0
-            fetchProjectFees()
-            fetchMedicineFees()
-          })
       } else {
         doSingleUpload()
       }
@@ -274,20 +279,20 @@ export default {
         item.sid = store.getters['user/sid']
       })
       multipleUpload(selections.value)
-        .then((res) => {
-          ElMessage({
-            message: '处理完成。',
-            type: 'success',
-            duration: 2500,
-            showClose: true,
+          .then((res) => {
+            ElMessage({
+              message: '处理完成。',
+              type: 'success',
+              duration: 2500,
+              showClose: true,
+            })
+            showProgress.value = false
+            percentage.value = 0
+          })
+          .catch(() => {
+            showProgress.value = false
+            percentage.value = 0
           })
-          showProgress.value = false
-          percentage.value = 0
-        })
-        .catch(() => {
-          showProgress.value = false
-          percentage.value = 0
-        })
     }
 
     const doSingleUpload = () => {
@@ -298,23 +303,23 @@ export default {
         sid: store.getters['user/sid'],
       }
       uploadFeeDetail(param)
-        .then((res) => {
-          fetchProjectFees()
-          fetchMedicineFees()
-          showProgress.value = false
-          percentage.value = 0
-          ElMessageBox.alert(res, '成功', {
-            type: 'success',
-            confirmButtonText: '确定',
+          .then((res) => {
+            fetchProjectFees()
+            fetchMedicineFees()
+            showProgress.value = false
+            percentage.value = 0
+            ElMessageBox.alert(res, '成功', {
+              type: 'success',
+              confirmButtonText: '确定',
+            })
+            store.commit('app/closeJdt')
+          })
+          .catch(() => {
+            fetchProjectFees()
+            fetchMedicineFees()
+            showProgress.value = false
+            percentage.value = 0
           })
-          store.commit('app/closeJdt')
-        })
-        .catch(() => {
-          fetchProjectFees()
-          fetchMedicineFees()
-          showProgress.value = false
-          percentage.value = 0
-        })
     }
 
     const socketCallback = (data) => {
@@ -347,32 +352,33 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '放弃',
       })
-        .then(() => {
-          if (injuryMode.value) {
-            cancelInjuryFee(patient.value).then(() => {
-              ElMessage({
-                message: '操作成功。',
-                type: 'success',
-                duration: 2500,
-                showClose: true,
+          .then(() => {
+            if (injuryMode.value) {
+              cancelInjuryFee(patient.value).then(() => {
+                ElMessage({
+                  message: '操作成功。',
+                  type: 'success',
+                  duration: 2500,
+                  showClose: true,
+                })
+                fetchProjectFees()
+                fetchMedicineFees()
               })
-              fetchProjectFees()
-              fetchMedicineFees()
-            })
-          } else {
-            revokeUploadFees(patient.value).then(() => {
-              ElMessage({
-                message: '操作成功。',
-                type: 'success',
-                duration: 2500,
-                showClose: true,
+            } else {
+              revokeUploadFees(patient.value).then(() => {
+                ElMessage({
+                  message: '操作成功。',
+                  type: 'success',
+                  duration: 2500,
+                  showClose: true,
+                })
+                fetchProjectFees()
+                fetchMedicineFees()
               })
-              fetchProjectFees()
-              fetchMedicineFees()
-            })
-          }
-        })
-        .catch(() => {})
+            }
+          })
+          .catch(() => {
+          })
     }
 
     const showFeeDetl = ref(false)
@@ -411,8 +417,8 @@ export default {
         title: '提示',
         dangerouslyUseHTMLString: true,
         type: 'success',
-        message: ` 
-            1、如果上传不成功或者费用不一致，那么请医保科取消上传，重新上传费用。<br>          
+        message: `
+            1、如果上传不成功或者费用不一致，那么请医保科取消上传，重新上传费用。<br>
             2、退药品的话（长期医嘱撤销就可以了，如果不能撤销提单子）（临嘱的话使用医保入院登记里面的【医嘱退费】，然后护士执行这个条医嘱就可以了）。<br>
             3、全部的项目都要用本系统来退费。<br>你们终于可以不用向信息科打电话了 ヾ(✿ﾟ▽ﾟ)ノ`,
       })
@@ -481,11 +487,13 @@ function initPage() {
   z-index: 8888;
   background-color: rgba(0, 0, 0, 0.6);
 }
+
 .dj-center-box-wrapper {
   position: fixed;
   inset: 0px;
   text-align: center;
 }
+
 .dj-center-box-wrapper::after {
   content: '';
   display: inline-block;