1001 lines
39 KiB
Vue
1001 lines
39 KiB
Vue
<template>
|
||
<!-- 进度管理 -->
|
||
<div class="fullHeight">
|
||
<div class="optionBox_wrap">
|
||
<div class="optionBox">
|
||
<vue-scroll v-if="ProgressPlanBidSectionList.length != 0" :ops="ops" ref="navScroll">
|
||
<div @click="changeOptionBoxListIndex(index,item.id)" v-for="(item,index) in ProgressPlanBidSectionList" :key="index" class="optionBox_item" :class="{selectOptionBox_item:selectProgressPlanBidSection === index}">
|
||
<span>{{item.projectfName}}</span>
|
||
<div class="a"></div>
|
||
<div class="b"></div>
|
||
<div class="c"></div>
|
||
<div class="d"></div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<!-- <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.progressOfTheOverview')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="blockContentTitleBox">
|
||
<span class="TitleBoxSpan TitleBoxSpan1">
|
||
<!-- 全景节点: -->
|
||
{{$t('message.dataBoard.panoramaNode')+':'}}<span style="font-size: 18px;font-weight: 900">{{progressOverview.panoramaNodeNum ? progressOverview.panoramaNodeNum:'0'}}</span></span>
|
||
<span class="TitleBoxSpan TitleBoxSpan2">
|
||
<!-- 楼栋节点数: -->
|
||
{{$t('message.dataBoard.buildingNodeNum')+':'}} <span style="font-size: 18px;font-weight: 900">{{progressOverview.buildingNodeNum ? progressOverview.buildingNodeNum:'0'}}</span></span>
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart1"></div>
|
||
<!-- 进行中节点数 -->
|
||
{{$t('message.dataBoard.doingNodeNum')}}
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart2"></div>
|
||
<!-- 已完成节点数 -->
|
||
{{$t('message.dataBoard.completeNodeNum')}}
|
||
</div>
|
||
<div class="ChartsBox">
|
||
<div class="Charts" ref="Chart3"></div>
|
||
<!-- 逾期节点数 -->
|
||
{{$t('message.dataBoard.overdueNodeNum')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 整体进度 -->
|
||
{{$t('message.dataBoard.overallProgress')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="dotBox">
|
||
<p class="text"><i style="background: #44D7B6;" class="dot"></i><span>
|
||
<!-- 提前完成/正常完成/进行中 -->
|
||
{{$t('message.dataBoard.progressStatusList')[0]}}
|
||
</span></p>
|
||
<p class="text"><i style="background: #FE6C7F;" class="dot"></i><span>
|
||
<!-- 逾期完成/逾期 -->
|
||
{{$t('message.dataBoard.progressStatusList')[1]}}
|
||
</span></p>
|
||
</div>
|
||
<div v-if="noDataImg1.length != 0" class="companyChart" ref="companyChart"></div>
|
||
<div style="text-align: center" class="noDataImgBox">
|
||
<img style="width: 150px" v-if="noDataImg1.length == 0" class="noDataImg" src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p v-if="noDataImg1.length == 0">
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="blockBox blockBox3" style="height: calc(100% - 8px)">
|
||
<div class="blockTitle">
|
||
<!-- 全景计划 -->
|
||
{{$t('message.dataBoard.panoramaPlan')}}
|
||
</div>
|
||
<div class="container">
|
||
<plan-item :starDate="2021" :endDate="2022" :title="title" :item='item' v-for="item in 30" :key="item"></plan-item>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="blockBox blockBox2" style="height: calc(100% - 8px)">
|
||
<div class="blockTitle">
|
||
<!-- 楼栋进度图 -->
|
||
{{$t('message.dataBoard.buildingProgressPicture')}}
|
||
</div>
|
||
<div class="footerContainer">
|
||
<progress-item v-for="item in 14"></progress-item>
|
||
</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>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import { getProjectDetail,getProjectExtendInfoApi,editProjectExtendApi } from "@/assets/js/api/baseInfo.js";
|
||
import {selectProgressItemStatisticsApi,
|
||
selectProgressItemOverdueListApi,
|
||
selectPersonOverdueProgressItemNumListApi,
|
||
getPlanNodeStatisticsApi,
|
||
selectBuildingNodeStatisticsListApi,
|
||
progressBuildingPlanListApi,
|
||
selectBuildingNodeDetailStatisticsListApi,
|
||
selectPanoramaNodePlanListApi,
|
||
selectProgressPlanBidSectionListApi} from "@/assets/js/api/dataBoard.js"
|
||
import {GetDateStr} from "@/assets/js/util"
|
||
import planItem from './components/planItem.vue'
|
||
import progressItem from './components/progressItem.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectItem:'',
|
||
ops: {
|
||
vuescroll: {
|
||
// wheelScrollDuration: 0,
|
||
wheelDirectionReverse: true,
|
||
},
|
||
},
|
||
stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
|
||
stageList2:'',//全景计划
|
||
projectData: {
|
||
constructionStage: 10,
|
||
videoUrl: "",
|
||
},
|
||
alarmList:[],
|
||
alarmType:1,
|
||
endDate:'',
|
||
dialogVisible:false,
|
||
leftDays:0,
|
||
baseURL:'',
|
||
progressOverview:'',//进度总览所需数据
|
||
resultList:'',//所有楼栋
|
||
alarmType2:'',
|
||
alarmType3:'',
|
||
BuildingPlanList:'',//楼栋计划
|
||
selectProgressPlanBidSection:0,//所选标段
|
||
ProgressPlanBidSectionList:[],//标段列表
|
||
bidSectionId:'',//标段id
|
||
noDataImg1:'',//
|
||
noDataImg2:'',//
|
||
noDataImg3:'',//
|
||
|
||
title:'首次开盘后评估会'
|
||
};
|
||
},
|
||
components:{
|
||
planItem,
|
||
progressItem
|
||
},
|
||
mounted() {
|
||
this.baseURL = this.$http.defaults.baseURL;
|
||
// this.getDataDateils();
|
||
// this.getData()
|
||
// this.getData3()
|
||
this.selectProgressPlanBidSectionList()
|
||
},
|
||
methods: {
|
||
changeOptionBoxListIndex(index,id){
|
||
this.selectProgressPlanBidSection = index
|
||
this.bidSectionId = id
|
||
this.getPlanNodeStatistics()
|
||
this.selectBuildingNodeStatisticsList()
|
||
this.progressBuildingPlanList()
|
||
this.selectPanoramaNodePlanList()
|
||
},
|
||
//标段列表
|
||
selectProgressPlanBidSectionList(){
|
||
selectProgressPlanBidSectionListApi({projectSn: this.$store.state.projectSn}).then( res => {
|
||
console.log(res)
|
||
this.ProgressPlanBidSectionList = res.result
|
||
this.bidSectionId = this.ProgressPlanBidSectionList[0].id
|
||
this.selectPanoramaNodePlanList()
|
||
this.getPlanNodeStatistics()
|
||
this.selectBuildingNodeStatisticsList()
|
||
this.progressBuildingPlanList()
|
||
console.log(res.result, '标段信息');//projectfName
|
||
})
|
||
},
|
||
//全景计划
|
||
selectPanoramaNodePlanList(){
|
||
selectPanoramaNodePlanListApi({projectSn: this.$store.state.projectSn,bidSectionId:this.bidSectionId}).then( res => {
|
||
this.stageList2 = res.result
|
||
const index = this.stageList2.findIndex((item,index) => {
|
||
return item.status == 2
|
||
})
|
||
console.log(index, res.result);
|
||
this.$nextTick(()=>{
|
||
if (parseInt(index) > 4) {
|
||
this.$refs["stageScroll"].scrollTo(
|
||
{
|
||
x: (index) * 230,
|
||
// x:'50%'
|
||
},
|
||
500
|
||
);
|
||
}
|
||
})
|
||
console.log(res.result);
|
||
})
|
||
},
|
||
//班组图表
|
||
createdGroupChart(xData, yData1, yData2, el, legendData) {
|
||
console.log(yData2);
|
||
let monitor = echarts.init(el);
|
||
// var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||
// var yMax = 500;
|
||
// var dataShadow = [];
|
||
|
||
// for (var i = 0; i < data.length; i++) {
|
||
// dataShadow.push(yMax);
|
||
// }
|
||
var option = {
|
||
// legend: {
|
||
// show: true,
|
||
// align: "left",
|
||
// top: 5,
|
||
// left: 0,
|
||
// // itemWidth: 13,
|
||
// // itemHeight: 5,
|
||
// textStyle: {
|
||
// color: "#9fa2ad",
|
||
// },
|
||
// },
|
||
grid: {
|
||
left: "10",
|
||
right: "50",
|
||
bottom: "10",
|
||
top: "30",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
formatter: function () {
|
||
return "";
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
axisLabel: {
|
||
formatter: function (params) {
|
||
var maxLength = 5;
|
||
//判断长度，超出使用...代替
|
||
if (params && params.length > maxLength) {
|
||
return params.substring(0, maxLength - 1) + '...';
|
||
} else {
|
||
return params;
|
||
}
|
||
},
|
||
textStyle: {
|
||
// fontSize: 14,
|
||
color: "white",
|
||
},
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter(params){
|
||
return params[0].name
|
||
// console.log(params);
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
data: yData1,
|
||
barGap: "-100%",
|
||
itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
// { offset: 1, color: "#5181F6",},
|
||
// ]),
|
||
color:function (params) {
|
||
//通过判断选中的名字改变柱子的颜色样式
|
||
// console.log(params);//dataIndex
|
||
// console.log(yData2[params.dataIndex]);
|
||
if (yData2[params.dataIndex] == 1) {
|
||
return '#5181F6';
|
||
} else if(yData2[params.dataIndex] == 2){
|
||
return '#848484';
|
||
} else if (yData2[params.dataIndex] == 3) {
|
||
return '#44D7B6';
|
||
}
|
||
},
|
||
barBorderRadius: 5,
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: "right",
|
||
// color: "white",
|
||
// textStyle: {
|
||
// fontSize: 15,
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
changeResultList(){
|
||
this.selectBuildingNodeDetailStatisticsList()
|
||
},
|
||
changeResultList2(){
|
||
if(document.querySelector('iframe')){
|
||
document.querySelector('iframe').contentWindow.location.reload();
|
||
}
|
||
},
|
||
//楼栋计划
|
||
selectBuildingNodeDetailStatisticsList(){
|
||
selectBuildingNodeDetailStatisticsListApi({buildingId:this.alarmType2}).then(res => {
|
||
console.log(res.result);
|
||
this.BuildingPlanList = res.result
|
||
// this.createdGroupChart(xData, yData1, yData2, this.$refs.groupChart);
|
||
})
|
||
},
|
||
progressBuildingPlanList(){
|
||
progressBuildingPlanListApi({projectSn: this.$store.state.projectSn,bidSectionId:this.bidSectionId}).then(res => {
|
||
this.resultList = res.result
|
||
if (res.result.length){
|
||
this.alarmType2 = res.result[0].id
|
||
this.alarmType3 = res.result[0].id
|
||
} else {
|
||
this.alarmType2 = ''
|
||
this.alarmType3 = ''
|
||
}
|
||
this.selectBuildingNodeDetailStatisticsList()
|
||
// console.log(this.BuildingPlanList);
|
||
})
|
||
},
|
||
createPieChart(data, div, color, title,total) {
|
||
let that = this;
|
||
let monitor = echarts.init(div);
|
||
var option = {
|
||
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||
title: {
|
||
show: true,
|
||
text: total,
|
||
x: "45%",
|
||
y: "42%",
|
||
z: 5,
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 1)",
|
||
fontSize: 20,
|
||
},
|
||
// subtext: title,
|
||
// subtextStyle: {
|
||
// color: "rgba(255, 255, 255, 0.8)",
|
||
// fontSize: 13,
|
||
// },
|
||
},
|
||
grid: {
|
||
right: 0,
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
//进度总览
|
||
getPlanNodeStatistics(){
|
||
getPlanNodeStatisticsApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId:this.bidSectionId
|
||
}).then(res => {
|
||
// console.log(res)
|
||
this.createPieChart(
|
||
[
|
||
{ value: res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum?res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum:1, name: "" },
|
||
{
|
||
value: res.result.executeNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart1,
|
||
["rgba(68, 215, 182, 0.2)","#557ded"],
|
||
"",res.result.executeNodeNum
|
||
);
|
||
this.createPieChart(
|
||
[
|
||
{ value: res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum?res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum:1, name: "" },
|
||
{
|
||
value: res.result.completeNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart2,
|
||
["rgba(68, 215, 182, 0.2)","#44D7B6"],
|
||
"",res.result.completeNodeNum
|
||
);
|
||
this.createPieChart(
|
||
[
|
||
{ value: res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum?res.result.executeNodeNum + res.result.completeNodeNum + res.result.deferNodeNum + res.result.notStartNodeNum:1, name: "" },
|
||
{
|
||
value: res.result.deferNodeNum,
|
||
name: "",
|
||
},
|
||
],
|
||
this.$refs.Chart3,
|
||
["rgba(68, 215, 182, 0.2)","#FF0000"],
|
||
"",res.result.deferNodeNum
|
||
);
|
||
this.progressOverview = res.result;
|
||
console.log(res.result);
|
||
})
|
||
},
|
||
//整体进度
|
||
selectBuildingNodeStatisticsList(){
|
||
selectBuildingNodeStatisticsListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
bidSectionId:this.bidSectionId
|
||
}).then(res => {
|
||
let arr1 = [],arr2 = [],arr3 = [],arr4 = [],arr5 = [],arr6 = [],nameArr = [];
|
||
this.noDataImg1 = res.result
|
||
console.log(res.result,this.noDataImg1.length != 0);
|
||
res.result.forEach(item => {
|
||
nameArr.push(item.buildingName)
|
||
arr1.push(item.normalCompleteNodeNum )
|
||
arr2.push(item.beforeCompleteNodeNum )
|
||
arr3.push(item.deferCompleteNodeNum )
|
||
arr4.push(item.executeNodeNum)
|
||
arr5.push(item.deferNodeNum)
|
||
arr6.push(item.completeNodeNum)
|
||
// console.log(item);
|
||
})
|
||
this.$nextTick(()=>{
|
||
this.createdBarCharts(nameArr,arr1,arr2,arr3,arr4,arr5,arr6,this.$refs.companyChart)
|
||
})
|
||
})
|
||
},
|
||
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.$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,yData2,yData3,yData4,yData5,yData6, el) {
|
||
let that = this;
|
||
let ageChart = echarts.init(el);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 20,
|
||
left: 0,
|
||
bottom: 10,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: ["#5CE2F6", "#5181F6"],
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
// realtime: true,
|
||
start: 50,
|
||
end: 100,
|
||
height: 8,
|
||
borderColor: "transparent",
|
||
backgroundColor: "#000",
|
||
filterColor: "#999999",
|
||
bottom: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter(params){
|
||
return params[0].name + '<br />' + '<span style="font-size: 14px">' + this.$t('message.dataBoard.totalCompleteNum')+':' + yData6[params[0].dataIndex] + '</span>'
|
||
+ '<br />' + '<span style="background: #44D7B6;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' + '<span style="font-size: 12px">' + this.$t('message.dataBoard.completeStatus')[0]+':' + params[0].value + '</span>'
|
||
+ '<br />' + '<span style="background: #F7D300;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' + '<span style="font-size: 12px">' + this.$t('message.dataBoard.completeStatus')[1]+':' + params[1].value + '</span>'
|
||
+ '<br />' + '<span style="background: #FE6C7F;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' + '<span style="font-size: 12px">' + this.$t('message.dataBoard.completeStatus')[2]+':' + params[2].value + '</span>'
|
||
+ '<br />' + '<span style="background: #3D6DC3;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' + '<span style="font-size: 12px">' + this.$t('message.dataBoard.completeStatus')[3]+':' + params[3].value + '</span>'
|
||
+ '<br />' + '<span style="background: #FF0000;height: 5px;width: 5px;display: inline-block;border-radius: 50%;margin-right: 5px"></span>' + '<span style="font-size: 12px">' + this.$t('message.dataBoard.completeStatus')[4]+':' + params[4].value + '</span>'
|
||
},
|
||
},
|
||
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.completeStatus')[0],
|
||
data: yData1,
|
||
type: 'bar',
|
||
stack:this.$t('message.dataBoard.stack'),/* '堆叠', *///堆叠柱状图在此设置成统一名称即可
|
||
color: '#44D7B6'
|
||
},
|
||
{
|
||
name: /* '提前完成', */this.$t('message.dataBoard.completeStatus')[1],
|
||
data: yData2,
|
||
type: 'bar',
|
||
stack:this.$t('message.dataBoard.stack'),/* '堆叠', *///堆叠柱状图在此设置成统一名称即可
|
||
color: '#F7D300'
|
||
},
|
||
{
|
||
name: /* '逾期完成', */this.$t('message.dataBoard.completeStatus')[2],
|
||
data: yData3,
|
||
type: 'bar',
|
||
stack:this.$t('message.dataBoard.stack'),/* '堆叠', *///堆叠柱状图在此设置成统一名称即可
|
||
color: '#FE6C7F'
|
||
},
|
||
{
|
||
name: /* '进行中', */this.$t('message.dataBoard.completeStatus')[3],
|
||
data: yData4,
|
||
type: 'bar',
|
||
stack:this.$t('message.dataBoard.stack'),/* '堆叠', *///堆叠柱状图在此设置成统一名称即可
|
||
color: '#3D6DC3'
|
||
},
|
||
{
|
||
name: /* '逾期', */this.$t('message.dataBoard.completeStatus')[4],
|
||
data: yData5,
|
||
type: 'bar',
|
||
stack:this.$t('message.dataBoard.stack'),/* '堆叠', *///堆叠柱状图在此设置成统一名称即可
|
||
color: '#FF0000'
|
||
},
|
||
],
|
||
};
|
||
|
||
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>
|
||
.container{
|
||
height: 88%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin:10px 1% ;
|
||
overflow: auto;
|
||
}
|
||
.footerContainer{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 30px 30px;
|
||
}
|
||
.container::-webkit-scrollbar{
|
||
width: 6px;
|
||
background-color: rgb(134, 133, 133);
|
||
border-radius: 10px;
|
||
}
|
||
.container::-webkit-scrollbar-thumb{
|
||
width: 6px;
|
||
border-radius: 10px;
|
||
background-color: rgb(137, 137, 223);
|
||
}
|
||
.scrollBox{
|
||
display: flex;
|
||
flex-wrap:wrap;
|
||
|
||
.scrollItem{
|
||
position: relative;
|
||
margin-left: 4px;
|
||
margin-bottom: 5px;
|
||
box-sizing: border-box;
|
||
width: 120px;
|
||
height: 51px;
|
||
background: #0C222B;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
.scrollItemTitle{
|
||
width: 96px;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
margin: 0 auto 3px auto;
|
||
}
|
||
img{
|
||
width: 17px;
|
||
height: 17px;
|
||
}
|
||
.ItemTips{
|
||
position: absolute;
|
||
left: 80px;
|
||
top: 20px;
|
||
z-index: 100;
|
||
background: rgba(8,24,53,0.7);
|
||
/*height: 64px;*/
|
||
/*max-width: 190px;*/
|
||
text-align: left;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
p{
|
||
display: inline-block;
|
||
min-width: 100px;
|
||
};
|
||
}
|
||
.ItemTips2{
|
||
left: -80px;
|
||
}
|
||
.ItemTips3{
|
||
left: -4px;
|
||
}
|
||
}
|
||
.scrollItem2{
|
||
background-color: #80060A;
|
||
}
|
||
}
|
||
.dotBox{
|
||
display: flex;
|
||
.text{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 15px;
|
||
.dot{
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.titleItem{
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 25px;
|
||
span{
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.ChartsBox{
|
||
width: 33%;
|
||
float: left;
|
||
text-align: center;
|
||
height: 60%;
|
||
.Charts{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.blockContentTitleBox{
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
.TitleBoxSpan{
|
||
display: inline-block;
|
||
width: 50%;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
.TitleBoxSpan1{
|
||
background: linear-gradient(to left, #0f2730 , #040d15);
|
||
}
|
||
.TitleBoxSpan2{
|
||
background: linear-gradient(to right, #0f2730 , #040d15);
|
||
}
|
||
}
|
||
.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: 95%;
|
||
}
|
||
/deep/.alarmTypeBox{
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 10px;
|
||
width: 66px;
|
||
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;
|
||
}
|
||
.optionBox_wrap{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.optionBox{
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
width: calc(77% - 25px);
|
||
white-space: nowrap;
|
||
.optionBox_item{
|
||
cursor:pointer;
|
||
z-index: 100;
|
||
padding: 4px 15px;
|
||
display: inline-block;
|
||
/*width: 52px;*/
|
||
height: 12px;
|
||
font-size: 12px;
|
||
line-height: 12px;
|
||
margin-right: 10px;
|
||
text-align: center;
|
||
background: #193B43;
|
||
position: relative;
|
||
}
|
||
.selectOptionBox_item{
|
||
background: #393204;
|
||
color: #F7D300;
|
||
.a{
|
||
border-left: 2px solid #F7D300;
|
||
border-top: 2px solid #F7D300;
|
||
}
|
||
.b{
|
||
border-right: 2px solid #F7D300;
|
||
border-top: 2px solid #F7D300;
|
||
}
|
||
.c{
|
||
border-bottom: 2px solid #F7D300;
|
||
border-left: 2px solid #F7D300;
|
||
}
|
||
.d{
|
||
border-right: 2px solid #F7D300;
|
||
border-bottom: 2px solid #F7D300;
|
||
}
|
||
}
|
||
}
|
||
.a {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
border-left: 2px solid #EBEBEB;
|
||
border-top: 2px solid #EBEBEB;
|
||
}
|
||
|
||
.b {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
border-right: 2px solid #EBEBEB;
|
||
border-top: 2px solid #EBEBEB;
|
||
}
|
||
|
||
.c {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-bottom: 2px solid #EBEBEB;
|
||
border-left: 2px solid #EBEBEB;
|
||
}
|
||
|
||
.d {
|
||
width: 3px;
|
||
height: 3px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-right: 2px solid #EBEBEB;
|
||
border-bottom: 2px solid #EBEBEB;
|
||
}
|
||
</style>
|