thridLargeScreen/src/views/healthManagement/healthPlan.vue

<template>
  <div class="page-health-plan p-2 w-full h-full flex flex-col">
    <div class="flex items-center p-4 rounded bg-white shadow mb-2">
      <!-- <div class="">
      </div> -->
      <div class="h-full grid grid-cols-2 grid-rows-2 gap-1">
        <div
          class="col-start-1 col-end-2 row-start-1 row-end-3 rounded p-2 flex items-center cursor-pointer bg-blue-100 hover:bg-blue-200 text-blue-600"
          @click="openDiseaseManageDialog"
        >
          <img src="@/assets/icon-disease.png" alt="" class="w-5 mr-1" />
          <span>{{ route.query?.name }}管理</span>
          <ArrowRight class="w-4"></ArrowRight>
        </div>
        <div
          class="col-start-2 col-end-3 row-start-1 row-end-2 rounded p-2 flex items-center cursor-pointer bg-green-100 hover:bg-green-200 text-green-600"
          @click="historyVisible = true"
        >
          <Tickets class="w-4 mr-1" />
          <span>评估记录</span>
          <ArrowRight class="w-4"></ArrowRight>
        </div>
        <div
          class="col-start-2 col-end-3 row-start-2 row-end-3 rounded p-2 flex items-center cursor-pointer bg-red-100 hover:bg-red-200 text-red-600"
          @click="router.back()"
        >
          <SwitchButton class="w-4 mr-1" />
          <span>退出管理</span>
          <ArrowRight class="w-4"></ArrowRight>
        </div>
      </div>
      <div class="flex items-center justify-around px-4 pt-10 flex-1">
        <div
          v-for="(item, index) in paths"
          :key="index"
          class="relative health-path-item py-2 px-4 rounded text-sm select-none cursor-pointer"
          :class="item.class"
          :style="current == index ? '' : 'opacity: 0.7'"
          @click="changePath(item, index)"
        >
          <span>{{ item.label }}</span>
          <div v-if="current == index" class="absolute -right-1 -top-1">
            <span class="relative flex h-3 w-3">
              <span
                class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
                :class="item.dotBgClass"
              ></span>
              <span
                class="relative inline-flex rounded-full h-3 w-3"
                :class="item.dotClass"
              ></span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex-1 w-full rounded bg-white shadow"
      style="height: calc(100% - 120px)"
    >
      <component
        v-if="isInit && pathCaches.includes(current) && paths[current].component"
        :is="paths[current].component"
      ></component>
    </div>

    <el-dialog title="评估历史详情" v-model="historyVisible" width="85%">
      <div>
        <component
          :is="DialogHealthManageEvaluationHistory"
          :list="transformDataExpand(historyList, 'histories')"
          ref="historyRef"
        ></component>
      </div>
    </el-dialog>
    <el-dialog
      v-model="diseaseManageVisible"
      :title="route.query.name + '管理'"
    >
      <div v-if="diseaseManageList.length" class="grid grid-cols-3 gap-4">
        <div
          v-for="(item, index) in diseaseManageList"
          :key="index"
          class="bg-white shadow p-4 rounded hover:bg-gray-50 cursor-pointer flex items-center"
          @click="getDiseaseManageDetail(item)"
        >
          <img src="@/assets/icon-disease.png" alt="" class="w-5 mr-1" />
          <div class="max-[10em] whitespace-nowrap truncate">
            {{ item.label }}
          </div>
          <ArrowRight class="w-4 text-gray-500" />
        </div>
      </div>
      <el-empty v-else :image="emptyImg"></el-empty>
    </el-dialog>
    <el-dialog
      v-model="diseaseManageDetailVisible"
      :title="diseaseManageDetail?.title"
    >
      <div v-html="diseaseManageDetail?.content"></div>
    </el-dialog>
  </div>
</template>
<script setup>
import LeaderLine from "@/plugins/leader-line.min.js";

