测试完成

WXL (wul)

10 天以前 ab77cf83de3f6978909e6f1f3b6e0d28db456681

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

@@ -76,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"
@@ -750,18 +750,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>
@@ -842,12 +948,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>
@@ -861,11 +967,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="请输入胎龄"
          >
@@ -905,6 +1034,8 @@
import {
  listPatouthosp,
  newborninfoadd,
  newborninfoedit,
  newborninforemove,
  newborninfolist,
} from "@/api/smartor/patouthosp";
import { listpatient } from "@/api/patient/record";
@@ -936,7 +1067,7 @@
      dynamicTags: [],
      borninforules: {
        height: [
          { required: true, message: "身高不能为空", trigger: "blur" },
          { required: true, message: "身长不能为空", trigger: "blur" },
          {
            type: "number",
            message: "必须为数字值",
@@ -944,9 +1075,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 {
@@ -973,7 +1104,7 @@
        ],
        age: [
          { required: true, message: "胎龄不能为空", trigger: "blur" },
          { type: "integer", message: "必须为整数周数" },
          // { type: "integer", message: "必须为整数周数" },
          {
            validator: (rule, value, callback) => {
              // 检查是否已存在该周数数据
@@ -1088,9 +1219,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" },
@@ -1335,6 +1469,8 @@
      if (tab.index == "1") {
        this.getList(1);
      } else if (tab.index == "2") {
        console.log(1111);

        this.newcharts();
      } else if (tab.index == "3") {
        this.handleClickfw();
@@ -1397,11 +1533,13 @@
          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;
            }
          });
@@ -1638,176 +1776,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() {
      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() {
@@ -2030,6 +2267,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>