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

<template>
    <page-layer>
        <template #header>
            <div style="text-align: center">
                统计日期:
                <span v-if="kssj2" style="color: #fc6c34;">
                    {{ kssj2 }} 至 {{ jssj2 }}
                </span>
                <span v-else style="color: #fc6c34;">当前</span>
                统计机构名称：<span style="color: #fc6c34;">长沙泰和医院</span>
                指标名称: <span style="color: #fc6c34;">{{ reportInfo2.reportName }}</span>
                统计结果描述: <span style="color: #fc6c34;">{{ reportInfo2.overview }}{{ reportInfo2.unit }}</span>
                其中<span style="color: #3742fa;">&nbsp;{{ reportInfo2.fstName }}: </span>
                <span style="color: #fc6c34;">{{ reportInfo2.fstValue }}{{ reportInfo2.unit }}</span>
            </div>
        </template>
        <template #aside>
            <el-table :data="reportData" :height="tableHeight" highlight-current-row row-key="childKey" stripe border
                @row-dblclick="reportThirdInfo">
                <el-table-column prop="x" :label="x2Name" width="120"></el-table-column>
                <el-table-column prop="y" :label="y2Name"></el-table-column>
            </el-table>
        </template>
        <template #main>
            <div style="width: 80%; height: 400px; margin-bottom: 5px;" id="secondPie"></div>
            <div style="width: 80%; height: 400px" id="secondDst"></div>
        </template>
    </page-layer>
    <el-dialog v-if="props.reportSecond.tableInfo.trdGroup !== 'patient'" :title="titleChart" v-model="thirdDrawer"
        fullscreen destroy-on-close>
        <ReportThirdPage :reportThird="reportThird" />
    </el-dialog>
    <el-dialog v-else :title="titleChart" v-model="patientDrawer" width="80%" height="80%" top="40px" draggable destroy-on-close>
        <ReportPatientPage :reportPatient="reportPatient" />
    </el-dialog>
</template>
<script setup name="ReportFirst">
import { ref } from "vue"
import { useStore } from 'vuex'
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 ReportThirdPage from '@/components/operate-monitoring/ReportThirdPage.vue'
import ReportPatientPage from '@/components/operate-monitoring/ReportPatientPage.vue'

const storeU = useStore()
const windowSize = storeU.state.app.windowSize
const tableHeight = windowSize.h - 105
const props = defineProps({
    reportSecond: {
        type: Object,
        default: {}
    }
})
nextTick(() => {
    showSecondPst()
})
// 报表基本信息
const reportInfo2 = ref({})
// 报表展示值
const reportData = ref({})
// 表格展示信息
const tableData = ref({})
// 查询信息
const param2 = ref({})

const x2Name = ref('')
const y2Name = ref('')
const kssj2 = ref('')
const jssj2 = ref('')

reportData.value = props.reportSecond.data
reportInfo2.value = props.reportSecond.row
tableData.value = props.reportSecond.tableInfo
param2.value = props.reportSecond.params
kssj2.value = props.reportSecond.kssj
jssj2.value = props.reportSecond.jssj

const showSecondPst = () => {
    let barTitle = reportInfo2.value.reportName
    let yAxisName = '单位：' + reportInfo2.value.unit
    let tipUnit = reportInfo2.value.unit
    let xdata = []
    let ydata = []
    let pieData = []
    x2Name.value = tableData.value.sndName
    y2Name.value = reportInfo2.value.unit

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

    highBarUtils(secondDst, barTitle, xdata, ydata, barTitle, yAxisName, tipUnit, 1)
    highPieUtils(secondPie, barTitle, pieData)
}

// 钻取的查询结果
const thirdDrawer = ref(false)
const reportThird = ref({})
const patientDrawer = ref(false)
const reportPatient = ref({})
const titleChart = ref('')
const reportThirdInfo = (row) => {
    reportInfo2.value.sndName = row.x
    reportInfo2.value.sndValue = row.y
    let params = clone(param2.value)
    params.sndName =  row.x
    // 下一级是病人，则走最后固定的病人明细展示页面
    let trdGroup = tableData.value.trdGroup
    if (trdGroup === 'patient') {
        titleChart.value = reportInfo2.value.reportName
        patientDrawer.value = true
        reportPatient.value.row = reportInfo2.value
        reportPatient.value.params = clone(params)
    } else {
        selectReportGroup(params).then((res) => {
            reportThird.value = res
            titleChart.value = res.title
            thirdDrawer.value = true
            reportThird.value.row = reportInfo2.value
            reportThird.value.kssj = kssj2.value
            reportThird.value.jssj = jssj2.value
            reportThird.value.params = clone(params)
        })
    }
}
</script>