import {
  computed,
  watch,
  markRaw,
  ref,
  reactive,
  onMounted,
  provide,
  defineAsyncComponent,
  nextTick,
  onUnmounted
} from "vue";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import {
  CopyDocument,
  Fold,
  TrendCharts,
  Tickets,
  SwitchButton,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { request, sleep, transformDataExpand } from "@/utils";

import emptyImg from "@/assets/icon-empty-left.png";
const DialogHealthManageEvaluationHistory = defineAsyncComponent(() =>
  import("./components/DialogHealthManageEvaluationHistory.vue")
);
const DataCollection = defineAsyncComponent(() =>
  import("./healthPlan/DataCollection.vue")
);
const AnalysisOfEtiology = defineAsyncComponent(() =>
  import("./healthPlan/AnalysisOfEtiology.vue")
);
const HealthPortrait = defineAsyncComponent(() =>
  import("./healthPlan/HealthPortrait.vue")
);
const SituationAssessment = defineAsyncComponent(() =>
  import("./healthPlan/SituationAssessment.vue")
);
const IndividualInterventionProgram = defineAsyncComponent(() =>
  import("./healthPlan/IndividualInterventionProgram.vue")
);
const NextFeedbackSetting = defineAsyncComponent(() =>
  import("./healthPlan/NextFeedbackSetting.vue")
);

const [route, router] = [useRoute(), useRouter()];
const current = ref(0);
const pathCaches = ref([0]);
const changePath = (item, index) => {
  !pathCaches.value.includes(index) && pathCaches.value.push(index);
  current.value = index;
};
const paths = [
  {
    label: "数据收集",
    component: DataCollection,
    key: "DataCollection",
    dotClass: "bg-green-500",
    dotBgClass: "bg-green-400",
    class: "text-green-800 bg-green-200" // 绿色代表数据和增长
  },
  {
    label: "病因分析",
    component: AnalysisOfEtiology,
    key: "AnalysisOfEtiology",
    dotClass: "bg-orange-500",
    dotBgClass: "bg-orange-400",
    class: "text-orange-800 bg-orange-300" // 橙色代表警示和关注
  },
  {
    label: "健康画像",
    component: HealthPortrait,
    key: "HealthPortrait",
    dotClass: "bg-blue-500",
    dotBgClass: "bg-blue-400",
    class: "text-blue-800 bg-blue-300" // 蓝色代表信任和可靠
  },
  {
    label: "管理效果评价",
    component: SituationAssessment,
    key: "SituationAssessment",
    dotClass: "bg-indigo-500",
    dotBgClass: "bg-indigo-400",
    class: "text-indigo-800 bg-indigo-300" // 靛青色代表分析和深度思考
  },
  {
    label: "个性干预方案",
    component: IndividualInterventionProgram,
    key: "IndividualInterventionProgram",
    dotClass: "bg-purple-500",
    dotBgClass: "bg-purple-400",
    class: "text-purple-800 bg-purple-300" // 紫色代表个性化和创新
  },
  {
    label: "下次反馈设定",
    component: NextFeedbackSetting,
    key: "NextFeedbackSetting",
    dotClass: "bg-teal-500",
    dotBgClass: "bg-teal-400",
    class: "text-teal-800 bg-teal-300" // 青色代表规划和未来
  }
];
const pathLines = ref([]);
const initPathLink = async () => {
  pathLines.value = [];
  const commonStyle = {
    path: "grid",
    color: "#0052D4",
    gradient: {
      startColor: "#65C7F7",
      endColor: "#0052D4"
    },
    dash: {
      animation: true
    },
    size: 2
  };
  await sleep(6e2);
  const els = document.querySelectorAll(".health-path-item");
  els.forEach((el, i) => {
    let next = els[i + 1];
    if (next) {
      pathLines.value.push(
        new LeaderLine(el, next, {
          ...commonStyle,
          startSocket: "right",
          endSocket: "left",
          path: "straight",
          endPlug: "arrow1"
        })
      );
    }
  });

  pathLines.value.push(
    new LeaderLine(els[els.length - 1], els[0], {
      ...commonStyle,
      startSocket: "top",
      endSocket: "top",
      startPlug: "behind",
      endPlug: "arrow1"
    })
  );
  for (let i = 0; i < 6; i++) {
    await sleep(16 * 4);
    pathLinkLinePosition();
  }
};
const pathLinkLinePosition = () => {
  pathLines.value.forEach(v => v && v.position && v.position());
};
onMounted(async () => {
  await getDetail();

  initPathLink();
  initDisease();
});
onUnmounted(() => {
  pathLines.value.forEach(v => v.remove());
});

const state = ref({
  archiveId: route.query.archivesId, // 档案号
  disease: route.query.name, // 疾病名称
  diseaseId: route.query.diseaseId, // 疾病id
  etiologies: [], // 病因数组
  effectId: "", // 目前管理效果评价id
  target: "", // 下阶段期望效果
  nextTime: "", // 下次评估时间
  source: Number(route.query.source) || 0,
  score: 100,
  personalizeInterventions: [
    // 个性化干预
    // {
    //   id: "", // 图数据库id
    //   title: "", // 标题
    //   content: "", // content
    //   source: 0 // 历史记录里的source，第一次创建时传0
    // }
  ],
  furtherInfo: [], // 进一步
  additionalInfo: "" // 其他补充信
});
const isInit = ref(false)
provide("parentState", state);
const updateStateValueForKey = (key, value, source = "") => {
  state.value[key] = value;
  console.log(
    "updateStateValueForKey",
    "修改字段：",
    key,
    "修改值：",
    value,
    "完整数据:",
    state.value,
    "来源：",
    source
  );
};
provide("updateStateValueForKey", updateStateValueForKey);

const getNodes = async query => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 9999,
      pagesize: 9999,
      ...query
    }
  });
  return data;
};
provide("getNodes", getNodes);
const getNodeRelationship = async (id, tag, reverse = undefined) => {
  const { data } = await request.get(`/graphService/open/node/relationship`, {
    params: {
      id,
      rName: tag,
      reverse
    }
  });
  return data;
};
provide("getNodeRelationship", getNodeRelationship);
const getBatchNodeRelationships = async (ids, tag, reverse = undefined) => {
  const { data } = await request.get(`/graphService/open/node/relationships`, {
    params: {
      ids,
      rName: tag,
      reverse
    }
  });
  return data;
};
provide("getBatchNodeRelationships", getBatchNodeRelationships);

