zhulongchuan/cquavui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhulongchuan 2025-09-24 18:08:20 +08:00
parent 6b4cb11ead
commit 003ab32ffd
9 changed files with 526 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -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",
"qrcode": "^1.5.3",
"qrcodejs2-fix": "^0.0.1"
"yarn": "^1.22.22"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",

15
src/main.ts Normal file
View File

@ -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')

29
src/router/index.ts Normal file
View File

@ -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;

82
src/style.css Normal file
View File

@ -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;
}
}

78
src/views/system/equ/index.vue
View File

@ -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
@ -571,3 +625,25 @@ export default {
}
}
</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>

161
src/views/system/equAirport/index.vue
View File

@ -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 + '"的新密码', "提示", {
@ -566,3 +698,26 @@ export default {
}
}
</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>

79
src/views/system/equCounter/index.vue
View File

@ -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 => {
@ -570,3 +625,25 @@ export default {
}
}
</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>

79
src/views/system/equOther/index.vue
View File

@ -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
@ -560,3 +614,26 @@ export default {
}
}
</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>

1
src/vite-env.d.ts vendored Normal file
View File

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