From 8a5b241f74d1ab28e0badbd5ae6ee7c1b173ef52 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期五, 05 九月 2025 14:50:34 +0800
Subject: [PATCH] 测试完成
---
src/views/sfstatistics/percentage/index.vue | 584 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 421 insertions(+), 163 deletions(-)
diff --git a/src/views/sfstatistics/percentage/index.vue b/src/views/sfstatistics/percentage/index.vue
index a9288cf..1b061e9 100644
--- a/src/views/sfstatistics/percentage/index.vue
+++ b/src/views/sfstatistics/percentage/index.vue
@@ -1,37 +1,6 @@
<template>
<div class="Questionnairemanagement">
- <!-- 宸︿晶鏍� -->
- <!-- <div class="sidecolumn">
- <div class="sidecolumn-top">
- <div class="top-wj">鎮ｈ�呰寖鍥�</div>
- </div>
-
- <div class="bottom-fl">
- <el-tabs
- tab-position="right"
- v-model="activeName"
- @tab-click="handleClick"
- >
- <el-tab-pane label="鍏ㄩ儴" name="first"></el-tab-pane>
- <el-tab-pane label="浣忛櫌" name="bhospitalized"></el-tab-pane>
- <el-tab-pane label="鍦ㄩ櫌" name="Inhospital"></el-tab-pane>
- <el-tab-pane label="闂ㄨ瘖" name="outpatient"></el-tab-pane>
- <el-tab-pane label="浣撴" name="physical"></el-tab-pane>
- </el-tabs>
- </div>
- </div> -->
- <!-- 鍙充晶鏁版嵁 -->
<div class="leftvlue">
- <!-- <div class="leftvlue-top">
- <el-tabs v-model="topactiveName" @tab-click="tophandleClick">
- <el-tab-pane name="Local">
- <span class="mulsz" slot="label">鎸夊嚭闄㈢梾鍖虹粺璁� </span>
- </el-tab-pane>
- <el-tab-pane name="sharing">
- <span class="mulsz" slot="label">鎸夊嚭闄㈢瀹ょ粺璁� </span>
- </el-tab-pane>
- </el-tabs>
- </div> -->
<div class="leftvlue-bg">
<el-row :gutter="20">
<!--鏍囩鏁版嵁-->
@@ -44,12 +13,6 @@
v-show="showSearch"
label-width="98px"
>
- <!-- <el-form-item label="璐ｄ换鍖荤敓" prop="userName">
- <el-input
- v-model="queryParams.drname"
- placeholder="璇疯緭鍏ヤ富娌诲尰鐢�"
- ></el-input>
- </el-form-item> -->
<el-form-item label="缁熻绫诲瀷" prop="userName">
<el-select
v-model="queryParams.statisticaltype"
@@ -64,35 +27,34 @@
</el-option>
</el-select>
<el-select
- style="margin-left: 10px"
v-if="queryParams.statisticaltype == 1"
- v-model="queryParams.leavehospitaldistrictcodes"
+ v-model="queryParams.leavehospitaldistrictcode"
size="medium"
multiple
filterable
placeholder="璇烽�夋嫨鐥呭尯"
>
<el-option
- v-for="item in flatArrayhospit"
- :key="item.value"
+ v-for="item in flatArray"
+ :key="item.deptCode"
:label="item.label"
- :value="item.value"
+ :value="item.deptCode"
>
</el-option>
</el-select>
<el-select
v-else-if="queryParams.statisticaltype == 2"
- v-model="queryParams.deptcodes"
+ v-model="queryParams.deptCode"
size="medium"
multiple
filterable
placeholder="璇烽�夋嫨绉戝"
>
<el-option
- v-for="item in flatArraydept"
- :key="item.value"
+ v-for="item in flatArray"
+ :key="item.deptCode"
:label="item.label"
- :value="item.value"
+ :value="item.deptCode"
>
</el-option>
</el-select>
@@ -120,7 +82,6 @@
>
<el-date-picker
v-model="queryParams.dateRange"
- value-format="yyyy-MM-dd"
type="daterange"
range-separator="鑷�"
start-placeholder="寮�濮嬫棩鏈�"
@@ -144,17 +105,30 @@
>閲嶇疆</el-button
>
</el-form-item>
- <el-col :span="19">
+ </el-form>
+
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
<el-button
- type="warning"
+ type="primary"
plain
- icon="el-icon-download"
+ icon="el-icon-plus"
size="medium"
- @click="handleExport"
- >瀵煎嚭</el-button
+ @click="addladeltag"
+ v-hasPermi="['system:user:add']"
+ >鏂板</el-button
+ >
+ <el-button
+ type="primary"
+ plain
+ icon="el-icon-data-line"
+ size="medium"
+ @click="showChartDialog"
+ >缁熻瓒嬪娍鍥�</el-button
>
</el-col>
- </el-form>
+ </el-row>
+
<el-table
v-loading="loading"
:data="userList"
@@ -181,7 +155,7 @@
/>
<el-table-column
label="绉戝"
- width="120"
+ width="120"
prop="deptname"
align="center"
/>
@@ -372,17 +346,8 @@
<el-table-column
label="鍑洪櫌鐥呭尯"
align="center"
- sortable
key="leavehospitaldistrictname"
prop="leavehospitaldistrictname"
- width="150"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- label="绉戝"
- align="center"
- key="deptname"
- prop="deptname"
:show-overflow-tooltip="true"
/>
<el-table-column
@@ -452,24 +417,6 @@
}}%</span
>
</template> -->
- </el-table-column>
- <el-table-column
- label="鍙婃椂鐜�"
- align="center"
- width="120"
- key="rate"
- prop="rate"
- >
- <template slot-scope="scope">
- <el-button
- size="medium"
- type="text"
- @click="Seedetails(scope.row)"
- ><span class="button-zx"
- >{{ (Number(scope.row.rate) * 100).toFixed(2) }}%</span
- ></el-button
- >
- </template>
</el-table-column>
<el-table-column
label="浜哄伐"
@@ -572,6 +519,26 @@
</el-row>
</div>
</div>
+ <!-- 缁熻瓒嬪娍鍥惧脊绐� -->
+ <el-dialog
+ title="闅忚缁熻瓒嬪娍鍥�"
+ :visible.sync="chartDialogVisible"
+ width="80%"
+ :close-on-click-modal="false"
+ >
+ <div class="chart-container">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <div class="chart-title">闅忚鐘舵�佸垎甯�</div>
+ <div id="pieChart" style="width: 100%; height: 400px"></div>
+ </el-col>
+ <el-col :span="12">
+ <div class="chart-title">闅忚瓒嬪娍鍒嗘瀽</div>
+ <div id="barLineChart" style="width: 100%; height: 400px"></div>
+ </el-col>
+ </el-row>
+ </div>
+ </el-dialog>
<el-dialog
title="鏈強鏃堕殢璁挎偅鑰呮湇鍔�"
:visible.sync="SeedetailsVisible"
@@ -807,11 +774,17 @@
import {
toamendtag,
addapitag,
+ detailstag,
deletetag,
changetagcategory,
+ toamendtagcategory,
+ addtagcategory,
+ deletetagcategory,
+ listtag,
+ tagclassifylist,
} from "@/api/system/label";
+import { getSfStatistics, deptTreeSelect } from "@/api/system/user";
import store from "@/store";
-import { getSfStatistics, selectTimelyRate } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -840,7 +813,7 @@
},
];
export default {
- name: "Percentage",
+ name: "questionnaire",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
data() {
@@ -851,6 +824,9 @@
// 閬僵灞�
loading: false,
Seedloading: false,
+ chartDialogVisible: false,
+ pieChart: null,
+ barLineChart: null,
// 閫変腑鏁扮粍
ids: [],
// 闈炲崟涓鐢�
@@ -862,10 +838,9 @@
idds: "", //鍒嗙被id
// 鎬绘潯鏁�
total: 0,
- flatArrayhospit: [],
- flatArraydept: [],
- patienttotal: 0,
- logsheetlist: [],
+ flatArray: [],
+ deptflatArray: [],
+
Statisticallist: [
{
label: "鐥呭尯缁熻",
@@ -876,10 +851,6 @@
value: 2,
},
],
- patientqueryParams: {
- pn: 1,
- ps: 10,
- },
amendtag: false, //鏄惁淇敼绫诲埆
lstamendtag: false, //鏄惁淇敼鏍囩
scavisible: false, //鍒犻櫎寮规
@@ -907,10 +878,6 @@
postOptions: [],
// 瑙掕壊閫夐」
roleOptions: [],
- // 瀛樺偍鎵�鏈夌瀹や唬鐮�
- allDeptCodes: [],
- // 瀛樺偍鎵�鏈夌梾鍖轰唬鐮�
- allWardCodes: [],
// 琛ㄥ崟鍙傛暟
form: {},
forms: {
@@ -922,7 +889,7 @@
goQRCodeVisible: false, //浜岀淮鐮佸脊妗�
sidecolumnval: "", //绫诲埆鎼滅储
propss: { multiple: true },
- SeedetailsVisible: false,
+
options: [
{
value: 1,
@@ -1004,30 +971,14 @@
},
watch: {},
created() {
- this.getDeptTree();
this.getList();
+ this.getDeptTree();
},
methods: {
/** 鏌ヨ鏍囩鍒楄〃 */
getList() {
- // 澶勭悊鏌ヨ鍙傛暟
- const params = {
- ...this.queryParams,
- // 濡傛灉閫夋嫨浜�"鍏ㄩ儴"锛屽垯浼犳墍鏈夌梾鍖�/绉戝浠ｇ爜
- leavehospitaldistrictcodes:
- this.queryParams.leavehospitaldistrictcodes.includes("all")
- ? this.allWardCodes
- : this.queryParams.leavehospitaldistrictcodes,
- deptcodes: this.queryParams.deptcodes.includes("all")
- ? this.allDeptCodes
- : this.queryParams.deptcodes,
- };
-
- // 绉婚櫎鍙兘瀛樺湪鐨�"all"鍊�
- delete params.leavehospitaldistrictcodes.all;
- delete params.deptcodes.all;
- getSfStatistics(params).then((response) => {
+ getSfStatistics(this.queryParams).then((response) => {
console.log(response);
// this.total = response.total;
this.userList = response.data;
@@ -1041,7 +992,7 @@
// 澶勭悊琛岀偣鍑诲睍寮�
handleRowClick(row) {
- console.log(row,'row');
+ console.log(row, "row");
// 濡傛灉宸茬粡灞曞紑鍒欐敹璧�
if (this.expands.includes(this.getRowKey(row))) {
@@ -1083,11 +1034,12 @@
// 鑾峰彇绉戝鏍�
getDeptTree() {
// 绉戝鍒楄〃
- this.flatArraydept = store.getters.belongDepts.map((dept) => {
- return {
- label: dept.deptName,
- value: dept.deptCode,
- };
+ deptTreeSelect().then((response) => {
+ this.deptOptions = response.data;
+ console.log(this.deptOptions, " this.deptOptions");
+
+ this.flatArray = this.flattenArray(response.data);
+ console.log(this.flatArray, "this.flatArray");
});
// 瀛樺偍鎵�鏈夌瀹や唬鐮�
this.allDeptCodes = store.getters.belongDepts.map(
@@ -1138,41 +1090,6 @@
tagdescription: "",
tagid: "",
};
- },
- Seedetails(row) {
- this.SeedetailsVisible = true;
- this.Seedloading = true;
- this.patientqueryParams.starttime = this.parseTime(
- this.queryParams.dateRange[0]
- );
- this.patientqueryParams.endtime = this.parseTime(
- this.queryParams.dateRange[1]
- );
- this.patientqueryParams.deptcode = row.deptcode;
- selectTimelyRate(this.patientqueryParams).then((response) => {
- this.logsheetlist = response.data.detail;
- this.patienttotal = response.data.total;
- this.Seedloading = false;
- });
- },
- SeedetailsgGo(row) {
- this.SeedetailsVisible = false;
- let type = "";
- if (row.preachformson && row.preachformson.includes("3")) {
- type = 1;
- }
- setTimeout(() => {
- this.$router.push({
- path: "/followvisit/record/detailpage/",
- query: {
- taskid: row.taskid,
- patid: row.patid,
- id: row.id,
- Voicetype: type,
- // visitCount: this.topqueryParams.visitCount,
- },
- });
- }, 300);
},
// 娣诲姞/淇敼鏍囩
Maintenancetag() {
@@ -1243,14 +1160,7 @@
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
this.queryParams.pageNum = 1;
- if (!this.queryParams.dateRange) this.queryParams.dateRange = [];
- if (this.queryParams.statisticaltype == 1) {
- this.queryParams.deptcodes = [];
- } else if (this.queryParams.statisticaltype == 2) {
- this.queryParams.leavehospitaldistrictcodes = [];
- }
- console.log(this.queryParams.dateRange);
-
+ console.log();
this.queryParams.startTime = this.parseTime(
this.queryParams.dateRange[0]
);
@@ -1301,6 +1211,354 @@
`user_${new Date().getTime()}.xlsx`
);
},
+ // 鏄剧ず鍥捐〃寮圭獥
+
+ showChartDialog() {
+ this.chartDialogVisible = true;
+ this.$nextTick(() => {
+ this.initPieChart();
+ this.initBarLineChart();
+ });
+ },
+ // 鍦╩ethods涓慨鏀圭粺璁℃柟娉�
+ showChartDialog() {
+ this.chartDialogVisible = true;
+ this.$nextTick(() => {
+ console.log(this.userList, "this.userList");
+
+ this.initCharts();
+ });
+ },
+
+ // 鏂板鍒濆鍖栧浘琛ㄦ柟娉�
+ initCharts() {
+ this.initPieChart();
+ this.initBarLineChart();
+ },
+
+ // 鍒濆鍖栭ゼ鍥�
+initPieChart() {
+ const echarts = require("echarts");
+ const pieDom = document.getElementById("pieChart");
+ if (!pieDom) return;
+
+ if (this.pieChart) {
+ this.pieChart.dispose();
+ }
+
+ this.pieChart = echarts.init(pieDom);
+
+ // 璁＄畻楗煎浘鏁版嵁
+ const followUpData = {
+ pending: 0,
+ success: 0,
+ fail: 0,
+ };
+
+ this.userList.forEach((item) => {
+ followUpData.pending += item.pendingFollowUp || 0;
+ followUpData.success += item.followUpSuccess || 0;
+ followUpData.fail += item.followUpFail || 0;
+ });
+
+ // 浣跨敤鏇寸編瑙傜殑棰滆壊鏂规
+ const pieOption = {
+ title: {
+ text: "闅忚鐘舵�佸垎甯�",
+ left: "center",
+ textStyle: {
+ color: '#333',
+ fontSize: 16
+ }
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ },
+ legend: {
+ orient: "vertical",
+ left: "left",
+ data: ["寰呴殢璁�", "闅忚鎴愬姛", "闅忚澶辫触"],
+ textStyle: {
+ color: '#666'
+ }
+ },
+ color: ['#FF9D4D', '#36B37E', '#FF5C5C'], // 鏂扮殑閰嶈壊鏂规
+ series: [
+ {
+ name: "闅忚鐘舵��",
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: true,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2
+ },
+ label: {
+ show: true,
+ formatter: "{b}: {c} ({d}%)",
+ color: '#333'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: "18",
+ fontWeight: "bold"
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ },
+ data: [
+ {
+ value: followUpData.pending,
+ name: "寰呴殢璁�"
+ },
+ {
+ value: followUpData.success,
+ name: "闅忚鎴愬姛"
+ },
+ {
+ value: followUpData.fail,
+ name: "闅忚澶辫触"
+ }
+ ]
+ }
+ ]
+ };
+
+ this.pieChart.setOption(pieOption);
+ window.addEventListener("resize", this.resizePieChart);
+},
+
+// 鍒濆鍖栨煴鐘舵姌绾垮浘
+initBarLineChart() {
+ const echarts = require("echarts");
+ const barDom = document.getElementById("barLineChart");
+ if (!barDom) return;
+
+ if (this.barLineChart) {
+ this.barLineChart.dispose();
+ }
+
+ this.barLineChart = echarts.init(barDom);
+
+ // 鍑嗗鏁版嵁
+ const categories = this.userList.map(
+ (item) => item.leavehospitaldistrictname || item.deptname
+ );
+
+ const dischargeData = this.userList.map(
+ (item) => item.dischargeCount || 0
+ );
+ const followUpData = this.userList.map(
+ (item) => item.followUpNeeded || 0
+ );
+
+ // 鏂板涓ゆ潯鎶樼嚎鏁版嵁
+ const followUpRateData = this.userList.map(item => {
+ if (!item.followUpRate) return 0;
+ // 鍘绘帀鐧惧垎鍙峰苟杞负鏁板瓧
+ const rateStr = String(item.followUpRate).replace('%', '');
+ return parseFloat(rateStr) || 0;
+ });
+
+ const timelyRateData = this.userList.map(item =>
+ item.rate ? (Number(item.rate) * 100).toFixed(2) : 0
+ );
+
+ const option = {
+ title: {
+ text: "绉戝/鐥呭尯闅忚瓒嬪娍",
+ left: "center",
+ textStyle: {
+ color: '#333',
+ fontSize: 16
+ }
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ crossStyle: {
+ color: "#999",
+ },
+ },
+ },
+ legend: {
+ data: ["鍑洪櫌浜烘", "搴旈殢璁夸汉娆�", "闅忚鐜�(%)", "鍙婃椂鐜�(%)"],
+ top: "bottom",
+ textStyle: {
+ color: '#666'
+ }
+ },
+ color: ['#5470C6', '#91CC75', '#EE6666', '#9A60B4'], // 鏂板绱壊鐢ㄤ簬鍙婃椂鐜�
+ xAxis: {
+ type: "category",
+ data: categories,
+ axisLabel: {
+ interval: 0,
+ rotate: 30,
+ color: '#666'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ }
+ },
+ yAxis: [
+ {
+ type: "value",
+ name: "浜烘",
+ min: 0,
+ axisLabel: {
+ color: '#666'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#f0f0f0'
+ }
+ }
+ },
+ {
+ type: "value",
+ name: "鐧惧垎姣�(%)",
+ min: 0,
+ max: 100,
+ axisLabel: {
+ color: '#666',
+ formatter: '{value}%'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: "鍑洪櫌浜烘",
+ type: "bar",
+ barWidth: "25%",
+ data: dischargeData,
+ itemStyle: {
+ borderRadius: [4, 4, 0, 0]
+ }
+ },
+ {
+ name: "搴旈殢璁夸汉娆�",
+ type: "bar",
+ barWidth: "25%",
+ data: followUpData,
+ itemStyle: {
+ borderRadius: [4, 4, 0, 0]
+ }
+ },
+ {
+ name: "闅忚鐜�(%)",
+ type: "line",
+ yAxisIndex: 1,
+ data: followUpRateData,
+ symbolSize: 8,
+ lineStyle: {
+ width: 3
+ },
+ markLine: {
+ silent: true,
+ data: [{
+ yAxis: 80,
+ lineStyle: {
+ color: '#EE6666',
+ type: 'dashed'
+ },
+ // label: {
+ // position: 'end',
+ // formatter: '鐩爣80%'
+ // }
+ }]
+ }
+ },
+ {
+ name: "鍙婃椂鐜�(%)",
+ type: "line",
+ yAxisIndex: 1,
+ data: timelyRateData,
+ symbolSize: 8,
+ lineStyle: {
+ width: 3,
+ type: 'dotted' // 浣跨敤铏氱嚎鍖哄垎
+ },
+ markLine: {
+ silent: true,
+ data: [{
+ yAxis: 90,
+ lineStyle: {
+ color: '#9A60B4',
+ type: 'dashed'
+ },
+ // label: {
+ // position: 'end',
+ // formatter: '鐩爣90%'
+ // }
+ }]
+ }
+ }
+ ],
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ containLabel: true
+ }
+ };
+
+ this.barLineChart.setOption(option);
+ window.addEventListener("resize", this.resizeBarLineChart);
+},
+
+ // 鍥捐〃鍝嶅簲寮忚皟鏁存柟娉�
+ resizePieChart() {
+ if (this.pieChart) {
+ this.pieChart.resize();
+ }
+ },
+
+ resizeBarLineChart() {
+ if (this.barLineChart) {
+ this.barLineChart.resize();
+ }
+ },
+
+ // 鍦ㄧ粍浠堕攢姣佹椂娓呯悊
+ beforeDestroy() {
+ // 绉婚櫎浜嬩欢鐩戝惉
+ window.removeEventListener("resize", this.resizePieChart);
+ window.removeEventListener("resize", this.resizeBarLineChart);
+
+ // 閿�姣佸浘琛ㄥ疄渚�
+ if (this.pieChart) {
+ this.pieChart.dispose();
+ this.pieChart = null;
+ }
+ if (this.barLineChart) {
+ this.barLineChart.dispose();
+ this.barLineChart = null;
+ }
+ },
},
};
</script>
--
Gitblit v1.9.3