增加流程图

unknown

2024-05-28 4e974b7b54f3ee0561a7291e6fd60e4a4491c6de

增加流程图

 src/books/lifeCare/css/default.less

@@ -43,8 +43,23 @@
  }

  .drawflow {
    .main-path {
      stroke: #f49a4c;
    }

    .drawflow-delete {
      width: 25px;
      height: 25px;
      line-height: 21px;
      background-color: #f49a4c;
      font-size: 20px;

    }

    .drawflow-node {
      background-color: #fff;
      border:0px solid #f49a4c;
      box-shadow: 1px 1px 5px 0 #f49a4c;

      .contentWall {
        width: 100%;
@@ -59,16 +74,24 @@

        .contentText {
          textarea {
            text-indent: 0;
            width: auto;
            min-height: 50px;
            margin: 0;
            outline: none;
            border-color: #f49a4c;
            border-radius: 5px;
          }

          textarea:focus {
            border: 1px solid #000 !important;
            border: 1px solid #fabf2e !important;
          }
        }
      }

      .input,
      .output {
        border-color: #f49a4c;
        border-width: 1px;
      }
    }

@@ -105,6 +128,10 @@
    }
  }

  .drawContent_wall {
    width: 100%;
    height: 890px;
  }

  .chapter {
    font-family: "宋体";
@@ -942,7 +969,7 @@
    }

    h4 {
      font-family: "宋体";
      font-family: "FZLTZHJW";
      font-weight: bold;
      color: #f49a4c;
      font-size: 1.1em;

 src/books/lifeCare/index.vue

@@ -9,7 +9,6 @@
        transform: `scale(${pageZoom ? pageZoom : 1})`,
      }"
    >
      <drawflow />
      <front001 v-if="showCatalogList.indexOf(1) > -1" />
      <ChapterOne v-if="showCatalogList.indexOf(2) > -1" />
      <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" />
@@ -54,7 +53,6 @@
import chapter017 from "./view/chapter017";
import chapter018 from "./view/chapter018";
import NoteIcon from "@/assets/images/biji.png";
import drawflow from "@/components/drawflow";
import _ from "lodash";
export default {
  data() {
@@ -81,7 +79,6 @@
            showCatalogList: newVal,
          });
        }

        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
@@ -92,7 +89,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [0];
    this.showCatalogList = [4];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
