From 4e974b7b54f3ee0561a7291e6fd60e4a4491c6de Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期二, 28 五月 2024 16:39:35 +0800 Subject: [PATCH] 增加流程图 --- src/books/lifeCare/view/chapter005.vue | 37 ++++- src/books/lifeCare/index.vue | 6 src/books/lifeCare/css/default.less | 33 +++++ src/books/lifeCare/view/chapter003.vue | 159 ++++++++------------------ src/books/lifeCare/view/chapter004.vue | 51 +++++++- src/components/drawflow/index.vue | 37 ++++- 6 files changed, 176 insertions(+), 147 deletions(-) diff --git a/src/books/lifeCare/css/default.less b/src/books/lifeCare/css/default.less index 75f27dc..1c96f4b 100644 --- a/src/books/lifeCare/css/default.less +++ b/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; diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index d7b5849..abbdfa4 100644 --- a/src/books/lifeCare/index.vue +++ b/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, diff --git a/src/books/lifeCare/view/chapter003.vue b/src/books/lifeCare/view/chapter003.vue index 5266e35..5e3ad88 100644 --- a/src/books/lifeCare/view/chapter003.vue +++ b/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.鏃犵墮鏈熺殑鍙h厰鎶ょ悊锛堣鍥�1-3-9锛夈��</p> <p> @@ -2172,12 +2099,16 @@ </div> --> <img class="img-gn2" alt="" src="../image/xxgcy.png" /> <p> - 璇锋壂浜岀淮鐮佽鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鍦ㄦ急鍙f椂锛屼繚鏁欎汉鍛橀兘鍋氫簡鍝簺鎸囧銆傝鐢诲嚭婕卞彛鎸囧鐨勬祦绋嬪浘锛岃褰曟寚瀵煎辜鍎挎急鍙g殑鍎挎瓕骞跺洖绛旂浉鍏抽棶棰樸�� + 璇疯鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鍦ㄦ急鍙f椂锛屼繚鏁欎汉鍛橀兘鍋氫簡鍝簺鎸囧銆傝鐢诲嚭婕卞彛鎸囧鐨勬祦绋嬪浘锛岃褰曟寚瀵煎辜鍎挎急鍙g殑鍎挎瓕骞跺洖绛旂浉鍏抽棶棰樸�� </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> - 璇锋壂浜岀淮鐮佽鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鏈夊摢浜涗笉鑹崼鐢熶範鎯�傚鏋滄湁璇锋寚鍑洪棶棰橈紝骞舵彁鍑烘敼姝g殑鏂规硶銆� + 璇疯鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鏈夊摢浜涗笉鑹崼鐢熶範鎯�傚鏋滄湁璇锋寚鍑洪棶棰橈紝骞舵彁鍑烘敼姝g殑鏂规硶銆� </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> diff --git a/src/books/lifeCare/view/chapter004.vue b/src/books/lifeCare/view/chapter004.vue index bbbc0ea..3ee6da4 100644 --- a/src/books/lifeCare/view/chapter004.vue +++ b/src/books/lifeCare/view/chapter004.vue @@ -519,6 +519,7 @@ </table> </div> </div> + <p><br /></p> <p><b>鈶f�荤粨涓庡弽鎬�</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> - 璇锋壂浜岀淮鐮佽鐪嬭棰戯紝瑙傚療瑙嗛涓殑濠村辜鍎挎湁鍝簺涓嶈壇鐨勫鍘曚範鎯�傚鏋滄湁锛岃鎸囧嚭闂骞剁粰鍑虹煫姝d笉鑹殑濡傚帟涔犳儻鐨勫缓璁�� + 璇疯鐪嬭棰戯紝瑙傚療瑙嗛涓殑濠村辜鍎挎湁鍝簺涓嶈壇鐨勫鍘曚範鎯�傚鏋滄湁锛岃鎸囧嚭闂骞剁粰鍑虹煫姝d笉鑹殑濡傚帟涔犳儻鐨勫缓璁�� </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() {}, }; diff --git a/src/books/lifeCare/view/chapter005.vue b/src/books/lifeCare/view/chapter005.vue index d275bd9..02667af 100644 --- a/src/books/lifeCare/view/chapter005.vue +++ b/src/books/lifeCare/view/chapter005.vue @@ -640,7 +640,7 @@ </table> </div> </div> - <p><br/></p> + <p><br /></p> <p><b>鈶f�荤粨涓庡弽鎬�</b></p> <p>1.鎿嶄綔涓鏄撳け璇墸鍒嗙殑鏂归潰鏈夊摢浜涳紵</p> <div class="bk-tx"> @@ -1139,7 +1139,7 @@ </table> </div> </div> - <p><br/></p> + <p><br /></p> <p><b>鈶㈠疄璁粌涔�</b></p> <p> 2锝�4浜轰负涓�缁勫紑灞曞疄璁搷浣滐紝鍏朵腑涓�浜烘搷浣滐紝鍏朵粬鍚屽瑙傛懇銆傛搷浣滆�呬竴杈瑰疄鎿嶄竴杈硅瑙f搷浣滆棰嗭紝鍏朵粬鍚屽鎸夌収鍒嗗彂椁愬叿涓庨鐗╃殑璇勫垎鏍囧噯缁欐搷浣滆�呮墦鍒嗐�� @@ -1632,7 +1632,7 @@ </table> </div> </div> - <p><br/></p> + <p><br /></p> <p><b>鈶㈠疄璁粌涔�</b></p> <p> 2锝�4浜轰负涓�缁勫紑灞曞疄璁搷浣滐紝鍏朵腑涓�浜烘搷浣滐紝鍏朵粬鍚屽瑙傛懇銆傛搷浣滆�呬竴杈瑰疄鎿嶄竴杈硅瑙f搷浣滆棰嗭紝鍏朵粬鍚屽鎸夌収濂剁摱鍠傚摵鐨勮瘎鍒嗘爣鍑嗙粰鎿嶄綔鑰呮墦鍒嗐�� @@ -1801,7 +1801,7 @@ </table> </div> </div> - <p><br/></p> + <p><br /></p> <p><b>鈶㈠疄璁粌涔�</b></p> <p> 2锝�4浜轰负涓�缁勫紑灞曞疄璁搷浣滐紝鍏朵腑涓�浜烘搷浣滐紝鍏朵粬鍚屽瑙傛懇銆傛搷浣滆�呬竴杈瑰疄鎿嶄竴杈硅瑙f搷浣滆棰嗭紝鍏朵粬鍚屽鎸夌収鍕哄瓙鍠傚摵鐨勮瘎鍒嗘爣鍑嗙粰鎿嶄綔鑰呮墦鍒嗐�� @@ -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 { @@ -2937,8 +2942,15 @@ isScore2Open: true, isScore3Open: true, isScore4Open: true, - pictrueListTwo:[], + pictrueListTwo: [], qustionData: {}, + drawData:{ + drawflow: { + Home: { + data: {}, + }, + }, + }, // 鍐茶皟閰嶆柟濂� publicHeader: ["搴忓彿", "鑰冩牳鍐呭", "閰嶅垎", "璇勫垎鏍囧噯", "鎵e垎", "寰楀垎"], 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> diff --git a/src/components/drawflow/index.vue b/src/components/drawflow/index.vue index 36bdf97..8c8b594 100644 --- a/src/components/drawflow/index.vue +++ b/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%; -- Gitblit v1.9.1