测试完成

WXL (wul)

6 天以前 5319d5b95497b5b546947ac340c14c71e5b54ca6

 src/views/patient/patient/profile/index.vue

@@ -16,7 +16,11 @@
              {{ userform.sex == 1 ? "男" : "女" }}
            </div>
            <div style="margin-left: 10px" class="text-title">
              {{ userform.age }}岁
              <span v-if="userform.age"
                >{{ userform.age }}{{ userform.ageUnit }}</span
              ><span v-if="userform.age2"
                >{{ userform.age2 }}{{ userform.ageUnit2 }}</span
              >
            </div>
            <div style="margin-left: 10px" class="text-title">
              {{ userform.birthdate }}
@@ -72,7 +76,7 @@
          > -->
          <el-tab-pane name="weight"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i>身高头围趋势
              ><i class="el-icon-s-data"></i>身长头围趋势
            </span></el-tab-pane
          >
          <!-- <el-tab-pane name="heartrate"
@@ -123,11 +127,21 @@
                    disabled
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12"
                ><el-form-item label="联系方式" prop="telcode">
                  <el-input
                    v-model="userform.telcode"
                    placeholder="请输入联系方式"
                    maxlength="30"
                  /> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="预留电话" prop="reservedPhone">
                  <el-input
                    v-model="userform.reservedPhone"
                    placeholder="请输入预留电话"
                    maxlength="30"
                  /> </el-form-item
              ></el-col>
