wkx-his-web/src/views/patients/parenteralNutrition/index.vue

<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" @click="handleQuery">搜索</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 emit = defineEmits(['change']);

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;   
  getList();
}

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>