二维码

operationSupport/src/views/deviceManagement/index.vue

@@ -49,17 +49,19 @@
                             <i v-else class="zoniot_font zoniot-icon-baofei redText" @click="Scrap(scope.row.id)"></i>
                         </el-tooltip>
                         <el-tooltip effect="light" placement="bottom" content="下载二维码">
-                            <i class="zoniot_font zoniot-icon-erweimachakan" @click="downImg(scope.row.id)"></i>
+                            <i class="zoniot_font zoniot-icon-erweimachakan" @click="lookImg(scope.row)"></i>
                         </el-tooltip>
                     </div>
                 </template>
             </zz-table>
         </div>
-        <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px" center>
-            <img :src="QRImg" alt="" />
+        <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
+            <div class="QRImg">
+                <img :src="QRImg" alt="门禁设备二维码" />
+                <div>门禁设备二维码</div>
+            </div>
             <span slot="footer" class="dialog-footer">
-                <el-button @click="centerDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+                <el-button type="primary" @click="downImg">下载</el-button>
             </span>
         </el-dialog>
     </div>
@@ -166,7 +168,9 @@ export default {
                 children: 'children' // 子级
             },
             centerDialogVisible: false,
-            QRImg: ''
+            QRImg: '',
+            DeviceName: '',
+            deviceNo: ''
         };
     },
     created() {
@@ -235,8 +239,22 @@ export default {
                 })
                 .catch(() => {});
         },
-        downImg(id) {
-            this.QRImg = `/sc-community/device/generateQRCodeImage?id=${id}&type=DEVICE`;
+        lookImg(row) {
+            let _this = this;
+            this.DeviceName = row.deviceName;
+            this.deviceNo = row.deviceNo;
+            this.getBinary('/sc-community/device/generateQRCodeImage', { id: row.id, type: 'DEVICE' }, function (data) {
+                _this.QRImg = window.URL.createObjectURL(data);
+                _this.centerDialogVisible = !_this.centerDialogVisible;
+            });
+        },
+        downImg() {
+            let a = document.createElement('a');
+            a.download = `设备编号${this.deviceNo}.png`;
+            a.href = this.QRImg;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
             this.centerDialogVisible = !this.centerDialogVisible;
         },
         addOrEdit(todo, data = {}) {
@@ -270,6 +288,26 @@ export default {
             this.$http.postForm('/devicetype/selectList', { name: '' }).then((data) => {
                 this.productOptions = data;
             });
+        },
+        getBinary(url, args, success) {
+            var xmlhttp = new XMLHttpRequest();
+            var data = eval(args);
+            var i = 0;
+            for (var key in data) {
+                if (i++ === 0) {
+                    url += '?' + key + '=' + data[key];
+                } else {
+                    url += '&' + key + '=' + data[key];
+                }
+            }
+            xmlhttp.open('GET', url, true);
+            xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('SC_token'));
+
+            xmlhttp.responseType = 'blob';
+            xmlhttp.onload = function () {
+                success(this.response);
+            };
+            xmlhttp.send();
         }
     }
 };
@@ -284,4 +322,7 @@ export default {
 table i {
     cursor: pointer;
 }
+.QRImg {
+    text-align: center;
+}
 </style>

operationSupport/src/views/deviceManagement/indexFacilities.vue

@@ -46,17 +46,19 @@
                             <i v-else class="zoniot_font zoniot-icon-baofei redText" @click="Scrap(scope.row.id)"></i>
                         </el-tooltip>
                         <el-tooltip effect="light" placement="bottom" content="下载二维码">
-                            <i class="zoniot_font zoniot-icon-erweimachakan" @click="downImg(scope.row.id)"></i>
+                            <i class="zoniot_font zoniot-icon-erweimachakan" @click="lookImg(scope.row)"></i>
                         </el-tooltip>
                     </div>
                 </template>
             </zz-table>
         </div>
-        <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px" center>
-            <img :src="QRImg" alt="" />
+        <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
+            <div class="QRImg">
+                <img :src="QRImg" alt="设施二维码" />
+                <div>设施二维码</div>
+            </div>
             <span slot="footer" class="dialog-footer">
-                <el-button @click="centerDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+                <el-button type="primary" @click="downImg">下载</el-button>
             </span>
         </el-dialog>
     </div>
@@ -149,7 +151,8 @@ export default {
             mixins_post: 'post',
             TypeOptions: [],
             centerDialogVisible: false,
-            QRImg: ''
+            QRImg: '',
+            facilityNo: ''
         };
     },
     created() {
@@ -214,10 +217,6 @@ export default {
                 })
                 .catch(() => {});
         },
-        downImg(id) {
-            this.QRImg = `/sc-community/device/generateQRCodeImage?id=${id}&type=FACILTY`;
-            this.centerDialogVisible = !this.centerDialogVisible;
-        },
         addOrEdit(todo, data = {}) {
             new Promise((resolve) => {
                 let title = '添加设施';
@@ -249,6 +248,44 @@ export default {
             this.$http.get('/facilityType/selectList').then((data) => {
                 this.TypeOptions = data.data;
             });
+        },
+        lookImg(row) {
+            let _this = this;
+            this.facilityNo = row.facilityNo;
+            this.getBinary('/sc-community/device/generateQRCodeImage', { id: row.id, type: 'FACILTY' }, function (data) {
+                _this.QRImg = window.URL.createObjectURL(data);
+                _this.centerDialogVisible = !_this.centerDialogVisible;
+            });
+        },
+        downImg() {
+            let a = document.createElement('a');
+            a.download = `设施编号${this.facilityNo}.png`;
+            a.href = this.QRImg;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            this.centerDialogVisible = !this.centerDialogVisible;
+        },
+        getBinary(url, args, success) {
+            var xmlhttp = new XMLHttpRequest();
+
+            var data = eval(args);
+            var i = 0;
+            for (var key in data) {
+                if (i++ === 0) {
+                    url += '?' + key + '=' + data[key];
+                } else {
+                    url += '&' + key + '=' + data[key];
+                }
+            }
+            xmlhttp.open('GET', url, true);
+            xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('SC_token'));
+
+            xmlhttp.responseType = 'blob';
+            xmlhttp.onload = function () {
+                success(this.response);
+            };
+            xmlhttp.send();
         }
     }
 };
@@ -263,4 +300,7 @@ export default {
 table i {
     cursor: pointer;
 }
+.QRImg {
+    text-align: center;
+}
 </style>