护理看板

src/api/login.js

@@ -15,6 +15,13 @@ export function getWardsApi() {
     })
 }
 
+export function getAllWards() {
+    return request({
+        url: '/login/getAllWards',
+        method: 'get',
+    })
+}
+
 export function simpleLogin(code) {
     return request({
         url: '/login/simpleLogin',

src/components/dashboard/Inpatient.vue

@@ -3,9 +3,12 @@
     <el-tooltip :content="getSurgeryInfo(brief.surgery)" placement="top">
       <div class="top-line">
         <div style="width: 40px">{{ brief.bedNo }}床</div>
-        <div style="width: 80px">
-          <img :src="getGenderIcon(brief.gender)" class="sex-icon" style="margin-top: 0px"/>
-          {{ brief.name }}
+        <div style="width: 140px;display: flex;align-items: center;justify-content: center">
+          <img :src="getGenderIcon(brief.gender)" class="sex-icon" />
+          <img v-if="brief.surgery" :src="ssd" class="sex-icon">
+          <div style="margin-left: 4px">
+            {{ brief.name }}
+          </div>
         </div>
         <div style="width: 40px">{{ brief.indays }}天</div>
       </div>
@@ -35,7 +38,7 @@
         <div style="width: 60px">护理级别：</div>
         <div>{{ brief.nursingLevel }}</div>
       </div>
-      <div>
+      <div v-if="showOrderEntry">
         <div style="width: 60px;color: #0a2fe7;text-decoration:underline; cursor: pointer;" @click="routerYz(brief)">
           进入医嘱
         </div>
@@ -44,71 +47,65 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import maleIcon from '@/assets/male-icon.png'
 import femaleIcon from '@/assets/female-icon.png'
+import ssd from '@/assets/shoushudao.png'
 import router from "@/router";
 
-export default {
-  props: {
-    brief: {
-      type: Object,
-      required: true,
-    },
+const props = defineProps({
+  brief: {
+    type: Object,
+    required: true,
   },
-  setup() {
-    const getGenderIcon = (gender) => {
-      return gender === 1 ? maleIcon : femaleIcon
-    }
-    const getSurgeryInfo = (surgery) => {
-      return surgery ? '今日手术：' + surgery : '今日无手术'
-    }
-    const backgroundColor = (status) => {
-      switch (status) {
-        case 0:
-          return {
-            background: '#67C23A',
-            color: '#000000',
-          }
-        case 1:
-          return {
-            background: '#E6A23C',
-            color: '#FFFFFF',
-          }
-        case 2:
-          return {
-            background: '#F56C6C',
-            color: '#FFFFFF',
-          }
-      }
-    }
+  showOrderEntry: {
+    type: Boolean,
+    default: true,
+  }
+})
 
-    const routerYz = (patInfo) => {
-      router.push({
-        name: 'yiZhuLuRu',
-        params: {
-          inpatientNo: patInfo.patNo,
-          admissTimes: patInfo.times,
-        }
-      })
-    }
+const getGenderIcon = (gender) => {
+  return gender === 1 ? maleIcon : femaleIcon
+}
+const getSurgeryInfo = (surgery) => {
+  return surgery ? '今日手术：' + surgery : '今日无手术'
+}
+const backgroundColor = (status) => {
+  switch (status) {
+    case 0:
+      return {
+        background: '#67C23A',
+        color: '#000000',
+      }
+    case 1:
+      return {
+        background: '#E6A23C',
+        color: '#FFFFFF',
+      }
+    case 2:
+      return {
+        background: '#F56C6C',
+        color: '#FFFFFF',
+      }
+  }
+}
 
-    return {
-      getGenderIcon,
-      getSurgeryInfo,
-      backgroundColor,
-      routerYz
+const routerYz = (patInfo) => {
+  router.push({
+    name: 'yiZhuLuRu',
+    params: {
+      inpatientNo: patInfo.patNo,
+      admissTimes: patInfo.times,
     }
-  },
+  })
 }
 </script>
 
 <style lang="scss" scoped>
 .inpatient-wrapper {
-  width: 160px;
-  height: 172px;
+  width: 220px;
   background: rgb(255, 207, 207);
-  margin: 12px 12px 0 0;
+  margin: 6px;
   border-radius: 4px;
   font-size: 12px !important;
 
@@ -133,8 +130,6 @@ export default {
 
   .mid-line {
     padding: 0 0 6px 4px;
-    border-bottom: 1px solid rgb(255, 255, 255);
-
     > div {
       margin-top: 6px;
       display: flex;

src/router/modules/dashboard.ts

@@ -55,6 +55,12 @@ const route: Array<RouteRecordRaw> = [
         component: createNameComponent(() => import('@/views/single-page/Lottery.vue'), 'lottery'),
         meta: {title: '抽奖', hideTabs: true}
     },
+    {
+        path: '/inpatientBoard',
+        name: 'inpatientBoard',
+        component: createNameComponent(() => import('@/views/single-page/InpatientBoard.vue'), 'inpatientBoard'),
+        meta: {title: '护理看板', hideTabs: true}
+    },
     {
         path: '/myEmrEditor/:pat?/:refresh?',
         name: 'myEmrEditor',

src/views/dashboard/index.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import {computed, onActivated, onMounted, ref, watch} from 'vue'
+import {onActivated, onMounted, ref} from 'vue'
 import {selectSystemMessages} from '../../api/messages/index'
 import {formatDate} from '@/utils/date'
 import {genTextPortrait} from '@/utils/portrait'

src/views/single-page/InpatientBoard.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="inpatient-board layout_container">
+    <header class="header">
+      <div class="title-line">
+        <div class="title">护理看板</div>
+        <div class="ward">
+          当前病房：
+          <el-select v-model="currentWard" @change="handleWardChange" style="width: 120px">
+            <el-option
+                v-for="item in allWards"
+                :label="item.name"
+                :value="item.code"
+            />
+          </el-select>
+
+          <div class="speed-text">
+            滚动速度：
+          </div>
+          <div class="speed-box">
+            <el-slider v-model="speedBarDisplay" :step="10" :min="10" :max="100" @change="changeInterval"/>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <div class="layout_main" id="boardBox">
+      <div style="display: flex; flex-wrap: wrap; overflow-y: auto" id="boardContent">
+        <Inpatient v-for="(itm, index) in briefs" :key="index" :brief="itm" :show-order-entry="false"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script setup>
+import Inpatient from "@/components/dashboard/Inpatient.vue";
+import {selectInpatientBriefs} from "@/api/dashboard";
+import {getAllWards} from "@/api/login";
+
+const currentWard = ref('')
+const allWards = ref([])
+const briefs = ref([]);
+
+function handleWardChange(ward) {
+  localStorage.setItem('inpatientBoardWard', ward)
+  getPatients(ward)
+}
+
+function getPatients(ward) {
+  selectInpatientBriefs(ward).then(res => {
+    briefs.value = res
+    setTimeout(() => {
+      startScroll()
+    },500)
+  })
+}
+
+const speedBarDisplay = ref(50)
+const interval = ref(50)
+
+function changeInterval(val) {
+  interval.value = 110 - val
+  clearInterval(scrollInterval)
+  startScroll()
+}
+
+let scrollInterval
+function startScroll() {
+  const windowHeight = window.innerHeight - 43
+  const boardContent = document.getElementById("boardContent")
+  const clientHeight = boardContent.clientHeight
+  if (clientHeight > windowHeight) {
+    console.log('start scrolling')
+    const boardBox = document.getElementById('boardBox')
+    scrollInterval = setInterval(() => {
+      boardBox.scrollTop += 1
+      const maxScrollHeight = boardContent.scrollHeight - boardBox.clientHeight
+      if (boardBox.scrollTop >= maxScrollHeight) {
+        boardBox.scrollTop = 0
+      }
+    }, interval.value)
+  } else {
+    console.log('clear scrolling')
+    clearInterval(scrollInterval)
+  }
+}
+
+onMounted(() => {
+  getAllWards().then(res => {
+    allWards.value = res
+    currentWard.value = localStorage.getItem('inpatientBoardWard')
+    if (currentWard.value) {
+      getPatients(currentWard.value)
+    }
+  })
+})
+</script>
+
+<style lang="scss">
+.inpatient-board {
+  .header {
+    background-color: #1d8300;
+    padding: 8px;
+    border-radius: 4px;
+  }
+  .title-line {
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .ward {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      left: 10px;
+      top: 6px;
+      .speed-text {
+        margin-left: 32px;
+      }
+      .speed-box {
+        width: 220px;
+      }
+    }
+  }
+}
+</style>