量表打印

package.json

@@ -28,6 +28,7 @@
     "lodash-es": "^4.17.21",
     "nprogress": "0.2.0",
     "qrcodejs2": "^0.0.2",
+    "save": "^2.9.0",
     "sortablejs": "1.10.2",
     "tcplayer.js": "^5.0.1",
     "tim-js-sdk": "^2.27.5",
@@ -37,6 +38,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "3.4.9",
     "vuex": "3.6.0"
   },

src/api/patient/index.js

@@ -225,4 +225,12 @@ export function dealPackage(query) {
     method: 'post',
     data: query
   })
+}
+
+export function printReviewResultDetail(query) {
+  return request({
+    url: `/reviewTask/printReviewResultDetail`,
+    method: 'post',
+    data: query
+  })
 }

src/components/Chart/DynamicChart.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <!-- 图表容器，使用动态样式 -->
+    <div ref="chart" :style="chartStyle"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'DynamicChart',
+  props: {
+    chartType: {
+      type: String,
+      required: true,
+      validator: (value) => ['pie', 'bar', 'line'].includes(value),
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: [String, Number],
+      default: '100%',
+    },
+    height: {
+      type: [String, Number],
+      default: '400px',
+    },
+  },
+  computed: {
+    chartStyle() {
+      return {
+        width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+        height: typeof this.height === 'number' ? `${this.height}px` : this.height,
+      };
+    },
+  },
+  mounted() {
+    this.initChart();
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.updateChart();
+      },
+      deep: true,
+    },
+    chartType() {
+      this.updateChart();
+    },
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      this.updateChart();
+    },
+    updateChart() {
+      const option = this.getChartOption();
+      this.chart.setOption(option);
+    },
+    getChartOption() {
+      if (this.chartType === 'pie') {
+        return this.getPieOption();
+      } else if (this.chartType === 'bar') {
+        return this.getBarOption();
+      } else if (this.chartType === 'line') {
+        return this.getLineOption();
+      }
+      return {};
+    },
+    getPieOption() {
+      return {
+        title: {
+          text: this.title,
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)',
+        },
+        series: [
+          {
+            name: '饼图',
+            type: 'pie',
+            radius: '50%',
+            data: this.chartData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      };
+    },
+    // 获取柱状图配置
+    getBarOption() {
+      return {
+        title: {
+          text: this.title,
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            const valueData = params[0].data;
+            const totalData = params[1].data;
+            return `${valueData.name}: ${valueData.value}/${totalData.value}`;
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.map(item => item.name), // X 轴显示能力名称
+        },
+        yAxis: {
+          type: 'value',
+          max: 10, // Y 轴最大值
+        },
+        series: [
+          {
+            name: '得分',
+            type: 'bar',
+            stack: 'total', // 堆叠到 total 系列
+            data: this.chartData.map(item => ({
+              name: item.name,
+              value: item.value,
+            })),
+            label: {
+              show: true,
+              position: 'insideTop', // 标签显示在柱子内部顶部
+              formatter: (params) => {
+                const data = params.data;
+                return `${data.value}`; // 只显示 value
+              },
+            },
+            itemStyle: {
+              color: '#000', // value 用黑色显示
+            },
+          },
+          {
+            name: '总分',
+            type: 'bar',
+            stack: 'total', // 堆叠到 total 系列
+            barWidth: '20%',
+            data: this.chartData.map(item => ({
+              name: item.name,
+              value: item.total - item.value, // 计算阴影部分的高度
+            })),
+            label: {
+              show: false, // 不显示标签
+            },
+            itemStyle: {
+              color: 'rgba(0, 0, 0, 0.1)', // total 用阴影显示
+            },
+          },
+        ],
+      };
+    },
+    getLineOption() {
+      return {
+        title: {
+          text: this.title,
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            const name = params[0].axisValue;
+            const value = params[0].data;
+            return `${name}: ${value}`;
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartData.map(item => item.name), // X 轴数据（名称）
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: '数值',
+            type: 'line',
+            data: this.chartData.map(item => item.value), // Y 轴数据
+            label: {
+              show: true,
+              position: 'top',
+              formatter: (params) => {
+                return `${params.value}`;
+              },
+            },
+            itemStyle: {
+              color: '#000',
+            },
+            lineStyle: {
+              color: '#000',
+            },
+          },
+        ],
+      };
+    },
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+};
+</script>
+
+<style scoped>
+/* 样式可以根据需要调整 */
+</style>

