497 lines
15 KiB
Vue
497 lines
15 KiB
Vue
<template>
|
||
<!-- 进度管理 -->
|
||
<div v-if="COMPANY != 'longguang'" class="fullHeight">
|
||
<!-- <vue-scroll>
|
||
<img src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
|
||
</vue-scroll> -->
|
||
<div class="aside fullHeight">
|
||
<div class="blockBox">
|
||
<div class="blockTitle"><!-- 倒计时 -->{{$t('message.dataBoard.countDown')}}
|
||
<!-- 配置项目竣工日期 -->
|
||
<el-tooltip class="configBtn" effect="dark" :content="$t('message.dataBoard.configProjectCompleteDate')" placement="top">
|
||
<i class="el-icon-s-tools" @click="dialogVisible=true"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="blockContent">
|
||
<p>
|
||
<!-- 项目整体倒计时： -->
|
||
{{$t('message.dataBoard.projectCountDown')+':'}}
|
||
</p>
|
||
<div class="days">
|
||
<span class="num">{{endDate?leftDays:'--'}}</span><span>
|
||
<!-- 天 -->
|
||
{{$t('message.dataBoard.textList')[0]}}
|
||
</span>
|
||
</div>
|
||
<img src="@/assets/images/daysBG.png" class="daysBG">
|
||
<p class="endDate"><!-- 竣工时间： -->{{$t('message.dataBoard.completeTime')+':'}}{{endDate}}</p>
|
||
<!-- <div class="numContent">
|
||
<div class="numBox">
|
||
<div class="bg1 medium">
|
||
<span class="num">10</span>
|
||
</div>
|
||
<p>完成任务数</p>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="bg1 medium">
|
||
<span class="num">10</span>
|
||
</div>
|
||
<p>完成率</p>
|
||
</div>
|
||
<div class="numBox">
|
||
<div class="bg1 medium">
|
||
<span class="num">10</span>
|
||
</div>
|
||
<p>延期天数</p>
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 状态统计 -->
|
||
{{$t('message.dataBoard.statusStatistics')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="companyChart" ref="companyChart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle"><!-- 进度预警 -->{{$t('message.dataBoard.progressAlarm')}}
|
||
<el-select v-model="alarmType" size="mini" class="alarmTypeBox" @change="changeAlarmType">
|
||
<!-- 按人员 -->
|
||
<el-option :value="1" :label="$t('message.dataBoard.accordingtoPeople')"></el-option>
|
||
<!-- 按任务 -->
|
||
<el-option :value="2" :label="$t('message.dataBoard.accordingtoTask')"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="blockContent">
|
||
<vue-scroll>
|
||
<table class="greenTable" v-show="alarmType==1">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<!-- 人员姓名 -->
|
||
{{$t('message.dataBoard.peopleName')}}
|
||
</th>
|
||
<th>
|
||
<!-- 超期任务数 -->
|
||
{{$t('message.dataBoard.extendedTaskNum')}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in alarmList" :key="index">
|
||
<td>
|
||
{{ item.personChargeName }}
|
||
</td>
|
||
<td>{{ item.num }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="greenTable" v-show="alarmType==2">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<!-- 任务 -->
|
||
{{$t('message.dataBoard.task')}}
|
||
</th>
|
||
<th>
|
||
<!-- 负责人 -->
|
||
{{$t('message.dataBoard.principal')}}
|
||
</th>
|
||
<th>
|
||
<!-- 超期天数 -->
|
||
{{$t('message.dataBoard.extendedDays')}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in alarmList" :key="index">
|
||
<td>
|
||
{{ item.subitemProjectName }}
|
||
</td>
|
||
<td>{{ item.personChargeName }}</td>
|
||
<td>{{ item.overdueDayNum }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="alarmList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right fullHeight">
|
||
<div class="blockBox blockBox3" style="height: calc(66.66% - 25px)">
|
||
<div class="blockTitle">
|
||
<!-- 甘特图 -->
|
||
{{$t('message.dataBoard.ganttChart')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<iframe :src="'doc/ExtGantt/Ext甘特图.html?url='+baseURL+'&projectSn='+$store.state.projectSn+'&token='+$store.state.userInfo.token" id="iframe" class="Extgantt" > </iframe>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox blockBox2">
|
||
<div class="blockTitle">
|
||
<!-- 多维计划 -->
|
||
{{$t('message.dataBoard.manyDimensionsPlan')}}
|
||
</div>
|
||
<div class="blockContent" style=" display: flex;align-items: center;">
|
||
<div class="stageBox">
|
||
<vue-scroll :ops="ops" ref="stageScroll">
|
||
<div
|
||
class="stageItem"
|
||
v-for="(item, index) in stageList"
|
||
:key="index"
|
||
:class="
|
||
projectData.constructionStage - 1 > index
|
||
? 'finish'
|
||
: projectData.constructionStage - 1 == index
|
||
? 'ongoing'
|
||
: ''
|
||
"
|
||
>
|
||
<div class="statusImg"></div>
|
||
<p>{{ item.name }}</p>
|
||
<div class="line" v-show="stageList.length != index + 1"></div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog :modal-append-to-body="false" :title="$t('message.dataBoard.configProjectCompleteDate')" :visible.sync="dialogVisible" width="667px">
|
||
<div style="text-align:center;margin-bottom:30px">
|
||
<el-date-picker size="medium"
|
||
v-model="endDate"
|
||
type="date"
|
||
:placeholder="$t('message.dataBoard.chooseDate')" value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
<!-- <br> -->
|
||
<el-button type="primary" size="medium" @click="saveDataFn" style="margin-left: 20px">
|
||
<!-- 保存 -->
|
||
{{$t('message.dataBoard.save')}}
|
||
</el-button>
|
||
</div>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
<PlanTwo v-else></PlanTwo>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import { getProjectDetail,getProjectExtendInfoApi,editProjectExtendApi } from "@/assets/js/api/baseInfo.js";
|
||
import {selectProgressItemStatisticsApi,
|
||
selectProgressItemOverdueListApi,selectPersonOverdueProgressItemNumListApi} from "@/assets/js/api/dataBoard.js"
|
||
import {GetDateStr} from "@/assets/js/util"
|
||
import PlanTwo from "./plan4";
|
||
export default {
|
||
data() {
|
||
return {
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true,
|
||
},
|
||
},
|
||
stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
|
||
projectData: {
|
||
constructionStage: 10,
|
||
videoUrl: "",
|
||
},
|
||
alarmList:[],
|
||
alarmType:1,
|
||
endDate:'',
|
||
dialogVisible:false,
|
||
leftDays:0,
|
||
baseURL:'',
|
||
COMPANY:""
|
||
};
|
||
},
|
||
components: {
|
||
PlanTwo,
|
||
},
|
||
created(){
|
||
this.COMPANY = COMPANY
|
||
console.log(COMPANY);
|
||
},
|
||
mounted() {
|
||
this.baseURL = this.$http.defaults.baseURL;
|
||
this.getDataDateils();
|
||
this.getData()
|
||
this.getData3()
|
||
},
|
||
methods: {
|
||
saveDataFn(){
|
||
if(this.endDate==''){
|
||
// 请选择日期！
|
||
this.$message.error(this.$t('message.dataBoard.pleaseChooseDate')+'!')
|
||
return
|
||
}
|
||
editProjectExtendApi({projectSn: this.$store.state.projectSn,engineeringEndTime:this.endDate}).then(res=>{
|
||
// '保存成功！'
|
||
this.$message.success(this.$t('message.dataBoard.saveSuccess')+'!')
|
||
this.dialogVisible=false
|
||
this.getDaysBetween()
|
||
})
|
||
},
|
||
/**
|
||
* 计算两个日期之间的天数
|
||
* @param dateString1 开始日期 yyyy-MM-dd
|
||
* @param dateString2 结束日期 yyyy-MM-dd
|
||
* @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
|
||
*/
|
||
getDaysBetween(){
|
||
var startDate = Date.parse(GetDateStr(0,'-'));
|
||
var endDate = Date.parse(this.endDate);
|
||
if (startDate>endDate){
|
||
return 0;
|
||
}
|
||
if (startDate==endDate){
|
||
return 1;
|
||
}
|
||
var days=(endDate - startDate)/(1*24*60*60*1000);
|
||
// return days;
|
||
this.leftDays=days
|
||
},
|
||
changeAlarmType(){
|
||
if(this.alarmType==1){
|
||
this.getData3()
|
||
}else{
|
||
this.getData2()
|
||
}
|
||
},
|
||
getData(){
|
||
selectProgressItemStatisticsApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
var data = res.result
|
||
// ['未开始','进行中','已完成','已延期']
|
||
this.createdBarCharts(this.$t('message.dataBoard.pieProjectStatus'), [{
|
||
value: data.notStartNum,
|
||
itemStyle: {
|
||
color: '#848484'
|
||
}
|
||
},{
|
||
value: data.executingNum,
|
||
itemStyle: {
|
||
color: '#557DED'
|
||
}
|
||
},{
|
||
value: data.completeNum,
|
||
itemStyle: {
|
||
color: '#44D7B6'
|
||
}
|
||
},{
|
||
value: data.overdueNum,
|
||
itemStyle: {
|
||
color: '#FE6C7F'
|
||
}
|
||
}], this.$refs.companyChart)
|
||
})
|
||
},
|
||
getData2(){
|
||
selectProgressItemOverdueListApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
this.alarmList=res.result
|
||
})
|
||
},
|
||
getData3(){
|
||
selectPersonOverdueProgressItemNumListApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||
this.alarmList=res.result
|
||
})
|
||
},
|
||
//年龄结构---图表
|
||
createdBarCharts(xData, yData1, el) {
|
||
let that = this;
|
||
let ageChart = echarts.init(el);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 20,
|
||
left: 0,
|
||
bottom: 5,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: ["#5CE2F6", "#5181F6"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
align: "left",
|
||
top: 5,
|
||
left: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.2)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: /* '任务数', */this.$t('message.dataBoard.taskNum'),
|
||
type: "bar",
|
||
data: yData1,
|
||
barWidth: 36,
|
||
}
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
//获取项目详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
getProjectDetail(data).then((res) => {
|
||
// console.log(res);
|
||
if (res.code == 200) {
|
||
this.projectData = res.result;
|
||
// console.log('this.projectData.constructionStage-4*230',this.projectData.constructionStage-4*230)
|
||
if (parseInt(this.projectData.constructionStage) > 4) {
|
||
this.$refs["stageScroll"].scrollTo(
|
||
{
|
||
x: (this.projectData.constructionStage - 4) * 230,
|
||
// x:'50%'
|
||
},
|
||
500
|
||
);
|
||
}
|
||
}
|
||
});
|
||
getProjectExtendInfoApi(data).then((res) => {
|
||
// console.log(res);
|
||
this.endDate = res.result.engineeringEndTime;
|
||
if(this.endDate){
|
||
this.getDaysBetween()
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.numContent {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
p{
|
||
font-size: 14px;
|
||
opacity: 0.88;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.companyChart{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/deep/.alarmTypeBox{
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 10px;
|
||
width: 110px;
|
||
opacity: 0.8;
|
||
z-index: 3;
|
||
.el-input__inner{
|
||
background-color: transparent;
|
||
color: white;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 5px;
|
||
}
|
||
.el-input__suffix{
|
||
right: 0px;
|
||
}
|
||
.el-input__icon{
|
||
color: white;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
.configBtn{
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 15px;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
z-index: 3;
|
||
}
|
||
.days{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
.num{
|
||
font-size: 46px;
|
||
}
|
||
}
|
||
.daysBG{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.endDate{
|
||
position: absolute;
|
||
right: 15px;
|
||
bottom: 12px;
|
||
// font-size: 13px;
|
||
}
|
||
.Extgantt{
|
||
width: 100%;
|
||
height: 100% ;
|
||
border: none;
|
||
|
||
}
|
||
</style>
|