修改任务清单的流程
This commit is contained in:
qq787203167
@@ -34,6 +34,7 @@
|
||||
<span class="box-top-text">{{$t('regulatoryCertificationTaskPlan')}}</span>
|
||||
<div class="box-top-content">
|
||||
<div id="main"></div>
|
||||
<div class="axis-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
@@ -94,7 +95,9 @@
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
url: {
|
||||
list: '/project/ProjectStatusBoardController/scheduleInfoList'
|
||||
list: '/project/ProjectStatusBoardController/scheduleInfoList',
|
||||
timeline: '/project/ProjectStatusBoardController/timeline',
|
||||
timelineList: '/project/ProjectStatusBoardController/timelineList'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
@@ -157,32 +160,59 @@
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getEcharts()
|
||||
this.getTimeline()
|
||||
},
|
||||
methods: {
|
||||
getEcharts() {
|
||||
getTimeline() {
|
||||
getAction(this.url.timeline, {}).then((res) => {
|
||||
if (res.success) {
|
||||
this.getTimelineList(res.result)
|
||||
}
|
||||
})
|
||||
},
|
||||
getTimelineList(time) {
|
||||
getAction(this.url.timelineList, {}).then((res) => {
|
||||
if (res.success) {
|
||||
this.getEcharts(time, res.result)
|
||||
}
|
||||
})
|
||||
},
|
||||
getEcharts(timeList, timeData) {
|
||||
|
||||
var chartDom = document.getElementById('main')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
let list = []
|
||||
let listTime = []
|
||||
for (let i = 0; i < timeList.length; i++) {
|
||||
for (let j = 0; j < 31; j++) {
|
||||
let num
|
||||
if ((j + 1) < 10) {
|
||||
num = '0' + (j + 1)
|
||||
} else {
|
||||
num = (j + 1)
|
||||
}
|
||||
listTime.push(timeList[i])
|
||||
list.push(timeList[i] + '-' + num)
|
||||
}
|
||||
}
|
||||
console.log(listTime)
|
||||
const hours = listTime
|
||||
const days = []
|
||||
|
||||
// prettier-ignore
|
||||
const hours = [
|
||||
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||||
'12a', '1a', '2a', '3a', '4a', '5a', '6a'
|
||||
]
|
||||
const days = [
|
||||
'Saturday', 'Friday', 'Thursday',
|
||||
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
|
||||
]
|
||||
if (timeData && timeData.length > 0) {
|
||||
timeData.forEach(res => {
|
||||
days.push(res.projectName)
|
||||
})
|
||||
}
|
||||
const data = [
|
||||
[0, 0, 14], [0, 1, 5], [0, 2, 5], [0, 3, 5], [0, 4, 5], [0, 5, 5], [0, 6, 5], [0, 7, 5],
|
||||
[1, 0, 5], [1, 2, 5], [1, 3, 5], [1, 4, 5], [1, 5, 5], [1, 6, 5], [1, 7, 5], [1, 1, 5],
|
||||
[2, 0, 14], [2, 1, 14], [2, 2, 14], [2, 3, 14], [2, 4, 14], [2, 5, 14], [2, 6, 14], [2, 7, 14],
|
||||
[3, 0, 14], [3, 1, 14], [3, 2, 14], [3, 3, 14], [3, 4, 14], [3, 5, 14], [3, 6, 14], [3, 7, 14],
|
||||
[4, 0, 14], [4, 1, 14], [4, 2, 14], [4, 3, 14], [4, 4, 14], [4, 5, 14], [4, 6, 14], [4, 7, 14],
|
||||
[5, 0, 14], [5, 1, 14], [5, 2, 14], [5, 3, 14], [5, 4, 14], [5, 5, 14], [5, 6, 14], [5, 7, 14],
|
||||
[6, 0, 14], [6, 1, 14], [6, 2, 14], [6, 3, 14], [6, 4, 14], [6, 5, 14], [6, 6, 14], [6, 7, 14],
|
||||
[6, 8, 14], [6, 9, 14], [6, 10, 14], [6, 11, 14], [6, 12, 14], [6, 13, 14], [6, 14, 14], [6, 15, 14]
|
||||
[0, 0, 14], [0, 1, 5], [0, 2, 5], [0, 3, 5], [0, 4, 5], [0, 5, 5],
|
||||
[1, 0, 5], [1, 2, 5], [1, 3, 5], [1, 4, 5], [1, 5, 5], [1, 6, 5],
|
||||
[2, 0, 14], [2, 1, 14], [2, 2, 14], [2, 3, 14], [2, 4, 14], [2, 5, 14],
|
||||
[3, 0, 14], [3, 1, 14], [3, 2, 14], [3, 3, 14], [3, 4, 14], [3, 5, 14],
|
||||
[4, 0, 14], [4, 1, 14], [4, 2, 14], [4, 3, 14], [4, 4, 14], [4, 5, 14],
|
||||
[5, 0, 14], [5, 1, 14], [5, 2, 14], [5, 3, 14], [5, 4, 14], [5, 5, 14],
|
||||
[6, 0, 14], [6, 1, 14], [6, 2, 14], [6, 3, 14], [6, 4, 14], [6, 5, 14]
|
||||
].map(function(item) {
|
||||
return [item[1], item[0], item[2]]
|
||||
})
|
||||
@@ -206,7 +236,7 @@
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 2,
|
||||
right: 20,
|
||||
right: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -222,8 +252,7 @@
|
||||
position: 'top',
|
||||
axisLabel: {
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
interval: 2,
|
||||
interval: 31,
|
||||
textStyle: {
|
||||
fontFamily: 'Blue Sky Noto',
|
||||
color: '#000F16',
|
||||
@@ -246,13 +275,24 @@
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
scale: true,
|
||||
triggerEvent: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'Blue Sky Noto',
|
||||
color: '#000F16',
|
||||
fontSize: '16'
|
||||
},
|
||||
margin: 50
|
||||
margin: 50,
|
||||
formatter: function(params) {
|
||||
var val = ''
|
||||
if (params.length > 8) {
|
||||
val = params.substr(0, 8) + '...'
|
||||
return val
|
||||
} else {
|
||||
return params
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
@@ -270,6 +310,20 @@
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
myChart.on('mouseover', 'yAxis.category', function(e) {
|
||||
console.log(e)
|
||||
let axisTip = document.querySelector('.axis-tip')
|
||||
console.log(axisTip)
|
||||
axisTip.innerText = e.value
|
||||
axisTip.style.left = 100 + 'px'
|
||||
axisTip.style.top = (e.event.event.y) - 180 + 'px'
|
||||
axisTip.style.display = 'block'
|
||||
})
|
||||
myChart.on('mouseout', 'yAxis.category', function(e) {
|
||||
let axisTip = document.querySelector('.axis-tip')
|
||||
axisTip.innerText = ''
|
||||
axisTip.style.display = 'none'
|
||||
})
|
||||
},
|
||||
searchQuery() {
|
||||
this.getList()
|
||||
@@ -350,4 +404,16 @@
|
||||
width: 100%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
.axis-tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 5px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #575757;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user