阅片报告中数值的统计与可视化（未完成）

src/api/reading.js

@@ -311,3 +311,11 @@ export function changePlottingScaleChangeAnswer(param) {
     data: param
   })
 }
+// 阅片获取图表数据
+export function getReportsChartData(param) {
+  return request({
+    url: `/ReadingImageTask/getReportsChartData`,
+    method: 'post',
+    data: param
+  })
+}

src/components/readingChart/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div id="readingChart" class="readingChart" v-show="visible" :style="{
+        'z-index': zIndex
+    }" :loading="loading">
+        <div ref="chartContainer" style="width: 490px; height: 290px;"></div>
+    </div>
+</template>
+
+<script>
+import { getReportsChartData } from "@/api/reading"
+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: "readingChart",
+    props: {
+
+    },
+    data() {
+        return {
+            visible: false,
+            zIndex: 9,
+            chart: null,
+            loading: false
+        };
+    },
+    methods: {
+        init(event, obj, zIndex = 9) {
+            this.zIndex = zIndex
+            // 设置菜单出现的位置
+            // 具体显示位置根据自己需求进行调节
+            this.visible = true
+            let readingChart = document.querySelector("#readingChart");
+            let chaY = document.body.clientHeight - event.clientY;
+            let chaX = document.body.clientWidth - event.clientX;
+            // 防止菜单太靠底，根据可视高度调整菜单出现位置
+            if (chaY < 250) {
+                readingChart.style.top = event.clientY - 220 + "px";
+            } else {
+                readingChart.style.top = event.clientY + "px";
+            }
+            if (chaX < 150) {
+                readingChart.style.left = event.clientX - 520 + "px";
+            } else {
+                readingChart.style.left = event.clientX + 15 + "px";
+            }
+            this.getInfo(obj)
+            // this.initChart()
+            // document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
+        },
+        async getInfo(data) {
+            try {
+                let { VisitTaskId = null, TrialId = null, QuestionId = null, TableQuestionId = null, RowIndex = null, ReportChartTypeEnum = null } = data
+                let params = {
+                    VisitTaskId, TrialId, QuestionId, TableQuestionId, RowIndex, ReportChartTypeEnum
+                }
+                this.loading = true
+                let res = await getReportsChartData(params)
+                this.loading = false
+                if (res.IsSuccess) {
+                    let obj = {
+                        xAxisData: res.Result.VisitTaskNameList || [],
+                        series: []
+                    }
+                    res.Result.ChartDataList.forEach(item => {
+                        obj.series.push({
+                            name: item.Name,
+                            data: item.Value,
+                            type: 'line'
+
+                        })
+                    });
+                    this.initChart(obj)
+                }
+            } catch (err) {
+                this.loading = false
+                console.log(err)
+            }
+        },
+        foo() {
+            this.visible = false
+            this.$emit("foo");
+            this.dispose()
+        },
+        initChart(obj) {
+            this.chart = echarts.init(this.$refs.chartContainer);
+            // ...图表配置
+            const option = {
+                title: { text: '' },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                xAxis: { data: obj.xAxisData },
+                yAxis: { type: 'value' },
+                series: obj.series
+            };
+            // 4. 使用配置项渲染图表
+            this.chart.setOption(option);
+        },
+        resize() {
+            if (this.chart) {
+                this.chart.resize()
+            }
+        },
+        dispose() {
+            if (this.chart) {
+                this.chart.dispose()
+                this.chart = null
+            }
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.readingChart {
+    min-width: 500px;
+    max-width: 500px;
+    font-size: 14px;
+    display: inline-block;
+    background: #fff;
+    border-radius: 4px;
+    position: fixed;
+    padding: 10px 6px;
+    list-style-type: none;
+    min-height: 300px;
+    max-height: 80vh;
+    overflow: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+</style>

src/icons/svg/readingChart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763446648844" class="icon" viewBox="0 0 1321 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3570" xmlns:xlink="http://www.w3.org/1999/xlink" width="258.0078125" height="200"><path d="M1187.981 845.871H200.885V120.065C200.885 91.032 177.659 62 142.82 62s-58.064 23.226-58.064 58.065v783.87c0 29.033 23.225 58.065 58.064 58.065h1045.161c29.033 0 58.065-23.226 58.065-58.065s-29.032-58.064-58.065-58.064z" fill="#1296db" p-id="3571"></path><path d="M287.981 317.484L555.078 485.87c11.613 5.806 17.42 5.806 29.032 5.806 17.42 0 34.84-5.806 46.452-23.225l185.806-255.484 191.613 145.161c23.226 17.42 58.065 11.613 75.484-11.613 17.42-23.226 11.613-58.064-11.613-75.484L839.594 96.84c-23.226-17.42-58.064-11.613-75.484 11.613L572.497 363.935 346.046 224.581c-23.226-17.42-58.065-5.807-75.484 17.419s-5.806 58.065 17.42 75.484z m29.033 505.161c29.032 0 58.064-23.226 58.064-58.064V532.323c0-29.033-23.226-58.065-58.064-58.065s-58.065 23.226-58.065 58.065v238.064c5.807 29.032 29.032 52.258 58.065 52.258zM502.82 619.42v150.968c0 29.032 23.226 58.065 58.065 58.065s58.064-23.226 58.064-58.065V619.42c0-29.032-23.226-58.064-58.064-58.064s-58.065 29.032-58.065 58.064z" fill="#1296db" p-id="3572"></path><path d="M740.885 416.194v354.193c0 29.032 23.225 58.065 58.064 58.065s58.065-23.226 58.065-58.065V416.194c0-29.033-23.226-58.065-58.065-58.065s-58.064 29.032-58.064 58.065z m296.129 92.903c-29.033 0-58.065 23.226-58.065 58.064v203.226c0 29.032 23.226 58.065 58.065 58.065s58.064-23.226 58.064-58.065V567.161c0-29.032-29.032-58.064-58.064-58.064z" fill="#1296db" p-id="3573"></path></svg>

src/styles/index.scss

@@ -357,4 +357,11 @@ body .el-table th.gutter {
 
 .el-message-box__wrapper {
   z-index: 9999 !important;
+}
+
+.svg-readingChart {
+  width: 28px !important;
+  height: 30px !important;
+  margin-left: 10px;
+  cursor: pointer;
 }

src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue

@@ -341,7 +341,7 @@
                 :last-viewport-task-id="lastViewportTaskId" :visit-info="s" @resetAnnotations="resetAnnotations"
                 @setReadingTaskState="setReadingTaskState" @viewCustomAnnotationSeries="viewCustomAnnotationSeries"
                 @getCustomScreenshots="getCustomScreenshots" @setReadingToolActive="setReadingToolActive"
-                @setReadingToolPassive="setReadingToolPassive" />
+                @setReadingToolPassive="setReadingToolPassive" @handleReadingChart="handleReadingChart" />
             </div>
           </div>
         </div>
@@ -427,6 +427,7 @@
     <download-dicom-and-nonedicom v-if="downloadImageVisible" :subject-id="uploadSubjectId"
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
       :visible.sync="downloadImageVisible" />
+    <readingChart ref="readingChart" />
   </div>
 </template>
 <script>
@@ -472,6 +473,7 @@ import ScaleOverlayTool from './tools/ScaleOverlayTool'
 import uploadDicomAndNonedicom from '@/components/uploadDicomAndNonedicom'
 import downloadDicomAndNonedicom from '@/components/downloadDicomAndNonedicom'
 import { getNetWorkSpeed, setNetWorkSpeedSizeAll, workSpeedclose } from "@/utils"
+import readingChart from '@/components/readingChart'
 const { visibility } = annotation
 const { ViewportType, Events } = Enums
 const renderingEngineId = 'myRenderingEngine'
@@ -544,6 +546,7 @@ export default {
     colorMap,
     downloadDicomAndNonedicom,
     uploadDicomAndNonedicom,
+    readingChart
   },
   props: {
     readingTool: {
@@ -765,6 +768,17 @@ export default {
     })
   },
   methods: {
+    handleReadingChart(row) {
+      let { e, data } = row
+      let obj = Object.assign({}, data)
+      obj.TrialId = this.$route.query.trialId
+      obj.VisitTaskId = this.taskInfo.VisitTaskI
+      let zIndex = 9
+      if (obj.RowIndex) {
+        zIndex = 9999
+      }
+      this.$refs.readingChart.init(e, obj, zIndex)
+    },
     async handleSubmitKeyDoc() {
       try {
         let data = {

src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionFormItem.vue

@@ -56,7 +56,8 @@
               :question-form="QuestionsForm" :visit-task-id="visitTaskId" :criterion-id="criterionId"
               :type="addOrEdit.type" :calculationList="calculationList" :questionsMarkStatus="questionsMarkStatus"
               @formItemTableNumberChange="formItemTableNumberChange" @resetFormItemData="resetTableFormItemData"
-              @setFormItemData="setFormTableItemData" @operateImageMarker="operateImageMarker" @save="save" />
+              @setFormItemData="setFormTableItemData" @operateImageMarker="operateImageMarker" @save="save"
+              @handleReadingChart="handleReadingChart" />
           </el-form>
         </div>
         <div slot="footer">
@@ -152,14 +153,7 @@
         <!-- 自增 -->
         <el-input v-if="question.Type === 'increment'" v-model="questionForm[question.Id]" disabled />
         <!-- 数值 -->
-        <!-- :precision="2" :step="0.1" :max="10" -->
-        <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]" clearable
-          @change="(val) => { formItemNumberChange(val, question) }" :disabled="readingTaskState === 2">
-          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()" :value="val.trim()" />
-          <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
-            question.CustomUnit }}</template>
-          <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
-        </el-select>
+
         <template v-if="question.Type === 'number' && (question.ImageMarkEnum === 1 || question.ImageMarkEnum === 2)">
           <div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
             <el-input type="text" @change="(val) => { formItemNumberChange(val, question) }"
@@ -173,6 +167,13 @@
                 {{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}
               </template>
             </el-input>
+            <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
+              @click.stop="(e) => handleReadingChart({
+                e,
+                data: {
+                  QuestionId: question.Id
+                }
+              })" />
             <!-- 测量 -->
             <el-button
               v-if="readingTaskState < 2 && (!questionsMarkStatus[question.Id] || (questionsMarkStatus[question.Id] && !questionsMarkStatus[question.Id].isMarked))"
@@ -215,27 +216,47 @@
           </div>
         </template>
         <template v-else-if="question.Type === 'number'">
-          <el-input type="text" v-if="question.Type === 'number' && !question.TypeValue && question.DataSource !== 1"
-            @change="(val) => { formItemNumberChange(val, question) }" @input="numberInput(question.Id)"
-            @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)" v-model="questionForm[question.Id]"
-            :disabled="readingTaskState === 2">
-            <!-- <template slot="append">1</template> -->
-            <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit)
-              :
-              question.CustomUnit }}</template>
-            <template slot="append" v-else-if="question.ValueType === 2">%</template>
-
-          </el-input>
-          <el-input type="text" @input="numberInput(question.Id)"
-            v-if="question.Type === 'number' && !question.TypeValue && question.DataSource === 1"
-            @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
-            :disabled="question.DataSource === 1 || readingTaskState === 2" v-model="questionForm[question.Id]">
-            <!-- <template slot="append">2</template> -->
-            <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit)
-              :
-              question.CustomUnit }}</template>
-            <template slot="append" v-else-if="question.ValueType === 2">%</template>
-          </el-input>
+          <div style="display: flex;justify-content: space-between;">
+            <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]"
+              clearable @change="(val) => { formItemNumberChange(val, question) }" :disabled="readingTaskState === 2">
+              <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()"
+                :value="val.trim()" />
+              <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit',
+                question.Unit)
+                :
+                question.CustomUnit }}</template>
+              <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
+            </el-select>
+            <el-input type="text" @change="(val) => { formItemNumberChange(val, question) }"
+              v-else-if="question.Type === 'number' && !question.TypeValue && question.DataSource !== 1"
+              @input="numberInput(question.Id)" @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+              v-model="questionForm[question.Id]" :disabled="readingTaskState === 2">
+              <!-- <template slot="append">1</template> -->
+              <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit',
+                question.Unit)
+                :
+                question.CustomUnit }}</template>
+              <template slot="append" v-else-if="question.ValueType === 2">%</template>
+            </el-input>
+            <el-input type="text" @input="numberInput(question.Id)"
+              v-else-if="question.Type === 'number' && !question.TypeValue && question.DataSource === 1"
+              @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+              :disabled="question.DataSource === 1 || readingTaskState === 2" v-model="questionForm[question.Id]">
+              <!-- <template slot="append">2</template> -->
+              <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit',
+                question.Unit)
+                :
+                question.CustomUnit }}</template>
+              <template slot="append" v-else-if="question.ValueType === 2">%</template>
+            </el-input>
+            <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
+              @click.stop="(e) => handleReadingChart({
+                e,
+                data: {
+                  QuestionId: question.Id
+                }
+              })" />
+          </div>
         </template>
         <!-- 上传图像 -->
         <el-upload v-if="question.Type === 'upload' || question.Type === 'screenshot'"
