vue canvas绘制信令图，动态显示标题、宽度、高度

需求:

1、 根据后端返回的数据，动态绘制出信令图
2、根据 dataStatus 返回值： 0 和 1， 判断 文字内容的颜色，0：#000，1：red
3.、根据 lineType 返回值： 0 和 1，  判断 箭头线的显示 是实线、虚线
4、根据返回的文字内容的换行符：“\r\n” 自动换行 （这步比较难，得计算高度）
最后的效果图大概是这样的：

 一、标题的动态获取


1-1、如果后端给你返回的标题是随机顺序的，这里需要根据全部标题数组做一下排序。
// 全部标题数组：
titletypeArr: ['ATP', 'MT', 'BTS', 'BSC', 'MSC', 'RBC'],// 后端返回的随机标题数组： 
resultTitle: ['MT', 'ATP' ]// 处理方法
this.typeArr = this.titletypeArr.filter(item => this.resultTitle.indexOf(item) !== -1)

 二、canvas绘制初始化

    // 初始化加载initData() {var mycanvas = document.getElementById("myCanvas");this.canvas = mycanvas;var context = mycanvas.getContext("2d");// 动态设置宽高一定要在 myCanvas 节点添加之后document.getElementById("myCanvas").width = this.typeArr.length * 320 - 120;document.getElementById("myCanvas").style.background = "#fff";const minHeight = window.innerHeight - 180;if (this.xlArr.length > 0) {document.getElementById("myCanvas").height =30 * this.xlArr.length + 80 < minHeight? minHeight: 30 * this.xlArr.length + 80;} else {document.getElementById("myCanvas").height = minHeight;}var height = this.paddingTop + 62; // 初始值this.xlArr.map((v, i) => {const k = this.typeArr.indexOf(v.startDataDir);const j = this.typeArr.indexOf(v.endDataDir);context.font = '13px "微软雅黑"'; // 设置字体// 时间文字context.fillStyle = '#000' // 时间颜色context.fillText(v.recTime.split(' ')[1], 40, height);// 箭头this.paintArr(v,[this.gapX * k + this.paddingLeft, height],[this.gapX * j + this.paddingLeft, height],k < j ? "right" : "left",context);var maxWidth = 260; // 最大宽度，超过这个宽度会自动换行var words = v.showInfo.split("\r\n");// 文字自动换行this.wrapText(v,context,words,this.gapX * (k < j ? k : j) + this.paddingLeft,height - 10,maxWidth,this.lineHeight);if (i < this.xlArr.length - 1) {let nextWords = this.xlArr[i + 1].showInfo.split("\r\n");height += (this.lineHeight * (words.length + nextWords.length)) / 2 + 30;} else {height += this.lineHeight * words.length + 30;}// console.log(height, "height")})// 画虚线以及标题this.typeArr.map((v, i) => {this.paintText(context, v, i);setTimeout(() => {this.drawDashed(context, i);}, 300)})// document.getElementById('container').onscroll = (e) => {//   // console.log('e:', e.target)//   this.left = e.target.scrollLeft// }// 屏蔽所有页面 右键菜单// document.oncontextmenu = (event) => {//   event.returnValue = false// }// 屏蔽当前页面 右键菜单// document.getElementById('container').oncontextmenu = (event) => {//   event.returnValue = false// }}

三、绘制箭头

    // 箭头paintArr(item, s, t, direction, ctx) {ctx.beginPath()ctx.lineWidth = 1if (item.dataStatus == 1) {ctx.strokeStyle = 'red'} else {ctx.strokeStyle = '#000' // 箭头线的颜色}if (item.lineType === 1) {ctx.setLineDash([5, 2]); // 虚线}ctx.moveTo(s[0], s[1])ctx.lineTo(t[0], t[1])ctx.stroke()ctx.closePath()ctx.beginPath()if (direction === 'right') {ctx.moveTo(t[0] - 10, t[1] + 3)ctx.lineTo(t[0], t[1])ctx.lineTo(t[0] - 10, t[1] - 3)} else {ctx.moveTo(t[0] + 10, t[1] - 3)ctx.lineTo(t[0], t[1])ctx.lineTo(t[0] + 10, t[1] + 3)}// ctx.closePath()ctx.stroke()// ctx.fill()},

