网站建设分几块,wordpress分类名称,企业网站界面 优帮云,吉林市哪有做网站的vis.js使用之vis-timeline使用攻略#xff0c;vis-timeline实现时间轴、甘特图1、vis-timeline简介2、安装插件及依赖3、简单示例4、疑难问题集合1. 中文zh-cn本地化2. 关于自定义class样式无法被渲染3. 关于双向数据绑定vis.js是一个基于浏览器的可视化库#xff0c;它提供了…
vis.js使用之vis-timeline使用攻略vis-timeline实现时间轴、甘特图1、vis-timeline简介2、安装插件及依赖3、简单示例4、疑难问题集合1. 中文zh-cn本地化2. 关于自定义class样式无法被渲染3. 关于双向数据绑定vis.js是一个基于浏览器的可视化库它提供了多个组件包括DataSet, Timeline, Network, Graph2d和Graph3d。该库具有易用性、能够处理大量动态数据和允许数据操作和交互的特点。 1、vis-timeline简介
vis-timeline时间轴是一个交互式可视化图表用于实时可视化时间数据。数据项可以只与某个时间点关联也可以有开始和结束日期即一个时间范围。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的支持从毫秒到年的尺度。
vis-time时间轴使用常规HTML DOM呈现时间轴和放在时间轴上的项目这样的好处就是可以使用自定义css样式进行灵活定制。
Timeline地址vis.js官网https://visjs.org/vis-timeline官方英文文档https://visjs.github.io/vis-timeline/docs/timeline/vis-timeline官方示例https://visjs.github.io/vis-timeline/examples/timeline/vis-timeline的github源码https://github.com/visjs/vis-timeline
可实现效果如下纵向可以分组横向可以是时间轴每个item项目可以自定义内容与样式。
2、安装插件及依赖
// vis-timeline包
cnpm install -S vis-timeline// vis.js提供的可以实现数据双向绑定的包
cnpm install -S vis-data// 实现时间轴中文的moment.js库的包
cnpm install -S moment3、简单示例
templatediv classbindNurseToRoom-container!-- 时间轴-绑定元素 --div reftimelineRef idtimeline classbindNurseToRoom-container/div/div
/templatescript setup langts namebindNurseToRoom
import { onMounted, ref, watch, nextTick, reactive, defineAsyncComponent } from vue;
import vis-timeline/styles/vis-timeline-graph2d.min.css;
import { DataSet } from vis-data; // 为timeline提供双向数据绑定加快渲染速度
import { Timeline } from vis-timeline; //standalone,peer不同的包装方式
import moment from moment;
import moment/dist/locale/zh-cn.js;
import { ElMessage, ElMessageBox } from element-plus;
import { useOperatingRoomApi } from //api/room/operatingRoom;
import { useOperationScheduleStore } from //stores/operationScheduleStore;
const _useOperationScheduleStore useOperationScheduleStore();// 引入组件
const BindNurseToRoomDialog defineAsyncComponent(() import(./bindNurseToRoomDialog.vue));const timelineRef ref(null);
const bindDialogRef ref();
// 定义父组件传过来的值
const props defineProps({// 当前操作时间operateTime: {type: String,default: () ,},// 配置项config: {type: Object,default: () {},},
});
const curOperateTime ref(); // 当前操作日期格式化的字符串 或 undefined 或 let dataList:any new DataSet([// {// id: 1,// content: 手术1,// start: 2023-04-07 08:00,// end: 2023-04-07 10:00,// group: 5a92fde514c2c842f680885b1d31b9b8,// style: color: white; background-color: #1abc9c;,// idCard: 123456,// patientName: 李秀莲,// doctorName: 李莲,// anaesthesiaType: 局部,// },// {// id: 2,// content: 手术2,// start: 2023-04-06 10:00,// end: 2023-04-06 12:00,// group: 手术室1,// style: color: white; background-color: #2ecc71;,// idCard: 12346,// patientName: 李秀,// doctorName: 李莲,// anaesthesiaType: 局部,// },// {// id: 3,// content: 手术3,// start: 2023-04-06 08:30,// end: 2023-04-06 09:30,// group: 手术室2,// style: color: white; background-color: #3498db;,// idCard: 1456,// patientName: 莲,// doctorName: 李,// anaesthesiaType: 局部,// },// {// id: 4,// content: div styledisplay:block;height:100px;background:red;// 123123123213// /div , //content接收字符串类型的文本或html// start: 2023-04-06 11:00,// end: 2023-04-06 14:00,// group: 手术室2,// style: color: white; background-color: #9b59b6;,// idCard: 1236,// patientName: 李的,// doctorName: 李莲时,// anaesthesiaType: 局部,// },// {// id: 5,// content: div styledisplay:block;height:100px;background:red;手术5/div ,// start: 2023-04-06 06:30,// end: 2023-04-06 10:10,// group: 手术室5,// className:icu,// editable: false, // 给某个特定的设置为不可编辑// idCard: 156,// patientName: 李秀消,// doctorName: 李莲,// anaesthesiaType: 局部,// },
]);const state:any reactive({groups: null, // 手术室分组-new DataSet()格式的数据集timeline: null, // 手术室当前排班时间轴-new DataSet()格式的数据集
});// 监听当前操作日期变化
watch(() props.operateTime,(newValue: any) {if (newValue) {curOperateTime.value newValue; // 保存当前操作日期到变量中以便以后使用。nextTick(async () {if(state.timeline){// state.timeline.setItems([], { clearNetwork: false });// state.timeline.destroy(); // 销毁时间轴} await getOperationRoom();await renderTimeLine(); // 渲染时间轴state.timeline.redraw();});}},{ immediate : true } //在组件初次加载的时候执行
);onMounted(async () {state.timeline new Timeline(timelineRef.value as unknown as HTMLElement, //document.getElementById(timeline) as HTMLElement, dataList, {locale: zh-cn, //moment.locale(zh-cn), // 时间轴国际化editable: {add: true, // 双击添加新项-add new items by double tappingupdateTime: true, // 水平拖拉项目-drag items horizontallyupdateGroup: true, // 从一个分组拖拽到另一个分组-drag items from one group to anotherremove: true, // 通过右上角按钮删除项目-delete an item by tapping the delete button top right// overrideItems: false // allow these options to override item.editable},selectable: true,// height: 730px, // 时间轴高度minHeight: 400, // timeline表格的最小高度maxHeight: 750, // timeline表格的最大高度groupHeightMode: fixed, // 指定分组高度: 自动auto, fixed固定, fitItems适应项目stack: false, // ture则不重叠verticalScroll: true, // 竖向滚动orientation: top, // 时间轴位置showCurrentTime: true, // 显示当前时间zoomKey: ctrlKey, // 缩放按键zoomMax: 1000 * 60 * 60 * 24,zoomMin: 1000 * 60 * 30,moment: function(date:any) {return moment(date).locale(zh-cn); //vis.moment(date).utcOffset(08:00);},// 显式将此选项设置为true以完全禁用Timeline的XSS保护xss: {disabled: true,},//可以提供模板处理程序。(或许可以直接放插槽待测试)//此处理程序是一个函数接受项的数据作为第一个参数项元素作为第二个参数编辑后的数据作为第三个参数并输出格式化的HTMLtemplate: function (sourceData:any, targetElement:any, parsedData:any) {console.log(parsedData: , parsedData);targetElement.className custom-item-template-class; // 将自定义class写在className属性中return div classcustom-item ${sourceData.customClassName}div classtopspan${moment(sourceData.start).format(YYYY-MM-DD HH:mm:ss).split( )[1]}-${moment(sourceData.end).format(YYYY-MM-DD HH:mm:ss).split( )[1]}/span span${sourceData.doctorName}/span/divdiv classcenter-boxdiv classinfospan${sourceData.patientName}/span nbsp;span${sourceData.idCard}/span nbsp;span${sourceData.sex?男:女}/span nbsp;span${sourceData.age}岁/span/divh3${sourceData.content}/h3/divdiv classnurse-boxspan${ sourceData?.selectedNurse?.xshs1.name ? sourceData.selectedNurse.xshs1.name :--- }/spanspan${ sourceData?.selectedNurse?.xhhs1.name ? sourceData.selectedNurse.xhhs1.name :--- }/span/divdiv classbottom-boxh4${sourceData.anaesthesiaType}/h4/div/div;},tooltip: {followMouse: false,template: (originalItemData:any, parsedItemData:any) {console.log(hover-parsedItemData: , parsedItemData);return divpspan开始时间/spanspan${moment(originalItemData.start).format(YYYY-MM-DD HH:mm:ss)}/span/ppspan结束时间/spanspan${moment(originalItemData.end).format(YYYY-MM-DD HH:mm:ss)}/span/ppspan手术内容/spanspan${originalItemData.content}/span/p/div}},// onAdd(item, callback)在将要添加新项时触发。如果未实现将使用默认文本内容添加该项。onAdd: (originalItemData:any, callback:any) {debuggerconsole.log(新增originalItemData: , originalItemData);if (originalItemData.id) {originalItemData.customClassName un-submit; // 未提交状态的样式callback(originalItemData); // 成功返回 这行相当于调用了dataList.add(originalItemData)}else {callback(null); // 失败取消}},// onDropObjectOnItem(objectData,Item)在将对象放入现有时间轴项时触发。// 当拖动数据中包含target:item的对象被放入时间轴项时触发回调函数。onDropObjectOnItem: function (objectData:any, item:any) {debuggerif (!item) {ElMessage({message: 请拖动护士到对应的手术项目中,type: warning})return;}onDropToItem(objectData, item);},// onUpdateitemcallback在项目即将更新时触发(双击item时)。此函数通常会显示用户更改项目的对话框。如果不执行什么都不会发生。// 示例https://visjs.github.io/vis-timeline/examples/timeline/editing/editingItemsCallbacks.htmlonUpdate: function (item:any, callback:any) {if (item.id) {callback(item); // send back adjusted itembindDialogRef.value.openDialog(item); // 打开弹窗}else {callback(null); // cancel updating the item}},// 当项目被移动时重复触发的回调函数。仅在selectable和editable.updateTime或editable.updateGroup选项都设置为true时才适用onMoving: function (item:any, callback:any) {console.log(item: , item);item.moving true;callback(item);},// 当项目即将被删除时触发onRemove(item, callback)。如果未实现该项将始终被删除。onRemove: (item:any, callback:Function) {onDeleteByItemType(item,callback);},});
});// 获取医院手术室信息
const getOperationRoom async () {let { data } await useOperatingRoomApi().selectAdministrativeOffice();if(data.length){let temp data.map((item:any) {return {...item,content: item.administrativeOfficeCard,style: color: #fff; background: #5E8DFF;,}}).sort((a:any, b:any) {return a.content - b.content});state.groups new DataSet(temp);}
}// 渲染时间轴timeline new Timeline(container, items, groups, options);
const renderTimeLine async () {// 清空数据集// dataList.clear();dataList new DataSet([]);// 获取当天已经排班的数据await getScheduledData();// 设置setItemsstate.timeline.setItems(dataList);// 更新配置选项state.timeline.setOptions({min: moment(curOperateTime.value 7:00:00).format(YYYY-MM-DD HH:mm:ss), // 设置时间轴可见范围的最小日期max: moment(curOperateTime.value).endOf(day).format(YYYY-MM-DD HH:mm:ss), // 设置时间轴可见范围的最大日期groupTemplate: (groupData:any, element:any) {element.className custom-group-template-class; // 将自定义class写在className属性中return div classgroup title${groupData.description}span classgroup-id${groupData.content}/spanspan classgroup-name${groupData.administrativeOfficeName}/span/div;},});// 跳转到当前时间轴state.timeline.moveTo(curOperateTime.value);// 设置分组state.timeline.setGroups(state.groups);// 打印当前数据dataList.forEach((element: any) {console.log(---------dataList: , element);});
}/scriptstyle scoped langscss
.bindNurseToRoom-container {width: 100%;position: relative;
}// vis-timeline样式
:deep(#timeline){.vis-top{background-color: #90e0db9c;.vis-even,.vis-odd{border-left: 1px solid;}}// (此项目必须设置)自定义group分组样式.custom-group-template-class{height: 160px;width: 80px;display: flex;flex-direction: column;align-items: center;justify-content: center;.group{display: flex;flex-direction: column;justify-content: center;align-items: center;.group-id{font-size: 22px;}.group-name{font-size: 14px;margin-top: 10px;}}}// (此项必须设置)自定义item样式.custom-item-template-class{// color: #fff;.custom-item {.top{font-size: 18px;font-weight: bold;color: #5E8DFF;border-bottom: 1px dashed #C4C4C4;}.center-box{padding: 5px;}.nurse-box{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;span{width: 40%;height: 30px;padding: 5px;border: 1px dashed #5E8DFF;border-radius: 5px;text-align: center;}}.bottom-box{padding: 5px;}}// 未提交状态的样式.un-submit{border: 2px solid #698df0;padding: 5px;}.ed-submit{border: 2px solid #efb03f;padding: 5px;}}// 使用自定义class实现不同手术状态.vis-item.icu {color: white;background-color: rgb(228, 210, 93);border-color: darkred;height: 100px;}
}// groups样式
:deep(.group-icu){background-color: rgba(244, 176, 59, 0.2);
}
/style!--
为啥我的template中的自定义的class并没有被渲染到元素中
你的自定义class选择器写错了如果在template中自定义了class但是并没有在CSS样式表中定义那么这个class将不会生效。
请检查你的CSS样式表中是否已经定义了相应的类选择器或者将class直接写在style属性中。vis-timeline对class属性进行了过滤vis-timeline默认会对content和className等属性进行过滤以避免XSS攻击。
如果你的class名称被视为可疑字符那么它将被自动过滤掉。你可以通过在options选项中增加content属性的设置来打开这个过滤功能vis-timeline缓存了渲染数据导致更新不及时有时候即使你已经在代码中正确设置了class属性但是图表仍然没有反应出来。
这可能是因为vis-timeline缓存了渲染数据需要手动调用timeline.redraw()方法来更新图表。
你可以在修改了item对象的class之后手动调用timeline.redraw()方法以更新图表。
--4、疑难问题集合
1. 中文zh-cn本地化
import moment from moment;
// 需要引入下方这个文件
import moment/dist/locale/zh-cn.js;网上说的在配置项options中引入locale: moment.locale(zh-cn)无法实现本地化
2. 关于自定义class样式无法被渲染
写了自定义样式后发现没有在元素中渲染出对应的class原因有两点
vis-time本身为了防止xss攻击自动过滤了你写的样式类。需要在options中配置打开xss: {disabled:true,},你写的样式类需要通过:v-deep()渲染到界面不写对应的样式只写class类名是无法渲染class名字的
3. 关于双向数据绑定
需要使用let dataList new DataSet([ ]);
官网真的写的挺详细的不得不说国外这种开源网站确实非常给力。 有啥疑问可以一起交流哦
