Vue使用FullCalendar实现日历/周历/月历

Vue使用FullCalendar实现日历/周历/月历

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

效果图

日历
在这里插入图片描述
周历
在这里插入图片描述
月历
在这里插入图片描述

安装插件
"@fullcalendar/core": "^6.1.14","@fullcalendar/daygrid": "^6.1.14","@fullcalendar/interaction": "^6.1.14","@fullcalendar/timegrid": "^6.1.14","@fullcalendar/vue": "^6.1.14","moment": "^2.30.1",
部分代码

html

<!-- 日程部分--><div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;"><FullCalendar :options="calendarOptions" ref="FullCalendar"><template v-slot:eventContent='arg'><el-tooltipclass="box-item"effect="dark"placement="top-start"><template #content><span >{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }} {{ arg.event.extendedProps.reportId }} {{ arg.event.title }}</span></template><div class="test-div" v-if="viewType!='dayGridMonth'"><div class="info-part"><div class="info-desc">{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }}</div><div class="info-desc">{{ arg.event.extendedProps.reportId }}</div><div class="info-desc">{{ arg.event.title }}</div></div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'top')">去程</div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'mid')">工作</div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'bottom')">返程</div></div><div class="test-div test-div22" v-if="viewType=='dayGridMonth'"><div class="info-part-month" :style="{background:arg.event.backgroundColor}">{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }}<!-- {{ arg.event.start }}~{{ arg.event.end }} --></div></div></el-tooltip></template></FullCalendar><!-- 点击会议弹窗内容 --><div v-if="selectedEvent"><el-dialog :close-on-click-modal="true" :visible="this.showDialog" @close="closeDialog()" title="日程详情"><h3>{{ this.selectedEvent.title }}</h3><p>开始时间：{{ this.selectedEvent.start }}</p><p>结束时间：{{ this.selectedEvent.end }}</p><p>内容：{{ this.selectedEvent.context }}</p><p>职位：{{ this.selectedEvent.zw }}</p><p>性别：{{ this.selectedEvent.sex }}</p><p>年龄：{{ this.selectedEvent.age }}</p></el-dialog></div>

data&&methods

