Merge branch 'master' of http://81.70.217.145:3000/shentun/peisweb

2 years ago · ce3872ced6
8 changed files with 216 additions and 66 deletions
--- a/public/h5.html
+++ b/public/h5.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <!--显示头像-->
+    <div class="show-picture" id="picture_div" >
+        <video id="video" class="picture-video" width="360" height="360" autoplay></video>
+        <canvas id="canvas" class="picture-canvas" width="360" height="360"></canvas>
+        <img id="headSculpture">
+        <button type="button" class="layui-btn layui-btn-normal snap" id="snap">拍照</button>
+    </div>
+    <script language="JavaScript">
+        //开启摄像头
+        var MediaStreamTrack;
+        var isPhotograph=true;
+        function getMedia() {
+            let constraints = {
+                video: {width: 360, height: 360},
+                audio: false,
+            };
+            //获得video摄像头区域
+            let video = document.getElementById("video");
+            //这里介绍新的方法，返回一个 Promise对象
+            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
+            // then()是Promise对象里的方法
+            // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
+            // 避免数据没有获取到
+            let promise = navigator.mediaDevices.getUserMedia(constraints);
+            promise.then(function (MediaStream) {
+            MediaStreamTrack=typeof MediaStream.stop==='function'?MediaStream:MediaStream.getTracks()[1];
+            video.srcObject = MediaStream;
+                video.play();
+                isPhotograph = false
+            });
+        }
+        //拍照
+        function takePhoto() {
+            if(isPhotograph){
+                getMedia();
+                clearCanvas();
+                isPhotograph=false;
+            }else{
+                //获得Canvas对象
+                let video = document.getElementById("video");
+                let canvas = document.getElementById("canvas");
+                let ctx = canvas.getContext('2d');
+                ctx.drawImage(video, 0, 0,360, 360);
+                MediaStreamTrack && MediaStreamTrack.stop();
+                imgData = document.getElementById("canvas").toDataURL("image/jpeg");
+                isPhotograph=true;
+            }
+        }
+
+        document.getElementById("snap").addEventListener("click", takePhoto);
+        /**
+         * @description 重置canvas（清除照片）
+         * @version 1.0
+         * @returns
+         */
+        function clearCanvas() {
+            var c = document.getElementById("canvas");
+            var cxt = c.getContext("2d");
+            c.height = c.height;
+        }
+
+    </script>
+</body>
+</html>
--- a/src/components/patientRegister/Camera.vue
+++ b/src/components/patientRegister/Camera.vue
@ -1,47 +1,32 @@
 <template>
  <div>
-    <el-button @click="handleOpen">照相机拍照</el-button>
-    <div class="public-mask mask-grey-bg" v-show="cameraOpen">
-      <div class="mask-main camera-main">
-        <div class="mask-title">
-          <img src="../assets/images/icon_camera.png" class="title-icon" />
-          <span>照相机拍照</span>
-          <img src="../assets/images/icon_close.png" class="title-close" @click="closeCameraMask" />
-        </div>
-        <div class="camera-box">
+    <el-button type="primary" icon="el-icon-camera" @click="handleOpen">打开摄像头</el-button>
+    <el-button type="danger" icon="el-icon-camera" @click="closeCameraMask">关闭摄像头</el-button> 
+    <el-button type="success" icon="el-icon-camera" @click="drawImage">拍照</el-button>
+    <el-button type="primary" icon="el-icon-check" @click="uploadPicture">保存</el-button>  
+
+    <div style="margin-top: 10px; display: flex;" v-show="cameraOpen">
          <div class="camera-left">
            <!-- 这里就是摄像头显示的画面 -->
-            <video id="videoCamera" width="100%" height="100%"></video>
+            <video id="videoCamera" :width='videoWidth' :height='videoHeight'></video>
          </div>
-          <div class="camera-right">
-
-            <div class="camera-img-box">
-              <div class="small-img">
-                <!-- 这里是点击拍照显示的图片画面 -->
-                <img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 150px;" />
-                <canvas id="canvasCamera" class="canvas" :width='videoWidth' :height='videoHeight'
-                  style="display: none;"></canvas>
-              </div>
-              <div>
-                <!-- 点击拍照和保存按钮 -->
-                <el-button type="primary" class="save-camera-btn" icon="el-icon-camera" @click="drawImage"
-                  style="margin-top: 10px;">拍照</el-button>
-                <el-button type="primary" class="save-camera-btn" icon="el-icon-check"
-                  @click="uploadPicture">保存</el-button>
-              </div>
-            </div>

+          <div style="margin-left: 10px;" >     
+            <!-- 这里是点击拍照显示的图片画面 -->
+            <img v-if="imgSrc" :src="imgSrc" :style="'width:'+ videoWidth + ';height: '+ videoHeight" />
+            <canvas id="canvasCamera" class="canvas" :width='videoWidth' :height='videoHeight'
+              style="display: none;"></canvas> 
          </div>
