488 lines
14 KiB
Java
488 lines
14 KiB
Java
<template>
|
|
<a-card :bordered="false">
|
|
<div class="table-page-search-wrapper">
|
|
<a-row :gutter="24">
|
|
<a-col :md="6" :sm="8">
|
|
<div class="box-title-text">
|
|
<div class="title-text" :title="$t('entryName')">
|
|
<span>{{$t('entryName')}}</span>
|
|
</div>
|
|
<j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('entryName')"
|
|
v-model="queryParam.projectName"></j-input>
|
|
</div>
|
|
</a-col>
|
|
<a-col :md="6" :sm="8">
|
|
<div class="box-title-text">
|
|
<div class="title-text" :title="$t('targetMarket')">
|
|
<span>{{$t('targetMarket')}}</span>
|
|
</div>
|
|
<j-dict-select-tag class="box-input" v-model="queryParam.targetMarket"
|
|
:placeholder="$t('PleaseSelect')+$t('targetMarket')"
|
|
:type="'select'"
|
|
:triggerChange="false" :dictCode="'region'"/>
|
|
</div>
|
|
</a-col>
|
|
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
|
<a-col :md="6" :sm="24">
|
|
<a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
|
|
<a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
|
|
</a-col>
|
|
</span>
|
|
</a-row>
|
|
</div>
|
|
<div class="box-top">
|
|
<span class="box-top-text">{{$t('regulatoryCertificationTaskPlan')}}</span>
|
|
<span style="float: right" class="box-top-text-right">
|
|
<a-range-picker
|
|
:placeholder="[this.$t('startMonth'), this.$t('endMonth')]"
|
|
format="YYYY-MM"
|
|
v-model="getTime"
|
|
:mode="mode2"
|
|
:open="open"
|
|
@openChange="openChange"
|
|
@panelChange="panelChange"
|
|
@change="hodeChange"
|
|
>
|
|
<div slot="renderExtraFooter" style="width: 100%;display: block">
|
|
<div style="text-align: right;width: 100%">
|
|
<a @click="okChange">{{$t('determine')}}</a>
|
|
</div>
|
|
</div>
|
|
</a-range-picker>
|
|
</span>
|
|
<div class="box-top-content">
|
|
<div id="main"></div>
|
|
<div class="axis-tip"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box-bottom">
|
|
<span class="box-top-text">{{$t('projectStatusAndProgress')}}</span>
|
|
<div>
|
|
<a-table
|
|
ref="table"
|
|
size="middle"
|
|
:loading="loading"
|
|
:pagination="false"
|
|
:scroll="{x: true,y:500}"
|
|
:data-source="dataSource"
|
|
:columns="columns"
|
|
>
|
|
<span slot="projectStatusTitle">
|
|
<span>{{this.$t('projectStatus')}}</span><br/>
|
|
<span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+')'}}</span>
|
|
</span>
|
|
<span slot="CertificationProgressTitle">
|
|
<span>{{this.$t('CertificationProgress')}}</span><br/>
|
|
<span>{{'('+$t('notInvolved')+'/'+$t('toBeStarted')+'/'+$t('inProgress')+'/'+$t('experimentFailed')+'/'+$t('experimentPassed')+')'}}</span>
|
|
</span>
|
|
<span slot="listConfirmationStatusTitle">
|
|
<span>{{this.$t('listConfirmationStatus')}}</span><br/>
|
|
<span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
|
|
</span>
|
|
<span slot="taskAffirmStatusTitle">
|
|
<span>{{this.$t('taskAffirmStatus')}}</span><br/>
|
|
<span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
|
|
</span>
|
|
<span slot="designComplianceReviewTitle">
|
|
<span>{{this.$t('designComplianceReview')}}</span><br/>
|
|
<span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
|
|
</span>
|
|
<span slot="preHomeConfirmationTitle">
|
|
<span>{{this.$t('preHomeConfirmation')}}</span><br/>
|
|
<span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
|
|
</span>
|
|
<span slot="verificationComplianceReviewTitle">
|
|
<span>{{this.$t('verificationComplianceReview')}}</span><br/>
|
|
<span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
|
import * as echarts from 'echarts'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'index',
|
|
data() {
|
|
return {
|
|
queryParam: {},
|
|
loading: false,
|
|
dataSource: [],
|
|
open: false,
|
|
getTime: [],
|
|
mode2: ['month', 'month'],
|
|
url: {
|
|
list: '/project/ProjectStatusBoardController/scheduleInfoList',
|
|
timeline: '/project/ProjectStatusBoardController/timeline',
|
|
timelineList: '/project/ProjectStatusBoardController/timelineList'
|
|
},
|
|
columns: [
|
|
{
|
|
title: this.$t('entryName'),
|
|
align: 'center',
|
|
dataIndex: 'projectName',
|
|
scopedSlots: { customRender: 'projectName' },
|
|
width: 180
|
|
},
|
|
{
|
|
title: this.$t('targetMarket'),
|
|
align: 'center',
|
|
dataIndex: 'targetMarket',
|
|
width: 180
|
|
},
|
|
{
|
|
align: 'center',
|
|
dataIndex: 'projectStatus',
|
|
scopedSlots: { title: 'projectStatusTitle' },
|
|
width: 240
|
|
},
|
|
{
|
|
align: 'center',
|
|
dataIndex: 'certificationProgress',
|
|
width: 340,
|
|
scopedSlots: { title: 'CertificationProgressTitle' }
|
|
},
|
|
{
|
|
align: 'center',
|
|
dataIndex: 'inventory',
|
|
width: 340,
|
|
scopedSlots: { title: 'listConfirmationStatusTitle' }
|
|
},
|
|
{
|
|
align: 'center',
|
|
dataIndex: 'task',
|
|
width: 340,
|
|
scopedSlots: { title: 'taskAffirmStatusTitle' }
|
|
},
|
|
{
|
|
align: 'center',
|
|
dataIndex: 'design',
|
|
width: 440,
|
|
scopedSlots: { title: 'designComplianceReviewTitle' }
|
|
},
|
|
{
|
|
dataIndex: 'pre',
|
|
align: 'center',
|
|
width: 440,
|
|
scopedSlots: { title: 'preHomeConfirmationTitle' }
|
|
},
|
|
{
|
|
dataIndex: 'verify',
|
|
align: 'center',
|
|
width: 440,
|
|
scopedSlots: { title: 'verificationComplianceReviewTitle' }
|
|
}
|
|
],
|
|
startTime: undefined,
|
|
endTime: undefined
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
this.getTimeline()
|
|
},
|
|
methods: {
|
|
getTimeline() {
|
|
let query = {
|
|
startTime: this.startTime,
|
|
endTime: this.endTime
|
|
}
|
|
getAction(this.url.timeline, query).then((res) => {
|
|
if (res.success) {
|
|
this.getTimelineList(res.result)
|
|
}
|
|
})
|
|
},
|
|
openChange(val) {
|
|
this.open = val
|
|
},
|
|
okChange() {
|
|
this.open = false
|
|
this.getTimeline()
|
|
},
|
|
hodeChange() {
|
|
this.getTime = []
|
|
this.startTime = undefined
|
|
this.endTime = undefined
|
|
this.getTimeline()
|
|
},
|
|
panelChange(value, mode) {
|
|
this.getTime = value
|
|
this.startTime = moment(value[0]).format('YYYY-MM')
|
|
this.endTime = moment(value[1]).format('YYYY-MM')
|
|
},
|
|
getTimelineList(time) {
|
|
let query = {
|
|
startTime: this.startTime,
|
|
endTime: this.endTime
|
|
}
|
|
getAction(this.url.timelineList, query).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)
|
|
}
|
|
}
|
|
const hours = listTime
|
|
const days = []
|
|
let content = []
|
|
if (timeData && timeData.length > 0) {
|
|
timeData.forEach(res => {
|
|
days.push(res.projectName)
|
|
content.push(res.data[0])
|
|
})
|
|
}
|
|
let timeDataList = []
|
|
let data = []
|
|
for (let j = 0; j < content.length; j++) {
|
|
for (let k = 0; k < content[j].length; k++) {
|
|
content[j][k].index = j
|
|
timeDataList.push(content[j][k])
|
|
}
|
|
}
|
|
for (let i = 0; i < list.length; i++) {
|
|
for (let j = 0; j < timeDataList.length; j++) {
|
|
let time = JSON.stringify(timeDataList[j].time).slice(1, 11)
|
|
if (time == list[i]) {
|
|
data.push([i, timeDataList[j].index, 14, j])
|
|
}
|
|
}
|
|
}
|
|
let num = timeList.length * 3
|
|
if (num < 31) {
|
|
num = 31
|
|
}
|
|
option = {
|
|
legend: {
|
|
data: ['Punch Card'],
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
position: 'top',
|
|
formatter: function(params) {
|
|
return (
|
|
timeDataList[params.value[3]].name + '<br/>' +
|
|
timeDataList[params.value[3]].time.slice(0, 11)
|
|
)
|
|
}
|
|
},
|
|
grid: {
|
|
top: 0,
|
|
left: 2,
|
|
right: 40,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: hours,
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
position: 'top',
|
|
axisLabel: {
|
|
showMinLabel: true,
|
|
interval: num,
|
|
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
|
|
},
|
|
scale: true,
|
|
triggerEvent: true,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontFamily: 'Blue Sky Noto',
|
|
color: '#000F16',
|
|
fontSize: '16'
|
|
},
|
|
margin: 50,
|
|
formatter: function(params) {
|
|
var val = ''
|
|
if (params.length > 8) {
|
|
val = params.substr(0, 8) + '...'
|
|
return val
|
|
} else {
|
|
return params
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'scatter',
|
|
symbolSize: function(val) {
|
|
return val[2] * 2
|
|
},
|
|
data: data,
|
|
animationDelay: function(idx) {
|
|
return idx * 5
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
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()
|
|
},
|
|
searchReset() {
|
|
this.queryParam = {}
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.loading = true
|
|
getAction(this.url.list, this.queryParam).then((res) => {
|
|
if (res.success) {
|
|
this.loading = false
|
|
this.dataSource = res.result || []
|
|
} else {
|
|
this.loading = false
|
|
this.dataSource = []
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.box-top-text-right .ant-calendar-picker-input {
|
|
height: 38px;
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
@import '~@assets/less/common.less';
|
|
|
|
.box-title-text {
|
|
line-height: 1.4;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.title-text {
|
|
width: 70px;
|
|
color: #000F16;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
margin-right: 16px;
|
|
margin-top: 3px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.box-input {
|
|
display: inline-block;
|
|
width: 70%;
|
|
height: 38px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.box-top-text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #000F16;
|
|
margin-bottom: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.box-top-content {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
|
|
.box-button {
|
|
height: 38px;
|
|
}
|
|
|
|
#main {
|
|
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;
|
|
}
|
|
|
|
.box-top-text-right {
|
|
display: inline-block;
|
|
float: right;
|
|
height: 38px;
|
|
width: 300px;
|
|
margin-top: -4px;
|
|
}
|
|
</style> |