const getArticle = async id => {
  const { data } = await request.get("/articleService/open/article", {
    params: {
      id,
      mechanismId: "algor"
    }
  });
  return data;
};
provide("getArticle", getArticle);
const diseaseMangeNode = ref();
const initDisease = async () => {
  const nodes = await getNodeRelationship(
    route.query.diseaseId,
    "功能医学管理"
  );
  if (nodes[0]) {
    diseaseMangeNode.value = nodes[0].mId;
  }
};
provide("diseaseMangeNode", diseaseMangeNode);

const openDiseaseManageDialog = () => {
  getDiseaseManageList();
  diseaseManageVisible.value = true;
};
const diseaseManageVisible = ref(false);
const diseaseManageList = ref(false);
const getDiseaseManageList = async () => {
  const data = await getNodeRelationship(route.query.diseaseId, "疾病相关知识");
  diseaseManageList.value = (data || []).map(v => {
    return {
      id: v.mId,
      label: v.mProperties.name,
      articleId: v.mProperties["文章ID"]
    };
  });
};
const diseaseManageDetailVisible = ref(false);
const diseaseManageDetail = ref();
const getDiseaseManageDetail = async item => {
  diseaseManageDetail.value = await getArticle(item.articleId);
  diseaseManageDetailVisible.value = true;
};

const historyVisible = ref(false);
const historyList = ref([]);
const getDetail = async () => {
  const { data } = await request.get(
    "/platformApi/dataService/healthManage/detail",
    {
      params: {
        archiveId: route.query.archivesId
      }
    }
  );
  historyList.value = data.filter(v => v.diseaseId == route.query.diseaseId);
  const last = historyList.value[0];
  console.log('last', last)
  if (last) {
    state.value["diseaseId"] = last.diseaseId;
    state.value["etiologies"] = last.etiologies || [];
    state.value["score"] = last.score;
    state.value["target"] = last.target;
    state.value["nextTime"] = last.nextTime;
    state.value["personalizeInterventions"] =
      last.personalizeInterventions || [];
    state.value["furtherInfo"] = last.furtherInfo || [];
    state.value["additionalInfo"] = last.additionalInfo;
  }
  isInit.value =true
};
provide("healthHistoryList", historyList);

const getSurveyFormByCode = async customFields => {
  if (!customFields.length) return [];
  const { data } = await request.post(
    `/formService/mechanism/form/detailByCustomFields`,
    {
      customFields
    }
  );
  return data?.formFields || [];
};
provide("getSurveyFormByCode", getSurveyFormByCode);

const getFormFieldsSurveyIds = fields => {
  let ids = [];
  fields.forEach(v => {
    if (v.fields?.length) {
      v.fields.forEach(filed => {
        if (filed.extra?.subjectIds) {
          ids.push(...filed.extra.subjectIds);
        } else {
          filed.extra?.sn && ids.push(filed.extra?.sn);
        }
      });
    }

    if (v.extra?.subjectIds) {
      ids.push(...v.extra.subjectIds);
    } else {
      v.extra?.sn && ids.push(v.extra.sn);
    }
  });
  ids = [...new Set(ids)];
  return ids;
};
provide("getFormFieldsSurveyIds", getFormFieldsSurveyIds);
const getFormAnswer = async ids => {
  if (!ids.length) return;
  const { data } = await request.post(
    `/archivesService/mechanism/form/data/query`,
    {
      archivesId: route.query.archivesId,
      ids
    }
  );
  return (data.list || []).map(v => {
    return {
      ...v,
      answer: v.returnAnswer
    };
  });
};
provide("getFormAnswer", getFormAnswer);
</script>

<style lang="scss">
.el-scrollbar__view {
  height: 100%;
  .main-content.page-health-plan {
    margin: 0;
  }
}
.page-health-plan {
  overflow: hidden;
  .data-container {
    height: calc(100% - 48px);
    width: 100%;
  }
}
</style>