<template>
|
<div class="app-container">
|
<!-- 筛选条件卡片 -->
|
<el-card class="filter-card">
|
<el-row :gutter="16">
|
<el-col :xs="24" :sm="8" :md="6">
|
<el-date-picker
|
v-model="selecttime"
|
type="monthrange"
|
range-separator="至"
|
start-placeholder="开始月份"
|
end-placeholder="结束月份"
|
style="width: 100%"
|
value-format="yyyy-MM-dd"
|
@change="getTimeList"
|
/>
|
</el-col>
|
<el-col :xs="24" :sm="8" :md="6">
|
<el-select
|
v-model="reportervalue"
|
placeholder="请选择报告人"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in reportlist"
|
:key="item.index"
|
:label="item.reportername"
|
:value="item.reporterno"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :xs="24" :sm="8" :md="6">
|
<el-select
|
v-model="city"
|
placeholder="请选择所属地市"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in provinceData"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="6">
|
<div class="action-buttons">
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
@click="selectdatas"
|
>
|
搜索
|
</el-button>
|
<el-button icon="el-icon-refresh" @click="resetFilters">
|
重置
|
</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<!-- 数据概览区域 -->
|
<el-card class="overview-card">
|
<template #header>
|
<div class="card-header">
|
<span class="header-title">数据概览</span>
|
<span class="header-subtitle">实时统计指标</span>
|
</div>
|
</template>
|
|
<el-row :gutter="16">
|
<!-- 第一行统计卡片 -->
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Donatebaseinfo',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #409EFF;">
|
<svg-icon icon-class="user" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfDonate }}
|
</div>
|
<div class="stat-title">上报案例累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Medicalevaluation',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #67C23A;">
|
<svg-icon icon-class="tool" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfMedicalEvaluation }}
|
</div>
|
<div class="stat-title">捐献案例累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Relativesconfirmation',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #E6A23C;">
|
<svg-icon icon-class="checkbox" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfRelativeConfirmation }}
|
</div>
|
<div class="stat-title">供体转运累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'EthicalReview',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #F56C6C;">
|
<svg-icon icon-class="education" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfEthicalReview }}
|
</div>
|
<div class="stat-title">亲属确认累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<!-- 第二行统计卡片 -->
|
<el-col :xs="12" :sm="6" :md="3">
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #909399;">
|
<svg-icon icon-class="druid" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfDonatePeople }}
|
</div>
|
<div class="stat-title">完成伦理审查累计</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Donationwitness',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #B37FEB;">
|
<svg-icon icon-class="job" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfWitness }}
|
</div>
|
<div class="stat-title">完成器官分配累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Donatefinish',
|
params: { ...routeParams }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #FF85C0;">
|
<svg-icon icon-class="lock" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfCompletion }}
|
</div>
|
<div class="stat-title">完成获取累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
|
<el-col :xs="12" :sm="6" :md="3">
|
<router-link
|
:to="{
|
name: 'Donatebaseinfo',
|
params: { ...routeParams, terminationcase: 1 }
|
}"
|
class="stat-card-link"
|
>
|
<el-card class="stat-card" shadow="hover">
|
<div class="stat-content">
|
<div class="stat-icon" style="background-color: #5DC8EF;">
|
<svg-icon icon-class="lock" />
|
</div>
|
<div class="stat-info">
|
<div class="stat-value">
|
{{ donateNumData.numberOfTerminated }}
|
</div>
|
<div class="stat-title">捐献终止累计</div>
|
</div>
|
</div>
|
</el-card>
|
</router-link>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<!-- 指标分析区域 -->
|
<el-row :gutter="16" class="analysis-section">
|
<el-col :xs="24" :lg="12">
|
<el-card class="chart-card">
|
<template #header>
|
<div class="card-header">
|
<span>指标数据分析</span>
|
<router-link
|
:to="{
|
name: 'DonationProcess',
|
params: { ...routeParams, terminationcase: 1 }
|
}"
|
>
|
<el-button type="primary" size="small" round
|
>捐献进程</el-button
|
>
|
</router-link>
|
</div>
|
</template>
|
<div class="metrics-wrapper">
|
<div class="metrics-grid">
|
<div class="metric-item">
|
<div class="metric-title">器官捐献转化率</div>
|
<div class="metric-value">
|
{{ (qualirtData.donateTransferRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">平均器官产出率</div>
|
<div class="metric-value">
|
{{ (qualirtData.organProductionRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">获取器官利用率</div>
|
<div class="metric-value">
|
{{ (qualirtData.organUsedRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item full-width">
|
<div class="metric-title">器官捐献分类占比</div>
|
<div class="metric-breakdown">
|
<span
|
>DBD:
|
{{ (qualirtData.dbddonateRate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DCD:
|
{{ (qualirtData.dcddonateRate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DBCD:
|
{{ (qualirtData.dbcddonateRate * 100).toFixed(2) }}%</span
|
>
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">获取前活检率</div>
|
<div class="metric-value">
|
{{ (qualirtData.organBeforeGetCheckRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">获取后活检率</div>
|
<div class="metric-value">
|
{{ (qualirtData.organAfterGetCheckRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">边缘供器官比率</div>
|
<div class="metric-value">
|
{{ (qualirtData.marginOrganRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item">
|
<div class="metric-title">器官保存液病原菌培养阳性率</div>
|
<div class="metric-value">
|
{{ (qualirtData.germPositiveRate * 100).toFixed(2) }}%
|
</div>
|
</div>
|
|
<div class="metric-item full-width">
|
<div class="metric-title">移植器官原发性无功能发生率</div>
|
<div class="metric-breakdown">
|
<span
|
>总: {{ (qualirtData.totalPNFRate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DBD: {{ (qualirtData.dbdpnfrate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DCD: {{ (qualirtData.dcdpnfrate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DBCD: {{ (qualirtData.dbcdpnfrate * 100).toFixed(2) }}%</span
|
>
|
</div>
|
</div>
|
|
<div class="metric-item full-width">
|
<div class="metric-title">移植器官术后功能延迟性恢复发生率</div>
|
<div class="metric-breakdown">
|
<span
|
>总: {{ (qualirtData.totalDGFRate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DBD: {{ (qualirtData.dbddgfrate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DCD: {{ (qualirtData.dcddgfrate * 100).toFixed(2) }}%</span
|
>
|
<span
|
>DBCD: {{ (qualirtData.dbcddgfrate * 100).toFixed(2) }}%</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :xs="24" :lg="12">
|
<el-card class="chart-card">
|
<template #header>
|
<div class="card-header">
|
<span>器官数量统计</span>
|
</div>
|
</template>
|
<OrganNumChart :cdata="organData" :CommonOrgan="CommonOrgan" />
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { getUserProfile } from "@/api/system/user";
|
import { listDonatebaseinfo } from "@/api/project/donatebaseinfo";
|
import { listnewMedicalevaluation } from "@/api/project/medicalevaluation";
|
import { listnewRelativesconfirmation } from "@/api/project/relativesconfirmation";
|
import { listnewEthicalreviewopinions } from "@/api/project/ethicalreviewopinions";
|
import { listOrganallocation } from "@/api/project/organallocation";
|
import { listnewDonationwitness } from "@/api/project/donationwitness";
|
import { listnewDonatecompletioninfo } from "@/api/project/donatecompletioninfo";
|
import {
|
getDonateorganSum,
|
getOrgansOfHospitalByMonth,
|
getOrgansQuality
|
} from "@/api/project/donateorgan";
|
import OrganNumChart from "./components/organnumchart";
|
import dayjs from "dayjs";
|
import {
|
listSystemmessageList,
|
listSystemmessageCount,
|
updateSystemmessage
|
} from "@/api/project/message";
|
|
import Li_area_select from "@/components/Address";
|
|
const DEF_TABLE_CONFIG = {
|
data: [],
|
oddRowBGC: "#f9f9f9",
|
evenRowBGC: "white",
|
columnWidth: [150, 300, 30, 10, 30],
|
rowNum: 14
|
};
|
|
export default {
|
name: "home",
|
dicts: ["sys_messagestatus"],
|
components: {
|
OrganNumChart,
|
Li_area_select
|
},
|
props: {},
|
data() {
|
return {
|
city: "",
|
reportervalue: "",
|
selecttime: [new Date(new Date().getFullYear(), 0), new Date()],
|
starttime: dayjs().format("YYYY-01-01 00:00:00"),
|
endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
|
provinceData: [
|
{ label: "全部地市", value: "" },
|
{ label: "杭州市", value: "1" },
|
{ label: "宁波市", value: "2" },
|
{ label: "温州市", value: "3" },
|
{ label: "嘉兴市", value: "4" },
|
{ label: "湖州市", value: "5" },
|
{ label: "绍兴市", value: "6" },
|
{ label: "金华市", value: "7" },
|
{ label: "衢州市", value: "8" },
|
{ label: "舟山市", value: "9" },
|
{ label: "台州市", value: "A" },
|
{ label: "丽水市", value: "B" }
|
],
|
|
reportlist: [],
|
|
organData: [
|
{
|
key: "heart",
|
name: "心脏",
|
value: 0,
|
value1: 0,
|
code: "C38"
|
},
|
{
|
key: "fullLiver",
|
name: "肝脏",
|
value: 0,
|
value1: 0,
|
|
code: "C22"
|
},
|
{
|
key: "Lefthalfliver",
|
name: "左半肝",
|
value: 0,
|
value1: 0,
|
|
code: "C22L"
|
},
|
{
|
key: "Leftouterlobe",
|
name: "左外叶",
|
value: 0,
|
value1: 0,
|
|
code: "C22L0"
|
},
|
{
|
key: "Righthalfliver",
|
name: "右半肝",
|
value: 0,
|
value1: 0,
|
|
code: "C22R"
|
},
|
{
|
key: "RML",
|
name: "右三叶",
|
value: 0,
|
value1: 0,
|
|
code: "C22R0"
|
},
|
|
{
|
key: "leftRenal",
|
name: "左肾",
|
value: 0,
|
value1: 0,
|
|
code: "C64L"
|
},
|
{
|
key: "rightRenal",
|
name: "右肾",
|
value: 0,
|
value1: 0,
|
|
code: "C64R"
|
},
|
{
|
key: "fullLung",
|
name: "全肺",
|
value: 0,
|
value1: 0,
|
|
code: "C34"
|
},
|
{
|
key: "leftLung",
|
name: "左肺",
|
value: 0,
|
value1: 0,
|
|
code: "C34L"
|
},
|
{
|
key: "rightLung",
|
name: "右肺",
|
value: 0,
|
value1: 0,
|
|
code: "C34R"
|
},
|
{
|
key: "",
|
name: "小肠",
|
value: 0,
|
value1: 0,
|
|
code: "C17"
|
},
|
{
|
key: "",
|
name: "胰腺",
|
value: 0,
|
value1: 0,
|
|
code: "C25"
|
},
|
{
|
key: "leftEye",
|
name: "左眼膜",
|
value: 0,
|
value1: 0,
|
|
code: "C69L"
|
},
|
{
|
key: "rightEye",
|
name: "右眼膜",
|
value: 0,
|
value1: 0,
|
|
code: "C69R"
|
},
|
{
|
key: "",
|
name: "其它",
|
value: 0,
|
value1: 0,
|
|
code: "C01"
|
}
|
// {
|
// key: "body",
|
// name: "遗体",
|
// value: 0,
|
// },
|
],
|
tableData: [
|
{
|
date: "2016-05-02",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄"
|
},
|
{
|
date: "2016-05-04",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1517 弄"
|
},
|
{
|
date: "2016-05-01",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1519 弄"
|
},
|
{
|
date: "2016-05-03",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1516 弄"
|
}
|
],
|
qualirtData: {
|
dbcddgfrate: 0,
|
dbcddonateRate: 0,
|
dbcdpnfrate: 0,
|
dbddgfrate: 0,
|
dbddonateRate: 0,
|
dbdpnfrate: 0,
|
dcddgfrate: 0,
|
dcddonateRate: 0,
|
dcdpnfrate: 0,
|
donateTransferRate: 0,
|
germPositiveRate: 0,
|
marginOrganRate: 0,
|
organAfterGetCheckRate: 0,
|
organBeforeGetCheckRate: 0,
|
organProductionRate: 0,
|
organUsedRate: 0,
|
totalDGFRate: 0,
|
totalPNFRate: 0
|
},
|
|
donateNumData: {
|
numberOfCompletion: 0,
|
numberOfDonate: 0,
|
numberOfEthicalReview: 0,
|
numberOfMedicalEvaluation: 0,
|
numberOfOrgans: 0,
|
numberOfRelativeConfirmation: 0,
|
numberOfWitness: 0,
|
numberOfTerminated: 0,
|
numberOfDonatePeople: 0
|
},
|
|
CommonOrgan: {
|
countSum: 1,
|
abandonCountSum: 0
|
},
|
config: {
|
...DEF_TABLE_CONFIG
|
},
|
reportlist: [],
|
reportervalue: "",
|
searchAddress: {
|
sheng: "浙江省",
|
shi: "",
|
qu: ""
|
}
|
};
|
},
|
// listnewEthicalreviewopinions
|
created() {
|
// this.listnewMedicalevaluation()
|
this.GetUser();
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.GetDonateOrganNum();
|
this.GetDonateOrganQuality();
|
this.GetOrgDonateNumNew();
|
this.GetOrgDonateNum();
|
});
|
},
|
methods: {
|
// 获取用户信息
|
GetUser() {
|
getUserProfile()
|
.then(res => {
|
this.userInfo = res.data;
|
})
|
.catch(error => {
|
console.error("获取用户信息失败:", error);
|
});
|
},
|
|
// 重置筛选条件
|
resetFilters() {
|
this.selecttime = [new Date(new Date().getFullYear(), 0), new Date()];
|
this.reportervalue = "";
|
this.city = "";
|
this.getTimeList();
|
this.selectdatas();
|
},
|
|
// 时间选择处理
|
getTimeList(e) {
|
if (this.selecttime && this.selecttime.length === 2) {
|
this.starttime = this.selecttime[0] + " 00:00:00";
|
let endDate = new Date(this.selecttime[1]);
|
endDate.setMonth(endDate.getMonth() + 1);
|
endDate.setDate(0);
|
this.endtime = dayjs(endDate).format("YYYY-MM-DD 23:59:59");
|
} else {
|
this.starttime = dayjs().format("YYYY-01-01 00:00:00");
|
this.endtime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
}
|
},
|
|
// 搜索数据
|
selectdatas() {
|
this.GetDonateOrganNum();
|
this.GetDonateOrganQuality();
|
this.GetOrgDonateNumNew();
|
this.GetOrgDonateNum();
|
},
|
|
// 获取器官数量统计
|
GetDonateOrganNum() {
|
let param = {
|
starttime: this.starttime,
|
endtime: this.endtime,
|
city: this.city
|
};
|
|
if (this.reportervalue) {
|
param.reporterno = this.reportervalue;
|
}
|
|
getDonateorganSum(param).then(response => {
|
if (response.code === 200) {
|
// this.CommonOrgan = response.data || {
|
// countSum: 1,
|
// abandonCountSum: 0
|
// };
|
// let list = response.data.organInfoVOList || [];
|
// this.organData.forEach(item => {
|
// const found = list.find(organ => organ.organNo === item.code);
|
// if (found) {
|
// item.value = found.count || 0;
|
// item.value1 = found.abandonCount || 0;
|
// }
|
// });
|
}
|
});
|
},
|
|
// 获取质量指标数据
|
GetDonateOrganQuality() {
|
let param = {
|
starttime: this.starttime,
|
endtime: this.endtime,
|
city: this.city
|
};
|
|
getOrgansQuality(param).then(response => {
|
if (response.code === 200) {
|
this.qualirtData = response.data;
|
}
|
});
|
},
|
|
// 获取统计数据
|
GetOrgDonateNumNew() {
|
const info = {
|
starttime: this.starttime,
|
endtime: this.endtime
|
};
|
|
if (this.reportervalue) {
|
info.reporterno = this.reportervalue;
|
}
|
if (this.city) {
|
info.city = this.city;
|
}
|
|
// 并行获取所有统计数据
|
Promise.all([
|
listDonatebaseinfo(info).then(res => {
|
this.donateNumData.numberOfDonate = res.total || 0;
|
}),
|
|
listnewMedicalevaluation(info).then(res => {
|
this.donateNumData.numberOfMedicalEvaluation = res.total || 0;
|
}),
|
|
listnewRelativesconfirmation(info).then(res => {
|
this.donateNumData.numberOfRelativeConfirmation = res.total || 0;
|
}),
|
|
listnewEthicalreviewopinions(info).then(res => {
|
this.donateNumData.numberOfEthicalReview = res.total || 0;
|
}),
|
|
listOrganallocation(info).then(res => {
|
this.donateNumData.numberOfDonatePeople = res.total || 0;
|
}),
|
|
listnewDonationwitness(info).then(res => {
|
this.donateNumData.numberOfWitness = res.total || 0;
|
}),
|
|
listnewDonatecompletioninfo(info).then(res => {
|
this.donateNumData.numberOfCompletion = res.total || 0;
|
}),
|
|
listDonatebaseinfo({ ...info, terminationCase: 1 }).then(res => {
|
this.donateNumData.numberOfTerminated = res.total || 0;
|
})
|
]).then(() => {
|
this.loadReportList();
|
});
|
},
|
|
// 加载报告人列表
|
loadReportList() {
|
listDonatebaseinfo({}).then(res => {
|
let list = res.rows || [];
|
let reportlist = [{ reporterno: "", reportername: "全部人员" }];
|
|
list.forEach(element => {
|
if (element.reporterno && element.reportername) {
|
reportlist.push({
|
reporterno: element.reporterno,
|
reportername: element.reportername
|
});
|
}
|
});
|
|
this.reportlist = this.resetArr(reportlist);
|
});
|
},
|
|
// 数组去重
|
resetArr(Arr) {
|
const hash = {};
|
return Arr.reduce((arr, current) => {
|
if (!hash[current.reporterno]) {
|
hash[current.reporterno] = true;
|
arr.push(current);
|
}
|
return arr;
|
}, []);
|
},
|
|
//获取医院机构捐献数量
|
GetOrgDonateNum() {
|
// let time1 = new Date(this.starttime).getTime()
|
// let staettime1= dayjs(time1).format('YYYY-MM-DD HH:mm:ss')
|
// let time2 = new Date(this.starttime).getTime()
|
// let staettime2= dayjs(time2).format('YYYY-MM-DD HH:mm:ss')
|
// console.log('判断类型',staettime1,staettime2)
|
// this.starttime = new Date(this.starttime).getTime();
|
// this.endtime = new Date(this.endtime).getTime()
|
let param = {
|
starttime: this.starttime,
|
endtime: this.endtime
|
// city:'1',
|
// repoterno:'015'
|
};
|
if (this.city != "") {
|
param.city = this.city;
|
}
|
if (this.reportervalue != "") {
|
param.repoterno = this.reportervalue;
|
}
|
// getOrgansOfHospital
|
// getOrgansOfHospitalByMonth
|
getOrgansOfHospitalByMonth(param).then(response => {
|
if (response.code == 200) {
|
let newConfig = {
|
...DEF_TABLE_CONFIG
|
};
|
let arr = response.data;
|
let dataList = [];
|
dataList = response.data.map(item => {
|
let li = [];
|
li.push(
|
item.month == null
|
? '<span style="color:#566f94;font-weight:bold">0</span>'
|
: '<span style="color:#566f94;font-weight:bold">' +
|
item.month +
|
"</span>"
|
);
|
li.push(
|
'<span style="color:#566f94;font-weight:bold">' +
|
item.hospitalName +
|
"</span>"
|
);
|
|
li.push(
|
item.completionCount == null
|
? '<span style="color:#566f94;font-weight:bold">0</span>'
|
: '<span style="color:#566f94;font-weight:bold">' +
|
item.completionCount +
|
"</span>"
|
);
|
li.push('<span style="color:#566f94;font-weight:bold">/</span>');
|
li.push(
|
item.baseInfoCount == null
|
? '<span style="color:#566f94;font-weight:bold">0</span>'
|
: '<span style="color:#566f94;font-weight:bold">' +
|
item.baseInfoCount +
|
"</span>"
|
);
|
return li;
|
});
|
newConfig.data = dataList;
|
this.config = newConfig;
|
}
|
});
|
},
|
|
//关闭基础捐献页签
|
closeBaseInfoTab() {
|
// 关闭指定页签
|
// const obj = { path: "/organ/donatebaseinfo", name: "Donatebaseinfo" };
|
// console.log(this.$tab)
|
// this.$tab.closePage(obj);
|
}
|
},
|
computed: {
|
routeParams() {
|
return {
|
starttime: this.starttime,
|
endtime: this.endtime,
|
tempRecordState: "",
|
reporterno: this.reportervalue,
|
shen: this.searchAddress?.shen || "",
|
shi: this.searchAddress?.shi || "",
|
qu: this.searchAddress?.qu || "",
|
city: this.city
|
};
|
}
|
},
|
watch: {}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
min-height: 100vh;
|
}
|
|
.filter-card {
|
margin-bottom: 24px;
|
border-radius: 12px;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
border: none;
|
background: rgba(255, 255, 255, 0.95);
|
|
:deep(.el-card__body) {
|
padding: 20px;
|
}
|
}
|
|
.overview-card {
|
margin-bottom: 24px;
|
border-radius: 12px;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
border: none;
|
background: rgba(255, 255, 255, 0.95);
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.header-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.header-subtitle {
|
font-size: 14px;
|
color: #909399;
|
}
|
}
|
|
:deep(.el-card__body) {
|
padding: 20px;
|
}
|
}
|
.metrics-wrapper { // 左侧内容区域固定 320px，溢出自动滚动
|
height: 590px; // 和右侧图表默认高一样，也可以改成 350 / 400 …
|
overflow-y: auto;
|
padding-right: 4px; // 留一点滚动条位置，避免文字贴边
|
}
|
.chart-card {
|
border-radius: 12px;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
border: none;
|
background: rgba(255, 255, 255, 0.95);
|
height: 100%;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
|
:deep(.el-card__body) {
|
padding: 20px;
|
}
|
}
|
|
.stat-card-link {
|
text-decoration: none;
|
display: block;
|
|
&:hover {
|
text-decoration: none;
|
}
|
}
|
|
.stat-card {
|
border-radius: 8px;
|
transition: all 0.3s ease;
|
border: none;
|
margin-bottom: 16px;
|
background: linear-gradient(135deg, #fff 60%, #f8f9fa 100%);
|
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
}
|
|
.stat-content {
|
display: flex;
|
align-items: center;
|
padding: 16px;
|
}
|
|
.stat-icon {
|
width: 48px;
|
height: 48px;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
|
.svg-icon {
|
font-size: 24px;
|
color: white;
|
}
|
}
|
|
.stat-info {
|
flex: 1;
|
|
.stat-value {
|
font-size: 24px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 4px;
|
}
|
|
.stat-title {
|
font-size: 14px;
|
color: #606266;
|
line-height: 1.4;
|
}
|
}
|
}
|
|
.metrics-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
gap: 16px;
|
margin-top: 16px;
|
}
|
|
.metric-item {
|
background: linear-gradient(135deg, #fafdff 0%, #e3f0ff 100%);
|
border-radius: 8px;
|
padding: 16px;
|
text-align: center;
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
&.full-width {
|
grid-column: 1 / -1;
|
}
|
|
.metric-title {
|
font-size: 12px;
|
color: #606266;
|
margin-bottom: 8px;
|
font-weight: 500;
|
}
|
|
.metric-value {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.metric-breakdown {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
gap: 8px;
|
|
span {
|
font-size: 12px;
|
color: #606266;
|
background: rgba(255, 255, 255, 0.7);
|
padding: 4px 8px;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.action-buttons {
|
display: flex;
|
gap: 12px;
|
justify-content: flex-end;
|
|
@media (max-width: 768px) {
|
justify-content: stretch;
|
|
.el-button {
|
flex: 1;
|
}
|
}
|
}
|
|
.analysis-section {
|
margin-top: 24px;
|
|
}
|
|
// 响应式调整
|
@media (max-width: 1200px) {
|
.metrics-grid {
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
}
|
}
|
|
@media (max-width: 768px) {
|
.app-container {
|
padding: 12px;
|
}
|
|
.filter-card,
|
.overview-card,
|
.chart-card {
|
margin-bottom: 16px;
|
|
:deep(.el-card__body) {
|
padding: 16px;
|
}
|
}
|
|
.stat-card .stat-content {
|
padding: 12px;
|
|
.stat-icon {
|
width: 40px;
|
height: 40px;
|
margin-right: 8px;
|
|
.svg-icon {
|
font-size: 20px;
|
}
|
}
|
|
.stat-info {
|
.stat-value {
|
font-size: 20px;
|
}
|
|
.stat-title {
|
font-size: 12px;
|
}
|
}
|
}
|
|
.metrics-grid {
|
grid-template-columns: 1fr;
|
gap: 12px;
|
}
|
|
.metric-item {
|
padding: 12px;
|
|
.metric-value {
|
font-size: 16px;
|
}
|
}
|
}
|
|
// 动画效果
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.5s ease;
|
}
|
|
.fade-enter-from,
|
.fade-leave-to {
|
opacity: 0;
|
}
|
</style>
|
