web_dist/src/views/target-management/target-home/TargetHomePage.vue

<template>
    <div style="background-color: #fff;">
        <div class="cl-dv">
            <div class="cl-sn">
                <el-card class="el-cd1" shadow="hover">
                    <template #header>
                        <div>
                            <span>本年度责任指标</span>
                        </div>
                    </template>
                    <div>
                        <i class="iconfont icon-zhantie"></i> 99 / 100
                    </div>
                </el-card>
            </div>
            <div class="cl-sn">
                <el-card class="el-cd2" shadow="hover">
                    <template #header>
                        <div>
                            <span>本年度填报指标</span>
                        </div>
                    </template>
                    <div>
                        <i class="iconfont icon-zhantie"></i> 99 / 100
                    </div>
                </el-card>
            </div>
            <div class="cl-sn">
                <el-card class="el-cd3" shadow="hover">
                    <template #header>
                        <div>
                            <span>本年度指标总分</span>
                        </div>
                    </template>
                    <div>
                        <i class="iconfont icon-zhantie"></i> 998 / 1000 分
                    </div>
                </el-card>
            </div>
            <div class="cl-sn">
                <el-card class="el-cd4" shadow="hover">
                    <template #header>
                        <div>
                            <span>本年度责任指标不合格项</span>
                        </div>
                    </template>
                    <div>
                        <i class="iconfont icon-zhantie"></i> 123
                    </div>
                </el-card>
            </div>
        </div>
        <div style="margin-top: 5px;">
            <el-row :gutter="24">
                <el-col :span="12">
                    <div style="width: 100%; height: 400px" id="main"></div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 100%; height: 400px" id="rcpie"></div>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 5px; calc(100% - 450);">
            <page-layer>
                <template #header height="55px;">
                    <el-date-picker v-model="dateRange" type="monthrange" range-separator="至" start-placeholder="开始月份"
                        end-placeholder="结束月份" style="width: 320px"></el-date-picker>
                    <el-cascader v-model="queryData.dataInfo" :options="targetTreeData" style="width: 720px"
                        :props="{ value: 'id', label: 'label', children: 'children', expandTrigger: 'hover' }"
                        @change="handleChange" :clearable="true" :filterable="true" placeholder="请选择指标">
                    </el-cascader>
                    <el-button type="primary" icon="Search" @click="query" style="margin-left: 10px">查询</el-button>
                </template>
                <template #main>
                    <el-tabs type="border-card" v-model="queryData.selectType" @tab-click="handleClick">
                        <el-tab-pane label="数据" name="first">
                            <el-table :data="targetInfos" :height="tableHeight" border highlight-current-row
                                row-key="childKey" stripe>
                                <el-table-column type="index" label="序号" align="center"
                                    header-align="center"></el-table-column>
                                <el-table-column label="指标名称" prop="t_name" align="left" header-align="center"
                                    width="160"></el-table-column>
                                <el-table-column label="评审方法" prop="t_method" align="left" header-align="center" width="180"
                                    show-overflow-tooltip></el-table-column>
                                <el-table-column label="计分细则" prop="t_rule" align="left" header-align="center" width="280"
                                    show-overflow-tooltip></el-table-column>
                                <el-table-column label="分数" prop="t_score" align="right" header-align="center"
                                    width="80"></el-table-column>
                                <el-table-column label="指标结果" prop="t_result" header-align="center">
                                    <el-table-column label="2019年" prop="t_y1" align="right"
                                        header-align="center"></el-table-column>
                                    <el-table-column label="2020年" prop="t_y2" align="right"
                                        header-align="center"></el-table-column>
                                    <el-table-column label="2021年" prop="t_y3" align="right"
                                        header-align="center"></el-table-column>
                                    <el-table-column label="2022年" prop="t_y4" align="right"
                                        header-align="center"></el-table-column>
                                </el-table-column>
                                <el-table-column label="负责人" prop="t_manager" align="center"
                                    header-align="center"></el-table-column>
                                <el-table-column label="完成状态" prop="t_state" align="center"
                                    header-align="center"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </page-layer>
        </div>
    </div>
