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">&nbsp;&nbsp;</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