up

chenyc

2022-09-27 d75764603bf3e00ba0d16738c32b820a72bf1bc5

up

 src/main.ts

@@ -5,7 +5,7 @@
// import 'vant/es/toast/style'
// 引入全局样式
import 'vant/lib/index.css'
import { Col, Row,Icon,Button  } from 'vant'
import { Col, Row,Icon,Button,Field  } from 'vant'
import { createPinia } from 'pinia'
// mock数据
// import './utils/mock'
@@ -15,6 +15,7 @@
app.use(Row)
app.use(Icon)
app.use(Button)
app.use(Field)
app.use(router)
app.use(createPinia())
app.mount('#app')

 src/router/index.ts

@@ -7,6 +7,9 @@
    { path: '/', name: 'Home', component: () => import('views/home/index.vue'),meta:{title:'首页'}},
    { path: '/my', name: 'myMine', component: () => import('views/myMine/index.vue'),meta:{title:'我的'}},
    { path: '/paiban', name: 'paiban', component: () => import('views/paiban/index.vue'),meta:{title:'透析排班'}},
    { path: '/report', name: 'report', component: () => import('views/report/index.vue'),meta:{title:'检查报告'}},
    { path: '/prescriptionDrug', name: 'prescriptionDrug', component: () => import('views/prescriptionDrug/index.vue'),meta:{title:'透析医嘱'}},
    { path: '/record', name: 'record', component: () => import('views/record/index.vue'),meta:{title:'透析记录'}},
    { path: '/test', name: 'Test', component: () => import('views/test.vue')}
]


 src/views/home/index.vue

@@ -22,7 +22,7 @@
            </div>
            <div class="meuns">
                <van-row class="meunsitems">
                    <van-col span="6" class="item">
                    <van-col span="6" @click="topath('/report')" class="item">
                        <van-image
                            round
                            width="42px"
@@ -40,7 +40,7 @@
                        />
                        <div>透析排班</div>
                    </van-col>
                    <van-col span="6" class="item">
                    <van-col span="6" @click="topath('/prescriptionDrug')" class="item">
                        <van-image
                            round
                            width="42px"
@@ -49,7 +49,7 @@
                        />
                        <div>透析医嘱</div>
                    </van-col>
                    <van-col span="6" class="item">
                    <van-col span="6" @click="topath('/record')" class="item">
                        <van-image
                            round
                            width="42px"

 src/views/paiban/index.vue

@@ -2,12 +2,12 @@
    <div class="paiban">
        <div>
            <van-calendar
                title="透析排班"
                color="#769AFF"
                :poppable="false"
                :show-confirm="false"
                @select="selectData"
                :formatter="formatter"
                :show-title="false"
                :style="{ height: '400px' }"
            />
        </div>
@@ -66,7 +66,7 @@
    </div>
