叫号屏

eight

2024-09-03 9558a021310c22ec73d144e8af70c0877a50e8c1

叫号屏

 public/home.png

Binary files differ

 src/locales/zh-CN.ts

@@ -448,5 +448,10 @@
    btn_zoom_out: '缩小',
    preview: '预览'
  },
  ecg: {
    roomselect: '诊室选择',
    callingscreen_big: '叫号屏',
    callingscreen_room: '诊间屏'
  },
  'OAuth 2.0': 'OAuth 2.0' // é¿å…èœå•åæ˜¯ OAuth 2.0 æ—¶ï¼Œä¸€ç›´ warn æŠ¥é”™
}

 src/permission.ts

@@ -53,7 +53,9 @@
  '/auth-redirect',
  '/bind',
  '/register',
  '/oauthLogin/gitee'
  '/oauthLogin/gitee',
  '/calling-screen-big',
  '/calling-screen-room'
]

// è·¯ç”±åŠ è½½å‰
@@ -61,14 +63,15 @@
  console.info("router.beforeEach to: " + to.fullPath + " from: " + from.fullPath)
  start()
  loadStart()

  if (whiteList.indexOf(to.path) !== -1) {
    next()
    return
  }

  if (!getAccessToken()) {
      if (whiteList.indexOf(to.path) !== -1) {
          next()
          return
      } else {
          next(`/login?redirect=${to.fullPath}`) // å¦åˆ™å…¨éƒ¨é‡å®šå‘到登录页
          return
      }
    next(`/login?redirect=${to.fullPath}`) // å¦åˆ™å…¨éƒ¨é‡å®šå‘到登录页
    return
  }

  if (to.path === '/login') {

 src/router/modules/remaining.ts

@@ -210,7 +210,27 @@
    name: 'LoginRoomSelect',
    meta: {
      hidden: true,
      title: t('router.login'),
      title: t('ecg.roomselect'),
      noTagsView: true
    }
  },
  {
    path: '/calling-screen-big',
    component: () => import('@/views/ecg/callingscreen/bigscreen.vue'),
    name: 'bigCallingScreen',
    meta: {
      hidden: true,
      title: t('ecg.callingscreen_big'),
      noTagsView: true
    }
  },
  {
    path: '/calling-screen-room',
    component: () => import('@/views/ecg/callingscreen/roomscreen.vue'),
    name: 'roomCallingScreen',
    meta: {
      hidden: true,
      title: t('ecg.callingscreen_room'),
      noTagsView: true
    }
  },

 src/views/ecg/callingscreen/bigscreen.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,140 @@
<script setup lang="ts">

defineOptions({ name: 'bigscreen' })

  const tableData = [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 å¼„'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 å¼„'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 å¼„'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 å¼„'
    }]

  const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace",
    "特朗普", "马卡龙", "普金", "穆迪老仙", "拜登", "卡特"]
  const visibleCount = 5 // å¯åŒæ—¶æ˜¾ç¤ºçš„名字数量
  const startIndex = ref<number>(0);

  const visibleNames : string[] =  computed(() => {
    const endIndex = (startIndex.value + visibleCount) % names.length;
    if (endIndex > startIndex.value) {
      return names.slice(startIndex.value, endIndex);
    } else {
      return [...names.slice(startIndex.value), ...names.slice(0, endIndex)];
    }
  })

  const startScrolling = () => {
    setInterval(() => {
      // console.info("...")
      startIndex.value = (startIndex.value + visibleCount) % names.length;
    }, 3000); // æ¯ä¸¤ç§’滚动一次
  }

  onMounted( () => {
    startScrolling()
  })

  const speak = (msg) => {
    //const msg = new SpeechSynthesisUtterance(`请${this.currentNumber}号就诊`);
    const repeatNum = 3
    var speech = new SpeechSynthesisUtterance()
    speech.text = msg
    speech.pitch = 1 // èŽ·å–并设置话语的音调(0-2 é»˜è®¤1，值越大越尖锐,越低越低沉)
    speech.rate = 0.9 // èŽ·å–并设置说话的速度(0.1-10 é»˜è®¤1，值越大语速越快,越小语速越慢)
    speech.volume = 100 // èŽ·å–并设置说话的音量
    speech.lang = 'zh-CN' // è®¾ç½®æ’­æ”¾è¯­è¨€
    // å¢žåŠ æŽ§åˆ¶æ’­æ”¾æ¬¡æ•°
    let count = 1
    speechSynthesis.speak(speech)
    while (count < repeatNum) {
      speechSynthesis.speak(speech)
      count++
    }
  }

</script>

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="500px">
        <el-table
            :data="tableData"
            stripe
            :show-header="false"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="日期"
              width="180"/>
          <el-table-column
              prop="name"
              label="姓名"
              width="180"/>
          <el-table-column
              prop="address"
              label="地址"/>
        </el-table>
      </el-aside>
      <el-container>
        <el-main>
          <div class="name-scroller">
            <div class="name-box">
              <span v-for="(name, index) in visibleNames" :key="index">{{ name }}</span>
            </div>
          </div>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
    <el-button @click="speak('请 ç‰¹æœ—æ™® åˆ°äºŒå·è¯Šå®¤ å°±è¯Š')" >叫号</el-button>
  </el-container>
</template>

<style scoped lang="scss">
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

 src/views/ecg/callingscreen/roomscreen.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
<script setup lang="ts">

defineOptions({ name: 'roomscreen' })

</script>

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">

</style>