447 lines
10 KiB
Vue
447 lines
10 KiB
Vue
<template>
|
|
<div class="progress">
|
|
<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="left2" v-if="currentIndex == 1">
|
|
<UAV></UAV>
|
|
</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">
|
|
<iframe
|
|
src="https://fjvsaps.jqmkj.com:20020/api/main/index?ak=ZJ4J0001&ts=1670286176897&token=%2BpldKJhzmMj5GUhAwJqEpYTsrQ4%3D&proId=2201-440106-04-01-829828-2001&proIdtoken=202212060821"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="bottom" v-if="currentIndex == 0">
|
|
<vue-scroll :ops="ops">
|
|
<div class="list progress" >
|
|
<div
|
|
class="list-item progress-item"
|
|
v-for="(item, index) in stageList"
|
|
:key="index"
|
|
>
|
|
<div class="partingLine" v-if="index !== stageList.length - 1">
|
|
............
|
|
</div>
|
|
<div style="margin-top:20px" v-else>
|
|
</div>
|
|
<img
|
|
:src="
|
|
item.status == 0
|
|
? require('@/assets/images/zjsj/noBegin.png')
|
|
: item.status == 1
|
|
? require('@/assets/images/zjsj/doing.png')
|
|
: require('@/assets/images/zjsj/ed.png')
|
|
"
|
|
/>
|
|
<div class="info" >
|
|
<span class="label" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100px">{{ item.taskName }}</span>
|
|
<span class="label" style="font-size:12px;margin-left:-20px">{{ item.startDate }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
// listProgressOfTheTask,
|
|
getProgressTaskParentListApi,
|
|
} from "@/assets/js/api/zhongjianFourth";
|
|
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
|
import TopRight from "./topRight.vue";
|
|
import UAV from './uav.vue'
|
|
// import LeftOne from "./leftOne.vue";
|
|
// import LeftTwo from "./leftTwo.vue";
|
|
// import LeftThree from "./leftThree.vue";
|
|
import { mapState } from "vuex";
|
|
import { resizeFn } from '../../../../components/videoModule/isc_plugin/video_isc_plugin';
|
|
|
|
export default {
|
|
components: {
|
|
TopRight,
|
|
UAV,
|
|
|
|
// LeftOne, LeftTwo, LeftThree
|
|
},
|
|
data() {
|
|
return {
|
|
projectData: {
|
|
constructionStage: 10,
|
|
},
|
|
ops: {
|
|
vuescroll: {
|
|
wheelDirectionReverse: true,
|
|
},
|
|
},
|
|
// 完工的数量
|
|
numberOfCompleted: 2,
|
|
// stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
|
|
stageList: [], //施工阶段,
|
|
// 设备列表
|
|
options: [],
|
|
firstValue: undefined,
|
|
secondValue: undefined,
|
|
currentIndex: 0,
|
|
tabList: [
|
|
{ name: "进度管理" },
|
|
{ name: "无人机巡检" },
|
|
{ name: "全景成像测距" },
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.getDataDateils();
|
|
this.getListProgressData()
|
|
},
|
|
computed: {
|
|
...mapState(["projectSn"]),
|
|
},
|
|
methods: {
|
|
change(val) {
|
|
// console.log("点击的", val);
|
|
this.currentIndex = val;
|
|
},
|
|
getDataDateils() {
|
|
let data = { projectSn: this.$store.state.projectSn };
|
|
getProjectDetail(data).then((res) => {
|
|
if (res.code == 200) {
|
|
// console.log("查询进度", res);
|
|
this.projectData = res.result;
|
|
}
|
|
});
|
|
},
|
|
//获取进度条数据
|
|
getListProgressData(){
|
|
getProgressTaskParentListApi({
|
|
projectSn:this.$store.state.projectSn
|
|
}).then(res=>{
|
|
this.stageList=res.result
|
|
|
|
this.stageList[this.stageList.length-1].startDate = "2016-01-01"
|
|
this.stageList.sort(function(a, b) {
|
|
let obj1 = a['startDate']
|
|
let obj2 = b['startDate']
|
|
const val1 = Math.floor(new Date(obj1).getTime() / 1000)
|
|
const val2 = Math.floor(new Date(obj2).getTime() / 1000)
|
|
return val1 - val2
|
|
// return val2 - val1
|
|
});
|
|
console.log('进度数据',res);
|
|
})
|
|
}
|
|
|
|
// 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;
|
|
overflow: hidden;
|
|
margin-top: 2%;
|
|
|
|
// background: url(../assets/temp/4.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
.changeTab {
|
|
line-height: 38px;
|
|
text-align: center;
|
|
z-index: 99;
|
|
cursor: pointer;
|
|
}
|
|
.changeTab0 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 30%;
|
|
width: 212px;
|
|
height: 38px;
|
|
background-image: url(../assets/temp/tab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.changeTab1 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 40%;
|
|
width: 212px;
|
|
height: 38px;
|
|
background-image: url(../assets/temp/tab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.changeTab2 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 50%;
|
|
width: 212px;
|
|
height: 38px;
|
|
background-image: url(../assets/temp/tab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.show0 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 30%;
|
|
width: 212px;
|
|
height: 38px;
|
|
z-index: 98;
|
|
background-image: url(../assets/temp/untab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.show1 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 40%;
|
|
width: 212px;
|
|
z-index: 98;
|
|
height: 38px;
|
|
background-image: url(../assets/temp/untab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.show2 {
|
|
position: absolute;
|
|
margin-top:-38px;
|
|
left: 50%;
|
|
width: 212px;
|
|
z-index: 98;
|
|
height: 38px;
|
|
background-image: url(../assets/temp/untab.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.left2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
color: #fafbfa;
|
|
}
|
|
|
|
.top {
|
|
height: 74%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left1 {
|
|
width: 80%;
|
|
height: 100%;
|
|
background-image: url(../assets/temp/progress.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
color: #fafbfa;
|
|
}
|
|
.right {
|
|
width: calc(20% - 25px);
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.views {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// .left {
|
|
// width: 22%;
|
|
// margin-right: 1%;
|
|
// height: 100%;
|
|
// .leftone {
|
|
// height: 40%;
|
|
// }
|
|
// .lefttwo {
|
|
// height: 30%;
|
|
// }
|
|
// .leftthree {
|
|
// height: 30%;
|
|
// }
|
|
// }
|
|
.right {
|
|
width: 100%;
|
|
height: 96%;
|
|
// background-image: url(../assets/temp/tab3.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
color: #fafbfa;
|
|
margin-bottom: 36px;
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
::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');
|
|
}
|
|
.bottom {
|
|
height: 26%;
|
|
width: 100%;
|
|
color: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-left: 20px;
|
|
// overflow: scroll;
|
|
|
|
// display: flex;
|
|
// align-items: center;
|
|
// position: relative;
|
|
.progress {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.progress-item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 125px;
|
|
color: #fff;
|
|
margin: 0 20px 0 60px;
|
|
.progress-item-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
transform: translateX(-99%);
|
|
display: block;
|
|
width: 125px;
|
|
height: 2px;
|
|
background: #fff;
|
|
}
|
|
|
|
&.active {
|
|
&::after {
|
|
background: #6dc6d8;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: relative;
|
|
z-index: 9;
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
height: 70px;
|
|
margin-left: -110px;
|
|
.label {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
.progress-item-dot {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.progress-item:nth-child(7) {
|
|
width: 135px;
|
|
}
|
|
.partingLine{
|
|
margin:0 0 0 65px;
|
|
}
|
|
img{
|
|
width: 40px;
|
|
height: 50px;
|
|
margin: -30px 0 0px -121px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|