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