1027 lines
33 KiB
Java
1027 lines
33 KiB
Java
<template>
|
|
<a-card :bordered="false">
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
<a-row :gutter="24">
|
|
<a-col :md="5" :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="5" :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>
|
|
<a-col :md="5" :sm="8">
|
|
<div class="box-title-text">
|
|
<div class="title-text" :title="$t('brand')">
|
|
<span>{{ $t('brand') }}</span>
|
|
</div>
|
|
<j-dict-select-tag class="box-input" v-model="queryParam.brand"
|
|
:placeholder="$t('PleaseSelect')+$t('brand')"
|
|
:type="'select'"
|
|
:triggerChange="false" :dictCode="'brand'"/>
|
|
</div>
|
|
</a-col>
|
|
<a-col :md="5" :sm="8">
|
|
<div class="box-title-text">
|
|
<div class="title-text" :title="$t('selectTime')">
|
|
<span>{{ $t('selectTime') }}</span>
|
|
</div>
|
|
<a-range-picker
|
|
:placeholder="[this.$t('startMonth'), this.$t('endMonth')]"
|
|
format="YYYY-MM"
|
|
class="box-input"
|
|
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-button type="primary" @click="okChange">{{ $t('determine') }}</a-button>
|
|
</div>
|
|
</div>
|
|
</a-range-picker>
|
|
</div>
|
|
</a-col>
|
|
<span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
|
<a-col :md="4" :sm="24">
|
|
<a-button class="box-button"
|
|
@click="searchReset">{{ $t('reset') }}</a-button>
|
|
<a-button style="margin-left: 8px" class="box-button" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
|
|
</a-col>
|
|
</span>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="box-top" style="position: relative">
|
|
<!-- <span class="box-top-text">{{ $t('regulatoryCertificationTaskPlan') }}</span>-->
|
|
<!-- <span class="box-top-text fullScreenView" @click="TaskPlanListClick">{{ $t('fullScreenView') }}</span>-->
|
|
<span style="float: right" @click="handleExport" class="box-top-text-right">
|
|
<a-icon type="export" :rotate="-90"/>
|
|
{{ $t('export') }}
|
|
</span>
|
|
<div class="box-header-text">
|
|
<div class="box-header-text-text" @click="boxContentClick(0)">
|
|
{{$t('whole')}}
|
|
</div>
|
|
<div class="box-header-text-text" @click="boxContentClick(1)">
|
|
{{$t('masterProject')}}
|
|
</div>
|
|
</div>
|
|
<div class="box-top-content" style="position: relative">
|
|
<!-- <div id="main"></div>-->
|
|
<!-- <div class="axis-tip"></div>-->
|
|
<div class="box-top-content-right-top">
|
|
<div class="box-top-content-right-top-text" v-for="(item,index) in timeList" :key="index">{{ item }}</div>
|
|
</div>
|
|
<div style="overflow:visible;">
|
|
<div class="box-top-content-left">
|
|
<div class="box-top-content-left-text"
|
|
v-for="(item,index) in timeData" :key="index">
|
|
<a-tooltip overlayClassName="overlayClassName" placement="topLeft">
|
|
<template slot="title">
|
|
<div>{{ item.projectName }}</div>
|
|
<div>
|
|
{{$t('explain')}}:{{item.projectInfo.explanation}}
|
|
</div>
|
|
</template>
|
|
<span @click="projectInfoClick(item.projectInfo)" style="cursor: pointer">{{ item.projectName }}</span>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="box-top-content-right">
|
|
<div class="box-top-content-right-bottom">
|
|
<div class="process-content" v-for="(item,index) in timeData" :key="index">
|
|
<div class="process-content-right-xian"></div>
|
|
<div class="process-content-right-xian-color"></div>
|
|
<div class="process-content-right-xian-one"></div>
|
|
<div class="process-content-content" :style="val.left"
|
|
v-if="val.g"
|
|
v-for="(val,indexOne) in item.data[0]" :key="indexOne">
|
|
<div class="process-content-right-top" :title="val.name">{{ val.name }}</div>
|
|
<!-- <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{ val.name }}-->
|
|
<!-- </div>-->
|
|
<a-tooltip placement="topLeft" overlayClassName="tooltipColor">
|
|
<template slot="title">
|
|
<span>{{ val.time.slice(0, 11) }}</span>
|
|
</template>
|
|
<img v-if="val.status == 1" src="../../../assets/heiTop.png" class="process-content-left"
|
|
alt="">
|
|
<img v-else-if="val.status == 2" src="../../../assets/kongTop.png"
|
|
class="process-content-left"
|
|
alt="">
|
|
<img v-else-if="val.status == 3" src="../../../assets/shiTop.png" class="process-content-left"
|
|
alt="">
|
|
</a-tooltip>
|
|
|
|
<!-- <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
|
|
</div>
|
|
<div class="process-content-contentOne" :style="val.left"
|
|
v-if="!val.g"
|
|
v-for="(val,indexTwo) in item.data[0]">
|
|
<!-- <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{ val.name }}</div>-->
|
|
<div @click="statusClick(val)" class="process-content-right-button" :title="val.name">{{ val.name }}
|
|
</div>
|
|
<a-tooltip placement="topLeft" overlayClassName="tooltipColor">
|
|
<template slot="title">
|
|
<span>{{ val.time.slice(0, 11) }}</span>
|
|
</template>
|
|
<img @click="statusClick(val)" v-if="val.status == 1" src="../../../assets/huiBottom.png"
|
|
class="process-content-left"
|
|
alt="">
|
|
<img @click="statusClick(val)" v-else-if="val.status == 2" src="../../../assets/kongBottom.png"
|
|
class="process-content-left"
|
|
alt="">
|
|
<img @click="statusClick(val)" v-else-if="val.status == 3" src="../../../assets/shiBottom.png"
|
|
class="process-content-left"
|
|
alt="">
|
|
</a-tooltip>
|
|
|
|
<!-- <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
|
|
</div>
|
|
</div>
|
|
<div class="box-top-content-right-xian"></div>
|
|
<div class="box-top-content-right-text">
|
|
{{ handlingTime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<JLoading :loading="loadingMain">{{ this.$t('dataLoading') }}</JLoading>
|
|
</div>
|
|
<!-- <div class="box-bottom">-->
|
|
<!-- <span class="box-top-text">{{ $t('projectStatusAndProgress') }}</span>-->
|
|
<!-- <span class="box-top-text fullScreenView" @click="projectNameClick">{{ $t('fullScreenView') }}</span>-->
|
|
<!-- <div>-->
|
|
<!-- <a-table-->
|
|
<!-- ref="table"-->
|
|
<!-- size="middle"-->
|
|
<!-- :components="drag(columns,'columns')"-->
|
|
<!-- :loading="loading"-->
|
|
<!-- :pagination="false"-->
|
|
<!-- :scroll="{x: '100%',y:500}"-->
|
|
<!-- :data-source="dataSource"-->
|
|
<!-- :columns="columns"-->
|
|
<!-- >-->
|
|
<!-- <span slot="projectStatusTitle">-->
|
|
<!-- <span>{{ this.$t('CurrentStatusOfTheProject') }}</span><br />-->
|
|
<!-- <span>{{ '(' + $t('red') + '/' + $t('yellow') + '/' + $t('green') + '/' + $t('blue') + ')' }}</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('listConfirmation') }}</span><br />-->
|
|
<!-- <span>{{ '(' + $t('notLaunch') + '/' + $t('toBeConfirmed') + '/' + $t('accept') + '/' + $t('refuse') + ')'-->
|
|
<!-- }}</span>-->
|
|
<!-- </span>-->
|
|
<!-- <span slot="taskAffirmStatusTitle">-->
|
|
<!-- <span>{{ this.$t('taskAffirm') }}</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>-->
|
|
<statistics ref="statisticsRef"/>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
|
import statistics from './components/statistics'
|
|
import * as echarts from 'echarts'
|
|
import moment from 'moment'
|
|
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
|
|
|
|
export default {
|
|
name: 'index',
|
|
mixins: [ResizeHeader, ResizeColumnProvide],
|
|
components: {
|
|
statistics
|
|
},
|
|
data() {
|
|
return {
|
|
queryParam: {},
|
|
timeList: [],
|
|
timeData: [],
|
|
loading: false,
|
|
loadingMain: 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: 'left',
|
|
dataIndex: 'projectName',
|
|
scopedSlots: { customRender: 'projectName' },
|
|
width: 240,
|
|
ellipsis: true
|
|
},
|
|
// {
|
|
// title: this.$t('targetMarket'),
|
|
// align: 'left',
|
|
// dataIndex: 'targetMarket',
|
|
// width: 180,
|
|
// ellipsis: true
|
|
// },
|
|
{
|
|
align: 'left',
|
|
dataIndex: 'projectStatus',
|
|
scopedSlots: { title: 'projectStatusTitle' },
|
|
width: 240,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
align: 'left',
|
|
dataIndex: 'certificationProgress',
|
|
width: 380,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'CertificationProgressTitle' }
|
|
},
|
|
{
|
|
align: 'left',
|
|
dataIndex: 'inventory',
|
|
width: 340,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'listConfirmationStatusTitle' }
|
|
},
|
|
{
|
|
align: 'left',
|
|
dataIndex: 'task',
|
|
width: 340,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'taskAffirmStatusTitle' }
|
|
},
|
|
{
|
|
align: 'left',
|
|
dataIndex: 'design',
|
|
width: 440,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'designComplianceReviewTitle' }
|
|
},
|
|
{
|
|
dataIndex: 'pre',
|
|
align: 'left',
|
|
width: 440,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'preHomeConfirmationTitle' }
|
|
},
|
|
{
|
|
dataIndex: 'verify',
|
|
align: 'left',
|
|
width: 440,
|
|
ellipsis: true,
|
|
scopedSlots: { title: 'verificationComplianceReviewTitle' }
|
|
}
|
|
],
|
|
startTime: undefined,
|
|
endTime: undefined,
|
|
handlingTime: '',
|
|
num: 0,
|
|
queryAllProject: true
|
|
}
|
|
},
|
|
mounted() {
|
|
let boxContentTextColor = document.getElementsByClassName('box-header-text-color')
|
|
if (boxContentTextColor && boxContentTextColor.length > 0) {
|
|
boxContentTextColor[0].classList.remove('box-header-text-color')
|
|
}
|
|
let boxContentTextText = document.getElementsByClassName('box-header-text-text')
|
|
if (boxContentTextText && boxContentTextText.length > 0) {
|
|
boxContentTextText[0].classList.add('box-header-text-color')
|
|
}
|
|
this.queryAllProject = true
|
|
// this.getList()
|
|
this.getTimeline()
|
|
this.handlingTime = moment(new Date()).format('YYYY-MM-DD')
|
|
// this.handlingTime = '2023-04-30'
|
|
},
|
|
methods: {
|
|
getNewDate(flag, many) {
|
|
|
|
const thirtyDays = [4, 6, 9, 11] // 30天的月份
|
|
|
|
const thirtyOneDays = [1, 3, 5, 7, 8, 10, 12] // 31天的月份
|
|
|
|
const currDate = new Date() // 今天日期
|
|
|
|
const year = currDate.getFullYear()
|
|
|
|
let month = currDate.getMonth() + 1
|
|
|
|
let targetDateMilli = 0
|
|
|
|
let GMTDate = '' // 中国标准时间
|
|
|
|
let targetYear = '' // 年
|
|
|
|
let targetMonth = '' // 月
|
|
|
|
let targetDate = '' // 日
|
|
|
|
let dealTargetDays = '' // 目标日期
|
|
|
|
const isLeapYear = !!((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) // 是否是闰年
|
|
|
|
let countDays = 0 // 累计天数
|
|
|
|
for (let i = 0; i < many; i++) {
|
|
|
|
if (flag === 'before') {
|
|
|
|
month = month - 1 <= 0 ? 12 : month - 1
|
|
|
|
} else {
|
|
|
|
month = month + 1 > 12 ? 1 : month + 1
|
|
|
|
}
|
|
|
|
thirtyDays.includes(month) ? (countDays += 30) : thirtyOneDays.includes(month) ? (countDays += 31) : isLeapYear ? (countDays += 29) : (countDays += 28)
|
|
}
|
|
|
|
targetDateMilli = currDate.setDate(
|
|
currDate.getDate() - (flag === 'before' ? countDays : countDays * -1)
|
|
)
|
|
|
|
GMTDate = new Date(targetDateMilli)
|
|
|
|
targetYear = GMTDate.getFullYear()
|
|
|
|
targetMonth = GMTDate.getMonth() + 1
|
|
|
|
targetDate = GMTDate.getDate()
|
|
|
|
targetMonth = targetMonth.toString().padStart(2, '0')
|
|
|
|
targetDate = targetDate.toString().padStart(2, '0')
|
|
|
|
dealTargetDays = `${targetYear}-${targetMonth}`
|
|
|
|
return dealTargetDays
|
|
},
|
|
getTimeline() {
|
|
let query = {
|
|
startTime: this.startTime || this.getNewDate('before', 6),
|
|
endTime: this.endTime || this.getNewDate('after', 5),
|
|
...this.queryParam,
|
|
queryAllProject: this.queryAllProject
|
|
}
|
|
this.loadingMain = true
|
|
getAction(this.url.timeline, query).then((res) => {
|
|
if (res.success) {
|
|
this.getTimelineList(res.result)
|
|
} else {
|
|
this.loadingMain = false
|
|
}
|
|
})
|
|
},
|
|
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 || this.getNewDate('before', 6),
|
|
endTime: this.endTime || this.getNewDate('after', 5),
|
|
...this.queryParam,
|
|
queryAllProject: this.queryAllProject
|
|
}
|
|
getAction(this.url.timelineList, query).then((res) => {
|
|
if (res.success) {
|
|
this.getEcharts(time, res.result)
|
|
} else {
|
|
this.loadingMain = false
|
|
}
|
|
})
|
|
},
|
|
getEcharts(timeList, timeData) {
|
|
this.timeList = []
|
|
if (timeList.length <= 12) {
|
|
this.timeList = timeList
|
|
} else if (timeList.length <= 24) {
|
|
timeList.forEach((res, index) => {
|
|
if (index == 0) {
|
|
this.timeList.push(res)
|
|
} else if (index == timeList.length - 1) {
|
|
this.timeList.push(res)
|
|
} else if (index % 2 == 0) {
|
|
if (this.timeList.length < 11) {
|
|
this.timeList.push(res)
|
|
}
|
|
}
|
|
})
|
|
} else if (timeList.length <= 36) {
|
|
timeList.forEach((res, index) => {
|
|
if (index == 0) {
|
|
this.timeList.push(res)
|
|
} else if (index == timeList.length - 1) {
|
|
this.timeList.push(res)
|
|
} else if (index % 3 == 0) {
|
|
if (this.timeList.length < 11) {
|
|
this.timeList.push(res)
|
|
}
|
|
}
|
|
})
|
|
} else if (timeList.length <= 48) {
|
|
timeList.forEach((res, index) => {
|
|
if (index == 0) {
|
|
this.timeList.push(res)
|
|
} else if (index == timeList.length - 1) {
|
|
this.timeList.push(res)
|
|
} else if (index % 4 == 0) {
|
|
if (this.timeList.length < 11) {
|
|
this.timeList.push(res)
|
|
}
|
|
}
|
|
})
|
|
} else if (timeList.length <= 60) {
|
|
timeList.forEach((res, index) => {
|
|
if (index == 0) {
|
|
this.timeList.push(res)
|
|
} else if (index == timeList.length - 1) {
|
|
this.timeList.push(res)
|
|
} else if (index % 5 == 0) {
|
|
if (this.timeList.length < 11) {
|
|
this.timeList.push(res)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
let dataList = document.getElementsByClassName('box-top-content-right-top-text')
|
|
let contentRightText = document.getElementsByClassName('box-top-content-right-text')
|
|
let contentRightXian = document.getElementsByClassName('box-top-content-right-xian')
|
|
|
|
setTimeout(() => {
|
|
let length = timeList.length / dataList.length
|
|
let clientWidth = dataList[0].clientWidth
|
|
clientWidth = clientWidth / length
|
|
for (let i = 0; i < timeData.length; i++) {
|
|
for (let j = 0; j < timeData[i].data[0].length; j++) {
|
|
for (let k = 0; k < dataList.length; k++) {
|
|
let num = (Math.floor(clientWidth / 30 * 10000) / 10000) * parseInt(timeData[i].data[0][j].time.slice(8, 10))
|
|
timeList.forEach((res, index) => {
|
|
if (timeData[i].data[0][j].time.slice(0, 7) == res.slice(0, 7)) {
|
|
timeData[i].data[0][j].left = 'left:' + ((clientWidth * index + num) - 10) + 'px'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
contentRightText[0].style = 'display:none'
|
|
contentRightXian[0].style = 'display:none'
|
|
let clientWidthOne = dataList[0].clientWidth
|
|
clientWidthOne = clientWidthOne / length
|
|
let num = (Math.floor(clientWidthOne / 30 * 10000) / 10000) * parseInt(this.handlingTime.slice(8, 10))
|
|
timeList.forEach((res, index) => {
|
|
if (res.slice(0, 7) == this.handlingTime.slice(0, 7)) {
|
|
if (timeList.length - 1 == index) {
|
|
contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) - 84) + 'px;' + 'display:block;border-radius: 2px 0 2px 2px;'
|
|
} else {
|
|
contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) + 2) + 'px;' + 'display:block;border-radius: 2px 2px 2px 0;'
|
|
}
|
|
contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num) + 2) + 'px;' + 'display:block'
|
|
}
|
|
})
|
|
|
|
this.timeData = timeData
|
|
this.timeData = [...this.timeData]
|
|
console.log(this.timeData)
|
|
this.loadingMain = false
|
|
}, 500)
|
|
|
|
},
|
|
TaskPlanListClick() {
|
|
let newUrl = this.$router.resolve({
|
|
path: '/TaskPlanList'
|
|
})
|
|
window.open(newUrl.href, '_blank')
|
|
},
|
|
searchQuery() {
|
|
this.getTimeline()
|
|
// this.getList()
|
|
},
|
|
searchReset() {
|
|
this.queryParam = {}
|
|
this.getTime = []
|
|
this.startTime = undefined
|
|
this.endTime = undefined
|
|
this.getTimeline()
|
|
// 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 = []
|
|
// }
|
|
// })
|
|
// },
|
|
projectNameClick() {
|
|
let newUrl = this.$router.resolve({
|
|
path: '/projectStatusAndProgress'
|
|
})
|
|
window.open(newUrl.href, '_blank')
|
|
},
|
|
projectInfoClick(item) {
|
|
item.projectName = item.showName
|
|
let newUrl = this.$router.resolve({
|
|
path: '/ProjectDetails',
|
|
query: item
|
|
})
|
|
window.open(newUrl.href, '_blank')
|
|
},
|
|
//导出
|
|
handleExport() {
|
|
let query = {
|
|
...this.queryParam,
|
|
startTime: this.startTime || this.getNewDate('before', 6),
|
|
endTime: this.endTime || this.getNewDate('after', 5),
|
|
queryAllProject: this.queryAllProject
|
|
}
|
|
downloadFile('/project/ProjectStatusBoardController/exportXls',
|
|
this.$t('GRPSystemProjectProgressStatistics') + '.xls', query, this.Deselect)
|
|
},
|
|
statusClick(val) {
|
|
this.$refs.statisticsRef.getData(val)
|
|
},
|
|
boxContentClick(num) {
|
|
let boxContentTextColor = document.getElementsByClassName('box-header-text-color')
|
|
if (boxContentTextColor && boxContentTextColor.length > 0) {
|
|
boxContentTextColor[0].classList.remove('box-header-text-color')
|
|
}
|
|
let boxContentTextText = document.getElementsByClassName('box-header-text-text')
|
|
if (boxContentTextText && boxContentTextText.length > 0) {
|
|
boxContentTextText[num].classList.add('box-header-text-color')
|
|
}
|
|
this.num = num
|
|
if (num == 0) {
|
|
this.queryAllProject = true
|
|
} else if (num == 1) {
|
|
this.queryAllProject = false
|
|
}
|
|
this.getTimeline()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.box-top-text-right .ant-calendar-picker-input {
|
|
height: 10px;
|
|
width: 300px;
|
|
}
|
|
|
|
.ant-calendar-footer-btn .ant-calendar-footer-extra {
|
|
float: right;
|
|
}
|
|
|
|
.overlayClassName .ant-tooltip-inner {
|
|
color: #fff !important;
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
}
|
|
|
|
.overlayClassName .ant-tooltip-arrow::before {
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
}
|
|
|
|
.overlayClassName {
|
|
max-width: 500px !important;
|
|
}
|
|
</style>
|
|
<style scoped lang="less">
|
|
@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: calc(100vh - 264px);
|
|
margin-bottom: 20px;
|
|
padding: 0 0 20px 10px;
|
|
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: 30px;
|
|
text-align: right;
|
|
margin-right: 16px;
|
|
margin-top: -4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fullScreenView {
|
|
margin-left: 16px;
|
|
color: #21c9cc;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.box-top-content-left {
|
|
width: 119px;
|
|
float: left;
|
|
padding-top: 52px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.box-top-content-left-text {
|
|
color: #191E29;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
height: 110px;
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.box-top-content-right {
|
|
width: calc(100% - 135px);
|
|
float: left;
|
|
}
|
|
|
|
.box-top-content-right-top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff;
|
|
z-index: 100;
|
|
padding-top: 34px;
|
|
padding-left: 135px;
|
|
}
|
|
|
|
.box-top-content-right-top-text {
|
|
border-left: 1px #EAEAEC solid;
|
|
border-top: 1px #EAEAEC solid;
|
|
border-bottom: 1px #EAEAEC solid;
|
|
flex: 1;
|
|
height: 36px;
|
|
padding-left: 10px;
|
|
color: #54565A;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
line-height: 36px;
|
|
letter-spacing: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.box-top-content-right-top-text:last-child {
|
|
border-right: 1px #EAEAEC solid;
|
|
}
|
|
|
|
.box-top-content-right-bottom {
|
|
position: relative;
|
|
/*padding-top: 50px;*/
|
|
}
|
|
|
|
.process-content {
|
|
position: relative;
|
|
height: 110px;
|
|
/*overflow:hidden;*/
|
|
|
|
.process-content-content {
|
|
background: transparent;
|
|
z-index: 98;
|
|
/*padding: 0 6px;*/
|
|
position: absolute;
|
|
left: 40px;
|
|
text-align: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
margin-top: 37px;
|
|
|
|
.process-content-left {
|
|
width: 16px;
|
|
height: 16px;
|
|
/*margin-top: 5px;*/
|
|
}
|
|
|
|
.process-content-right-top {
|
|
font-size: 12px;
|
|
color: #040B29;
|
|
width: 83px;
|
|
background: #fff;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/*! autoprefixer: on;*/
|
|
text-justify: inter-ideograph;
|
|
word-break: break-all
|
|
}
|
|
|
|
.process-content-right-button {
|
|
font-size: 12px;
|
|
color: #040B29;
|
|
width: 75px;
|
|
background: #fff;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/*! autoprefixer: on;*/
|
|
text-justify: inter-ideograph;
|
|
word-break: break-all
|
|
}
|
|
|
|
.process-content-right-button {
|
|
width: 75px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #6F7385;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 34px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.process-content-contentOne {
|
|
background: transparent;
|
|
z-index: 98;
|
|
/*padding: 0 6px;*/
|
|
position: absolute;
|
|
left: 40px;
|
|
text-align: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
margin-top: 63px;
|
|
|
|
.process-content-left {
|
|
width: 12px;
|
|
height: 12px;
|
|
/*margin-top: 5px;*/
|
|
}
|
|
|
|
.process-content-right-top {
|
|
font-size: 12px;
|
|
color: #040B29;
|
|
width: 83px;
|
|
background: #fff;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/*! autoprefixer: on;*/
|
|
text-justify: inter-ideograph;
|
|
word-break: break-all
|
|
}
|
|
|
|
.process-content-right-button {
|
|
width: 83px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #6F7385;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
left: 50%;
|
|
top: 36px;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/*! autoprefixer: on;*/
|
|
text-justify: inter-ideograph;
|
|
word-break: break-all
|
|
}
|
|
}
|
|
|
|
.process-content-right-xian {
|
|
height: 1px;
|
|
width: 100%;
|
|
background: #00B3BE;
|
|
position: absolute;
|
|
top: 48px;
|
|
}
|
|
|
|
.process-content-right-xian-color {
|
|
height: 28px;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 48px;
|
|
background: linear-gradient(90deg, rgba(0, 179, 190, 0.12) 0%, rgba(4, 11, 41, 0.02) 100%);
|
|
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
}
|
|
|
|
.process-content-right-xian-one {
|
|
height: 1px;
|
|
width: 100%;
|
|
background: #00B3BE;
|
|
position: absolute;
|
|
top: 74px;
|
|
}
|
|
}
|
|
|
|
.box-top-content-right-xian {
|
|
height: 101%;
|
|
border-left: 1px #D92E2E solid;
|
|
position: absolute;
|
|
top: -42px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.box-top-content-right-text {
|
|
position: absolute;
|
|
top: -68px;
|
|
color: #E63030;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
width: 87px;
|
|
z-index: 101;
|
|
height: 27px;
|
|
line-height: 22px;
|
|
background: rgba(230, 48, 48, 0.1);
|
|
border: 1px solid #E63030;
|
|
border-radius: 2px 2px 2px 0;
|
|
}
|
|
|
|
/deep/ .ant-table-column-title {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
::v-deep .ant-table-placeholder {
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
.box-header-text {
|
|
height: 30px;
|
|
background: #F5F6F7;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
right: 88px;
|
|
top: -9px;
|
|
display: flex;
|
|
z-index: 116;
|
|
justify-content: space-between;
|
|
padding: 0 2px 0 2px;
|
|
|
|
.box-header-text-text {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
color: #6F7385;
|
|
line-height: 30px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.box-header-text-color {
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 60, 0.01), 0px 2px 4px rgba(0, 22, 60, 0.02), 0px 4px 6px rgba(0, 22, 60, 0.0229458);
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #E6E7EC;
|
|
color: #01A0AC;
|
|
line-height: normal;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style> |