web_dist/src/components/operate-monitoring/ReportFirstPage.vue

<template>
    <page-layer>
        <template #header>
            <div style="text-align: center">
                统计日期:
                <span v-if="kssj1" style="color: #fc6c34;">
                    {{ kssj1 }} 至 {{ jssj1 }}
                </span>
                <span v-else style="color: #fc6c34;">当前</span>
                统计机构名称：<span style="color: #fc6c34;">长沙泰和医院</span>
                指标名称: <span style="color: #fc6c34;">{{ reportInfo1.reportName }}</span>
                统计结果描述: <span style="color: #fc6c34;">{{ reportInfo1.overview }}{{ reportInfo1.unit }}</span>
                <el-button type="primary" icon="Search" style="margin-left: 10px;" @click="selectReportMx">明细数据
                </el-button>
                <el-button type="primary" icon="Download" style="margin-left: 10px;" @click="exportReportFirst">导出数据
                </el-button>
            </div>
        </template>
        <template #aside>
            <el-table :data="reportData" :height="tableHeight" highlight-current-row row-key="childKey" stripe border
                @row-dblclick="reportSecondInfo">
                <el-table-column prop="x" :label="x1Name" width="120"></el-table-column>
                <el-table-column prop="y" :label="y1Name"></el-table-column>
            </el-table>
        </template>
        <template #main>
            <div style="width: 80%; height: 400px; margin-bottom: 5px;" id="firstPie"></div>
            <div style="width: 80%; height: 400px" id="firstDst"></div>
        </template>
    </page-layer>
    <el-dialog v-if="props.reportFirst.tableInfo.sndGroup !== 'patient'" :title="titleChart" v-model="sndDrawer" fullscreen
        destroy-on-close>
        <ReportSecondPage :reportSecond="reportSecond" />
    </el-dialog>
    <el-dialog v-else :title="titleChart" v-model="patientDrawer" width="80%" style="height: 800px" top="40px" destroy-on-close>
        <ReportPatientPage :reportPatient="reportPatient" />
    </el-dialog>
    <el-dialog :title="titleChart" v-model="patientMxDrawer" style="height: 800px" width="80%" top="40px" destroy-on-close>
        <ReportPatientPage :reportPatient="reportPatient" />
    </el-dialog>
</template>
<script setup name="ReportFirst">
import { ref, nextTick } from "vue"
import { clone } from '@/utils/clone'
import PageLayer from '@/layout/PageLayer.vue'
import { highBarUtils, highPieUtils } from '@/utils/high-charts'
import { selectReportGroup } from '@/api/reports/high-report'
import { Export } from '@/utils/ExportExcel'
import ReportSecondPage from '@/components/operate-monitoring/ReportSecondPage.vue'
import ReportPatientPage from '@/components/operate-monitoring/ReportPatientPage.vue'

const tableHeight = window.innerHeight - 105
const props = defineProps({
    reportFirst: {
        type: Object,
        default: {}
    }
})
nextTick(() => {
    showFirstPst()
})
// 报表基本信息
const reportInfo1 = ref({})
// 报表展示值
const reportData = ref({})
// 表格展示信息
const tableData = ref({})
// 查询信息
const param1 = ref({})

const x1Name = ref('')
const y1Name = ref('')
const kssj1 = ref('')
const jssj1 = ref('')

reportData.value = props.reportFirst.data
reportInfo1.value = props.reportFirst.row
tableData.value = props.reportFirst.tableInfo
param1.value = props.reportFirst.params
kssj1.value = props.reportFirst.kssj
jssj1.value = props.reportFirst.jssj

const showFirstPst = () => {
    let barTitle = reportInfo1.value.reportName
    let yAxisName = '单位：' + reportInfo1.value.unit
    let tipUnit = reportInfo1.value.unit
    let xdata = []
    let ydata = []
    let pieData = []
    x1Name.value = tableData.value.fstName
    y1Name.value = reportInfo1.value.unit

    reportData.value.forEach((item) => {
        let pieInfo = {}
        pieInfo.value = item.y
        pieInfo.name = item.x
        pieInfo.unit = reportInfo1.value.unit
        xdata.push(item.x)
        ydata.push(item.y)
        pieData.push(pieInfo)
    })

    highBarUtils(firstDst, barTitle, xdata, ydata, barTitle, yAxisName, tipUnit, 1)
    highPieUtils(firstPie, barTitle, pieData)
}

// 钻取的查询结果
const sndDrawer = ref(false)
const reportSecond = ref({})
const patientDrawer = ref(false)
const reportPatient = ref({})
const titleChart = ref('')
const reportSecondInfo = (row) => {
    reportInfo1.value.fstName = row.x
    reportInfo1.value.fstValue = row.y
    let params = clone(param1.value)
    params.fstName = row.x
    // 下一级是病人，则走最后固定的病人明细展示页面
    let sndGroup = tableData.value.sndGroup
    if (sndGroup === 'patient') {
        titleChart.value = reportInfo1.value.reportName
        patientDrawer.value = true
        reportPatient.value.row = reportInfo1.value
        reportPatient.value.params = clone(params)
    } else {
        selectReportGroup(params).then((res) => {
            reportSecond.value = res
            titleChart.value = res.title
            sndDrawer.value = true
            reportSecond.value.row = reportInfo1.value
            reportSecond.value.kssj = kssj1.value
            reportSecond.value.jssj = jssj1.value
            reportSecond.value.params = clone(params)
        })
    }
}

// 直接查询病人明细结果
const patientMxDrawer = ref(false)
const selectReportMx = () => {
    let params = clone(param1.value)
    titleChart.value = reportInfo1.value.reportName
    patientMxDrawer.value = true
    reportPatient.value.row = reportInfo1.value
    reportPatient.value.params = clone(params)
}

const exportReportFirst = () => {
    if (reportData.value.length <= 0) {
        ElMessage({
            message: '没有可以导出的数据！',
            type: 'warning',
            duration: 2500,
            showClose: true,
        })
    }

    let title = {
        x: x1Name.value,
        y: y1Name.value
    }
    Export(reportData.value, title, reportInfo1.value.reportName);
}

</script>