|
@@ -2,7 +2,7 @@
|
|
|
<div id="roomScreen" :style="windowSize">
|
|
|
<el-container>
|
|
|
<el-main>
|
|
|
- <my-clock size="small"></my-clock>
|
|
|
+ <my-clock size="small" show-logo></my-clock>
|
|
|
<el-row :gutter="5" class="room-name">
|
|
|
<el-col :span="11" class="text-right">诊室{{ room.code }}</el-col>
|
|
|
<el-col :span="2" class="text-center">
|
|
@@ -65,7 +65,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
import { ref } from '@vue/reactivity'
|
|
|
import MyClock from '@/components/MyClock.vue'
|
|
|
import { onMounted } from 'vue'
|
|
@@ -73,208 +73,184 @@ import { getNextJzList, getRoomNoAndDept, getVideoList, getDoctorInfo, notifyCom
|
|
|
import { initWebSocket, setCallback } from '@/utils/websocket'
|
|
|
import $ from 'jquery'
|
|
|
import Cookies from 'js-cookie'
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- MyClock,
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const windowSize = getWindowSize()
|
|
|
- const mainInfoRow = {
|
|
|
- display: 'flex',
|
|
|
- width: windowSize.w - 20 + 'px',
|
|
|
- height: windowSize.h / 2 + 'px',
|
|
|
- padding: '15px 0',
|
|
|
- }
|
|
|
- const doctorCard = {
|
|
|
- width: windowSize.w / 2 + 'px',
|
|
|
- height: mainInfoRow.height,
|
|
|
- }
|
|
|
- const avatarStyle = {
|
|
|
- width: windowSize.w / 5 + 'px',
|
|
|
- }
|
|
|
|
|
|
- const nowJzBox = {
|
|
|
- width: windowSize.w / 2 - 5 + 'px',
|
|
|
- height: windowSize.h / 7 + 'px',
|
|
|
- }
|
|
|
+const windowSize = getWindowSize()
|
|
|
+const mainInfoRow = {
|
|
|
+ display: 'flex',
|
|
|
+ width: windowSize.w - 20 + 'px',
|
|
|
+ height: windowSize.h / 2 + 'px',
|
|
|
+ padding: '15px 0',
|
|
|
+}
|
|
|
+const doctorCard = {
|
|
|
+ width: windowSize.w / 2 + 'px',
|
|
|
+ height: mainInfoRow.height,
|
|
|
+}
|
|
|
+const avatarStyle = {
|
|
|
+ width: windowSize.w / 5 + 'px',
|
|
|
+}
|
|
|
|
|
|
- const nextJzBox = {
|
|
|
- width: nowJzBox.width,
|
|
|
- height: windowSize.h / 2 - windowSize.h / 7 - 10 + 'px',
|
|
|
- }
|
|
|
+const nowJzBox = {
|
|
|
+ width: windowSize.w / 2 - 5 + 'px',
|
|
|
+ height: windowSize.h / 7 + 'px',
|
|
|
+}
|
|
|
|
|
|
- const scrollStyle = {
|
|
|
- width: nextJzBox.width,
|
|
|
- height: windowSize.h / 2 - windowSize.h / 7 - 70 + 'px',
|
|
|
- overflowY: 'scroll',
|
|
|
- }
|
|
|
+const nextJzBox = {
|
|
|
+ width: nowJzBox.width,
|
|
|
+ height: windowSize.h / 2 - windowSize.h / 7 - 10 + 'px',
|
|
|
+}
|
|
|
+
|
|
|
+const scrollStyle = {
|
|
|
+ width: nextJzBox.width,
|
|
|
+ height: windowSize.h / 2 - windowSize.h / 7 - 70 + 'px',
|
|
|
+ overflowY: 'scroll',
|
|
|
+}
|
|
|
|
|
|
- const doctorPortraitUrl = ref(null)
|
|
|
- const roomCode = ref('')
|
|
|
- const room = ref({})
|
|
|
- const doctor = ref({})
|
|
|
- const nowJz = ref({})
|
|
|
- const nextJz = ref({})
|
|
|
- const nextJzList = ref([])
|
|
|
- const occupyMsg = ref('-')
|
|
|
- const offset = ref(600)
|
|
|
- const duration = ref(5000)
|
|
|
+const doctorPortraitUrl = ref(null)
|
|
|
+const roomCode = ref('')
|
|
|
+const room = ref({})
|
|
|
+const doctor = ref({})
|
|
|
+const nowJz = ref({})
|
|
|
+const nextJz = ref({})
|
|
|
+const nextJzList = ref([])
|
|
|
+const occupyMsg = ref('-')
|
|
|
+const offset = ref(600)
|
|
|
+const duration = ref(5000)
|
|
|
|
|
|
- const fetchDoctorInfo = () => {
|
|
|
- getDoctorInfo(roomCode.value)
|
|
|
- .then((res) => {
|
|
|
- doctor.value = res || {}
|
|
|
- doctorPortraitUrl.value = 'data:image/png;base64,' + doctor.value.portrait
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- doctor.value = {}
|
|
|
- })
|
|
|
- getRoomNoAndDept(roomCode.value)
|
|
|
- .then((res) => {
|
|
|
- room.value = res || {}
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- room.value = {}
|
|
|
- })
|
|
|
- }
|
|
|
+const fetchDoctorInfo = () => {
|
|
|
+ getDoctorInfo(roomCode.value)
|
|
|
+ .then((res) => {
|
|
|
+ doctor.value = res || {}
|
|
|
+ doctorPortraitUrl.value = 'data:image/png;base64,' + doctor.value.portrait
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ doctor.value = {}
|
|
|
+ })
|
|
|
+ getRoomNoAndDept(roomCode.value)
|
|
|
+ .then((res) => {
|
|
|
+ room.value = res || {}
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ room.value = {}
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- const myScrollRef = ref(null)
|
|
|
- const scrollPage = () => {
|
|
|
- const target = $('#myScroll')
|
|
|
- target.animate(
|
|
|
- {
|
|
|
- scrollTop: offset.value,
|
|
|
- },
|
|
|
- duration.value,
|
|
|
- null,
|
|
|
- () => {
|
|
|
- target.animate(
|
|
|
+const myScrollRef = ref(null)
|
|
|
+const scrollPage = () => {
|
|
|
+ const target = $('#myScroll')
|
|
|
+ target.animate(
|
|
|
+ {
|
|
|
+ scrollTop: offset.value,
|
|
|
+ },
|
|
|
+ duration.value,
|
|
|
+ null,
|
|
|
+ () => {
|
|
|
+ target.animate(
|
|
|
{
|
|
|
scrollTop: 0,
|
|
|
},
|
|
|
0,
|
|
|
null,
|
|
|
scrollPage()
|
|
|
- )
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
- const setJzList = (data) => {
|
|
|
- nextJzList.value = data
|
|
|
- const size = nextJzList.value.length
|
|
|
- if (size > 6) {
|
|
|
- offset.value = 32 * (size - 6)
|
|
|
- duration.value = 2000 * (size - 6)
|
|
|
- scrollPage()
|
|
|
+ )
|
|
|
}
|
|
|
- }
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
- const updateNowJzAndSoOn = (param) => {
|
|
|
- nowJz.value = { no: param.fzNo, name: param.name }
|
|
|
- getNextJzList(param).then((res) => {
|
|
|
- setJzList(res)
|
|
|
- })
|
|
|
- }
|
|
|
+const setJzList = (data) => {
|
|
|
+ nextJzList.value = data
|
|
|
+ const size = nextJzList.value.length
|
|
|
+ if (size > 6) {
|
|
|
+ offset.value = 32 * (size - 6)
|
|
|
+ duration.value = 2000 * (size - 6)
|
|
|
+ scrollPage()
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- const audio = new Audio()
|
|
|
- const playCount = ref(0)
|
|
|
- const audioPlay = () => {
|
|
|
- for (let i = 0; i < 2; i++) {
|
|
|
- if (i === playCount.value) {
|
|
|
- audio.play()
|
|
|
- }
|
|
|
- }
|
|
|
- playCount.value++
|
|
|
- }
|
|
|
- audio.onended = () => {
|
|
|
- audioPlay()
|
|
|
+const updateNowJzAndSoOn = (param) => {
|
|
|
+ nowJz.value = { no: param.fzNo, name: param.name }
|
|
|
+ getNextJzList(param).then((res) => {
|
|
|
+ setJzList(res)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const audio = new Audio()
|
|
|
+const playCount = ref(0)
|
|
|
+const audioPlay = () => {
|
|
|
+ for (let i = 0; i < 2; i++) {
|
|
|
+ if (i === playCount.value) {
|
|
|
+ audio.play()
|
|
|
}
|
|
|
+ }
|
|
|
+ playCount.value++
|
|
|
+}
|
|
|
+audio.onended = () => {
|
|
|
+ audioPlay()
|
|
|
+}
|
|
|
|
|
|
- const socketCallback = (data) => {
|
|
|
- if (data.action === 1) {
|
|
|
- audio.src = 'http://172.16.32.160:8888/voices/' + data.serialNo + '.mp3' // 生产
|
|
|
- playCount.value = 0
|
|
|
- audioPlay()
|
|
|
- occupyMsg.value = '请' + data.fzNo + '号 ' + data.name + ' 到' + data.deptName + data.roomNo + '号诊室就诊'
|
|
|
- setTimeout(() => {
|
|
|
- occupyMsg.value = ''
|
|
|
- }, 30 * 1000)
|
|
|
- updateNowJzAndSoOn(data)
|
|
|
- notifyComplete(data.serialNo).then(() => {})
|
|
|
- } else if (data.action === 2) {
|
|
|
- updateNowJzAndSoOn(data)
|
|
|
- } else if (data.action === 3) {
|
|
|
- location.reload()
|
|
|
- }
|
|
|
+const socketCallback = (data) => {
|
|
|
+ if (data.action === 1) {
|
|
|
+ audio.src = 'http://172.16.32.160:8080/resource/voice/' + data.serialNo + '.mp3' // 生产
|
|
|
+ playCount.value = 0
|
|
|
+ audioPlay()
|
|
|
+ occupyMsg.value = '请' + data.fzNo + '号 ' + data.name + ' 到' + data.deptName + data.roomNo + '号诊室就诊'
|
|
|
+ setTimeout(() => {
|
|
|
+ occupyMsg.value = ''
|
|
|
+ }, 30 * 1000)
|
|
|
+ updateNowJzAndSoOn(data)
|
|
|
+ notifyComplete(data.serialNo).then(() => {})
|
|
|
+ } else if (data.action === 2) {
|
|
|
+ updateNowJzAndSoOn(data)
|
|
|
+ } else if (data.action === 3) {
|
|
|
+ location.reload()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getQueryVariable = (variable) => {
|
|
|
+ let query = window.location.search.substring(1)
|
|
|
+ let vars = query.split('&')
|
|
|
+ for (let i = 0; i < vars.length; i++) {
|
|
|
+ let pair = vars[i].split('=')
|
|
|
+ if (pair[0] === variable) {
|
|
|
+ return pair[1]
|
|
|
}
|
|
|
+ }
|
|
|
+ return false
|
|
|
+}
|
|
|
|
|
|
- const getQueryVariable = (variable) => {
|
|
|
- let query = window.location.search.substring(1)
|
|
|
- let vars = query.split('&')
|
|
|
- for (let i = 0; i < vars.length; i++) {
|
|
|
- let pair = vars[i].split('=')
|
|
|
- if (pair[0] === variable) {
|
|
|
- return pair[1]
|
|
|
+onMounted(() => {
|
|
|
+ roomCode.value = getQueryVariable('roomCode')
|
|
|
+ const sid = roomCode.value + '-triageRoomScreen'
|
|
|
+ Cookies.set('room-screen-sid', sid)
|
|
|
+ initWebSocket(sid)
|
|
|
+ setCallback(socketCallback)
|
|
|
+ fetchDoctorInfo()
|
|
|
+ getVideoList().then((res) => {
|
|
|
+ const videoList = res
|
|
|
+ const video = document.getElementById('video')
|
|
|
+ let vLen = videoList.length
|
|
|
+ let curr = 0
|
|
|
+ video.onended = () => {
|
|
|
+ videoPlay()
|
|
|
+ }
|
|
|
+ videoPlay()
|
|
|
+ function videoPlay() {
|
|
|
+ for (let i = 0; i < vLen; i++) {
|
|
|
+ let url = videoList[i]
|
|
|
+ if (i === curr) {
|
|
|
+ video.src = url
|
|
|
}
|
|
|
}
|
|
|
- return false
|
|
|
+ curr++
|
|
|
+ if (curr >= vLen) {
|
|
|
+ curr = 0
|
|
|
+ }
|
|
|
}
|
|
|
+ })
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- roomCode.value = getQueryVariable('roomCode')
|
|
|
- const sid = roomCode.value + '-triageRoomScreen'
|
|
|
- Cookies.set('room-screen-sid', sid)
|
|
|
- initWebSocket(sid)
|
|
|
- setCallback(socketCallback)
|
|
|
- fetchDoctorInfo()
|
|
|
- getVideoList().then((res) => {
|
|
|
- const videoList = res
|
|
|
- const video = document.getElementById('video')
|
|
|
- let vLen = videoList.length
|
|
|
- let curr = 0
|
|
|
- video.onended = () => {
|
|
|
- videoPlay()
|
|
|
- }
|
|
|
- videoPlay()
|
|
|
- function videoPlay() {
|
|
|
- for (let i = 0; i < vLen; i++) {
|
|
|
- let url = videoList[i]
|
|
|
- if (i === curr) {
|
|
|
- video.src = url
|
|
|
- }
|
|
|
- }
|
|
|
- curr++
|
|
|
- if (curr >= vLen) {
|
|
|
- curr = 0
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- getNextJzList({ roomCode: roomCode.value }).then((res) => {
|
|
|
- setJzList(res)
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- return {
|
|
|
- room,
|
|
|
- doctor,
|
|
|
- nowJz,
|
|
|
- nextJz,
|
|
|
- nextJzList,
|
|
|
- occupyMsg,
|
|
|
- windowSize,
|
|
|
- mainInfoRow,
|
|
|
- doctorCard,
|
|
|
- avatarStyle,
|
|
|
- nowJzBox,
|
|
|
- nextJzBox,
|
|
|
- scrollStyle,
|
|
|
- myScrollRef,
|
|
|
- doctorPortraitUrl,
|
|
|
- }
|
|
|
- },
|
|
|
-}
|
|
|
+ getNextJzList({ roomCode: roomCode.value }).then((res) => {
|
|
|
+ setJzList(res)
|
|
|
+ })
|
|
|
+})
|
|
|
|
|
|
function getWindowSize() {
|
|
|
const w = window.innerWidth
|