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

<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 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 = () => {
  selectTodayClinicResource().then(res => {
    resourceList.value = res
    analyzeStatistics()
  })
}

const currentTimeText = ref('')

const analyzeStatistics = () => {
  if (resourceList.value.length === 0) {
    return
  }
  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(() => {
  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: 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%;
    }
  }

}

</style>