sunkuosheng пре 4 дана
родитељ
комит
25e2ec114c
3 измењених фајлова са 435 додато и 159 уклоњено
  1. 1 0
      ruoyi-ui-gljt/package.json
  2. 9 0
      ruoyi-ui-gljt/src/utils/index.js
  3. 425 159
      ruoyi-ui-gljt/src/views/gljt/gljtSq/index.vue

+ 1 - 0
ruoyi-ui-gljt/package.json

@@ -57,6 +57,7 @@
         "less": "^4.1.3",
         "less-loader": "^7.3.0",
         "moment": "^2.29.3",
+        "mqtt": "^4.3.8",
         "nprogress": "0.2.0",
         "print-js": "^1.6.0",
         "qrcodejs2": "^0.0.2",

+ 9 - 0
ruoyi-ui-gljt/src/utils/index.js

@@ -388,3 +388,12 @@ export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
 
+// 随机生成uuid - 引入时间戳 (36位字符串)
+export function getUuid() {
+  let d = new Date().getTime();
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    let r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}

+ 425 - 159
ruoyi-ui-gljt/src/views/gljt/gljtSq/index.vue

@@ -105,7 +105,7 @@
           </el-table-column>
           <el-table-column label="申请时间" align="center" prop="sqsj" width="150">
             <template slot-scope="scope">
-            {{ special(scope.row.sqsj,'time') }}
+              {{ special(scope.row.sqsj,'time') }}
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="330">
@@ -148,12 +148,12 @@
                          v-hasPermi="['gljt:gljtSq:edit']">打印
               </el-button>
               <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              v-show="scope.row.status=='4'&&scope.row.state!='99'"
-              @click="handleDelete(scope.row,'end')"
-              v-hasPermi="['gljt:gljtSq:editSq']"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                v-show="scope.row.status=='4'&&scope.row.state!='99'"
+                @click="handleDelete(scope.row,'end')"
+                v-hasPermi="['gljt:gljtSq:editSq']"
               >删除
               </el-button>
             </template>
@@ -170,7 +170,7 @@
       </el-col>
     </el-row>
     <!-- 添加或修改高龄津贴申请信息对话框 -->
-    <el-dialog v-dialog-drag :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog v-dialog-drag :title="title" :visible.sync="open" width="1000px" append-to-body @close="endTime">
       <el-scrollbar wrapClass="scrollbar-wrap">
         <el-form ref="form" :model="form" :rules="rules" label-width="98px">
           <sqXq v-if="status=='2'||status=='1'" :form="formXq"></sqXq>
@@ -181,15 +181,18 @@
                 <div class="flexCount">
                   <el-form-item prop="sqrZjzm" label-width="0" class="uploadStyle">
                     <!--<el-input v-model="form.sqrZjzm" placeholder="请输入申请人证件照正面"/>-->
-                    <image-upload-gljt :opt="{cardNo:this.cardNo,hkbName:hkbName}" :isShowTip="false" v-model="form.sqrZjzm" :accessToken="accessToken"
-                                  @getCard="getCard" @clear="clear"
-                                  :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
+                    <image-upload-gljt :opt="{cardNo:this.cardNo,hkbName:hkbName}" :isShowTip="false"
+                                       v-model="form.sqrZjzm" :accessToken="accessToken"
+                                       @getCard="getCard" @clear="clear"
+                                       :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
                     <span>证件人像面</span>
+
                   </el-form-item>
                 </div>
                 <div class="flexCount">
                   <el-form-item label="" label-width="0" prop="hkbzm" class="uploadStyleFx">
-                    <image-upload-gljt v-model="form.hkbzm" :limit="1" :isShowTip="false" :isOcr="true" ocrType="homepage" :accessToken="accessToken"></image-upload-gljt>
+                    <image-upload-gljt v-model="form.hkbzm" :limit="1" :isShowTip="false" :isOcr="true"
+                                       ocrType="homepage" :accessToken="accessToken"></image-upload-gljt>
                     <span>户口首页</span>
                   </el-form-item>
                 </div>
@@ -197,15 +200,18 @@
               <div style="flex: 1;display: flex;flex-direction: column">
                 <div class="flexCount">
                   <el-form-item label="" label-width="0" prop="sqrZjbm" class="uploadStyle">
-                    <image-upload-gljt :isShowTip="false" v-model="form.sqrZjbm" :accessToken="accessToken" @getCard="getBack" :limit="1"
-                                  :isOcr="true"
-                                  ocrType="back"></image-upload-gljt>
-                      <span>证件国徽面</span>
+                    <image-upload-gljt :isShowTip="false" v-model="form.sqrZjbm" :accessToken="accessToken"
+                                       @getCard="getBack" :limit="1"
+                                       :isOcr="true"
+                                       ocrType="back"></image-upload-gljt>
+                    <span>证件国徽面</span>
                   </el-form-item>
                 </div>
                 <div class="flexCount">
                   <el-form-item label="" label-width="0" prop="hkbbm" class="uploadStyleFx">
