中建四局(进度管理):右边tab栏切换页面
This commit is contained in:
骆乐
parent
dec641d997
commit
1b6bc98fc9
BIN
src/views/projectAdmin/fourEngin/assets/temp/progress.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/progress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 810 KiB |
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab2.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab3.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/tab3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
BIN
src/views/projectAdmin/fourEngin/assets/temp/untab.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/untab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
@ -1,27 +1,46 @@
|
||||
<template>
|
||||
<div class="progress">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div class="left1">
|
||||
<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">
|
||||
<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="changeTab"
|
||||
:class="[currentIndex == index ? `show${index}` :`changeTab${index}`]"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
@click="change(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- 进度管理 -->
|
||||
<div class="top" v-show="currentIndex == 0">
|
||||
<div class="left1"></div>
|
||||
<div class="right">
|
||||
<TopRight />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="progress-item" :class="{ success: i + 1 < numberOfCompleted }" v-for="(v, i) in progress" :key="i">
|
||||
<!-- 无人机 -->
|
||||
<div class="left2" v-if="currentIndex == 1"></div>
|
||||
<!-- 全景成像 -->
|
||||
<div class="views" v-if="currentIndex == 2">
|
||||
<div class="left">
|
||||
<div class="leftone">
|
||||
<LeftOne />
|
||||
</div>
|
||||
<div class="lefttwo">
|
||||
<LeftTwo />
|
||||
</div>
|
||||
<div class="leftthree">
|
||||
<LeftThree />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="currentIndex == 0">
|
||||
<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>
|
||||
@ -30,93 +49,185 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
||||
import TopRight from './topRight.vue'
|
||||
import { mapState } from 'vuex'
|
||||
import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";
|
||||
import TopRight from "./topRight.vue";
|
||||
import LeftOne from "./leftOne.vue"
|
||||
import LeftTwo from "./leftTwo.vue"
|
||||
import LeftThree from "./leftThree.vue"
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
components: { TopRight },
|
||||
components: { TopRight,LeftOne, LeftTwo,LeftThree},
|
||||
data() {
|
||||
return {
|
||||
// 完工的数量
|
||||
numberOfCompleted: 2,
|
||||
// 步骤条
|
||||
progress: [],
|
||||
progress: [
|
||||
{ date: '2022-01-01', name: '基础工程', state: true ,},
|
||||
{ date: '2022-02-14', name: '主题结构施工', state: true, },
|
||||
{ date: '2022-03-25', name: '屋面工程', state: true, },
|
||||
{ date: '2022-07-31', name: '机械设备安拆工程', state: true, },
|
||||
{ date: '2022-08-31', name: '室内装饰装修工程', state: true,},
|
||||
{ date: '2022-09-01', name: '基础工程', state: true ,},
|
||||
{ date: '2022-10-14', name: '主题结构施工', state: true, },
|
||||
{ date: '2022-11-25', name: '屋面工程', state: true, },
|
||||
{ date: '2022-12-31', name: '机械设备安拆工程'},
|
||||
],
|
||||
// 设备列表
|
||||
options: [],
|
||||
firstValue: undefined,
|
||||
secondValue: undefined,
|
||||
}
|
||||
currentIndex: 0,
|
||||
tabList: [
|
||||
{ name: "进度管理" },
|
||||
{ name: "无人机巡检" },
|
||||
{ name: "全景成像测距" },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
// this.getList();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['projectSn'])
|
||||
...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);
|
||||
})
|
||||
change(val) {
|
||||
console.log("点击的", val);
|
||||
this.currentIndex = val;
|
||||
},
|
||||
// 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>
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
// background: url(../assets/temp/4.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.changeTab {
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
}
|
||||
.changeTab0 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 40%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/untab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.changeTab1 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/untab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.changeTab2 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 60%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/untab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.show0 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 40%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/tab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.show1 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/tab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.show2 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 60%;
|
||||
width: 212px;
|
||||
height: 38px;
|
||||
background-image: url(../assets/temp/tab.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.left2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../assets/temp/tab2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fafbfa;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 74%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
width: 76%;
|
||||
.left1 {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.left1,
|
||||
.left2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-image: url(../assets/temp/bgc_video2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fafbfa;
|
||||
}
|
||||
.left2 {
|
||||
background-image: url(../assets/temp/bgc_video1.png);
|
||||
}
|
||||
background-image: url(../assets/temp/progress.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fafbfa;
|
||||
}
|
||||
.right {
|
||||
width: calc(24% - 20px);
|
||||
width: calc(20% - 25px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 26%;
|
||||
color: #fff;
|
||||
@ -129,7 +240,7 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: 8px;
|
||||
@ -139,7 +250,7 @@ export default {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
@ -158,6 +269,35 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.views{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 23%;
|
||||
margin-right: 1%;
|
||||
height: 100%;
|
||||
.leftone{
|
||||
height: 40%;
|
||||
}
|
||||
.lefttwo{
|
||||
height: 30%;
|
||||
}
|
||||
.leftthree{
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 77%;
|
||||
height: 100%;
|
||||
background-image: url(../assets/temp/tab3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
color: #fafbfa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__suffix {
|
||||
|
||||
77
src/views/projectAdmin/fourEngin/progress/leftOne.vue
Normal file
77
src/views/projectAdmin/fourEngin/progress/leftOne.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<Card title="测距数据">
|
||||
<div class="list">
|
||||
<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">{{ item.one +'(mm)' }}</span>
|
||||
</div>
|
||||
<div class="endTime">
|
||||
<span class="grey">钢筋间距:</span><span class="blue">{{ item.two+'(mm)' }}</span>
|
||||
</div>
|
||||
<div class="endTime">
|
||||
<span class="grey">水泥浇筑前厚度:</span><span class="blue">{{ item.three+'(mm)' }}</span>
|
||||
</div>
|
||||
<div class="endTime">
|
||||
<span class="grey">水泥浇筑厚度:</span><span class="blue">{{ item.four+'(mm)' }}</span>
|
||||
</div>
|
||||
<div class="orange" >浇筑厚度: {{ item.five }} mm</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 Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
todoList:[
|
||||
{subitemProjectName:'1号楼10层',one:'12',two:'150',three:'10196',four:'10316',five:'120'},
|
||||
{subitemProjectName:'2号楼16层',one:'8',two:'200',three:'10196',four:'10316',five:'120'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
padding-top: 50px;
|
||||
padding-left: 25px;
|
||||
height: calc(100% - 65px);
|
||||
color: #fff;
|
||||
.list-item {
|
||||
font-size: 16px;
|
||||
.todo{
|
||||
font-size: 24px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
div {
|
||||
&:not(:first-child) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #FFFFFF ;
|
||||
}
|
||||
.blue {
|
||||
color: #66D4D9 ;
|
||||
}
|
||||
.orange {
|
||||
color: #F56C35;
|
||||
}
|
||||
</style>
|
||||
15
src/views/projectAdmin/fourEngin/progress/leftThree.vue
Normal file
15
src/views/projectAdmin/fourEngin/progress/leftThree.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<Card title="测量控制" />
|
||||
</template>
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
15
src/views/projectAdmin/fourEngin/progress/leftTwo.vue
Normal file
15
src/views/projectAdmin/fourEngin/progress/leftTwo.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<Card title="云台控制" />
|
||||
</template>
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Card title="进度任务">
|
||||
<div class="tabs">
|
||||
<!-- <div class="tabs">
|
||||
<div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
|
||||
<div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
|
||||
</div>
|
||||
</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">
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
||||
// import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import Card from '../components/Card.vue'
|
||||
@ -37,7 +37,13 @@ export default {
|
||||
// 激活的tab
|
||||
activeTab: 0,
|
||||
// 待办事项列表
|
||||
todoList: [],
|
||||
todoList: [
|
||||
{subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
|
||||
{subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
|
||||
{subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
|
||||
{subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
|
||||
{subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -48,25 +54,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/** 查询待办事项列表 */
|
||||
getList() {
|
||||
if (this.activeTab == 0) {
|
||||
listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
|
||||
console.log('查询待办事项列表: ', res);
|
||||
this.todoList = res.result;
|
||||
})
|
||||
} else {
|
||||
listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
|
||||
console.log('查询未来提醒列表: ', res);
|
||||
this.todoList = res.result;
|
||||
})
|
||||
}
|
||||
},
|
||||
// getList() {
|
||||
// if (this.activeTab == 0) {
|
||||
// listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
|
||||
// console.log('查询待办事项列表: ', res);
|
||||
// this.todoList = res.result;
|
||||
// })
|
||||
// } else {
|
||||
// listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
|
||||
// console.log('查询未来提醒列表: ', res);
|
||||
// this.todoList = res.result;
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
/** tab点击事件 */
|
||||
handleTabClick(index) {
|
||||
if (this.activeTab == index) return
|
||||
this.activeTab = index;
|
||||
this.getList()
|
||||
},
|
||||
// handleTabClick(index) {
|
||||
// if (this.activeTab == index) return
|
||||
// this.activeTab = index;
|
||||
// this.getList()
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -87,16 +93,23 @@ export default {
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-left: 20px;
|
||||
padding-top: 50px;
|
||||
padding-left: 25px;
|
||||
height: calc(100% - 40px);
|
||||
color: #fff;
|
||||
.list-item {
|
||||
font-size: 16px;
|
||||
.todo{
|
||||
font-size: 24px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
div {
|
||||
&:not(:first-child) {
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
@ -104,12 +117,12 @@ export default {
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #ccc;
|
||||
color: #FFFFFF ;
|
||||
}
|
||||
.blue {
|
||||
color: #2de1fa;
|
||||
color: #66D4D9 ;
|
||||
}
|
||||
.orange {
|
||||
color: #f56c36;
|
||||
color: #F56C35;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user