From c50a8b158e31b9157869d28fb90c6f5c840bb05d Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期五, 08 十二月 2023 15:17:55 +0800 Subject: [PATCH] 提交信息 --- src/views/patient/patient/profile/index.vue | 1039 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 774 insertions(+), 265 deletions(-) diff --git a/src/views/patient/patient/profile/index.vue b/src/views/patient/patient/profile/index.vue index 3475bfd..cb19817 100644 --- a/src/views/patient/patient/profile/index.vue +++ b/src/views/patient/patient/profile/index.vue @@ -3,57 +3,27 @@ <!-- 澶撮儴鐩掑瓙 --> <div class="personages"> <el-row :gutter="20"> - <el-col :span="4" - ><div class="headportrait"> + <el-col :span="18"> + <div class="headportrait"> <div class="text-center"> <img v-imgError="require('@/assets/common/head.jpg')" src="" /> </div> - <div>鍚村ぇ榫�</div> + <div style="margin-left: 10px">鍚村ぇ榫�</div> + <div style="margin-left: 10px" class="text-title">鐢�</div> + <div style="margin-left: 10px" class="text-title">66宀�</div> + <div style="margin-left: 10px" class="text-title">1999.12.18</div> + <div style="margin-left: 10px" class="text-title">姹夋棌</div> + <div style="margin-left: 10px" class="text-title">娌冲崡淇¢槼</div> </div></el-col > - <el-col :span="8" - ><div class="xinz-inf"> - <el-tag - :key="tag" - v-for="tag in dynamicTags" - closable - :disable-transitions="false" - @close="handleClose(tag)" - > - {{ tag }} - </el-tag> - <el-input - class="input-new-tag" - v-if="inputVisible" - v-model="inputValue" - ref="saveTagInput" - size="small" - @keyup.enter.native="handleInputConfirm" - @blur="handleInputConfirm" - > - </el-input> - <el-button - v-else - class="button-new-tag" - size="small" - @click="showInput" - >+ 鏂板鏍囩</el-button - > - </div></el-col - > - <el-col :span="4" - ><div class="info-xx">鐢�<span>66宀�</span></div></el-col - > - <el-col :span="4"><div class="info-xx">13803963330</div></el-col> </el-row> </div> <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"> <el-tab-pane name="health"> <span class="mulsz" slot="label" - ><i class="el-icon-date"></i> 鍋ュ悍妗f</span + ><i class="el-icon-date"></i> 鎮h�呮。妗�</span > - 鍩烘湰淇℃伅 </el-tab-pane> <el-tab-pane name="medical"> <span class="mulsz" slot="label" @@ -72,22 +42,7 @@ > <el-tab-pane name="checkout" ><span class="mulsz" slot="label" - >妫�楠�({{ jynumber }}) - </span></el-tab-pane - > - <el-tab-pane name="examine" - ><span class="mulsz" slot="label" - >妫�鏌�({{ jcnumber }}) - </span></el-tab-pane - > - <el-tab-pane name="physical" - ><span class="mulsz" slot="label"> - 浣撴({{ tjnumber }})</span - ></el-tab-pane - > - <el-tab-pane name="pharmacy" - ><span class="mulsz" slot="label" - >鐢ㄨ嵂({{ yynumber }}) + >浣撴({{ jynumber }}) </span></el-tab-pane > </el-tabs> @@ -113,6 +68,21 @@ ><i class="el-icon-s-data"></i>浣撻噸 </span></el-tab-pane > + <el-tab-pane name="heartrate" + ><span class="mulsz" slot="label" + ><i class="el-icon-s-operation"></i>蹇冪巼 + </span></el-tab-pane + > + <el-tab-pane name="bloodoxygen" + ><span class="mulsz" slot="label" + ><i class="el-icon-s-data"></i>琛�姘� + </span></el-tab-pane + > + <el-tab-pane name="animalheat" + ><span class="mulsz" slot="label" + ><i class="el-icon-s-opportunity"></i>浣撴俯 + </span></el-tab-pane + > </el-tabs></el-tab-pane > <el-tab-pane name="serve"> @@ -127,36 +97,204 @@ <div class="top-message"> <div class="headline">鍩虹淇℃伅</div> <div class="detailed"> - <div class="one-column"> - <div>鎮h�呭鍚嶏細<span class="spanvalue">鐜嬪ぇ缇�</span></div> - <div>鎬у埆锛�<span class="spanvalue">鐢�</span></div> + <el-row :gutter="20"> + <el-col :span="12" + ><div class="grid-content bg-purple"> + 鎮h�呭鍚嶏細<span class="spanvalue">鐜嬪ぇ缇�</span> + </div></el-col + > + <el-col :span="12" + ><div class="grid-content bg-purple"> + 鑱旂郴鐢佃瘽锛�<span class="spanvalue">13803963330</span> + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="grid-content bg-purple"> + 鍑虹敓鍦帮細<span class="spanvalue" + >娴欐睙鐪佹澀宸炲競浣欐澀鍖轰綑鏉閬�</span + > + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="grid-content bg-purple"> + 灞呬綇鍦帮細<span class="spanvalue" + >娴欐睙鐪佹澀宸炲競浣欐澀鍖轰綑鏉閬�</span + > + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="xinz-inf"> + <el-tag + :key="tag" + type="success" + v-for="tag in dynamicTags" + closable + :disable-transitions="false" + @close="handleClose(tag)" + > + {{ tag }} + </el-tag> + <el-select + v-model="inputValue" + v-if="inputVisible" + @change="handleInputConfirm" + filterable + placeholder="璇烽�夋嫨" + > + <el-option + v-for="item in options" + :key="item.label" + :label="item.label" + :value="item.label" + > + </el-option> + </el-select> - <div>璇佷欢绫诲瀷锛�<span class="spanvalue">韬唤璇�</span></div> - </div> - <div class="one-column"> - <div>鍑虹敓鏃ユ湡锛�<span class="spanvalue">1999-01-02</span></div> - <div>骞撮緞锛�<span class="spanvalue">121</span></div> - - <div class=""> - 璇佷欢鍙风爜锛�<span class="spanvalue">312223222322232223</span> - </div> - </div> + <el-button + v-else + class="button-new-tag" + size="small" + @click="showInput" + >+ 鏂板鏍囩</el-button + > + </div></el-col + > + </el-row> </div> </div> + <div class="top-message"> + <div class="headline">鐥呭彶</div> + <div class="detailed"> + <el-form ref="form" :model="form" :rules="rules" label-width="100px"> + <el-row> + <el-col :span="8"> + <el-form-item label="杩囧線鐤剧梾" prop="name"> + <el-input + v-model="form.name" + placeholder="璇疯緭鍏�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鑽墿杩囨晱" prop="sex"> + <el-input + v-model="form.name" + placeholder="璇疯緭鍏ュ叿浣撹嵂鐗�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="瀹舵棌鐥呭彶" prop="age"> + <el-input + v-model="form.age" + placeholder="璇疯緭鍏ュ叿浣撶柧鐥�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="8"> + <el-form-item label="鎵嬫湳鍙�" prop="name"> + <el-input + v-model="form.name" + placeholder="璇疯緭鍏ユ墜鏈�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鐢熻偛鍙�" prop="age"> + <el-input + v-model="form.age" + placeholder="璇疯緭鍏ヨ儙鏁�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鏈堢粡鍙�" prop="telcode"> + <el-radio-group v-model="form.radio"> + <el-radio :label="1">鏈�</el-radio> + <el-radio :label="2">鏃�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="8"> + <el-form-item label="鍚哥儫鎯呭喌" prop="iccardtype"> + <el-radio-group v-model="form.radio"> + <el-radio :label="1">鏈�</el-radio> + <el-radio :label="2">鏃�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="楗厭鎯呭喌" prop="iccardno"> + <el-radio-group v-model="form.radios"> + <el-radio :label="1">鏈�</el-radio> + <el-radio :label="2">鏃�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="杩愬姩鎯呭喌" prop="iccardno"> + <el-radio-group v-model="form.radiosa"> + <el-radio :label="1">鏈�</el-radio> + <el-radio :label="2">鏃�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="楗鎯呭喌" prop="iccardno"> + <el-radio-group v-model="form.radiosa"> + <el-radio :label="1">澶氬害楗</el-radio> + <el-radio :label="2">姝e父楗</el-radio> + <el-radio :label="2">椋熸涓嶆尟</el-radio> + </el-radio-group> + </el-form-item> </el-col + ><el-col :span="12"> + <el-form-item label="蹇冪悊鎯呭喌" prop="iccardno"> + <el-radio-group v-model="form.radiosa"> + <el-radio :label="1">蹇冩儏鎰夋偊</el-radio> + <el-radio :label="2">杞诲井鐒﹁檻</el-radio> + <el-radio :label="2">鎶戦儊</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + </el-form> + </div> + </div> + <!-- 鑱旂郴鐢佃瘽 --> <div class="bottom-message"> - <div class="headline">鍙风爜缁存姢</div> + <div class="headline"> + 鍙风爜缁存姢 + <el-button type="primary" @click="AddanumberVisible = true" + >+鏂板</el-button + > + </div> <div class="Table-screen"> <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="id" label="搴忓彿" width="180"> + </el-table-column> <el-table-column prop="name" label="濮撳悕" width="180"> </el-table-column> <el-table-column prop="phonenumber" label="鑱旂郴鏂瑰紡" width="180"> </el-table-column> <el-table-column prop="concern" label="鍏崇郴"> </el-table-column> - <el-table-column prop="source" label="鑱旂郴浜烘潵婧�"> - </el-table-column> - <el-table-column prop="default" label="榛樿鑱旂郴鏂瑰紡"> - </el-table-column> <el-table-column label-class-name="columcz" fixed="right" @@ -182,16 +320,19 @@ <el-table :data="serviceData" style="width: 100%"> <el-table-column prop="daya" label="灏辫瘖鏃ユ湡" width="180"> </el-table-column> - <el-table-column prop="hospitalname" label="鍖婚櫌鍚嶇О" width="180"> - </el-table-column> - <el-table-column prop="result" label="璇婃柇缁撴灉"> </el-table-column> - <el-table-column prop="administrative" label="灏辫瘖绉戝"> + <el-table-column prop="administrative" label="灏辫瘖绉戝" width="180"> </el-table-column> <el-table-column prop="doctor" label="鍖荤敓"> </el-table-column> - <el-table-column label-class-name="columcz" label="鎿嶄綔" width="300"> - <template slot-scope="scope"> - <el-button type="text" size="small">璇︽儏</el-button> - </template> + <el-table-column prop="result" label="鐤剧梾璇婃柇"> </el-table-column> + <el-table-column prop="administrative" label="妫�楠�"> + </el-table-column> + <el-table-column prop="administrative" label="妫�鏌�"> + </el-table-column> + <el-table-column prop="administrative" label="鎵嬫湳"> + </el-table-column> + <el-table-column prop="administrative" label="鐢ㄨ嵂"> + </el-table-column> + <el-table-column prop="columcz" label="鍖诲槺" width="200"> </el-table-column> </el-table> @@ -207,70 +348,39 @@ <div v-if="sonactiveName == 'inhospital'"> <el-table :data="serviceData" style="width: 100%"> <el-table-column prop="godaya" label="鍏ラ櫌鏃ユ湡"> </el-table-column> - <el-table-column prop="hospitalname" label="鍖婚櫌鍚嶇О"> + <el-table-column prop="hospitalname" label="鍑洪櫌鏃堕棿"> </el-table-column> - <el-table-column prop="result" label="鍏ラ櫌绉戝埆"> </el-table-column> <el-table-column prop="administrative" label="鐥呭尯"> </el-table-column> - <el-table-column prop="bed" label="搴婁綅鍙�"> </el-table-column> - <el-table-column prop="doctor" label="鍏ラ櫌璇婃柇"> </el-table-column> - <el-table-column prop="today" label="鍑洪櫌鏃堕棿"> </el-table-column> - </el-table> - </div> - <!-- 妫�楠� --> - <div v-if="sonactiveName == 'checkout'"> - <el-table :data="serviceData" style="width: 100%"> - <el-table-column prop="godaya" label="妫�楠屽崟鍙�"> </el-table-column> - <el-table-column prop="hospitalname" label="鎶ュ憡鏃ユ湡"> + <el-table-column prop="result" label="涓绘不鍖诲笀"> </el-table-column> + <el-table-column prop="bed" label="绠″簥鎶ゅ+"> </el-table-column> + <el-table-column prop="doctor" label="鍑洪櫌鐤剧梾璇婃柇"> </el-table-column> - <el-table-column prop="result" label="妫�楠岄」鐩�"> </el-table-column> - <el-table-column prop="administrative" label="鍖婚櫌鍚嶇О"> + <el-table-column prop="today" label="妫�楠�"> </el-table-column> + <el-table-column prop="administrative" label="妫�鏌�"> </el-table-column> - </el-table> - </div> - <!-- 妫�鏌� --> - <div v-if="sonactiveName == 'examine'"> - <el-table :data="serviceData" style="width: 100%"> - <el-table-column prop="godaya" label="鎶ュ憡鍗�"> </el-table-column> - <el-table-column prop="hospitalname" label="鎶ュ憡鏃堕棿"> + <el-table-column prop="administrative" label="鎵嬫湳"> </el-table-column> - <el-table-column prop="result" label="妫�鏌ラ」鐩�"> </el-table-column> - <el-table-column prop="administrative" label="鍖婚櫌鍚嶇О"> + <el-table-column prop="administrative" label="鐢ㄨ嵂"> + </el-table-column> + <el-table-column prop="columcz" label="鍑洪櫌灏忕粨" width="200"> </el-table-column> </el-table> </div> <!-- 浣撴 --> - <div v-if="sonactiveName == 'physical'"> + <div v-if="sonactiveName == 'checkout'"> <el-table :data="serviceData" style="width: 100%"> - <el-table-column prop="daya" label="灏辫瘖鏃ユ湡"> </el-table-column> - <el-table-column prop="hospitalname" label="鍖婚櫌鍚嶇О"> + <el-table-column prop="godaya" label="浣撴绫诲瀷"> </el-table-column> + <el-table-column prop="hospitalname" label="浣撴濂楅鍚嶇О"> </el-table-column> - <el-table-column prop="result" label="璇婃柇缁撴灉"> </el-table-column> - <el-table-column prop="administrative" label="灏辫瘖绉戝"> + <el-table-column prop="result" label="浣撴棰勭害鏃ユ湡"> </el-table-column> - <el-table-column prop="doctor" label="鍖荤敓"> </el-table-column> - <!-- <el-table-column - label-class-name="columcz" - fixed="right" - label="鎿嶄綔" - width="300" - > - <template slot-scope="scope"> - <el-button type="text" size="small">璇︽儏</el-button> - </template> - </el-table-column> --> - </el-table> - </div> - <!-- 鐢ㄨ嵂 --> - <div v-if="sonactiveName == 'pharmacy'"> - <el-table :data="serviceData" style="width: 100%"> - <el-table-column prop="daya" label="灏辫瘖鏃ユ湡"> </el-table-column> - <el-table-column prop="hospitalname" label="鍖婚櫌鍚嶇О"> + <el-table-column prop="administrative" label="浣撴椤圭洰"> </el-table-column> - <el-table-column prop="result" label="璇婃柇缁撴灉"> </el-table-column> - <el-table-column prop="administrative" label="灏辫瘖绉戝"> + <el-table-column prop="administrative" label="浣撴鎶ュ憡鏃�"> </el-table-column> - <el-table-column prop="doctor" label="鍖荤敓"> </el-table-column> + <el-table-column prop="administrative" label="浣撴鎬绘鎶ュ憡"> + </el-table-column> </el-table> </div> </div> @@ -281,8 +391,19 @@ style="margin-top: 20px; font-size: 20px !important" v-else-if="activeName == 'serve'" > - <el-tabs type="border-card"> - <el-tab-pane label="棣栨闅忚"> + <div style="margin-bottom: 15px" v-for="item in record"> + <el-card class="box-card"> + <div + style=" + font-size: 22px; + padding-left: 5px; + margin: 15px 0; + border-left: 4px solid rgb(190, 65, 134); + " + > + {{ item.name }} + </div> + <el-divider></el-divider> <div style="margin-top: 10px"> 闅忚鐘舵�侊細宸茬粓姝�<span style="color: #2775b6" >锛堢粓姝㈠師鍥狅細鎮h�呯棅鎰堝洖璁跨粨鏉燂紝缁堟鏃堕棿锛�2023-12-18 12:00锛�</span @@ -299,7 +420,7 @@ </div> <div style=" - font-size: 22px; + font-size: 20px; padding-left: 5px; margin: 15px 0; border-left: 4px solid rgb(65, 161, 190); @@ -327,40 +448,138 @@ <div style="margin-top: 10px"> 闅忚澶囨敞锛� <span style="color: #2775b6">鎻愰啋娉ㄦ剰楗鍋ュ悍</span> </div> - </el-tab-pane> - <el-tab-pane label="浜屾闅忚">浜屾闅忚</el-tab-pane> - <el-tab-pane label="涓夋闅忚">涓夋闅忚</el-tab-pane> - </el-tabs> + </el-card> + </div> </div> <!-- 鍋ュ悍鐩戞祴 --> <div class="medical-record" v-show="activeName == 'monitor'"> <!-- 琛�鍘嬪浘鏍� --> - <div v-show="sontwoactiveName == 'blood'"> + <div v-show="sontwoactiveName == 'blood'" style="display: flex"> <div id="xyeCharts" class="sontwoactiveName" - style="width: 1300px; height: 800px" + style="width: 880px; height: 560px" ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabelxy" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> </div> <!-- 琛�绯� --> - <div v-show="sontwoactiveName == 'glucose'"> + <div v-show="sontwoactiveName == 'glucose'" style="display: flex"> <div id="xteCharts" class="sontwoactiveName" - style="width: 1300px; height: 800px" + style="width: 880px; height: 560px" ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabelxt" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> </div> <!-- 浣撻噸 --> - <div v-show="sontwoactiveName == 'weight'"> + <div v-show="sontwoactiveName == 'weight'" style="display: flex"> <div id="tzeCharts" class="sontwoactiveName" - style="width: 1300px; height: 800px" + style="width: 880px; height: 560px" ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabeltz" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> + </div> + <!-- 蹇冪巼 --> + <div v-show="sontwoactiveName == 'heartrate'" style="display: flex"> + <div + id="xleCharts" + class="sontwoactiveName" + style="width: 880px; height: 560px" + ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabelxl" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> + </div> + <!-- 琛�姘� --> + <div v-show="sontwoactiveName == 'bloodoxygen'" style="display: flex"> + <div + id="xueyangeCharts" + class="sontwoactiveName" + style="width: 880px; height: 560px" + ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabelxueyang" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> + </div> + <!-- 浣撴俯 --> + <div v-show="sontwoactiveName == 'animalheat'" style="display: flex"> + <div + id="tweCharts" + class="sontwoactiveName" + style="width: 880px; height: 560px" + ></div> + <div style="width: 400px"> + <el-card class="box-card"> + <SFtable + :currentList="tableDatalist" + :tableLabel="tableLabeltw" + :center="false" + :multiplechoice="false" + /> + </el-card> + </div> </div> </div> - <!-- <div id="xyeCharts" style="width: 500px; height: 500px"></div> --> + <el-dialog title="鏂板鑱旂郴鏂瑰紡" :visible.sync="AddanumberVisible"> + <el-form :model="numberform" label-width="100px"> + <el-form-item label="濮撳悕"> + <el-input v-model="numberform.name"></el-input> + </el-form-item> + <el-form-item label="鑱旂郴鐢佃瘽"> + <el-input v-model="numberform.name"></el-input> + </el-form-item> + <el-form-item label="鍏崇郴"> + <el-input v-model="numberform.name"></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="AddanumberVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="Addanumber">纭� 瀹�</el-button> + </div> + </el-dialog> </div> </template> @@ -369,18 +588,20 @@ import userInfo from "./userInfo"; import resetPwd from "./resetPwd"; import * as echarts from "echarts"; +import SFtable from "@/components/SFtable"; //琛ㄦ牸缁勪欢 import { getUserProfile } from "@/api/system/user"; import { listJob } from "@/api/monitor/job"; //鑾峰彇鍒楄〃鎺ュ彛寰呭畾 export default { name: "Profile", - components: { userAvatar, userInfo, resetPwd }, + components: { userAvatar, userInfo, resetPwd, SFtable }, data() { return { user: {}, roleGroup: {}, postGroup: {}, + form: {}, mznumber: 14, zynumber: 34, jynumber: 32, @@ -393,7 +614,19 @@ sonactiveName: "outpatient", //鍋ュ悍鐩戞祴瀵艰埅 sontwoactiveName: "blood", //鍖荤枟妗f瀵艰埅 dynamicTags: ["鏍囩涓�", "鏍囩浜�", "鏍囩涓�"], + record: [ + { + name: "瀹f暀浠诲姟", + }, + { + name: "閫氱煡浠诲姟", + }, + { + name: "闂嵎璋冩煡", + }, + ], inputVisible: false, + AddanumberVisible: false, inputValue: "", // 鏌ヨ鍙傛暟 queryParams: { @@ -403,6 +636,7 @@ jobGroup: undefined, status: undefined, }, + numberform: {}, echartdom: {}, xtechartdom: {}, tzechartdom: {}, @@ -428,6 +662,26 @@ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�", }, ], + tableDatalist: [ + { + id: 12, + date: "2016-05-02", + name: "121", + address: "89", + }, + { + id: 12, + date: "2016-05-02", + name: "121", + address: "89", + }, + { + id: 12, + date: "2016-05-02", + name: "121", + address: "89", + }, + ], serviceData: [ { daya: "2023-12-12", @@ -437,6 +691,52 @@ doctor: "鍚村ぇ榫�", }, ], + options: [ + { + value: "1", + label: "浼氬憳", + }, + { + value: "2", + label: "绯栧翱鐥�", + }, + { + value: "3", + label: "楂樿鍘�", + }, + { + value: "4", + label: "浣撴", + }, + ], + tableLabelxy: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "鏀剁缉鍘�", width: "", prop: "sex" }, + { label: "鑸掑紶鍘�", width: "", prop: "age" }, + ], + tableLabelxt: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "鏀剁缉鍘�", width: "", prop: "sex" }, + { label: "鑸掑紶鍘�", width: "", prop: "age" }, + ], + tableLabeltz: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "韬珮", width: "", prop: "sex" }, + { label: "浣撻噸", width: "", prop: "age" }, + { label: "BMI鎸囨暟", width: "", prop: "update_by" }, + ], + tableLabelxl: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "蹇冪巼", width: "", prop: "sex" }, + ], + tableLabelxueyang: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "琛�姘чケ鍜屽害", width: "", prop: "sex" }, + ], + tableLabeltw: [ + { label: "娴嬮噺鏃堕棿", width: "", prop: "name" }, + { label: "浣撴俯", width: "", prop: "sex" }, + ], }; }, created() { @@ -444,12 +744,16 @@ this.echartdom = document.getElementById("xyeCharts"); this.xtechartdom = document.getElementById("xteCharts"); this.tzechartdom = document.getElementById("tzeCharts"); - console.log(this.echartdom); - console.log(this.xtechartdom); - console.log(this.tzechartdom); + this.xlechartdom = document.getElementById("xleCharts"); + this.xueyangechartdom = document.getElementById("xueyangeCharts"); + this.twechartdom = document.getElementById("tweCharts"); + this.echartsInit(); this.xtechartsInit(); this.tzechartsInit(); + this.xlechartsInit(); + this.xueyangechartsInit(); + this.twechartsInit(); }); this.getList(); }, @@ -468,6 +772,8 @@ handleClick(tab, event) { console.log(tab, event); }, + // 鑱旂郴鏂瑰紡鏂板 + Addanumber() {}, handleClose(tag) { this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); }, @@ -491,13 +797,7 @@ // 琛�鍘嬪浘琛ㄩ儴鍒� echartsInit() { // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 - console.log(echarts); - console.log(this.echartdom); - console.log(this.$refs.xyeCharts); var myxyChart = echarts.init(this.echartdom); - console.log(myxyChart); - // var myxyChart = this.$echarts.init(document.getElementById("xyeCharts")); - // var myxyChart = this.$echarts.init(this.$refs.xyeCharts); var option = { title: { text: "鍘嗗彶琛�鍘嬭褰�", @@ -564,7 +864,6 @@ }, ], }; - console.log("ss"); // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� myxyChart.setOption(option); }, @@ -606,80 +905,7 @@ title: { text: "鍘嗗彶琛�绯栬褰�", }, - visualMap: [ - { - show: false, - type: "continuous", - seriesIndex: 0, - min: 0, - max: 400, - }, - ], - title: [ - { - left: "center", - text: "琛�绯栧巻鍙茬洃娴�", - }, - ], - tooltip: { - trigger: "axis", - }, - xAxis: [ - { - data: dateList, - }, - ], - yAxis: [{}], - series: [ - { - type: "line", - showSymbol: false, - data: valueList, - }, - ], - }; - console.log("ss"); - // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� - myxyChart.setOption(option); - }, - // 浣撻噸鍥捐〃 - tzechartsInit() { - // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 - console.log(echarts); - console.log(this.tzechartdom); - var myxyChart = echarts.init(this.tzechartdom); - console.log(myxyChart); - const data = [ - ["2000-06-05", 116], - ["2000-06-06", 99], - ["2000-06-07", 105], - ["2000-06-08", 126], - ["2000-06-09", 73], - ["2000-06-10", 85], - ["2000-06-11", 73], - ["2000-06-12", 68], - ["2000-06-13", 92], - ["2000-06-14", 130], - ["2000-06-15", 245], - ["2000-06-16", 119], - ["2000-06-17", 115], - ["2000-06-18", 201], - ["2000-06-19", 209], - ["2000-06-20", 106], - ["2000-06-21", 137], - ["2000-06-22", 128], - ["2000-06-23", 85], - ]; - const dateList = data.map(function (item) { - return item[0]; - }); - const valueList = data.map(function (item) { - return item[1]; - }); - var option = { - title: { - text: "鍘嗗彶琛�绯栬褰�", - }, + // 渚ц竟灏忓姛鑳� toolbox: { show: true, feature: { @@ -742,6 +968,291 @@ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� myxyChart.setOption(option); }, + // 浣撻噸鍥捐〃 + tzechartsInit() { + // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 + console.log(echarts); + console.log(this.tzechartdom); + var myxyChart = echarts.init(this.tzechartdom); + var option = { + title: { + text: "浣撻噸鎸囨爣鍥�", + }, + tooltip: { + trigger: "axis", + }, + legend: { + data: ["韬珮", "浣撻噸", "BMI鎸囨暟"], + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + toolbox: { + feature: { + saveAsImage: {}, + }, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: ["涓�鏈�", "浜屾湀", "涓夋湀", "鍥涙湀", "浜旀湀", "鍏湀", "涓冩湀"], + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "韬珮", + type: "line", + stack: "Total", + data: [120, 132, 101, 134, 90, 230, 210], + }, + { + name: "浣撻噸", + type: "line", + stack: "Total", + data: [220, 182, 191, 234, 290, 330, 310], + }, + + { + name: "BMI鎸囨暟", + type: "line", + stack: "Total", + data: [320, 332, 301, 334, 390, 330, 320], + }, + ], + }; + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + myxyChart.setOption(option); + }, + // 蹇冪巼 + xlechartsInit() { + var myxyChart = echarts.init(this.xlechartdom); + console.log(myxyChart); + const data = [ + ["2000-06-05", 116], + ["2000-06-06", 129], + ["2000-06-07", 135], + ["2000-06-08", 86], + ["2000-06-09", 73], + ["2000-06-10", 85], + ["2000-06-11", 73], + ["2000-06-12", 68], + ["2000-06-13", 92], + ["2000-06-14", 130], + ["2000-06-15", 245], + ["2000-06-16", 139], + ["2000-06-17", 115], + ["2000-06-18", 111], + ["2000-06-19", 309], + ["2000-06-20", 206], + ["2000-06-21", 137], + ["2000-06-22", 128], + ["2000-06-23", 85], + ]; + const dateList = data.map(function (item) { + return item[0]; + }); + const valueList = data.map(function (item) { + return item[1]; + }); + var option = { + title: { + text: "鍘嗗彶蹇冪巼璁板綍", + }, + visualMap: [ + { + show: false, + type: "continuous", + seriesIndex: 0, + min: 0, + max: 400, + }, + ], + + tooltip: { + trigger: "axis", + }, + xAxis: [ + { + data: dateList, + }, + ], + yAxis: [{}], + series: [ + { + type: "line", + showSymbol: false, + data: valueList, + lineStyle: { + width: 3, + type: "solid", + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#22a2c3", + }, + { + offset: 1, + color: "#b0d5df", + }, + ]), + }, + }, + ], + }; + console.log("ss"); + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + myxyChart.setOption(option); + }, + // 琛�姘� + xueyangechartsInit() { + var myxyChart = echarts.init(this.xueyangechartdom); + const data = [ + ["2000-06-05", 116], + ["2000-06-06", 129], + ["2000-06-07", 135], + ["2000-06-08", 86], + ["2000-06-09", 73], + ["2000-06-10", 85], + ["2000-06-11", 73], + ["2000-06-12", 68], + ["2000-06-13", 92], + ["2000-06-14", 130], + ["2000-06-15", 245], + ["2000-06-16", 139], + ["2000-06-17", 115], + ["2000-06-18", 111], + ["2000-06-19", 309], + ["2000-06-20", 206], + ["2000-06-21", 137], + ["2000-06-22", 128], + ["2000-06-23", 85], + ]; + const dateList = data.map(function (item) { + return item[0]; + }); + const valueList = data.map(function (item) { + return item[1]; + }); + var option = { + title: { + text: "鍘嗗彶琛�姘ц褰�", + }, + visualMap: [ + { + show: false, + type: "continuous", + seriesIndex: 0, + min: 0, + max: 400, + }, + ], + + tooltip: { + trigger: "axis", + }, + xAxis: [ + { + data: dateList, + }, + ], + yAxis: [{}], + series: [ + { + type: "line", + showSymbol: false, + data: valueList, + lineStyle: { + width: 3, + type: "solid", + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#45b787", + }, + { + offset: 1, + color: "#c4d7d6" + }, + ]), + }, + }, + ], + }; + console.log("ss"); + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + myxyChart.setOption(option); + }, + // 浣撴俯 + twechartsInit() { + var myxyChart = echarts.init(this.twechartdom); + console.log(myxyChart); + const data = [ + ["2000-06-05", 36.8], + ["2000-06-06", 36.2], + ["2000-06-07", 37.8], + ["2000-06-08",37.8], + ["2000-06-09",37.2], + ["2000-06-10",36.2], + ["2000-06-11",37.8], + ["2000-06-12",36.9], + ["2000-06-13",36.8], + ["2000-06-14", 36.4], + ["2000-06-15", 37.1], + ["2000-06-16", 36.9], + ["2000-06-17", 36.4], + ["2000-06-18", 38.8], + ["2000-06-19", 37.5], + ["2000-06-20", 36.6], + ["2000-06-21", 36.8], + ["2000-06-22", 36.2], + ["2000-06-23",37.8], + ]; + const dateList = data.map(function (item) { + return item[0]; + }); + const valueList = data.map(function (item) { + return item[1]; + }); + var option = { + title: { + text: "鍘嗗彶浣撴俯璁板綍", + }, + visualMap: [ + { + show: false, + type: "continuous", + seriesIndex: 0, + min: 0, + max: 400, + }, + ], + + tooltip: { + trigger: "axis", + }, + xAxis: [ + { + data: dateList, + }, + ], + yAxis: [{}], + series: [ + { + type: "line", + showSymbol: false, + data: valueList, + }, + ], + }; + console.log("ss"); + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + myxyChart.setOption(option); + }, }, }; </script> @@ -770,30 +1281,35 @@ border-radius: 50%; } } + .text-title { + font-size: 20px; + font-weight: 500; + color: #ecfcfc; + } } - .xinz-inf { - font-size: 18px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +} +.xinz-inf { + font-size: 18px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - line-height: 48px; + line-height: 48px; - .el-tag + .el-tag { - margin-left: 10px; - } - .button-new-tag { - margin-left: 10px; - height: 32px; - line-height: 30px; - padding-top: 0; - padding-bottom: 0; - } - .input-new-tag { - width: 90px; - margin-left: 10px; - vertical-align: bottom; - } + .el-tag + .el-tag { + margin-left: 10px; + } + .button-new-tag { + margin-left: 10px; + height: 32px; + line-height: 30px; + padding-top: 0; + padding-bottom: 0; + } + .input-new-tag { + width: 90px; + margin-left: 10px; + vertical-align: bottom; } } .el-tabs--border-card { @@ -813,25 +1329,18 @@ margin-top: 25px; margin-left: 100px; .detailed { - width: 70%; + width: 88%; border-radius: 8px; padding: 30px; margin-bottom: 30px; background-color: #ddf0f8; - .one-column { - display: flex; - font-size: 20px; - margin-bottom: 30px; - padding-bottom: 3px; - .spanvalue { - display: inline-block; - min-width: 200px; - border-bottom: 1px solid rgb(172, 172, 172); - } - - div { - width: 330px; - } + .bg-purple { + margin-bottom: 20px; + } + .spanvalue { + display: inline-block; + min-width: 200px; + border-bottom: 1px solid rgb(172, 172, 172); } } } -- Gitblit v1.9.3