-                    <image-upload-gljt :opt="form" :isShowTip="false"  v-model="form.hkbbm" :limit="1" :accessToken="accessToken" @getCard="getSubpage"  :isOcr="isOcrHkb" ocrType="subpage" @clear="clearHkb" ></image-upload-gljt>
+                    <image-upload-gljt :opt="form" :isShowTip="false" v-model="form.hkbbm" :limit="1"
+                                       :accessToken="accessToken" @getCard="getSubpage" :isOcr="isOcrHkb"
+                                       ocrType="subpage" @clear="clearHkb"></image-upload-gljt>
                     <span>户口本人页</span>
                   </el-form-item>
                 </div>
@@ -215,7 +221,7 @@
                   <image-upload-gljt :isShowTip="false" :limit="1" v-model="form.tx"/>
                   <span>
                     老人照片
-                  </span>
+                  </span>  <i class="el-icon-upload" @click="QRSFZ('tx')"></i>
                 </el-form-item>
               </div>
             </div>
@@ -272,7 +278,8 @@
               <div style="flex: 1;display:flex;">
                 <!--<div class="labelStyle">银行卡正面照</div>-->
                 <el-form-item label="银行卡正面照" style="display: flex" label-width="98" prop="yhzjz" class="uploadStyle">
-                  <image-upload-gljt :isShowTip="false" v-model="form.yhzjz" :accessToken="accessToken" :limit="1"  :isOcr="true" ocrType="bankcard" @getCard="getCardYhk"></image-upload-gljt>
+                  <image-upload-gljt :isShowTip="false" v-model="form.yhzjz" :accessToken="accessToken" :limit="1"
+                                     :isOcr="true" ocrType="bankcard" @getCard="getCardYhk"></image-upload-gljt>
                 </el-form-item>
               </div>
               <div style="flex: 2" class="grid2">
@@ -297,13 +304,15 @@
             <div style="display: flex">
               <div style="flex: 1;display:flex;flex-direction: column">
                 <el-form-item label="证件人像面" style="display: flex" prop="jhrZjzm" label-width="98" class="uploadStyle">
-                  <image-upload-gljt  :isShowTip="false" v-model="form.jhrZjzm" :accessToken="accessToken" @getCard="getCardJh"
-                                @clear="clearJh"
-                                :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
+                  <image-upload-gljt :isShowTip="false" v-model="form.jhrZjzm" :accessToken="accessToken"
+                                     @getCard="getCardJh"
+                                     @clear="clearJh"
+                                     :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
                 </el-form-item>
                 <el-form-item label="证件国徽面" style="display: flex" prop="jhrZjbm" label-width="98" class="uploadStyle">
-                  <image-upload-gljt :isShowTip="false" v-model="form.jhrZjbm" :limit="1" ocrType="back" :accessToken="accessToken"
-                                :isOcr="true"></image-upload-gljt>
+                  <image-upload-gljt :isShowTip="false" v-model="form.jhrZjbm" :limit="1" ocrType="back"
+                                     :accessToken="accessToken"
+                                     :isOcr="true"></image-upload-gljt>
                 </el-form-item>
               </div>
               <div style="flex: 2" class="grid2">
@@ -332,13 +341,17 @@
             <h3>代办人信息</h3>
             <div style="display: flex">
               <div style="flex: 1;display:flex;flex-direction: column">
-                <el-form-item label="证件人像面" label-width="98" class="uploadStyle" style="display: flex" prop="dbrZjzm" :rules="form.gx ? itemRules.dbrZjzm : []">
-                  <image-upload-gljt :isShowTip="false" v-model="form.dbrZjzm" :accessToken="accessToken" @getCard="getCard2" @clear="clear2"
-                                :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
+                <el-form-item label="证件人像面" label-width="98" class="uploadStyle" style="display: flex" prop="dbrZjzm"
+                              :rules="form.gx ? itemRules.dbrZjzm : []">
+                  <image-upload-gljt :isShowTip="false" v-model="form.dbrZjzm" :accessToken="accessToken"
+                                     @getCard="getCard2" @clear="clear2"
+                                     :limit="1" :isOcr="true" ocrType="front"></image-upload-gljt>
                 </el-form-item>