@@ -196,6 +210,316 @@
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 筛查摘要模块 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="screening-summary">
                  <div class="summary-header">
                    <i class="el-icon-search"></i>
                    <span>筛查摘要</span>
                    <div
                      style="
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="addScreening"
                      >
                        <i class="el-icon-plus"></i> 新增
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click="refreshScreeningData"
                        style="margin-left: 10px"
                      >
                        <i class="el-icon-refresh"></i> 刷新
                      </el-button>
                    </div>
                  </div>
                  <div class="summary-content">
                    <el-table
                      :data="screeningSummaryData"
                      border
                      size="mini"
                      height="200"
                      v-loading="screeningLoading"
                    >
                      <el-table-column
                        prop="screeningType"
                        label="筛查类型"
                        width="100"
                      >
                        <template slot-scope="scope">
                          <el-tag
                            :type="getScreeningTagType(scope.row.screeningType)"
                          >
                            {{ scope.row.screeningType }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="screeningDate"
                        label="筛查日期"
                        width="100"
                      >
                        <template slot-scope="scope">
                          {{ formatTime(scope.row.screeningDate) }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="result" label="结果" width="80">
                        <template slot-scope="scope">
                          <el-tag
                            :type="
                              scope.row.result === '正常'
                                ? 'success'
                                : scope.row.result === '异常'
                                ? 'danger'
                                : 'warning'
                            "
                            size="small"
                          >
                            {{ scope.row.result }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="details"
                        label="详细结果"
                        min-width="120"
                      >
                        <template slot-scope="scope">
                          <el-tooltip
                            :content="scope.row.details"
                            placement="top"
                            v-if="
                              scope.row.details && scope.row.details.length > 10
                            "
                          >
                            <span
                              >{{ scope.row.details.substring(0, 10) }}...</span
                            >
                          </el-tooltip>
                          <span v-else>{{ scope.row.details }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="editScreening(scope.$index, scope.row)"
                          >
                            编辑
                          </el-button>
                          <el-button
                            type="danger"
                            size="mini"
                            @click="deleteScreening(scope.$index, scope.row)"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <div class="summary-stats">
                      <el-row :gutter="10">
                        <el-col :span="8">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #67c23a">
                              {{ screeningStats.normal }}
                            </div>
                            <div class="stat-label">正常</div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #e6a23c">
                              {{ screeningStats.abnormal }}
                            </div>
                            <div class="stat-label">异常</div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #f56c6c">
                              {{ screeningStats.critical }}
                            </div>
                            <div class="stat-label">危急</div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-col>

              <!-- 慢病摘要模块 -->
              <el-col :span="12">
                <div class="chronic-disease-summary">
                  <div class="summary-header">
                    <i class="el-icon-document"></i>
                    <span>慢病摘要</span>
                    <div
                      style="
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="addChronicDisease"
                      >
                        <i class="el-icon-plus"></i> 新增
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click="refreshChronicData"
                        style="margin-left: 10px"
                      >
                        <i class="el-icon-refresh"></i> 刷新
                      </el-button>
                    </div>
                  </div>
                  <div class="summary-content">
                    <el-table
                      :data="chronicDiseaseData"
                      border
                      size="mini"
                      height="200"
                      v-loading="chronicLoading"
                    >
                      <el-table-column
                        prop="diseaseName"
                        label="疾病名称"
                        width="120"
                      >
                        <template slot-scope="scope">
                          <el-tag
                            :type="getDiseaseTagType(scope.row.diseaseName)"
                          >
                            {{ scope.row.diseaseName }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="diagnoseDate"
                        label="确诊日期"
                        width="100"
                      >
                        <template slot-scope="scope">
                          {{ formatTime(scope.row.diagnoseDate) }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                          <el-tag
                            :type="
                              scope.row.status === '稳定'
                                ? 'success'
                                : scope.row.status === '活动期'
                                ? 'warning'
                                : 'danger'
                            "
                            size="small"
                          >
                            {{ scope.row.status }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="currentTreatment"
                        label="当前治疗"
                        min-width="120"
                      >
                        <template slot-scope="scope">
                          <el-tooltip
                            :content="scope.row.currentTreatment"
                            placement="top"
                            v-if="
                              scope.row.currentTreatment &&
                              scope.row.currentTreatment.length > 10
                            "
                          >
                            <span
                              >{{
                                scope.row.currentTreatment.substring(0, 10)
                              }}...</span
                            >
                          </el-tooltip>
                          <span v-else>{{ scope.row.currentTreatment }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="editChronicDisease(scope.$index, scope.row)"
                          >
                            编辑
                          </el-button>
                          <el-button
                            type="danger"
                            size="mini"
                            @click="
                              deleteChronicDisease(scope.$index, scope.row)
                            "
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <div class="summary-stats">
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #67c23a">
                              {{ chronicStats.stable }}
                            </div>
                            <div class="stat-label">稳定</div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #e6a23c">
                              {{ chronicStats.active }}
                            </div>
                            <div class="stat-label">活动期</div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #f56c6c">
                              {{ chronicStats.severe }}
                            </div>
                            <div class="stat-label">严重</div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="stat-item">
                            <div class="stat-value" style="color: #909399">
                              {{ chronicStats.total }}
                            </div>
                            <div class="stat-label">总数</div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-form>
@@ -309,9 +633,8 @@
                    <el-radio label="MCT奶">MCT奶</el-radio>
                    <el-radio label="其它特殊奶粉">其它特殊奶粉</el-radio>
                  </el-radio-group>
                </el-form-item> </el-col
              >

                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
@@ -372,12 +695,12 @@
          <el-table-column
            label="就诊时间"
            align="center"
            key="admindate"
            prop="admindate"
            key="admitdate"
            prop="admitdate"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.admindate) }}</span>
              <span>{{ formatTime(scope.row.admitdate) }}</span>
            </template>
          </el-table-column>

@@ -737,18 +1060,124 @@
          class="sontwoactiveName"
          style="width: 880px; height: 560px"
        ></div>
        <div style="width: 400px">
        <div style="width: 600px">
          <el-card class="box-card">
            <el-button @click="borninfoVisible = true" type="success" round
              >添加数据</el-button
            >
            <SFtable
              :currentList="borninfooptions"
              :tableLabel="tableLabeltz"
              :serialnumber="false"
              :center="false"
              :multiplechoice="false"
            />
            <el-table :data="borninfooptions" style="width: 100%" border>
              <el-table-column
                prop="generatedTime"
                label="记录日期"
                width="120"
              >
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{
                    scope.row.generatedTime
                  }}</span>
                  <!-- <el-date-picker
                    v-else
                    v-model="scope.row.generatedTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    size="small"
                  ></el-date-picker> -->
                  <el-date-picker
                    v-else
                    v-model="scope.row.generatedTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                    size="small"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="doctor" label="责任医生" width="100">
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{ scope.row.doctor }}</span>
                  <el-input
                    v-else
                    v-model="scope.row.doctor"
                    size="small"
                    placeholder="请输入医生姓名"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="height" label="身长(cm)" width="100">
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{ scope.row.height }}</span>
                  <el-input
                    v-else
                    v-model.number="scope.row.height"
                    size="small"
                    placeholder="身长"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="headCir" label="头围(cm)" width="100">
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{ scope.row.headCir }}</span>
                  <el-input
                    v-else
                    v-model.number="scope.row.headCir"
                    size="small"
                    placeholder="头围"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="age" label="胎龄(周)" width="100">
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{ scope.row.age }}</span>
                  <el-input
                    v-else
                    v-model.number="scope.row.age"
                    size="small"
                    placeholder="胎龄"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="weight" label="体重(kg)" width="100">
                <template slot-scope="scope">
                  <span v-if="!scope.row.editing">{{ scope.row.weight }}</span>
                  <el-input
                    v-else
                    v-model.number="scope.row.weight"
                    size="small"
                    placeholder="体重"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    v-if="!scope.row.editing"
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    v-else
                    type="success"
                    size="mini"
                    @click="handleSave(scope.row)"
                    >保存</el-button
                  >
                  <el-button
                    v-if="!scope.row.editing"
                    type="danger"
                    size="mini"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                  <el-button v-else size="mini" @click="handleCancel(scope.row)"
                    >取消</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
