|
|
@@ -11,11 +11,10 @@
|
|
|
<i class="el-icon-close" @click="close()" />
|
|
|
</span>
|
|
|
<div class="leftBar">
|
|
|
- <span>进度查看</span>
|
|
|
+ <span>进度专题图</span>
|
|
|
<CommonTreeList :placeholder="'工程选择'" :prjId="45" @changeProjectName="prjChange($event)" />
|
|
|
</div>
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <div class="title">日期:</div>
|
|
|
+ <div class="rightBar">
|
|
|
<el-date-picker
|
|
|
style="width: 220px"
|
|
|
:picker-options="pickerOptions"
|
|
|
@@ -36,6 +35,10 @@
|
|
|
<template v-if="resultData.length > 0">
|
|
|
<div class="left">
|
|
|
<img class="operationBtn" :src="buttonImg" @click="play()" />
|
|
|
+ <el-select v-model="timeInterval" clearable placeholder="请选择">
|
|
|
+ <el-option v-for="item in intervalOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<!-- <el-steps :active="active" finish-status="success">
|
|
|
@@ -144,7 +147,19 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
return t
|
|
|
}
|
|
|
//
|
|
|
+ splitTimeArr = []
|
|
|
timeSteps: Array<Array<string>> = []
|
|
|
+ timeInterval = 1
|
|
|
+ intervalOptions = [
|
|
|
+ { value: 1, label: '按天' },
|
|
|
+ { value: 7, label: '按周' },
|
|
|
+ { value: 30, label: '按月' }
|
|
|
+ ]
|
|
|
+ //监听间隔变化
|
|
|
+ @Watch('timeInterval')
|
|
|
+ timeIntervalChangeMethod() {
|
|
|
+ this.splitTime()
|
|
|
+ }
|
|
|
//播放监听
|
|
|
@Watch('isPlaying', { immediate: true })
|
|
|
activeChangeMethod(val) {
|
|
|
@@ -241,9 +256,10 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
}
|
|
|
}
|
|
|
//时间分割函数
|
|
|
- splitTime(dateValue) {
|
|
|
- let start = dateValue[0]
|
|
|
- let end = dateValue[1]
|
|
|
+ splitTime() {
|
|
|
+ let start = this.splitTimeArr[0]
|
|
|
+ let end = this.splitTimeArr[1]
|
|
|
+ let intD = this.timeInterval
|
|
|
this.timeSteps = []
|
|
|
const startTime = start.split(' ')[0]
|
|
|
const endTime = end.split(' ')[0]
|
|
|
@@ -267,7 +283,7 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
let month = startTimeC.getMonth() + 1 < 10 ? '0' + (startTimeC.getMonth() + 1) : startTimeC.getMonth() + 1
|
|
|
let day = startTimeC.getDate().toString().length == 1 ? '0' + startTimeC.getDate() : startTimeC.getDate()
|
|
|
dateList.push(year + '-' + month + '-' + day + ' ' + start.split(' ')[1])
|
|
|
- startTimeC.setDate(startTimeC.getDate() + 1)
|
|
|
+ startTimeC.setDate(startTimeC.getDate() + intD)
|
|
|
}
|
|
|
dateList[dateList.length - 1] = endTime + ' ' + end.split(' ')[1]
|
|
|
return dateList
|
|
|
@@ -296,10 +312,11 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
})
|
|
|
var minDate = new Date(Math.min.apply(null, mini))
|
|
|
var maxDate = new Date(Math.max.apply(null, max))
|
|
|
- this.splitTime([moment(minDate).format('YYYY-MM-DD HH:mm:ss'), moment(maxDate).format('YYYY-MM-DD HH:mm:ss')])
|
|
|
+ this.splitTimeArr = [moment(minDate).format('YYYY-MM-DD HH:mm:ss'), moment(maxDate).format('YYYY-MM-DD HH:mm:ss')]
|
|
|
+ this.splitTime()
|
|
|
}
|
|
|
//进度信息查询
|
|
|
- initScanTimes(date?) {
|
|
|
+ async initScanTimes(date?) {
|
|
|
const pipe = gPipe
|
|
|
const that = this
|
|
|
const fieldName = 'CODE'
|
|
|
@@ -315,7 +332,7 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
}
|
|
|
let s_dt = date ? date.beginDate : this.dateValue && this.dateValue[0] ? this.dateValue[0] : ''
|
|
|
let e_dt = date ? date.endDate : this.dateValue && this.dateValue[1] ? this.dateValue[1] : ''
|
|
|
- this.showSpeedInfos(s_dt, e_dt)
|
|
|
+ await this.showSpeedInfos(s_dt, e_dt)
|
|
|
PipeAndNodeProcess(dateRange)
|
|
|
.then((result) => {
|
|
|
if (result.code !== 1 || result.result.length === 0) {
|
|
|
@@ -902,56 +919,9 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- /deep/ .el-select {
|
|
|
- width: 100px;
|
|
|
- .el-input__inner {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- font-size: 0.072917rem /* 14/192 */;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 500;
|
|
|
- color: #2ba7ff;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .el-input .el-select__caret {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .el-icon-arrow-up:before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- // 定义元素宽高
|
|
|
- width: 0.130208rem /* 25/192 */;
|
|
|
- height: 0.078125rem /* 15/192 */;
|
|
|
- background: url('~@/views/groupPage/images/三角下.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- .el-select-dropdown {
|
|
|
- min-width: 0.625rem /* 120/192 */ !important /* 90/192 */;
|
|
|
- }
|
|
|
- .el-tree {
|
|
|
- background: #023c5d;
|
|
|
- color: #ffffff;
|
|
|
- .el-tree-node__content {
|
|
|
- background: #023c5d;
|
|
|
- }
|
|
|
- .el-tree-node.is-current > .el-tree-node__content,
|
|
|
- .el-tree-node__content:hover {
|
|
|
- background-color: rgba(43, 167, 255, 0.2) !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .el-date-editor {
|
|
|
- background: rgb(9, 48, 84);
|
|
|
- border-color: transparent;
|
|
|
- .el-range-input {
|
|
|
- background-color: transparent !important;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .el-range-separator {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ .rightBar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
@@ -968,24 +938,76 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
color: #2ba7ff;
|
|
|
}
|
|
|
}
|
|
|
+ /deep/ .el-select {
|
|
|
+ width: 0.520833rem /* 100/192 */;
|
|
|
+ .el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ font-size: 0.072917rem /* 14/192 */;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2ba7ff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .el-input .el-select__caret {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .el-icon-arrow-up:before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ // 定义元素宽高
|
|
|
+ width: 0.130208rem /* 25/192 */;
|
|
|
+ height: 0.078125rem /* 15/192 */;
|
|
|
+ background: url('~@/views/groupPage/images/三角下.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ .el-select-dropdown {
|
|
|
+ min-width: 0.625rem /* 120/192 */ !important /* 90/192 */;
|
|
|
+ }
|
|
|
+ .el-tree {
|
|
|
+ background: #023c5d;
|
|
|
+ color: #ffffff;
|
|
|
+ .el-tree-node__content {
|
|
|
+ background: #023c5d;
|
|
|
+ }
|
|
|
+ .el-tree-node.is-current > .el-tree-node__content,
|
|
|
+ .el-tree-node__content:hover {
|
|
|
+ background-color: rgba(43, 167, 255, 0.2) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/ .el-date-editor {
|
|
|
+ background: rgb(9, 48, 84);
|
|
|
+ border-color: transparent;
|
|
|
+ .el-range-input {
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-range-separator {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 0.208333rem /* 40/192 */);
|
|
|
display: flex;
|
|
|
.left {
|
|
|
- width: 0.572917rem /* 110/192 */;
|
|
|
+ width: 0.729167rem /* 140/192 */;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
.operationBtn {
|
|
|
cursor: pointer;
|
|
|
+ margin-left: 0.052083rem /* 10/192 */;
|
|
|
width: 0.255208rem /* 49/192 */;
|
|
|
height: 0.255208rem /* 49/192 */;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
- width: calc(100% - 0.572917rem /* 110/192 */);
|
|
|
+ width: calc(100% - 0.729167rem /* 140/192 */);
|
|
|
height: 100%;
|
|
|
// padding: 0.052083rem /* 10/192 */;
|
|
|
margin: 0 0.260417rem /* 50/192 */;
|