@@ -263,7 +284,7 @@
         :questionMarkInfoList="questionMarkInfoList" :questionsMarkStatus="questionsMarkStatus"
         @formItemNumberChange="formItemNumberChange" @setFormItemData="setFormItemData"
         @resetFormItemData="resetFormItemData" @getQuestions="getQuestions" @operateImageMarker="operateImageMarker"
-        @unBindAnnotationToQuestion="unBindAnnotationToQuestion" />
+        @unBindAnnotationToQuestion="unBindAnnotationToQuestion" @handleReadingChart="handleReadingChart" />
     </template>
 
     <!-- <base-model :config="addOrEdit"
@@ -296,7 +317,6 @@ import {
   utilities as csUtils
   // getEnabledElementByIds
 } from '@cornerstonejs/core'
-import store from '@/store'
 export default {
   name: 'QuestionFormItem',
   components: {
@@ -501,6 +521,10 @@ export default {
     })
   },
   methods: {
+    handleReadingChart(row) {
+      console.log(row, 'row')
+      this.$emit('handleReadingChart', row)
+    },
     numberInput(id) {
       this.questionForm[id] = this.questionForm[id].toUpperCase();
     },

src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList.vue

@@ -21,7 +21,7 @@
             :question-mark-info-list="questionMarkInfoList" :questions-mark-status="questionsMarkStatus"
             :is-baseline="isBaseLineTask" @resetFormItemData="resetFormItemData" @setFormItemData="setFormItemData"
             @getQuestions="getQuestions" @operateImageMarker="operateImageMarker"
-            @unBindAnnotationToQuestion="unBindAnnotationToQuestion" />
+            @unBindAnnotationToQuestion="unBindAnnotationToQuestion" @handleReadingChart="handleReadingChart" />
         </template>
 
         <el-form-item v-if="readingTaskState < 2">
@@ -131,6 +131,9 @@ export default {
     this.getQuestions(true)
   },
   methods: {
+    handleReadingChart(e) {
+      this.$emit('handleReadingChart', e)
+    },
     async getQuestions(isInit) {
       this.loading = true
       try {

src/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionTableFormItem.vue

@@ -62,7 +62,8 @@
       <el-input v-if="question.Type === 'class' && question.ClassifyShowType === 1"
         v-model="questionForm[question.Id]" />
       <el-select v-if="question.Type === 'class' && question.ClassifyShowType === 2" v-model="questionForm[question.Id]"
-        :disabled="!question.ClassifyEditType || question.IsPreinstall" @change="(val) => { formItemChange(val, question) }">
+        :disabled="!question.ClassifyEditType || question.IsPreinstall"
+        @change="(val) => { formItemChange(val, question) }">
         <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val.trim()" :value="val.trim()" />
       </el-select>
       <el-radio-group v-if="question.Type === 'class' && question.ClassifyShowType === 3"
@@ -92,6 +93,14 @@
               {{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}
             </template>
           </el-input>
+          <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
+            @click.stop="(e) => handleReadingChart({
+              e,
+              data: {
+                TableQuestionId: question.Id,
+                RowIndex: question.RowIndex
+              }
+            })" />
           <!-- 测量 -->
           <el-button
             v-if="readingTaskState < 2 && (!questionsMarkStatus[rowId ? `${rowId}_${question.Id}` : question.Id] || (questionsMarkStatus[rowId ? `${rowId}_${question.Id}` : question.Id] && !questionsMarkStatus[rowId ? `${rowId}_${question.Id}` : question.Id].isMarked))"
@@ -136,31 +145,46 @@
         </div>
       </template>
       <template v-else-if="question.Type === 'number'">
-        <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]" clearable
-          @change="((val) => { formItemChange(val, question) })">
-          <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
-          <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
-            question.CustomUnit }}</template>
-          <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
-        </el-select>
-        <el-input type="text" v-else-if="question.Type === 'number' && question.DataSource !== 1"
-          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False') || question.IsPreinstall"
-          @change="((val) => { formItemNumberChange(val, question) })" @input="numberInput(question.Id)"
-          @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)" v-model="questionForm[question.Id]">
-          <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
-            question.CustomUnit }}</template>
-        </el-input>
-        <el-input type="text" v-else-if="question.Type === 'number' && question.DataSource === 1"
-          :disabled="question.DataSource === 1" @input="numberInput(question.Id, true) || question.IsPreinstall"
-          @blur="handleCalculationBlur(calculationValue)" v-model="calculationValue">
-          <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
-            question.CustomUnit }}</template>
-        </el-input>
+        <div style="display: flex;justify-content: space-between;">
+          <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]"
+            clearable @change="((val) => { formItemChange(val, question) })">
+            <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
+            <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit)
+              :
+              question.CustomUnit }}</template>
+            <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
+          </el-select>
+          <el-input type="text" v-else-if="question.Type === 'number' && question.DataSource !== 1"
+            :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False') || question.IsPreinstall"
+            @change="((val) => { formItemNumberChange(val, question) })" @input="numberInput(question.Id)"
+            @blur="handleBlur(questionForm[question.Id], questionForm, question.Id)"
+            v-model="questionForm[question.Id]">
+            <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit)
+              :
+              question.CustomUnit }}</template>
+          </el-input>
+          <el-input type="text" v-else-if="question.Type === 'number' && question.DataSource === 1"
+            :disabled="question.DataSource === 1" @input="numberInput(question.Id, true) || question.IsPreinstall"
+            @blur="handleCalculationBlur(calculationValue)" v-model="calculationValue">
+            <template slot="append" v-if="question.Unit !== 0">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit)
+              :
+              question.CustomUnit }}</template>
+          </el-input>
+          <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
+            @click.stop="(e) => handleReadingChart({
+              e,
+              data: {
+                TableQuestionId: question.Id,
+                RowIndex: questionForm.RowIndex
+              }
+            })" />
+        </div>
+
       </template>
       <!-- 上传图像 -->
