项目地址:https://iclass1.com:9001/tms/#/index
难点：
1.Highcharts 关系结构图
window.chart.chart('container', {
chart: {
height: (this.tier * 100),
width: this.itLen,
inverted: true
},
title: {
text: ''
},
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: datas,
levels: {
color: '#fff'
},
nodes: nodes,
colorByPoint: false,
color: '#fff',
dataLabels: {
color: '#333'
},
borderColor: '#ccc',
nodeWidth: 70
}],
tooltip: {
enabled: false
},
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 800
}
})
[1].计算高度和宽度
高度：层级*100 层级：是通过计算所得
宽度：层级遍历 每一层都计算宽度，然后求得最大数 * 一个数字
[2].为了能够横向滚动 进行以下操作
setTimeout(() => {
document.getElementById('container').style = 'overflow:auto !important'
}, 200)
[3].为了能够点击节点，可以遍历节点 添加点击事件
[4].为了修改节点文字颜色和内容，也是在节点数据中的name、title用<span>字符串来实现
2.vue-hash-calendar 日历使用
为了实现项目中的日历效果，我使用了该框架
[1].修改calendar_item calendar_day calendar_dot 这样就修改了每天的节点大小
@{deep}.calendar_group .calendar_item{
position: relative;
height: 36px;
}
@{deep}.calendar_group .calendar_day{
margin-bottom: 0px;
width: 30px;
height: 30px;
border-radius: 50%;
}
@{deep}.calendar_dot{
position: absolute;
z-index: 1000;
margin-top: 10px;
}
[2].画圆圈
createCircle (ele, color = '#eeeeee', time = '0') {
if (!ele) {
return
}
const cavs = ele.getElementsByTagName('canvas')[0]
if (cavs) {
ele.removeChild(cavs)
}
const dpr = 1
const canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
canvas.width = 36 * dpr
canvas.height = 36 * dpr
context.lineWidth = 2
if (!time || time === '0') {
context.strokeStyle = '#eeeeee'
context.arc(18 * dpr, 18 * dpr, 16, 0, 2 * Math.PI)
} else {
context.strokeStyle = color
const cnt = (2 * Number(time)) / this.workTime
context.arc(18 * dpr, 18 * dpr, 16, 0, cnt * Math.PI)
}
context.stroke()
this.$nextTick(() => {
if (ele) {
ele.appendChild(canvas)
}
})
}
[3].因为每一个月都包含下一个月前几天的日期，现在通过后台获取数据是本月的。这样就需要找到这个月，所以就需要遍历找到本月的各个节点，在调用第二个步骤实现的方法，来实现功能
setTimeout(() => {
this.$nextTick(() => {
const calendar_group = document.getElementsByClassName('calendar_group')[0]
const calendar_item_list = calendar_group.getElementsByClassName('calendar_item')
let start = false
let cnt = 1
for (let i = 0; i < calendar_item_list.length; i++) {
const item = calendar_item_list[i]
if (item) {
let isCreate = false
const txt = item.innerText.replace(/\s*/g, '')
if (txt.indexOf('月') > -1) {
start = false
isCreate = false
cnt = 1
}
if (txt === (month + '月')) {
start = true
isCreate = true
cnt = 1
} else if (start && txt === ('' + (cnt + 1))) {
isCreate = true
cnt += 1
}
// console.log('innerText:', item.innerText, ' typeOf:', typeof (item.innerText))
if (start && isCreate) {
let day = txt
if (txt.indexOf('月') > -1) {
day = '1'
}
if (day.length === 1) day = '0' + day
const accessDate = this.changeDate.substr(0, 8) + day
let tobj = null
for (let i = 0; i < list.length; i++) {
const obj = list[i]
if (accessDate === obj.accessDate.substr(0, 10)) {
tobj = obj
break
}
}
if (tobj) {
this.createCircle(item, '#0669EA', tobj.useTime)
}
} else {
this.createCircle(item)
}
}
}
const days = calendar_group.getElementsByClassName('calendar_day')
for (let j = 0; j < days.length; j++) {
const item = days[j]
if (item) {
item.style = 'position:absolute'
}
}
})
}, 200)