data() {return {//监听到的当前view模式viewType:'',//普通查询时间queryStartDate: null,//日程弹窗开关showDialog: false,//日程弹窗内容selectedEvent: null,//抽屉窗开关drawer: false,//日程内容集合meetingArr:meetingArr,calendarOptions: {allDaySlot:false,//是否在日历上方显示all-day(全天)axisFormat:'h(:mm)tt',// 加载的视图plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],// 视图类型 初始显示的视图 视图名称规则 比如dayGridPlugin去掉Plugin 加上Month或者Week或者DayinitialView: 'dayGridMonth',//dayGridMonth  timeGridWeek  timeGridDay// 语言选项  设置为中文后 部分文本会替换为中文 但是不全面locale: 'zh-cn',firstDay: 1,firstHour:1,  //无用// slotMinutes:10,//在agenda的视图中, 两个时间之间的间隔(分钟)  无用handleWindowResize:true,//是否随浏览器窗口大小变化而自动contentHeight:'600px',  //设置日历主体内容的高度,不包括header部分aspectRatio:2,//日历单元格宽高比dayMaxEvents:true,//时间中网格内容高度超出单元格高度时，是否折叠，如果选择false，则会完全展开网格内容，并自动撑开日历单元格高度eventLimit:true,// 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示selectEventOverlap:false,// 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许  无用slotEventOverlap:false,//设置视图中的事件显示是否可以重叠覆盖  有用// 配置日历头部// 按钮: prev为切换(上)下一月(/周/日)   next today 跳转到今天    // 文本: title 年月(YYYY-MM)// 按钮: dayGridMonth月 timeGridWeek周 timeGridDay日headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay',},eventTimeFormat: {// like '14:30:00'hour: "2-digit",minute: "2-digit",meridiem: false,hour12: false, // 设置时间为24小时},// 设置各种按钮的文字  默认是英文的buttonText: {today: '今天',month: '月',week: '周',day: '日',list: '表'},customButtons: {prev: {click: () => {this.prevWeekClick();}},next: {click: () => {this.nextWeekClick();}}},// 初始就存在的事件【日程内容】initialEvents: [],// 是否可拖拽editable: false,// 是否可选择添加selectable: true,datesSet:this.datesSet, //日期渲染；修改日期范围后触发// 选择时触发函数select: this.handleDateSelect,// 点击事项触发函数eventClick: this.handleEventClick,// 移动事项或者拓展事项时间触发函数eventsSet: this.handleEvents,// 全天行 的文本显示内容// allDayText: '全天',// 最小时间slotMinTime: '00:00:00',// 最大时间slotMaxTime: '23:59:59',// 是否可以进行（拖动、缩放）修改//editable: false,},};},
methods: {datesSet(info) {   //注意：该方法在页面初始化时就会触发一次console.log('间接监听view的变化',info.view.type)this.viewType = info.view.type// this.search()  //请求本页数据Message.success('当前模式'+info.view.type);},// 向前点击prevWeekClick(){let calendarApi = this.$refs['FullCalendar'].getApi();calendarApi.prev();const startTime = calendarApi.view.activeStart;const endTime = calendarApi.view.activeEnd;console.log(startTime,endTime);},// 向后点击nextWeekClick(){let calendarApi = this.$refs['FullCalendar'].getApi();calendarApi.next();const startTime = calendarApi.view.activeStart;const endTime = calendarApi.view.activeEnd;console.log(startTime,endTime);},//UTC时间去掉TformmatTime(time){const utcTimestamp = time;const date = new Date(utcTimestamp);const year = date.getUTCFullYear();const month = String(date.getUTCMonth() + 1).padStart(2, '0');const day = String(date.getUTCDate()).padStart(2, '0');const hours = String(date.getUTCHours()).padStart(2, '0');const minutes = String(date.getUTCMinutes()).padStart(2, '0');const seconds = String(date.getUTCSeconds()).padStart(2, '0');const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;return formattedDateTime},//计算距离起点时间的距离getStandLen(obj,type){let styleObj = {top:0,left:0,height:0,background:''}let startTime = new Date(obj.start).getTime();let endTime = new Date(obj.end).getTime();let specificTime = 0let intervalEndTime = 0if(type=='top'){specificTime = new Date(obj.extendedProps.topSt).getTime();intervalEndTime = new Date(obj.extendedProps.topEt).getTime();styleObj.background='rgba(204, 204, 204,0.4)'}else if(type=='mid'){specificTime = new Date(obj.extendedProps.midSt).getTime();intervalEndTime = new Date(obj.extendedProps.midEt).getTime();styleObj.background='rgba(255,255,0,0.4)'}else if(type=='bottom'){specificTime = new Date(obj.extendedProps.bottomSt).getTime();intervalEndTime = new Date(obj.extendedProps.bottomEt).getTime();styleObj.background='rgba(229, 229, 229,0.4)'}let elapsedTimePercentage = ((specificTime - startTime) / (endTime - startTime)) * 100;let intervalPercentage = ((intervalEndTime - specificTime) / (endTime - startTime)) * 100;styleObj.top = elapsedTimePercentage?elapsedTimePercentage+'%':0styleObj.height = intervalPercentage?intervalPercentage+'%':0console.log('top:'+elapsedTimePercentage);// console.log(`Percentage of time interval from 03:00:00 to 04:00:00: ${intervalPercentage.toFixed(2)}%`);return styleObj},/* 普通查询方法*/quertStart() {let calendarApi = this.$refs.FullCalendar.getApi()//非空if (this.queryStartDate != null) {// gotoDate方法是让当前视图跳转到指定日期的位置calendarApi.gotoDate(this.queryStartDate)} else {//跳转到今日calendarApi.today()}},/* 获取指定日期范围的所有日程信息 */toClick() {// 获取 FullCalendar 实例const calendar = this.$refs.FullCalendar.getApi();// 定义搜索范围的起始和结束时间const startDate = moment("2015-06-06");const endDate = moment("2028-06-08");// 获取日历中的所有事件const events = calendar.getEvents();// 根据范围条件筛选事件const filteredEvents = events.filter(event => {// 获取事件的开始时间和结束时间const eventStart = moment(event.start);const eventEnd = moment(event.end);// 判断事件是否在范围内return eventStart.isBetween(startDate, endDate, null, '[]') || eventEnd.isBetween(startDate,endDate, null, '[]');});// 处理筛选出的事件console.log(filteredEvents);},/* 点击会议弹窗具体内容*/handleEventClick(info) {// 获取点击的事件对象const event = info.event;// 更新选中的事件this.selectedEvent = {title: event.title,start: moment(event.start).format('YYYY-MM-DD HH:mm'),end: moment(event.end).format('YYYY-MM-DD HH:mm'),zw: event.extendedProps.zw,context: event.extendedProps.context,age: event.extendedProps.age,sex: event.extendedProps.sex};console.info(info)console.info(this.selectedEvent)//开启弹窗this.showDialog = true},//handleDateSelect(info){const event = info.event;console.log('信息',info)Message.success('点击日期'+info.startStr+'-'+info.endStr);},/* 关闭日程弹窗方法*/closeDialog() {this.showDialog = false},/* 申请会议按钮 */toMeetingClick() {//根据自己的业务进行处理...}},

event事件数据

const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');const formattedDate = `${year}-${month}-${day}`;
const formattedDateTomrrow = `${year}-${month}-${Number(day)+1}`
const formattedDateAfterTomrrow = `${year}-${month}-${Number(day)+2}`
const formattedDateYestoday = `${year}-${month}-${Number(day)-1}`
const formattedDateBeforeYestoday = `${year}-${month}-${Number(day)-2}`let meetingArr = [{id: 1,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDate + 'T00:00:00',end: formattedDate + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 5,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDate + 'T01:30:00',end: formattedDate + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 6,reportId:'SR20240527435777',title: `机器维修单`,start: formattedDate + 'T01:30:00',end: formattedDate + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// allDay:true,// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 7,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDate + 'T07:30:00',end: formattedDate + 'T08:30:00',},{id: 2,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDate + 'T13:00:00',end: formattedDate + 'T14:20:00',},{id: 3,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDate + 'T15:10:00',end: formattedDate + 'T16:10:00',},{id: 3,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDate + 'T16:00:00',end: formattedDate + 'T17:10:00',},{id: 4,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDate + 'T17:30:00',end: formattedDate + 'T18:10:00',},//明天{id: 8,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateTomrrow + 'T00:00:00',end: formattedDateTomrrow + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateTomrrow + 'T02:30:00',topEt:formattedDateTomrrow + 'T03:00:00',//中间时段midSt:formattedDateTomrrow + 'T03:30:00',midEt:formattedDateTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateTomrrow + 'T05:30:00',bottomEt:formattedDateTomrrow + 'T06:00:00',},{id: 9,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateTomrrow + 'T01:30:00',end: formattedDateTomrrow + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateTomrrow + 'T02:30:00',topEt:formattedDateTomrrow + 'T03:00:00',//中间时段midSt:formattedDateTomrrow + 'T03:30:00',midEt:formattedDateTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateTomrrow + 'T05:30:00',bottomEt:formattedDateTomrrow + 'T06:00:00',},{id: 10,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateTomrrow + 'T07:30:00',end: formattedDateTomrrow + 'T08:30:00',},{id: 11,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateTomrrow + 'T13:00:00',end: formattedDateTomrrow + 'T14:20:00',},{id: 12,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateTomrrow + 'T15:10:00',end: formattedDateTomrrow + 'T16:10:00',},{id: 13,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateTomrrow + 'T16:00:00',end: formattedDateTomrrow + 'T17:10:00',},{id: 14,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateTomrrow + 'T17:30:00',end: formattedDateTomrrow + 'T18:10:00',},//后天{id: 8,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateAfterTomrrow + 'T00:00:00',end: formattedDateAfterTomrrow + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateAfterTomrrow + 'T02:30:00',topEt:formattedDateAfterTomrrow + 'T03:00:00',//中间时段midSt:formattedDateAfterTomrrow + 'T03:30:00',midEt:formattedDateAfterTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateAfterTomrrow + 'T05:30:00',bottomEt:formattedDateAfterTomrrow + 'T06:00:00',},{id: 9,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateAfterTomrrow + 'T01:30:00',end: formattedDateAfterTomrrow + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateAfterTomrrow + 'T02:30:00',topEt:formattedDateAfterTomrrow + 'T03:00:00',//中间时段midSt:formattedDateAfterTomrrow + 'T03:30:00',midEt:formattedDateAfterTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateAfterTomrrow + 'T05:30:00',bottomEt:formattedDateAfterTomrrow + 'T06:00:00',},{id: 10,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateAfterTomrrow + 'T07:30:00',end: formattedDateAfterTomrrow + 'T08:30:00',},{id: 11,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateAfterTomrrow + 'T13:00:00',end: formattedDateAfterTomrrow + 'T14:20:00',},{id: 12,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateAfterTomrrow + 'T15:10:00',end: formattedDateAfterTomrrow + 'T16:10:00',},{id: 13,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateAfterTomrrow + 'T16:00:00',end: formattedDateAfterTomrrow + 'T17:10:00',},{id: 14,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateAfterTomrrow + 'T17:30:00',end: '2024-06-16' + 'T18:10:00',},//昨天{id: 15,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateYestoday + 'T00:00:00',end: formattedDateYestoday + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateYestoday + 'T02:30:00',topEt:formattedDateYestoday + 'T03:00:00',//中间时段midSt:formattedDateYestoday + 'T03:30:00',midEt:formattedDateYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateYestoday + 'T05:30:00',bottomEt:formattedDateYestoday + 'T06:00:00',},{id: 16,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateYestoday + 'T01:30:00',end: formattedDateYestoday + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateYestoday + 'T02:30:00',topEt:formattedDateYestoday + 'T03:00:00',//中间时段midSt:formattedDateYestoday + 'T03:30:00',midEt:formattedDateYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateYestoday + 'T05:30:00',bottomEt:formattedDateYestoday + 'T06:00:00',},{id: 17,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateYestoday + 'T07:30:00',end: formattedDateYestoday + 'T08:30:00',},{id: 18,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateYestoday + 'T13:00:00',end: formattedDateYestoday + 'T14:20:00',},{id: 19,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateYestoday + 'T15:10:00',end: formattedDateYestoday + 'T16:10:00',},{id: 20,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateYestoday + 'T16:00:00',end: formattedDateYestoday + 'T17:10:00',},{id: 21,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateYestoday + 'T17:30:00',end: formattedDateYestoday + 'T18:10:00',},//前天{id: 22,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateBeforeYestoday + 'T00:00:00',end: formattedDateBeforeYestoday + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateBeforeYestoday + 'T02:30:00',topEt:formattedDateBeforeYestoday + 'T03:00:00',//中间时段midSt:formattedDateBeforeYestoday + 'T03:30:00',midEt:formattedDateBeforeYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateBeforeYestoday + 'T05:30:00',bottomEt:formattedDateBeforeYestoday + 'T06:00:00',},{id: 23,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateBeforeYestoday + 'T01:30:00',end: formattedDateBeforeYestoday + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateBeforeYestoday + 'T02:30:00',topEt:formattedDateBeforeYestoday + 'T03:00:00',//中间时段midSt:formattedDateBeforeYestoday + 'T03:30:00',midEt:formattedDateBeforeYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateBeforeYestoday + 'T05:30:00',bottomEt:formattedDateBeforeYestoday + 'T06:00:00',},{id: 24,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateBeforeYestoday + 'T07:30:00',end: formattedDateBeforeYestoday + 'T08:30:00',},{id: 25,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateBeforeYestoday + 'T13:00:00',end: formattedDateBeforeYestoday + 'T14:20:00',},{id: 26,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateBeforeYestoday + 'T15:10:00',end: formattedDateBeforeYestoday + 'T16:10:00',},{id: 27,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateBeforeYestoday + 'T16:00:00',end: formattedDateBeforeYestoday + 'T17:10:00',},{id: 28,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateBeforeYestoday + 'T17:30:00',end: formattedDateBeforeYestoday + 'T18:10:00',},
]export default meetingArr;

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

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

相关文章

【unity 新手教程 001/100】安装与窗口布局介绍

【unity 新手教程 001/100】安装与窗口布局介绍

欢迎关注 、订阅专栏 【unity 新手教程】谢谢你的支持&#xff01;&#x1f49c;&#x1f49c; Unity下载与安装 &#x1f449;点击跳转详细图文步骤&#xff1a;Unity Hub Unity 编辑器 窗口布局&#xff1a; Hierarchy: 层级窗口 | 默认 Sample Scene (main camera、direc…
阅读更多...
75.WEB渗透测试-信息收集- WAF、框架组件识别（15）

75.WEB渗透测试-信息收集- WAF、框架组件识别（15）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;74.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;14&#xff09; php常见的组件…
阅读更多...
视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决

视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决

安防视频监控EasyCVR安防监控视频系统采用先进的网络传输技术&#xff0c;支持高清视频的接入和传输&#xff0c;能够满足大规模、高并发的远程监控需求。EasyCVR平台支持多种视频流的外部分发&#xff0c;如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WebRTC、fmp4等&#xf…
阅读更多...
xmind--如何快速将Excel表中多列数据，复制到XMind分成多级主题

xmind--如何快速将Excel表中多列数据，复制到XMind分成多级主题

每次要将表格中的数据分成多级时&#xff0c;只能复制粘贴吗 快来试试这个简易的方法吧 这个是原始的表格&#xff0c;分成了4级 步骤&#xff1a; 1、我们可以先按照这个层级设置下空列&#xff08;后买你会用到这个空列&#xff09; 二级不用加、三级前面加一列、四级前面加…
阅读更多...
Chrome v8 pwn 前置

Chrome v8 pwn 前置

文章目录 参考用到啥再更新啥简介环境搭建depot_tools和ninjaturbolizer 调试turbolizer使用结构数组 ArrayArrayBufferDataViewWASMJSObject结构Hidden Class命名属性-快速属性Fast Properties命名属性-慢速属性Slow Properties 或 字典模式Dictionary Mode编号属性 (Elements…
阅读更多...
集合的概念

集合的概念

目录 概述 1 集合定义 1.1 基本定义 1.2 元素和集合的关系表述 1.3 集合分类 1.4 集合描述 1.5 集合关系描述 2 集合的运算 2.1 集合关系的定义 2.2 集合的运算 概述 在高等数学中&#xff0c;集合是指由一些具有共同特征的对象组成的整体。这些对象可以是数字、字母…
阅读更多...
STM32的外部中断实现按键控制led灯亮灭（HAL库）

STM32的外部中断实现按键控制led灯亮灭（HAL库）

一&#xff1a;stm32外部中断概述 1&#xff1a;stm32的外部中断线 STM32的每个IO都可以作为外部中断输入。 STM32的中断控制器支持19个外部中断/事件请求&#xff1a; 线0~15&#xff1a;对应外部IO口的输入中断。 线16&#xff1a;连接到PVD输出。 线17&#xff1a;连接到R…
阅读更多...
从零开始：神经网络（1）——什么是人工神经网络

从零开始：神经网络（1）——什么是人工神经网络

声明&#xff1a;本文章是根据网上资料&#xff0c;加上自己整理和理解而成&#xff0c;仅为记录自己学习的点点滴滴。可能有错误&#xff0c;欢迎大家指正。 人工神经网络&#xff08;Artificial Neural Network&#xff0c;简称ANN&#xff09;是一种模仿生物神经网络结构和功…
阅读更多...
jenkins集成allure测试报告

jenkins集成allure测试报告

1.allure插件安装 &#xff08;1&#xff09;点击首页的【Manage Jenkins】-【Manage Plugins】 &#xff08;2&#xff09;选择【Available】选项&#xff0c;搜索输入框输入Allure&#xff0c;搜索出来的名字就叫Allure&#xff0c;当安装后名字会变为Allure Jenkins Plugi…
阅读更多...
【MySQL】Ubuntu22.04 安装 MySQL8 数据库详解

【MySQL】Ubuntu22.04 安装 MySQL8 数据库详解

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》《MySQL》《Qt》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 一、安装目录 1.1 更新软件源 sheepAron:/root$ sudo apt update1.2 安装mysql_ser…
阅读更多...
《0基础》学习Python——第十九讲__爬虫/＜2＞

《0基础》学习Python——第十九讲__爬虫/＜2＞

一、用get请求爬取一般网页 首先由上节课我们可以找到URL、请求方式、User-Agent以及content-type 即&#xff1a;在所在浏览器页面按下F12键&#xff0c;之后点击网路-刷新&#xff0c;找到第一条双击打开标头即可查看上述所有内容&#xff0c;将上述URL、User-Agent所对应的…
阅读更多...
Vue3--

Vue3--

一、pinia &#xff08;集中式状态&#xff08;数据&#xff09;管理&#xff09; 1、准备一个效果 2、存储读取数据 3、修改数据三种方式 4、storeToRefs 5、getters 当state中的数据&#xff0c;需要经过处理后在使用时&#xff0c;可以使用getters配置 6、$subscribe的使用…
阅读更多...
基于FPGA的YOLOV5s神经网络硬件部署

基于FPGA的YOLOV5s神经网络硬件部署

一 YOLOV5s 本设计以YOLOV5s部署于FPGA上为例进行分析概述。YOLOV5s网络主要包括backbone、neck、head三部分。 涉及的关键算子&#xff1a; Conv&#xff1a;卷积&#xff0c;包括3*3、1*1&#xff0c;stride1/2Concat&#xff1a;Upsample:Pooling&#xff1a;ADD 二 评估 …
阅读更多...
独立开发者系列（32）——node开发周边命令

独立开发者系列（32）——node开发周边命令

Node环境的本地代码实现了实时开发实时看到效果&#xff0c;但是node在各种情况下&#xff0c;经常容易报错。主要是各种依赖包和环境问题&#xff0c;这个是比较折腾人的。这里将各种常用命令行和开发进行一个整理。 命令行就是我们最常用的winR执行,打开的黑乎乎的窗口。 命…
阅读更多...
P4-AI产品经理-九五小庞

P4-AI产品经理-九五小庞

从0开始做AI产品的完整工作方法 项目启动 项目实施 样本测试模型推荐引擎 构建DMP&#xff08;数据管理平台&#xff09; 项目上线
阅读更多...
React 学习——行内样式、外部样式、动态样式

React 学习——行内样式、外部样式、动态样式

三种样式的写法 import "./index.css"; //同级目录下的样式文件 function App() {const styleCol {color: green,fontSize: 40px}// 动态样式const isBlock false;return (<div className"App">{/* 行内样式 */}<span style{{color:red,fontSiz…
阅读更多...
【区块链 + 智慧政务】山东荣成：区块链政务诚信管理系统 | FISCO BCOS应用案例

【区块链 + 智慧政务】山东荣成：区块链政务诚信管理系统 | FISCO BCOS应用案例

2018 年 9 月&#xff0c;荣成市政府与山东观海数据技术有限公司合作&#xff0c;基于 FISCO BCOS 区块链技术推动智慧城市建设&#xff0c; 其中&#xff0c;信用管理是智慧城市核心之一。 荣成市区块链政务诚信管理系统&#xff0c;建设信用信息征集、评价、披露和应用于一体…
阅读更多...
PY32F071单片机，主频最高72兆，资源丰富，有USB,DAC,运放

PY32F071单片机，主频最高72兆，资源丰富，有USB,DAC,运放

PY32F071 系列单片机是基于32 位 ARM Cortex-M0 内核的微控制器&#xff0c;宽电压工作范围的 MCU。芯片嵌入高达 128 Kbytes flash 和 16 Kbytes SRAM 存储器&#xff0c;最高72 MHz工作频率。芯片支持串行调试 (SWD)。PY32F071单片机提供了包含了HAL和LL两种不同层次的驱动库…
阅读更多...
Qt SQLite数据库学习总结

Qt SQLite数据库学习总结

到此为止&#xff0c;就使用Qt进行SQLite数据库的操作&#xff0c;做一次总结 1. Qt中数据库操作的相关概念和类 Qt 数据库编程相关基本概念https://blog.csdn.net/castlooo/article/details/140497177 2.表的只读查询--QSqlQueryModel QSqlQueryModel单表查询的使用总结htt…
阅读更多...
力扣35题 二分查找(简单易懂)

力扣35题 二分查找(简单易懂)

力扣35题二分查找升级版讲解 文章目录 力扣35题二分查找升级版讲解一、题目描述二、思路第一种方法当然可以遍历 我们这里不做讲解二分查找 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目描述 给定一个排序数组和一个目标值&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023