@@ -151,7 +148,6 @@
    // }, 3000);
  },
  components: {
    drawflow,
    front001,
    ChapterOne,
    ChapterTwo,

 src/books/lifeCare/view/chapter003.vue

@@ -435,7 +435,7 @@
        <p><br /></p>
        <img class="img-gn2" alt="" src="../image/xxgcy.png" />
        <p>
          请扫二维码观看视频，先观察一下视频中的保教人员在指导婴幼儿集体洗手时都做了哪些工作，再结合阅读手册回答问题并完成学习任务。
          请观看视频，先观察一下视频中的保教人员在指导婴幼儿集体洗手时都做了哪些工作，再结合阅读手册回答问题并完成学习任务。
        </p>
        <p>1.指导婴幼儿洗手的准备工作有哪些？</p>
        <div class="bk-tx">
@@ -465,15 +465,15 @@
      </div>
      <div class="bodystyle">
        <p>2.如何指导婴幼儿洗手？请画出指导婴幼儿洗手的流程图。</p>
        <div class="bk-tx">
          <textarea
            v-model="chapter003.textAreaItem.text5"
            style="border: 0"
            placeholder="请输入内容"
            rows="5"
            @blur="onBlurChange('text5')"
          ></textarea>
        <div class="drawContent_wall">
          <drawflow
            @getDrawData="drawflowDataTwo"
            :strId="'drawflowId0032'"
            :primaryColor="'#f49a4c'"
            :importData="chapter003.drawDataTwo"
          />
        </div>
        <p><br /></p>
        <p>3.写一写指导洗手的儿歌。</p>
        <div class="bk-tx">
          <textarea
@@ -727,6 +727,7 @@
            ></video>
          </div>
        </div>
        <p><br/></p>
        <!-- <div class="bk-sys">
          <div class="bj1-sys">
            <p class="left">
@@ -1063,6 +1064,7 @@
            ></video>
          </div>
        </div>
        <p><br/></p>
        <!-- <div class="bk-sys">
          <div class="bj1-sys">
            <p class="left">
@@ -1355,6 +1357,7 @@
            ></video>
          </div>
        </div>
        <p><br/></p>
        <!-- <div class="bk-sys">
          <div class="bj1-sys">
            <p class="left">
@@ -1610,7 +1613,7 @@
            ></video>
          </div>
        </div>
        <!-- <p><br /></p> -->
        <p><br /></p>
        <!-- <div class="bk-sys">
          <div class="bj1-sys">
            <p class="left">
@@ -1934,8 +1937,8 @@
            ></video>
          </div>
        </div>
        <!-- <p><br /></p>
        <div class="bk-sys">
        <p><br /></p>
        <!-- <div class="bk-sys">
          <div class="bj1-sys">
            <p class="left">
              <img class="img-gn1" alt="" src="../image/dy-sys.png" />
@@ -1946,82 +1949,6 @@
          </p>
          <p class="img">刷牙</p>
        </div> -->
        <div class="tips-bk">
          <div class="bj-tip">
            指导婴幼儿洗脸、擦香的评分标准<div @click="activityScore5">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="19.28"
                height="20.563"
                viewBox="0 0 19.28 20.563"
              >
                <g transform="translate(-109.056 -82.941)">
                  <path
                    class="a"
                    d="M3439.656-15185.7h-12.643a1.815,1.815,0,0,1-1.816-1.81v-16.944a1.83,1.83,0,0,1,1.816-1.809h15.674a1.8,1.8,0,0,1,1.79,1.809v13.93h-4.217a.6.6,0,0,0-.6.6v4.217h0Zm-9.819-2.764a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm0-2a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm1.393-8.525a2.416,2.416,0,0,0-2.416,2.411,2.421,2.421,0,0,0,2.416,2.42h.111a1.8,1.8,0,0,0,1.1,1.1,1.809,1.809,0,0,0,.6.107,1.808,1.808,0,0,0,1.7-1.206h4.072l-.172.172a.635.635,0,0,0-.179.454.569.569,0,0,0,.179.4.637.637,0,0,0,.435.176.6.6,0,0,0,.424-.176l1.2-1.214a.618.618,0,0,0,0-.858l-1.2-1.187a.619.619,0,0,0-.431-.176.6.6,0,0,0-.427.176.615.615,0,0,0,0,.854l.172.176h-4.072a1.8,1.8,0,0,0-1.1-1.1,1.755,1.755,0,0,0-.6-.1,1.808,1.808,0,0,0-1.7,1.206h-.111a.554.554,0,0,1-.145-.016,1.2,1.2,0,0,1-.84-.4,1.217,1.217,0,0,1-.3-.878,1.2,1.2,0,0,1,1.206-1.137.407.407,0,0,1,.069,0h3.729a1.807,1.807,0,0,0,1.118,1.114,1.816,1.816,0,0,0,.576.091,1.789,1.789,0,0,0,1.7-1.205h.309a2.415,2.415,0,0,0,1.679-.775,2.407,2.407,0,0,0,.637-1.729,2.411,2.411,0,0,0-2.419-2.324h-6.213a1.821,1.821,0,0,0-1.107-1.1,1.8,1.8,0,0,0-.6-.1,1.814,1.814,0,0,0-1.706,1.2,1.8,1.8,0,0,0,.077,1.389,1.787,1.787,0,0,0,1.026.92,1.841,1.841,0,0,0,.6.1,1.807,1.807,0,0,0,1.706-1.2h6.266a1.179,1.179,0,0,1,.836.4,1.22,1.22,0,0,1,.305.874,1.213,1.213,0,0,1-1.214,1.146h-.172a1.8,1.8,0,0,0-1.118-1.118,1.711,1.711,0,0,0-.576-.1,1.8,1.8,0,0,0-1.706,1.214Z"
                    transform="translate(-3316.14 15289.201)"
                  />
                  <path
                    class="a"
                    d="M316.806,239.727a.6.6,0,1,0,.6-.6A.6.6,0,0,0,316.806,239.727Zm-5.421-4.207a.6.6,0,1,0,.6.6A.587.587,0,0,0,311.385,235.52Zm2.4,8.438a.607.607,0,1,0-.6-.613A.621.621,0,0,0,313.789,243.958Z"
                    transform="translate(-196.896 -148.921)"
                  />
                  <path
                    class="a"
                    d="M763.392,793.79l3.262-3.262h-3.262Z"
                    transform="translate(-638.661 -690.634)"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div v-if="chapter003.isScore5Open" class="tips-file">
            <table class="table111 table122">
              <thead>
                <tr>
                  <th
                    :style="{
                      width:
                        index == 1 || index == chapter003.scoreData5.length - 1
                          ? '100px'
                          : '',
                    }"
                    v-for="(header, index) in chapter003.publicHeader"
                    :key="index"
                  >
                    {{ header }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(row, rowIndex) in chapter003.scoreData5"
                  :key="rowIndex"
                >
                  <td v-for="(cell, cellIndex) in row" :key="cellIndex">
                    <template v-if="cell === ''">
                      <input
                        type="text"
                        v-model="chapter003.scoreData5[rowIndex][cellIndex]"
                        @blur="
                          updateCellScore5(
                            rowIndex,
                            cellIndex,
                            $event.target.value
                          )
                        "
                      />
                    </template>
                    <template v-else>
                      {{ cell }}
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <p><br /></p>
        <p><b>②活动过程</b></p>
        <p>1.无牙期的口腔护理（见图1-3-9）。</p>
        <p>
@@ -2172,12 +2099,16 @@
        </div> -->
        <img class="img-gn2" alt="" src="../image/xxgcy.png" />
        <p>
          请扫二维码观看视频，观察视频中的幼儿在漱口时，保教人员都做了哪些指导。请画出漱口指导的流程图，记录指导幼儿漱口的儿歌并回答相关问题。
          请观看视频，观察视频中的幼儿在漱口时，保教人员都做了哪些指导。请画出漱口指导的流程图，记录指导幼儿漱口的儿歌并回答相关问题。
        </p>
        <p>1.画出漱口指导的流程图。</p>
        <div class="bk-tx">
          <p>　</p>
          <p>　</p>
        <div class="drawContent_wall">
          <drawflow
            @getDrawData="drawflowDataOne"
            :strId="'drawflowId0031'"
            :primaryColor="'#f49a4c'"
            :importData="chapter003.drawDataOne"
          />
        </div>
        <p>2.查找指导幼儿漱口的儿歌一首，并记录。</p>
        <div class="bk-tx">
@@ -2309,7 +2240,7 @@
        </div> -->
        <img class="img-gn2" alt="" src="../image/xxgcy.png" />
        <p>
          请扫二维码观看视频，观察视频中的幼儿有哪些不良卫生习惯。如果有请指出问题，并提出改正的方法。
          请观看视频，观察视频中的幼儿有哪些不良卫生习惯。如果有请指出问题，并提出改正的方法。
        </p>
        <p>1.不良卫生习惯有哪些？</p>
        <div class="bk-tx">
@@ -2728,8 +2659,10 @@
import getQuestionData from "@/assets/methods/examination.js";
import testData from "../js/examinationList.js";
import examinations from "@/components/examinations/index.vue";
import drawflow from "@/components/drawflow";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "chapter003",
  data() {
    return {
@@ -3112,11 +3045,26 @@
        ],
        textAreaItem: {},
        radio: {},
        drawDataOne: {
          drawflow: {
            Home: {
              data: {},
            },
          },
        },
        drawDataTwo: {
          drawflow: {
            Home: {
              data: {},
            },
          },
        },
      },
    };
  },
  components: {
    examinations,
    drawflow
  },
  async created() {
    const localData = JSON.parse(localStorage.getItem("chapter003"));
@@ -3305,23 +3253,6 @@
      this.chapter003.isScore4Open = !this.chapter003.isScore4Open;
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
    updateCellScore5(rowIndex, cellIndex, value) {
      // 更新单元格数据
      this.$set(this.chapter003.scoreData5[rowIndex], cellIndex, value);
      if (cellIndex == 4) {
        this.$set(
          this.chapter003.scoreData5[rowIndex],
          5,
          this.chapter003.scoreData5[rowIndex][2] -
            this.chapter003.scoreData5[rowIndex][cellIndex]
        );
      }
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
    activityScore5() {
      this.chapter003.isScore5Open = !this.chapter003.isScore5Open;
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
    updateCellScore4(rowIndex, cellIndex, value) {
      // 更新单元格数据
      this.$set(this.chapter003.scoreData4[rowIndex], cellIndex, value);
@@ -3341,6 +3272,14 @@
    onRadioText() {
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
    drawflowDataOne(val) {
      this.chapter003.drawDataOne = val;
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
    drawflowDataTwo(val) {
      this.chapter003.drawDataTwo = val;
      localStorage.setItem("chapter003", JSON.stringify(this.chapter003));
    },
  },
};
</script>

 src/books/lifeCare/view/chapter004.vue

@@ -519,6 +519,7 @@
            </table>
          </div>
        </div>
        <p><br /></p>
        <p><b>④总结与反思</b></p>
        <p>1.操作中容易失误扣分的方面有哪些？</p>
        <div class="bk-tx">
@@ -742,11 +743,13 @@
      </div>
      <div class="bodystyle">
        <p>2.请画出指导婴幼儿集体如厕过程的流程图。</p>
        <div class="bk-tx">
          <div
            id="myDiagramDiv"
            style="width: 500px; height: 300px; background-color: #dae4e0"
          ></div>
        <div class="drawContent_wall">
          <drawflow
            @getDrawData="drawflowDataOne"
            :strId="'drawflowIdOne'"
            :primaryColor="'#f49a4c'"
            :importData="chapter004.drawDataOne"
          />
        </div>
        <p>3.婴幼儿集体如厕过程中易出现什么突发事件？应对策略有哪些？</p>
        <div class="bk-tx">
@@ -831,7 +834,7 @@
        </div> -->
        <img class="img-gn2" alt="" src="../image/xxgcy.png" />
        <p>
          请扫二维码观看视频，观察视频中的婴幼儿有哪些不良的如厕习惯。如果有，请指出问题并给出矫正不良的如厕习惯的建议。
          请观看视频，观察视频中的婴幼儿有哪些不良的如厕习惯。如果有，请指出问题并给出矫正不良的如厕习惯的建议。
        </p>
        <p>1.不良的如厕习惯有哪些？</p>
        <div class="bk-tx">
@@ -1117,10 +1120,15 @@
          ></textarea>
        </div>
        <p>2.请画出指导婴幼儿便后清洁的流程图。</p>
        <div class="bk-tx">
          <p>　</p>
          <p>　</p>
        <div class="drawContent_wall">
          <drawflow
            @getDrawData="drawflowDataTwo"
            :strId="'drawflowIdTwo'"
            :primaryColor="'#f49a4c'"
            :importData="chapter004.drawDataTwo"
          />
        </div>
        <p><br /></p>
        <div class="bk-qjms">
          <p class="bj1-qjms">⊙　情境描述2　⊙</p>
          <p class="block">
@@ -1318,10 +1326,13 @@
import getQuestionData from "@/assets/methods/examination.js";
import testData from "../js/examinationList.js";
import examinations from "@/components/examinations/index.vue";
import drawflow from "@/components/drawflow";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "chapter004",
  components: {
    examinations,
    drawflow,
  },
  data() {
    return {
@@ -1378,6 +1389,20 @@
        textAreaItem: {},
        qustionData: {},
        radio: {},
        drawDataOne: {
          drawflow: {
            Home: {
              data: {},
            },
          },
        },
        drawDataTwo: {
          drawflow: {
            Home: {
              data: {},
            },
          },
        },
      },
    };
  },
@@ -1447,6 +1472,14 @@
    onBlurChange() {
      localStorage.setItem("chapter004", JSON.stringify(this.chapter004));
    },
    drawflowDataOne(val) {
      this.chapter004.drawDataOne = val;
      localStorage.setItem("chapter004", JSON.stringify(this.chapter004));
    },
    drawflowDataTwo(val) {
      this.chapter004.drawDataTwo = val;
      localStorage.setItem("chapter004", JSON.stringify(this.chapter004));
    },
  },
  mounted() {},
};

 src/books/lifeCare/view/chapter005.vue

@@ -2647,7 +2647,7 @@
        </div> -->
        <img class="img-gn2" alt="" src="../image/xxgcy.png" />
        <p>
          请扫二维码观看视频，结合阅读手册，观察一下视频中的保教人员在餐后需要做哪些整理工作，并完成以下练习。
          请观看视频，结合阅读手册，观察一下视频中的保教人员在餐后需要做哪些整理工作，并完成以下练习。
        </p>
        <p>1.餐后保教人员的整理工作内容是什么？</p>
        <div class="bk-tx">
@@ -2662,10 +2662,13 @@
        <p>
          2.如何组织和指导婴幼儿进行餐后整理？请画出指导婴幼儿餐后整理的流程图。
        </p>
        <div class="bk-tx">
          <p><br />　</p>
          <p><br />　</p>
          <p><br />　</p>
        <div class="drawContent_wall">
          <drawflow
            @getDrawData="drawflowDataClick"
            :strId="'drawflowId005'"
            :primaryColor="'#f49a4c'"
            :importData="chapter005.drawData"
          />
        </div>
      </div>
    </div>
@@ -2915,8 +2918,10 @@
import testData from "../js/examinationList.js";
import examinations from "@/components/examinations/index.vue";
import { getFileMd5, getPublicImage } from "../js/tool.js";
import drawflow from "@/components/drawflow";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "chapter005",
  data() {
    return {
@@ -2939,6 +2944,13 @@
        isScore4Open: true,
        pictrueListTwo:[],
        qustionData: {},
        drawData:{
          drawflow: {
            Home: {
              data: {},
            },
          },
        },
        // 冲调配方奶
        publicHeader: ["序号", "考核内容", "配分", "评分标准", "扣分", "得分"],
        groupData: [
@@ -3344,6 +3356,7 @@
  },
  components: {
    examinations,
    drawflow
  },
  async created() {
    const localData = JSON.parse(localStorage.getItem("chapter005"));
@@ -3553,6 +3566,10 @@
      let dom = document.getElementById(str);
      dom.click();
    },
    drawflowDataClick(val) {
      this.chapter005.drawData = val;
      localStorage.setItem("chapter005", JSON.stringify(this.chapter005));
    },
  },
};
</script>

 src/components/drawflow/index.vue

@@ -1,18 +1,27 @@
<template>
  <div class="drawflow">
    <div class="menu">
      <div class="menuItem">
  <div
    class="drawflow"
    :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
  >
    <div
      class="menu"
      :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
    >
      <div
        class="menuItem"
        :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
      >
        <div
          class="drag-drawflow"
          draggable="true"
          @dragstart="drag"
          data-node="template"
        >
          <span>节点</span>
          <span>拖拽此处创建</span>
        </div>
      </div>
    </div>
    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop">
    <div class="content" :id="strId" @drop="drop" @dragover="allowDrop">
      <div class="btn-export" @click="exportData">导出</div>
      <div class="btn-clear" @click="editor.clearModuleSelected()">清空</div>
    </div>
@@ -34,17 +43,25 @@
    importData: {
      type: Object,
    },
    primaryColor: {
      type: String,
    },
    strId: {
      type: String,
      default: "drawflow",
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    exportData() {
      console.log(this.editor.export());
      let dataJ = this.editor.export();
      this.$emit("getDrawData", dataJ);
    },
    init() {
      this.editor = new Drawflow(
        document.getElementById("drawflow"),
        document.getElementById(this.strId),
        Vue,
        this
      );
@@ -169,10 +186,10 @@
          let noneEle = `
              <div class="contentWall">
                <div class="contentTitle">
                  <input df-title />
                  <input placeholder="请输入标题" df-title />
                </div>
                <div class="contentText">
                  <textarea rows="4" df-content></textarea>
                  <textarea rows="4" placeholder="请输入描述" df-content></textarea>
                </div>
              </div>
        `;
@@ -200,7 +217,7 @@
</script>

<style scoped>
@import 'drawflow/dist/drawflow.min.css';
@import "drawflow/dist/drawflow.min.css";
.drawflow {
  width: 100%;
  height: 100%;