</template>
<script lang="ts" setup>
    import {ref,reactive,watchEffect,watch} from 'vue'
    // import {ref,reactive,watchEffect,watch} from 'vue'
    import { Calendar as vanCalendar } from 'vant'
    const selectData=(data:any)=>{
        console.log(data)

 src/views/prescriptionDrug/index.vue

New file
@@ -0,0 +1,89 @@
<template>
    <div class="report">
        <div class="inputdiv">
            <van-field left-icon="search" class="input" v-model="inputValue" placeholder="模糊匹配项目、日期检索" />
        </div>
        <div class="listdiv">
            <div class="listrow" v-for="x in 6" :key="x">
                <van-row>
                    <div class="info"></div>
                    <van-row class="lable">
                        <van-col span="18">
                            <span class="labletext">医嘱名称:</span>
                            <span>人促红素注射液（环尔博）</span>
                        </van-col>
                        <van-col span="6" style="text-align: right;color: #769AFF;font-weight: 400;">长期医嘱</van-col>
                    </van-row>
                    <van-row class="lable">
                        <van-col span="24">
                            <span class="labletext">医嘱内容:</span>
                            <span>
                                人促红素注射液（环尔博）12gmm/dsad
                            </span>
                        </van-col>
                    </van-row>
                    <van-row class="lable">
                        <van-col span="12">
                            <span class="labletext">开嘱医生:</span>
                            <span>张三丰</span>
                        </van-col>
                        <van-col span="12">
                            <span class="labletext">开嘱时间:</span>
                            <span>2022-08-01</span>
                        </van-col>
                    </van-row>
                </van-row>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import {ref,reactive,watchEffect,watch} from 'vue'
    const inputValue=ref('')
</script>
<style lang="scss">
    .report{
        background-color: #F6FAFF;
        padding: 0;
        .inputdiv{
            width: 94%;
            margin-left: 3%;
            margin-top: 10px;
            .input{
                width: 100%;
                // height: 33px;
                border-radius: 22px;
                border: 1px solid #DADADA;
                // line-height: 33px;
            }
        }
    }
    .listdiv{
        .listrow{
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            .lable{
                width: 90%;
                margin-left: 5%;
                height: 40px;
               div{
                height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2A2A2A;
                line-height: 40px;
                border-bottom: #F1F1F2 1px solid;
                .labletext{
                    font-weight: 400;
                    color: #777777;
                }
               }
            }
        }
    }
</style>

 src/views/record/index.vue

New file
@@ -0,0 +1,144 @@
<template>
    <div class="record">
        <div>
            <van-calendar
                color="#769AFF"
                :poppable="false"
                :show-confirm="false"
                @select="selectData"
                :formatter="formatter"
                :show-title="false"
                :style="{ height: '400px' }"
            />
        </div>
        <div class="listdiv">
            <div class="listrow">
                <van-row>
                    <van-row class="lable">
                        <van-col span="8">
                            <span style="color: #777777;">状态：</span>
                            <span style="color: #769AFF;">透析完成</span>
                        </van-col>
                        <van-col span="8">
                            <span style="color: #777777;">上机：</span>
                            <span style="color: #769AFF;">8:00</span>
                        </van-col>
                        <van-col span="8">
                            <span style="color: #777777;">下机：</span>
                            <span style="color: #769AFF;">12:00</span>
                        </van-col>
                    </van-row>
                    <van-row class="lable">
                        <van-col span="8">
                            <span style="color: #777777;">班次：</span>
                            <span style="color: #769AFF;">上午</span>
                        </van-col>
                        <van-col span="8">
                            <span style="color: #777777;">机号：</span>
                            <span style="color: #769AFF;">12</span>
                        </van-col>
                        <van-col span="8">
                            <span style="color: #777777;">模式：</span>
                            <span style="color: #769AFF;">HD</span>
                        </van-col>
                    </van-row>
                    <van-row class="lable2">
                        <van-col span="8">
                            <span style="color: #777777;">次数：</span>
                            <span style="color: #769AFF;">65</span>
                        </van-col>
                        <van-col span="8">
                            <span style="color: #777777;">本次费用：</span>
                            <span style="color: #769AFF;">---</span>
                        </van-col>
                    </van-row>
                </van-row>
                <van-row class="item">
                    <van-col span="12">干体重：</van-col>
                    <van-col span="12" style="text-align: right; color: #769AFF ;">78.6（kg）</van-col>
                </van-row>
                <van-row class="item">
                    <van-col span="12">衣物重：</van-col>
                    <van-col span="12" style="text-align: right; color: #769AFF ;">0.6（kg）</van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    // import {ref,reactive,watchEffect,watch} from 'vue'
    import { Calendar as vanCalendar } from 'vant'
    const selectData=(data:any)=>{
        console.log(data)
    }
    const formatter=(day:any)=>{
        const month = day.date.getMonth() + 1
        const date = day.date.getDate()
        if (month === 9) {
            if (date === 24) {
                day.bottomInfo='8:30'
                day.className='recordclass'
            } else if (date === 27) {
                day.bottomInfo='13:00'
                day.className='recordclass'
            }
        }
        return day
    }
</script>
<style lang="scss">
    .recordclass{
        // background: rgb(228, 231, 225);
        color: blue;
    }
    .record{
        background-color: #F6FAFF;
        padding: 0;
    }
    .listdiv{
        margin-top: 20px;
        .listrow{
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            height: 129px;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            .lable{
                width: 90%;
                margin-left: 5%;
                height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #AAAAAA;
                line-height: 40px;
                border-bottom:#F1F1F2 solid 1px;
            }
            .lable2{
                width: 90%;
                margin-left: 5%;
                height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #AAAAAA;
                line-height: 40px;
            }
            .item{
                margin-top: 20px;
                width: 90%;
                margin-left: 5%;
                height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 40px;
                background: #FFFFFF;
                border-bottom:#F1F1F2 solid 1px;
            }
        }
    }
</style>

 src/views/report/index.vue

New file
@@ -0,0 +1,72 @@
<template>
    <div class="report">
        <div class="inputdiv">
            <van-field left-icon="search" class="input" v-model="inputValue" placeholder="模糊匹配项目、日期检索" />
        </div>
        <div class="listdiv">
            <div class="listrow" v-for="x in 6" :key="x">
                <van-row>
                    <div class="info"></div>
                    <van-row class="lable">
                        <van-col span="12">检验值</van-col>
                        <van-col span="12" style="text-align: right;">血常规</van-col>
                    </van-row>
                    <van-row class="lable">
                        <van-col span="12">检验值</van-col>
                        <van-col span="12" style="text-align: right; color: #769AFF ;">血红蛋白:102</van-col>
                    </van-row>
                    <van-row class="lable">
                        <van-col span="12">最新检查日期</van-col>
                        <van-col span="12" style="text-align: right;">2022-08-01</van-col>
                    </van-row>
                </van-row>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import {ref,reactive,watchEffect,watch} from 'vue'
    const inputValue=ref('')
</script>
<style lang="scss">
    .report{
        background-color: #F6FAFF;
        padding: 0;
        .inputdiv{
            width: 94%;
            margin-left: 3%;
            margin-top: 10px;
            .input{
                width: 100%;
                // height: 33px;
                border-radius: 22px;
                border: 1px solid #DADADA;
                // line-height: 33px;
            }
        }
    }
    .listdiv{
        .listrow{
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            .lable{
                width: 90%;
                margin-left: 5%;
                height: 40px;
               div{
                height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #777777;
                line-height: 40px;
                border-bottom: #F1F1F2 1px solid;
               }
            }
        }
    }
</style>