</template>
<script setup name="TargetHomePage">
import PageLayer from '@/layout/PageLayer.vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { highBarsUtils, highBarsNiceUtils } from '@/utils/high-charts'
import { getDateRangeFormatDate, formatDatetime } from '@/utils/date'
import { clone } from '../../../utils/clone'
import { selectTargetDictTree } from '../../../api/target-management/target-dict'

const dateRange = ref([])
const targetInfos = ref([])
const storeU = useStore()
const windowSize = storeU.state.app.windowSize
const tableHeight = windowSize.h - 620
const dateS = getDateRangeFormatDate(dateRange.value)
const targetTreeData = ref()
const queryData = reactive({
    startTime: dateS.startTime,
    endTime: dateS.endTime,
    targetType: 't1',
    selectType: 'first',
    dataInfo: null,
})

const handleChange = (value) => {
    console.log(value)
}

const queryParam = reactive({
    id: '', // 指标编码
    name: '', // 指标名称
    pid: '', // 父级编码
    sort: '', // 指标序号
    type: '', // 对接类型
    state: '', // 状态
    openTime: '', // 启用时间
    deptId: '', // 责任科室id
    source: '', // 数据来源
    calcChild: '', // 计算分子sql
    calcMom: '', // 计算分母sql
    isLeaf: '', //是否叶子节点（0：否， 1：是）
})

const qeryTargetDictTree = () => {
    queryParam.id = '';
    queryParam.pid = '';
    selectTargetDictTree(queryParam)
        .then((res) => {
            targetTreeData.value = clone(res[0].children)
        });
}

