安装echarts5.4.0依赖，完整患者管理主页面及其个人信息及附属页面基础开发

heimawl

2023-06-07 61cb6f1f20185e88a35da6945776b0a3e7b235cf

安装echarts5.4.0依赖，完整患者管理主页面及其个人信息及附属页面基础开发

 package.json

@@ -42,7 +42,7 @@
    "core-js": "3.25.3",
    "cos-js-sdk-v5": "^1.4.18",
    "dayjs": "^1.11.7",
    "echarts": "5.4.0",
    "echarts": "^5.4.2",
    "element-ui": "2.15.12",
    "file-saver": "^2.0.5",
    "fuse.js": "6.4.3",

 src/assets/common/head.jpg

 src/components/Pagination/index.vue

@@ -18,6 +18,7 @@
</template>

<script>
// å¾…定
import { scrollTo } from '@/utils/scroll-to'

export default {

 src/components/RightToolbar/index.vue

@@ -65,7 +65,7 @@
  props: {
    showSearch: {
      type: Boolean,
      default: true,
      default: true, //required是否必须，为true渲染时会抛出typeError；default：默认值，
    },
    columns: {
      type: Array,

 src/directives/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
export const imgError = {
  // å½“被绑定的元素插入到DOM中
  inserted: function (el, { value }) {
    // ç›‘听img/src显示失败情况
    if (!el.src) {
      el.src = value
    } else {
      // èšç„¦
      el.onerror = function () {
        el.src = value
      }
    }
  },
  // æŒ‡ä»¤ç»‘定的元素更新时生效
  updated(el,{ value}) {
    if (!el.src) {
      el.src=value
    }
  },
}
export const aa = {}
export const bb = {}

 src/main.js

@@ -1,6 +1,7 @@
import Vue from 'vue'

import Cookies from 'js-cookie'
import * as echarts from "echarts";

import Element from 'element-ui'
import './assets/styles/element-variables.scss'
@@ -40,13 +41,15 @@
// ç»„件封装集成
import components from './components'
// æ³¨å†Œè¿‡æ»¤å™¨
// è‡ªå®šä¹‰æŒ‡ä»¤
import * as directives from './directives'
import * as filters from './filters'
for(let key in filters){
Vue.filter(key, filters[key])
}


// å…¨å±€æ–¹æ³•æŒ‚è½½

Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
@@ -56,7 +59,6 @@
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree

// å…¨å±€ç»„件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
@@ -66,6 +68,10 @@
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)


// å°è£…自定义指令
for(let key in directives)
Vue.directive(key, directives[key])
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)

 src/views/monitor/job/index.vue

@@ -293,6 +293,8 @@
<script>
import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
import Crontab from '@/components/Crontab'
import * as echarts from "echarts";


export default {
  components: { Crontab },

 src/views/patient/patient/authRole.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,117 @@
<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="登录账号" prop="userName">
            <el-input  v-model="form.userName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <h4 class="form-header h4">角色信息</h4>
    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
      <el-table-column label="角色编号" align="center" prop="roleId" />
      <el-table-column label="角色名称" align="center" prop="roleName" />
      <el-table-column label="权限字符" align="center" prop="roleKey" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";

export default {
  name: "AuthRole",
  data() {
    return {
       // é®ç½©å±‚
      loading: true,
      // åˆ†é¡µä¿¡æ¯
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // é€‰ä¸­è§’色编号
      roleIds:[],
      // è§’色信息
      roles: [],
      // ç”¨æˆ·ä¿¡æ¯
      form: {}
    };
  },
  created() {
    const userId = this.$route.params && this.$route.params.userId;
    if (userId) {
      this.loading = true;
      getAuthRole(userId).then((response) => {
        this.form = response.user;
        this.roles = response.roles;
        this.total = this.roles.length;
        this.$nextTick(() => {
          this.roles.forEach((row) => {
            if (row.flag) {
              this.$refs.table.toggleRowSelection(row);
            }
          });
        });
        this.loading = false;
      });
    }
  },
  methods: {
    /** å•å‡»é€‰ä¸­è¡Œæ•°æ® */
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.roleIds = selection.map((item) => item.roleId);
    },
    // ä¿å­˜é€‰ä¸­çš„数据编号
    getRowKey(row) {
      return row.roleId;
    },
    /** æäº¤æŒ‰é’® */
    submitForm() {
      const userId = this.form.userId;
      const roleIds = this.roleIds.join(",");
      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
        this.$modal.msgSuccess("授权成功");
        this.close();
      });
    },
    /** å…³é—­æŒ‰é’® */
    close() {
      const obj = { path: "/system/user" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>

 src/views/patient/patient/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,904 @@
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <!-- <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col> -->
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="98px"
        >
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入姓名"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="身份证号码" prop="IDnumber">
            <el-input
              v-model="queryParams.IDnumber"
              placeholder="请输入身份证号码"
              clearable
              style="width: 250px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="联系方式" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入联系方式"
              clearable
              style="width: 280px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-row>
            <el-form-item label="患者标签" prop="status">
              <el-cascader
                v-model="queryParams.status"
                :options="optionss"
                :props="propss"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-row>

          <!-- <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
          </el-form-item> -->
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="medium"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="medium"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:user:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="medium"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="19">
            <div class="documentf">
              <div class="document">
                <el-button
                  type="info"
                  plain
                  icon="el-icon-upload2"
                  size="medium"
                  @click="handleImport"
                  v-hasPermi="['system:user:import']"
                  >导入</el-button
                >
              </div>
              <div class="document">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="medium"
                  @click="handleExport"
                  v-hasPermi="['system:user:export']"
                  >导出</el-button
                >
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="1.5"> </el-col> -->
        </el-row>
        <!-- <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
          :columns="columns"
        ></right-toolbar> -->
        <el-table
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="序号"
            align="center"
            key="userId"
            prop="userId"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="姓名"
            align="center"
            key="userName"
            prop="userName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="性别"
            align="center"
            key="nickName"
            prop="nickName"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="患者标签"
            align="center"
            key="deptName"
            prop="dept.deptName"
            v-if="columns[3].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="证件类型"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          /><el-table-column
            label="证件号码"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
          <el-table-column
            label="年龄"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
          <!-- <el-table-column
            label="状态"
            align="center"
            key="status"
            v-if="columns[5].visible"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column> -->

          <el-table-column
            label="联系方式"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
          <el-table-column
            label="建档日期"
            align="center"
            prop="createTime"
            v-if="columns[6].visible"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="更新日期"
            align="center"
            prop="createTime"
            v-if="columns[6].visible"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                size="medium"
                type="text"
                icon="el-icon-edit"
                @click="$router.push('/patient/patient/profile/')"
                v-hasPermi="['system:user:edit']"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- æ·»åŠ æˆ–修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="nickName">
              <el-input
                v-model="form.nickName"
                placeholder="请输入姓名"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="deptId">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件类型" prop="phonenumber">
              <el-input
                v-model="form.phonenumber"
                placeholder="请选择证件类型"
                maxlength="11"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入证件号"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="本人手机号" prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="请输入手机号"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="亲属手机号" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入亲属手机号"
                type="password"
                maxlength="20"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="患者标签">
              <!-- <el-select v-model="form.sex" placeholder="请选择"> -->
              <el-cascader
                :options="optionss"
                :props="propss"
                clearable
              ></el-cascader>
              <!-- </el-select> -->
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select
                v-model="form.postIds"
                multiple
                placeholder="请选择岗位"
              >
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select
                v-model="form.roleIds"
                multiple
                placeholder="请选择角色"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">ç¡® å®š</el-button>
        <el-button @click="cancel">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>

    <!-- ç”¨æˆ·å¯¼å…¥å¯¹è¯æ¡† -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />
            æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
        <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { Treeselect },
  data() {
    return {
      // é®ç½©å±‚
      loading: true,
      // é€‰ä¸­æ•°ç»„
      ids: [],
      // éžå•ä¸ªç¦ç”¨
      single: true,
      // éžå¤šä¸ªç¦ç”¨
      multiple: true,
      // æ˜¾ç¤ºæœç´¢æ¡ä»¶
      showSearch: true,
      // æ€»æ¡æ•°
      total: 0,
      // ç”¨æˆ·è¡¨æ ¼æ•°æ®
      userList: null,
      // å¼¹å‡ºå±‚标题
      title: "",
      // éƒ¨é—¨æ ‘选项
      deptOptions: undefined,
      // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
      open: false,
      // éƒ¨é—¨åç§°
      deptName: undefined,
      // é»˜è®¤å¯†ç 
      initPassword: undefined,
      // æ—¥æœŸèŒƒå›´
      dateRange: [],
      // å²—位选项
      postOptions: [],
      // è§’色选项
      roleOptions: [],
      // è¡¨å•å‚æ•°
      form: {},
      propss: { multiple: true },
      optionss: [
        {
          value: 1,
          label: "东南",
        },
        {
          value: 2,
          label: "西北",
        },
        {
          value: 3,
          label: "仨仨仨",
        },
        {
          value: 4,
          label: "六飒飒飒",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      // ç”¨æˆ·å¯¼å…¥å‚æ•°
      upload: {
        // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（用户导入）
        open: false,
        // å¼¹å‡ºå±‚标题（用户导入）
        title: "",
        // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
        isUploading: false,
        // æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
        updateSupport: 0,
        // è®¾ç½®ä¸Šä¼ çš„请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // ä¸Šä¼ çš„地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      // æŸ¥è¯¢å‚æ•°
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        IDnumber: undefined,
      },
      // åˆ—信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
      // è¡¨å•æ ¡éªŒ
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 å’Œ 20 ä¹‹é—´",
            trigger: "blur",
          },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 å’Œ 20 ä¹‹é—´",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        IDnumber: [
          {
            pattern:
              /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    // æ ¹æ®åç§°ç­›é€‰éƒ¨é—¨æ ‘
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getDeptTree();
    this.getConfigKey("sys.user.initPassword").then((response) => {
      this.initPassword = response.msg;
    });
  },
  methods: {
    /** æŸ¥è¯¢ç”¨æˆ·åˆ—表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** æŸ¥è¯¢éƒ¨é—¨ä¸‹æ‹‰æ ‘结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // ç­›é€‰èŠ‚点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // èŠ‚点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    // ç”¨æˆ·çŠ¶æ€ä¿®æ”¹
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
        .then(function () {
          return changeUserStatus(row.userId, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    // å–消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // è¡¨å•é‡ç½®
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // æ›´å¤šæ“ä½œè§¦å‘
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    },
    /** æ–°å¢žæŒ‰é’®æ“ä½œ */
    handleAdd() {
      this.reset();
      getUser().then((response) => {
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.open = true;
        this.title = "新增患者";
        this.form.password = this.initPassword;
      });
    },
    /** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
    handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids;
      getUser(userId).then((response) => {
        this.form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.$set(this.form, "postIds", response.postIds);
        this.$set(this.form, "roleIds", response.roleIds);
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
      });
    },
    /** é‡ç½®å¯†ç æŒ‰é’®æ“ä½œ */
    handleResetPwd(row) {
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 å’Œ 20 ä¹‹é—´",
      })
        .then(({ value }) => {
          resetUserPwd(row.userId, value).then((response) => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        })
        .catch(() => {});
    },
    /** åˆ†é…è§’色操作 */
    handleAuthRole: function (row) {
      const userId = row.userId;
      this.$router.push("/system/user-auth/role/" + userId);
    },
    /** æäº¤æŒ‰é’® */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$modal
        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
        .then(function () {
          return delUser(userIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      this.download(
        "system/user/export",
        {
          ...this.queryParams,
        },
        `user_${new Date().getTime()}.xlsx`
      );
    },
    /** å¯¼å…¥æŒ‰é’®æ“ä½œ */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** ä¸‹è½½æ¨¡æ¿æ“ä½œ */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // æ–‡ä»¶ä¸Šä¼ ä¸­å¤„理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // æäº¤ä¸Šä¼ æ–‡ä»¶
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary.is-plain {
  color: #ffffff;
  background: #409eff;
  border-color: #4fabe9;
}
.document {
  width: 100px;
  height: 50px;
}
.documentf {
  display: flex;
  justify-content: flex-end;
}
</style>

 src/views/patient/patient/profile/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,767 @@
<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="text-center">
              <img v-imgError="require('@/assets/common/head.jpg')" 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>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <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> å¥åº·æ¡£æ¡ˆ</span
            >
            åŸºæœ¬ä¿¡æ¯
          </el-tab-pane>
          <el-tab-pane name="medical">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-management"></i> åŒ»ç–—档案</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-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-tab-pane name="serve">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-custom"></i> æœåŠ¡è®°å½•</span
            >

            å®šæ—¶ä»»åŠ¡è¡¥å¿</el-tab-pane
          >
        </el-tabs>
      </el-col>
    </el-row>
    <!-- å¥åº·æ¡£æ¡ˆæ¨¡å— -->
    <div class="information-content" v-if="activeName == 'health'">
      <div class="top-message">
        <div class="headline">基础信息</div>
        <div class="detailed">
          <div class="one-column">
            <div>患者姓名：<span class="spanvalue">王大美</span></div>
            <div>性别：<span class="spanvalue">男</span></div>

            <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>
        </div>
      </div>
      <div class="bottom-message">
        <div class="headline">号码维护</div>
        <div class="Table-screen">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phonenumber" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="concern" label="关系"> </el-table-column>
            <el-table-column prop="source" label="联系人来源">
            </el-table-column>
            <el-table-column prop="default" label="默认联系方式">
            </el-table-column>
            <el-table-column
              label-class-name="columcz"
              fixed="right"
              label="操作"
              width="300"
            >
              <template slot-scope="scope">
                <el-button type="success" size="small"
                  >设为默认联系方式</el-button
                >
                <el-button type="warning" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- åŒ»ç–—档案 -->
    <div class="medical-record" v-else-if="activeName == 'medical'">
      <!-- é—¨è¯Š -->
      <div v-if="sonactiveName == 'outpatient'">
        <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>
          <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>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- ä½é™¢ -->
      <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>
          <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>
          <el-table-column prop="result" 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>
          <el-table-column prop="result" label="检查项目"> </el-table-column>
          <el-table-column prop="administrative" label="医院名称">
          </el-table-column>
        </el-table>
      </div>
      <!-- ä½“检 -->
      <div v-if="sonactiveName == 'physical'">
        <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>
          <el-table-column prop="result" label="诊断结果"> </el-table-column>
          <el-table-column prop="administrative" 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>
          <el-table-column prop="result" label="诊断结果"> </el-table-column>
          <el-table-column prop="administrative" label="就诊科室">
          </el-table-column>
          <el-table-column prop="doctor" label="医生"> </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- æœåŠ¡è®°å½• -->
    <div class="medical-record" v-else-if="activeName == 'serve'">sdaad</div>
    <!-- å¥åº·ç›‘测 -->
    <div class="medical-record" v-show="activeName == 'monitor'">
      <!-- è¡€åŽ‹å›¾æ ‡ -->
      <div v-show="sontwoactiveName == 'blood'">
        <div
          id="xyeCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
        ></div>
      </div>
      <!-- è¡€ç³– -->
      <div v-show="sontwoactiveName == 'glucose'">
        <div
          id="xteCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
        ></div>
      </div>
      <!-- ä½“重 -->
      <div v-show="sontwoactiveName == 'weight'">
        <div
          id="tzeCharts"
          class="sontwoactiveName"
          style="width: 1300px; height: 800px"
        ></div>
      </div>
    </div>

    <!-- <div id="xyeCharts" style="width: 500px; height: 500px"></div> -->
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
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"; //获取列表接口待定

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      mznumber: 14,
      zynumber: 34,
      jynumber: 32,
      jcnumber: 12,
      tjnumber: 12,
      yynumber: 12,
      total: 0, // æ€»æ¡æ•°
      activeTab: "userinfo",
      activeName: "health", //一类导航
      sonactiveName: "outpatient", //健康监测导航
      sontwoactiveName: "blood", //医疗档案导航
      // æŸ¥è¯¢å‚æ•°
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobName: undefined,
        jobGroup: undefined,
        status: undefined,
      },
      echartdom: {},
      xtechartdom: {},
      tzechartdom: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 å¼„",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 å¼„",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 å¼„",
        },
      ],
      serviceData: [
        {
          daya: "2023-12-12",
          hospitalname: "协和",
          result: "韧带拉伤",
          administrative: "骨科",
          doctor: "吴大龙",
        },
      ],
    };
  },
  created() {
    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.echartsInit();
      this.xtechartsInit();
      this.tzechartsInit();
    });
    this.getList();
  },
  methods() {},

  methods: {
    // æŸ¥è¯¢åˆ—表
    getList() {
      this.loading = true;
      listJob(this.queryParams).then((response) => {
        this.jobList = 1;
        this.total = 1;
        this.loading = false;
      });
    },
    // getUser() {
    //   getUserProfile().then((response) => {
    //     this.user = response.data;
    //     this.roleGroup = response.roleGroup;
    //     this.postGroup = response.postGroup;
    //   });
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // è¡€åŽ‹å›¾è¡¨éƒ¨åˆ†
    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: "历史血压记录",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "收缩压",
            type: "line",
            data: [100, 120, 130, 121, 132, 142, 119],
            itemStyle: {
              normal: {
                color: "#ff7979",
              },
            },
            markPoint: {
              data: [{ type: "max", name: "舒张压高值" }],
            },
            markLine: {
              data: [{ yAxis: 140, name: "正常舒张压高值" }],
            },
          },
          {
            name: "舒张压",
            type: "line",
            data: [71, 79, 82, 85, 93, 82, 90],
            itemStyle: {
              normal: {
                color: "#409eff",
              },
            },
            markPoint: {
              data: [{ name: "周最低", type: "min" }],
            },
            markLine: {
              data: [{ yAxis: 80, name: "正常舒张压高值" }],
            },
          },
        ],
      };
      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],
        ["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,
          },
        ],
        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: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        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,
            lineStyle: {
              width: 3,
              type: "solid",
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FE7D2F",
                },
                {
                  offset: 1,
                  color: "#F9D423",
                },
              ]),
            },
          },
        ],
      };
      console.log("ss");
      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      myxyChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.personage {
  display: flex;
  .text-center {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    img {
      width: 100%;
    }
  }
  .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;
      }
    }
  }
}
.el-tabs--border-card {
  font-size: 25px;
  .mulsz {
    font-size: 25px;
    margin-top: 20px;
  }
}
.information-content {
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .top-message {
    margin-top: 25px;
    margin-left: 100px;
    .detailed {
      width: 70%;
      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;
        }
      }
    }
  }

  .headline {
    font-size: 25px;
    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%;
      padding: 30px;
      margin-bottom: 30px;
      background-color: #ddf0f8;
      font-size: 20px !important;
    }
  }
}
.medical-record {
  margin-top: 20px;
  margin: 20px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.sontwoactiveName {
  margin: 0 auto;
}
// .columcz {
//   align-items: center!important;
// }
</style>

 src/views/patient/patient/profile/resetPwd.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,68 @@
<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // è¡¨å•æ ¡éªŒ
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 åˆ° 20 ä¸ªå­—符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

 src/views/patient/patient/profile/userAvatar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,187 @@
<template>
  <div>
    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :outputType="options.outputType"
            @realTime="realTime"
            v-if="visible"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :sm="3" :xs="3">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              é€‰æ‹©
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
          <el-button type="primary" size="small" @click="uploadImg()">提 äº¤</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'

export default {
  components: { VueCropper },
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
      open: false,
      // æ˜¯å¦æ˜¾ç¤ºcropper
      visible: false,
      // å¼¹å‡ºå±‚标题
      title: "修改头像",
      options: {
        img: store.getters.avatar, //裁剪图片的地址
        autoCrop: true, // æ˜¯å¦é»˜è®¤ç”Ÿæˆæˆªå›¾æ¡†
        autoCropWidth: 200, // é»˜è®¤ç”Ÿæˆæˆªå›¾æ¡†å®½åº¦
        autoCropHeight: 200, // é»˜è®¤ç”Ÿæˆæˆªå›¾æ¡†é«˜åº¦
        fixedBox: true, // å›ºå®šæˆªå›¾æ¡†å¤§å° ä¸å…è®¸æ”¹å˜
        outputType:"png" // é»˜è®¤ç”Ÿæˆæˆªå›¾ä¸ºPNG格式
      },
      previews: {},
      resizeHandler: null
    };
  },
  methods: {
    // ç¼–辑头像
    editCropper() {
      this.open = true;
    },
    // æ‰“开弹出层结束时的回调
    modalOpened() {
      this.visible = true;
      if (!this.resizeHandler) {
        this.resizeHandler = debounce(() => {
          this.refresh()
        }, 100)
      }
      window.addEventListener("resize", this.resizeHandler)
    },
    // åˆ·æ–°ç»„件
    refresh() {
      this.$refs.cropper.refresh();
    },
    // è¦†ç›–默认的上传行为
    requestUpload() {
    },
    // å‘左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // å‘右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // å›¾ç‰‡ç¼©æ”¾
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // ä¸Šä¼ é¢„处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },
    // ä¸Šä¼ å›¾ç‰‡
    uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        formData.append("avatarfile", data);
        uploadAvatar(formData).then(response => {
          this.open = false;
          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
          store.commit('SET_AVATAR', this.options.img);
          this.$modal.msgSuccess("修改成功");
          this.visible = false;
        });
      });
    },
    // å®žæ—¶é¢„览
    realTime(data) {
      this.previews = data;
    },
    // å…³é—­çª—口
    closeDialog() {
      this.options.img = store.getters.avatar
      this.visible = false;
      window.removeEventListener("resize", this.resizeHandler)
    }
  }
};
</script>
<style scoped lang="scss">
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>

 src/views/patient/patient/profile/userInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickName">
      <el-input v-model="user.nickName" maxlength="30" />
    </el-form-item> 
    <el-form-item label="手机号码" prop="phonenumber">
      <el-input v-model="user.phonenumber" maxlength="11" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" maxlength="50" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserProfile } from "@/api/system/user";

export default {
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      // è¡¨å•æ ¡éªŒ
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>