devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

超多功能的免费甘特图 适用（vue）_甘特图插件vue

作者：不正经 | 2024-04-28 00:39:04

赞

踩

甘特图插件vue

使用的插件：dhtmlx-gantt

下载方式：npm i dhtmlx-gantt

插件官网：Gantt API Gantt Docs (dhtmlx.com)

作品展示

直接上全部代码

  1. <template>
  2. 	<div class="card">
  3.  
  4. 		<el-card>
  5. 			<div class="ard">
  6. 				<el-radio-group v-model="radio2">
  7. 					<el-radio-button label="全部" />
  8. 					<el-radio-button label="进行中" />
  9. 					<el-radio-button label="已超时" />
  10. 					<el-radio-button label="已完成" />
  11. 				</el-radio-group>
  12. 				<div class="asd">
  13. 					<p>开始时间：</p>
  14. 					<el-date-picker v-model="value1" type="date" placeholder="点击选择时间" :size="size" />
  15. 				</div>
  16. 				<div class="asd">
  17. 					<p>结束时间：</p>
  18. 					<el-date-picker v-model="value1" type="date" placeholder="点击选择时间" :size="size" />
  19. 				</div>
  20. 				<div class="asd">
  21. 					<p>选择任务类型：</p>
  22. 					<el-select v-model="value" class="m-2" placeholder="下拉选择" style="width: 170px">
  23. 						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  24. 					</el-select>
  25. 				</div>
  26. 				<el-button style="margin-left: 10px;" type="primary" :icon="Filter">筛选</el-button>
  27. 				<el-button type="primary" :icon="Plus">新增</el-button>
  28. 			</div>
  29. 		</el-card>
  30. 		<el-card class="box-card">
  31.  
  32. 			<div class="cardtop">
  33.  
  34. 				<div class="margins">
  35. 					<p><el-color-picker v-model="objs.asd1" show-alpha />攻击组</p>
  36. 					<p><el-color-picker v-model="objs.asd2" show-alpha />防御组</p>
  37. 					<p><el-color-picker v-model="objs.asd3" show-alpha />目标组</p>
  38. 				</div>
  39. 				<el-radio-group v-model="radio1" size="small">
  40. 					<el-radio-button label="年" />
  41. 					<el-radio-button label="月" />
  42. 					<el-radio-button label="日" />
  43. 				</el-radio-group>
  44. 			</div>
  45. 			<div id="gantt_here" style="margin-top: 10px;" class="gantt-container"></div>
  46. 		</el-card>
  47. 	</div>
  48. </template>
  49.    
  50. <script setup>
  51. import { reactive, toRefs, ref, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'
  52.  
  53. import { gantt } from 'dhtmlx-gantt'
  54. import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  55. import { Plus, Filter } from '@element-plus/icons-vue'
  56.  
  57. const data = reactive({})
  58. const radio1 = ref('年')
  59. const radio2 = ref('全部')
  60. const value1 = ref('')
  61. const value = ref('')
  62. let objs = reactive({
  63. 	asd1: '#f2e6c2',
  64. 	asd2: '#b5e09b',
  65. 	asd3: '#baefe2'
  66. })
  67. let dialogVisible = ref(false)
  68.  
  69. //初始化甘特图
  70. const initGantt = () => {
  71.  
  72. 	var tasks = {
  73. 		data: [
  74. 			{
  75. 				id: 1,
  76. 				taskname: '明天吃烩菜',
  77. 				parent: 0,
  78. 				start_date: "01-04-2018",
  79. 				progress: 0.3,
  80. 				duration: 1,
  81. 				types: 1,
  82. 				text: '李大厨',
  83. 				color: objs.asd1,
  84. 				tsakrank: 0,
  85.  
  86. 			},
  87. 			{
  88. 				id: 2,
  89. 				taskname: '明天吃鱼肉',
  90. 				parent: 0,
  91. 				start_date: "01-04-2018",
  92. 				progress: 0.42,
  93. 				duration: 5,
  94. 				types: 2,
  95. 				color: objs.asd2,
  96. 				text: '王大厨',
  97. 				tsakrank: 1,
  98.  
  99.  
  100. 			},
  101. 			{
  102. 				id: 3,
  103. 				taskname: '明天吃西餐',
  104. 				parent: 0,
  105. 				start_date: "01-04-2018",
  106. 				progress: 0.65,
  107. 				duration: 5,
  108. 				types: 3,
  109. 				text: '赵大厨',
  110. 				color: objs.asd3,
  111. 				tsakrank: 2,
  112.  
  113. 			},
  114. 			{
  115. 				id: 4,
  116. 				taskname: '购买水军发动舆论偏差',
  117. 				parent: 1,
  118. 				start_date: "01-04-2018",
  119. 				progress: 0.1,
  120. 				duration: 1,
  121. 				types: 1,
  122. 				text: '李大厨',
  123. 				color: objs.asd1
  124. 			},
  125. 			{
  126. 				id: 5,
  127. 				taskname: '编辑一边有效证据的文章',
  128. 				parent: 2,
  129. 				start_date: "01-04-2018",
  130. 				progress: 0.1,
  131. 				duration: 3,
  132. 				types: 2,
  133. 				text: '王大厨',
  134. 				color: objs.asd2
  135. 			},
  136. 			{
  137. 				id: 6,
  138. 				taskname: '寻找目标人物关键证据',
  139. 				parent: 3,
  140.  
  141. 				start_date: "01-04-2018",
  142. 				progress: 0.1,
  143. 				duration: 3,
  144. 				types: 3,
  145. 				text: '赵大厨',
  146. 				color: objs.asd3
  147.  
  148. 			},
  149. 			{
  150. 				id: 7,
  151. 				taskname: '发布目标任务黑料',
  152. 				parent: 1,
  153.  
  154. 				start_date: "03-04-2018",
  155. 				progress: 0.2,
  156. 				duration: 2,
  157. 				types: 1,
  158. 				text: '李大厨',
  159. 				color: objs.asd1
  160. 			},
  161. 			{
  162. 				id: 8,
  163. 				taskname: '打造慈善公益效果',
  164. 				parent: 2,
  165.  
  166. 				start_date: "04-04-2018",
  167. 				progress: 0.1,
  168. 				duration: 3,
  169. 				types: 2,
  170. 				text: '王大厨',
  171. 				color: objs.asd2
  172.  
  173. 			},
  174. 			{
  175. 				id: 9,
  176. 				taskname: '查看目标亲朋好友博客',
  177. 				parent: 3,
  178. 				start_date: "02-04-2018",
  179. 				progress: 0.1,
  180. 				duration: 6,
  181. 				types: 3,
  182. 				text: '赵大厨',
  183. 				color: objs.asd3
  184. 			},
  185.  
  186.  
  187. 		],
  188. 		// links: [
  189. 		// 	{ id: 1, source: 1, target: 2, type: "1" },
  190. 		// 	{ id: 2, source: 2, target: 3, type: "0" },
  191. 		// 	{ id: 3, source: 3, target: 4, type: "1" },
  192. 		// 	{ id: 4, source: 4, target: 5, type: "0" },
  193. 		// ]
  194. 	};
  195.  
  196. 	gantt.config.grid_width = 350
  197. 	gantt.config.add_column = false //添加符号
  198. 	gantt.config.autosize = true//自适应尺寸
  199. 	gantt.config.autofit = true// 表格列宽自适应
  200. 	gantt.config.autoscroll = true// 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
  201. 	gantt.config.drag_progress = false//取消任务进度条进度拖动
  202. 	gantt.config.scale_height = 60
  203. 	gantt.config.row_height = 60
  204. 	gantt.config.bar_height = 34
  205. 	gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  206. 	gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  207. 	gantt.i18n.setLocale('cn') //设置语言
  208. 	//时间栏配置
  209. 	gantt.config.scales = [
  210. 		{ unit: 'month', step: 1, format: '%Y年%m月' },
  211. 		{ unit: 'day', step: 1, format: '%m/%d' },
  212. 	]
  213. 	//左侧列表配置
  214. 	gantt.config.columns = [
  215. 		{ name: "taskname", label: "任务名称", align: 'left', tree: true, width: 140 },
  216. 		{
  217. 			name: "progress", label: "任务优先", align: 'center', width: 80, template: function (task) {
  218. 				let obj = {
  219. 					color: task.tsakrank === 0 ? '#ff2b00' : task.tsakrank === 1 ? '#ffab00' : '#409eff',
  220. 					icon: task.tsakrank === 0 ? 'icon-youxianjiP0' : task.tsakrank === 1 ? 'icon-youxianjiP1' : 'icon-youxianjiP2',
  221. 				}
  222. 				return `<div class="jindu" style="color:${obj.color};"><i style="font-size:24px;" class="iconfont ${obj.icon}"></i></div>`
  223. 			}
  224. 		},
  225. 		{
  226. 			name: "type", label: "任务类别", align: 'center', width: 100, template: function (task) {
  227.  
  228. 				let obj = {
  229. 					color: task.types === 1 ? '#f29d38' : task.types === 2 ? '#65c16f' : '#1890ff',
  230. 					icon: task.types === 1 ? 'icon-gongji' : task.types === 2 ? 'icon-kaiqifangyu' : 'icon-icon--mubiaoku',
  231. 					text: task.types === 1 ? '攻击' : task.types === 2 ? '防御' : '目标'
  232. 				}
  233. 				return `<div class="tasktype" style="color:${obj.color};font-size:14px;">
  234. 					<i class="iconfont ${obj.icon}"></i>
  235. 					<span style="margin-left:3px;"> ${obj.text}</span>
  236. 					</div>`
  237. 			}
  238. 		},
  239. 		{
  240. 			name: "progress", label: "任务进度", align: 'center', width: 80, template: function (task) {
  241. 				return `<div class="jindu" style="width:100%;height:30px;padding-left:10px;font-size:13px;color:black;"><span>${(task.progress * 100).toFixed(0) + "%"}</span></div>`;
  242. 			}
  243. 		},
  244.  
  245. 	]
  246. 	//鼠标移入弹框
  247. 	// gantt.templates.tooltip_text = function (start, end, task) {
  248. 	// 	return `
  249. 	// 	<div style="width: 200px;height: 200px;">
  250. 	//             <p>任务名称：这是一个任务</p>
  251. 	//             <p>任务策划：张三</p>
  252. 	// 			<p>当前状态：进行中</p>
  253. 	//             <p>任务类别：攻击</p>
  254. 	//             <p>开始时间：2020-12-11</p>
  255. 	//             <p>结束时间：2021-04-13</p>
  256. 	//     </div>
  257. 	// 	`
  258. 	// };
  259. 	//更改父项图标
  260. 	gantt.templates.grid_folder = (item) => {
  261. 		return ""
  262. 	}
  263. 	gantt.plugins({
  264. 		marker: true
  265. 	});
  266. 	var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
  267. 	var today = new Date();
  268. 	gantt.addMarker({
  269. 		start_date: today,
  270. 		css: "today",
  271. 		text: "今天",
  272. 		title: "今天: " + date_to_str(today)
  273. 	});
  274. 	//更改子项图标
  275. 	gantt.templates.grid_file = (item) => {
  276.  
  277. 		return ""
  278. 	}
  279. 	//任务条显示内容
  280. 	gantt.templates.task_text = function (start, end, task) {
  281.  
  282. 		return `
  283. 			<div style="color:#454545;font-size:14px;font-weight:700;">执行：${task.text}</div>
  284. 		`
  285. 	}
  286. 	//任务条左侧配置
  287. 	// gantt.templates.leftside_text = function (start, end, task) {
  288. 	// 	return `<div class="jindu" style="width:100%;height:30px;background-color:#e6f4ff;padding-left:10px;font-size:13px;color:#629eff;"><span>当前进度${(task.progress * 100).toFixed(0) + "%"}</span></div>`;
  289. 	// };
  290. 	//展开树图标
  291. 	gantt.templates.grid_open = function (item) {
  292. 		return `<i style="font-size:14px;background:none; color:#1890ff; padding-left:10px;" class="gantt_tree_icon gantt_${item.$open ? "close" : "open"}  iconfont  ${item.$open ? 'icon-zhankaishousuo' : 'icon-zhankaishousuo1'}"></i>`
  293. 	};
  294.  
  295. 	gantt.init('gantt_here')  //初始化
  296. 	gantt.parse(tasks)   //填充数据
  297.  
  298. 	//双击事件
  299. 	gantt.attachEvent("onTaskDblClick", function (id, e) {
  300. 		// 在这里编写处理双击事件的代码
  301. 		console.log("双击了任务：" + id);
  302. 		dialogVisible.value = true
  303. 	});
  304.  
  305.  
  306. }
  307.  
  308. onBeforeMount(() => { })
  309. onMounted(() => {
  310. 	initGantt()
  311. })
  312. watchEffect(() => { })
  313. defineExpose({
  314. 	...toRefs(data)
  315. })
  316. </script>
  317. <style scoped lang="scss">
  318. ::-webkit-scrollbar {
  319. 	width: 10px;
  320. }
  321.  
  322. ::-webkit-scrollbar-track {
  323. 	background-color: #f1f1f1;
  324. }
  325.  
  326. ::-webkit-scrollbar-thumb {
  327. 	background-color: #888;
  328. 	border-radius: 5px;
  329. }
  330.  
  331. ::-webkit-scrollbar-thumb:hover {
  332. 	background-color: #555;
  333. }
  334.  
  335. .renwus {
  336. 	width: 100%;
  337. 	height: 200px;
  338. 	display: flex;
  339. 	align-items: center;
  340. 	justify-content: space-around;
  341. 	flex-wrap: wrap;
  342. 	overflow: auto;
  343. }
  344.  
  345. .renwu {
  346. 	width: 100%;
  347. 	height: 200px;
  348. 	display: flex;
  349. 	align-items: center;
  350. 	justify-content: space-around;
  351. 	flex-wrap: wrap;
  352. }
  353.  
  354. :deep(.el-progress-circle) {
  355. 	width: 100px !important;
  356. 	height: 80px !important;
  357. }
  358.  
  359. .ps {
  360.  
  361. 	padding: 0;
  362. 	margin: 0;
  363.  
  364. }
  365.  
  366. .percentage-value {
  367. 	display: block;
  368. 	margin-top: 10px;
  369. 	font-size: 28px;
  370. }
  371.  
  372. .percentage-label {
  373. 	display: block;
  374. 	margin-top: 10px;
  375. 	font-size: 12px;
  376. }
  377.  
  378. .demo-progress .el-progress--line {
  379. 	margin-bottom: 15px;
  380. 	width: 350px;
  381. }
  382.  
  383. .demo-progress .el-progress--circle {
  384. 	margin-right: 15px;
  385. }
  386.  
  387. .cardtop {
  388.  
  389.  
  390. 	width: 100%;
  391. 	height: 100%;
  392. 	display: flex;
  393. 	justify-content: space-between;
  394. 	align-items: center;
  395.  
  396. 	.margins {
  397. 		display: flex;
  398. 		font-size: 12px;
  399.  
  400. 		p {
  401. 			margin-left: 10px;
  402.  
  403. 			:deep(.el-color-picker .el-color-picker__icon) {
  404. 				opacity: 0;
  405. 			}
  406.  
  407. 			:deep(.el-color-picker__trigger) {
  408. 				border: none;
  409. 				width: 25px;
  410. 				height: 25px;
  411. 			}
  412. 		}
  413. 	}
  414. }
  415.  
  416. .box-card {
  417. 	margin-top: 20px;
  418. }
  419.  
  420. .card {
  421. 	width: 1500px;
  422. 	height: 1000px;
  423. 	margin: 0 auto;
  424.  
  425. 	.ard {
  426. 		width: 100%;
  427. 		height: 40px;
  428. 		display: flex;
  429. 		align-items: center;
  430. 	}
  431.  
  432. 	.icons {
  433. 		width: 80px;
  434. 		height: 30px;
  435. 		display: flex;
  436. 		align-items: center;
  437. 		justify-content: center;
  438. 		border: 1px solid #a0cfff;
  439. 		color: #46a2ff;
  440. 		margin-right: 10px;
  441. 		border-radius: 7px;
  442. 		background-color: #ecf5ff;
  443.  
  444. 		i {
  445. 			color: #1890ff;
  446. 			font-size: 14px;
  447. 			margin-right: 5px;
  448. 		}
  449. 	}
  450. }
  451.  
  452. .asd {
  453. 	width: 300px;
  454. 	height: 33px;
  455. 	border-radius: 5px;
  456. 	border: 1px dotted #ccc;
  457. 	margin-left: 20px;
  458. 	display: flex;
  459. 	align-items: center;
  460.  
  461. 	p {
  462. 		color: #606266;
  463. 		margin-left: 5px;
  464. 	}
  465.  
  466. 	:deep(.el-input__wrapper) {
  467. 		border: none;
  468. 		box-shadow: none !important;
  469.  
  470. 	}
  471.  
  472. 	:deep(.el-date-editor.el-input) {
  473. 		width: 200px !important;
  474. 	}
  475.  
  476. 	:deep(.el-select__wrapper) {
  477. 		border: none;
  478. 		box-shadow: none !important;
  479. 	}
  480. }
  481.  
  482. :deep(.gantt_layout_cell) {
  483. 	border-radius: 7px;
  484. }
  485.  
  486. :deep(.gantt_tree_indent) {
  487. 	opacity: 0;
  488. }
  489.  
  490. :deep(.gantt_grid_scale .gantt_grid_head_cell) {
  491. 	color: #606266;
  492. 	font-size: 15px;
  493. 	font-weight: 700;
  494. 	border-right: 1px solid #ccc !important;
  495. }
  496.  
  497. :deep(.gantt_scale_cell) {
  498. 	color: #454545 !important;
  499. }
  500.  
  501. :deep(.gantt_grid_data .gantt_cell) {
  502. 	border-right: 1px solid #ccc !important;
  503. 	padding: 0;
  504.  
  505. }
  506.  
  507. :deep(.gantt_task_progress_wrapper) {
  508. 	border-radius: 5px;
  509. }
  510.  
  511. :deep(.gantt_task_line.gantt_project) {
  512. 	border-radius: 5px;
  513. 	border: none;
  514. }
  515.  
  516. :deep(.gantt_data_area div) {
  517. 	border-radius: 5px;
  518. 	// border:none;
  519. }
  520.  
  521. :deep(.gantt_tree_content) {
  522. 	display: flex;
  523. 	align-items: center;
  524.  
  525.  
  526. 	.jindu {
  527. 		width: 100%;
  528. 		display: flex;
  529. 		justify-content: center;
  530. 		align-items: center;
  531. 		color: #4482e3;
  532. 		border-radius: 10px;
  533. 	}
  534.  
  535. 	.tasktype {
  536. 		width: 100%;
  537. 		height: 100%;
  538. 		display: flex;
  539. 		justify-content: center;
  540. 		align-items: center;
  541.  
  542. 	}
  543.  
  544.  
  545.  
  546. }
  547.  
  548. :deep(.gantt_task_line) {
  549. 	border: none;
  550. }
  551.  
  552. :deep(.gantt_link_point) {
  553. 	display: none !important;
  554. }
  555.  
  556. :deep(.gantt_task_progress) {
  557. 	height: 100%;
  558. }
  559.  
  560. .toppingTask {
  561. 	width: 200px;
  562. 	height: 200px;
  563. 	background-color: #1890ff;
  564. }
  565. </style>
  566.

不懂的直接区官网查看就好 什么api都有

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/499538
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号