项目报表
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
aab9c4576c
commit
726f6499f9
|
|
@ -4382,4 +4382,28 @@ export function setReadKeyFile(data) {
|
|||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 项目报表-访视完成度
|
||||
export function getTrialVisitFinishedStatList(data) {
|
||||
return request({
|
||||
url: `/TrialStat/getTrialVisitFinishedStatList`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 项目报表-质疑统计表
|
||||
export function getTrialQuestionStatList(data) {
|
||||
return request({
|
||||
url: `/TrialStat/getTrialQuestionStatList`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 项目报表-疗效统计表
|
||||
export function getTrialEfficacyEvaluationStatList(data) {
|
||||
return request({
|
||||
url: `/TrialStat/getTrialEfficacyEvaluationStatList`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<template>
|
||||
<div class="reportForms">
|
||||
<div class="search">
|
||||
<el-form :inline="true">
|
||||
<!-- 阅片标准 -->
|
||||
<el-form-item :label="$t('trials:reportForms:table:Criterion')">
|
||||
<el-select v-model="searchData.TrialReadingCriterionId" clearable filterable>
|
||||
<el-option v-for="(item, index) of trialCriterionList" :key="index"
|
||||
:label="item.TrialReadingCriterionName" :value="item.TrialReadingCriterionId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="chartBox">
|
||||
<div ref="chartContainer_left" style="width: 100%; height: 100%;" v-loading="loading_left"></div>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div ref="chartContainer_right" style="width: 100%; height: 100%;" v-loading="loading_right"></div>
|
||||
</div>
|
||||
<div class="chartBox">
|
||||
<div ref="chartContainer_bottom" style="width: 100%; height: 100%;" v-loading="loading_bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BaseContainer from '@/components/BaseContainer'
|
||||
let echarts = require('echarts/lib/echarts');
|
||||
|
||||
// require('echarts/lib/chart/line');
|
||||
require('echarts/lib/chart/funnel');
|
||||
require('echarts/lib/chart/bar');
|
||||
// 按需引入组件
|
||||
require('echarts/lib/component/tooltip');
|
||||
require('echarts/lib/component/title');
|
||||
require('echarts/lib/component/legend');
|
||||
require('echarts/lib/component/grid');
|
||||
require('echarts/lib/component/dataZoom');
|
||||
import {
|
||||
getTrialCriterionList,
|
||||
getTrialVisitFinishedStatList,
|
||||
getTrialQuestionStatList,
|
||||
getTrialEfficacyEvaluationStatList
|
||||
} from '@/api/trials'
|
||||
export default {
|
||||
name: 'reportForms',
|
||||
components: { BaseContainer },
|
||||
data() {
|
||||
return {
|
||||
searchData: {
|
||||
TrialReadingCriterionId: null
|
||||
},
|
||||
trialCriterionList: [],
|
||||
loading_left: false,
|
||||
chart_left: null,
|
||||
loading_right: false,
|
||||
chart_right: null,
|
||||
loading_bottom: false,
|
||||
chart_bottom: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTrialCriterionList()
|
||||
},
|
||||
watch: {
|
||||
'searchData.TrialReadingCriterionId': {
|
||||
handler() {
|
||||
if (this.searchData.TrialReadingCriterionId) {
|
||||
this.getTrialVisitFinishedStatList()
|
||||
this.getTrialQuestionStatList()
|
||||
this.getTrialEfficacyEvaluationStatList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTrialCriterionList() {
|
||||
getTrialCriterionList(this.$route.query.trialId, false).then(res => {
|
||||
this.trialCriterionList = res.Result
|
||||
if (this.trialCriterionList.length > 0) {
|
||||
this.searchData.TrialReadingCriterionId = this.trialCriterionList[0].TrialReadingCriterionId
|
||||
}
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 获取访视完成度
|
||||
async getTrialVisitFinishedStatList() {
|
||||
try {
|
||||
let data = {
|
||||
TrialId: this.$route.query.trialId,
|
||||
TrialReadingCriterionId: this.searchData.TrialReadingCriterionId
|
||||
}
|
||||
this.loading_left = true
|
||||
let res = await getTrialVisitFinishedStatList(data)
|
||||
this.loading_left = false
|
||||
if (res.IsSuccess) {
|
||||
let obj = {
|
||||
titleText: this.$t("trials:reportForms:cjart:title:VisitFinishedStat"),
|
||||
seriesData: [],
|
||||
legendData: [
|
||||
this.$t("trials:reportForms:cjart:title:UploadedCount"),
|
||||
this.$t("trials:reportForms:cjart:title:QCFinishedCount"),
|
||||
this.$t("trials:reportForms:cjart:title:CheckFinishedCount"),
|
||||
this.$t("trials:reportForms:cjart:title:ReadingFinishedCount")
|
||||
]
|
||||
}
|
||||
res.Result.ReadingFinishedCount = res.Result.CriterionList[0].ReadingFinishedCount
|
||||
let keys = ['UploadedCount', 'QCFinishedCount', 'CheckFinishedCount', 'ReadingFinishedCount']
|
||||
obj.legendData.forEach((item, index) => {
|
||||
let o = {
|
||||
name: item,
|
||||
value: res.Result[keys[index]]
|
||||
}
|
||||
obj.seriesData.push(o)
|
||||
})
|
||||
this.initChart_left(obj)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
initChart_left(obj) {
|
||||
this.chart_left = echarts.init(this.$refs.chartContainer_left);
|
||||
// ...图表配置
|
||||
const option = {
|
||||
title: {
|
||||
text: obj.titleText
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: obj.legendData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: obj.seriesData
|
||||
}
|
||||
]
|
||||
};
|
||||
// 4. 使用配置项渲染图表
|
||||
this.chart_left.setOption(option);
|
||||
},
|
||||
// 获取质疑统计列表
|
||||
async getTrialQuestionStatList() {
|
||||
try {
|
||||
let data = {
|
||||
TrialId: this.$route.query.trialId,
|
||||
}
|
||||
this.loading_right = true
|
||||
let res = await getTrialQuestionStatList(data)
|
||||
this.loading_right = false
|
||||
if (res.IsSuccess) {
|
||||
let obj = {
|
||||
titleText: this.$t("trials:reportForms:cjart:title:QuestionStat"),
|
||||
seriesData: [
|
||||
{
|
||||
name: this.$t("trials:reportForms:cjart:data:IngCount"),
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [res.Result.QCQuestion_IngCount, res.Result.CheckQuestion_IngCount, res.Result.MedicalReviewQuestion_IngCount]
|
||||
},
|
||||
{
|
||||
name: this.$t("trials:reportForms:cjart:data:ClosedCount"),
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [res.Result.QCQuestion_ClosedCount, res.Result.CheckQuestion_ClosedCount, res.Result.MedicalReviewQuestion_ClosedCount]
|
||||
}
|
||||
],
|
||||
xAxisData: [
|
||||
this.$t("trials:reportForms:cjart:title:QCQuestion"),
|
||||
this.$t("trials:reportForms:cjart:title:CheckQuestion"),
|
||||
this.$t("trials:reportForms:cjart:title:MedicalReviewQuestion"),
|
||||
],
|
||||
unit: this.$t("trials:reportForms:cjart:unit:count")
|
||||
}
|
||||
this.initChart_right(obj)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
initChart_right(obj) {
|
||||
this.chart_right = echarts.init(this.$refs.chartContainer_right);
|
||||
// ...图表配置
|
||||
const option = {
|
||||
title: {
|
||||
text: obj.titleText
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: obj.xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: obj.unit,
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: obj.seriesData
|
||||
};
|
||||
// 4. 使用配置项渲染图表
|
||||
this.chart_right.setOption(option);
|
||||
},
|
||||
// 获取疗效统计表
|
||||
async getTrialEfficacyEvaluationStatList() {
|
||||
try {
|
||||
let data = {
|
||||
TrialId: this.$route.query.trialId,
|
||||
TrialReadingCriterionId: this.searchData.TrialReadingCriterionId
|
||||
}
|
||||
this.loading_bottom = true
|
||||
let res = await getTrialEfficacyEvaluationStatList(data)
|
||||
this.loading_bottom = false
|
||||
if (res.IsSuccess) {
|
||||
let obj = {
|
||||
xAxisData: [],
|
||||
seriesData: [],
|
||||
unit: this.$t("trials:reportForms:cjart:unit:subjectCount"),
|
||||
titleText: this.$t("trials:reportForms:cjart:title:EfficacyEvaluationStat"),
|
||||
}
|
||||
res.Result.forEach(item => {
|
||||
obj.xAxisData.push(this.$fd(item.DictionaryCode, Number(item.OverallTumorEvaluation)))
|
||||
obj.seriesData.push(item.SubjectCount)
|
||||
})
|
||||
this.initChart_bottom(obj)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
},
|
||||
initChart_bottom(obj) {
|
||||
this.chart_bottom = echarts.init(this.$refs.chartContainer_bottom);
|
||||
// ...图表配置
|
||||
const option = {
|
||||
title: {
|
||||
text: obj.titleText
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: obj.xAxisData
|
||||
},
|
||||
yAxis: {
|
||||
name: obj.unit,
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: obj.seriesData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
// 4. 使用配置项渲染图表
|
||||
this.chart_bottom.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.reportForms {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.search {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
|
||||
.chartBox {
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue