diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
index 102fe1c65..3d0b32136 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
@@ -33,79 +33,7 @@
{{$t('regulatoryCertificationTaskPlan')}}
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
- 2022-10
-
-
-
-
-
111111
-
哈哈哈
-
哈哈哈
-
哈哈哈
-
-
-
-
+
@@ -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 {
-