@@ -804,7 +1233,147 @@
        </div>
      </div> -->
    </div>
    <!-- 筛查摘要编辑对话框 -->
    <el-dialog
      :title="screeningEditing ? '编辑筛查记录' : '新增筛查记录'"
      :visible.sync="screeningDialogVisible"
      width="600px"
    >
      <el-form :model="screeningForm" label-width="100px">
        <el-form-item label="筛查类型" prop="screeningType" required>
          <el-select
            v-model="screeningForm.screeningType"
            placeholder="请选择筛查类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in screeningTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="筛查日期" prop="screeningDate" required>
          <el-date-picker
            v-model="screeningForm.screeningDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择筛查日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="筛查结果" prop="result" required>
          <el-select
            v-model="screeningForm.result"
            placeholder="请选择结果"
            style="width: 100%"
          >
            <el-option
              v-for="item in resultOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细结果" prop="details">
          <el-input
            type="textarea"
            :rows="3"
            v-model="screeningForm.details"
            placeholder="请输入详细结果信息"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="screeningDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveScreening">确定</el-button>
      </div>
    </el-dialog>

    <!-- 慢病摘要编辑对话框 -->
    <el-dialog
      :title="chronicEditing ? '编辑慢病记录' : '新增慢病记录'"
      :visible.sync="chronicDialogVisible"
      width="600px"
    >
      <el-form :model="chronicForm" label-width="100px">
        <el-form-item label="疾病名称" prop="diseaseName" required>
          <el-select
            v-model="chronicForm.diseaseName"
            placeholder="请选择疾病名称"
            style="width: 100%"
          >
            <el-option
              v-for="item in diseaseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="确诊日期" prop="diagnoseDate" required>
          <el-date-picker
            v-model="chronicForm.diagnoseDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择确诊日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="当前状态" prop="status" required>
          <el-select
            v-model="chronicForm.status"
            placeholder="请选择状态"
            style="width: 100%"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="当前治疗" prop="currentTreatment">
          <el-input
            type="textarea"
            :rows="2"
            v-model="chronicForm.currentTreatment"
            placeholder="请输入当前治疗方案"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="随访计划" prop="followUpPlan">
          <el-input
            v-model="chronicForm.followUpPlan"
            placeholder="请输入随访计划"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="chronicDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveChronicDisease">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="titletb" :visible.sync="AddanumberVisible">
      <el-form :model="numberform" label-width="100px">
        <el-form-item label="姓名">
@@ -829,12 +1398,12 @@
        :model="borninfoform"
        label-width="120px"
      >
        <!-- 身高 -->
        <el-form-item label="身高(cm)" prop="height">
        <!-- 身长 -->
        <el-form-item label="身长(cm)" prop="height">
          <el-input
            v-model.number="borninfoform.height"
            autocomplete="off"
            placeholder="请输入身高（30-120cm）"
            placeholder="请输入身长（30-120cm）"
          >
          </el-input>
        </el-form-item>
@@ -848,11 +1417,34 @@
          >
          </el-input>
        </el-form-item>
        <el-form-item label="体重（kg）" prop="weight">
          <el-input
            v-model.number="borninfoform.weight"
            autocomplete="off"
            placeholder="请输入体重"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="记录日期" prop="generatedTime">
          <!-- <el-date-picker
            v-model="borninfoform.generatedTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker> -->
          <el-date-picker
            v-model="borninfoform.generatedTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 胎龄 -->
        <el-form-item label="胎龄（周）" prop="age">
          <el-input
            v-model.number="borninfoform.age"
            v-model="borninfoform.age"
            autocomplete="off"
            placeholder="请输入胎龄"
          >
