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>
|