中建四局-进度管理：完成进度任务待办事项和底部步骤条的接口的对接
This commit is contained in:
Luck-Xiaomi
parent
d569757012
commit
f0e9146b84
@ -10,5 +10,18 @@ export const qualityManagement = params => get('xmgl/qualityInspectionRecord/get
|
||||
// 质量管理-质量问题库
|
||||
export const listQualityManagement = params => get('xmgl/dangerTypeRecord/getBigList', params);
|
||||
|
||||
/* --------------指挥中心------------ */
|
||||
// 安全巡检-安全隐患
|
||||
export const getSafetyPerilInfo = params => get('xmgl/hiddenDangerInspectRecord/getRectificationNoNum', params);
|
||||
|
||||
// 安全巡检-今日巡检
|
||||
export const getTodayInspectionInfo = params => get('xmgl/inspectTaskRecord/getTodayInfo', params);
|
||||
|
||||
/* --------------进度管理------------ */
|
||||
/**
|
||||
* 进度任务-代办事项-底部步骤条
|
||||
* @param {string} projectSn
|
||||
* @param {boolean} isNoStart true: 代办事项 false: 步骤条
|
||||
* @returns
|
||||
*/
|
||||
export const listProgressOfTheTask = params => get('xmgl/progressItem/getScheduleList', params);
|
||||
|
||||
BIN
src/views/projectAdmin/zjsj/assets/images/common/triangle.png
Normal file
BIN
src/views/projectAdmin/zjsj/assets/images/common/triangle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
@ -3,10 +3,17 @@
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div class="left1">
|
||||
<div class="video">摄像头1</div>
|
||||
<el-select v-model="firstValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
|
||||
</div>
|
||||
|
||||
<div class="left2">
|
||||
<div class="project">工程1</div>
|
||||
<el-select v-model="secondValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
@ -14,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
|
||||
<div class="progress-item" :class="{ success: i + 1 < numberOfCompleted }" v-for="(v, i) in progress" :key="i">
|
||||
<div class="date">{{ v.date }}</div>
|
||||
<div class="name">{{ v.name }}</div>
|
||||
</div>
|
||||
@ -23,25 +30,57 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopRight from "./topRight.vue";
|
||||
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
||||
import TopRight from './topRight.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: { TopRight },
|
||||
data() {
|
||||
return {
|
||||
progress: [
|
||||
{ name: "基础工程", date: "2022-02-02" },
|
||||
{ name: "主体结构施工", date: "2022-02-02" },
|
||||
{ name: "屋面工程", date: "2022-02-02" },
|
||||
{ name: "机械设备安拆工程", date: "2022-02-02" },
|
||||
{ name: "室内装饰装修工程", date: "2022-02-02" },
|
||||
{ name: "室内装饰装修工程", date: "2022-02-02" },
|
||||
{ name: "室内装饰装修工程", date: "2022-02-02" },
|
||||
{ name: "室内装饰装修工程", date: "2022-02-02" },
|
||||
{ name: "室内装饰装修工程", date: "2022-02-02" }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
// 完工的数量
|
||||
numberOfCompleted: 2,
|
||||
// 步骤条
|
||||
progress: [],
|
||||
// 设备列表
|
||||
options: [],
|
||||
firstValue: undefined,
|
||||
secondValue: undefined,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['projectSn'])
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
listProgressOfTheTask({ projectSn: this.projectSn, isNoStart: false }).then(res => {
|
||||
console.log('查询步骤条列表: ', res);
|
||||
// state 0未开始, 1进行中, 2已完成
|
||||
const progress = this.progress;
|
||||
res.result.forEach(item => {
|
||||
|
||||
if (item.state == 2) {
|
||||
progress.push({
|
||||
name: item.subitemProjectName,
|
||||
date: item.actualEndTime
|
||||
})
|
||||
this.numberOfCompleted++
|
||||
console.log('this.numberOfCompleted: ', this.numberOfCompleted);
|
||||
} else {
|
||||
progress.push({
|
||||
name: item.subitemProjectName,
|
||||
date: item.startTime
|
||||
})
|
||||
}
|
||||
});
|
||||
console.log(this.progress);
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -60,32 +99,14 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.left1,.left2 {
|
||||
.left1,
|
||||
.left2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-image: url(../assets/temp/bgc_video2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fafbfa;
|
||||
.video , .project{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background-color: #506173;
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.video::before,.project::before{
|
||||
content: '';
|
||||
top: 25%;
|
||||
left: 10%;
|
||||
position: absolute;
|
||||
border: 8px solid transparent;
|
||||
border-left: 8px solid white;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.left2 {
|
||||
background-image: url(../assets/temp/bgc_video1.png);
|
||||
@ -108,7 +129,9 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
@ -116,8 +139,9 @@ export default {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
bottom: calc(100% - 5px);
|
||||
width: 100%;
|
||||
@ -135,4 +159,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__suffix {
|
||||
display: none;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input--suffix .el-input__inner {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
height: 30px;
|
||||
padding-left: 30px;
|
||||
padding-right: 0px;
|
||||
color: #fff;
|
||||
background: #506173;
|
||||
// background-image: url('../assets/images/common/triangle.png');
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,41 +1,65 @@
|
||||
<template>
|
||||
<Card title="进度任务">
|
||||
<div class="tabs">
|
||||
<div class="tab checked">待办事项</div>
|
||||
<div class="tab">未来提醒</div>
|
||||
<div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
|
||||
<div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<vue-scroll>
|
||||
<div class="list-item" v-for="(v, i) in todos" :key="i">
|
||||
<div class="todo">{{ v.todo }}</div>
|
||||
<div class="list" style="position: relative;">
|
||||
<vue-scroll v-if="todoList.length">
|
||||
<div class="list-item" v-for="(item, i) in todoList" :key="i">
|
||||
<div class="todo">{{ item.subitemProjectName }}</div>
|
||||
<div class="startTime">
|
||||
<span class="grey">计划开始时间：</span><span class="blue">{{ v.startTime }}</span>
|
||||
<span class="grey">计划开始时间：</span><span class="blue">{{ item.startTime }}</span>
|
||||
</div>
|
||||
<div class="endTime">
|
||||
<span class="grey">计划结束时间：</span><span class="blue">{{ v.endTime }}</span>
|
||||
<span class="grey">计划结束时间：</span><span class="blue">{{ item.endTime }}</span>
|
||||
</div>
|
||||
<div class="delay orange">已延期{{ v.delay }}天</div>
|
||||
<div class="delay orange" v-if="item.deferreddays > 0">已延期 {{ item.deferreddays }} 天</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
<div v-else class="empty" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
|
||||
<img src="@/assets/images/noData3.png">
|
||||
<div style="text-align: center;color: #5b626b;font-size: 14px;">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
todos: [
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
|
||||
{ todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 }
|
||||
]
|
||||
// 激活的tab
|
||||
activeTab: 0,
|
||||
// 待办事项列表
|
||||
todoList: [],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['projectSn'])
|
||||
},
|
||||
methods: {
|
||||
/** 查询待办事项列表 */
|
||||
getList() {
|
||||
listProgressOfTheTask({ projectSn: this.projectSn, isNoStart: true }).then(res => {
|
||||
console.log('查询待办事项列表: ', res);
|
||||
this.todoList = res.result;
|
||||
})
|
||||
},
|
||||
/** tab点击事件 */
|
||||
handleTabClick(index) {
|
||||
if (this.activeTab == index) return
|
||||
this.activeTab = index;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<div class="dllm">
|
||||
<div class="woria">
|
||||
<JRingChart
|
||||
:title="{ text: '安全隐患', subTitle: '987条件', fontSize: 14 }"
|
||||
:title="{ text: '安全隐患', subTitle: `${todayInspection.totalNum}条件`, fontSize: 14 }"
|
||||
:color="['#6EE4F0', '#E7622A']"
|
||||
:data="[{ value: 2314,name:'已处理' }, { value: 987,name:'未处理' }]"
|
||||
:data="[{ value: safetyPeril.rectificationNum, name:'已处理' }, { value: safetyPeril.noRectificationNum, name:'未处理' }]"
|
||||
:radius="['60%', '85%']"
|
||||
:legend="false"
|
||||
/>
|
||||
@ -17,8 +17,8 @@
|
||||
<span>占比</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>123456</span>
|
||||
<span>20%</span>
|
||||
<span>{{ safetyPeril.rectificationNum || 0 }}</span>
|
||||
<span>{{ safetyPeril.rectificationRatio || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
@ -27,17 +27,17 @@
|
||||
<span>占比</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>123456</span>
|
||||
<span>20%</span>
|
||||
<span>{{ safetyPeril.noRectificationNum || 0 }}</span>
|
||||
<span>{{ safetyPeril.noRectificationRatio || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dllm">
|
||||
<div class="woria">
|
||||
<JRingChart
|
||||
:title="{ text: '今日巡检', subTitle: '4400条件', fontSize: 14 }"
|
||||
:title="{ text: '今日巡检', subTitle: `${todayInspection.totalNum}条件`, fontSize: 14 }"
|
||||
:color="['#6EE4F0', '#E7622A']"
|
||||
:data="[{ value: 2314,name:'已巡检' }, { value: 987,name:'未巡检' }]"
|
||||
:data="[{ value: todayInspection.rectificationNum, name:'已巡检' }, { value: todayInspection.noRectificationNum, name:'未巡检' }]"
|
||||
:radius="['60%', '85%']"
|
||||
:legend="false"
|
||||
/>
|
||||
@ -48,8 +48,8 @@
|
||||
<span>占比</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>123456</span>
|
||||
<span>20%</span>
|
||||
<span>{{ todayInspection.rectificationNum || 0 }}</span>
|
||||
<span>{{ todayInspection.rectificationRatio || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
@ -58,8 +58,8 @@
|
||||
<span>占比</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>123456</span>
|
||||
<span>20%</span>
|
||||
<span>{{ todayInspection.noRectificationNum || 0 }}</span>
|
||||
<span>{{ todayInspection.noRectificationRatio || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,22 +86,68 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSafetyPerilInfo, getTodayInspectionInfo } from '@/assets/js/api/zhongjianFourth'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import Card from '../components/Card.vue'
|
||||
import JRingChart from '../../common/jChart/pie/JRingChart.vue'
|
||||
export default {
|
||||
components: { Card, JRingChart },
|
||||
data() {
|
||||
return {
|
||||
// 安全隐患
|
||||
safetyPeril: {
|
||||
rectificationNum: undefined,
|
||||
rectificationRatio: undefined,
|
||||
noRectificationNum: undefined,
|
||||
noRectificationRatio: undefined,
|
||||
totalNum: undefined,
|
||||
},
|
||||
// 今日巡检
|
||||
todayInspection: {
|
||||
rectificationNum: undefined,
|
||||
rectificationRatio: undefined,
|
||||
noRectificationNum: undefined,
|
||||
noRectificationRatio: undefined,
|
||||
totalNum: undefined,
|
||||
},
|
||||
// 事件列表
|
||||
list: [
|
||||
{ type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
|
||||
{ type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
|
||||
{ type: 3, datetime: '2022-02-02 13:39:09', status: 3 },
|
||||
{ type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
|
||||
// { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
|
||||
]
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSafetyPerilInfo()
|
||||
this.getTodayInspectionInfo()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['projectSn']),
|
||||
},
|
||||
methods: {
|
||||
/** 查询安全隐患数据 */
|
||||
getSafetyPerilInfo() {
|
||||
getSafetyPerilInfo({ projectSn: this.projectSn }).then(res => {
|
||||
console.log('查询安全隐患数据: ', res);
|
||||
const safetyPeril = this.safetyPeril;
|
||||
Object.keys(safetyPeril).forEach(key => {
|
||||
safetyPeril[key] = res.result[key];
|
||||
})
|
||||
})
|
||||
},
|
||||
/** 查询今日巡检数据 */
|
||||
getTodayInspectionInfo() {
|
||||
getTodayInspectionInfo({ projectSn: this.projectSn }).then(res => {
|
||||
console.log('查询今日巡检数据: ', res);
|
||||
const todayInspection = this.todayInspection;
|
||||
Object.keys(todayInspection).forEach(key => {
|
||||
todayInspection[key] = res.result[key];
|
||||
})
|
||||
})
|
||||
},
|
||||
fmtType(type) {
|
||||
return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user