@@ -892,6 +1484,8 @@
import {
  listPatouthosp,
  newborninfoadd,
  newborninfoedit,
  newborninforemove,
  newborninfolist,
} from "@/api/smartor/patouthosp";
import { listpatient } from "@/api/patient/record";
@@ -921,9 +1515,27 @@
      sonactiveName: "inhospital", //健康监测导航
      sontwoactiveName: "weight", //医疗档案导航
      dynamicTags: [],
      // 筛查摘要相关数据
      screeningLoading: false,
      screeningSummaryData: [],
      screeningStats: {
        normal: 0,
        abnormal: 0,
        critical: 0,
      },

      // 慢病摘要相关数据
      chronicLoading: false,
      chronicDiseaseData: [],
      chronicStats: {
        stable: 0,
        active: 0,
        severe: 0,
        total: 0,
      },
      borninforules: {
        height: [
          { required: true, message: "身高不能为空", trigger: "blur" },
          { required: true, message: "身长不能为空", trigger: "blur" },
          {
            type: "number",
            message: "必须为数字值",
@@ -931,9 +1543,9 @@
          },
          {
            validator: (rule, value, callback) => {
              // 新生儿身高一般范围：30-120cm
              // 新生儿身长一般范围：30-120cm
              if (value < 30 || value > 120) {
                callback(new Error("请输入30-120cm之间的合理身高值"));
                callback(new Error("请输入30-120cm之间的合理身长值"));
              } else if (!/^[0-9]+(\.[0-9]{1})?$/.test(value)) {
                callback(new Error("最多保留一位小数"));
              } else {
@@ -960,7 +1572,7 @@
        ],
        age: [
          { required: true, message: "胎龄不能为空", trigger: "blur" },
          { type: "integer", message: "必须为整数周数" },
          // { type: "integer", message: "必须为整数周数" },
          {
            validator: (rule, value, callback) => {
              // 检查是否已存在该周数数据
@@ -1022,6 +1634,58 @@
      xtechartdom: {},
      tzechartdom: {},
      tableData: [],
      // 筛查摘要编辑相关
      screeningEditing: false,
      screeningEditIndex: -1,
      screeningEditTemp: {},
      screeningDialogVisible: false,
      screeningForm: {
        screeningType: "",
        screeningDate: "",
        result: "正常",
        details: "",
      },

      // 慢病摘要编辑相关
      chronicEditing: false,
      chronicEditIndex: -1,
      chronicEditTemp: {},
      chronicDialogVisible: false,
      chronicForm: {
        diseaseName: "",
        diagnoseDate: "",
        status: "稳定",
        currentTreatment: "",
        followUpPlan: "",
      },

      // 筛选选项
      resultOptions: [
        { label: "正常", value: "正常" },
        { label: "异常", value: "异常" },
        { label: "危急", value: "危急" },
      ],

      statusOptions: [
        { label: "稳定", value: "稳定" },
        { label: "活动期", value: "活动期" },
        { label: "严重", value: "严重" },
      ],

      screeningTypeOptions: [
        { label: "心血管", value: "心血管" },
        { label: "糖尿病", value: "糖尿病" },
        { label: "肿瘤标志", value: "肿瘤标志" },
        { label: "肾功能", value: "肾功能" },
        { label: "呼吸系统", value: "呼吸系统" },
      ],

      diseaseOptions: [
        { label: "高血压", value: "高血压" },
        { label: "2型糖尿病", value: "2型糖尿病" },
        { label: "冠心病", value: "冠心病" },
        { label: "慢性肾病", value: "慢性肾病" },
      ],
      tableDatalist: [
        {
          id: 12,
@@ -1075,9 +1739,12 @@
        { label: "舒张压", width: "", prop: "age" },
      ],
      tableLabeltz: [
        { label: "日期", width: "", prop: "generatedTime" },
        { label: "责任医生", width: "", prop: "doctor" },
        { label: "身高", width: "", prop: "height" },
        { label: "头围", width: "", prop: "headCir" },
        { label: "身长(cm)", width: "", prop: "height" },
        { label: "头围(cm)", width: "", prop: "headCir" },
        { label: "胎龄(周)", width: "", prop: "age" },
        { label: "体重(kg)", width: "", prop: "weight" },
      ],
      tableLabelxl: [
        { label: "测量时间", width: "", prop: "name" },
@@ -1130,6 +1797,9 @@
    this.id = this.$route.query.id;
    this.getuserinfo();
    this.gettabList();
    // 初始化筛查和慢病数据
    this.initScreeningData();
    this.initChronicDiseaseData();
  },

  methods: {
@@ -1159,6 +1829,147 @@
          }
        });
      }
    },
    /** 筛查摘要 - 新增 */
    addScreening() {
      this.screeningEditing = false;
      this.screeningEditIndex = -1;
      this.screeningForm = {
        screeningType: "",
        screeningDate: new Date().toISOString().split("T")[0] + " 09:00:00",
        result: "正常",
        details: "",
      };
      this.screeningDialogVisible = true;
    },

    /** 筛查摘要 - 编辑 */
    editScreening(index, row) {
      this.screeningEditing = true;
      this.screeningEditIndex = index;
      this.screeningForm = { ...row };
      this.screeningDialogVisible = true;
    },

    /** 筛查摘要 - 保存 */
    saveScreening() {
      if (
        !this.screeningForm.screeningType ||
        !this.screeningForm.screeningDate
      ) {
        this.$message.error("请填写必填字段");
        return;
      }

      if (this.screeningEditing) {
        // 编辑现有记录
        this.screeningSummaryData.splice(this.screeningEditIndex, 1, {
          ...this.screeningForm,
          id: this.screeningSummaryData[this.screeningEditIndex].id,
        });
        this.$message.success("筛查记录修改成功");
      } else {
        // 新增记录
        const newRecord = {
          id: Date.now(), // 临时ID
          ...this.screeningForm,
          riskLevel: this.getRiskLevelByResult(this.screeningForm.result),
        };
        this.screeningSummaryData.unshift(newRecord);
        this.$message.success("筛查记录新增成功");
      }

      this.calculateScreeningStats();
      this.screeningDialogVisible = false;
    },

    /** 筛查摘要 - 删除 */
    deleteScreening(index, row) {
      this.$confirm("确定要删除这条筛查记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.screeningSummaryData.splice(index, 1);
          this.calculateScreeningStats();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

    /** 根据结果获取风险等级 */
    getRiskLevelByResult(result) {
      const riskMap = {
        正常: "low",
        异常: "medium",
        危急: "critical",
      };
      return riskMap[result] || "low";
    },
    /** 慢病摘要 - 新增 */
    addChronicDisease() {
      this.chronicEditing = false;
      this.chronicEditIndex = -1;
      this.chronicForm = {
        diseaseName: "",
        diagnoseDate: new Date().toISOString().split("T")[0],
        status: "稳定",
        currentTreatment: "",
        followUpPlan: "每月复诊一次",
      };
      this.chronicDialogVisible = true;
    },

    /** 慢病摘要 - 编辑 */
    editChronicDisease(index, row) {
      this.chronicEditing = true;
      this.chronicEditIndex = index;
      this.chronicForm = { ...row };
      this.chronicDialogVisible = true;
    },

    /** 慢病摘要 - 保存 */
    saveChronicDisease() {
      if (!this.chronicForm.diseaseName || !this.chronicForm.diagnoseDate) {
        this.$message.error("请填写必填字段");
        return;
      }

      if (this.chronicEditing) {
        // 编辑现有记录
        this.chronicDiseaseData.splice(this.chronicEditIndex, 1, {
          ...this.chronicForm,
          id: this.chronicDiseaseData[this.chronicEditIndex].id,
        });
        this.$message.success("慢病记录修改成功");
      } else {
        // 新增记录
        const newRecord = {
          id: Date.now(), // 临时ID
          ...this.chronicForm,
        };
        this.chronicDiseaseData.unshift(newRecord);
        this.$message.success("慢病记录新增成功");
      }

      this.calculateChronicStats();
      this.chronicDialogVisible = false;
    },

    /** 慢病摘要 - 删除 */
    deleteChronicDisease(index, row) {
      this.$confirm("确定要删除这条慢病记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.chronicDiseaseData.splice(index, 1);
          this.calculateChronicStats();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    checkAgeExists(newAge) {
      // 假设已有数据存储在 this.existingData 中
@@ -1194,6 +2005,232 @@
      });
      // 联系信息
      this.getcontactlist();
    },
    /** 初始化筛查摘要数据 */
    initScreeningData() {
      // 模拟筛查摘要数据[1,4](@ref)
      this.screeningSummaryData = [
        {
          id: 1,
          screeningType: "心血管",
          screeningDate: "2024-11-15 09:00:00",
          result: "异常",
          details: "心电图显示ST段压低，建议进一步检查",
          riskLevel: "high",
        },
        {
          id: 2,
          screeningType: "糖尿病",
          screeningDate: "2024-11-10 14:30:00",
          result: "正常",
          details: "空腹血糖5.6mmol/L，糖化血红蛋白5.8%",
          riskLevel: "low",
        },
        {
          id: 3,
          screeningType: "肿瘤标志",
          screeningDate: "2024-11-05 10:15:00",
          result: "危急",
          details: "CEA 15.2ng/mL，建议立即专科就诊",
          riskLevel: "critical",
        },
        {
          id: 4,
          screeningType: "肾功能",
          screeningDate: "2024-10-28 16:20:00",
          result: "异常",
          details: "肌酐清除率偏低，eGFR 55mL/min",
          riskLevel: "medium",
        },
        {
          id: 5,
          screeningType: "呼吸系统",
          screeningDate: "2024-10-20 11:00:00",
          result: "正常",
          details: "肺功能检查未见明显异常",
          riskLevel: "low",
        },
      ];

      // 计算统计信息
      this.calculateScreeningStats();
    },

    /** 计算筛查统计信息 */
    calculateScreeningStats() {
      this.screeningStats = {
        normal: this.screeningSummaryData.filter(
          (item) => item.result === "正常"
        ).length,
        abnormal: this.screeningSummaryData.filter(
          (item) => item.result === "异常"
        ).length,
        critical: this.screeningSummaryData.filter(
          (item) => item.result === "危急"
        ).length,
      };
    },

    /** 初始化慢病摘要数据 */
    initChronicDiseaseData() {
      // 模拟慢病摘要数据[2,5](@ref)
      this.chronicDiseaseData = [
        {
          id: 1,
          diseaseName: "高血压",
          diagnoseDate: "2020-03-15",
          status: "稳定",
          currentTreatment: "氨氯地平 5mg qd，定期监测血压",
          followUpPlan: "每月复诊一次",
        },
        {
          id: 2,
          diseaseName: "2型糖尿病",
          diagnoseDate: "2019-08-20",
          status: "活动期",
          currentTreatment: "二甲双胍 500mg bid，胰岛素注射",
          followUpPlan: "每两周复诊一次",
        },
        {
          id: 3,
          diseaseName: "冠心病",
          diagnoseDate: "2021-05-10",
          status: "稳定",
          currentTreatment: "阿司匹林 100mg qd，阿托伐他汀 20mg qd",
          followUpPlan: "每季度复诊一次",
        },
        {
          id: 4,
          diseaseName: "慢性肾病",
          diagnoseDate: "2022-01-30",
          status: "严重",
          currentTreatment: "控制血压、血糖，低蛋白饮食",
          followUpPlan: "每月专科随访",
        },
      ];

      // 计算统计信息
      this.calculateChronicStats();
    },

    /** 计算慢病统计信息 */
    calculateChronicStats() {
      this.chronicStats = {
        stable: this.chronicDiseaseData.filter((item) => item.status === "稳定")
          .length,
        active: this.chronicDiseaseData.filter(
          (item) => item.status === "活动期"
        ).length,
        severe: this.chronicDiseaseData.filter((item) => item.status === "严重")
          .length,
        total: this.chronicDiseaseData.length,
      };
    },

    /** 获取筛查类型标签样式 */
    getScreeningTagType(type) {
      const typeMap = {
        心血管: "danger",
        糖尿病: "warning",
        肿瘤标志: "danger",
        肾功能: "warning",
        呼吸系统: "success",
      };
      return typeMap[type] || "info";
    },

    /** 获取疾病名称标签样式 */
    getDiseaseTagType(diseaseName) {
      const diseaseMap = {
        高血压: "warning",
        "2型糖尿病": "danger",
        冠心病: "danger",
        慢性肾病: "danger",
      };
      return diseaseMap[diseaseName] || "info";
    },

    /** 查看筛查详情 */
    viewScreeningDetail(row) {
      this.$alert(
        `<div>
        <p><strong>筛查类型：</strong>${row.screeningType}</p>
        <p><strong>筛查日期：</strong>${this.formatTime(row.screeningDate)}</p>
        <p><strong>筛查结果：</strong><el-tag type="${
          row.result === "正常"
            ? "success"
            : row.result === "异常"
            ? "danger"
            : "warning"
        }">${row.result}</el-tag></p>
        <p><strong>详细结果：</strong>${row.details}</p>
        <p><strong>风险评估：</strong>${this.getRiskLevelText(
          row.riskLevel
        )}</p>
      </div>`,
        "筛查详情",
        {
          dangerouslyUseHTMLString: true,
          customClass: "detail-dialog",
        }
      );
    },

    /** 查看慢病详情 */
    viewChronicDetail(row) {
      this.$alert(
        `<div>
        <p><strong>疾病名称：</strong>${row.diseaseName}</p>
        <p><strong>确诊日期：</strong>${this.formatTime(row.diagnoseDate)}</p>
        <p><strong>当前状态：</strong><el-tag type="${
          row.status === "稳定"
            ? "success"
            : row.status === "活动期"
            ? "warning"
            : "danger"
        }">${row.status}</el-tag></p>
        <p><strong>当前治疗：</strong>${row.currentTreatment}</p>
        <p><strong>随访计划：</strong>${row.followUpPlan}</p>
      </div>`,
        "慢病详情",
        {
          dangerouslyUseHTMLString: true,
          customClass: "detail-dialog",
        }
      );
    },

    /** 获取风险等级文本 */
    getRiskLevelText(level) {
      const levelMap = {
        low: "低风险",
        medium: "中风险",
        high: "高风险",
        critical: "危急",
      };
      return levelMap[level] || "未知";
    },

    /** 刷新筛查数据 */
    refreshScreeningData() {
      this.screeningLoading = true;
      // 模拟异步加载
      setTimeout(() => {
        this.initScreeningData();
        this.screeningLoading = false;
        this.$message.success("筛查数据已刷新");
      }, 1000);
    },

    /** 刷新慢病数据 */
    refreshChronicData() {
      this.chronicLoading = true;
      // 模拟异步加载
      setTimeout(() => {
        this.initChronicDiseaseData();
        this.chronicLoading = false;
        this.$message.success("慢病数据已刷新");
      }, 1000);
    },
    // 保存患者档案
    savefile() {
@@ -1322,7 +2359,9 @@
      if (tab.index == "1") {
        this.getList(1);
      } else if (tab.index == "2") {
        this.newbornList();
        console.log(1111);

        this.newcharts();
      } else if (tab.index == "3") {
        this.handleClickfw();
      }
@@ -1380,15 +2419,17 @@
      this.$refs["borninfoform"].validate((valid) => {
        if (valid) {
          this.borninfoform.patId = this.id;

          this.borninfoform.sex = this.userform.sex;
          newborninfoadd(this.borninfoform).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("新增成功");
              this.newbornList();
              // this.newbornList();
              this.tzechartsInit();
              this.borninfoVisible = false;
            } else {
              this.$modal.msgError("新增失败");
              this.newbornList();
              // this.newbornList();
              this.tzechartsInit();
              this.borninfoVisible = false;
            }
          });
@@ -1625,177 +2666,275 @@
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    tzechartsInit() {
      // 获取数据集合
      this.newbornList()
        .then(() => {
          // 检查数据有效性
          if (!this.borninfooptions || this.borninfooptions.length === 0) {
            console.warn("没有可用的新生儿数据");
            return;
          }
          // 找出最大的age值（确定X轴范围）
          const maxAge = Math.max(
            ...this.borninfooptions.map((item) => parseInt(item.age) || 0)
          );
          if (maxAge <= 0) {
            console.error("无效的周数数据");
            return;
          }
    // 新生儿图表
    // 新生儿图表 - 使用时间轴
    async tzechartsInit() {
      try {
        // 等待数据加载完成
        await this.newbornList();

          // 动态生成xAxis数据（从1周到最大周）
          const xAxisData = Array.from(
            { length: maxAge },
            (_, i) => `${i + 1}周`
        if (!this.borninfooptions || this.borninfooptions.length === 0) {
          console.warn("没有可用的新生儿数据");
          return;
        }

        // 初始化图表
        const myChart = echarts.init(this.tzechartdom);

        // 处理数据 - 按时间排序
        const sortedData = this.borninfooptions
          .filter((item) => item.generatedTime)
          .sort(
            (a, b) => new Date(a.generatedTime) - new Date(b.generatedTime)
          );

          // 初始化数据数组
          const heightData = Array(maxAge).fill(null);
          const headCirData = Array(maxAge).fill(null);
        if (sortedData.length === 0) {
          console.warn("没有有效的时间数据");
          return;
        }

          // 遍历所有数据点，填充到对应位置
          this.borninfooptions.forEach((item) => {
            try {
              const age = parseInt(item.age);
              const height = parseFloat(item.height);
              const headCir = parseFloat(item.headCir);
        // 准备图表数据
        const timeData = sortedData.map((item) => item.generatedTime);
        const heightData = sortedData.map((item) => ({
          name: item.generatedTime,
          value: [item.generatedTime, item.height || null],
        }));
        const headCirData = sortedData.map((item) => ({
          name: item.generatedTime,
          value: [item.generatedTime, item.headCir || null],
        }));
        const weightData = sortedData.map((item) => ({
          name: item.generatedTime,
          value: [item.generatedTime, item.weight || null],
        }));

              // 确保数据有效且周数在范围内
              if (age > 0 && age <= maxAge) {
                const weekIndex = age - 1;
                if (!isNaN(height)) heightData[weekIndex] = height;
                if (!isNaN(headCir)) headCirData[weekIndex] = headCir;
              }
            } catch (e) {
              console.error("数据处理错误:", e);
            }
          });

          // 获取患者姓名（使用第一条有效数据）
          const patientName = this.borninfooptions[0]?.name || "未知";

          // 初始化图表
          const myxyChart = echarts.init(this.tzechartdom);
          const option = {
            title: {
              text: `${patientName}生长发育指标图`,
              left: "center",
        const option = {
          title: {
            text: "新生儿生长发育趋势图",
            left: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: "bold",
            },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                let result = params[0].axisValue + "<br/>";
                params.forEach((item) => {
                  const value = item.value !== null ? item.value : "暂无数据";
                  result += `${item.marker} ${item.seriesName}: ${value}<br/>`;
                });
                return result;
          },
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              let result = `${params[0].name}<br/>`;
              params.forEach((item) => {
                if (item.value && item.value[1] !== null) {
                  const unit =
                    item.seriesName.includes("身长") ||
                    item.seriesName.includes("头围")
                      ? "cm"
                      : item.seriesName.includes("体重")
                      ? "kg"
                      : "";
                  result += `${item.marker} ${item.seriesName}: ${item.value[1]} ${unit}<br/>`;
                }
              });
              return result;
            },
          },
          legend: {
            data: ["身长", "头围", "体重"],
            bottom: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "15%",
            top: "15%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {
                title: "保存图片",
                pixelRatio: 2,
              },
            },
            legend: {
              data: ["身高(cm)", "头围(cm)"],
              bottom: 10,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "15%", // 为图例留出空间
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {
                  title: "保存图片",
                  pixelRatio: 2,
                },
                dataView: {
                  title: "数据视图",
                  readOnly: true,
              dataView: {
                title: "数据视图",
                readOnly: true,
                lang: ["数据视图", "关闭", "刷新"],
              },
              dataZoom: {
                yAxisIndex: "none",
                title: {
                  zoom: "区域缩放",
                  back: "区域缩放还原",
                },
              },
              right: 20,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: xAxisData,
              axisLabel: {
                interval: 0, // 显示所有标签
                rotate: 30, // 标签旋转防止重叠
            right: 20,
            top: 10,
          },
          dataZoom: [
            {
              type: "inside",
              xAxisIndex: [0],
              start: 0,
              end: 100,
            },
            {
              type: "slider",
              xAxisIndex: [0],
              start: 0,
              end: 100,
              bottom: 0,
              height: 20,
            },
          ],
          xAxis: {
            type: "time", // 使用时间轴[1,3](@ref)
            name: "记录时间",
            nameLocation: "middle",
            nameGap: 30,
            axisLabel: {
              formatter: {
                year: "{yyyy}",
                month: "{MM}/{dd}",
                day: "{MM}/{dd}",
                hour: "{MM}/{dd}",
              },
              rotate: 45,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            yAxis: {
          },
          yAxis: [
            {
              type: "value",
              name: "身长/头围(cm)",
              position: "left",
              axisLabel: {
                formatter: "{value} cm",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                },
              },
            },
            series: [
              {
                name: "身高",
                type: "line",
                data: heightData,
                symbol: "circle",
                symbolSize: 8,
                itemStyle: {
                  color: "#5470C6",
                },
                lineStyle: {
                  width: 3,
                },
                connectNulls: true, // 连接空值
            {
              type: "value",
              name: "体重(kg)",
              position: "right",
              axisLabel: {
                formatter: "{value} kg",
              },
              {
                name: "头围",
                type: "line",
                data: headCirData,
                symbol: "circle",
                symbolSize: 8,
                itemStyle: {
                  color: "#91CC75",
                },
                lineStyle: {
                  width: 3,
                },
                connectNulls: true, // 连接空值
              splitLine: {
                show: false,
              },
            ],
            animationDuration: 1000, // 动画时长
          };
            },
          ],
          series: [
            {
              name: "身长",
              type: "line",
              yAxisIndex: 0,
              data: heightData,
              smooth: true, // 平滑曲线[1](@ref)
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#5470C6",
              },
              lineStyle: {
                width: 3,
              },
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              connectNulls: true,
            },
            {
              name: "头围",
              type: "line",
              yAxisIndex: 0,
              data: headCirData,
              smooth: true,
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#91CC75",
              },
              lineStyle: {
                width: 3,
              },
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              connectNulls: true,
            },
            {
              name: "体重",
              type: "line",
              yAxisIndex: 1,
              data: weightData,
              smooth: true,
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#EE6666",
              },
              lineStyle: {
                width: 3,
              },
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              connectNulls: true,
            },
          ],
          animationDuration: 1000,
        };

          // 使用配置项显示图表
          myxyChart.setOption(option);
        // 使用配置项显示图表
        myChart.setOption(option);

          // 窗口大小变化时重新调整图表大小
          const resizeHandler = () => myxyChart.resize();
          window.addEventListener("resize", resizeHandler);
        // 窗口大小变化时重新调整图表大小
        const resizeHandler = () => myChart.resize();
        window.addEventListener("resize", resizeHandler);

          // 在组件销毁时移除事件监听（如果是Vue/React组件）
          this.$once("hook:beforeDestroy", () => {
            window.removeEventListener("resize", resizeHandler);
            myxyChart.dispose();
          });
        })
        .catch((error) => {
          console.error("加载数据失败:", error);
        // 在组件销毁时移除事件监听
        this.$once("hook:beforeDestroy", () => {
          window.removeEventListener("resize", resizeHandler);
          myChart.dispose();
        });
      } catch (error) {
        console.error("加载图表失败:", error);
      }
    },

    // 获取新生儿数据
    newbornList() {
      return newborninfolist({ patId: this.id })
        .then((response) => {
          this.borninfooptions = response.rows || [];

          this.newcharts();
          console.log("加载的新生儿数据:", this.borninfooptions);
          return Promise.resolve();
        })
        .catch((error) => {
          console.error("请求数据失败:", error);
          this.borninfooptions = [];
          return Promise.reject(error);
        });
    async newbornList() {
      try {
        const response = await newborninfolist({ patId: this.id });
        this.borninfooptions = (response.rows || []).map((item) => ({
          ...item,
          // 确保时间格式正确
          generatedTime: item.generatedTime || item.createTime,
          editing: false,
        }));
        console.log("加载的新生儿数据:", this.borninfooptions);
      } catch (error) {
        console.error("请求数据失败:", error);
        this.borninfooptions = [];
      }
    },
    // 心率
    xlechartsInit() {
@@ -2018,6 +3157,74 @@
      // 使用刚指定的配置项和数据显示图表。
      myxyChart.setOption(option);
    },
    // 新生儿数据编辑
    // 编辑行
    handleEdit(row) {
      this.$set(row, "editing", true);
      // 备份原始数据用于取消操作
      this.$set(row, "originalData", { ...row });
    },

    // 保存行
    handleSave(row) {
      this.$set(row, "editing", false);
      // 调用API保存数据
      this.saveNewbornData(row);
    },

    // 取消编辑
    handleCancel(row) {
      this.$set(row, "editing", false);
      // 恢复原始数据
      if (row.originalData) {
        Object.assign(row, row.originalData);
        delete row.originalData;
      }
    },

    // 删除行
    handleDelete(index, row) {
      this.$confirm("确定要删除这条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用API删除数据
          newborninforemove(row.id).then(() => {
            this.borninfooptions.splice(index, 1);
            this.$message.success("删除成功");
            // 重新渲染图表
            this.tzechartsInit();
          });
        })
        .catch(() => {});
    },

    // 保存数据到后端
    async saveNewbornData(data) {
      try {
        const response = await newborninfoedit(data);
        if (response.code === 200) {
          this.$message.success("保存成功");
          // 重新加载数据并刷新图表
          await this.newbornList();
          this.tzechartsInit();
        } else {
          this.$message.error("保存失败");
        }
      } catch (error) {
        console.error("保存数据失败:", error);
        this.$message.error("保存失败");
      }
    },

    // 删除数据
    async deleteNewbornData(id) {
      // 实现删除API调用
      // 这里需要根据你的后端接口实现
      return Promise.resolve();
    },
  },
};
</script>
@@ -2050,6 +3257,81 @@
      font-size: 20px;
      font-weight: 500;
      color: #ecfcfc;
    }
  }
}
.screening-summary,
.chronic-disease-summary {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-bottom: 20px;

  .summary-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f5f7fa;
    border-bottom: 1px solid #e6e6e6;
    font-weight: 600;
    color: #333;

    i {
      margin-right: 8px;
      color: #409eff;
    }
  }

  .summary-content {
    padding: 15px;

    .summary-stats {
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px dashed #e6e6e6;

      .stat-item {
        text-align: center;

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .stat-label {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

/* 详情对话框样式 */
:deep(.detail-dialog) {
  .el-message-box__message {
    p {
      margin: 10px 0;
      line-height: 1.6;
    }

    strong {
      color: #333;
      min-width: 80px;
      display: inline-block;
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .screening-summary,
  .chronic-disease-summary {
    .summary-content {
      .el-table {
        font-size: 12px;
      }
    }
  }
}
@@ -2153,4 +3435,24 @@
::v-deep.el-table .warning-row {
  background: oldlace;
}
/* 操作按钮组样式 */
.summary-header .el-button-group {
  margin-left: auto;
}

/* 对话框表单样式 */
.el-dialog .el-form-item {
  margin-bottom: 20px;
}

/* 统计数字样式优化 */
.stat-item {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-item:hover {
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>