| | |
| | | ></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="出院时间"> |
| | | <el-form-item label="课题时间"> |
| | | <el-date-picker |
| | | v-model="dateRange" |
| | | style="width: 240px" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="出院日期" |
| | | label="课题日期" |
| | | width="200" |
| | | align="center" |
| | | key="endtime" |
| | |
| | | width="120" |
| | | /> |
| | | <el-table-column |
| | | label="出院天数" |
| | | label="课题天数" |
| | | width="120" |
| | | align="center" |
| | | key="endDay" |
| | |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="出院随访模板名称" |
| | | label="课题随访模板名称" |
| | | align="center" |
| | | key="templatename" |
| | | prop="templatename" |
| | |
| | | <!-- <el-form-item label="即刻发送"> |
| | | <el-switch v-model="zcform.delivery"></el-switch> |
| | | </el-form-item> --> |
| | | <el-form-item label="出院时间"> |
| | | <el-form-item label="课题时间"> |
| | | <el-input |
| | | style="width: 400px" |
| | | disabled |
| | |
| | | loading: false, |
| | | cardlist: [ |
| | | { |
| | | name: "出院服务总量", |
| | | name: "课题服务总量", |
| | | value: 0, |
| | | }, |
| | | // { |
| | |
| | | topicoptionssort: [ |
| | | { |
| | | value: 0, |
| | | label: "出院时间(正序)", |
| | | label: "课题时间(正序)", |
| | | }, |
| | | { |
| | | value: 1, |
| | | label: "出院时间(倒序)", |
| | | label: "课题时间(倒序)", |
| | | }, |
| | | { |
| | | value: 2, |
| | |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | sendstate: 2, |
| | | sort: 2, //0 出院时间(正序) 1 出院时间(倒序) 2 发送时间(正序) 3 发送时间(倒序) |
| | | sort: 2, //0 课题时间(正序) 1 课题时间(倒序) 2 发送时间(正序) 3 发送时间(倒序) |
| | | serviceType: 16, |
| | | searchscope: 3, |
| | | visitCount: 1, |
| | |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | sendstate: 2, |
| | | sort: 2, //0 出院时间(正序) 1 出院时间(倒序) 2 发送时间(正序) 3 发送时间(倒序) |
| | | sort: 2, //0 课题时间(正序) 1 课题时间(倒序) 2 发送时间(正序) 3 发送时间(倒序) |
| | | serviceType: 16, |
| | | searchscope: 3, |
| | | visitCount: 1, |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="出院病区" prop="status"> |
| | | <el-form-item label="病区" prop="status"> |
| | | <el-select |
| | | v-model="patientqueryParams.topic" |
| | | placeholder="请选择" |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="出院病区" prop="status"> |
| | | <el-form-item label="病区" prop="status"> |
| | | <el-select |
| | | v-model="patientqueryParams.topic" |
| | | placeholder="请选择" |
| | |
| | | }, |
| | | ], |
| | | taskoptions: store.getters.tasktypes, |
| | | tasktopic: 2, //新增类型 |
| | | tasktopic: 16, //新增类型 |
| | | activname: "", |
| | | value: [], |
| | | list: [], |
| | |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getorganization(); |
| | | // this.getorganization(); |
| | | this.getCode(); |
| | | this.getCookie(); |
| | | // if (localStorage.getItem('orgid')) { |
| | |
| | | prop="followUpNeeded" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column align="center" label="首次出院随访"> |
| | | <el-table-column align="center" label="首次课题随访"> |
| | | <el-table-column |
| | | label="需随访" |
| | | align="center" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="出院病区" |
| | | label="病区" |
| | | align="center" |
| | | sortable |
| | | key="leavehospitaldistrictname" |
| | |
| | | }, |
| | | |
| | | // 初始化饼图 |
| | | initPieChart() { |
| | | const echarts = require("echarts"); |
| | | const pieDom = document.getElementById("pieChart"); |
| | | if (!pieDom) return; |
| | | 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 |
| | | if (this.pieChart) { |
| | | this.pieChart.dispose(); |
| | | } |
| | | }, |
| | | 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" |
| | | |
| | | 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, |
| | | }, |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | }, |
| | | data: [ |
| | | { |
| | | value: followUpData.pending, |
| | | name: "待随访" |
| | | tooltip: { |
| | | trigger: "item", |
| | | formatter: "{a} <br/>{b}: {c} ({d}%)", |
| | | }, |
| | | legend: { |
| | | orient: "vertical", |
| | | left: "left", |
| | | data: ["待随访", "随访成功", "随访失败"], |
| | | textStyle: { |
| | | color: "#666", |
| | | }, |
| | | }, |
| | | color: ["#FF9D4D", "#36B37E", "#FF5C5C"], // 新的配色方案 |
| | | series: [ |
| | | { |
| | | 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' |
| | | name: "随访状态", |
| | | type: "pie", |
| | | radius: ["40%", "70%"], |
| | | avoidLabelOverlap: true, |
| | | itemStyle: { |
| | | borderRadius: 10, |
| | | borderColor: "#fff", |
| | | borderWidth: 2, |
| | | }, |
| | | // 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: { |
| | | show: true, |
| | | formatter: "{b}: {c} ({d}%)", |
| | | color: "#333", |
| | | }, |
| | | // label: { |
| | | // position: 'end', |
| | | // formatter: '目标90%' |
| | | // } |
| | | }] |
| | | } |
| | | } |
| | | ], |
| | | grid: { |
| | | top: '15%', |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '15%', |
| | | containLabel: true |
| | | } |
| | | }; |
| | | 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.barLineChart.setOption(option); |
| | | window.addEventListener("resize", this.resizeBarLineChart); |
| | | }, |
| | | 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() { |
| | |
| | | <div class="leftvlue-top"> |
| | | <el-tabs v-model="topactiveName" @tab-click="tophandleClick"> |
| | | <el-tab-pane name="Local"> |
| | | <span class="mulsz" slot="label">按出院病区统计 </span> |
| | | <span class="mulsz" slot="label">按病区统计 </span> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="sharing"> |
| | | <span class="mulsz" slot="label">按出院课题组统计 </span> |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="出院病区" prop="userName"> |
| | | <el-form-item label="病区" prop="userName"> |
| | | <el-select v-model="queryParams.value2" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in options" |
| | |
| | | /> |
| | | <el-table-column |
| | | fixed |
| | | label="出院病区" |
| | | label="病区" |
| | | align="center" |
| | | key="tagname" |
| | | prop="tagname" |
| | |
| | | <div class="leftvlue-top"> |
| | | <el-tabs v-model="topactiveName" @tab-click="tophandleClick"> |
| | | <el-tab-pane name="Local"> |
| | | <span class="mulsz" slot="label">按出院病区统计 </span> |
| | | <span class="mulsz" slot="label">按病区统计 </span> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="sharing"> |
| | | <span class="mulsz" slot="label">按出院课题组统计 </span> |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="出院病区" prop="userName"> |
| | | <el-form-item label="病区" prop="userName"> |
| | | <el-select v-model="queryParams.value2" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in options" |
| | |
| | | /> |
| | | <el-table-column |
| | | fixed |
| | | label="出院病区" |
| | | label="病区" |
| | | align="center" |
| | | key="tagname" |
| | | prop="tagname" |