基础管理页面编号下载可视化

package.json

@@ -39,20 +39,20 @@
     "jsencrypt": "3.0.0-rc.1",
     "minimatch": "^10.0.3",
     "nprogress": "0.2.0",
+    "qrcode": "^1.5.4",
+    "qrcodejs2-fix": "^0.0.1",
     "quill": "2.0.2",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
+    "uuid": "^9.0.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "uuid": "^9.0.0",
+    "yarn": "^1.22.22"
-    "yarn": "^1.22.22",
-    "qrcode": "^1.5.3",
-    "qrcodejs2-fix": "^0.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router/index' 
+
+// 导入element-plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+app.use(router);
+app.use(ElementPlus);
+
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router'; 
+const routerHistory = createWebHistory(); 
+const router = createRouter({   
+    history: routerHistory, //history写法不同   
+    routes: [{       
+            path: '/',       
+            redirect: '/home',     
+        },{       
+            path: '/home',       
+            component: () => import(`@/views/Home.vue`),     
+        },{
+            path: '/hawkEyeO',
+            component: () => import(`@/views/MultiView/hawkEyeO.vue`),
+        },{
+            path: '/hawkEyeL',
+            component: () => import(`@/views/MultiView/hawkEyeL.vue`),
+        },{
+            path: '/hawkEyeC',
+            component: () => import(`@/views/MultiView/hawkEyeC.vue`),
+        }, {
+            path: '/swipe',
+            component: () => import(`@/views/MultiView/Swipe.vue`),
+        },
+        {
+            path: '/doubleView',
+            component: () => import(`@/views/MultiView/DoubleView.vue`),
+        }] 
+    }); 
+export default router;

src/style.css

@@ -0,0 +1,82 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  /* max-width: 1280px; */
+  /* margin: 0 auto; */
+  /* padding: 2rem; */
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/views/system/equ/index.vue

@@ -50,7 +50,13 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <!-- <el-table-column label="设备编号" align="center" key="equId" prop="equId"  /> -->
-              <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  />
+              <!-- <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  /> -->
+              <el-table-column prop="equCode" label="设备编号" header-align="center" align="center">
+                                    <template #default="{ row }">
+                                        <span @click="downloadText(row.equCode)"
+                                            style="cursor: pointer; color: blue;">{{ row.equCode }}</span>
+                                    </template>
+               </el-table-column>
               <el-table-column label="部门" align="center" key="deptName" prop="deptName"  />
               <el-table-column label="品牌型号" align="center" key="modelId" prop="modelId"  />
               <el-table-column label="设备分类" align="center" key="classify" prop="classify"  >
@@ -378,6 +384,54 @@ export default {
         return true
       })
     },