src/main.js

@@ -43,6 +43,8 @@ import TIMUploadPlugin from 'tim-upload-plugin';
 
 import { SDKAppID } from "@/utils/sdkappId_v-1.0.0"
 
+import Print from 'vue-print-nb'
+
 let options = {
   SDKAppID
 };
@@ -75,6 +77,7 @@ Vue.component('minioFileUpload', minioFileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+Vue.use(Print);
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

src/views/patient/list/cePingInfo.vue

@@ -47,6 +47,7 @@
 
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template slot-scope="scope">
+                <el-button size="mini" v-if="scope.row.type != 'AD8'" type="text" @click="getPrintReviewResultDetail(scope.row)">打印</el-button>
                 <el-button size="mini" v-if="scope.row.type != 'AD8'" type="text" @click="handelInfo(scope.row)">报告详情</el-button>
               </template>
             </el-table-column>
@@ -159,14 +160,28 @@
         <el-button type="primary" @click="handelCePing">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog title="" :visible.sync="printIsShow" width="40%" center>
+      <mmse-print-vue :defaultVal="defaultVal" :reviewPrint="reviewPrint" :reviewTime="reviewTime" v-if="currentPrintComponent === 'MMSE'"/>
+      <moca-print-vue :defaultVal="defaultVal" :reviewPrint="reviewPrint" :reviewTime="reviewTime" v-if="currentPrintComponent === 'MOCA'"/>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="warning" @click="printIsShow = false">关闭</el-button>
+        <el-button v-print="'#printMe'" type="primary">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { reviewTaskList, findReviewResultDetail, reviewTaskSave, selectAnswerRecord, selectAnswerRecordDetail } from '@/api/patient/index'
+import { printReviewResultDetail,reviewTaskList, findReviewResultDetail, reviewTaskSave, selectAnswerRecord, selectAnswerRecordDetail } from '@/api/patient/index'
 import { debounce } from 'lodash-es'
+import mmsePrintVue from './print/mmsePrint.vue'
+import mocaPrintVue from './print/mocaPrint.vue'
 export default {
   dicts: ['exam_type','evaluation_scale'],
+  components:{
+    mmsePrintVue,mocaPrintVue
+  },
   data() {
     return {
       checkedCities: [],
@@ -189,10 +204,33 @@ export default {
         page: 1,
         limit: 10,
       },
-      infototal:0
+      infototal:0,
+      printIsShow: false,  // 打印预览
+      currentPrintComponent: '',
+      reviewPrint: {},
+      reviewTime: ""
     }
   },
   methods: {
+    getPrintReviewResultDetail(row) {
+      console.log(row)
+      const data = {
+        reviewTaskId: row.id,
+        userId: row.userId,
+        type: row.type
+      }
+      printReviewResultDetail(data).then(resp =>{
+        this.reviewPrint = resp.data
+        this.handlePrint(row)
+      })
+    },
+    // 打印
+    handlePrint(row) {
+      this.currentPrintComponent = row.type
+      this.printIsShow = true
+      this.reviewTime = row.reviewTime
+    },
+    
     handleCheckedCitiesChange() {
       console.log("测试",this.checkedCities)
     },
@@ -260,4 +298,5 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>

src/views/patient/list/print/mmsePrint.vue

@@ -0,0 +1,317 @@
+<template>
+    <div>
+        <!-- <el-dialog title="" :visible.sync="mmseIsShow" width="50%" center> -->
+            <div id="printMe" class="printMe" style="text-align: center;">
+                <h1 style="font-size: 28px;">{{reviewPrint.orgName}}</h1>
+                <h3 style="font-size: 24px;">简单精神状态检查表(MMSE)</h3>
+                <hr style="margin: 0px 0;">
+                <div style="text-align: left; display: flex; gap: 20px; flex-wrap: wrap;">
+                <p style="flex: 1 1 100px;"><strong>姓名：</strong>{{defaultVal.name}}</p>
+                <p style="flex: 1 1 100px;"><strong>性别：</strong>{{defaultVal.gender === 1 ? '女' : '男'}}</p>
+                <p style="flex: 1 1 100px;"><strong>年龄：</strong>{{defaultVal.age}}</p>
+                <p style="flex: 1 1 100px;"><strong>教育年限：</strong>{{getLabelForValue(defaultVal.education,dict.type.education_type)}}</p>
+                </div>
+                <hr style="margin: 4px 0;">
+                <table style="width: 100%; border-collapse: collapse;">
+                <thead>
+                    <tr>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="10">定向力({{reviewPrint.scoreSumByViewType['A']}}/10)</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr>
+                    <!-- 定向力 -->
+                    <td style="border: 1px solid #000; padding: 4px;">年份</td>
+                    <td style="border: 1px solid #000; padding: 4px;">季节</td>
+                    <td style="border: 1px solid #000; padding: 4px;">月份</td>
+                    <td style="border: 1px solid #000; padding: 4px;">几号</td>
+                    <td style="border: 1px solid #000; padding: 4px;">星期几</td>
+                    <td style="border: 1px solid #000; padding: 4px;">城市</td>
+                    <td style="border: 1px solid #000; padding: 4px;">区县</td>
+                    <td style="border: 1px solid #000; padding: 4px;">街道</td>
+                    <td style="border: 1px solid #000; padding: 4px;">楼层</td>
+                    <td style="border: 1px solid #000; padding: 4px;">地方</td>
+                    </tr>
+                </tbody>
+                <tbody>
+                    <tr>
+                    <!-- 定向力 -->
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['1']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['2']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['3']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['4']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['5']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['6']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['7']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['8']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['9']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['10']}}</td>
+                    </tr>
+                </tbody>
+
+                <thead>
+                    <tr>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="3">记忆力({{reviewPrint.scoreSumByViewType['B']}}/3)</th>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="5">计算力({{reviewPrint.scoreSumByViewType['F']}}/5)</th>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="2">感知力({{reviewPrint.scoreSumByViewType['G']}}/2)</th>
+                    </tr>
+                </thead>
+
+                <thead>
+                    <tr>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="5">语言能力({{reviewPrint.scoreSumByViewType['E']}}/5)</th>
+                    <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="5">执行能力({{reviewPrint.scoreSumByViewType['C']}}/5)</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr>
+                    <td style="border: 1px solid #000; padding: 4px;">复述一</td>
+                    <td style="border: 1px solid #000; padding: 4px;">复述二</td>
+                    <td style="border: 1px solid #000; padding: 4px;">复述三</td>
+                    <td style="border: 1px solid #000; padding: 4px;">复述四</td>
+                    <td style="border: 1px solid #000; padding: 4px;">造句</td>
+                    <td style="border: 1px solid #000; padding: 4px;">闭眼</td>
+                    <td style="border: 1px solid #000; padding: 4px;" >拿纸</td>
+                    <td style="border: 1px solid #000; padding: 4px;" >对折</td>
+                    <td style="border: 1px solid #000; padding: 4px;" >放腿</td>
+                    <td style="border: 1px solid #000; padding: 4px;" >按图做样</td>
+                    </tr>
+                </tbody>
+                <tbody>
+                    <tr>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['11']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['12']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['13']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['24']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['29']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['25']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['26']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['27']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['28']}}</td>
+                    <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['30']}}</td>
+                    </tr>
+                </tbody>
+
+                </table>
+
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="margin-left: 20px; display: flex; gap: 20px;">
+                        <!-- 画图 -->
+                        <div style="display: flex; flex-direction: column;">
+                            <span>画图：</span>
+                            <div style="width: 80px; height: 80px;">
+                                <img v-if="reviewPrint.url1 != null" :src="reviewPrint.url1" style="width: 80px; height: 80px;">
+                            </div>
+                        </div>
+                    </div>
+                    <div style="margin-right: 20px;">
+                        <span>总分：</span>
+                        <div class="number-with-line">
+                        <span class="number">{{reviewPrint.totalPoints}}</span>
+                        <span class="line"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; justify-content: center; align-items: center;">
+                    <dynamic-chart
+                        chartType="bar"
+                        :chartData="barData"
+                        title="认知域柱状图"
+                        width="800px"
+                        height="200px"
+                        />
+                </div>
+
+                <div style="display: flex; justify-content: center; align-items: center;">
+                    <dynamic-chart
+                        chartType="line"
+                        :chartData="barData1"
+                        title="评分线型图"
+                        width="800px"
+                        height="200px"
+                        />
+                </div>
+
+                <div style="text-align: left;">
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                        <p style="margin-left: 40px;"><strong>参考结论：</strong>{{patientStatus() === 1 ? '不正确状态': '正确状态'}}</p>
+                        <p style="margin-right: 60px;"><strong>日期：</strong>{{formatDate(reviewTime)}}</p>
+                    </div>
+                    <div style="text-align: right; margin-right: 120px;">
+                        <p><strong>测评师签字：</strong></p>
+                    </div>
+                </div>
+
+                <hr>
+
+                <div style="text-align: right;">
+                <p>（本报告只作为临床参考）</p>
+                </div>
+            </div>
+        <!-- </el-dialog> -->
+    </div>
+</template>
+
+<script>
+import DynamicChart from '../../../../components/Chart/DynamicChart.vue'
+export default {
+    dicts: ['education_type'],
+    components: {
+        DynamicChart
+    },
+    props:{
+        defaultVal: {
+            type: Object,
+            required: true
+        },
+        reviewPrint:{
+            type: Object,
+            required: true
+        },
+        reviewTime: {
+            type: String,
+            required: ''
+        }
+    },
+    watch:{
+        reviewPrint:{
+            handler(newData){
+                this.initMMSE()
+            },
+            deep: true
+        }
+    },
+    data() {
+        return {
+            // 柱状图数据
+            barData: [
+                { name: '定向力', value: 5, total: 10 },
+                { name: '记忆力', value: 2, total: 3 },
+                { name: '计算力', value: 3, total: 5 },
+                { name: '感知力', value: 1, total: 2 },
+                { name: '语言能力', value: 4, total: 5 },
+                { name: '执行力', value: 2, total: 5 },
+            ],
+            barData1: [],
+        }
+    },
+    mounted(){
+        this.initMMSE()
+    },
+    methods: {
+        getLabelForValue(value,educationData) {
+            const matchingItem = educationData.find(item => item.value === value);
+            return matchingItem ? matchingItem.label : '未知';
+        },
+        initMMSE() {
+            // 设置柱状图
+            this.updatedBarData()
+            // 患者状态 分析
+            this.patientStatus()
+            // 设置线型图
+            this.updatedLineData()
+        },
+        updatedLineData(){
+            this.barData1 = this.reviewPrint.reviewTasks.map(task =>{
+                const date = new Date(task.reviewTime);
+                const formattedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+                return {
+                    name: formattedDate,
+                    value: task.totalPoints
+                }
+            })
+        },
+        updatedBarData(){
+            return this.barData.map(item => {
+                const key = this.getKeyByName(item.name);
+                if (key && this.reviewPrint.scoreSumByViewType[key] !== undefined) {
+                item.value = this.reviewPrint.scoreSumByViewType[key];
+                }
+                return item;
+            });
+        },
+        patientStatus() {
+            let patientStatus = 0;
+            switch (this.defaultVal.education) {
+              case 'A':
+                patientStatus = this.reviewPrint.totalPoints <= 20 ? 1 : 0;
+                break;
+              case 'B':
+                patientStatus = this.reviewPrint.totalPoints <= 22 ? 1 : 0;
+                break;
+              case 'C':
+                patientStatus = this.reviewPrint.totalPoints <= 23 ? 1 : 0;
+                break;
+              default:
+                // 可以处理未知类别的情况，或者保持status为0
+                console.warn('Unknown defaultVal:', this.defaultVal.totalPoints);
+                break;
+            }
+            return patientStatus;
+        },
+        getKeyByName(name) {
+            const mapping = {
+                '定向力': 'A',
+                '记忆力': 'B',
+                '执行力': 'C',
+                '语言能力': 'E',
+                '计算力': 'F',
+                '感知力': 'G',
+            };
+            return mapping[name];
+        },
+        formatDate(dateTime) {
+            const date = new Date(dateTime);
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.number-with-line {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.number {
+  font-size: 16px;
+}
+.line {
+  width: 100px;
+  height: 2px;
+  background-color: black;
+}
+
+@page {
+  size: A4;
+  margin: 10mm;
+}
+
+.printMe {
+  /* 避免不必要的空白 */
+  padding: 0;
+  margin: 0;
+}
+
+@media print {
+  body {
+    margin: 0;
+    padding: 0;
+  }
+  #printMe {
+    height: 100vh; /* 限制高度为一页 */
+    overflow: hidden; /* 隐藏超出部分 */
+  }
+  .no-print {
+    display: none; /* 隐藏不需要打印的元素 */
+  }
+}
+</style>

src/views/patient/list/print/mocaPrint.vue

@@ -0,0 +1,337 @@
+<template>
+    <div>
+        <div id="printMe" class="printMe" style="text-align: center;">
+        <h1 style="font-size: 28px;">德州市第七人民医院</h1>
+        <h3 style="font-size: 24px;">MoCA蒙特利尔认知评估量表</h3>
+        <hr style="margin: 0px 0;">
+        <div style="text-align: left; display: flex; gap: 20px; flex-wrap: wrap;">
+          <p style="flex: 1 1 100px;"><strong>姓名：</strong>{{defaultVal.name}}</p>
+                <p style="flex: 1 1 100px;"><strong>性别：</strong>{{defaultVal.gender === 1 ? '女' : '男'}}</p>
+                <p style="flex: 1 1 100px;"><strong>年龄：</strong>{{defaultVal.age}}</p>
+                <p style="flex: 1 1 100px;"><strong>教育年限：</strong>{{getLabelForValue(defaultVal.education,dict.type.education_type)}}</p>
+        </div>
+        <hr style="margin: 4px 0;">
+        <table style="width: 100%; border-collapse: collapse;">
+          <thead>
+            <tr>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="3">视空间与执行能力({{calculateSum(32,33,38,39,40)}}/5)</th>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="3">命名({{calculateSum(41,42,43)}}/3)</th>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="4">注意(6/6)</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <!-- 视空间与执行能力 -->
+              <td style="border: 1px solid #000; padding: 4px;">连线</td>
+              <td style="border: 1px solid #000; padding: 4px;">复制立方体</td>
+              <td style="border: 1px solid #000; padding: 4px;">画钟表</td>
+              <!-- 命名 -->
+              <td style="border: 1px solid #000; padding: 4px;">狮子</td>
+              <td style="border: 1px solid #000; padding: 4px;">犀牛</td>
+              <td style="border: 1px solid #000; padding: 4px;">骆驼</td>
+              <!-- 注意 -->
+              <td style="border: 1px solid #000; padding: 4px;">顺背</td>
+              <td style="border: 1px solid #000; padding: 4px;">倒背</td>
+              <td style="border: 1px solid #000; padding: 4px;">敲打桌面</td>
+              <td style="border: 1px solid #000; padding: 4px;">连续减7</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <!-- 视空间与执行能力 -->
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['32']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['33']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['38']+reviewPrint.reviewIdScoreMap['39']+reviewPrint.reviewIdScoreMap['40']}}/3</td>
+              <!-- 命名 -->
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['41']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['42']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['43']}}</td>
+              <!-- 注意 -->
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['49']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['50']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{reviewPrint.reviewIdScoreMap['51']}}</td>
+              <td style="border: 1px solid #000; padding: 4px;">{{calculateSum(52,53,54,55,56)}}/3</td>
+            </tr>
+          </tbody>
+
+          <thead>
+            <tr>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="3">语言(3/3)</th>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="2">抽象(2/2)</th>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="5">延迟记忆(5/5)</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <!-- 语言 -->
+              <td style="border: 1px solid #000; padding: 4px;">重复一</td>
+              <td style="border: 1px solid #000; padding: 4px;">重复二</td>
+              <td style="border: 1px solid #000; padding: 4px;">流畅性</td>
+              <!-- 抽象 -->
+              <td style="border: 1px solid #000; padding: 4px;">语言相似性一</td>
+              <td style="border: 1px solid #000; padding: 4px;">语言相似性二</td>
+              <!-- 延迟记忆 -->
+              <th style="border: 1px solid #000; padding: 4px;" colspan="5"></th>
+            </tr>
+          </tbody>
+
+          <tbody>
+            <tr>
+              <!-- 语言 -->
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <!-- 抽象 -->
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <!-- 延迟记忆 -->
+              <td style="border: 1px solid #000; padding: 4px;" colspan="5">1/5</td>
+            </tr>
+          </tbody>
+
+          <thead>
+            <tr>
+              <th style="border: 1px solid #000; padding: 4px;text-align: left;" colspan="10">定向(3/3)</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td style="border: 1px solid #000; padding: 4px;">日期</td>
+              <td style="border: 1px solid #000; padding: 4px;">月份</td>
+              <td style="border: 1px solid #000; padding: 4px;">年代</td>
+              <td style="border: 1px solid #000; padding: 4px;">星期几</td>
+              <td style="border: 1px solid #000; padding: 4px;">地点</td>
+              <td style="border: 1px solid #000; padding: 4px;">城市</td>
+              <td style="border: 1px solid #000; padding: 4px;" colspan="4"></td>
+            </tr>
+          </tbody>
+
+          <tbody>
+            <tr>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;">1</td>
+              <td style="border: 1px solid #000; padding: 4px;" colspan="4"></td>
+            </tr>
+          </tbody>
+
+        </table>
+
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div id="a" style="margin-left: 20px; display: flex; gap: 20px;">
+            <!-- 立方体画图 -->
+            <div style="display: flex; flex-direction: column;">
+              <span>立方体画图：</span>
+              <img src="https://hcp-yaorong.oss-cn-beijing.aliyuncs.com/review/0137cac9092f402ca186d045fb8ce0e9.png" alt="图片1" style="width: 80px; height: 80px;">
+            </div>
+            <!-- 钟表画图 -->
+            <div style="display: flex; flex-direction: column;">
+              <span>钟表画图：</span>
+              <img src="https://hcp-yaorong.oss-cn-beijing.aliyuncs.com/review/0137cac9092f402ca186d045fb8ce0e9.png" alt="图片2" style="width: 80px; height: 80px;">
+            </div>
+          </div>
+          <div id="b" style="margin-right: 20px;">
+            <span>总分：</span>
+            <div class="number-with-line">
+              <span class="number">20</span>
+              <span class="line"></span>
+            </div>
+          </div>
+        </div>
+
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <dynamic-chart
+                chartType="bar"
+                :chartData="barData"
+                title="认知域柱状图"
+                width="800px"
+                height="200px"
+                />
+        </div>
+
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <dynamic-chart
+                chartType="line"
+                :chartData="barData1"
+                title="认知域柱状图"
+                width="800px"
+                height="200px"
+                />
+        </div>
+
+        <div style="text-align: left;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <p style="margin-left: 40px;"><strong>参考结论：</strong>不正确状态</p>
+                <p style="margin-right: 60px;"><strong>日期：</strong>2024.11.16</p>
+            </div>
+            <div style="text-align: right; margin-right: 120px;">
+                <p><strong>测评师签字：</strong></p>
+            </div>
+        </div>
+
+        <hr>
+
+        <div style="text-align: right;">
+          <p>（本报告只作为临床参考）</p>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import DynamicChart from '../../../../components/Chart/DynamicChart.vue'
+export default {
+    dicts: ['education_type'],
+    components: {
+        DynamicChart
+    },
+    props:{
+        defaultVal: {
+            type: Object,
+            required: true
+        },
+        reviewPrint:{
+            type: Object,
+            required: true
+        },
+        reviewTime: {
+            type: String,
+            required: ''
+        }
+    },
+    watch:{
+        reviewPrint:{
+            handler(newData){
+                this.initMMSE()
+            },
+            deep: true
+        }
+    },
+    data() {
+        return {
+            // 柱状图数据
+            barData: [
+                { name: '定向力', value: 5, total: 10 },
+                { name: '记忆力', value: 2, total: 3 },
+                { name: '计算力', value: 3, total: 5 },
+                { name: '感知力', value: 1, total: 2 },
+                { name: '语言能力', value: 4, total: 5 },
+                { name: '执行力', value: 2, total: 5 },
+            ],
+            barData1: [
+                { name: '2025.1.12', value: 19 },
+                { name: '2025.1.25', value: 21 },
+                { name: '2025.2.11', value: 25 },
+                { name: '2025.2.15', value: 21 },
+                { name: '2025.2.28', value: 26 },
+                { name: '2025.3.11', value: 28 },
+                { name: '2025.3.21', value: 30 },
+            ]
+        }
+    },
+    mounted(){
+        this.initMMSE()
+    },
+    methods: {
+        getLabelForValue(value,educationData) {
+            const matchingItem = educationData.find(item => item.value === value);
+            return matchingItem ? matchingItem.label : '未知';
+        },
+        calculateSum(...numbers) {
+          // 使用 reduce 方法计算总和
+          return this.result = numbers.reduce((sum, num) => sum + this.reviewPrint.reviewIdScoreMap[num], 0);
+        },
+        initMMSE() {
+          // 设置柱状图
+          // this.updatedBarData()
+          // 患者状态 分析
+          this.patientStatus()
+          this.updatedLineData()
+        },
+        updatedLineData(){
+            this.barData1 = this.reviewPrint.reviewTasks.map(task =>{
+                const date = new Date(task.reviewTime);
+                const formattedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+                return {
+                    name: formattedDate,
+                    value: task.totalPoints
+                }
+            })
+        },
+        patientStatus() {
+            let patientStatus = 0;
+            switch (this.defaultVal.education) {
+              case 'A':
+                patientStatus = this.reviewPrint.totalPoints <= 20 ? 1 : 0;
+                break;
+              case 'B':
+                patientStatus = this.reviewPrint.totalPoints <= 22 ? 1 : 0;
+                break;
+              case 'C':
+                patientStatus = this.reviewPrint.totalPoints <= 23 ? 1 : 0;
+                break;
+              default:
+                // 可以处理未知类别的情况，或者保持status为0
+                console.warn('Unknown defaultVal:', this.defaultVal.totalPoints);
+                break;
+            }
+            return patientStatus;
+        },
+        formatDate(dateTime) {
+            const date = new Date(dateTime);
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.number-with-line {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.number {
+  font-size: 16px;
+}
+.line {
+  width: 100px;
+  height: 2px;
+  background-color: black;
+}
+
+@page {
+  size: A4;
+  margin: 10mm;
+}
+
+.printMe {
+  /* 避免不必要的空白 */
+  padding: 0;
+  margin: 0;
+}
+
+@media print {
+  body {
+    margin: 0;
+    padding: 0;
+  }
+  #printMe {
+    height: 100vh; /* 限制高度为一页 */
+    overflow: hidden; /* 隐藏超出部分 */
+  }
+  .no-print {
+    display: none; /* 隐藏不需要打印的元素 */
+  }
+}
+</style>