|
|
@@ -1,45 +1,47 @@
|
|
|
<template>
|
|
|
<div class="bottom-detail">
|
|
|
- <el-row>交付日期：{{ scheduleDetail.endTime }}</el-row>
|
|
|
- <el-row class="date-laout">排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }} <span style="color: #999999; font-size: 14px;">{{ '(' + scheduleDetail.scheduleTimeAnnotation ? scheduleDetail.scheduleTimeAnnotation.所有 : '' + ')' }}</span></el-row>
|
|
|
+ <el-row>交付日期：{{ scheduleDetail.endTize }}</el-row>
|
|
|
+ <el-row class="date-laout">排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }}
|
|
|
+ <span v-if="scheduleDetail.scheduleTimeAnnotation" style="color: #999999; font-size: 14px;">
|
|
|
+ {{ '(' + scheduleDetail.scheduleTimeAnnotation.所有 + ')' }}
|
|
|
+ </span>
|
|
|
+ </el-row>
|
|
|
<el-row>预计上线版本：
|
|
|
<span v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length > 0">
|
|
|
- <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span>
|
|
|
+ <span v-for="item in scheduleDetail.preOnlineVersionInfos" :key="item.id">
|
|
|
+ <el-popover placement="top" width="200" trigger="click" class="test">
|
|
|
+ <div class="popover-title">版本时间轴</div>
|
|
|
+ <div class="timeline-soll">
|
|
|
+ <div v-for="(i, y) in timeline" :key="y" class="dateTime-flexStart">
|
|
|
+ <div style="width: 24px">
|
|
|
+ <span class="circular" />
|
|
|
+ <div v-show="y < timeline.length - 1" class="qz-timeline" />
|
|
|
+ </div>
|
|
|
+ <div class="qz-over-hidden">
|
|
|
+ <el-tooltip v-if="i.name.length + i.version.length > 10" class="item" effect="dark" :content="i.name + i.version" placement="right">
|
|
|
+ <span class="version">{{ i.name }}{{ i.version }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span v-else class="version">{{ i.name + i.version }}</span><br>
|
|
|
+ <span class="createTime">{{ i.endTime }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="reference" class="onlineVersion" @click="getEventList(item.id)"> {{ item.appName + " " + item.version }} </span>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- <el-popover placement="top" title="版本时间轴" width="200" trigger="click">
|
|
|
- <el-timeline>
|
|
|
- <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size">
|
|
|
- {{ activity.content }}
|
|
|
- </el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
- <span slot="reference"> 猜猜猜 </span>
|
|
|
- </el-popover>
|
|
|
<el-tooltip class="item" effect="dark" content="版本有问题？点击触发重新计算！" placement="right">
|
|
|
<svg-icon :icon-class="icon_problem ? 'problem1' : 'problem'" style="cursor: pointer;" @mouseenter="icon_problem = true" @mouseleave="icon_problem = false" @click="taskUpdatePreOnlineVersion" />
|
|
|
</el-tooltip>
|
|
|
</el-row>
|
|
|
- <div class="border-top">
|
|
|
- <el-divider />
|
|
|
- <el-form ref="scheduleDetail" :inline="true" :model="form_query" class="Layout_space_start" label-position="left" label-width="110px">
|
|
|
- <el-form-item label="实际提测时间">
|
|
|
- <el-date-picker v-model="form_query.launchTestRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="实际准出时间：">
|
|
|
- <el-date-picker v-model="form_query.testFinishRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="实际上线时间：">
|
|
|
- <el-date-picker v-model="form_query.onlineRealTime" type="date" :clearable="false" placeholder="请选择" format="yyyy.MM.dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" @change="setChangeArea(2)" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { taskUpdatePreOnlineVersion } from '@/api/taskIndex.js'
|
|
|
import { analysisBizId_id } from '@/utils/crypto-js.js'
|
|
|
+import { getEvent } from '@/api/versionsCalendar'
|
|
|
import moment from 'moment'
|
|
|
-import { taskGet } from '@/api/taskIndex'
|
|
|
export default {
|
|
|
filters: {
|
|
|
handlerDate(val) {
|
|
|
@@ -53,24 +55,23 @@ export default {
|
|
|
return {
|
|
|
scheduleDetail: this.data,
|
|
|
icon_problem: false,
|
|
|
- form_query: {
|
|
|
- launchTestRealTime: '',
|
|
|
- testFinishRealTime: '',
|
|
|
- onlineRealTime: ''
|
|
|
- },
|
|
|
+ timeline: [],
|
|
|
activities: [{
|
|
|
- content: '支持使用图标 2018-04-03',
|
|
|
- size: 'large',
|
|
|
- type: 'primary',
|
|
|
- icon: 'el-icon-more'
|
|
|
+ name: '开发',
|
|
|
+ endTime: '2018-04-03',
|
|
|
+ version: 'large'
|
|
|
}, {
|
|
|
- content: '支持自定义颜色 2018-04-03',
|
|
|
- color: '#0bbd87'
|
|
|
+ name: '开发',
|
|
|
+ endTime: '2018-04-03',
|
|
|
+ version: 'large'
|
|
|
}, {
|
|
|
- content: '支持自定义尺寸 2018-04-03',
|
|
|
- size: 'large'
|
|
|
+ name: '开发',
|
|
|
+ endTime: '2018-04-03',
|
|
|
+ version: 'large'
|
|
|
}, {
|
|
|
- content: '默认样式的节点 2018-04-03'
|
|
|
+ name: '开发',
|
|
|
+ endTime: '2018-04-03',
|
|
|
+ version: 'large'
|
|
|
}]
|
|
|
}
|
|
|
},
|
|
|
@@ -82,18 +83,7 @@ export default {
|
|
|
deep: true
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- this.getQueryData()
|
|
|
- },
|
|
|
methods: {
|
|
|
- async getQueryData() {
|
|
|
- const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
|
|
|
- const res = await taskGet(bizId_id[1])
|
|
|
- if (res.code === 200) {
|
|
|
- this.form_query = res.data
|
|
|
- // this.form_query.testFinishRealTime = '2021.01.19'
|
|
|
- }
|
|
|
- },
|
|
|
async taskUpdatePreOnlineVersion() {
|
|
|
const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
|
|
|
const res = await taskUpdatePreOnlineVersion(bizId_id[0])
|
|
|
@@ -102,8 +92,10 @@ export default {
|
|
|
this.$message({ message: '预计上线版本重新计算中，请稍后刷新页面查看！', type: 'success', offset: 150 })
|
|
|
}
|
|
|
},
|
|
|
- setChangeArea(e) {
|
|
|
- console.log(e, 'cs')
|
|
|
+ getEventList(ele) {
|
|
|
+ getEvent(ele).then(response => {
|
|
|
+ this.timeline = response.data
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -111,33 +103,80 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.Layout_space_start {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
-}
|
|
|
.bottom-detail {
|
|
|
font-size: 14px;
|
|
|
width: calc(100% - 40px);
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
+
|
|
|
.el-timeline {
|
|
|
margin: 0;
|
|
|
font-size: 14px;
|
|
|
list-style: none;
|
|
|
padding: 0px;
|
|
|
}
|
|
|
-.border-top {
|
|
|
- >>>.el-form-item {
|
|
|
- margin: 0 30px 10px 0;
|
|
|
- }
|
|
|
- >>>.el-divider--horizontal {
|
|
|
- display: block;
|
|
|
- height: 1px;
|
|
|
- width: 100%;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
-}
|
|
|
.date-laout {
|
|
|
margin: 15px 0;
|
|
|
}
|
|
|
+.onlineVersion:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.popover-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft Sans Serif;
|
|
|
+ font-weight: 400;
|
|
|
+ margin: 0 0 20px;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.el-timeline-item__content {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.version {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.qz-over-hidden {
|
|
|
+ width: 144px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.createTime {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.timeline-soll {
|
|
|
+ width: 100%;
|
|
|
+ height: 245px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 15px;
|
|
|
+}
|
|
|
+.qz-timeline {
|
|
|
+ width: 0px;
|
|
|
+ height: calc(100% + 8px);
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ position: relative;
|
|
|
+ top: -8px;
|
|
|
+ left: 8px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dateTime-flexStart {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+}
|
|
|
+.circular {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ margin: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #60AEFF;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
</style>
|
qinzhipeng_v@didiglobal.com