四、绘制 标题列的虚线

    // 标题列的虚线drawDashed(ctx, i) {ctx.beginPath()ctx.lineWidth = 1ctx.strokeStyle = '#696969' // '#FF8080'//虚线的颜色ctx.setLineDash([5, 2])ctx.moveTo(320 * i + this.paddingLeft, this.paddingTop + 40);ctx.lineTo(320 * i + this.paddingLeft, 400 * this.typeArr.length);ctx.fill()ctx.stroke()ctx.closePath()},

五、文字自动换行 遇到换行符换行

    // 文字自动换行 遇到换行符换行，并且超出最大宽度换行，只计算了最多显示7行的情况，超出7行得再计算wrapText(item, context, words, x, y, maxWidth, lineHeight) {// console.log(words, "words")let originY = y;let len = words.length;let rectWidth = 0;for (var n = 0; n < len; n++) {// 不超出一行var testWidth = context.measureText(words[n]).width;if (testWidth < maxWidth) {if (rectWidth < testWidth) {rectWidth = testWidth;}}}// 在上面循环计算出文字实际最宽的位置，画出背景色遮挡箭头// 画背景色遮盖箭头, 背景色自己调，跟画布统一就行context.fillStyle = "#fff"; // 背景颜色context.fillRect(x + this.gapX / 2 - rectWidth / 2 - 4,originY,rectWidth + 6,lineHeight); // 填充黄色背景for (var n = 0; n < len; n++) {// 不超出一行var testWidth = context.measureText(words[n]).width;if (testWidth < maxWidth) {// console.log(words[n], 1);let currentY = y;if (len === 1) {currentY = y + 14;} else if (len === 2) {currentY = y + 2;} else if (len === 3) {currentY = y - 6;} else if (len === 4) {currentY = y - 18;} else if (len === 5) {currentY = y - 28;} else if (len === 6) {currentY = y - 38;} else if (len === 7) {currentY = y - 48;}if (item.dataStatus == 1) {context.fillStyle = 'red'} else {context.fillStyle = '#000' // 字体颜色}// context.fillStyle = "#000"; // 字体颜色context.fillText(words[n], x + this.gapX / 2 - testWidth / 2, currentY);if (len > 1) {y += lineHeight;}} else {console.log(words[n], 2);// 文字超出一行，需要换行展示// 实际大于页面width font-size: 12, 计算出显示多少行let singleWordwith = 13;// 计算一行显示的最大字数，以及显示多少行let len = Math.floor(maxWidth / singleWordwith);let lineCount = Math.ceil(words[n].length / len);for (let j = 0; j <= lineCount; j++) {// 截取出每行显示的字let word = words[n].substr(j * len, len);let wordWidth = context.measureText(word).width;// 写入画布// 画背景色遮盖箭头, 背景色自己调，跟画布统一就行context.fillStyle = "#fff";context.fillRect(x + this.gapX / 2 - wordWidth / 2,y - 4,wordWidth,lineHeight); // 填充黄色背景let currentY = y;if (lineCount === 2) {currentY = y + 2;} else if (lineCount === 3) {currentY = y - 6;} else if (lineCount === 4) {currentY = y - 18;} else if (lineCount === 5) {currentY = y - 28;} else if (lineCount === 6) {currentY = y - 38;} else if (lineCount === 7) {currentY = y - 48;}if (item.dataStatus == 1) {context.fillStyle = 'red'} else {context.fillStyle = '#000' // 字体颜色}// context.fillStyle = "#000";context.fillText(word, x + this.gapX / 2 - wordWidth / 2, currentY);y += lineHeight; // 换行}}}},

六、模拟后端返回的数据

