技术标签: css vue 前端 canva可画 javascript
<div id="firebox" >
<canvas id="fire" ref="fire1" height="2000" width="700" >
</canvas>
<button @click="prevPage" style="position: absolute; top: 10px; left: 10px;">上一页</button>
<button @click="nextPage" style="position: absolute; top: 10px; right: 10px;">下一页</button>
<span style="position: absolute; bottom: 10px; left: 10px;">当前页码: {
{ currentPage }}</span>
</div>
// 计算高度
const height = minHeight + (num - 4) * heightIncrement;
ctx.fillRect(0, 0, 700, height);
creatfire(num) {
const canvas = this.$refs.fire1;
const ctx = canvas.getContext("2d");
// 设置背景图片
const backgroundImage = new Image();
// 背景图片的位置
backgroundImage.src = "";
backgroundImage.onload = function () {
ctx.drawImage(backgroundImage, 0, 0, 300, 610);
// 在这里可以绘制其他内容或进行其他操作
};
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
const minHeight = 250;
const heightIncrement = 50;
// console.log(num);
// 计算高度
const height = minHeight + (num - 4) * heightIncrement;
ctx.fillRect(0, 0, 700, height);
// 设置字体颜色
ctx.fillStyle = "black";
ctx.font = "20px 宋体";
ctx.fillStyle = "white";
ctx.globalCompositeOperation = "source-over";
},
FireData() {
const canvas = this.$refs.fire1;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的绘制
ctx.font = "20px Arial";
const token = localStorage.getItem("x-auth-token");
const wdh = this.wdh
FireData(token, wdh).then((res) => {
// console.log('消防栓接口数据', res.data);
if (res.data.length !== 0) {
const tanker = res.data;
if (res.data.length>15) {
// this.itemsPerPage = Math.floor(res.data.length / 2);
this.creatfire(this.itemsPerPage)
}else{
this.creatfire(res.data.length)
}
const itemsPerPage = this.itemsPerPage; // 每页显示的项数
this.maxPage = Math.ceil(tanker.length / itemsPerPage); // 总页数
const currentPage = this.currentPage || 1; // 当前页,默认为1
const startIndex = (currentPage - 1) * itemsPerPage;//第xx条开始显示
const endIndex = Math.min(startIndex + itemsPerPage, tanker.length);
for (let i = startIndex; i < endIndex; i++) {
const item = tanker[i];
const offsetY = (i - startIndex) * 50; // 根据索引计算 Y 轴偏移
const y = 40 + offsetY;
ctx.fillText("消防资源",285, 40);
ctx.fillText(item["device_name"], 260, y + 40);
ctx.fillText("消防位置", 50, 40);
ctx.fillText(item["position"], 55, y + 40);
ctx.fillText("质保期限", 490, 40);
ctx.fillText(item["warranty"], 465, y + 40);
}
const base64Str = canvas.toDataURL("image/png");//定义图片
// this.fireimage 图片的数组
this.fireimage.push({ id: "fire"+this.currentPage, data: base64Str });//定义路径
this.getfiredata()//调生成图片的接口
}
});
},
getfiredata() {
const token = localStorage.getItem("x-auth-token");
const fire = this.fireimage;
const imageData = {
wdh: this.wdh,
address: fire,
};
getImage(token, imageData).then((res) => {
console.log("消防栓信息图片地址", res);
});
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.FireData();
}
},
nextPage() {
if (this.currentPage < this.maxPage) {
this.currentPage++;
this.FireData();
const canvas = this.$refs.fire1;
const base64Str = canvas.toDataURL("image/png");
this.fireimage.push({ id: "fire" + this.currentPage, data: base64Str });
}
this.getfiredata()
},
itemsPerPage: 15,//每页显示条数
currentPage: 1,//当前页
maxPage: '',//消防栓最大数量
fireimage: [],//消防栓
<canvas id="fire" ref="fire1" height="2000" width="700" ></canvas>
// 计算高度
const height = minHeight + (num - 4) * heightIncrement;
ctx.fillRect(0, 0, 700, height);
creatfire(num) {
const canvas = this.$refs.fire1;
const ctx = canvas.getContext("2d");
// 设置背景图片
const backgroundImage = new Image();
// 背景图片的位置
backgroundImage.src = "";
backgroundImage.onload = function () {
ctx.drawImage(backgroundImage, 0, 0, 300, 610);
// 在这里可以绘制其他内容或进行其他操作
};
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
const minHeight = 250;
const heightIncrement = 50;
// console.log(num);
// 计算高度
const height = minHeight + (num - 4) * heightIncrement;
ctx.fillRect(0, 0, 700, height);
// 设置字体颜色
ctx.fillStyle = "black";
ctx.font = "20px 宋体";
ctx.fillStyle = "white";
ctx.globalCompositeOperation = "source-over";
},
FireData() {
const canvas = this.$refs.fire1;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的绘制
ctx.font = "20px Arial";
const token = localStorage.getItem("x-auth-token");
const wdh = this.wdh
FireData(token, wdh).then((res) => {
if (res.data.length !== 0) {
const tanker = res.data;
this.creatfire(res.data.length)//绘制图片,依照数据长度
for (let i = 0; i < res.data.length; i++) {
const item = tanker[i];
const offsetY = i * 50; // 根据索引计算 Y 轴偏移
const y = 40 + offsetY;
ctx.fillText("消防资源",285, 40);
ctx.fillText(item["device_name"], 260, y + 40);
ctx.fillText("消防位置", 50, 40);
ctx.fillText(item["position"], 55, y + 40);
ctx.fillText("质保期限", 490, 40);
ctx.fillText(item["warranty"], 465, y + 40);
}
const base64Str = canvas.toDataURL("image/png");//定义图片
// this.fireimage 图片的数组
this.fireimage.push({ id: "fire" data: base64Str });//定义路径
this.getfiredata()//调生成图片的接口
}
});
},
getfiredata() {
const token = localStorage.getItem("x-auth-token");
const fire = this.fireimage;
const imageData = {
wdh: this.wdh,
address: fire,
};
getImage(token, imageData).then((res) => {
console.log("消防栓信息图片地址", res);
});
},
fireimage: [],//消防栓
<canvas ref="card1" height="200" width="320"></canvas>
<canvas ref="card2" height="200" width="320"></canvas>
<canvas ref="card3" height="200" width="320"></canvas>
<canvas ref="card4" height="200" width="320"></canvas>
<canvas ref="card5" height="200" width="320"></canvas>
<canvas ref="card6" height="200" width="320"></canvas>
<canvas ref="card7" height="200" width="320"></canvas>
<canvas ref="card8" height="200" width="320"></canvas>
<canvas ref="card9" height="200" width="320"></canvas>
<canvas ref="card10" height="200" width="320"></canvas>
createCard(index) {
const canvas = this.$refs["card" + index];
const ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
// 设置背景图片
const backgroundImage = new Image();
// 背景图片的位置
backgroundImage.src = "";
backgroundImage.onload = function () {
ctx.drawImage(backgroundImage, 0, 0, 300, 280);
// 在这里可以绘制其他内容或进行其他操作
};
// 设置矩形的填充颜色
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
ctx.fillRect(0, 0, 320, 210);
ctx.globalCompositeOperation = "source-over";
// 设置字体颜色
ctx.fillStyle = "black";
// ctx.font = "15px 宋体";
ctx.fillStyle = "#ffffff";
ctx.globalCompositeOperation = "source-over";
ctx.font = "16px 黑体";
const tanker = this.carddata[index - 1];
const cardInfo = [
{ text: tanker["piont_name"] + '打卡详情', x: 85, y: 50 },
{ text: "人员", x: 20, y: 100 },
{ text: tanker["checker_name"], x: 65, y: 100 },
{ text: "时间", x: 20, y: 150 },
{ text: tanker["time"], x: 65, y: 150 },
];
cardInfo.forEach((item) => {
ctx.fillText(item.text, item.x, item.y);
});
const base64Str = canvas.toDataURL("image/png");
this.list.push({ id: "xg" + index.toString().padStart(2, "0"), data: base64Str });
},
3.调数据接口
PatroInfo() {
const token = localStorage.getItem("x-auth-token");
const wdh = this.wdh
const piontId = this.card
PatroInfo(token, wdh, piontId).then((res) => {
// console.log('巡更信息接口', res.data);
this.carddata = res.data
// 调用 createCard 函数根据卡片数量动态生成卡片
for (let i = 1; i <= this.carddata.length; i++) {
this.createCard(i);
}
this.getxungengList()//调生成图片接口
});
},
4.生成图片方法
getxungengList() {
const token = localStorage.getItem("x-auth-token");
const list = this.list;
const imageData = {
wdh: this.card,
address: list,
};
getImage(token, imageData).then((res) => {
console.log("获取巡更图片", res);
});
},
文章浏览阅读3.8k次。1、将下载好的萤石js插件,添加到SoringBoot项目中。位置可参考下图所示。(容易出错的地方,在将js插件在html页面引入时,发生路径错误的问题)所以如果对页面中引入js的路径不清楚,可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。(可直接将如下代码复制到你创建的html页面中)<!DOCTYPE html><html lan..._ezuikit 测试的url
文章浏览阅读322次。第二步,在弹出的对话框选择,设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期,这里以此为例,然后点击“下一步”。第四步,把使用虚拟串口打勾(GPRS设备),根据需要选择要生成虚拟口,这里以选择KVCOM1为例,然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时,为下485接口上的设备地址。第六步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“第五步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“_组态王ua
文章浏览阅读9.4k次,点赞22次,收藏19次。安装npm相当于安装node.js,Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置
文章浏览阅读748次,点赞21次,收藏26次。大家好,小编来为大家解答以下问题,python基础训练100题,python入门100例题,现在让我们一起来看看吧!宝子们还在新手村练级的时候,不单要吸入基础知识,夯实自己的理论基础,还要去实际操作练练手啊!由于文章篇幅限制,不可能将100道题全部呈现在此除了这些,下面还有我整理好的基础入门学习资料,视频和讲解文案都很齐全,用来入门绝对靠谱,需要的自提。保证100%免费这不,贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~
文章浏览阅读1k次。 为了在 Linux ( Ubuntu) 上安装sublime,一般大家都会选择常见的教程或是 sublime 官网教程,然而在国内这种方法可能失效。为此,需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后,点击右上角 download, 或是直接访问点击打开链接,即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后,打开终端,进入安装..._ubuntu 安装sumlime text打不开
文章浏览阅读563次,点赞13次,收藏6次。CrossOver24是一款类虚拟机软件,专为macOS和Linux用户设计。它的核心技术是Wine,这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24,用户可以在不购买Windows授权或使用传统虚拟机的情况下,直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能,如自动配置、无缝集成和实时传输等,以实现高效的跨平台操作体验。
文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡
文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式,旧文回顾:深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding,来解..._filterconfig selectencoding
文章浏览阅读651次。转自:http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误,所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字符还原回来_js encodeur decodeurl
文章浏览阅读1.9w次,点赞6次,收藏3次。前言在日常的Android开发当中,我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable,大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是:目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable
文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse,Help —> Install NewSoftware,界面如下: <2>点击add...,按下图所示操作: name:随意填写,Location:http://eclipse-color-th..._ecplise高大上设置
文章浏览阅读2.8k次。一,下载mysql:http://dev.mysql.com/downloads/mysql/; 打开页面之后,在Select Platform:下选择linux Generic,如果没有出现Linux的选项,请换一个浏览器试试。我用的谷歌版本不可以,换一个别的浏览器就行了,如果还是不行,需要换一个翻墙的浏览器。 二,下载完后解压缩并放到安装文件夹下: 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle