WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局项目状态看板

Browse Source
This commit is contained in:
qq787203167
2022-05-17 18:15:05 +08:00
parent 046d5e3ed0
commit 6284437829
1 changed files with 115 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/projectManagement/projectStatusBoard/index.vue
+115 -114
View File
@@ -33,79 +33,7 @@
<div class="box-top">
<span class="box-top-text">{{$t('regulatoryCertificationTaskPlan')}}</span>
<div class="box-top-content">
<div class="box-top-content-time">
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
<div class="box-top-content-time-text">
2022-10
</div>
</div>
<div style="overflow:auto;height: calc(100% - 80px)">
<div class="box-top-content-left">
<div class="box-top-content-text">111111</div>
<div class="box-top-content-text">哈哈哈</div>
<div class="box-top-content-text">哈哈哈</div>
<div class="box-top-content-text">哈哈哈</div>
</div>
<div class="box-top-content-right">
<div class="box-top-content-text">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
</div>
<div class="box-top-content-text">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
</div>
<div class="box-top-content-text">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
</div>
<div class="box-top-content-text">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
<img src="../../../assets/wancheng.png" alt="">
</div>
</div>
</div>
<div id="main"></div>
</div>
</div>
<div class="box-bottom">
@@ -229,8 +157,120 @@
},
mounted() {
this.getList()
this.getEcharts()
},
methods: {
getEcharts() {
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
var option
// 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'
]
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]
].map(function(item) {
return [item[1], item[0], item[2]]
})
option = {
legend: {
data: ['Punch Card'],
left: 'right'
},
tooltip: {
position: 'top',
formatter: function(params) {
return (
params.value[2] +
' commits in ' +
hours[params.value[0]] +
' of ' +
days[params.value[1]]
)
}
},
grid: {
top: 0,
left: 2,
right: 20,
containLabel: true
},
xAxis: {
type: 'category',
data: hours,
boundaryGap: false,
splitLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
showMinLabel: true,
showMaxLabel: true,
interval: 2,
textStyle: {
fontFamily: 'Blue Sky Noto',
color: '#000F16',
fontSize: '16'
}
},
axisLine: {
show: false
}
},
yAxis: {
type: 'category',
data: days,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontFamily: 'Blue Sky Noto',
color: '#000F16',
fontSize: '16'
},
margin: 50
}
},
series: [
{
type: 'scatter',
symbolSize: function(val) {
return val[2] * 2
},
data: data,
animationDelay: function(idx) {
return idx * 5
}
}
]
}
option && myChart.setOption(option)
},
searchQuery() {
this.getList()
},
@@ -297,48 +337,9 @@
width: 100%;
height: 400px;
margin-bottom: 20px;
}
.box-top-content-left {
width: 240px;
float: left;
padding: 0 20px;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.box-top-content-right {
width: calc(100% - 240px);
float: left;
}
.box-top-content-text {
height: 80px;
line-height: 80px;
}
.box-top-content-text {
width: 100%;
height: 80px;
line-height: 80px;
font-size: 16px;
font-weight: 500;
color: #000F16;
}
.box-top-content-time {
width: calc(100% - 240px);
margin-left: 240px;
height: 80px;
line-height: 80px;
display: flex;
justify-content: space-between;
}
.box-top-content-time-text {
font-size: 16px;
font-weight: 500;
color: #000F16;
overflow: auto;
}
.box-button {