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

<template>
    <page-layer>
        <template #header>
            <div style="text-align: center">
                统计日期:
                <span v-if="kssj3" style="color: #fc6c34;">
                    {{ kssj3 }} 至 {{ jssj3 }}
                </span>
                <span v-else style="color: #fc6c34;">当前</span>
                统计机构名称：<span style="color: #fc6c34;">长沙泰和医院</span>
                指标名称: <span style="color: #fc6c34;">{{ reportInfo3.reportName }}</span>
                统计结果描述: <span style="color: #fc6c34;">{{ reportInfo3.overview }}{{ reportInfo3.unit }}</span>
                其中<span style="color: #3742fa;">&nbsp;{{ reportInfo3.fstName }}: </span>
                <span style="color: #fc6c34;">{{ reportInfo3.fstValue }}{{ reportInfo3.unit }}</span>
                <span style="color: #3742fa;">&nbsp;{{ reportInfo3.sndName }}: </span>
                <span style="color: #fc6c34;">{{ reportInfo3.sndValue }}{{ reportInfo3.unit }}</span>
            </div>
            <el-button type="primary" icon="Search" style="margin-left: 10px;">返回</el-button>
        </template>
        <template #aside>
            <el-table :data="reportData" :height="tableHeight" highlight-current-row row-key="childKey" stripe border
                @row-dblclick="dbClickPatient">
                <el-table-column prop="x" :label="x3Name" width="120"></el-table-column>
                <el-table-column prop="y" :label="y3Name"></el-table-column>
            </el-table>
        </template>
        <template #main>
            <div style="width: 80%; height: 400px; margin-bottom: 5px;" id="thirdPie"></div>
            <div style="width: 80%; height: 400px" id="thirdDst"></div>
        </template>
    </page-layer>
    <el-dialog :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 PageLayer from '@/layout/PageLayer.vue'
import { highBarUtils, highPieUtils } from '@/utils/high-charts'
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({
    reportThird: {
        type: Object,
        default: {}
    }
})
nextTick(() => {
    showSecondPst()
})
// 报表基本信息
const reportInfo3 = ref({})
// 报表展示值
const reportData = ref({})
// 表格展示信息
const tableData = ref({})

const x3Name = ref('')
const y3Name = ref('')
const kssj3 = ref('')
const jssj3 = ref('')

reportData.value = props.reportThird.data
reportInfo3.value = props.reportThird.row
kssj3.value = props.reportSecond.kssj
jssj3.value = props.reportSecond.jssj
tableData.value = props.reportThird.tableInfo

const showSecondPst = () => {
    let barTitle = reportInfo3.value.reportName
    let yAxisName = '单位：' + reportInfo3.value.unit
    let tipUnit = reportInfo3.value.unit
    let xdata = []
    let ydata = []
    let pieData = []
    x3Name.value = tableData.value.trdName
    y3Name.value = reportInfo3.value.unit

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

    highBarUtils(thirdDst, barTitle, xdata, ydata, barTitle, yAxisName, tipUnit, 1)
    highPieUtils(thirdPie, barTitle, pieData)
}

// 钻取病人的查询结果（目前仅限钻取这一层之后必须是病人页）
const patientDrawer = ref(false)
const reportPatient = ref({})
const titleChart = ref('')
const dbClickPatient = (row) => {
    reportInfo3.value.trdName = row.x
    titleChart.value = reportInfo3.value.reportName
    reportPatient.value.row = reportInfo3.value
    patientDrawer.value = true
}
</script>