-                <el-form-item label="证件国徽面" label-width="98" class="uploadStyle" style="display: flex" prop="dbrZjbm" :rules="form.gx ? itemRules.dbrZjbm : []">
-                  <image-upload-gljt :isShowTip="false" v-model="form.dbrZjbm" :accessToken="accessToken" :limit="1" :isOcr="true"
-                                ocrType="back"></image-upload-gljt>
+                <el-form-item label="证件国徽面" label-width="98" class="uploadStyle" style="display: flex" prop="dbrZjbm"
+                              :rules="form.gx ? itemRules.dbrZjbm : []">
+                  <image-upload-gljt :isShowTip="false" v-model="form.dbrZjbm" :accessToken="accessToken" :limit="1"
+                                     :isOcr="true"
+                                     ocrType="back"></image-upload-gljt>
                 </el-form-item>
               </div>
 
@@ -360,31 +373,32 @@
                     </el-option>
                   </el-select>
                 </el-form-item>
-                <el-form-item label="居住地址" prop="dbrJzdz" style="grid-column: 1 / span 2;"  :rules="form.gx ? itemRules.dbrJzdz : []">
+                <el-form-item label="居住地址" prop="dbrJzdz" style="grid-column: 1 / span 2;"
+                              :rules="form.gx ? itemRules.dbrJzdz : []">
                   <el-input v-model="form.dbrJzdz" maxlength="200" placeholder="请输入代办人居住地址"/>
                 </el-form-item>
               </div>
 
             </div>
             <h3>低保信息</h3>
-             <div style="display:flex;">
-               <div style="flex: 1;display:flex;flex-direction: column">
-                 <el-form-item label="是否低保" prop="isdb">
-                   <el-radio-group v-model="form.isdb" @change="changeDb">
-                     <el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}
-                     </el-radio>
-                   </el-radio-group>
-                 </el-form-item>
-                 <el-form-item label="低保证号" prop="dbzh" v-if="form.isdb=='1'">
-                   <el-input v-model="form.dbzh" placeholder="请输入低保证号"/>
-                 </el-form-item>
-               </div>
-               <div style="flex: 2">
-                 <el-form-item label="低保证明" prop="dbzm" v-if="form.isdb=='1'" class="uploadStyle">
-                   <image-upload-gljt :isShowTip="false" :limit="1" v-model="form.dbzm"/>
-                 </el-form-item>
-               </div>
-             </div>
+            <div style="display:flex;">
+              <div style="flex: 1;display:flex;flex-direction: column">
+                <el-form-item label="是否低保" prop="isdb">
+                  <el-radio-group v-model="form.isdb" @change="changeDb">
+                    <el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="低保证号" prop="dbzh" v-if="form.isdb=='1'">
+                  <el-input v-model="form.dbzh" placeholder="请输入低保证号"/>
+                </el-form-item>
+              </div>
+              <div style="flex: 2">
+                <el-form-item label="低保证明" prop="dbzm" v-if="form.isdb=='1'" class="uploadStyle">
+                  <image-upload-gljt :isShowTip="false" :limit="1" v-model="form.dbzm"/>
+                </el-form-item>
+              </div>
+            </div>
             <h3>其他信息</h3>
             <div>
               <el-form-item label="其他材料">
@@ -415,40 +429,40 @@
                 <el-input disabled v-model="form.sqbfje" placeholder="请输入补发金额"/>
               </el-form-item>
             </div>
-              <!--<tr>-->
-              <!--<td>-->
-              <!--<el-form-item label="是否重残" prop="iszc">-->
-              <!--<el-radio-group v-model="form.iszc">-->
-              <!--<el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}-->
-              <!--</el-radio>-->
-              <!--</el-radio-group>-->
-              <!--</el-form-item>-->
-              <!--</td>-->
-              <!--<td>-->
-              <!--<el-form-item label="重残证明" prop="dbzm" v-if="form.iszc=='1'">-->
-              <!--<image-upload-gljt :limit="1" v-model="form.zczm"/>-->
-              <!--</el-form-item>-->
-              <!--</td>-->
-              <!--<td>-->
-              <!--</td>-->
-              <!--</tr>-->
-              <!--<tr>-->
-              <!--<td>-->
-              <!--<el-form-item label="是否特困" prop="istk">-->
-              <!--<el-radio-group v-model="form.istk">-->
-              <!--<el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}-->
-              <!--</el-radio>-->
-              <!--</el-radio-group>-->
-              <!--</el-form-item>-->
-              <!--</td>-->
-              <!--<td>-->
-              <!--<el-form-item label="特困证明" prop="tkzm" v-if="form.istk=='1'">-->
-              <!--<image-upload-gljt :limit="1" v-model="form.tkzm"/>-->
-              <!--</el-form-item>-->
-              <!--</td>-->
-              <!--<td>-->
-              <!--</td>-->
-              <!--</tr>-->
+            <!--<tr>-->
+            <!--<td>-->
+            <!--<el-form-item label="是否重残" prop="iszc">-->
+            <!--<el-radio-group v-model="form.iszc">-->
+            <!--<el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}-->
+            <!--</el-radio>-->
+            <!--</el-radio-group>-->
+            <!--</el-form-item>-->
+            <!--</td>-->
+            <!--<td>-->
+            <!--<el-form-item label="重残证明" prop="dbzm" v-if="form.iszc=='1'">-->
+            <!--<image-upload-gljt :limit="1" v-model="form.zczm"/>-->
+            <!--</el-form-item>-->
+            <!--</td>-->
+            <!--<td>-->
+            <!--</td>-->
+            <!--</tr>-->
+            <!--<tr>-->
+            <!--<td>-->
+            <!--<el-form-item label="是否特困" prop="istk">-->
+            <!--<el-radio-group v-model="form.istk">-->
+            <!--<el-radio v-for="dict in dict.type.CZ035" :key="dict.value" :label="dict.value">{{ dict.label }}-->
+            <!--</el-radio>-->
+            <!--</el-radio-group>-->
+            <!--</el-form-item>-->
+            <!--</td>-->
+            <!--<td>-->
+            <!--<el-form-item label="特困证明" prop="tkzm" v-if="form.istk=='1'">-->
+            <!--<image-upload-gljt :limit="1" v-model="form.tkzm"/>-->
+            <!--</el-form-item>-->
+            <!--</td>-->
+            <!--<td>-->
+            <!--</td>-->
+            <!--</tr>-->
             <div>
               <h3 style="margin-top: 20px">社区(村)审核</h3>
               <table class="tableStyle">
@@ -545,7 +559,9 @@
         </el-form>
       </el-scrollbar>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" v-hasPermi="['gljt:gljtSq:editSq']"  @click="submitFormZc(true)" :loading="submitFormLoading">暂 存</el-button>
+        <el-button type="primary" v-hasPermi="['gljt:gljtSq:editSq']" @click="submitFormZc(true)"
+                   :loading="submitFormLoading">暂 存
+        </el-button>
 
         <el-button type="success" @click="submitForm" :loading="submitFormLoading">提 交</el-button>
         <el-button
@@ -577,6 +593,18 @@
         <el-button @click="cancel2">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog v-dialog-drag :title="titleRwm" :visible.sync="openRwm" width="400px" append-to-body @close="clearTime">
+      <div style="display: flex;flex-direction: column;text-align: center">
+        <span style="color: red;font-size: 20px;">{{divmsgtime}}</span>
+        <div ref="qrcode" class="qrcode" ></div>
+        <div class="qrcodeBj" v-show="isZz">
+          图片采集中,请稍后!
+        </div>
+        <span style="color: green;font-size: 18px;">{{divmsgfoot}}</span>
+      </div>
+
+    </el-dialog>
   </div>
 </template>
 
@@ -593,14 +621,17 @@
   } from "@/api/gljt/gljtSq";
   import {chineseOne, idCard, Regular, Mobile} from '@/utils/regular'
   import {getAccessToken, idcard} from "../../../api/lnst/baiduUtil"
-  import {addGljtLr, delGljtLr, getGljtLr, listGljtLr, updateGljtLr,ocrQuery} from "@/api/gljt/gljtLr";
+  import {addGljtLr, delGljtLr, getGljtLr, listGljtLr, updateGljtLr, ocrQuery} from "@/api/gljt/gljtLr";
   import sqXq from "./sqXq"
   import {mapState} from 'vuex'
   import {encrypt_ECBdef} from "@/api/tool/sm4";