const handleClick = (tab, event) => {
    if (!dateRange.value) {
        ElMessage({
            message: '请选择时间范围！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
        return
    }

    if (!queryData.dataInfo) {
        ElMessage({
            message: '请选择指标！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
        return
    }

    queryData.setlType = queryData.dataInfo[0]
    queryData.insurType = queryData.dataInfo[1]

    queryData.startTime = formatDatetime(dateRange.value[0])
    queryData.endTime = formatDatetime(dateRange.value[1])

    // 查询哪个tab页面
    queryData.selectType = tab.props.name

    if (queryData.selectType === 'first') {
        targetInfos.value = [
            {
                t_name: '核定床位数', t_method: '核定床位数（≥500张）', t_rule: '核定床位数（≥500张）记1分',
                t_score: 1, t_y1: '3', t_y2: '8', t_y3: '12', t_y4: '24', t_manager: 'xxx', t_state: '已完成'
            },
            {
                t_name: '实际开放床位数', t_method: '实际开放床位数（≥500张）', t_rule: '实际开放床位数（≥500张）记3分',
                t_score: 1, t_y1: '90', t_y2: '124', t_y3: '145', t_y4: '165', t_manager: 'xxx', t_state: '已完成'
            },
            {
                t_name: '平均床位使用率', t_method: '平均床位使用率（≥93%）', t_rule: '平均床位使用率（≥93%）记6分',
                t_score: 1, t_y1: '93%', t_y2: '90%', t_y3: '96%', t_y4: '98%', t_manager: 'xxx', t_state: '已完成'
            }
        ]
    }

}

onMounted(() => {

    nextTick(async () => {
        qeryTargetDictTree()
    })

    let Tnames = ['资源配置与运行数据', '医疗服务能力与医院质量安全指标', '重点专业质量控制指标', '单病种（术种）质量控制指标', '重点医疗技术临床应用质量控制指标']
    let Xnames = ['2019', '2020', '2021', '2022', '2023']
    let infoData = [{
        name: '资源配置与运行数据',
        data: [240, 270, 280, 290, 300]
    },
    {
        name: '医疗服务能力与医院质量安全指标',
        data: [260, 280, 270, 230, 270]
    },
    {
        name: '重点专业质量控制指标',
        data: [240, 230, 270, 280, 270]
    },
    {
        name: '单病种（术种）质量控制指标',
        data: [100, 90, 100, 90, 110]
    },
    {
        name: '重点医疗技术临床应用质量控制指标',
        data: [25, 27, 22, 28, 30]
    }]
    let unit = '分'
    let titleName = '单位：' + unit
    let name = '指标得分情况统计'
    let statusInfos = {
        zflag: false, // 柱子是否显示数据
        toolBoxFlag: false, // 是否显示下载，切换标签
    }

    highBarsUtils(main, name, Tnames, Xnames, infoData, titleName, unit, 1, statusInfos)

    highBarsNiceUtils(rcpie)
})

const query = () => {
    if (!dateRange.value) {
        ElMessage({
            message: '请选择时间范围！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
        return
    }

    if (!queryData.dataInfo) {
        ElMessage({
            message: '请选择指标！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
        return
    }

    if (queryData.selectType === 'first') {
        targetInfos.value = [
            {
                t_name: '核定床位数', t_method: '核定床位数（≥500张）', t_rule: '核定床位数（≥500张）记1分',
                t_score: 1, t_y1: '3', t_y2: '8', t_y3: '12', t_y4: '24', t_manager: 'xxx', t_state: '已完成'
            },
            {
                t_name: '实际开放床位数', t_method: '实际开放床位数（≥500张）', t_rule: '实际开放床位数（≥500张）记3分',
                t_score: 1, t_y1: '90', t_y2: '124', t_y3: '145', t_y4: '165', t_manager: 'xxx', t_state: '已完成'
            },
            {
                t_name: '平均床位使用率', t_method: '平均床位使用率（≥93%）', t_rule: '平均床位使用率（≥93%）记6分',
                t_score: 1, t_y1: '93%', t_y2: '90%', t_y3: '96%', t_y4: '98%', t_manager: 'xxx', t_state: '已完成'
            }
        ]
    }


}

function initTargetOptions() {
    return [
        {
            value: 't1',
            label: '第一章 资源配置与运行数据指标(300分)',
            children: [
                {
                    value: 'a1',
                    label: '床位配置(10分)',
                },
                {
                    value: 'a2',
                    label: '卫生技术人员配备(60分)',
                },
                {
                    value: 'a3',
                    label: '相关科室资源配置(60分)',
                },
                {
                    value: 'a4',
                    label: '运行指标(150分)',
                },
                {
                    value: 'a5',
                    label: '科研指标(20分)',
                }
            ],
        },
        {
            value: 't2',
            label: '第二章 医疗服务能力与医院质量安全指标(280分)',
            children: [
                {
                    value: 'b1',
                    label: '医疗服务能力(80分)',
                },
                {
                    value: 'b2',
                    label: '医院质量指标(80分)',
                },
                {
                    value: 'b3',
                    label: '医疗安全指标(年度医院获得性指标)(120分)',
                },
            ],
        },
    ]
}
</script>
<style lang="scss" scoped>
.cl-dv {
    display: flex;
    padding: 5px;
    border-radius: 5px;
    justify-content: space-evenly;

    .cl-sn {
        width: calc(100% / 4);
        margin: 0 5px;

        .el-cd1 {
            background-color: blue;
            color: #fff;
            border-bottom: 0px solid blue;
        }

        .el-cd2 {
            background-color: blueviolet;
            color: #fff;
            border-bottom: 0px solid blueviolet;
        }

        .el-cd3 {
            background-color: #049481;
            color: #fff;
            border-bottom: 0px solid #049481;
        }

        .el-cd4 {
            background-color: brown;
            color: #fff;
            border-bottom: 0px solid brown;
        }
    }
}
</style>