优化今日号源

src/views/single-page/TodayClinicResource-bak.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="parent-wrapper">
+    <div class="title-box">
+      <img :src="logo" alt="">
+      <p class="title-text">今日开放号源</p>
+      <p class="title-time">{{currentTimeText}}</p>
+    </div>
+    <table>
+      <tr>
+        <td class="colored-background">出诊科室</td>
+        <td class="colored-background">出诊医生</td>
+        <td class="colored-background">出诊号别</td>
+        <td class="colored-background">出诊时间</td>
+        <td class="colored-background">医事服务费</td>
+        <td class="colored-background">就诊地点</td>
+      </tr>
+      <tr v-for="item in displayList">
+        <td class="colored-text">{{item.deptName}}</td>
+        <td class="colored-text">{{item.doctorName}}</td>
+        <td class="colored-text">{{item.reqType}}</td>
+        <td class="colored-text">{{item.reqTime}}</td>
+        <td class="colored-text">{{item.reqFee}}</td>
+        <td class="colored-text">{{item.reqAddress}}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import logo from '@/assets/thyylogo.png'
+import {selectTodayClinicResource} from "@/api/single-page/today-clinic-resource";
+
+const resourceList = ref([])
+const queryResourceData = () => {
+  selectTodayClinicResource().then(res => {
+    resourceList.value = res
+    analyzeStatistics()
+  })
+}
+
+const currentTimeText = ref('')
+
+const displayList = ref([]);
+const pageInfoSize = 4; //每页显示4条信息
+const maxPageNumber = ref(0);
+
+const analyzeStatistics = () => {
+  if (resourceList.value.length === 0) {
+    return
+  }
+  maxPageNumber.value = Math.ceil((resourceList.value.length)/pageInfoSize);
+  splitPageInfo();
+}
+
+const currentPageNumber = ref(1)
+const executeSlice = () => {
+  let leftIndex = (currentPageNumber.value - 1) * 4
+  let rightIndex = currentPageNumber.value * 4
+  if (rightIndex > resourceList.value.length - 1) {
+    rightIndex = resourceList.value.length - 1
+  }
+  displayList.value = resourceList.value.slice(leftIndex, rightIndex);
+  if (currentPageNumber.value < maxPageNumber.value) {
+    currentPageNumber.value += 1
+  } else {
+    currentPageNumber.value = 1
+  }
+}
+
+const splitPageInfo = () => {
+  executeSlice()
+  setInterval(function () {
+    executeSlice()
+  }, 1000 * 20);
+}
+
+onMounted(() => {
+  queryResourceData()
+  setInterval(() => {
+    let date = new Date();
+    let dateStr=date.getFullYear() + "/" +(date.getMonth() + 1) + "/" + date.getDate();
+    let timeStr = date.toLocaleTimeString();
+    let weekStr='星期'+'日一二三四五六'.charAt(new Date().getDay());
+    currentTimeText.value = dateStr + " --- " + timeStr + " --- " + weekStr;
+  }, 1000)
+})
+
+</script>
+
+<style scoped lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.parent-wrapper {
+  width: 100vw;
+  height: 100vh;
+
+  .title-box {
+    position: relative;
+    background-image: linear-gradient(to top,white 0%, lightskyblue 100%);
+    display: table;
+    width: 100vw;
+    height: 10vh;
+
+    img {
+      position: relative;
+      margin-left: 20px;
+      height: 75%;
+      width: 20%;
+      margin-top: 5px;
+    }
+
+    .title-text {
+      position: absolute;
+      top: 0;
+      left: 17.5%;
+      text-align: center;
+      line-height: 200%;
+      border-bottom-left-radius: 30%;
+      border-bottom-right-radius: 30%;
+      height: 100%;
+      width: 20%;
+      color: white;
+      font-size: 50px;
+      font-weight: bold;
+      background-image: linear-gradient(to top, rgba(0, 82, 94, 0.88), rgba(0, 82, 94, 0.48) 100%);
+    }
+
+    .title-time {
+      background-image: linear-gradient(to top, rgba(0, 82, 94, 0.88), rgba(0, 82, 94, 0.48) 100%);
+      border-radius: 10px;
+      width: 45%;
+      font-size: 45px;
+      color: white;
+      font-weight: bold;
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+
+  table {
+    margin-top: 8px;
+    width: 100vw;
+    height: 89vh;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+    border-collapse: collapse;
+
+    td {
+      border:1px solid rgb(3, 107, 122);
+      height: 20%;
+      color: white;
+    }
+
+    .colored-background {
+      background-color: rgb(0, 82, 94);
+      padding: 16px 0;
+    }
+
+    .colored-text {
+      color: rgb(0, 82, 94);
+    }
+
+    .w12 {
+      width: 12%;
+    }
+
+    .w14 {
+      width: 14%;
+    }
+
+    .w18 {
+      width: 18%;
+    }
+
+    .w22 {
+      width: 22%;
+    }
+  }
+
+}
+
+</style>

src/views/single-page/TodayClinicResource.vue

@@ -1,34 +1,45 @@
 <template>
-  <div name="parent_div">
-    <div name="title_div">
-      <img :src="logo">
-      <p id="title">今日开放号源</p>
-      <p id="current_time">{{currentTimeText}}</p>
+  <div class="parent-wrapper">
+    <div class="title-box">
+      <img :src="logo" alt="">
+      <p class="title-text">今日开放号源</p>
+      <p class="title-time">{{currentTimeText}}</p>
     </div>
-    <table id="the_table">
+    <table>
       <tr>
-        <td id="t1" name="t1">出诊科室</td>
-        <td id="t2" name="t2">出诊医生</td>
-        <td id="t3" name="t3">出诊号别</td>
-        <td id="t4" name="t4">出诊时间</td>
-        <td id="t5" name="t5">医事服务费</td>
-        <td id="t6" name="t6">就诊地点</td>
-      </tr>
-      <tr v-for="item in displayList">
-        <td>{{item.deptName}}</td>
-        <td>{{item.doctorName}}</td>
-        <td>{{item.reqType}}</td>
-        <td>{{item.reqTime}}</td>
-        <td>{{item.reqFee}}</td>
-        <td>{{item.reqAddress}}</td>
+        <td class="colored-background w22">科室</td>
+        <td class="colored-background w12">医生</td>
+        <td class="colored-background w18">号别</td>
+        <td class="colored-background w12">时间</td>
+        <td class="colored-background w14">挂号费</td>
+        <td class="colored-background w22">地点</td>
       </tr>
     </table>
+    <dv-scroll-board :config="config" style="height: 79vh"/>
   </div>
 </template>
 
 <script setup>
 import logo from '@/assets/thyylogo.png'
 import {selectTodayClinicResource} from "@/api/single-page/today-clinic-resource";
+import {reactive} from "vue";
+
+const width = window.innerWidth
+const w12 = width * 0.12
+const w14 = width * 0.14
+const w18 = width * 0.18
+const w22 = width * 0.22
+
+const config = reactive({
+  data: [],
+  rowNum: 4,
+  columnWidth: [w22,w12,w18,w12,w14,w22],
+  align: ['center','center','center','center','center','center'],
+  carousel: 'single',
+  hoverPause: false
+})
+
+const data = ref([])
 
 const resourceList = ref([])
 const queryResourceData = () => {
@@ -40,38 +51,21 @@ const queryResourceData = () => {
 
 const currentTimeText = ref('')
 
-const displayList = ref([]);
-const pageInfoSize = 4; //每页显示4条信息
-const maxPageNumber = ref(0);
-
 const analyzeStatistics = () => {
   if (resourceList.value.length === 0) {
     return
   }
-  maxPageNumber.value = Math.ceil((resourceList.value.length)/pageInfoSize);
-  splitPageInfo();
-}
-
-const currentPageNumber = ref(1)
-const executeSlice = () => {
-  let leftIndex = (currentPageNumber.value - 1) * 4
-  let rightIndex = currentPageNumber.value * 4
-  if (rightIndex > resourceList.value.length - 1) {
-    rightIndex = resourceList.value.length - 1
-  }
-  displayList.value = resourceList.value.slice(leftIndex, rightIndex);
-  if (currentPageNumber.value < maxPageNumber.value) {
-    currentPageNumber.value += 1
-  } else {
-    currentPageNumber.value = 1
-  }
-}
-
-const splitPageInfo = () => {
-  executeSlice()
-  setInterval(function () {
-    executeSlice()
-  }, 1000 * 20);
+  resourceList.value.forEach(item => {
+    let temp = []
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.deptName || ''}</span>`)
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.doctorName || ''}</span>`)
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.reqType || ''}</span>`)
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.reqTime || ''}</span>`)
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.reqFee || ''}</span>`)
+    temp.push(`<span style="font-size: 50px;font-weight: bold">${item.reqAddress || ''}</span>`)
+    data.value.push(temp)
+  })
+  config.data = data.value
 }
 
 onMounted(() => {
@@ -87,115 +81,89 @@ onMounted(() => {
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 * {
   margin: 0;
   padding: 0;
-}
-
-body {
-  height: 100%;
-  background-image: linear-gradient(to bottom, dodgerblue 10%, darkblue 100%);
-}
-
-[name=parent_div] {
-  width: 100%;
-  height: 98%;
-}
-
-[name=title_div] {
-  position: relative;
-  background-image: linear-gradient(to top,white 0%, lightskyblue 100%);
-  display: table;
-  width: 100%;
-  height: 10%;
-}
-
-img {
-  position: relative;
-  margin-left: 20px;
-  height: 75%;
-  width: 20%;
-  margin-top: 5px;
-}
-
-[id=title] {
-  position: absolute;
-  top: 0;
-  left: 17.5%;
-  text-align: center;
-  border-bottom-left-radius: 30%;
-  border-bottom-right-radius: 30%;
-  height: 96%;
-  width: 20%;
-  font-size: 50px;
-  font-weight: bold;
-  background-image: linear-gradient(to top, #8ad2ff 0%, rgba(0, 0, 255, 0.48) 100%);
-}
-
-[id=current_time] {
-  background-image: linear-gradient(to top, #8ad2ff 0%, rgba(0, 0, 255, 0.48) 100%);
-  border-radius: 10px;
-  width: 45%;
-  font-size: 45px;
-  color: black;
-  font-weight: bold;
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
-}
-
-table { width: 98%; height: 88%;
-  margin: 1%; min-height: 35px; line-height: 35px;
-  text-align: center; font-size: 60px;
-  /*font-weight: bold;*/
-  border-collapse: collapse;
-}
-
-td {
-  border:3px solid lightgray;
-}
-
-[name=t1],[name=t6] {
-  width: 22%;
-  height: 20%;
-  color: black;
-  background-image: linear-gradient(to top, deepskyblue 0%, lightskyblue 100%);
-  font-size: 45px;
-  font-weight: bold;
-}
-
-[name=t3] {
-  width: 18%;
-  height: 20%;
-  color: black;
-  background-image: linear-gradient(to top, deepskyblue 0%, lightskyblue 100%);
-  font-size: 45px;
-  font-weight: bold;
-}
-
-[name=t5] {
-  width: 14%;
-  height: 20%;
-  color: black;
-  background-image: linear-gradient(to top, deepskyblue 0%, lightskyblue 100%);
-  font-size: 45px;
-  font-weight: bold;
-}
+  box-sizing: border-box;
+}
+
+.parent-wrapper {
+  width: 100vw;
+  height: 100vh;
+
+  .title-box {
+    position: relative;
+    background-image: linear-gradient(to top,white 0%, lightskyblue 100%);
+    display: table;
+    width: 100vw;
+    height: 10vh;
+
+    img {
+      position: relative;
+      margin-left: 20px;
+      height: 75%;
+      width: 20%;
+      margin-top: 5px;
+    }
+
+    .title-text {
+      position: absolute;
+      top: 0;
+      left: 17.5%;
+      text-align: center;
+      line-height: 200%;
+      border-bottom-left-radius: 30%;
+      border-bottom-right-radius: 30%;
+      height: 100%;
+      width: 20%;
+      color: white;
+      font-size: 50px;
+      font-weight: bold;
+      background-image: linear-gradient(to top, rgba(0, 82, 94, 0.88), rgba(0, 82, 94, 0.48) 100%);
+    }
+
+    .title-time {
+      background-image: linear-gradient(to top, rgba(0, 82, 94, 0.88), rgba(0, 82, 94, 0.48) 100%);
+      border-radius: 10px;
+      width: 45%;
+      font-size: 45px;
+      color: white;
+      font-weight: bold;
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
 
-[name=t2],[name=t4]{
-  width: 12%;
-  height: 20%;
-  color: black;
-  background-image: linear-gradient(to top, deepskyblue 0%, lightskyblue 100%);
-  font-weight: bold;
-  font-size: 45px;
-}
+  table {
+    margin-top: 8px;
+    width: 100vw;
+    height: 10vh;
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+    border-collapse: collapse;
+    color: white;
+    background-color: rgb(0, 82, 94);
+
+    .w12 {
+      width: 12%;
+    }
+
+    .w14 {
+      width: 14%;
+    }
+
+    .w18 {
+      width: 18%;
+    }
+
+    .w22 {
+      width: 22%;
+    }
+  }
 
-[name=content1],[name=content2],[name=content3],[name=content4],[name=content5],[name=content6] {
-  background-image: linear-gradient(to top, #5385fa 0%, #2e43ff 100%);
-  color: orange;
-  /*font-weight: bold;*/
 }
 
 </style>