-
-        </div>
-      </div>
    </div>

  </div>
 </template>
 <script>
+import { mapState } from 'vuex';
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
 export default {
  name: "Index",
+  props:['id','patientId'],
  data() {
  	return {
  	  /** 照相机弹窗模块-start */
@ -51,18 +36,29 @@ export default {
      thisVideo: null,
      thisContext: null,
      thisCancas: null,
-      videoWidth: 800,
-      videoHeight: 600,
+      videoWidth: 150,
+      videoHeight: 180,
      /** 照相机弹窗模块-end */
  	}
  },
+
+  mounted(){
+    this.handleOpen()
+  },
+
+  computed: {
+    ...mapState(['patientRegister']),
+  },
  methods: {
  /** 调用摄像头拍照-start*/
  	// 打开照相机弹窗
  	handleOpen() {
-  	  this.cameraOpen = true;
-      this.getCompetence();
+  	  if(!this.cameraOpen && this.patientRegister.cameraVisble){
+        this.cameraOpen = true
+        this.getCompetence()
+      }      
  	},
+
    // 调用摄像头权限
    getCompetence() {
      //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
@ -72,6 +68,8 @@ export default {
        this.thisCancas = document.getElementById('canvasCamera');//这里是需要截取的canvas的Id名称
        this.thisContext = this.thisCancas.getContext('2d');
        this.thisVideo = document.getElementById('videoCamera');
+
+        console.log('navigator',navigator)
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
          navigator.menavigatordiaDevices = {}
@ -86,7 +84,7 @@ export default {
            // 有些浏览器不支持，会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
-              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
+              return Promise.reject(new Error('当前浏览器，不支持调取摄像头功能！'))
            }
            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
@ -118,6 +116,7 @@ export default {
        });
      });
    },
+    
    //绘制图片
    drawImage() {
      // 点击，canvas画图
@ -128,7 +127,23 @@ export default {
    // 上传照相机图片
    uploadPicture() {
      // 这里就调用上传图片接口即可
-      
+      let body = {
+        patientId:this.patientId,
+        photo:this.imgSrc
+      }
+      console.log('imgSrc',this.imgSrc,)
+      this.patientRegister.photo = this.imgSrc
+       //id不为空则编辑 
+       putapi(`/api/app/patient-register?PatientRegisterId=${this.id}`, body)
+        .then(
+          (res) => {
+            if(res.code == 1){
+              this.$message.success("更新 操作成功");
+              this.closeCameraMask()
+
+            }
+          }
+        );         
    },
    //清空画布
    clearCanvas(id) {
@ -148,23 +163,30 @@ export default {
        this.os = true;//切换成打开摄像头
      }
    },
+
    // 关闭照相机弹窗
    closeCameraMask() {
      this.cameraOpen = false; // 关闭照相机弹窗
+
      this.resetCanvas(); // 重置画布
      this.stopNavigator(); // 关闭摄像头
      //this.getDetailList(); // 重新获取一下List，此方法不再书写
+      this.patientRegister.cameraVisble = false
    },
    /** 调用摄像头拍照-end*/
  },
+   //监听事件
+   watch: {
+    //新增触发
+    'patientRegister.cameraVisble'(newVal, oldVal) {
+      //console.log('patientRegister.addTimes newVal：',newVal,' oldVal：',oldVal)
+      if (newVal != oldVal) {
+        this.handleOpen()
+      }
+    },
+  },
 }

 </script>
 <style scoped>
-.box {
-  display: flex;
-}
-
-.listBtn {
-  margin-top: 10px;
-}</style>
+</style>
--- a/src/components/patientRegister/PatientRegisterEdit.vue
+++ b/src/components/patientRegister/PatientRegisterEdit.vue
@ -251,7 +251,7 @@
        </el-row>
      </el-form>

-      <el-image class="photo" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
+      <el-image class="photo" :src="form.photo" style="width:150;height:200" >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
@ -267,7 +267,7 @@
        <el-button type="success" @click="Onsubmit('form')">保存</el-button>
      </div>
      <div class="btn">
-        <el-button type="primary" @click="">拍照</el-button>
+        <el-button type="primary" @click="openCamera" icon="el-icon-camera">拍照</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">申请单</el-button>
@ -288,6 +288,9 @@
      <el-table :data="patientList" border width="800" height="480" row-key="id" size="small"
        class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowick" ref="patientList">
        <el-table-column type="index" width="30"/>
+        <el-table-column prop="patientNo" label="档案号" />
+        <el-table-column label="末次体检" />
+        <el-table-column prop="medicalTimes" label="体检次数" />
        <el-table-column prop="displayName" label="姓名" />
        <el-table-column prop="sexId" label="性别">
          <template slot-scope="scope">
@ -312,14 +315,16 @@
        <el-table-column prop="idNo" label="身份证号" />
        <el-table-column prop="telephone" label="电话" />
        <el-table-column prop="mobileTelephone" label="手机号" />
-        <el-table-column label="末次体检" />
-        <el-table-column label="体检次数" />        
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="choosePatient">确 定</el-button>
      </span>
    </el-dialog>
+    <!-- 拍照 -->
+    <el-dialog title="拍照" :visible.sync="patientRegister.cameraVisble" width="400" height="800" :show-close="false" :append-to-body="true">
+      <Camera :id="form.id" :patientId="form.patientId"/>
+    </el-dialog>
  </div>
 </template>
 <script>
@ -328,10 +333,10 @@ import moment from 'moment';
 import { mapState } from 'vuex'
 import { getapi, postapi, putapi, deletapi } from "@/api/api";
 import { objCopy,setNull,dddw } from '../../utlis/proFunc'
-
+import Camera from '../../components/patientRegister/Camera.vue'
 export default {
  components: {
-
+    Camera,
  },
  data() {
    return {
@ -354,7 +359,7 @@ export default {
        personnelTypeId: null,  //人员类别
        jobPost: '', //职务
        jobTitle: '', //职称
-        photo: '', //照片
+        photo: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', //照片
        salesman: '', //介绍人
        sexHormoneTermId: null, //性激素期限
        isNameHide: 'N', //隐藏姓名
@ -400,6 +405,8 @@ export default {
      dialogVisible:false,
      patientList:[],//人员列表（用于判断人员多次体检）
      patientChoosed:{}, //查重选中的人员
+
+      dialogCamera:false, //拍照组件
    };
  },

@ -464,8 +471,8 @@ export default {
      this.form.idNo = this.patientChoosed.idNo
      this.form.telephone = this.patientChoosed.telephone
      this.form.mobileTelephone = this.patientChoosed.mobileTelephone
-      //this.form.patientNo = this.patientChoosed.patientNo
-      //this.form.medicalTimes = this.patientChoosed.medicalTimes + 1
+      this.form.patientNo = this.patientChoosed.patientNo
+      this.form.medicalTimes = this.patientChoosed.medicalTimes + 1
    },

    ldddw(arrayData, key, value, display) {
@ -503,14 +510,16 @@ export default {
          console.log('body',body)
          if (this.form.id.length < 1) {
            //id为空则新增
-            postapi(`/api/app/patient-register`, body)
+            postapi(`/api/app/patient-register/return-info`, body)
            .then(
              (res) => {                
                if(res.code == 1){
                  //console.log('res',res)
                  this.$message.success("创健 操作成功");
                  objCopy(res.data,this.form)              
+                  this.patientRegister.patientRegisterId = res.data.id                  
                  this.patientRegister.patientRegisterId = res.data.id
+
                  this.patientRegister.patientRegisterRd = res.data
                  this.patientRegister.query.times++

@ -531,8 +540,10 @@ export default {
            //id不为空则编辑 
            putapi(`/api/app/patient-register?PatientRegisterId=${this.form.id}`, body).then(
              (res) => {
-                this.$message.success("更新 操作成功");
-                this.patientRegister.query.times++
+                if(res.code == 1){
+                  this.$message.success("更新 操作成功");
+                  this.patientRegister.query.times++
+                }
              }
            );
          }
@ -558,9 +569,20 @@ export default {
          this.getCustomerOrgTree()
        }
      );
-    }
+    },
+
+    //拍照
+    openCamera(){
+      if(!this.form.id){
+        alert("请先保存人员信息")
+        return
+      }
+      this.patientRegister.cameraVisble = true      
+    },
+
  },

+ 
  //监听事件
  watch: {
    //新增触发
@ -577,10 +599,19 @@ export default {
    'patientRegister.patientRegisterRd.id'(newVal, oldVal) {
      //console.log('patientRegister.patientRegisterRd.id newVal：',newVal,' oldVal：',oldVal)
      if (newVal != oldVal) { 
-        //console.log('newVal：',newVal)       
+        //console.log('newVal：',this.patientRegister.patientRegisterRd)       
        objCopy(this.patientRegister.patientRegisterRd, this.form)
      }
    },
+
+    //拍照触发
+    'patientRegister.photo'(newVal, oldVal) {
+      //console.log('patientRegister.patientRegisterRd.id newVal：',newVal,' oldVal：',oldVal)
+      if (newVal != oldVal) { 
+        //console.log('newVal：',newVal)       
+        this.form.photo = newVal
+      }
+    },
  },
 };
 </script>
--- a/src/components/patientRegister/PatientRegisterList.vue
+++ b/src/components/patientRegister/PatientRegisterList.vue
@ -2,7 +2,11 @@
  <div>
    <div style="display: flex">
      <el-table :data="dataList" border width="100%" height="480" row-key="id" size="small"
-        class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowick" ref="dataList">
+        class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowick" ref="dataList"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="40"/>
        <el-table-column prop="completeFlag" label="体检进度">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.completeFlag, 'id', scope.row.completeFlag, 'displayName') }}</div>
@ -137,7 +141,7 @@
          <el-button type="danger" @click="del">删除</el-button>
        </div>
        <div class="listBtn">
-          <el-button type="primary" @click="">拍照</el-button>
+          <el-button type="primary" @click="" icon="el-icon-camera">拍照</el-button>
        </div>
        <div class="listBtn">
          <el-button type="primary" @click="">健康档案</el-button>
@ -175,6 +179,7 @@ export default {
  data() {
    return {
      dataList: [],//列表数据
+      multipleSelection:[], //选中的数据列表
      dialogVisible: false,
      dialogCamera: false,
    };
@ -190,10 +195,16 @@ export default {
    ...mapState(['dict', 'patientRegister', 'customerOrg']),
  },
  methods: {
+
+    handleSelectionChange(val){
+      this.multipleSelection = val;
+      //console.log('this.multipleSelection',this.multipleSelection)
+    },
    //点击体检次数行
    rowick(row) {
      this.patientRegister.patientRegisterId = row.id
      this.patientRegister.patientRegisterRd = row
+      //console.log('row',row)
    },

    //体检次数 相关操作
--- a/src/router/index.js
+++ b/src/router/index.js
@ -208,6 +208,11 @@ const routes = [
        name: '体检人员登记', 
        component: () => import('../views/customerOrg/patientRegister.vue')
      },
+      {
+        path: '/Camera',  
+        name: '体检人员登记', 
+        component: () => import('../components/patientRegister/Camera.vue')
+      },
      {
        path: '/patientRegisterSign',  
        name: '体检人员签到', 
--- a/src/store/index.js
+++ b/src/store/index.js
@ -34,6 +34,8 @@ export default new Vuex.Store({
      patientRegisterId:'', //当前单位ID（可根据此值是否为空，判断是新增还是编辑）   
      patientRegisterRd:{}, //体检人员记录
      addTimes:0, //用于触发新增时初始化赋值
+      photo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', //单独抽出，拍照时会更新
+      cameraVisble:false,  //拍照控件显示
      patientRegisterRdInit: {
        id: '', //id
        patientId: '00000000-0000-0000-0000-000000000000', //档案号ID 选择了档案就传档案号，未选就传00000-0000...
@ -81,7 +83,7 @@ export default new Vuex.Store({
      customerOrgGroup:[], //分组（针对单位）
    },

-    //公共字典数据 add by pengjun
+    //公共字典数据 add by pengjun    
    dict:{
      personOrgId:'00000000-0000-0000-0000-000000000000',  //个人体检单位ID
      organization:[],  //体检中心
--- a/src/utlis/proFunc.js
+++ b/src/utlis/proFunc.js
@ -12,11 +12,14 @@ exports.tcdate = (date) => {

 //json 对像赋值 只从 from 对象 赋值 to 中有的 key 项 add by pengjun
 exports.objCopy = (from,to) => {
-  for(let key in to){    
-    if(from[key] !== undefined){
-      to[key] = from[key]
-    }    
-  }
+  if(from && to){
+    let keys = Object.keys(to)
+    for(let key in keys){    
+      if(from[keys[key]] !== undefined){
+        to[keys[key]] = from[keys[key]]
+      }    
+    }
+  }  
 }

 //类似PB中的dddw的功能 add by pengjun
@ -38,7 +41,7 @@ exports.dddw = (arrayData,key,value,display) => {
 exports.setNull = (obj,arrayCols) => {
  if(arrayCols){
    for(let i=0;i<arrayCols.length;i++){
-      if(!obj[arrayCols[i]] || obj[arrayCols[i]] < 1){
+      if(!obj[arrayCols[i]] || obj[arrayCols[i]].length < 1){
        obj[arrayCols[i]] = null
      }        
    }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -198,6 +198,9 @@
              <el-menu-item index="patientRegister">
                <i class="el-icon-menu"></i> <span slot="title">体检人员登记</span>
              </el-menu-item>
+              <el-menu-item index="Camera">
+                <i class="el-icon-menu"></i> <span slot="title">拍照测试</span>
+              </el-menu-item>
              <el-menu-item index="patientRegisterSign">
                <i class="el-icon-menu"></i> <span slot="title">体检人员签到</span>
              </el-menu-item>