<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.completeStatus')[0]}}
                        </span></p>
                        <p class="text"><i style="background: #F7D300;" class="dot"></i><span>
                            <!-- 提前完成 -->
                            {{$t('message.dataBoard.completeStatus')[1]}}
                        </span></p>
                        <p class="text"><i style="background: #FE6C7F;" class="dot"></i><span>
                            <!-- 逾期完成 -->
                              {{$t('message.dataBoard.completeStatus')[2]}}
                        </span></p>
                        <p class="text"><i style="background: #3D6DC3;" class="dot"></i><span>
                            <!-- 进行中 -->
                            {{$t('message.dataBoard.completeStatus')[3]}}
                        </span></p>
                        <p class="text"><i style="background: #FF0000;" class="dot"></i><span>
                            <!-- 逾期 -->
                            {{$t('message.dataBoard.completeStatus')[4]}}
                        </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 class="blockBox">
                <div class="blockTitle">
                    <!-- 楼栋计划 -->
                    {{$t('message.dataBoard.buildingPlan')}}
                    <!--                    <el-select v-model="alarmType" size="mini" class="alarmTypeBox" @change="changeAlarmType">-->
                    <!--                        <el-option :value="1" label="按人员"></el-option>-->
                    <!--                        <el-option :value="2" label="按任务"></el-option>-->
                    <!--                    </el-select>-->
                    <el-select v-model="alarmType2" size="mini" class="alarmTypeBox" @change="changeResultList">
                        <el-option v-for="(item,index) in resultList" :key="index" :value="item.id" :label="item.buildingName"></el-option>
                        <!--                        <el-option :value="2" label="按任务"></el-option>-->
                    </el-select>
                </div>
                    <div class="blockContent">
                        <div style="margin-top: 10px;margin-bottom: 10px" class="dotBox">
                            <p class="text"><i style="background: #44D7B6;" class="dot"></i><span>
                                <!-- 正常完成 -->
                                 {{$t('message.dataBoard.completeStatus')[0]}}
                            </span></p>
                            <p class="text"><i style="background: #F7D300;" class="dot"></i><span>
                                <!-- 提前完成 -->
                                {{$t('message.dataBoard.completeStatus')[1]}}
                            </span></p>
                            <p class="text"><i style="background: #FE6C7F;" class="dot"></i><span>
                                <!-- 逾期完成 -->
                                {{$t('message.dataBoard.completeStatus')[2]}}
                            </span></p>
                            <p class="text"><i style="background: #3D6DC3;" class="dot"></i><span>
                                <!-- 进行中 -->
                                {{$t('message.dataBoard.completeStatus')[3]}}
                            </span></p>
                            <p class="text"><i style="background: #FF0000;" class="dot"></i><span>
                                <!-- 逾期 -->
                                {{$t('message.dataBoard.completeStatus')[4]}}
                            </span></p>
                        </div>
                        <vue-scroll v-if="BuildingPlanList.length !=0" style="width: 100%;height: 80%">
                            <div class="scrollBox">
                                <div v-for="(item,index) in BuildingPlanList" @mouseenter="selectItem = index" @mouseleave="selectItem = ''" :key="index" class="scrollItem" :class="{scrollItem2:item.nodeState == 2}">
                                    <div class="scrollItemTitle">{{item.nodeName}}</div>
                                    <div class="imgBox">
                                        <img v-if="item.nodeState == 2" src="@/assets/images/dataBoard/c4e2241036d3ae96c65277133a39488.png" alt="">
                                        <img v-if="item.nodeState == 4" src="@/assets/images/dataBoard/d07804ea972d24414e9445defc8f57f.png" alt="">
                                        <img v-if="item.nodeState == 3" src="@/assets/images/dataBoard/39027a6b5dab6934356b641cc7d9def.png" alt="">
                                        <img v-if="item.nodeState == 5" src="@/assets/images/dataBoard/ed4472499743a5cfd35de1a65bc9824.png" alt="">
                                        <img v-if="item.nodeState == 1" src="@/assets/images/dataBoard/e3851d29889c76b3ae78145ae858097.png" alt="">
                                    </div>
                                    <div v-if="selectItem === index" class="ItemTips" :class="{ItemTips2:(index+1)%3 == 0,ItemTips3:item.nodeName.length > 8 && (index+1)%3 != 0}">
                                        <div :style="{width:item.nodeName.length > 8 && (index+1)%3 != 0?'200px':''}" style="margin-bottom: 10px;">{{item.nodeName}}</div>
                                        <p v-if="item.nodeState == 2">{{$t('message.dataBoard.completeStatus')[4]+':'}}<!-- 逾期: -->{{item.deferDiffDay}}{{$t('message.dataBoard.textList')[0]}}<!-- 天 --></p>
                                        <p v-if="item.nodeState == 4"><!-- 提前 -->{{$t('message.dataBoard.textList')[1]}}{{item.beforeCompleteDiffDay}}{{$t('message.dataBoard.textList')[2]}}<!-- 天完成 --></p>
                                        <p v-if="item.nodeState == 3"><!-- 已完成 -->{{$t('message.dataBoard.textList')[3]}}</p>
                                        <p v-if="item.nodeState == 5">{{$t('message.dataBoard.completeStatus')[4]+':'}}<!-- 逾期: -->{{item.deferCompleteDiffDay}}{{$t('message.dataBoard.textList')[2]}}<!-- 天完成 --></p>
                                        <p v-if="item.nodeState == 1">
                                            <!-- 进行中 -->
                                            {{$t('message.dataBoard.completeStatus')[3]}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </vue-scroll>
                        <div v-else 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 style="width: 380px;height: 150%" class="chart" ref="groupChart"></div>-->
                    </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 style="margin-top: 5px;margin-bottom: 10px;width: 45%;position: absolute;left: 40px" class="dotBox">
                    <p class="text"><i style="background: #44D7B6;width: 12px;height: 12px;border-radius: 0px" class="dot"></i><span>
                        <!-- 任务完成 -->
                        {{$t('message.dataBoard.completeStatus')[4]}}
                    </span></p>
                    <p class="text"><i style="background: #F7D300;width: 12px;height: 12px;border-radius: 0px" class="dot"></i><span>
                        <!-- 提前完成 -->
                        {{$t('message.dataBoard.completeStatus')[1]}}
                    </span></p>
                    <p class="text"><i style="background: #FE6C7F;width: 12px;height: 12px;border-radius: 0px" class="dot"></i><span>
                        <!-- 逾期完成 -->
                        {{$t('message.dataBoard.completeStatus')[2]}}
                    </span></p>
                    <p class="text"><i style="background: #3D6DC3;width: 12px;height: 12px;border-radius: 0px" class="dot"></i><span>
                        <!-- 计划完成时间 -->
                        {{$t('message.dataBoard.planCompleteTime')}}
                    </span></p>
                    <p class="text"><i style="background: #FF0000;width: 12px;height: 12px;border-radius: 0px" class="dot"></i><span>
                        <!-- 逾期 -->
                        {{$t('message.dataBoard.completeStatus')[4]}}
                    </span></p>
                </div>
                <el-select v-model="alarmType3" size="mini" class="alarmTypeBox" @change="changeResultList2">
                    <el-option v-for="(item,index) in resultList" :key="index" :value="item.id" :label="item.buildingName"></el-option>
                    <!--                        <el-option :value="2" label="按任务"></el-option>-->
                </el-select>
                <div class="blockContent">
                    <iframe style="height: 96%;margin-top: 20px" :src="'doc/ExtGantt/Ext甘特图2.html?url='+baseURL+'&projectSn='+$store.state.projectSn+'&buildingId='+alarmType3+'&token='+$store.state.userInfo.token" id="iframe" class="Extgantt" ></iframe>
                    <!--                    <iframe :src="'doc/ExtGantt/Ext甘特图2.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.panoramaPlan')}}
                </div>
                <div class="blockContent" style="display: flex;align-items: center;">
                    <div style="height: 150px" class="stageBox">
                        <vue-scroll v-if="stageList2.length != 0" :ops="ops" ref="stageScroll">
                            <div
                                    class="stageItem"
                                    v-for="(item, index) in stageList2"
                                    :key="index"
                                    :class="item.status == 6? 'finish': item.status == 2? 'ongoing': ''">
                                <div class="statusImg"></div>
                                <p>{{ item.nodeName }}</p>
                                <div style="bottom: 45px;" class="line" v-show="stageList2.length != index + 1"></div>
                                <p v-if="item.plannedFinishDate" style="color: #61676b;">{{$t('message.dataBoard.planComplete')+':'}}<!-- 计划完成: -->{{ item.plannedFinishDate?item.plannedFinishDate:'--'}}</p>
                                <p v-else style="color: #61676b;height: 16px;isplay: inline-block"></p>
                                <p v-if="item.actualFinishDate" style="color: #61676b;">{{$t('message.dataBoard.realComplete')+':'}}<!-- 实际完成: -->{{ item.actualFinishDate?item.actualFinishDate: ''}}</p>
                                <p v-else style="color: #61676b;height: 16px;display: inline-block"></p>
                            </div>
                        </vue-scroll>
                        <div v-else style="text-align: center;margin: 0px 600px" 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>
        <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"
    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:'',//
            };
        },
        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 => {
                    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>
    .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;
        justify-content: space-between;
        .text{
            display: flex;
            align-items: center;
            .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>
