修改项目状态看板-时间轴-点击时间轴区域无法全屏查看
This commit is contained in:
qq787203167
+362
-3
@@ -1,13 +1,372 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="doc-detail">
|
||||||
|
<div class="Virtual-detail-header" style="position: fixed;top: 0">
|
||||||
|
<div class="Virtual-detail-title">
|
||||||
|
<span>
|
||||||
|
{{this.$t('regulatoryCertificationTaskPlan')}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 87px 0 0 0;background: #ffffff;height:100%">
|
||||||
|
<div class="detail-content" style="height: 100%">
|
||||||
|
<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>
|
||||||
|
<JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { getAction, postAction, deleteAction } from '@/api/manage'
|
||||||
|
import moment from 'moment'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TaskPlanList'
|
name: 'TaskPlanList',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url: {
|
||||||
|
timeline: '/project/ProjectStatusBoardController/timeline',
|
||||||
|
timelineList: '/project/ProjectStatusBoardController/timelineList'
|
||||||
|
},
|
||||||
|
startTime: undefined,
|
||||||
|
endTime: undefined,
|
||||||
|
mode2: ['month', 'month'],
|
||||||
|
loading: false,
|
||||||
|
loadingMain: false,
|
||||||
|
dataSource: [],
|
||||||
|
open: false,
|
||||||
|
getTime: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getTimeline()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTimeline() {
|
||||||
|
let query = {
|
||||||
|
startTime: this.startTime,
|
||||||
|
endTime: this.endTime
|
||||||
|
}
|
||||||
|
this.loadingMain = true
|
||||||
|
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: 'left',
|
||||||
|
formatter: function(params) {
|
||||||
|
return (
|
||||||
|
timeDataList[params.value[3]].name + '<br/>' +
|
||||||
|
timeDataList[params.value[3]].time.slice(0, 11)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 10,
|
||||||
|
left: 40,
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.loadingMain = false
|
||||||
|
option && myChart.setOption(option, true)
|
||||||
|
window.onresize = () => {
|
||||||
|
myChart.resize()
|
||||||
|
}
|
||||||
|
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'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
|
.doc-detail {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.Virtual-detail-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 68px;
|
||||||
|
line-height: 68px;
|
||||||
|
padding: 0 32px 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 2px #eff1f3 solid;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.Virtual-detail-title {
|
||||||
|
display: inline-block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #040B29;
|
||||||
|
line-height: 68px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-top-content {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 160px);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-button {
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
+194
-4
@@ -3,23 +3,213 @@
|
|||||||
<div class="Virtual-detail-header" style="position: fixed;top: 0">
|
<div class="Virtual-detail-header" style="position: fixed;top: 0">
|
||||||
<div class="Virtual-detail-title">
|
<div class="Virtual-detail-title">
|
||||||
<span>
|
<span>
|
||||||
{{this.title}}
|
{{this.$t('projectStatusAndProgress')}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 67px 0 0 0;background: #ffffff;height:100%">
|
<div style="padding: 77px 0 0 0;background: #ffffff;height:100%">
|
||||||
<div class="detail-content" style="height: 100%">
|
<div class="detail-content" style="height: 100%">
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="false"
|
||||||
|
:scroll="{x: true,y:'calc(100vh - 180px)'}"
|
||||||
|
: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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { getAction, postAction, deleteAction } from '@/api/manage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'projectStatusAndProgress'
|
name: 'projectStatusAndProgress',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url: {
|
||||||
|
list: '/project/ProjectStatusBoardController/scheduleInfoList'
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
dataSource: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: this.$t('entryName'),
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: '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' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
|
.doc-detail {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.Virtual-detail-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 68px;
|
||||||
|
line-height: 68px;
|
||||||
|
padding: 0 32px 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 2px #eff1f3 solid;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.Virtual-detail-title {
|
||||||
|
display: inline-block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #040B29;
|
||||||
|
line-height: 68px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-detail-right {
|
||||||
|
width: 800px;
|
||||||
|
line-height: 68px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Virtual-detail-left {
|
||||||
|
width: 240px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 3;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
.Virtual-detail-left-text {
|
||||||
|
padding: 2px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Virtual-detail-right {
|
||||||
|
border-left: 2px #eff1f3 solid;
|
||||||
|
width: calc(100% - 240px);
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Virtual-detail-left-text-color {
|
||||||
|
background: #eff1f3;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Virtual-detail-text-right {
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -70,6 +70,9 @@
|
|||||||
:data-source="dataSource"
|
:data-source="dataSource"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
>
|
>
|
||||||
|
<span slot="projectName" slot-scope="text,result">
|
||||||
|
<a @click="projectNameClick">{{text}}</a>
|
||||||
|
</span>
|
||||||
<span slot="projectStatusTitle">
|
<span slot="projectStatusTitle">
|
||||||
<span>{{this.$t('projectStatus')}}</span><br/>
|
<span>{{this.$t('projectStatus')}}</span><br/>
|
||||||
<span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+')'}}</span>
|
<span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+')'}}</span>
|
||||||
@@ -374,9 +377,7 @@
|
|||||||
myChart.resize()
|
myChart.resize()
|
||||||
}
|
}
|
||||||
myChart.on('mouseover', 'yAxis.category', function(e) {
|
myChart.on('mouseover', 'yAxis.category', function(e) {
|
||||||
console.log(e)
|
|
||||||
let axisTip = document.querySelector('.axis-tip')
|
let axisTip = document.querySelector('.axis-tip')
|
||||||
console.log(axisTip)
|
|
||||||
axisTip.innerText = e.value
|
axisTip.innerText = e.value
|
||||||
axisTip.style.left = 100 + 'px'
|
axisTip.style.left = 100 + 'px'
|
||||||
axisTip.style.top = (e.event.event.y) - 180 + 'px'
|
axisTip.style.top = (e.event.event.y) - 180 + 'px'
|
||||||
@@ -387,6 +388,12 @@
|
|||||||
axisTip.innerText = ''
|
axisTip.innerText = ''
|
||||||
axisTip.style.display = 'none'
|
axisTip.style.display = 'none'
|
||||||
})
|
})
|
||||||
|
myChart.on('click', (params) => {
|
||||||
|
let newUrl = this.$router.resolve({
|
||||||
|
path: '/TaskPlanList'
|
||||||
|
})
|
||||||
|
window.open(newUrl.href, '_blank')
|
||||||
|
})
|
||||||
},
|
},
|
||||||
searchQuery() {
|
searchQuery() {
|
||||||
this.getList()
|
this.getList()
|
||||||
@@ -406,6 +413,12 @@
|
|||||||
this.dataSource = []
|
this.dataSource = []
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
projectNameClick() {
|
||||||
|
let newUrl = this.$router.resolve({
|
||||||
|
path: '/projectStatusAndProgress'
|
||||||
|
})
|
||||||
|
window.open(newUrl.href, '_blank')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user