From 5216bf9f62c3d97238cf6c76a51ceca05cea0131 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Tue, 30 Dec 2025 11:44:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=97=E8=AF=95=E8=80=85=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8=E6=9F=A5=E7=9C=8B=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trials.js                             |   8 +
 src/components/readingChart/index.vue         |   1 -
 .../subject-list/components/SubjectChart.vue  | 289 ++++++++++++++++++
 .../subject/subject-list/index.vue            | 266 +++++-----------
 4 files changed, 379 insertions(+), 185 deletions(-)
 create mode 100644 src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue

diff --git a/src/api/trials.js b/src/api/trials.js
index 3227472a..764286a0 100644
--- a/src/api/trials.js
+++ b/src/api/trials.js
@@ -4407,6 +4407,14 @@ export function getTrialEfficacyEvaluationStatList(data) {
     data
   })
 }
+// 受试者图表
+export function getReportsChartSummary(data) {
+  return request({
+    url: `/ReadingImageTask/getReportsChartSummary`,
+    method: 'post',
+    data
+  })
+}
 // 靶段标注列表
 export function getTrialSubjectVisitMarkList(data) {
   return request({
diff --git a/src/components/readingChart/index.vue b/src/components/readingChart/index.vue
index 4d51866d..1c4ae9a8 100644
--- a/src/components/readingChart/index.vue
+++ b/src/components/readingChart/index.vue
@@ -8,7 +8,6 @@
 
 <script>
 import { getReportsChartData } from "@/api/reading"
-import moment from "moment"
 let echarts = require('echarts/lib/echarts');
 
 // 按需引入图表
diff --git a/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue b/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
new file mode 100644
index 00000000..c64cc13b
--- /dev/null
+++ b/src/views/trials/trials-panel/subject/subject-list/components/SubjectChart.vue
@@ -0,0 +1,289 @@
+<template>
+    <div class="subjectChart" v-loading="loading">
+        <el-form :inline="true">
+            <!-- Site -->
+            <el-form-item :label="$t('subjectChart:table:subject')">
+                <span>{{ data.Code }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('subjectChart:table:CriterionType')">
+                <el-select v-model="CriterionType" clearable filterable @change="handleChange">
+                    <el-option v-for="(item) of trialCriterionList" :key="item.TrialReadingCriterionId"
+                        :label="item.TrialReadingCriterionName" :value="item.CriterionType" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <el-table :data="tableList" border style="width: 100%">
+            <el-table-column v-for="item in tableKey" :key="item.key" :prop="item.key" :label="item.title">
+                <template slot-scope="scope">
+                    <span>{{ scope.row[item.key] }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="chartBox">
+            <div class="R1box" v-if="R1ChartList.length > 0">
+                <div v-for="item in R1ChartList" :key="item.id">
+                    <div class="title">{{ item.title }}</div>
+                    <div v-for="d in item.list" :key="d.id" :ref="`chartContainer_${d.id}`" class="canvasBox"
+                        :style="{ width: R2ChartList.length > 0 ? '490px' : '980px', height: '290px' }">
+                    </div>
+                </div>
+            </div>
+            <div class="R2box" v-if="R2ChartList.length > 0">
+                <div v-for="item in R2ChartList" :key="item.id">
+                    <div class="title">{{ item.title }}</div>
+                    <div v-for="d in item.list" :key="d.id" :ref="`chartContainer_${d.id}`" class="canvasBox"
+                        style="width: 490px; height: 290px;">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {
+    getTrialCriterionList,
+    getReportsChartSummary
+} from '@/api/trials'
+let echarts = require('echarts/lib/echarts');
+
+// 按需引入图表
+// require('echarts/lib/chart/bar');
+require('echarts/lib/chart/line');
+// require('echarts/lib/chart/pie');
+// require('echarts/lib/chart/scatter');
+
+// 按需引入组件
+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');
+export default {
+    name: "SubjectChart",
+    props: {
+        data: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            trialCriterionList: [],
+            CriterionType: null,
+            tableKey: [],
+            tableList: [],
+            R1ChartList: [],
+            R2ChartList: []
+        }
+    },
+    mounted() {
+        this.getTrialCriterionList()
+    },
+    methods: {
+        handleChange() {
+            this.getList()
+        },
+        getTrialCriterionList() {
+            this.loading = true
+            getTrialCriterionList(this.$route.query.trialId, false).then(res => {
+                this.trialCriterionList = res.Result
+                if (this.trialCriterionList.length > 0) {
+                    this.CriterionType = this.trialCriterionList[0].CriterionType
+                    this.getList()
+                    this.loading = false
+                }
+            }).catch(() => { this.loading = false })
+        },
+        async getList() {
+            try {
+                let data = {
+                    SubjectId: this.data.Id,
+                    CriterionType: this.CriterionType
+                }
+                this.loading = true
+                let res = await getReportsChartSummary(data)
+                this.loading = false
+                if (res.IsSuccess) {
+                    let Evaluation = res.Result.Evaluation.Evaluation
+                    let DictionaryCode = res.Result.Evaluation.DictionaryCode
+                    this.tableKey = [
+                        {
+                            title: this.$t(`subjectChart:table:label:visit`),
+                            key: 'visit'
+                        }
+                    ]
+                    Evaluation[0].forEach(key => {
+                        let obj = {
+                            title: key,
+                            key
+                        }
+                        this.tableKey.push(obj)
+                    })
+                    this.tableList = []
+                    if (Evaluation[1] && Evaluation[1].length > 0) {
+                        let obj = {}
+                        this.tableKey.forEach((item, index) => {
+                            obj[item.key] = index === 0 ? 'R1' : DictionaryCode ? this.$fd(DictionaryCode, Evaluation[1][index - 1]) : Evaluation[1][index - 1]
+                        })
+                        this.tableList.push(obj)
+                    }
+                    if (Evaluation[2] && Evaluation[2].length > 0) {
+                        let obj = {}
+                        this.tableKey.forEach((item, index) => {
+                            obj[item.key] = index === 0 ? 'R2' : DictionaryCode ? this.$fd(DictionaryCode, Evaluation[2][index - 1]) : Evaluation[2][index - 1]
+                        })
+                        this.tableList.push(obj)
+                    }
+                    let chartData = [...res.Result.TargetCharts, ...res.Result.QuestionCharts]
+                    let R1ChartData = chartData.map(item => {
+                        if (item.Arm === 1) return item
+                    }).filter(item => item && item.VisitTaskNameList.length > 0)
+                    let R2ChartData = chartData.map(item => {
+                        if (item.Arm === 2) return item
+                    }).filter(item => item && item.VisitTaskNameList.length > 0)
+                    if (Array.isArray(R1ChartData)) {
+                        this.R1ChartList = []
+                        R1ChartData.forEach(item => {
+                            let index = this.R1ChartList.findIndex(i => i.title === item.GroupName)
+                            let o = {
+                                id: this.$guid(),
+                                series: [],
+                                unit: this.$fd("ValueUnit", item.Unit),
+                                visitName: item.VisitTaskNameList,
+                            }
+                            item.ChartDataList.forEach((i) => {
+                                let arr = []
+                                i.Value.forEach((d) => {
+                                    arr.push(d)
+                                })
+                                o.series.push({
+                                    name: i.Name,
+                                    data: arr,
+                                    type: 'line'
+                                })
+                            });
+                            if (index < 0) {
+                                let obj = {
+                                    title: item.GroupName,
+                                    list: [o],
+                                    id: this.$guid(),
+                                }
+                                this.R1ChartList.push(obj)
+                            } else {
+                                this.R1ChartList[index].list.push(o)
+                            }
+                        })
+                        this.$nextTick(() => {
+                            if (this.R1ChartList.length > 0) {
+                                this.R1ChartList.forEach(item => {
+                                    if (item.list.length > 0) {
+                                        item.list.forEach(d => {
+                                            this.initChart(d)
+                                        })
+                                    }
+                                })
+                            }
+                        })
+                    }
+                    if (Array.isArray(R2ChartData)) {
+                        this.R2ChartList = []
+                        R2ChartData.forEach(item => {
+                            let index = this.R2ChartList.findIndex(i => i.title === item.GroupName)
+                            let o = {
+                                id: this.$guid(),
+                                series: [],
+                                unit: this.$fd("ValueUnit", item.Unit),
+                                visitName: item.VisitTaskNameList,
+                            }
+                            item.ChartDataList.forEach((i) => {
+                                let arr = []
+                                i.Value.forEach((d) => {
+                                    arr.push(d)
+                                })
+                                o.series.push({
+                                    name: i.Name,
+                                    data: arr,
+                                    type: 'line'
+                                })
+                            });
+                            if (index < 0) {
+                                let obj = {
+                                    title: item.GroupName,
+                                    list: [o],
+                                    id: this.$guid(),
+                                }
+                                this.R2ChartList.push(obj)
+                            } else {
+                                this.R2ChartList[index].list.push(o)
+                            }
+                        })
+                        this.$nextTick(() => {
+                            if (this.R2ChartList.length > 0) {
+                                this.R2ChartList.forEach(item => {
+                                    if (item.list.length > 0) {
+                                        item.list.forEach(d => {
+                                            this.initChart(d)
+                                        })
+                                    }
+                                })
+                            }
+                        })
+                    }
+                }
+            } catch (err) {
+                this.loading = false
+                console.log(err)
+            }
+
+        },
+        initChart(obj) {
+            let chart = echarts.init(this.$refs[`chartContainer_${obj.id}`][0]);
+            // ...图表配置
+            const option = {
+                // title: {
+                //     text: obj.title,
+                //     textStyle: {
+                //         color: "#fff"
+                //     }
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                },
+                xAxis: {
+                    data: obj.visitName,
+                },
+                yAxis: {
+                    name: obj.unit,
+                    type: 'value',
+                },
+                series: obj.series
+            };
+            // 4. 使用配置项渲染图表
+            chart.setOption(option);
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.chartBox {
+    display: flex;
+
+    width: 100%;
+
+    .R1box,
+    .R2box {
+        width: 100%;
+
+        .title {
+            margin-top: 10px;
+        }
+
+        .canvasBox {
+            margin: auto;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/subject/subject-list/index.vue b/src/views/trials/trials-panel/subject/subject-list/index.vue
index e0ab3a4c..b963d297 100644
--- a/src/views/trials/trials-panel/subject/subject-list/index.vue
+++ b/src/views/trials/trials-panel/subject/subject-list/index.vue
@@ -6,12 +6,8 @@
         <!-- Site -->
         <el-form-item :label="$t('trials:subject:table:site')">
           <el-select v-model="searchData.TrialSiteId" clearable filterable style="width:130px;">
-            <el-option
-              v-for="(item,index) of siteOptions"
-              :key="index"
-              :label="item.TrialSiteCode"
-              :value="item.TrialSiteId"
-            />
+            <el-option v-for="(item, index) of siteOptions" :key="index" :label="item.TrialSiteCode"
+              :value="item.TrialSiteId" />
           </el-select>
         </el-form-item>
         <!-- Subject ID -->
@@ -21,7 +17,8 @@
         <!-- Status -->
         <el-form-item :label="$t('trials:subject:table:status')">
           <el-select v-model="searchData.Status" clearable style="width:130px;">
-            <el-option v-for="item of $d.Subject_Visit_Status" :key="item.value" :value="item.value" :label="item.label" />
+            <el-option v-for="item of $d.Subject_Visit_Status" :key="item.value" :value="item.value"
+              :label="item.label" />
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('trials:subject:table:isMissingImages')">
@@ -45,14 +42,8 @@
         </el-form-item>
       </el-form>
       <span style="margin-left:auto;">
-        <el-button
-          v-if="visitPlanConfirmed"
-          v-hasPermi="['trials:trials-panel:subject:new']"
-          type="primary"
-          icon="el-icon-plus"
-
-          @click="handleAdd"
-        >
+        <el-button v-if="visitPlanConfirmed" v-hasPermi="['trials:trials-panel:subject:new']" type="primary"
+          icon="el-icon-plus" @click="handleAdd">
           {{ $t('common:button:new') }}
         </el-button>
       </span>
@@ -61,226 +52,127 @@
 
     <template slot="main-container">
       <!-- 受试者列表 -->
-      <el-table
-        ref="subjectList"
-        v-loading="loading"
-        v-adaptive="{bottomOffset:60}"
-        :data="list"
-        stripe
-        height="100"
-        @sort-change="handleSortByColumn"
-      >
+      <el-table ref="subjectList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe height="100"
+        @sort-change="handleSortByColumn">
         <el-table-column type="index" width="40" />
         <!-- Site -->
-        <el-table-column
-          prop="TrialSiteCode"
-          :label="$t('trials:subject:table:site')"
-          sortable="custom"
-          show-overflow-tooltip
-          width="120"
-        />
+        <el-table-column prop="TrialSiteCode" :label="$t('trials:subject:table:site')" sortable="custom"
+          show-overflow-tooltip width="120" />
         <!-- Code -->
-        <el-table-column
-          prop="Code"
-          :label="$t('trials:subject:table:subjectId')"
-          show-overflow-tooltip
-          sortable="custom"
-          width="130"
-        />
+        <el-table-column prop="Code" :label="$t('trials:subject:table:subjectId')" show-overflow-tooltip
+          sortable="custom" width="130" />
         <!-- 第二编号 -->
-        <el-table-column
-          v-if="otherInfo.IsSubjectSecondCodeView"
-          prop="MedicalNo"
-          :label="$t('trials:subject:table:medicalNo')"
-          show-overflow-tooltip
-          sortable="custom"
-          width="150"
-        />
+        <el-table-column v-if="otherInfo.IsSubjectSecondCodeView" prop="MedicalNo"
+          :label="$t('trials:subject:table:medicalNo')" show-overflow-tooltip sortable="custom" width="150" />
         <!-- 访视基准日期 -->
-        <el-table-column
-          prop="FirstGiveMedicineTime"
-          :label="$t('trials:subject:table:firstGiveMedicineTime')"
-          sortable="custom"
-          show-overflow-tooltip
-          width="150"
-        >
+        <el-table-column prop="FirstGiveMedicineTime" :label="$t('trials:subject:table:firstGiveMedicineTime')"
+          sortable="custom" show-overflow-tooltip width="150">
           <template slot-scope="scope">
-            {{ scope.row.FirstGiveMedicineTime?moment(scope.row.FirstGiveMedicineTime).format('YYYY-MM-DD'):'' }}
+            {{ scope.row.FirstGiveMedicineTime ? moment(scope.row.FirstGiveMedicineTime).format('YYYY-MM-DD') : '' }}
           </template>
         </el-table-column>
         <!-- Status -->
-        <el-table-column
-          prop="Status"
-          :label="$t('trials:subject:table:status')"
-          show-overflow-tooltip
-          sortable="custom"
-          width="120"
-        >
+        <el-table-column prop="Status" :label="$t('trials:subject:table:status')" show-overflow-tooltip
+          sortable="custom" width="120">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.Status === 1" type="primary">{{ $fd('Subject_Visit_Status', scope.row.Status) }}</el-tag>
-            <el-tag v-if="scope.row.Status === 2" type="danger">{{ $fd('Subject_Visit_Status', scope.row.Status) }}</el-tag>
-            <el-tag v-if="scope.row.Status === 3" type="danger">{{ $fd('Subject_Visit_Status', scope.row.Status) }}</el-tag>
+            <el-tag v-if="scope.row.Status === 1" type="primary">{{ $fd('Subject_Visit_Status', scope.row.Status)
+            }}</el-tag>
+            <el-tag v-if="scope.row.Status === 2" type="danger">{{ $fd('Subject_Visit_Status', scope.row.Status)
+            }}</el-tag>
+            <el-tag v-if="scope.row.Status === 3" type="danger">{{ $fd('Subject_Visit_Status', scope.row.Status)
+            }}</el-tag>
           </template>
         </el-table-column>
         <!-- 总访视量 -->
-        <el-table-column
-          prop="TotalVisitCount"
-          :label="$t('trials:subject:table:totalVisitCount')"
-          show-overflow-tooltip
-          min-width="120"
-        >
+        <el-table-column prop="TotalVisitCount" :label="$t('trials:subject:table:totalVisitCount')"
+          show-overflow-tooltip min-width="120">
           <template slot-scope="scope">
-            <el-button
-              v-if="scope.row.TotalVisitCount > 0 && (hasCrcRoute || hasQCRoute)"
-              type="text"
-              @click="handleTotalVisitCount(scope.row.Code)"
-            >
+            <el-button v-if="scope.row.TotalVisitCount > 0 && (hasCrcRoute || hasQCRoute)" type="text"
+              @click="handleTotalVisitCount(scope.row.Code)">
               {{ scope.row.TotalVisitCount }}
             </el-button>
             <span v-else> {{ scope.row.TotalVisitCount }}</span>
           </template>
         </el-table-column>
         <!-- 计划访视量 -->
-        <el-table-column
-          prop="InPlanVisitCount"
-          :label="$t('trials:subject:table:inPlanVisitCount')"
-          show-overflow-tooltip
-          sortable="custom"
-          min-width="140"
-        />
+        <el-table-column prop="InPlanVisitCount" :label="$t('trials:subject:table:inPlanVisitCount')"
+          show-overflow-tooltip sortable="custom" min-width="140" />
         <!-- 计划外访视量 -->
-        <el-table-column
-          prop="OutPlanVisitCount"
-          :label="$t('trials:subject:table:outPlanVisitCount')"
-          show-overflow-tooltip
-          sortable="custom"
-          width="160"
-        />
+        <el-table-column prop="OutPlanVisitCount" :label="$t('trials:subject:table:outPlanVisitCount')"
+          show-overflow-tooltip sortable="custom" width="160" />
         <!-- 当前提交访视量 -->
-        <el-table-column
-          prop="TotalVisitSubmmitCount"
-          :label="$t('trials:subject:table:totalVisitSubmmitCount')"
-          show-overflow-tooltip
-          min-width="130"
-        />
+        <el-table-column prop="TotalVisitSubmmitCount" :label="$t('trials:subject:table:totalVisitSubmmitCount')"
+          show-overflow-tooltip min-width="130" />
         <!-- 是否漏传 -->
-        <el-table-column
-          prop="IsMissingImages"
-          :label="$t('trials:subject:table:isMissingImages')"
-          show-overflow-tooltip
-          sortable="custom"
-          min-width="140"
-        >
+        <el-table-column prop="IsMissingImages" :label="$t('trials:subject:table:isMissingImages')"
+          show-overflow-tooltip sortable="custom" min-width="140">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.IsMissingImages" type="danger">{{ $fd('YesOrNo', scope.row.IsMissingImages) }}</el-tag>
+            <el-tag v-if="scope.row.IsMissingImages" type="danger">{{ $fd('YesOrNo', scope.row.IsMissingImages)
+            }}</el-tag>
             <el-tag v-else type="primary">{{ $fd('YesOrNo', scope.row.IsMissingImages) }}</el-tag>
           </template>
         </el-table-column>
         <!-- 漏提交访视量 -->
-        <el-table-column
-          prop="MissingSubmmitCount"
-          :label="$t('trials:subject:table:missingSubmmitCount')"
-          show-overflow-tooltip
-          min-width="120"
-        />
+        <el-table-column prop="MissingSubmmitCount" :label="$t('trials:subject:table:missingSubmmitCount')"
+          show-overflow-tooltip min-width="120" />
         <!-- 失访访视量 -->
-        <el-table-column
-          prop="LostVisitCount"
-          :label="$t('trials:subject:table:lostVisitCount')"
-          show-overflow-tooltip
-          min-width="120"
-        />
+        <el-table-column prop="LostVisitCount" :label="$t('trials:subject:table:lostVisitCount')" show-overflow-tooltip
+          min-width="120" />
         <!-- 最新提交访视名称 -->
-        <el-table-column
-          prop="LatestVisitName"
-          :label="$t('trials:subject:table:latestVisitName')"
-          show-overflow-tooltip
-          sortable="custom"
-          min-width="120"
-        />
+        <el-table-column prop="LatestVisitName" :label="$t('trials:subject:table:latestVisitName')"
+          show-overflow-tooltip sortable="custom" min-width="120" />
 
         <el-table-column
-          v-if="hasPermi(['trials:trials-panel:subject:edit', 'trials:trials-panel:subject:status', 'trials:trials-panel:subject:delete'])"
-          :label="$t('common:action:action')"
-          width="200"
-          fixed="right"
-        >
+          v-if="hasPermi(['trials:trials-panel:subject:edit', 'trials:trials-panel:subject:status', 'trials:trials-panel:subject:delete', 'trials:trials-panel:subject:chart', 'trials:trials-panel:subject:report'])"
+          :label="$t('common:action:action')" width="240" fixed="right">
           <template slot-scope="scope">
             <!-- 编辑 -->
-            <el-button
-              v-hasPermi="['trials:trials-panel:subject:edit']"
-              circle
-              :title="$t('trials:subject:action:edit')"
-              icon="el-icon-edit-outline"
-              @click="handleEdit(scope.row)"
-            />
+            <el-button v-hasPermi="['trials:trials-panel:subject:edit']" circle
+              :title="$t('trials:subject:action:edit')" icon="el-icon-edit-outline" @click="handleEdit(scope.row)" />
             <!-- 修改状态 -->
-            <el-button
-              v-hasPermi="['trials:trials-panel:subject:status']"
-              circle
-              :title="$t('trials:subject:action:status')"
-              icon="el-icon-edit"
-              @click="handleEditStatus(scope.row)"
-            />
+            <el-button v-hasPermi="['trials:trials-panel:subject:status']" circle
+              :title="$t('trials:subject:action:status')" icon="el-icon-edit" @click="handleEditStatus(scope.row)" />
             <!-- 删除 -->
-            <el-button
-              v-hasPermi="['trials:trials-panel:subject:delete']"
-              circle
-              :title="$t('trials:subject:action:delete')"
-              icon="el-icon-delete"
-              :disabled="scope.row.StudyCount>0"
-              @click="handleDelete(scope.row)"
-            />
+            <el-button v-hasPermi="['trials:trials-panel:subject:delete']" circle
+              :title="$t('trials:subject:action:delete')" icon="el-icon-delete" :disabled="scope.row.StudyCount > 0"
+              @click="handleDelete(scope.row)" />
             <!-- 删除 -->
-            <el-button
-              v-hasPermi="['trials:trials-panel:subject:report']"
-              icon="el-icon-message"
-              circle
-              :title="$t('trials:subject:title:report')"
-              @click="handleMessage(scope.row)"
-            />
+            <el-button v-hasPermi="['trials:trials-panel:subject:report']" icon="el-icon-message" circle
+              :title="$t('trials:subject:title:report')" @click="handleMessage(scope.row)" />
+            <!-- 图表 -->
+            <el-button v-hasPermi="['trials:trials-panel:subject:chart']" icon="el-icon-s-data" circle
+              :title="$t('trials:subject:title:report')" @click="handleopenSubjectChart(scope.row)" />
           </template>
         </el-table-column>
       </el-table>
 
       <!-- 分页组件 -->
-      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
+      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
+        @pagination="getList" />
     </template>
 
     <!-- 新增/编辑 -->
-    <el-dialog
-      v-if="editDialog.visible"
-      :visible.sync="editDialog.visible"
-      :close-on-click-modal="false"
-      :title="editDialog.title"
-      width="700px"
-      custom-class="base-dialog-wrapper"
-    >
+    <el-dialog v-if="editDialog.visible" :visible.sync="editDialog.visible" :close-on-click-modal="false"
+      :title="editDialog.title" width="700px" custom-class="base-dialog-wrapper">
       <SubjectsForm :data="rowData" :other-info="otherInfo" @close="closeEditDialog" @getList="getList" />
     </el-dialog>
 
     <!-- 修改受试者状态 -->
-    <el-dialog
-      v-if="statusVisible"
-      :visible.sync="statusVisible"
-      :close-on-click-modal="false"
-      :title="$t('trials:subject:dialogTitle:editStatus')"
-      width="700px"
-      custom-class="base-dialog-wrapper"
-    >
+    <el-dialog v-if="statusVisible" :visible.sync="statusVisible" :close-on-click-modal="false"
+      :title="$t('trials:subject:dialogTitle:editStatus')" width="700px" custom-class="base-dialog-wrapper">
       <SubjectStatusForm :data="rowData" @closeDialog="closeStatusDialog" @getList="getList" />
     </el-dialog>
     <!-- 修改受试者状态 -->
-    <el-dialog
-      v-if="MessageVisible"
-      :visible.sync="MessageVisible"
-      :close-on-click-modal="false"
-      :title="$t('trials:subject:title:sendReport').replace('xxx',rowData.Code)"
-      width="720px"
-      custom-class="base-dialog-wrapper"
-    >
+    <el-dialog v-if="MessageVisible" :visible.sync="MessageVisible" :close-on-click-modal="false"
+      :title="$t('trials:subject:title:sendReport').replace('xxx', rowData.Code)" width="720px"
+      custom-class="base-dialog-wrapper">
       <MessageTable :data="rowData" @closeDialog="closeStatusDialog" @getList="getList" />
     </el-dialog>
+    <!-- 图表 -->
+    <el-dialog :visible.sync="chartVisible" :close-on-click-modal="false" :fullscreen="true"
+      custom-class="base-dialog-wrapper">
+      <SubjectChart v-if="chartVisible" :data="rowData" />
+    </el-dialog>
   </BaseContainer>
 </template>
 <script>
@@ -291,6 +183,7 @@ import Pagination from '@/components/Pagination'
 import SubjectsForm from './components/SubjectsForm'
 import SubjectStatusForm from './components/SubjectStatusForm'
 import MessageTable from './components/MessageTable'
+import SubjectChart from './components/SubjectChart'
 import moment from 'moment'
 import { changeURLStatic } from '@/utils/history.js'
 const searchDataDefault = () => {
@@ -306,7 +199,7 @@ const searchDataDefault = () => {
 }
 export default {
   name: 'SubjectList',
-  components: { BaseContainer, Pagination, SubjectsForm, SubjectStatusForm, MessageTable },
+  components: { BaseContainer, Pagination, SubjectsForm, SubjectStatusForm, MessageTable, SubjectChart },
   data() {
     return {
       moment,
@@ -325,7 +218,8 @@ export default {
       statusVisible: false,
       trialId: '',
       hasCrcRoute: false,
-      hasQCRoute: false
+      hasQCRoute: false,
+      chartVisible: false
     }
   },
   watch: {
@@ -353,6 +247,10 @@ export default {
       this.rowData = { ...row }
       this.MessageVisible = true
     },
+    handleopenSubjectChart(row) {
+      this.rowData = { ...row }
+      this.chartVisible = true
+    },
     handleExport() {
       getSubjectList_Export(this.searchData).then(res => {
       }).catch(() => { this.loading = false })
@@ -447,7 +345,7 @@ export default {
     // 关闭状态编辑框
     closeStatusDialog() {
       this.statusVisible = false
-    }, 
+    },
     handleTotalVisitCount(subjectCode) {
       if (this.hasCrcRoute) {
         this.$router.push({ path: `/trials/trials-panel/visit/crc-upload?trialId=${this.$route.query.trialId}&trialCode=${this.$route.query.trialCode}&researchProgramNo=${this.$route.query.researchProgramNo}&subjectCode=${subjectCode}` })