+
+    downloadText (text) {
+
+      const canvas = document.createElement('canvas');
+      canvas.width = 1400; // 设置画布宽度
+      canvas.height = 600; // 设置画布高度，以确保60:35的高宽比
+
+      // 获取 2D 上下文
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+          // 设置字体样式
+          ctx.font = 'bold 128px 楷体';
+
+          // 设置字体颜色
+          ctx.fillStyle = 'rgb(20, 17, 110)'; // 字体颜色为蓝色
+
+          // 设置字体间隔
+          const charSpacing = 35 / 4; // 字符间隔设置为字体宽度的1/4
+          const fontSize = 128; // 字体大小
+
+          // 计算文本的总宽度，包括字符间隔
+          let totalTextWidth = 0;
+          for (const char of text) {
+              totalTextWidth += ctx.measureText(char).width + charSpacing;
+          }
+          totalTextWidth -= charSpacing; // 最后一个字符后面没有间隔
+
+          // 初始绘制位置，水平居中
+          let currentX = (canvas.width - totalTextWidth) / 2;
+
+          // 绘制每个字符并设置间隔
+          for (const char of text) {
+              ctx.fillText(char, currentX, (canvas.height - fontSize) / 2); // 垂直居中绘制
+              currentX += ctx.measureText(char).width + charSpacing;
+          }
+
+          // 将画布保存为图片
+          const link = document.createElement('a');
+          link.href = canvas.toDataURL(); // 将画布转换为 base64 编码的图片链接
+          link.download = '设备编号.png'; // 设置下载图片的文件名
+          link.click(); // 触发点击事件下载图片
+
+          // 清空画布
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+      } else {
+          console.error('Failed to get 2D context from canvas.');
+      }
+      },
     // 筛选节点
     filterNode(value, data) {
       if (!value) return true
@@ -570,4 +624,26 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style scoped>
+.qrcode-image {
+    width: 100px;
+    /* 根据需求调整二维码图片大小 */
+    height: 100px;
+    margin-left: 60px;
+
+}
+
+.qrcode-container {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+}
+
+.zoomed-qrcode-image {
+    width: 100%;
+}
+</style>

src/views/system/equAirport/index.vue

@@ -50,7 +50,14 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <!-- <el-table-column label="设备编号" align="center" key="equId" prop="equId"  /> -->
-              <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  />
+              <!-- <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  /> -->
+
+              <el-table-column prop="equCode" label="设备编号" header-align="center" align="center">
+                                    <template #default="{ row }">
+                                        <span @click="downloadText(row.equCode)"
+                                            style="cursor: pointer; color: blue;">{{ row.equCode }}</span>
+                                    </template>
+               </el-table-column>
               <el-table-column label="部门" align="center" key="deptName" prop="deptName"  />
               <el-table-column label="国标码" align="center" key="gbCode" prop="gbCode"  />
               <el-table-column label="品牌型号" align="center" key="modelId" prop="modelId"  />
@@ -70,7 +77,14 @@
               <el-table-column label="保险状态" align="center" key="insuranceSts" prop="insuranceSts" />
               <el-table-column label="保险期限" align="center" key="mtnDate" prop="mtnDate"/>
               <el-table-column label="备注" align="center" key="remark" prop="remark" />
-
+              <!-- <el-table-column label="二维码" align="center">
+                                    <template #default="{ row }">
+                                        <div class="qrcode-container" @click="downloadQRCode(row)"
+                                            @dblclick="zoomQRCode(row)">
+                                            <img :src="row.qrCode" alt="QR Code" class="qrcode-image" />
+                                        </div>
+                                    </template>
+              </el-table-column> -->
               <!-- <el-table-column prop="equCode" label="设备编号" header-align="center" align="center">
                                     <template #default="{ row }">
                                         <span @click="downloadText(row.equCode)"
@@ -212,7 +226,7 @@ import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
-
+import qrcode from 'qrcode';
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex','dev_equ_classify','dev_health_status', 'equ_attribution_sts','equ_model_info'],
@@ -257,6 +271,8 @@ export default {
         children: "children",
         label: "label"
       },
+      zoomedQrCode : '',
+      isible : false,
       // 用户导入参数
       upload: {
         // 是否显示弹出层（用户导入）
@@ -349,6 +365,9 @@ export default {
       this.queryParams.typeId = 13
       listData(this.queryParams).then(response => {
           this.userList = response.rows
+          this.userList?.forEach(row => {
+              this.generateQRCode(row);
+          });
           this.total = response.total
           this.loading = false
         }
@@ -468,6 +487,119 @@ export default {
         this.title = "修改"
       })
     },
+
+    zoomQRCode  (row) {
+        this.zoomedQrCode = qrcode.toDataURL(row.equCode)
+        this.isiblee = true
+    },
+
+    downloadText (text) {
+
+      const canvas = document.createElement('canvas');
+      canvas.width = 1400; // 设置画布宽度
+      canvas.height = 600; // 设置画布高度，以确保60:35的高宽比
+
+      // 获取 2D 上下文
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+          // 设置字体样式
+          ctx.font = 'bold 128px 楷体';
+
+          // 设置字体颜色
+          ctx.fillStyle = 'rgb(20, 17, 110)'; // 字体颜色为蓝色
+
+          // 设置字体间隔
+          const charSpacing = 35 / 4; // 字符间隔设置为字体宽度的1/4
+          const fontSize = 128; // 字体大小
+
+          // 计算文本的总宽度，包括字符间隔
+          let totalTextWidth = 0;
+          for (const char of text) {
+              totalTextWidth += ctx.measureText(char).width + charSpacing;
+          }
+          totalTextWidth -= charSpacing; // 最后一个字符后面没有间隔
+
+          // 初始绘制位置，水平居中
+          let currentX = (canvas.width - totalTextWidth) / 2;
+
+          // 绘制每个字符并设置间隔
+          for (const char of text) {
+              ctx.fillText(char, currentX, (canvas.height - fontSize) / 2); // 垂直居中绘制
+              currentX += ctx.measureText(char).width + charSpacing;
+          }
+
+          // 将画布保存为图片
+          const link = document.createElement('a');
+          link.href = canvas.toDataURL(); // 将画布转换为 base64 编码的图片链接
+          link.download = '设备编号.png'; // 设置下载图片的文件名
+          link.click(); // 触发点击事件下载图片
+
+          // 清空画布
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+      } else {
+          console.error('Failed to get 2D context from canvas.');
+      }
+    },
+
+    // 生成二维码
+    generateQRCode(row) {
+      try {
+
+          const str =
+              "警航编号:" + row.equCode + "\n" +
+              "设备状态: " + row.equSts + "\n" +
+              "所属机构:" + row.deptName + "\n" +
+              "类别: 无人机" + "\n" +
+              "设备序列号:" + row.equSn + "\n" +
+              "责任人姓名:" + row.mngName + "\n" +
+              "责任人警号:" + row.mngCode + "\n" +
+              "采购日期:" + row.purDate + "\n" +
+              "保险期限: " + row.mtnDate
+              console.log("str:",str)
+              console.log("qrcode:",qrcode)
+              console.log("qrcode.toDataURL:",qrcode.toDataURL)
+
+          const url =  this.qrcode.toDataURL(str);
+          row.qrCode = url;
+      } catch (err) {
+          console.error(err);
+      }
+
+   },
+
+    // 下载二维码
+    downloadQRCode (row) {
+        if (row.equSts = 0) {
+            row.equSts = "正常"
+        }
+        if (row.equSts = 1) {
+            row.equSts = "故障"
+        }
+        if (row.equSts = 2) {
+            row.equSts = "报废"
+        }
+        console.log(row.equSts, "row.equSts");
+
+        const str =
+            "警航编号:" + row.equCode + "\n" +
+            "设备状态: " + row.equSts + "\n" +
+            "所属机构:" + row.deptName + "\n" +
+            "类别: 无人机" + "\n" +
+            "设备序列号:" + row.equSn + "\n" +
+            "责任人姓名:" + row.mngName + "\n" +
+            "责任人警号:" + row.mngCode + "\n" +
+            "采购日期:" + row.purDate + "\n" +
+            "保险期限: " + row.mtnDate
+
+
+
+        const qrCodeCanvas = this.qrcode.toCanvas(str, { errorCorrectionLevel: 'H' })
+        const link = document.createElement('a')
+        link.href = this.qrCodeCanvas.toDataURL('image/png')
+        link.download = `${row.equCode}.png`
+        link.click()
+    },
+
     /** 重置密码按钮操作 */
     handleResetPwd(row) {
       this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
@@ -565,4 +697,27 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.qrcode-image {
+    width: 100px;
+    /* 根据需求调整二维码图片大小 */
+    height: 100px;
+    margin-left: 60px;
+
+}
+
+.qrcode-container {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+}
+
+.zoomed-qrcode-image {
+    width: 100%;
+}
+</style>

src/views/system/equCounter/index.vue

@@ -55,7 +55,13 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <!-- <el-table-column label="设备编号" align="center" key="equId" prop="equId"  /> -->
-              <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  />
+              <!-- <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  /> -->
+              <el-table-column prop="equCode" label="设备编号" header-align="center" align="center">
+                                    <template #default="{ row }">
+                                        <span @click="downloadText(row.equCode)"
+                                            style="cursor: pointer; color: blue;">{{ row.equCode }}</span>
+                                    </template>
+               </el-table-column>
               <el-table-column label="所属机构" align="center" key="deptName" prop="deptName"  />
               <el-table-column label="品牌型号" align="center" key="modelId" prop="modelId"  />
               <el-table-column label="设备功能 " align="center" prop="equFunction"/>
@@ -358,6 +364,55 @@ export default {
         }
       )
     },
