|
|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div class="p-2">
|
|
|
+ <el-container class="layout-container-demo" style="height: 100vh; min-height: 100vh;">
|
|
|
+ <el-aside id="leftPanel"
|
|
|
+ style="background:transparent; width: 370px;flex: 0 0 auto; border-right: 2px solid #e4e7ed;">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
+ <el-form-item label="开方日期" id="dateRangeEl">
|
|
|
+ <el-date-picker v-model="queryParams.screeningTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
|
|
+ range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item id="doctorNameEl">
|
|
|
+ <el-input v-model="queryParams.patientNo" placeholder="医生姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item id="buttonEl">
|
|
|
+ <el-button type="primary">搜索</el-button>
|
|
|
+ <el-button @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-aside>
|
|
|
+
|
|
|
+ <el-container>
|
|
|
+ <el-main style="padding-left: 20px;">
|
|
|
+ <div>
|
|
|
+ <el-table v-loading="loading" border :data="dataList">
|
|
|
+ <el-table-column label="时间" align="center" prop="screeningTime" />
|
|
|
+ <el-table-column label="看诊类型" align="center" prop="visitType" />
|
|
|
+ <el-table-column label="门诊/住院号" align="center" prop="patientNo" />
|
|
|
+ <el-table-column label="营养筛查类型" align="center" prop="configName" />
|
|
|
+ <el-table-column label="营养筛查分数" align="center" prop="screeningScore" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize" @pagination="getList" /> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="p-2">
|
|
|
+ <el-menu class="el-menu-demo" mode="horizontal" @select="handleMenumSelect"
|
|
|
+ :default-active="currentIndex">
|
|
|
+ <el-menu-item index="1">三大营养素分析</el-menu-item>
|
|
|
+ <el-menu-item index="2">营养数据分析</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8" v-show="leftIndex == currentIndex" style="margin: 0px;">
|
|
|
+ <el-col :span="13">
|
|
|
+ <div style="margin-top: 20px;margin-bottom: 20px;">医嘱总热量/天：--</div>
|
|
|
+ <div>
|
|
|
+ <el-table border stripe :data="leftList">
|
|
|
+ <el-table-column label="元素名称" align="center" prop="nutrientName" />
|
|
|
+ <el-table-column label="单位" align="center" prop="nutrientQuantity">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.row.nutrientQuantity.toFixed(4) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="肠外营养含量/天" align="center" prop="nutrientRefVal" />
|
|
|
+ <el-table-column label="热量占比" align="center" prop="nutrientRatio" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 20px;margin-bottom: 20px;text-align: right;">热氮比：--</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" align="center">
|
|
|
+ <div style="height: 300px;">
|
|
|
+ <v-chart :option="pieOption" style="width: 400px; height: 200px;" class="chart-center" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8" v-show="rightIndex == currentIndex">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div style="height: 400px;overflow-y: scroll;">
|
|
|
+ <el-table border stripe :data="rightList">
|
|
|
+ <el-table-column label="元素类型" align="center" prop="nutrientName" />
|
|
|
+ <el-table-column label="元素名称" align="center" prop="nutrientUnit" />
|
|
|
+ <el-table-column label="单位" align="center" prop="nutrientQuantity" />
|
|
|
+ <el-table-column label="肠外营养含量/天" align="center" prop="nutrientQuantity" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="ScreeningAssessmentConfig" lang="ts">
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { listScreening } from '@/api/patients/screening';
|
|
|
+import { ScreeningQuery } from '@/api/patients/screening/types';
|
|
|
+import { FoodIngredientVO } from '@/api/system/foodIngredient/types';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+const dataList = ref([{
|
|
|
+ screeningTime: '',
|
|
|
+ visitType: '',
|
|
|
+ patientNo: '',
|
|
|
+ configName: '',
|
|
|
+ screeningScore: ''
|
|
|
+}]);
|
|
|
+
|
|
|
+const loading = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const leftList = ref<FoodIngredientVO[]>([]);
|
|
|
+const leftCalories = ref<number>(0.0);
|
|
|
+const rightList = ref<FoodIngredientVO[]>([]);
|
|
|
+
|
|
|
+const leftIndex = ref('1')
|
|
|
+const rightIndex = ref('2')
|
|
|
+const currentIndex = ref('1')
|
|
|
+
|
|
|
+const pieOption = ref({
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ bottom: 'bottom',
|
|
|
+ data: ['蛋白质 30%', '脂肪 20%', '碳水化合物 50%']
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '三大营养素元素质量占比',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '30',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 30, name: '蛋白质 30%' },
|
|
|
+ { value: 20, name: '脂肪 20%' },
|
|
|
+ { value: 50, name: '碳水化合物 50%' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+const queryFormRef = ref<ElFormInstance>();
|
|
|
+const queryParams = ref<ScreeningQuery>(
|
|
|
+ {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ patientNo: undefined,
|
|
|
+ screeningTime: undefined,
|
|
|
+ // orderTime: undefined,
|
|
|
+ // doctorName: undefined,
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+const handleMenumSelect = async (key: string, keyPath: string[]) => {
|
|
|
+ currentIndex.value = key.toString()
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+}
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ queryParams.value.patientId= '1937770358913093633';
|
|
|
+ const res = await listScreening(queryParams.value);
|
|
|
+ dataList.value = res.rows;
|
|
|
+ total.value = res.total;
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields();
|
|
|
+ handleQuery();
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.layout-container-demo .el-header {
|
|
|
+ position: relative;
|
|
|
+ background-color: var(--el-color-primary-light-7);
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.layout-container-demo .el-aside {
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ background: var(--el-color-primary-light-8);
|
|
|
+}
|
|
|
+
|
|
|
+.layout-container-demo .el-menu {
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-container-demo .el-main {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-container-demo .toolbar {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(#dateRangeEl .el-form-item__content) {
|
|
|
+ width: 215px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(#doctorNameEl .el-form-item__content) {
|
|
|
+ width: 140px;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(#buttonEl .el-form-item__content) {
|
|
|
+ margin-left:-25px;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+</style>
|
chenying2100