-      <el-upload v-if="question.Type === 'upload' || question.Type === 'screenshot'" :disabled="readingTaskState === 2 || question.IsPreinstall"
-        action :accept="question.FileType" :limit="question.ImageCount === 0 ? 100 : question.ImageCount"
-        :on-preview="handlePictureCardPreview"
+      <el-upload v-if="question.Type === 'upload' || question.Type === 'screenshot'"
+        :disabled="readingTaskState === 2 || question.IsPreinstall" action :accept="question.FileType"
+        :limit="question.ImageCount === 0 ? 100 : question.ImageCount" :on-preview="handlePictureCardPreview"
         :before-upload="(file) => { return handleBeforeUpload(file, question.FileType, question.Type) }"
         :http-request="uploadScreenshot" :on-remove="handleRemove" :file-list="fileList"
         :class="{ disabled: question.ImageCount === 0 ? false : fileList.length >= question.ImageCount }">
@@ -298,6 +322,9 @@ export default {
     if (this.type === 'edit') return
   },
   methods: {
+    handleReadingChart(row) {
+      this.$emit('handleReadingChart', row)
+    },
     numberInput(id, notId = false) {
       if (notId) {
         this.calculationValue = this.calculationValue.toUpperCase();

src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue

@@ -350,7 +350,7 @@ export default {
       layout: '1*2',
       cellsMax: 4,
       viewportInfos: [],
-      taskInfo: null,
+      taskInfo: {},
       activeTool: '',
       readingTaskState: 2,
       renderHistoryAnnotationTaskIds: [],

src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue

@@ -62,7 +62,7 @@
           @setReadingTaskState="setReadingTaskState" @viewCustomAnnotationSeries="viewCustomAnnotationSeries"
           @getCustomScreenshots="getCustomScreenshots" @setReadingToolActive="setReadingToolActive"
           @setReadingToolPassive="setReadingToolPassive" @setSaved="setSaved"
-          @setIsHaveBindingQuestion="setIsHaveBindingQuestion" />
+          @setIsHaveBindingQuestion="setIsHaveBindingQuestion" @handleReadingChart="handleReadingChart" />
       </div>
     </div>
 
@@ -83,6 +83,7 @@
       </div>
 
     </el-dialog>
+    <readingChart ref="readingChart" />
   </div>
 </template>
 
@@ -96,6 +97,7 @@ import EcrfList from './EcrfList'
 import customizeQuestionList from '@/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList'
 import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
 import { mapGetters } from 'vuex'
+import readingChart from '@/components/readingChart'
 export default {
   name: 'ReadPage',
   components: {
@@ -105,7 +107,8 @@ export default {
     // PdfViewer,
     EcrfList,
     ClinicalData,
-    customizeQuestionList
+    customizeQuestionList,
+    readingChart
   },
   data() {
     return {
@@ -158,8 +161,23 @@ export default {
     this.trialId = this.$route.query.trialId
     this.readingTaskState = this.taskInfo.ReadingTaskState
     this.getRelatedTask()
+    document.addEventListener("click", this.foo);
   },
   methods: {
+    handleReadingChart(row) {
+      let { e, data } = row
+      let obj = Object.assign({}, data)
+      obj.TrialId = this.$route.query.trialId
+      obj.VisitTaskId = this.taskInfo.VisitTaskId
+      let zIndex = 9
+      if (obj.RowIndex) {
+        zIndex = 9999
+      }
+      this.$refs.readingChart.init(e, obj, zIndex)
+    },
+    foo() {
+      this.$refs.readingChart.foo()
+    },
     getEcrf(data) {
       let { type } = data
       if (type === 'getOperateStateEnum') {

src/views/trials/trials-panel/setting/reading-unit/components/QuestionsForm.vue

@@ -457,6 +457,13 @@
             }}
           </div>
         </div>
+        <!-- 图表展示-->
+        <el-form-item v-if="form.Type === 'number' && !isFromSystem"
+          :label="$t('trials:readingUnit:qsList:title:ShowChartTypeEnum')" prop="ShowChartTypeEnum">
+          <el-radio-group v-model="form.ShowChartTypeEnum">
+            <el-radio v-for="item of $d.ShowChartType" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <!-- 影像标记:disabled="form.IsRequired === 0" -->
         <el-form-item v-if="form.Type === 'number' && !isFromSystem && readingVersionEnum"
           :label="$t('trials:readingUnit:qsList:title:imageMarkEnum')" prop="ImageMarkEnum">
@@ -735,6 +742,7 @@ export default {
         ClassifyEditType: null,
         ClassifyShowType: null,
         ImageMarkEnum: 0,
+        ShowChartTypeEnum: 0,
         ImageTool: '',
         ImageToolAttribute: '',
         ExcludeShowVisitList: []
@@ -1244,6 +1252,7 @@ export default {
       form.ClassifyType = null
       form.ClassifyShowType = null
       form.ImageMarkEnum = 0
+      form.ShowChartTypeEnum = 0
       form.ImageTool = ''
       form.ImageToolAttribute = ''
       this.imageToolAttributes = []

src/views/trials/trials-panel/setting/reading-unit/components/TableQsForm.vue

@@ -259,6 +259,13 @@
               $t('trials:readingUnit:qsList:message:msg1') : $t('trials:readingUnit:qsList:message:msg2') }}
           </div>
         </div>
+        <!-- 图表展示-->
+        <el-form-item v-if="form.Type === 'number' && !isFromSystem"
+          :label="$t('trials:readingUnit:qsList:title:ShowChartTypeEnum')" prop="ShowChartTypeEnum">
+          <el-radio-group v-model="form.ShowChartTypeEnum">
+            <el-radio v-for="item of $d.ShowChartType" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <!-- 影像标记:disabled="form.IsRequired === 0" -->
         <el-form-item v-if="form.Type === 'number' && !isFromSystem && readingVersionEnum"
           :label="$t('trials:readingUnit:qsList:title:imageMarkEnum')" prop="ImageMarkEnum">
@@ -598,6 +605,7 @@ export default {
         ClassifyEditType: null,
         ClassifyShowType: null,
         ImageMarkEnum: 0,
+        ShowChartTypeEnum: 0,
         ImageTool: '',
         ImageToolAttribute: '',
         // IsEnable: true
@@ -1108,6 +1116,7 @@ export default {
       form.ClassifyType = null
       form.ClassifyShowType = null
       form.ImageMarkEnum = 0
+      form.ShowChartTypeEnum = 0
       form.ImageTool = ''
       form.ImageToolAttribute = ''
       this.imageToolAttributes = []