+  import mqtt from 'mqtt'
+  import {getUuid} from '@/utils'
+  import QRCode from 'qrcodejs2'
 
   export default {
     name: "GljtSq",
-    dicts: ['GL007', 'C0007', 'C0032', 'C0044', 'GL002', 'GL003', 'CZ035', 'GL009','GL013'],
+    dicts: ['GL007', 'C0007', 'C0032', 'C0044', 'GL002', 'GL003', 'CZ035', 'GL009', 'GL013'],
     components: {
       sqXq
     },
@@ -609,11 +640,34 @@
     },
     data() {
       return {
+        client: null,
+        options: {
+          connectTimeout: 6000, // 超时时间
+          clientId: 'znyl_' + getUuid(),
+          endpoint: '/mqtt',
+          host: '121.36.73.159',
+          port: 8083,
+          username: 'admin', // 用户名
+          password: 'sckj@2023', // 密码
+          cleanSession: false,
+          keepAlive: 60 // 心跳值,心跳值太大可能会连接不成功,这个参考文档
+        },
+        subscription: {
+          topic: '/Radar60FL/#',
+          qos: 0,
+        },
+        titleRwm: '',
+        openRwm: false,
+        countdown: '',
+        divmsgfoot: '',
+        timer: '',
+        divmsgtime: '',
+        isZz:false,
         // 遮罩层
         formXq: '',
-        cardNo:'',
-        hkbName:'',
-        isOcrHkb:true,
+        cardNo: '',
+        hkbName: '',
+        isOcrHkb: true,
         loading: true,
         submitFormLoading: false,
         // 选中数组
@@ -872,10 +926,187 @@
       };
     },
     created() {
-
       this.getList();
     },
     methods: {
+      createConnection() {
+        console.log('正在连接...')
+        let that = this;
+        try {
+          this.client = mqtt.connect('ws://121.36.73.159:8083/mqtt', this.options)
+        } catch (error) {
+          console.log('mqtt连接失败: ', error)
+        }
+        this.client.on('connect', (e) => {
+          console.log('连接成功')
+          this.doSubscribe() // 订阅主题
+        })
+        // 接收消息处理
+        this.client.on('message', this.message_str);
+        // 连接错误处理
+        this.client.on('error', (error) => {
+          console.log('连接出错: ', error)
+        })
+        // 重新连接处理
+        // this.client.on('reconnect', () => {
+        //   console.log('重新连接...')
+        // })
+        this.client.on('close', () => {
+          console.log('监听断开连接')
+          if(this.client) {
+            this.client.end();
+          }
+        });
+      },
+      endTime(){
+       if(this.client) {
+         this.client.end();
+         this.client=null;
+         console.log('断开连接')
+       }
+      },
+      // 订阅
+      doSubscribe() {
+        // console.log(this.currentCode,'区划编码');
+        // console.log(this.user.jgId,'this.user');
+        this.subscription.topic = '/Radar60FL/' + this.options.clientId + '/#';
+        // this.subscription.topic = '/Radar60FL/701D0808C9EB/sys/property/post';
+        const {topic, qos} = this.subscription
+        this.client.subscribe(topic, qos, (error) => {
+          if (!error) {
+            console.log('订阅成功')
+          } else {
+            console.log('订阅失败')
+          }
+        })
+      },
+      message_str(topic, message) {													//监听消息函数
+        console.log("收到来自主题:" + topic + "的消息:" + message.toString());
+        // var messageTextArea = document.getElementById("messageTextArea");					//获取textarea元素
+        // messageTextArea.value += "收到来自主题:"+topic+"的消息:"+message.toString()+"\n"; 	//将新的文本追加到 value
+        if (topic.includes("sys/property/post")) {
+          let msgobj = JSON.parse(message.toString());
+          if (msgobj.params.picadata1) {
+            if(msgobj.params.lx==="sfz"){
+
+            }
+            if(msgobj.params.lx==="tx"){
+              this.form.tx=msgobj.params.picadata1;
+              console.log(this.form,'<-----我是form');
+              // this.form.tx='/gljtUploadPath/2025/02/17/43d9cbd0ecfe11efa4fd03c1431ab362_20250217151027A056.png';
+              this.clearTime();
+            }
+            // var canvas = document.getElementById('SFZA');
+            // if (msgobj.params.lx=="hk") canvas = document.getElementById('HKA');
+            // if (msgobj.params.lx=="tx") canvas = document.getElementById('TX');
+            // if (msgobj.params.lx=="yhk") canvas = document.getElementById('YHK');
+            // canvas.src ="https://jdgl.ccsckj.com/resfile/"+ msgobj.params.picadata;
+            // closePopup();
+          }
+
+          if (msgobj.params.picbdata) {
+            if(msgobj.params.lx==="sfz"){
+
+            }
+            // var canvas = document.getElementById('SFZB');
+            // if (msgobj.params.lx=="hk") canvas = document.getElementById('HKB');
+            // if (msgobj.params.lx=="tx") canvas = document.getElementById('TX');
+            // if (msgobj.params.lx=="yhk") canvas = document.getElementById('YHK');
+            // canvas.src ="https://jdgl.ccsckj.com/resfile/"+ msgobj.params.picbdata;
+            //
+            // closePopup();
+          }
+          if (msgobj.params.msg) {
+            this.divmsgfoot = msgobj.params.msg;
+            if (msgobj.params.msg) {
+              this.countdown = 60;
+              if (msgobj.params.msg == "开始采集")
+              {
+                this.isZz=true;
+              }
+              if (msgobj.params.msg == "退出采集")
+              {
+                this.clearTime();
+              }
+            }
+          }
+        }
+
+      },
+      toGrayScale(canvasId) {
+        const canvas = document.getElementById(canvasId);
+        const ctx = canvas.getContext('2d');
+        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imgData.data;
+
+        for (let i = 0; i < data.length; i += 4) {
+          const avg = (data[i] + data[i + 1] + data[i + 2]) / 30; // 计算灰度值
+          data[i] = avg;     // R
+          data[i + 1] = 58;  // G
+          data[i + 2] = avg; // B
+        }
+
+        ctx.putImageData(imgData, 0, 0);
+        ctx.font = '40px Arial';
+        ctx.fillStyle = 'white';
+        ctx.fillText('图片采集中,请稍后!', 120, 280);
+      },
+      clearTime(){
+        this.openRwm = false;
+        if(this.timer){
+          clearInterval(this.timer); // 停止计时器
+          this.timer=null;
+        }
+        this.isZz=false;
+        this.divmsgtime = null; // 更新页面上的显示为结束信息
+        console.log('清空');
+      },
+      QRSFZ(lx) {
+        this.openRwm = true;
+        let starttime = (new Date()).valueOf();
+        let tj = {
+          lx: lx,
+          kssj: starttime,
+          jssj: starttime + 60000,
+          czsc: 60000,
+          clientid: this.options.clientId,
+          rad: Math.random().toString(16).substr(2, 8)
+        };
+        let destj = encrypt_ECBdef(JSON.stringify(tj));
+        const text = "https://jdgl.ccsckj.com/resfile/card/card2.html?tj=" + encodeURIComponent(destj);
+        switch (lx) {
+          case 'sfz':
+            this.titleRwm = '身份证图片采集';
+            break;
+          case 'tx':
+            this.titleRwm = '面部图片采集';
+            break;
+        }
+
+        this.$nextTick(() => {
+          this.$refs.qrcode.innerHTML = ''
+          let qrcode = new QRCode(this.$refs.qrcode, {
+            text: text,
+            height: 290,
+            width: 290,
+            colorDark: '#000000',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H
+          })
+        })
+        this.divmsgfoot = "等待中。。。";
+        this.countdown = 60;
+        let that = this;
+        this.timer = setInterval(() => {
+          that.divmsgtime = that.countdown + "S"; // 更新页面上的倒计时显示
+          that.countdown--; // 减少秒数
+          if (that.countdown < 0) {
+            // clearInterval(that.timer); // 停止计时器
+            // that.divmsgtime = "0S"; // 更新页面上的显示为结束信息
+            that.clearTime();
+          }
+        }, 1000);
+      },
       clearDbr() {
         this.form.dbrZjzm = '';
         this.form.dbrZjbm = '';
@@ -899,8 +1130,8 @@
         if (!this.form.csrq) {
           return
         }
-        let res = await getQxBfPz({csrq: this.form.csrq,isdb:this.form.isdb});
-        this.form.pc=res.data.pc;
+        let res = await getQxBfPz({csrq: this.form.csrq, isdb: this.form.isdb});
+        this.form.pc = res.data.pc;
         this.isJy = false;
         if (res.data.default) {
           this.form.ffyf = res.data.default;
@@ -921,11 +1152,11 @@
         if (!this.form.csrq) {
           return
         }
-        let res = await getQxBfPz({csrq: this.form.csrq,isdb:this.form.isdb});
-        this.form.pc=res.data.pc;
+        let res = await getQxBfPz({csrq: this.form.csrq, isdb: this.form.isdb});
+        this.form.pc = res.data.pc;
         this.isJy = false;
         if (res.data.default) {
-          if(!this.form.ffyf){
+          if (!this.form.ffyf) {
             this.form.ffyf = res.data.default;
           }
           if (res.data.upper && res.data.upper.length >= 6) {
@@ -940,9 +1171,9 @@
           this.isJy = false
         }
       },
-      changeDb(){
-        this.form.dbzh='';
-        this.form.dbzm='';
+      changeDb() {
+        this.form.dbzh = '';
+        this.form.dbzm = '';
         this.getBfys();
         this.getQxBfPz();
       },
@@ -995,26 +1226,26 @@
           //   this.$nextTick(()=>{
           //   this.form.sqrZjzm='';})
           // }else{
-            this.ocrSelect(data)
+          this.ocrSelect(data)
           // }
 
         }
       },
-      ocrSelect(data){
-        ocrQuery({sqrZjhm:data.sqrZjhm}).then(
-          async ()=>{
+      ocrSelect(data) {
+        ocrQuery({sqrZjhm: data.sqrZjhm}).then(
+          async () => {
             this.form.sqrZjhm = data.sqrZjhm;
             this.form.xb = this.dict.type.C0007.filter(e => e.label.includes(data.xb))[0].value;
             this.form.csrq = data.csrq;
             this.form.sqrXm = data.sqrXm;
-            this.form.khmc= data.sqrXm;
+            this.form.khmc = data.sqrXm;
             this.form.hjdz = data.hjdz;
             await this.getQxBfPz();
             await this.getBfys();
           }
-        ).catch(e=>{
-          this.form.sqrZjzm='';
-          console.log(e,'我是异常')
+        ).catch(e => {
+          this.form.sqrZjzm = '';
+          console.log(e, '我是异常')
         })
 
       },
@@ -1037,16 +1268,16 @@
           this.form.jhrJzdz = data.hjdz;
         }
       },
-      getCardYhk(data){
+      getCardYhk(data) {
         if (data && data.yhzh) {
           this.form.yhzh = data.yhzh;
         }
       },
-      getSubpage(data){
-        console.log(data,'户口本');
-        if(data && data.cardNo){
-          this.cardNo=data.cardNo;
-          this.hkbName=data.name;
+      getSubpage(data) {
+        console.log(data, '户口本');
+        if (data && data.cardNo) {
+          this.cardNo = data.cardNo;
+          this.hkbName = data.name;
           // if(this.form.sqrZjhm&&this.form.sqrXm){
           //   if(this.form.sqrZjhm!= data.cardNo||this.form.sqrXm!=data.name)
           //   {
@@ -1059,9 +1290,9 @@
           // }
         }
       },
-      clearHkb(){
-        this.cardNo='';
-        this.hkbName='';
+      clearHkb() {
+        this.cardNo = '';
+        this.hkbName = '';
       },
       clear() {
         this.form.sqrZjhm = '';
@@ -1111,7 +1342,7 @@
           jzdz: null,
           hjdz: null,
           ffyf: null,
-          pc:null,
+          pc: null,
           sqbfys: null,
           sqbfje: null,
           dbrZjzm: null,
@@ -1205,10 +1436,11 @@
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
-        if(this.user.userData.dept.locationCode){
-          this.form.xzqh= [this.user.userData.dept.locationCode];
+        if (this.user.userData.dept.locationCode) {
+          this.form.xzqh = [this.user.userData.dept.locationCode];
         }
         this.getAccessToken();
+        this.createConnection();
         this.status = null;
         this.open = true;
         this.title = "添加高龄津贴申请信息";
@@ -1254,7 +1486,7 @@
             this.form = response.data;
             this.form.xzqh = this.form.xzqhCode ? JSON.stringify(this.form.xzqhCode.split(',')) : [];
             this.form.xjdxzqh = this.form.xjdxzqhCode ? JSON.stringify(this.form.xjdxzqhCode.split(',')) : [];
-            if (this.status == '4' || this.status == '0'|| this.status == '50') {
+            if (this.status == '4' || this.status == '0' || this.status == '50') {
               this.getAccessToken();
             }
             this.getQxBfPz2();
@@ -1287,7 +1519,11 @@
         this.reset();
         const id = row.id;
         const tj = JSON.parse(JSON.stringify({lrId: id}));
-        const sss1 = {tab: {tab: 'jtsq', qh: this.user.userData.dept.locationCode.substring(0, 6)}, sys: {dpt: this.user.userData.dept.deptName + '高龄老年人生活津贴申请确认表', dt: Date.now()}, tj: tj}
+        const sss1 = {
+          tab: {tab: 'jtsq', qh: this.user.userData.dept.locationCode.substring(0, 6)},
+          sys: {dpt: this.user.userData.dept.deptName + '高龄老年人生活津贴申请确认表', dt: Date.now()},
+          tj: tj
+        }
         let ssss = encrypt_ECBdef(JSON.stringify(sss1));
         let para = encodeURIComponent(ssss);
 
@@ -1302,36 +1538,36 @@
           }
         });
       },
-       submitFormZc(is){
-
-         // if(!this.form.sqrZjzm){
-         //    this.$modal.msgError('申请人证件照正面不能为空');
-         // }
-         // if(!this.form.sqrLxdh){
-         //   this.$modal.msgError('申请人联系电话不能为空');
-         // }
-         // if(!this.form.xzqh){
-         //   this.$modal.msgError('户籍社区不能为空');
-         // }
-         let count = 0
-         const updateArr = ['sqrZjzm', 'sqrLxdh','xzqh']
-         let isAllowNext = false // 是否允许下一步
-         updateArr.forEach(item => {
-           this.$refs["form"].validateField(item, errorMsg=> {
-             // 返回值为空时,验证通过;返回值非空时,验证失败
-             if (errorMsg) return
-             // 如果某个字段校验通过则计数+1
-             ++count
-           })
-         })
-         // 如果当前表单必填项通过的数量与需要必填的数量相等,则进入下一步
-         count === updateArr.length ? isAllowNext = true : ''
-         if (isAllowNext) {
-           // alert('必填字段均通过校验,允许进入下一步!')
-           this.submitFormTj(is);
-         }
+      submitFormZc(is) {
+
+        // if(!this.form.sqrZjzm){
+        //    this.$modal.msgError('申请人证件照正面不能为空');
+        // }
+        // if(!this.form.sqrLxdh){
+        //   this.$modal.msgError('申请人联系电话不能为空');
+        // }
+        // if(!this.form.xzqh){
+        //   this.$modal.msgError('户籍社区不能为空');
+        // }
+        let count = 0
+        const updateArr = ['sqrZjzm', 'sqrLxdh', 'xzqh']
+        let isAllowNext = false // 是否允许下一步
+        updateArr.forEach(item => {
+          this.$refs["form"].validateField(item, errorMsg => {
+            // 返回值为空时,验证通过;返回值非空时,验证失败
+            if (errorMsg) return
+            // 如果某个字段校验通过则计数+1
+            ++count
+          })
+        })
+        // 如果当前表单必填项通过的数量与需要必填的数量相等,则进入下一步
+        count === updateArr.length ? isAllowNext = true : ''
+        if (isAllowNext) {
+          // alert('必填字段均通过校验,允许进入下一步!')
+          this.submitFormTj(is);
+        }
       },
-      async submitFormTj(is){
+      async submitFormTj(is) {
         this.submitFormLoading = true;
         let xzqh = '';
         let xjdxzqh = '';
@@ -1390,7 +1626,7 @@
           qur.mzShyj = null;
           qur.mzShsj = null;
         }
-        if(is){
+        if (is) {
           qur.sqShyj = null;
           qur.sqShjg = null;
           qur.sqShsj = null;
@@ -1402,7 +1638,7 @@
           qur.mzShsj = null;
         }
         if (this.form.id != null) {
-          if (this.status == '0'||this.status == '50') {
+          if (this.status == '0' || this.status == '50') {
             qur.sqShsj = this.getTime();
           }
           updateGljtSq(qur).then(response => {
@@ -1431,13 +1667,13 @@
         });
       },
       /** 删除按钮操作 */
-      handleDelete(row,is) {
+      handleDelete(row, is) {
         const ids = row.id || this.ids;
         this.$modal.confirm('确认删除此记录吗?').then(function () {
-          if(is){
+          if (is) {
             //被拒绝后删除
-            return endGljtSq({id:ids});
-          }else{
+            return endGljtSq({id: ids});
+          } else {
             //暂存后删除
             return delGljtSq(ids);
           }
@@ -1474,6 +1710,28 @@
 <style scoped lang="scss">
   @import "@/assets/styles/common/common.scss";
 
+  .qrcode {
+    height: 300px;
+    width: 300px;
+    display: inline-block;
+    border: 1px solid #dfdfdf;
+    margin: 10px auto;
+    padding: 5px;
+  }
+  .qrcodeBj{
+    height: 300px;
+    width: 300px;
+    display: inline-block;
+    border: 1px solid #dfdfdf;
+    margin: 10px auto;
+    padding: 5px;
+    margin-top: -310px;
+    background-color: rgba(0, 0, 0, 0.7);
+    font-size: 30px;
+    color: white;
+    line-height: 300px;
+  }
+
   .imgStyle {
     width: 171.2px;
     height: 108px;
@@ -1560,9 +1818,10 @@
 
 
   ::v-deep .uploadStyle {
-    .component-upload-image{
+    .component-upload-image {
       line-height: 0;
     }
+
     .el-upload--picture-card {
       width: 260px;
       height: 148px;
@@ -1580,10 +1839,12 @@
       }
     }
   }
+
   ::v-deep .uploadStyleFx {
-    .component-upload-image{
+    .component-upload-image {
       line-height: 0;
     }
+
     .el-upload--picture-card {
       width: 260px;
       height: 180px;
@@ -1601,10 +1862,12 @@
       }
     }
   }
+
   ::v-deep .uploadStyleBig {
-    .component-upload-image{
+    .component-upload-image {
       line-height: 0;
     }
+
     .el-upload--picture-card {
       width: 289px;
       height: 389px;
@@ -1622,17 +1885,20 @@
       }
     }
   }
+
   .grid3 {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     /*grid-template-rows: 50px 50px;*/
   }
+
   .grid2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     /*grid-template-rows: 50px 50px;*/
   }
-  .labelStyle{
+
+  .labelStyle {
 
   }
 </style>