// signalTimeData: [//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:12:48',//     showInfo: "M136\r\nT_Train=9340940ms\r\nDT:16",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:12:49',//     showInfo: "M24\r\nT_Train=9341070ms",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:13:06',//     showInfo: "M136\r\nT_Train=9358940ms\r\nDT:19\r\n此时，M24之后ATP发送3条APDU",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:13:07',//     showInfo: "AK:20\r\n此时，M24之后RBC发送3条AK，无APDU",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:13:08',//     showInfo: "TPDU_DR/SaPDU_D",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:13:09',//     showInfo: "TPDU_DC",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: "2023-09-10 09:13:09",//     showInfo: "DISC",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: "2023-09-10 09:13:09",//     showInfo: "NO CARRIER",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   }// ],

 全部代码如下:

<template><!-- :width="dialogWidth" --><vxe-modal v-model="sigModal" :title="titles" width="1200" min-width="550" :height="dialogHeight" :position="{ top: '3vh' }" @close="closeEvent" resize destroy-on-close><div class="con"><el-row style="margin-bottom:10px"><el-button type="primary" icon="el-icon-upload" @click="screenShot()">上传</el-button></el-row><div ref="screen" :style="{width: canvasWidth, height: canvasHeight}"><canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight">你的浏览器还不支持canvas</canvas></div></div></vxe-modal>
</template><script>
import html2canvas from 'html2canvas'
import { DownLoadFromTime } from '@/utils/times.js'
import { get_signallInfo } from '@/api/c3/offlineImportant.js'
import axios from 'axios'
export default {data() {return {uploadId: '',			titles: '信令图',dialogWidth: '90%',dialogHeight: '92%',sigModal: false,// 'ATP'-----'MT'------------ 'BTS'-------'BSC'----'MSC'------ 'RBC'//   Igsmr-R   Um_AMS/Um_BMS      Abis           A      PRIresultTitle: ['ATP', 'MT'], // 后台返回的随机顺序titletypeArr: ['ATP', 'MT', 'BTS', 'BSC', 'MSC', 'RBC'],typeArr: [],canvasWidth: '1080px',canvasHeight: (window.innerHeight) - 170 + 'px',minHeight: (window.innerHeight) - 170,// signalTimeData: [//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:12:48',//     showInfo: "M136\r\nT_Train=9340940ms\r\nDT:16",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:12:49',//     showInfo: "M24\r\nT_Train=9341070ms",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:13:06',//     showInfo: "M136\r\nT_Train=9358940ms\r\nDT:19\r\n此时，M24之后ATP发送3条APDU",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:13:07',//     showInfo: "AK:20\r\n此时，M24之后RBC发送3条AK，无APDU",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: '2023-09-10 09:13:08',//     showInfo: "TPDU_DR/SaPDU_D",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 1//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: '2023-09-10 09:13:09',//     showInfo: "TPDU_DC",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "ATP",//     endDataDir: "MT",//     recTime: "2023-09-10 09:13:09",//     showInfo: "DISC",//     dataDir: 0,//     dataDirStr: "上行",//     lineType: 0,//     dataStatus: 0//   },//   {//     startDataDir: "MT",//     endDataDir: "ATP",//     recTime: "2023-09-10 09:13:09",//     showInfo: "NO CARRIER",//     dataDir: 1,//     dataDirStr: "下行",//     lineType: 0,//     dataStatus: 0//   }// ],xlArr: [],canvas: null,left: 0,paddingLeft: 120,paddingTop: 20,gapX: 320, // x轴间隔gapY: 90, // y轴间隔lineHeight: 20 // 行高}},created() {// this.typeArr = this.titletypeArr.filter(item => this.resultTitle.indexOf(item) !== -1)// this.xlArr = this.signalTimeData// this.canvasWidth = (this.typeArr.length * 320) - 120 + 'px'this.fnHight()window.addEventListener('resize', this.fnHight, true)},mounted() {},destroyed() {this.$destroy()window.removeEventListener('resize', this.fnHight, true)},methods: {// 获取信令图数据getSignallList(accidentId) {let parmsData = {accidentId: accidentId}get_signallInfo(parmsData).then(res => {if (res.status === 200) {if (res.data.code === 0) {if (res.data.data) {this.resultTitle = res.data.data.interfaceTypesthis.typeArr = this.titletypeArr.filter(item => this.resultTitle.indexOf(item) !== -1)this.xlArr = res.data.data.mtDiagramInfoVoListthis.canvasWidth = (this.typeArr.length * 320) - 120 + 'px'} else {this.$XModal.message({ content: '未查询到信令图数据.', status: 'warning' })}} else {this.$XModal.message({ content: res.message, status: 'error' })}}})},// 截屏screenShot() {html2canvas(this.$refs.screen, {backgroundColor: '#FFFFFF',useCORS: true}).then((canvas) => {// 获取到canvascanvas.toBlob(blob => {// 将二进制对象的内容 转成fileconst file = new File([blob], Date.now() + '.png', { type: 'image/png' })const formData = new FormData()formData.append('file', file)formData.append('uploadId', this.uploadId)// 发起请求axios({headers: {'Authorization': this.$store.state.user.token,'showInfo-Type': 'multipart/form-data'},method: 'post',url: '/api/offline/analysisContent/uploadReportPdf',data: formData,}).then((res) => {// 上传成功if (res.status === 200) {this.$XModal.message({ content: '上传成功', status: 'success'})this.$emit('sumitSuccess', 'ok')}}).catch((error) => {// 上传失败 执行对应操作this.$XModal.message({ content: '上传失败', status: 'error' })})}, 'image/png')if (navigator.msSaveBlob) { // IE10+ let blob = canvas.msToBlob(); return navigator.msSaveBlob(blob, name);} else {let imageurl = canvas.toDataURL('image/png')const newTime = DownLoadFromTime(new Date())//这里需要自己选择命名规则let imagename = '信令图_' + 'G1884' + '_' + newTimethis.fileDownload(imageurl, imagename)}  })},// 下载截屏图片fileDownload(downloadUrl, downloadName) {let aLink = document.createElement("a")aLink.style.display = "none"aLink.href = downloadUrlaLink.download = `${downloadName}.png`// 触发点击-然后移除document.body.appendChild(aLink)aLink.click()document.body.removeChild(aLink)},closeEvent() {this.sigModal = false},fnHight() {setTimeout(() => {this.minHeight = (window.innerHeight) - 170}, 300)},// 标题的边框paintText(ctx, text, i) {// ctx.fillStyle = '#FEFECE'ctx.fillStyle = '#FFF'ctx.fillRect(320 * i + this.paddingLeft - 30, this.paddingTop, 60, 30); // 填充黄色背景// ctx.strokeStyle = 'red'ctx.strokeStyle = '#000' // '#A80036' // 标题的边框颜色ctx.strokeRect(320 * i + this.paddingLeft - 30, this.paddingTop, 60, 30); // 设置边框ctx.font = '12px "微软雅黑"' // 设置字体ctx.textBaseline = 'bottom' // 设置字体底线对齐绘制基线ctx.textAlign = 'left' // 设置字体对齐的方式ctx.fillStyle = 'Black'ctx.fillText(text, 320 * i + this.paddingLeft - 10, this.paddingTop + 22); // 填充文字标题// ctx.closePath()},// 箭头paintArr(item, s, t, direction, ctx) {ctx.beginPath()ctx.lineWidth = 1if (item.dataStatus == 1) {ctx.strokeStyle = 'red'} else {ctx.strokeStyle = '#000' // 箭头线的颜色}if (item.lineType === 1) {ctx.setLineDash([5, 2]); // 虚线}ctx.moveTo(s[0], s[1])ctx.lineTo(t[0], t[1])ctx.stroke()ctx.closePath()ctx.beginPath()if (direction === 'right') {ctx.moveTo(t[0] - 10, t[1] + 3)ctx.lineTo(t[0], t[1])ctx.lineTo(t[0] - 10, t[1] - 3)} else {ctx.moveTo(t[0] + 10, t[1] - 3)ctx.lineTo(t[0], t[1])ctx.lineTo(t[0] + 10, t[1] + 3)}// ctx.closePath()ctx.stroke()// ctx.fill()},// 标题列的虚线drawDashed(ctx, i) {ctx.beginPath()ctx.lineWidth = 1ctx.strokeStyle = '#696969' // '#FF8080'//虚线的颜色ctx.setLineDash([5, 2])ctx.moveTo(320 * i + this.paddingLeft, this.paddingTop + 40);ctx.lineTo(320 * i + this.paddingLeft, 400 * this.typeArr.length);ctx.fill()ctx.stroke()ctx.closePath()},// 文字自动换行 遇到换行符换行，并且超出最大宽度换行，只计算了最多显示7行的情况，超出7行得再计算wrapText(item, context, words, x, y, maxWidth, lineHeight) {// console.log(words, "words")let originY = y;let len = words.length;let rectWidth = 0;for (var n = 0; n < len; n++) {// 不超出一行var testWidth = context.measureText(words[n]).width;if (testWidth < maxWidth) {if (rectWidth < testWidth) {rectWidth = testWidth;}}}// 在上面循环计算出文字实际最宽的位置，画出背景色遮挡箭头// 画背景色遮盖箭头, 背景色自己调，跟画布统一就行context.fillStyle = "#fff"; // 背景颜色context.fillRect(x + this.gapX / 2 - rectWidth / 2 - 4,originY,rectWidth + 6,lineHeight); // 填充黄色背景for (var n = 0; n < len; n++) {// 不超出一行var testWidth = context.measureText(words[n]).width;if (testWidth < maxWidth) {// console.log(words[n], 1);let currentY = y;if (len === 1) {currentY = y + 14;} else if (len === 2) {currentY = y + 2;} else if (len === 3) {currentY = y - 6;} else if (len === 4) {currentY = y - 18;} else if (len === 5) {currentY = y - 28;} else if (len === 6) {currentY = y - 38;} else if (len === 7) {currentY = y - 48;}if (item.dataStatus == 1) {context.fillStyle = 'red'} else {context.fillStyle = '#000' // 字体颜色}// context.fillStyle = "#000"; // 字体颜色context.fillText(words[n], x + this.gapX / 2 - testWidth / 2, currentY);if (len > 1) {y += lineHeight;}} else {console.log(words[n], 2);// 文字超出一行，需要换行展示// 实际大于页面width font-size: 12, 计算出显示多少行let singleWordwith = 13;// 计算一行显示的最大字数，以及显示多少行let len = Math.floor(maxWidth / singleWordwith);let lineCount = Math.ceil(words[n].length / len);for (let j = 0; j <= lineCount; j++) {// 截取出每行显示的字let word = words[n].substr(j * len, len);let wordWidth = context.measureText(word).width;// 写入画布// 画背景色遮盖箭头, 背景色自己调，跟画布统一就行context.fillStyle = "#fff";context.fillRect(x + this.gapX / 2 - wordWidth / 2,y - 4,wordWidth,lineHeight); // 填充黄色背景let currentY = y;if (lineCount === 2) {currentY = y + 2;} else if (lineCount === 3) {currentY = y - 6;} else if (lineCount === 4) {currentY = y - 18;} else if (lineCount === 5) {currentY = y - 28;} else if (lineCount === 6) {currentY = y - 38;} else if (lineCount === 7) {currentY = y - 48;}if (item.dataStatus == 1) {context.fillStyle = 'red'} else {context.fillStyle = '#000' // 字体颜色}// context.fillStyle = "#000";context.fillText(word, x + this.gapX / 2 - wordWidth / 2, currentY);y += lineHeight; // 换行}}}},// 初始化加载initData() {var mycanvas = document.getElementById("myCanvas");this.canvas = mycanvas;var context = mycanvas.getContext("2d");// 动态设置宽高一定要在 myCanvas 节点添加之后document.getElementById("myCanvas").width = this.typeArr.length * 320 - 120;document.getElementById("myCanvas").style.background = "#fff";const minHeight = window.innerHeight - 180;if (this.xlArr.length > 0) {document.getElementById("myCanvas").height =30 * this.xlArr.length + 80 < minHeight? minHeight: 30 * this.xlArr.length + 80;} else {document.getElementById("myCanvas").height = minHeight;}var height = this.paddingTop + 62; // 初始值this.xlArr.map((v, i) => {const k = this.typeArr.indexOf(v.startDataDir);const j = this.typeArr.indexOf(v.endDataDir);context.font = '13px "微软雅黑"'; // 设置字体// 时间文字context.fillStyle = '#000' // 时间颜色context.fillText(v.recTime.split(' ')[1], 40, height);// 箭头this.paintArr(v,[this.gapX * k + this.paddingLeft, height],[this.gapX * j + this.paddingLeft, height],k < j ? "right" : "left",context);var maxWidth = 260; // 最大宽度，超过这个宽度会自动换行var words = v.showInfo.split("\r\n");// 文字自动换行this.wrapText(v,context,words,this.gapX * (k < j ? k : j) + this.paddingLeft,height - 10,maxWidth,this.lineHeight);if (i < this.xlArr.length - 1) {let nextWords = this.xlArr[i + 1].showInfo.split("\r\n");height += (this.lineHeight * (words.length + nextWords.length)) / 2 + 30;} else {height += this.lineHeight * words.length + 30;}// console.log(height, "height")})// 画虚线以及标题this.typeArr.map((v, i) => {this.paintText(context, v, i);setTimeout(() => {this.drawDashed(context, i);}, 300)})// document.getElementById('container').onscroll = (e) => {//   // console.log('e:', e.target)//   this.left = e.target.scrollLeft// }// 屏蔽所有页面 右键菜单// document.oncontextmenu = (event) => {//   event.returnValue = false// }// 屏蔽当前页面 右键菜单// document.getElementById('container').oncontextmenu = (event) => {//   event.returnValue = false// }}}
}
</script><style lang="scss" scoped>.con {position: relative;}.topTitle{position: absolute;background: #fff;top: 38px;padding-left: 15px;// width: 2580px;display: flex;li {display: inline-block;width: 320px;margin: 3px 0;}li:nth-last-child(1) {width: 100px;}span {// border: 1px solid #A80036;border: 1px solid #000;padding: 5px 10px;// background-color: #FEFECE;background-color: #fff;display: inline-block;}}#container {// overflow-x: scroll;// overflow-y: scroll;overflow: hidden;}#canvas {display: block;background-color: #fff;}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/803914.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

20240309web前端_第三周作业_教务系统页面

20240309web前端_第三周作业_教务系统页面

作业&#xff1a;教务系统页面 成果展示&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1…
阅读更多...
Verilog实现手表计时

Verilog实现手表计时

实现手表的计时功能&#xff1a; 1.具有start启动信号、pause暂停信号&#xff0c;可以自定义其触发机制。 2.具有时间更改接口&#xff0c;可以更改时、分、秒。 3.输出时、分、秒。 Verilog设计 模块端口定义&#xff1a; module watch1(input wire clk …
阅读更多...
STC89C52学习笔记（七）

STC89C52学习笔记（七）

STC89C52学习笔记&#xff08;七&#xff09; 综述&#xff1a;本文介绍了串口以及讲述了串口相关寄存器如何配置并给予相关代码。 一、修改代码注意事项 在修改代码时不要一次性加入一堆代码&#xff0c;不利于定位错误。可以先注释一些代码&#xff0c;待解决完毕问题后再…
阅读更多...
Angular 使用DomSanitizer

Angular 使用DomSanitizer

跨站脚本Cross-site scripting 简称XSS&#xff0c;是代码注入的一种&#xff0c;是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上&#xff0c;其他用户在使用网页时就会收到影响&#xff0c;这类攻击通常包含了HTML和用户端脚本语言&#xff08;JS&…
阅读更多...
ES6基础（JavaScript基础）

ES6基础（JavaScript基础）

本文用于检验学习效果&#xff0c;忘记知识就去文末的链接复习 1. ECMAScript介绍 ECMAScript是一种由Ecma国际&#xff08;前身为欧洲计算机制造商协会&#xff0c;英文名称是European Computer Manufacturers Association&#xff09;通过ECMA-262标准化的脚本程序设计语言…
阅读更多...
基于拉格朗日分布算法的电动汽车充放电调度MATLAB程序

基于拉格朗日分布算法的电动汽车充放电调度MATLAB程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 程序简介 该模型主要做的是基于拉格朗日分布算法的电动汽车充放电调度模型。利用蒙特卡洛模拟法模拟出电动汽车负荷曲线&#xff0c;并求解出无序充电功率曲线和有序充电曲线&#xff0c;该模型在电动汽车个…
阅读更多...
逆向案例十六——简单webpack逆向，财联社信息

逆向案例十六——简单webpack逆向，财联社信息

网址链接&#xff1a;财联社A股24小时电报-上市公司动态-今日股市行情报道 数据包sign参数为加密&#xff0c;可以直接搜索找参数的位置&#xff0c;搜索不到的情况下&#xff0c;在断点跟栈&#xff1a; 确定js文件所在位置&#xff0c;并打上断点。 点击加载刷新页面。可以发…
阅读更多...
REST API实战演练之JavaScript使用Rest API

REST API实战演练之JavaScript使用Rest API

咱们前面讲了一下如何创建REST API 假期别闲着&#xff1a;REST API实战演练之创建Rest API-CSDN博客 又讲了java客户端如何使用REST API 假期别闲着&#xff1a;REST API实战演练之客户端使用Rest API-CSDN博客 接下来咱们看看JavaScript怎么使用REST API。 一、新建一个…
阅读更多...
Log4J2漏洞（CVE-2024-44228）原理_log4j2漏洞原理，网络安全面试项目

Log4J2漏洞（CVE-2024-44228）原理_log4j2漏洞原理，网络安全面试项目

Apache log4j2-RCE 漏洞 一、漏洞简介 二、漏洞原理 三、靶场漏洞复现 四、总结 Apache log4j2-RCE 漏洞 一、漏洞简介 Apache Log4j2是一个基于Java的日志记录工具&#xff0c;当前被广泛应用于业务系统开发&#xff0c;开发 者可以利用该工具将程序的输入输出信息进行日…
阅读更多...
Feature Pyramid Networks for object detection

Feature Pyramid Networks for object detection

FPN 总述1.引言2.相关工作3. Feature Pyramid NetworksBottom-up pathwayTop-down pathway and lateral connections 4. 应用用于 RPN用于 Fast R-CNN 核心代码复现FPN网络结构ResNet Bottleneck完整代码 总述 下图中&#xff0c;蓝色边框表示的是特征图&#xff0c;边框越粗表…
阅读更多...
在Ubuntu Linux中安装boost库详细步骤

在Ubuntu Linux中安装boost库详细步骤

下载boost安装包 在Linux浏览器 Boost C Libraries 下载boost的最新版安装包 安装包解压缩 在安装目录中找到压缩包&#xff0c;右键点击压缩包&#xff0c;点击Extract to...解压缩至选择的目录 设置编译器 在解压缩后的目录中进入终端&#xff0c;运行命令&#xff1a; 如…
阅读更多...
LeetCode 2529. 正整数和负整数的最大计数——每日一题

LeetCode 2529. 正整数和负整数的最大计数——每日一题

上一篇博客&#xff1a;LeetCode 993. 二叉树的堂兄弟节点——每日一题 写在前面&#xff1a;大家好&#xff01;我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正&#xff0c;感谢大家的不吝赐教。我的唯一博客更新地址是&#xff1a;https://ac-fun.…
阅读更多...
力扣121. 买卖股票的最佳时机

力扣121. 买卖股票的最佳时机

Problem: 121. 买卖股票的最佳时机 文章目录 题目描述思路复杂度Code 题目描述 思路 1.定义一个int数组max大小同prices&#xff1b;定义int变量curMax初始化为0&#xff1b; 2.从后往前遍历数组&#xff0c;若当前元素prices[i] > curMax时&#xff0c;则使将其赋值给curMa…
阅读更多...
43.基于SpringBoot + Vue实现的前后端分离-疫苗发布和接种预约系统（项目 + 论文）

43.基于SpringBoot + Vue实现的前后端分离-疫苗发布和接种预约系统（项目 + 论文）

项目介绍 本次使用Java技术开发的疫苗发布和接种预约系统&#xff0c;就是运用计算机来管理疫苗接种预约信息&#xff0c;该系统是可以实现论坛管理&#xff0c;公告信息管理&#xff0c;疫苗信息管理&#xff0c;医生管理&#xff0c;医院信息管理&#xff0c;用户管理&#x…
阅读更多...
【ensp】VLAN间通信的解决办法

【ensp】VLAN间通信的解决办法

目录 VLAN间通信简介 VLAN间通信的两种方式 借助三层设备路由器进行VLAN间的通信&#xff08;也就是单臂路由&#xff09; 在端口上创建子接口之后为什么需要开启arp广播&#xff0c;是因为他是子接口吗? 拓扑图 交换机配置 路由器配置 查看路由器配置 测试能否实现…
阅读更多...
python统计分析——线性相关

python统计分析——线性相关

参考资料&#xff1a;python统计分析【托马斯】 对于两个相关的变量&#xff0c;相关性度量的是两个变量之间的关联程度。相反&#xff0c;线性回归是用一个变量的值来预测另一个变量的值。 1、相关系数 两个变量之间的相关系数回答了这个问题&#xff1a;“这两个变量有关系吗…
阅读更多...
Windows系统上运行appium连接iOS真机自动化测试

Windows系统上运行appium连接iOS真机自动化测试

步骤： 1、windows安装tidevice工具 2、Mac系统打包安装WebDriverAgent（WDA）工具 3、安装Appium 4、连接iOS手机 iOS自动化的实现和执行都依赖Mac系统，因为需要通过Xcodebuild编译安装WDA (WebDriverAgent)到iOS设备中，通过WDA实现对被测应用进行操作。而Windows系统无…
阅读更多...
LINUX系统触摸工业显示器芯片应用方案--Model4（简称M4芯片）

LINUX系统触摸工业显示器芯片应用方案--Model4（简称M4芯片）

背景介绍&#xff1a; 触摸工业显示器传统的还是以WINDOWS为主&#xff0c;但近年来&#xff0c;安卓紧随其后&#xff0c;但一直市场应用情况不够理想&#xff0c;反而是LINUX系统的触摸工业显示器大受追捧呢&#xff1f; 触摸工业显示器传统是以Windows系统为主&#xff0c…
阅读更多...
电脑更新到win11后不能上网,更新win11后无法上网

电脑更新到win11后不能上网,更新win11后无法上网

越来越多的用户升级了win11系统使用&#xff0c;然而有些用户发现电脑更新到win11后不能上网了&#xff0c;这是怎么回事呢?而且奇怪的是&#xff0c;网络状态显示已连接&#xff0c;但就是无法上网&#xff0c;原本以为重置网络就能搞定&#xff0c;但结果相反。针对这一情况…
阅读更多...
如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。

如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。

24年接手了一个18年的项目&#xff0c;想使用el-ui的组件库&#xff0c;得自己手动引入。 通过官网可以知道&#xff0c;首先得准备以下文件 <!-- 引入样式 --> <link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023