+
+
+    downloadText (text) {
+
+      const canvas = document.createElement('canvas');
+      canvas.width = 1400; // 设置画布宽度
+      canvas.height = 600; // 设置画布高度，以确保60:35的高宽比
+
+      // 获取 2D 上下文
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+          // 设置字体样式
+          ctx.font = 'bold 128px 楷体';
+
+          // 设置字体颜色
+          ctx.fillStyle = 'rgb(20, 17, 110)'; // 字体颜色为蓝色
+
+          // 设置字体间隔
+          const charSpacing = 35 / 4; // 字符间隔设置为字体宽度的1/4
+          const fontSize = 128; // 字体大小
+
+          // 计算文本的总宽度，包括字符间隔
+          let totalTextWidth = 0;
+          for (const char of text) {
+              totalTextWidth += ctx.measureText(char).width + charSpacing;
+          }
+          totalTextWidth -= charSpacing; // 最后一个字符后面没有间隔
+
+          // 初始绘制位置，水平居中
+          let currentX = (canvas.width - totalTextWidth) / 2;
+
+          // 绘制每个字符并设置间隔
+          for (const char of text) {
+              ctx.fillText(char, currentX, (canvas.height - fontSize) / 2); // 垂直居中绘制
+              currentX += ctx.measureText(char).width + charSpacing;
+          }
+
+          // 将画布保存为图片
+          const link = document.createElement('a');
+          link.href = canvas.toDataURL(); // 将画布转换为 base64 编码的图片链接
+          link.download = '设备编号.png'; // 设置下载图片的文件名
+          link.click(); // 触发点击事件下载图片
+
+          // 清空画布
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+      } else {
+          console.error('Failed to get 2D context from canvas.');
+      }
+      },
     /** 查询部门下拉树结构 */
     getDeptTree() {
       deptTreeSelect().then(response => {
@@ -569,4 +624,26 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style scoped>
+.qrcode-image {
+    width: 100px;
+    /* 根据需求调整二维码图片大小 */
+    height: 100px;
+    margin-left: 60px;
+
+}
+
+.qrcode-container {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+}
+
+.zoomed-qrcode-image {
+    width: 100%;
+}
+</style>

src/views/system/equOther/index.vue

@@ -50,7 +50,13 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <!-- <el-table-column label="设备编号" align="center" key="equId" prop="equId"  /> -->
-              <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  />
+              <!-- <el-table-column label="设备编号" align="center" key="equCode" prop="equCode"  /> -->
+              <el-table-column prop="equCode" label="设备编号" header-align="center" align="center">
+                                    <template #default="{ row }">
+                                        <span @click="downloadText(row.equCode)"
+                                            style="cursor: pointer; color: blue;">{{ row.equCode }}</span>
+                                    </template>
+               </el-table-column>
               <el-table-column label="部门" align="center" key="deptName" prop="deptName"  />
               <el-table-column label="品牌型号" align="center" key="modelId" prop="modelId"  />
               <!-- <el-table-column label="设备分类" align="center" key="classify" prop="classify"  >
@@ -388,6 +394,54 @@ export default {
         row.status = row.status === "0" ? "1" : "0"
       })
     },
+
+    downloadText (text) {
+
+      const canvas = document.createElement('canvas');
+      canvas.width = 1400; // 设置画布宽度
+      canvas.height = 600; // 设置画布高度，以确保60:35的高宽比
+
+      // 获取 2D 上下文
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+          // 设置字体样式
+          ctx.font = 'bold 128px 楷体';
+
+          // 设置字体颜色
+          ctx.fillStyle = 'rgb(20, 17, 110)'; // 字体颜色为蓝色
+
+          // 设置字体间隔
+          const charSpacing = 35 / 4; // 字符间隔设置为字体宽度的1/4
+          const fontSize = 128; // 字体大小
+
+          // 计算文本的总宽度，包括字符间隔
+          let totalTextWidth = 0;
+          for (const char of text) {
+              totalTextWidth += ctx.measureText(char).width + charSpacing;
+          }
+          totalTextWidth -= charSpacing; // 最后一个字符后面没有间隔
+
+          // 初始绘制位置，水平居中
+          let currentX = (canvas.width - totalTextWidth) / 2;
+
+          // 绘制每个字符并设置间隔
+          for (const char of text) {
+              ctx.fillText(char, currentX, (canvas.height - fontSize) / 2); // 垂直居中绘制
+              currentX += ctx.measureText(char).width + charSpacing;
+          }
+
+          // 将画布保存为图片
+          const link = document.createElement('a');
+          link.href = canvas.toDataURL(); // 将画布转换为 base64 编码的图片链接
+          link.download = '设备编号.png'; // 设置下载图片的文件名
+          link.click(); // 触发点击事件下载图片
+
+          // 清空画布
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+      } else {
+          console.error('Failed to get 2D context from canvas.');
+      }
+    },
     // 取消按钮
     cancel() {
       this.open = false
@@ -559,4 +613,27 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.qrcode-image {
+    width: 100px;
+    /* 根据需求调整二维码图片大小 */
+    height: 100px;
+    margin-left: 60px;
+
+}
+
+.qrcode-container {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+}
+
+.zoomed-qrcode-image {
+    width: 100%;
+}
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />