From d1367a2eafbc26cadf07abb3caa94a0d64d09cab Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期二, 13 八月 2024 14:14:12 +0800 Subject: [PATCH] 测试完成 --- src/views/patient/patient/profile/index.vue | 1579 +++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 1,220 insertions(+), 359 deletions(-) diff --git a/src/views/patient/patient/profile/index.vue b/src/views/patient/patient/profile/index.vue index cd3849d..e0936bd 100644 --- a/src/views/patient/patient/profile/index.vue +++ b/src/views/patient/patient/profile/index.vue @@ -1,143 +1,317 @@ <template> <div class="app-container"> - <el-row :gutter="20"> - <el-col :span="4" :xs="24"> - <el-card class="box-card"> - <!-- <div slot="header" class="clearfix"> - <span>涓汉淇℃伅</span> - </div> --> - <div class="personage"> + <!-- 澶撮儴鐩掑瓙 --> + <div class="personages"> + <el-row :gutter="20"> + <el-col :span="18"> + <div class="headportrait"> <div class="text-center"> - <img v-imgError="require('@/assets/common/head.jpg')" src="" /> + <img + v-imgError="require('@/assets/images/shoushuzhudaoyisheng.png')" + src="" + /> </div> - <div class="information"> - <div class="info-xx"> - 鍚撮緳 - <div class="xinz-inf">+鏂板鏍囩</div> - </div> - <div class="info-xx">鐢�<span>66宀�</span></div> - <div class="info-xx">13803963330</div> + <div style="margin-left: 10px">{{ userform.name }}</div> + <div style="margin-left: 10px" class="text-title"> + {{ userform.sex == 1 ? "鐢�" : "濂�" }} </div> - </div> - </el-card> - </el-col> - <el-col :span="18" :xs="24"> - <el-tabs - type="border-card" - v-model="activeName" - @tab-click="handleClick" + <div style="margin-left: 10px" class="text-title"> + {{ userform.age }}宀� + </div> + <div style="margin-left: 10px" class="text-title"> + {{ userform.birthdate }} + </div> + <div style="margin-left: 10px" class="text-title"> + {{ userform.nation }} + </div> + <div style="margin-left: 10px" class="text-title"> + {{ userform.birthplace }} + </div> + </div></el-col > - <el-tab-pane name="health"> - <span class="mulsz" slot="label" - ><i class="el-icon-date"></i> 鍋ュ悍妗f</span - > - 鍩烘湰淇℃伅 - </el-tab-pane> - <el-tab-pane name="medical"> - <span class="mulsz" slot="label" - ><i class="el-icon-s-management"></i> 鍖荤枟妗f</span - > - <el-tabs v-model="sonactiveName" @tab-click="handleClick"> - <el-tab-pane name="outpatient" - ><span class="mulsz" slot="label" - >闂ㄨ瘖({{ mznumber }})</span - ></el-tab-pane - > - <el-tab-pane name="inhospital" - ><span class="mulsz" slot="label" - >浣忛櫌({{ zynumber }}) - </span></el-tab-pane - > - <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 }}) - </span></el-tab-pane - > - </el-tabs> - </el-tab-pane> - <el-tab-pane name="monitor"> - <span class="mulsz" slot="label" - ><i class="el-icon-s-data"></i> 鍋ュ悍鐩戞祴</span - > + </el-row> + </div> - <el-tabs v-model="sontwoactiveName" @tab-click="handleClick"> - <el-tab-pane name="blood" - ><span class="mulsz" slot="label" - ><i class="el-icon-s-operation"></i> 琛�鍘�</span - ></el-tab-pane - > - <el-tab-pane name="glucose" - ><span class="mulsz" slot="label" - ><i class="el-icon-odometer"></i>琛�绯� - </span></el-tab-pane - > - <el-tab-pane name="weight" - ><span class="mulsz" slot="label" - ><i class="el-icon-s-data"></i>浣撻噸 - </span></el-tab-pane - > - </el-tabs></el-tab-pane + <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> 鎮h�呮。妗�</span + > + </el-tab-pane> + <el-tab-pane name="medical"> + <span class="mulsz" slot="label" + ><i class="el-icon-s-management"></i> 鍖荤枟妗f</span + > + <el-tabs v-model="sonactiveName" @tab-click="handleClickson"> + <el-tab-pane name="outpatient" + ><span class="mulsz" slot="label" + >闂ㄨ瘖({{ mznumber }})</span + ></el-tab-pane > - <el-tab-pane name="serve"> - <span class="mulsz" slot="label" - ><i class="el-icon-s-custom"></i> 鏈嶅姟璁板綍</span - > - - 瀹氭椂浠诲姟琛ュ伩</el-tab-pane + <el-tab-pane name="inhospital" + ><span class="mulsz" slot="label" + >鍦ㄩ櫌({{ zynumber }}) + </span></el-tab-pane + > + <el-tab-pane name="checkout" + ><span class="mulsz" slot="label" + >鍑洪櫌({{ jynumber }}) + </span></el-tab-pane > </el-tabs> - </el-col> - </el-row> + </el-tab-pane> + <el-tab-pane name="monitor"> + <span class="mulsz" slot="label" + ><i class="el-icon-s-data"></i> 鍋ュ悍鐩戞祴</span + > + + <el-tabs v-model="sontwoactiveName" @tab-click="handleClick"> + <el-tab-pane name="blood" + ><span class="mulsz" slot="label" + ><i class="el-icon-s-operation"></i> 琛�鍘�</span + ></el-tab-pane + > + <el-tab-pane name="glucose" + ><span class="mulsz" slot="label" + ><i class="el-icon-odometer"></i>琛�绯� + </span></el-tab-pane + > + <el-tab-pane name="weight" + ><span class="mulsz" slot="label" + ><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"> + <span class="mulsz" slot="label" + ><i class="el-icon-s-custom"></i> 鏈嶅姟璁板綍</span + > + </el-tab-pane> + </el-tabs> + <!-- 鍋ュ悍妗f妯″潡 --> <div class="information-content" v-if="activeName == 'health'"> <div class="top-message"> - <div class="headline">鍩虹淇℃伅</div> + <div class="headlines"> + <div>鍩虹淇℃伅</div> + <el-button type="primary" @click="savefile">淇濆瓨鎮h�呮。妗�</el-button> + </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">{{ userform.name }}</span> + </div></el-col + > + <el-col :span="12" + ><div class="grid-content bg-purple"> + 鑱旂郴鐢佃瘽锛�<span class="spanvalue">{{ userform.telcode }}</span> + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="grid-content bg-purple"> + 鍑虹敓鍦帮細<span class="spanvalue">{{ userform.birthplace }}</span> + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="grid-content bg-purple"> + 灞呬綇鍦帮細<span class="spanvalue">{{ + userform.placeOfResidence + }}</span> + </div></el-col + > + </el-row> + <el-row :gutter="20"> + <el-col :span="24" + ><div class="xinz-inf"> + <el-tag + :key="tag.tagname" + type="success" + v-for="tag in dynamicTags" + closable + :disable-transitions="false" + @close="handleClose(tag)" + > + {{ tag.tagname }} + </el-tag> + <el-select + v-if="inputVisible" + v-model="inputValue" + @change="handleInputConfirm" + filterable + allow-create + default-first-option + placeholder="璇烽�夋嫨/鏌ヨ" + > + <el-option + v-for="item in options" + :key="item.tagid" + :label="item.tagname" + :value="item.tagname" + > + </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" label-width="100px"> + <el-row> + <el-col :span="8"> + <el-form-item label="杩囧線鐤剧梾" prop="name"> + <el-input + v-model="form.pastIllnesses" + placeholder="璇疯緭鍏�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鑽墿杩囨晱" prop="sex"> + <el-input + v-model="form.drugAllergy" + placeholder="璇疯緭鍏ュ叿浣撹嵂鐗�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="瀹舵棌鐥呭彶" prop="age"> + <el-input + v-model="form.familyHistory" + 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.surgicalHistory" + placeholder="璇疯緭鍏ユ墜鏈�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鐢熻偛鍙�" prop="age"> + <el-input + v-model="form.reproductiveHistory" + placeholder="璇疯緭鍏ヨ儙鏁�/鏃�" + maxlength="30" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鏈堢粡鍙�" prop="menstrualHistory"> + <el-radio-group v-model="form.menstrualHistory"> + <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="smoking"> + <el-radio-group v-model="form.smoking"> + <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="drink"> + <el-radio-group v-model="form.drink"> + <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="motion"> + <el-radio-group v-model="form.motion"> + <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="diet"> + <el-radio-group v-model="form.diet"> + <el-radio label="1">杩囧害楗</el-radio> + <el-radio label="2">姝e父楗</el-radio> + <el-radio label="3">椋熸涓嶆尟</el-radio> + </el-radio-group> + </el-form-item> </el-col + ><el-col :span="12"> + <el-form-item label="蹇冪悊鎯呭喌" prop="psychology"> + <el-radio-group v-model="form.psychology"> + <el-radio label="1">蹇冩儏鎰夋偊</el-radio> + <el-radio label="2">杞诲井鐒﹁檻</el-radio> + <el-radio label="3">鎶戦儊</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"> + 浜插睘鍙风爜缁存姢<span style="margin-right: 60px"> </span> + <el-button type="primary" @click="addcompiletb">+鏂板</el-button> + </div> <div class="Table-screen"> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="name" label="濮撳悕" width="180"> + <el-table + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + > + <el-table-column prop="id" label="搴忓彿" width="180"> </el-table-column> - <el-table-column prop="phonenumber" label="鑱旂郴鏂瑰紡" width="180"> + <el-table-column prop="contactname" label="濮撳悕" width="180"> </el-table-column> - <el-table-column prop="concern" label="鍏崇郴"> </el-table-column> - <el-table-column prop="source" label="鑱旂郴浜烘潵婧�"> + <el-table-column prop="contactway" label="鑱旂郴鏂瑰紡" width="180"> </el-table-column> - <el-table-column prop="default" label="榛樿鑱旂郴鏂瑰紡"> - </el-table-column> + <el-table-column prop="relation" label="鍏崇郴"> </el-table-column> <el-table-column label-class-name="columcz" fixed="right" @@ -145,11 +319,22 @@ width="300" > <template slot-scope="scope"> - <el-button type="success" size="small" + <el-button + type="success" + size="small" + @click="defaulttb(scope.row)" >璁句负榛樿鑱旂郴鏂瑰紡</el-button > - <el-button type="warning" size="small">缂栬緫</el-button> - <el-button type="danger" size="small">鍒犻櫎</el-button> + <el-button + @click="compiletb(scope.row)" + type="warning" + size="small" + >缂栬緫</el-button + > + + <el-button @click="deltb(scope.row)" type="danger" size="small" + >鍒犻櫎</el-button + > </template> </el-table-column> </el-table> @@ -163,16 +348,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> @@ -188,105 +376,245 @@ <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> <!-- 鏈嶅姟璁板綍 --> - <div class="medical-record" v-else-if="activeName == 'serve'">sdaad</div> + <div + class="medical-recordc" + style="margin-top: 20px; font-size: 20px !important" + v-else-if="activeName == 'serve'" + > + <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"> + {{ item.name }}鐘舵�侊細宸茬粓姝�<span style="color: #2775b6" + >锛堢粓姝㈠師鍥狅細鎮h�呯棅鎰堝洖璁跨粨鏉燂紝缁堟鏃堕棿锛�2023-12-18 12:00锛�</span + > + </div> + <div style="margin-top: 10px"> + {{ item.name }}鍙戦�佹椂闂达細<span style="color: #2775b6" + >2023-11-23 12:00</span + > + </div> + <div style="margin-top: 10px"> + {{ item.name }}瀹屾垚鏃堕棿锛�<span style="color: #2775b6" + >2023-12-18 12:00</span + > + </div> + <div style="margin-top: 10px"> + 鐤肩棝绋嬪害锛�<span style="color: #2775b6">涓害</span> + </div> + <div + style=" + font-size: 20px; + padding-left: 5px; + margin: 15px 0; + border-left: 4px solid rgb(65, 161, 190); + " + > + 浜哄伐{{ item.name }}璁板綍 + </div> + <div style="margin-top: 10px"> + <el-row :gutter="20"> + <el-col :span="6" + >{{ item.name }}鏃ユ湡锛� + <span style="color: #2775b6">2023-11-22 11:22</span></el-col + > + <el-col :span="6" + >{{ item.name }}浜猴細 + <span style="color: #2775b6">鍚村皬榫�</span></el-col + > + <el-col :span="6" + >鎮h�呴厤鍚堝害锛� <span style="color: #2775b6">楂�</span></el-col + > + </el-row> + </div> + <div style="margin-top: 10px"> + {{ item.name }}缁撴灉锛� + <span style="color: #2775b6">鎮h�呯棅鎰堬紝韬綋鍊嶆</span> + </div> + <div style="margin-top: 10px"> + {{ item.name }}澶囨敞锛� + <span style="color: #2775b6">鎻愰啋娉ㄦ剰楗鍋ュ悍</span> + </div> + </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="titletb" :visible.sync="AddanumberVisible"> + <el-form :model="numberform" label-width="100px"> + <el-form-item label="濮撳悕"> + <el-input v-model="numberform.contactname"></el-input> + </el-form-item> + <el-form-item label="鑱旂郴鐢佃瘽"> + <el-input v-model="numberform.contactway"></el-input> + </el-form-item> + <el-form-item label="鍏崇郴"> + <el-input v-model="numberform.relation"></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="archivecontact">纭� 瀹�</el-button> + </div> + </el-dialog> </div> </template> @@ -295,18 +623,33 @@ import userInfo from "./userInfo"; import resetPwd from "./resetPwd"; import * as echarts from "echarts"; - -import { getUserProfile } from "@/api/system/user"; -import { listJob } from "@/api/monitor/job"; //鑾峰彇鍒楄〃鎺ュ彛寰呭畾 +import SFtable from "@/components/SFtable"; //琛ㄦ牸缁勪欢 +import { listtag } from "@/api/system/label"; +import { + messagelistpatient, + addmedicalhistory, + getmedicalhistory, + editmedicalhistory, + addcontactinformation, + editcontactinformation, + getcontactinformation, + delcontactinformation, + listcontactinformation, + alterpatient, + Patientclinic, +} from "@/api/patient/homepage"; +import { listPatouthosp } from "@/api/smartor/patouthosp"; +import { listpatient } from "@/api/patient/record"; export default { name: "Profile", - components: { userAvatar, userInfo, resetPwd }, + components: { userAvatar, userInfo, resetPwd, SFtable }, data() { return { - user: {}, + userform: {}, roleGroup: {}, postGroup: {}, + form: {}, mznumber: 14, zynumber: 34, jynumber: 32, @@ -314,10 +657,28 @@ tjnumber: 12, yynumber: 12, total: 0, // 鎬绘潯鏁� + titletb: "鏂板鑱旂郴鏂瑰紡", activeTab: "userinfo", + id: "", + loading: false, activeName: "health", //涓�绫诲鑸� sonactiveName: "outpatient", //鍋ュ悍鐩戞祴瀵艰埅 sontwoactiveName: "blood", //鍖荤枟妗f瀵艰埅 + dynamicTags: [], + record: [ + { + name: "瀹f暀浠诲姟", + }, + { + name: "閫氱煡浠诲姟", + }, + { + name: "闂嵎璋冩煡", + }, + ], + inputVisible: false, + AddanumberVisible: false, + inputValue: "", // 鏌ヨ鍙傛暟 queryParams: { pageNum: 1, @@ -326,29 +687,29 @@ jobGroup: undefined, status: undefined, }, + numberform: {}, echartdom: {}, xtechartdom: {}, tzechartdom: {}, - tableData: [ + tableData: [], + tableDatalist: [ { + id: 12, date: "2016-05-02", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", + name: "121", + address: "89", }, { - date: "2016-05-04", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�", + id: 12, + date: "2016-05-02", + name: "121", + address: "89", }, { - date: "2016-05-01", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�", - }, - { - date: "2016-05-03", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�", + id: 12, + date: "2016-05-02", + name: "121", + address: "89", }, ], serviceData: [ @@ -360,55 +721,328 @@ 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() { + this.id = this.$route.query.id; + this.getuserinfo(); + this.gettabList(); this.$nextTick(function () { 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(); }, - methods() {}, methods: { - // 鏌ヨ鍒楄〃 - getList() { + // 鏌ヨ鍖荤枟妗f鍚勫垪琛ㄤ俊鎭� + getList(type) { this.loading = true; - listJob(this.queryParams).then((response) => { - this.jobList = 1; - this.total = 1; - this.loading = false; + if (type == 1) { + // 闂ㄨ瘖璁板綍 + listPatouthosp({ patid: this.id }).then((response) => { + console.log(response); + }); + } else if (type == 2) { + listpatient({ patid: this.id }).then((response) => { + console.log(response); + }); + } else if (type == 3) { + listpatient({ patid: this.id }).then((response) => { + console.log(response); + }); + } + }, + getcontactlist() { + listcontactinformation({ patid: this.id }).then((response) => { + this.tableData = response.rows; }); }, - // getUser() { - // getUserProfile().then((response) => { - // this.user = response.data; - // this.roleGroup = response.roleGroup; - // this.postGroup = response.postGroup; - // }); - // }, + processElement(element) { + return { ...element, isoperation: null }; + }, + // 鑾峰彇鍩虹淇℃伅 + getuserinfo() { + const queryParams = { + pid: Number(this.id), + allhosp: "0", + pageNum: 1, + }; + // 鎮h�呭熀纭�淇℃伅 + messagelistpatient(queryParams).then((response) => { + this.userform = response.rows[0]; + // this.dynamicTags = response.rows[0].tagList; + this.dynamicTags = response.rows[0].tagList.map(this.processElement); + console.log(this.dynamicTags); + }); + // 鐥呭彶淇℃伅 + getmedicalhistory({ pid: this.id }).then((res) => { + if (res.code == 200 && res.rows[0]) { + this.form = res.rows[0]; + } + }); + // 鑱旂郴淇℃伅 + this.getcontactlist(); + }, + // 淇濆瓨鎮h�呮。妗� + savefile() { + // this.userform.tagList = this.dynamicTags; + this.userform.isoperation = 2; + alterpatient(this.userform).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鍩虹淇℃伅淇濆瓨鎴愬姛"); + } else { + this.$modal.msgError("鍩虹淇℃伅淇敼澶辫触"); + } + }); + // 鐥呭彶 + this.medicalhistory(); + }, + // 鐥呭彶 + medicalhistory() { + if (this.form.id) { + editmedicalhistory(this.form).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鐥呭彶淇濆瓨鎴愬姛"); + } else { + this.$modal.msgError("鐥呭彶淇敼澶辫触"); + } + }); + } else { + this.form.pid = this.id; + addmedicalhistory(this.form).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鐥呭彶淇濆瓨鎴愬姛"); + } else { + this.$modal.msgError("鐥呭彶淇敼澶辫触"); + } + }); + } + }, + // 鑱旂郴鏂瑰紡--------------- + archivecontact() { + if (this.numberform.id) { + editcontactinformation(this.numberform).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鑱旂郴鏂瑰紡淇敼鎴愬姛"); + this.getcontactlist(); + this.AddanumberVisible = false; + } else { + this.$modal.msgError("鑱旂郴鏂瑰紡淇敼澶辫触"); + } + }); + } else { + this.numberform.patid = this.id; + addcontactinformation(this.numberform).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鑱旂郴鏂瑰紡鏂板鎴愬姛"); + this.getcontactlist(); + this.AddanumberVisible = false; + } else { + this.$modal.msgError("鑱旂郴鏂瑰紡鏂板澶辫触"); + } + }); + } + this.numberform = {}; + }, + deltb(row) { + this.$modal + .confirm("鏄惁纭鍒犻櫎璇ユ暟鎹」锛�") + .then(() => { + if (row.id) { + delcontactinformation(row.id).then((res) => { + if (res.code == 200) { + this.$modal.msgSuccess("鑱旂郴鏂瑰紡鍒犻櫎鎴愬姛"); + this.getcontactlist(); + } else { + this.$modal.msgError("鑱旂郴鏂瑰紡鍒犻櫎澶辫触"); + } + }); + } else { + let index = this.tableData.indexOf(obj); + this.tableData.splice(index, 1); + } + this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + }) + .catch(() => {}); + }, + addcompiletb() { + this.titletb = "鏂板鑱旂郴鏂瑰紡"; + this.AddanumberVisible = true; + }, + compiletb(row) { + this.numberform = row; + this.titletb = "淇敼鑱旂郴鏂瑰紡"; + this.AddanumberVisible = true; + }, + defaulttb(row) { + this.$modal + .confirm("鏄惁纭璁剧疆璇ユ暟鎹」涓洪粯璁よ仈绯讳汉锛�") + .then(() => { + this.tableData.forEach((obj, index) => { + if (obj === row) { + obj.isdefault = 1; + this.numberform = obj; + this.archivecontact(); + } else if (obj.isdefault == 1) { + obj.isdefault = 0; + this.numberform = obj; + this.archivecontact(); + } else { + obj.isdefault = 0; + } + }); + this.$modal.msgSuccess("璁剧疆鎴愬姛"); + }) + .catch(() => {}); + }, + tableRowClassName({ row, rowIndex }) { + if (row.isdefault == "1") { + return "warning-row"; + } + return ""; + }, + // tab鍒囨崲 handleClick(tab, event) { - console.log(tab, event); + this.getList(tab.index); + }, + handleClickson(tab, event) { + console.log(tab.index, "son"); + + this.getList(tab.index); + }, + // 鑱旂郴鏂瑰紡鏂板 + Addanumber() {}, + // 鏍囩-------------------------- + /** 鏌ヨ鏍囩鍒楄〃 */ + gettabList() { + const tagqueryParams = { + pageNum: 1, + pageSize: 10000, + tagcategoryid: "0", + }; + listtag(tagqueryParams).then((response) => { + this.options = response.rows; + console.log(this.options, "鏍囩"); + }); + }, + remoteMethod(value) { + const illnessqueryParams = { + pageNum: 1, + pageSize: 100, + tagname: value, + tagcategoryid: "0", + }; + this.loading = true; + setTimeout(() => { + this.loading = false; + listtag(illnessqueryParams).then((response) => { + this.options = response.rows; + }); + }, 200); + }, + handleClose(tag) { + const lindex = this.dynamicTags.indexOf(tag); + this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); + this.userform.tagList[lindex].isoperation = 3; + }, + + showInput() { + this.inputVisible = true; + console.log("灞曠ず"); + }, + + handleInputConfirm() { + let tagvalue = {}; + let tagname = this.inputValue; + if (tagname) { + listtag({ + pageNum: 1, + pageSize: 1000, + tagcategoryid: "0", + tagname: tagname, + }).then((res) => { + if (res.rows[0]) { + tagvalue = res.rows[0]; + tagvalue.isoperation = 1; + } else { + tagvalue = { + tagname: tagname, + isoperation: 1, + }; + } + console.log(tagvalue); + this.userform.tagList.push(tagvalue); + this.dynamicTags.push(tagvalue); + console.log(this.userform.tagList); + console.log(this.dynamicTags); + }); + } + console.log("鍏充簡"); + this.inputVisible = false; + this.inputValue = ""; }, // 琛�鍘嬪浘琛ㄩ儴鍒� 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: "鍘嗗彶琛�鍘嬭褰�", @@ -475,17 +1109,14 @@ }, ], }; - console.log("ss"); // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� myxyChart.setOption(option); }, // 琛�绯栧浘琛� xtechartsInit() { // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 - // console.log(echarts); - console.log(this.xtechartdom); + var myxyChart = echarts.init(this.xtechartdom); - console.log(myxyChart); const data = [ ["2000-06-05", 116], ["2000-06-06", 129], @@ -517,80 +1148,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: { @@ -649,7 +1207,286 @@ }, ], }; - console.log("ss"); + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + myxyChart.setOption(option); + }, + // 浣撻噸鍥捐〃 + tzechartsInit() { + // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥 + + 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); + 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", + }, + ]), + }, + }, + ], + }; + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + 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", + }, + ]), + }, + }, + ], + }; + // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� + 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, + }, + ], + }; // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆� myxyChart.setOption(option); }, @@ -658,42 +1495,62 @@ </script> <style lang="scss" scoped> -.personage { - display: flex; - .text-center { - width: 40px; - height: 40px; - margin-right: 10px; - img { - width: 100%; +.personages { + height: 88px; + width: 100%; + background-color: #5e86f9; + border-radius: 5px; + padding: 20px; + margin-bottom: 10px; + line-height: 48px; + font-size: 25px; + font-weight: 600; + color: #ffffff; + .headportrait { + display: flex; + .text-center { + width: 55px; + height: 55px; + margin-right: 10px; + img { + width: 100%; + height: 100%; + border-radius: 50%; + } } - } - .information { - font-size: 25px; - .info-xx { - margin-top: 15px; - border-bottom: 2px solid rgb(65, 161, 190); - display: flex; - span { - margin-left: 30px; - } - .xinz-inf { - cursor: pointer; - margin-left: 20px; - height: 23px; - line-height: 23px; - padding: 2px; - align-items: center; - font-size: 16px; - color: rgb(85, 151, 250); - border: 1px solid #439fff; - border-radius: 9px; - } + .text-title { + font-size: 20px; + font-weight: 500; + color: #ecfcfc; } } } +.xinz-inf { + font-size: 18px; + // white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + 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-tabs--border-card { - font-size: 25px; + // font-size: 25px; .mulsz { font-size: 25px; margin-top: 20px; @@ -709,24 +1566,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); } } } @@ -737,13 +1588,23 @@ margin-bottom: 10px; border-left: 8px solid rgb(65, 161, 190); } + .headlines { + font-size: 25px; + display: flex; + width: 88%; + justify-content: space-between; + padding-left: 5px; + margin-bottom: 10px; + border-left: 8px solid rgb(65, 161, 190); + } .bottom-message { margin-bottom: 25px; margin-left: 100px; .Table-screen { - width: 70%; + width: 88%; padding: 30px; margin-bottom: 30px; + border-radius: 8px; background-color: #ddf0f8; font-size: 20px !important; } @@ -761,7 +1622,7 @@ .sontwoactiveName { margin: 0 auto; } -// .columcz { -// align-items: center!important; -// } +::v-deep.el-table .warning-row { + background: oldlace; +} </style> -- Gitblit v1.9.3