<template>
    <div class="proj-detail">
        <!--大屏背景-->
        <background-video></background-video>
        <!--大屏内容-->
        <div class="screen-content-max">
            <screen-header :nav="2" @itemdata="onItemData"></screen-header>
            <div class="screen-content">
                <el-row>
                    <el-col :span="6">
                        <module-one-1-1 label="项目概况">
                            <div class="company-name-max">
                                <div class="company-project-introduction" @click="projectIntroduction">
                                    <span>项目简介</span>
                                    <img src="images/check_icon.png">
                                </div>
                                <el-row :key="elPrjUser">
                                    <div class="glr-title" style="margin: 10px 0px;color: #5EEBE9;font-weight: bold;">
                                        {{ getCurProject().projectName }}</div>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_11.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">甲方代表</div>
                                                <div class="company-text" :title="getPrjUser('甲方代表') || ''">
                                                    {{ getPrjUser('甲方代表') || '　' }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_6.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">项目等级</div>
                                                <div class="company-text" :title="getProjectLevel() || ''">{{
                                                    getProjectLevel() || '　' }} </div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_11.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">项目经理</div>
                                                <div class="company-text" :title="getPrjUser('项目经理') || ''">
                                                    {{ getPrjUser('项目经理') || '　' }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_11.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">项目总监</div>
                                                <div class="company-text" :title="getPrjUser('总监') || ''">
                                                    {{ getPrjUser('总监') || '　' }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_3.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">总包单位</div>
                                                <div class="company-text" :title="getPrjUser('总包单位', '2') || ''">
                                                    {{ getPrjUser('总包单位', '2') || '　' }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="company-name">
                                            <div class="company-img"><img src="images/company_10.png"></div>
                                            <div class="company-info">
                                                <div class="company-title">监理单位</div>
                                                <div class="company-text" :title="getPrjUser('监理单位', '4') || ''">
                                                    {{ getPrjUser('监理单位', '4') || '　' }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </module-one-1-1>
                        <module-one-1-1 label="劳务人员概况">
                            <div class="warning-info">
                                <div class="warning-info-title">
                                    <div :class="infoNav == 0 ? 'active' : ''" @click="onWarningInfoNav(0, '在岗人数')">在岗人数
                                    </div>
                                    <div :class="infoNav == 1 ? 'active' : ''" @click="onWarningInfoNav(1, '今日出勤')">今日出勤
                                    </div>
                                </div>
                                <el-row :key="elDeptWorks">
                                    <el-col :span="8">
                                        <div class="survey_content">
                                            <div class="survey_content_img">
                                                <img :src="surveyUrl">
                                            </div>
                                        </div>
                                        <div class="survey_content_number labour-survey_content_number">
                                            <div class="survey_content_value"><span>{{ laborPersonnelTotal }}</span> 人</div>
                                            <p>{{ staffText }}</p>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <staff-survey-chart :height="220" :data="laborPersonnelData"
                                            :width="140"></staff-survey-chart>
                                    </el-col>
                                </el-row>
                            </div>
                        </module-one-1-1>
                        <module-one-1-1 label="项目形象进度">
                            <el-row class="prj-process-list">
                                <el-col :span="8" class="col-img">
                                    <template v-if="scheduleInfo && scheduleInfo.images && scheduleInfo.images.length > 0">
                                        <div class="data-img" style="margin-top: 0px;">
                                            <el-image :src="scheduleInfo.images[0]+'.min.jpg'"
                                                :preview-src-list="scheduleInfo.images" />
                                        </div>
                                        <div class="data-img" v-if="scheduleInfo.images.length > 1">
                                            <el-image :src="scheduleInfo.images[1]+'.min.jpg'"
                                                :preview-src-list="scheduleInfo.images" />
                                        </div>
                                    </template>
                                    <div v-else style="text-align: center;">
                                        <img src="images/nodata.png" style="width: 120px;">
                                        <div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
                                    </div>
                                </el-col>
                                <el-col :span="16" class="col-data">
                                    <template v-if="getCurProject().projectType == 1" 在建>
                                        <div class="data-label">施工进展:</div>
                                        <div class="data-text scroll" style="max-height: 220px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.constructionProgress || '暂无' : '暂无' }}
                                        </div>
                                    </template>
                                    <template v-if="getCurProject().projectType == 2" 拟建>
                                        <div class="data-label">报建、设计进展:</div>
                                        <div class="data-text scroll" style="max-height: 110px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.designProgress || '暂无' : '暂无' }}</div>
                                        <div class="data-label">融资、招采进展:</div>
                                        <div class="data-text scroll" style="max-height: 110px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.purchaseProgress || '暂无' : '暂无' }}</div>

                                    </template>

                                    <template v-if="getCurProject().projectType == 3" 前期></template>
                                    <template v-if="getCurProject().projectType == 4" 完工>
                                        <div class="data-label">验收进展:</div>
                                        <div class="data-text scroll" style="max-height: 70px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.acceptanceProgress || '暂无' : '暂无' }}</div>
                                        <div class="data-label">结算进展:</div>
                                        <div class="data-text scroll" style="max-height: 70px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.purchaseProgress || '暂无' : '暂无' }}</div>
                                        <div class="data-label">运维进展:</div>
                                        <div class="data-text scroll" style="max-height: 70px; overflow-y: auto;">
                                            {{ scheduleInfo ? scheduleInfo.designProgress || '暂无' : '暂无' }}</div>
                                    </template>

                                </el-col>
                            </el-row>
                        </module-one-1-1>
                    </el-col>
                    <el-col :span="12">
                        <div  :key="'co' + elCostOut" class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
                            <div class="modify-btn"><img src="images/foot_left.png" @click="modifyLeftBtn"></div>
                            <div class="modify-content" id="modifyContent">
                                <div class="modify-content-overflow" style="width: 2520px;">
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="15828">
                                                        <path
                                                            d="M895.063 350.163c-20.941-49.511-50.914-93.969-89.085-132.141-38.172-38.171-82.63-68.144-132.141-89.085C622.562 107.249 568.111 96.252 512 96.252c-56.112 0-110.562 10.997-161.837 32.685-49.511 20.941-93.969 50.914-132.141 89.085s-68.144 82.63-89.085 132.141C107.249 401.438 96.252 455.888 96.252 512c0 56.111 10.997 110.562 32.685 161.838 20.941 49.511 50.914 93.969 89.085 132.141 38.171 38.171 82.63 68.144 132.141 89.085 51.276 21.688 105.726 32.685 161.837 32.685 56.111 0 110.562-10.997 161.838-32.685 49.511-20.941 93.969-50.914 132.141-89.085 38.171-38.172 68.144-82.63 89.085-132.141 21.688-51.276 32.685-105.727 32.685-161.838-0.001-56.112-10.998-110.562-32.686-161.837zM512 864.252c-194.232 0-352.252-158.02-352.252-352.252S317.768 159.748 512 159.748 864.252 317.768 864.252 512 706.232 864.252 512 864.252z"
                                                            fill="#070102" p-id="15829"></path>
                                                        <path
                                                            d="M672 512c17.673 0 32-14.327 32-32s-14.327-32-32-32h-89.245l72.795-72.795c12.496-12.497 12.497-32.757 0-45.255-12.498-12.497-32.759-12.497-45.255 0L512 428.245l-98.295-98.294c-12.496-12.497-32.757-12.497-45.255 0-12.497 12.498-12.496 32.758 0 45.255L441.246 448H352c-17.673 0-32 14.327-32 32s14.327 32 32 32h127v64H352c-17.673 0-32 14.326-32 32s14.327 32 32 32h127v72c0 17.674 14.326 32 32 32s32-14.326 32-32v-72h129c17.673 0 32-14.326 32-32s-14.327-32-32-32H543v-64h129z"
                                                            fill="#070102" p-id="15830"></path>
                                                    </svg>
                                                    总投资
                                                </p>
                                                <div><span>{{ costOut.totalInv || 0 }}</span> 万元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p><svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="15828">
                                                        <path
                                                            d="M895.063 350.163c-20.941-49.511-50.914-93.969-89.085-132.141-38.172-38.171-82.63-68.144-132.141-89.085C622.562 107.249 568.111 96.252 512 96.252c-56.112 0-110.562 10.997-161.837 32.685-49.511 20.941-93.969 50.914-132.141 89.085s-68.144 82.63-89.085 132.141C107.249 401.438 96.252 455.888 96.252 512c0 56.111 10.997 110.562 32.685 161.838 20.941 49.511 50.914 93.969 89.085 132.141 38.171 38.171 82.63 68.144 132.141 89.085 51.276 21.688 105.726 32.685 161.837 32.685 56.111 0 110.562-10.997 161.838-32.685 49.511-20.941 93.969-50.914 132.141-89.085 38.171-38.172 68.144-82.63 89.085-132.141 21.688-51.276 32.685-105.727 32.685-161.838-0.001-56.112-10.998-110.562-32.686-161.837zM512 864.252c-194.232 0-352.252-158.02-352.252-352.252S317.768 159.748 512 159.748 864.252 317.768 864.252 512 706.232 864.252 512 864.252z"
                                                            fill="#070102" p-id="15829"></path>
                                                        <path
                                                            d="M672 512c17.673 0 32-14.327 32-32s-14.327-32-32-32h-89.245l72.795-72.795c12.496-12.497 12.497-32.757 0-45.255-12.498-12.497-32.759-12.497-45.255 0L512 428.245l-98.295-98.294c-12.496-12.497-32.757-12.497-45.255 0-12.497 12.498-12.496 32.758 0 45.255L441.246 448H352c-17.673 0-32 14.327-32 32s14.327 32 32 32h127v64H352c-17.673 0-32 14.326-32 32s14.327 32 32 32h127v72c0 17.674 14.326 32 32 32s32-14.326 32-32v-72h129c17.673 0 32-14.326 32-32s-14.327-32-32-32H543v-64h129z"
                                                            fill="#070102" p-id="15830"></path>
                                                    </svg>
                                                    本月完成</p>
                                                <div><span>{{ costOut.curMonth || 0 }}</span> 万元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="15828">
                                                        <path
                                                            d="M895.063 350.163c-20.941-49.511-50.914-93.969-89.085-132.141-38.172-38.171-82.63-68.144-132.141-89.085C622.562 107.249 568.111 96.252 512 96.252c-56.112 0-110.562 10.997-161.837 32.685-49.511 20.941-93.969 50.914-132.141 89.085s-68.144 82.63-89.085 132.141C107.249 401.438 96.252 455.888 96.252 512c0 56.111 10.997 110.562 32.685 161.838 20.941 49.511 50.914 93.969 89.085 132.141 38.171 38.171 82.63 68.144 132.141 89.085 51.276 21.688 105.726 32.685 161.837 32.685 56.111 0 110.562-10.997 161.838-32.685 49.511-20.941 93.969-50.914 132.141-89.085 38.171-38.172 68.144-82.63 89.085-132.141 21.688-51.276 32.685-105.727 32.685-161.838-0.001-56.112-10.998-110.562-32.686-161.837zM512 864.252c-194.232 0-352.252-158.02-352.252-352.252S317.768 159.748 512 159.748 864.252 317.768 864.252 512 706.232 864.252 512 864.252z"
                                                            fill="#070102" p-id="15829"></path>
                                                        <path
                                                            d="M672 512c17.673 0 32-14.327 32-32s-14.327-32-32-32h-89.245l72.795-72.795c12.496-12.497 12.497-32.757 0-45.255-12.498-12.497-32.759-12.497-45.255 0L512 428.245l-98.295-98.294c-12.496-12.497-32.757-12.497-45.255 0-12.497 12.498-12.496 32.758 0 45.255L441.246 448H352c-17.673 0-32 14.327-32 32s14.327 32 32 32h127v64H352c-17.673 0-32 14.326-32 32s14.327 32 32 32h127v72c0 17.674 14.326 32 32 32s32-14.326 32-32v-72h129c17.673 0 32-14.326 32-32s-14.327-32-32-32H543v-64h129z"
                                                            fill="#070102" p-id="15830"></path>
                                                    </svg>
                                                    本年完成
                                                </p>
                                                <div><span>{{ costOut.totalYear || 0 }}</span> 万元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="15828">
                                                        <path
                                                            d="M895.063 350.163c-20.941-49.511-50.914-93.969-89.085-132.141-38.172-38.171-82.63-68.144-132.141-89.085C622.562 107.249 568.111 96.252 512 96.252c-56.112 0-110.562 10.997-161.837 32.685-49.511 20.941-93.969 50.914-132.141 89.085s-68.144 82.63-89.085 132.141C107.249 401.438 96.252 455.888 96.252 512c0 56.111 10.997 110.562 32.685 161.838 20.941 49.511 50.914 93.969 89.085 132.141 38.171 38.171 82.63 68.144 132.141 89.085 51.276 21.688 105.726 32.685 161.837 32.685 56.111 0 110.562-10.997 161.838-32.685 49.511-20.941 93.969-50.914 132.141-89.085 38.171-38.172 68.144-82.63 89.085-132.141 21.688-51.276 32.685-105.727 32.685-161.838-0.001-56.112-10.998-110.562-32.686-161.837zM512 864.252c-194.232 0-352.252-158.02-352.252-352.252S317.768 159.748 512 159.748 864.252 317.768 864.252 512 706.232 864.252 512 864.252z"
                                                            fill="#070102" p-id="15829"></path>
                                                        <path
                                                            d="M672 512c17.673 0 32-14.327 32-32s-14.327-32-32-32h-89.245l72.795-72.795c12.496-12.497 12.497-32.757 0-45.255-12.498-12.497-32.759-12.497-45.255 0L512 428.245l-98.295-98.294c-12.496-12.497-32.757-12.497-45.255 0-12.497 12.498-12.496 32.758 0 45.255L441.246 448H352c-17.673 0-32 14.327-32 32s14.327 32 32 32h127v64H352c-17.673 0-32 14.326-32 32s14.327 32 32 32h127v72c0 17.674 14.326 32 32 32s32-14.326 32-32v-72h129c17.673 0 32-14.326 32-32s-14.327-32-32-32H543v-64h129z"
                                                            fill="#070102" p-id="15830"></path>
                                                    </svg>
                                                    开累完成
                                                </p>
                                                <div><span>{{ costOut.totalMonth || 0 }}</span> 万元</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="16844">
                                                        <path
                                                            d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                                                            fill="#595959" p-id="16845"></path>
                                                        <path
                                                            d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16846"></path>
                                                        <path
                                                            d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16847"></path>
                                                        <path
                                                            d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16848"></path>
                                                        <path
                                                            d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16849"></path>
                                                        <path
                                                            d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16850"></path>
                                                        <path
                                                            d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16851"></path>
                                                        <path
                                                            d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16852"></path>
                                                        <path
                                                            d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16853"></path>
                                                        <path
                                                            d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                                                            fill="#595959" p-id="16854"></path>
                                                    </svg>
                                                    计划开工日期
                                                </p>
                                                <div><span>{{ fmtDate(getCurProject().scheduledStartTime || '') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="16844">
                                                        <path
                                                            d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                                                            fill="#595959" p-id="16845"></path>
                                                        <path
                                                            d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16846"></path>
                                                        <path
                                                            d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16847"></path>
                                                        <path
                                                            d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16848"></path>
                                                        <path
                                                            d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16849"></path>
                                                        <path
                                                            d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16850"></path>
                                                        <path
                                                            d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16851"></path>
                                                        <path
                                                            d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16852"></path>
                                                        <path
                                                            d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16853"></path>
                                                        <path
                                                            d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                                                            fill="#595959" p-id="16854"></path>
                                                    </svg>
                                                    计划竣工日期
                                                </p>
                                                <div><span>{{ fmtDate(getCurProject().plannedCompletionTime || '') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="16844">
                                                        <path
                                                            d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                                                            fill="#595959" p-id="16845"></path>
                                                        <path
                                                            d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16846"></path>
                                                        <path
                                                            d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16847"></path>
                                                        <path
                                                            d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16848"></path>
                                                        <path
                                                            d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16849"></path>
                                                        <path
                                                            d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16850"></path>
                                                        <path
                                                            d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16851"></path>
                                                        <path
                                                            d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16852"></path>
                                                        <path
                                                            d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16853"></path>
                                                        <path
                                                            d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                                                            fill="#595959" p-id="16854"></path>
                                                    </svg>
                                                    实际开工日期
                                                </p>
                                                <div><span>{{ fmtDate(getCurProject().actualOperatingTime) }}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="16844">
                                                        <path
                                                            d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                                                            fill="#595959" p-id="16845"></path>
                                                        <path
                                                            d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16846"></path>
                                                        <path
                                                            d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16847"></path>
                                                        <path
                                                            d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16848"></path>
                                                        <path
                                                            d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                                                            fill="#595959" p-id="16849"></path>
                                                        <path
                                                            d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16850"></path>
                                                        <path
                                                            d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16851"></path>
                                                        <path
                                                            d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16852"></path>
                                                        <path
                                                            d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                                                            fill="#595959" p-id="16853"></path>
                                                        <path
                                                            d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                                                            fill="#595959" p-id="16854"></path>
                                                    </svg>
                                                    合同工期
                                                </p>
                                                <div><span>{{ getCurProject().projectTimeLimit || '-' }}</span> 天</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="project-amount">
                                        <div class="project-amount-bgd">
                                            <div class="project-amount-con">
                                                <p>
                                                    <svg class="my-svg-icon"
                                                        style="vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="17500">
                                                        <path
                                                            d="M800 894.1H224c-16.9 0-30.5-13.7-30.5-30.5v-47.2h-41.6c-16.9 0-30.5-13.7-30.5-30.5V229.7c0-16.9 13.7-30.5 30.5-30.5h41.6V129c0-16.9 13.7-30.5 30.5-30.5h576c16.9 0 30.5 13.7 30.5 30.5v70.2h55.9c16.9 0 30.5 13.7 30.5 30.5v556.1c0 16.9-13.7 30.5-30.5 30.5h-55.9v47.2c0.1 16.9-13.6 30.6-30.5 30.6z m-545.5-61h515v-47.2c0-16.9 13.7-30.5 30.5-30.5h55.9V260.3H800c-16.9 0-30.5-13.7-30.5-30.5v-70.2h-515v70.2c0 16.9-13.7 30.5-30.5 30.5h-41.6v495.1H224c16.9 0 30.5 13.7 30.5 30.5v47.2z"
                                                            fill="#666666" p-id="17501"></path>
                                                        <path
                                                            d="M224 822c-7.8 0-15.6-3-21.6-8.9-11.9-11.9-11.9-31.2 0-43.2l576.1-576.1c11.9-11.9 31.2-11.9 43.2 0 11.9 11.9 11.9 31.2 0 43.2L245.6 813.1c-6 5.9-13.8 8.9-21.6 8.9z"
                                                            fill="#666666" p-id="17502"></path>
                                                        <path
                                                            d="M224 967.6H72.7c-16.9 0-30.5-13.7-30.5-30.5V785.8c0-16.9 13.7-30.5 30.5-30.5H224c16.9 0 30.5 13.7 30.5 30.5V937c0 17-13.7 30.6-30.5 30.6z m-120.7-61h90.2v-90.2h-90.2v90.2zM447.2 893.2c-7.8 0-15.6-3-21.6-8.9-11.9-11.9-11.9-31.2 0-43.2L853 413.8c11.9-11.9 31.2-11.9 43.2 0 11.9 11.9 11.9 31.2 0 43.2L468.8 884.3c-6 5.9-13.8 8.9-21.6 8.9zM155.1 566.2c-7.8 0-15.6-3-21.6-8.9-11.9-11.9-11.9-31.2 0-43.2l383.7-383.7c11.9-11.9 31.2-11.9 43.2 0 11.9 11.9 11.9 31.2 0 43.2L176.6 557.2c-5.9 6-13.7 9-21.5 9zM224 260.3H72.7c-16.9 0-30.5-13.7-30.5-30.5V78.5C42.2 61.6 55.9 48 72.7 48H224c16.9 0 30.5 13.7 30.5 30.5v151.2c0 16.9-13.7 30.6-30.5 30.6z m-120.7-61.1h90.2V109h-90.2v90.2zM951.3 260.3H800c-16.9 0-30.5-13.7-30.5-30.5V78.5c0-16.9 13.7-30.5 30.5-30.5h151.2c16.9 0 30.5 13.7 30.5 30.5v151.2c0.1 16.9-13.6 30.6-30.4 30.6z m-120.7-61.1h90.2V109h-90.2v90.2zM951.3 967.6H800c-16.9 0-30.5-13.7-30.5-30.5V785.8c0-16.9 13.7-30.5 30.5-30.5h151.2c16.9 0 30.5 13.7 30.5 30.5V937c0.1 17-13.6 30.6-30.4 30.6z m-120.7-61h90.2v-90.2h-90.2v90.2z"
                                                            fill="#666666" p-id="17503"></path>
                                                    </svg>
                                                    建筑面积
                                                </p>
                                                <div><span>244449 </span> 平方米</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modify-btn"><img src="images/foot_right.png" @click="modifyRightBtn"></div>
                        </div>
                        <div class="aerial-view-max">
                            <div class="aerial-view-min">
                                <mapModle ref="mapModle" ></mapModle>                               
                            </div>
                        </div>
                        <module-one-1-2 label="项目节点计划预警">
                            <div class="dangerous-max">
                                <div class="dangerous-timeline-max">
                                    <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
                                        <template v-if="projectBuildNode && projectBuildNode.length > 0">
                                            <div class="dangerous-timeline-con" v-for="item in projectBuildNode">
                                                <div class="dangerous-text" v-html="item.nodeText"></div>
                                                <div class="dangerous-dot">
                                                    <div class="dangerous-dot-item"></div>
                                                </div>
                                                <div class="dangerous-time-max">
                                                    <div class="dangerous-time-min">计划：{{ item.planEndDate || '---' }}</div>
                                                    <div class="dangerous-time-min">实际：{{ item.endDate || '--' }}</div>
                                                    <div v-if="item.finishState > 0"
                                                        class="project-expect-state dangerous-time-nav"
                                                        :class="(item.finishState == 1 ? 'active' : '') + ' state-' + item.finishState">
                                                        {{ item.finish }}</div>

                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="strip-max" :style="{ width: maxWidth + 'px' }">
                                        <div class="strip-min" :style="{ width: minWidth + 'px' }"></div>
                                    </div>
                                </div>
                            </div>
                        </module-one-1-2>
                    </el-col>
                    <el-col :span="6">
                        <module-one-1-1 label="项目成果">
                            <div class="warning-info-title" style="padding-left: 20px;">
                                <div :class="prjResNav == '03' ? 'active' : ''" @click="doPrjRes('03', '方案设计')">方案设计</div>
                                <div :class="prjResNav == '04' ? 'active' : ''" @click="doPrjRes('04', '设计')">报建</div>
                                <div :class="prjResNav == '05' ? 'active' : ''" @click="doPrjRes('05', '合同')">招采</div>
                                <div :class="prjResNav == '06' ? 'active' : ''" @click="doPrjRes('06', '验收成果')">施工阶段</div>
                                <div :class="prjResNav == '07' ? 'active' : ''" @click="doPrjRes('07', '验收成果')">验收阶段</div>
                            </div>
                            <div class="quality-table prj-result-table prj-finish-node">
                                <el-table :data="prjResultsData" class="elTable"
                                    style="width: 100%;background: transparent;" height="215" ref="fbsubordinateUnit">

                                    <el-table-column prop="nodeText" label="事项"> </el-table-column>
                                    <el-table-column prop="planEndDate" label="计划完成时间"> </el-table-column>
                                    <el-table-column prop="endDate" label="实际完成时间"> </el-table-column>
                                    <el-table-column prop="states" label="成果">
                                        <template slot-scope="{row}">
                                            <el-popover placement="top-start" popper-class="prj-detail-finish-node-pop"  trigger="hover" v-if="row && row.files && row.files.length>0">
                                                <div class="node-file-list">
                                                    <div v-for="(it,idx) in row.files" :key="idx" @click="doDownFile(it)" class="node-file-item" title="点击下载">
                                                        {{ it.original }}
                                                    </div>
                                                </div>
                                                <span slot="reference" style="cursor: pointer;">{{row.files.length}} 个</span>
                                            </el-popover>
                                            <span v-else>/</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </module-one-1-1>
                        <module-one-1-1 label="环境监测">
                            <div style="padding:20px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-row>
                                            <el-col :span="12">

                                                <div class="survey_content">
                                                    <div class="survey_content_img labour-education_bgd">
                                                        <img src="images/hj_PM10.png">
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="margin-top: 24px;">
                                                <div class="item-label">当前PM10</div>
                                                <div class="item-text">
                                                    <span class="item-num">48.2</span><span class="item-unit">μm/m³</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-row>
                                            <el-col :span="12">

                                                <div class="survey_content">
                                                    <div class="survey_content_img labour-education_bgd">
                                                        <img src="images/hj_zaoyin.png">
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="margin-top: 24px;">
                                                <div class="item-label">当前噪音</div>
                                                <div class="item-text">
                                                    <span class="item-num">46.0</span><span class="item-unit">dB(A)</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </el-col>

                                </el-row>
                                <el-row style="margin-top: 30px;">
                                    <el-col :span="12">
                                        <el-row>
                                            <el-col :span="12">

                                                <div class="survey_content">
                                                    <div class="survey_content_img labour-education_bgd">
                                                        <img src="images/hj_wendu.png">
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="margin-top: 24px;">
                                                <div class="item-label">当前温度</div>
                                                <div class="item-text">
                                                    <span class="item-num">30.7</span><span class="item-unit">℃</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-row>
                                            <el-col :span="12">

                                                <div class="survey_content">
                                                    <div class="survey_content_img labour-education_bgd">
                                                        <img src="images/hj_shidu.png">
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12" style="margin-top: 24px;">
                                                <div class="item-label">当前湿度</div>
                                                <div class="item-text">
                                                    <span class="item-num">77.7</span><span class="item-unit">%RH</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </el-col>

                                </el-row>
                            </div>
                        </module-one-1-1>
                        <module-one-1-1 label="项目安全/质量隐患">
                            <MonitAndWarning type="detail"></MonitAndWarning>
                        </module-one-1-1>
                    </el-col>
                </el-row>
            </div>
        </div>
        <project-info-dlg ref="prjInfoDlg"></project-info-dlg>
    </div>
</template>

<script>
import '../components/module/module-one-1-2'
import '../components/background_video'
import '../components/header'
import '../components/staff-survey-chart'
import mapModle from './detail/mapModle.vue'
import MonitAndWarning from './components/MonitAndWarning.vue'
import projectInfoDlg from './detail/projectInfoDlg.vue'
import debounce from 'lodash.debounce'
export default {
    components: {
        MonitAndWarning, projectInfoDlg,
        mapModle
    },
    data() {
        return {
            elScheduleInfo:0,
            elCostOut: 0,
            prjs: [],
            dept: null,
            project: null,
            scheduleInfo: null,
            projectBuildNode: null,
            prjResNav: '03',
            projectLvlDict: [],
            projectUsers: [],//项目用户，用于项目概况
            elPrjUser: 0,
            //项目概况
            top: 0,
            introduceInterval: undefined,
            show: true,
            popupShow: false,
            projectOverview: {
                build: '',
                devise: '',
                contractor: '',
                introduce: '',
                engineering: '',
                contract: '',
                area: '',
                aerialView: ''
            },
            //造价
            costIndex: 0,
            direction: 'right',
            costInterval: undefined,

            //劳务人员
            infoNav: 0,
            staffText: '在岗人员',
            surveyUrl: 'images/survey_icon_4.png',
            laborPersonnelTotal: 149,
            laborPersonnelData: [
                { text: "职工", value: 52 },
                { text: "劳务派遣", value: 45 },
                { text: "其他", value: 20 },
            ],
            //设备概况
            overview: 0,
            overviewInterval: '',
            surveyUrlSb: 'images/survey_icon_1.png',
            //项目成果
            prjResultsData: [
                { text: '可研批复/立项备案确认书', start: '2021.09.15', end: '2021.10.25', states: '已完成' },
                { text: '用地规划许可证', start: '2021.12.31', end: '2022.01.31', states: '已完成' },
                { text: '工程规划许可证', start: '2022.02.01', end: '2022.04.30', states: '已完成' },
                { text: '施工许可证', start: '2022.09.01', end: '2022.10.31', states: '已完成' },
                { text: '土地证', start: '2021.10.10', end: '2022.10.31', states: '已完成' }
            ],
            //正在发生
            warningData: [
                {
                    equipment: '挖掘机01#',
                    images: 'images/warning_jixie.png',
                    content: '当前机械已闲置10天，请尽快检查',
                    time: '2022年10月29日 17:29:55',
                    projectName: '泾河新城荟锦坊二期 EPC 工程总承包项目',
                    address: '陕西省西安市泾河新城荟锦坊二期',
                    longitude: '108.913119',
                    latitude: '34.546109',
                },
                {
                    equipment: '履带挖掘机01#',
                    images: 'images/warning_jixie.png',
                    content: '当前机械已闲置10天，请尽快检查',
                    time: '2022年10月29日 17:29:55',
                    projectName: '西安市地铁2号线二期工程施工总承包项目2标段',
                    address: '西安市地铁2号线',
                    longitude: '108.917',
                    latitude: '34.379435',
                },
                {
                    equipment: '洒水车01#',
                    images: 'images/warning_jixie.png',
                    content: '当前机械已闲置10天，请尽快检查',
                    time: '2022年10月29日 17:29:55',
                    projectName: '苏州桑田岛项目',
                    address: '苏州桑田岛项目',
                    longitude: '120.43316',
                    latitude: '31.282088',
                }
            ],

            //重大节点预期预警
            maxWidth: 0,
            minWidth: 100,
            timeAxisData: [],
            //正在发生
            warningInterval: undefined,
            forIndex: 0,
            //预警类型
            warningType: [
                {
                    name: 'AI预警',
                    data: 2,
                    total: 8
                }, {
                    name: '安全预警',
                    data: 1,
                    total: 5
                }, {
                    name: '质量预警',
                    data: 3,
                    total: 10
                }, {
                    name: '环境预警',
                    data: 2,
                    total: 5
                },
            ],
            warningTypeInterval: undefined,
            warningTypeIndex: 0,
            mapName: '',
            costOut: {},
            finishBuildNode: [],
            modleMap: [],
            elDeptWorks:0,
        }
    },
    created() {
        this.init()
        this.$api.dict('project_level').then(d => {
            this.projectLvlDict = d || [];
        });
    },
    mounted() {
        window.xapp = this
        this.$bus.$on("loadProjects", debounce(prjs => {
            this.prjs = prjs;
        }));

        this.$bus.$on("projectChange",debounce(res => {
            this.project = res;
            this.mapName = "";
            if (res.id == 0) {
                if (this.prjs.length > 1) {
                    this.getMapName(this.prjs[1].projectName);
                }
            } else {
                this.getMapName(res.projectName);
            }
            this.loadData();
            this.loadFilshNode();
        }));
        this.$bus.$on("deptChange",debounce(dept => {
            this.dept = dept;
        }));
    },
    methods: {
        doDownFile(it){
            if (it && it.url) {
                this.$api.downFile( "/jhapi"+it.url,{},it.original);
            }
        },
        fmtDate(d) {
            if (!d) {
                return "";
            }
            if (d.indexOf(":") >= 0) {
                return this.$dt(d).format("YYYY-MM-DD");
            }
            return d;
        },
        getMapName(name) {
            if (name) {
                if (name.indexOf("医疗") >= 0) {
                    this.mapName = "map1.html?time=" + +new Date();
                    return;
                } else if (name.indexOf('体育中心') >= 0) {
                    this.mapName = "map2.html?time=" + +new Date();
                    return;
                }
            }
            this.mapName = "";
        },
        getPrjUser(t, deptType) {
            if (this.projectUsers && this.projectUsers.length > 0) {
                if (deptType) {
                    let tmps = this.projectUsers.filter(it => it.deptType == deptType);
                    if (tmps.length > 0) {
                        return tmps[0].deptName;
                    }
                } else {
                    let tmps = this.projectUsers.filter(it => it.jobTypeName == t);
                    if (tmps.length > 0) {
                        return tmps[0].nickName + ' ' + tmps[0].phonenumber;
                    }
                }
            }
            return "";
        },
        getProjectLevel() {
            let lvl = this.getCurProject()?.projiectLevel || '';
            if (lvl) {
                let tmps = this.projectLvlDict.filter(d => d.dictValue == lvl);
                return tmps.length > 0 ? tmps[0].dictLabel : '';
            }
            return "";
        },
        getCurProject() {
            if (!this.project) {
                return {};
            }
            if (this.project.id == 0) {
                if (this.prjs.length > 1) {
                    return this.prjs[1];
                }
                return {};
            }
            return this.project;
        },
        getProjectId(cb) {
            let func = () => {
                let prjId = this.project?.id||0;
                if (prjId == 0) {
                    if (!this.prjs||this.prjs.length == 0) {
                        setTimeout(func, 100);
                    } else {
                        cb && cb(this.prjs[1].id);
                    }
                } else {
                    cb && cb(prjId);
                }
            }
            func();
        },
        loadFilshNode() {
            this.getProjectId(id => {
                this.$api.buildNode.queryFinishProject(id).then(d => {
                    this.finishBuildNode = d || [];
                    let obj=(d||[]).filter(it=>it.nodeText=="方案深化设计");
                    if(obj && obj.length>0){
                        let files=(obj[0].files||'[]')                        
                        this.$refs.mapModle.initImages(files)
                    }else{
                        this.$refs.mapModle.initImages("[]")
                    }
                    this.doPrjRes('03');
                })
            });
        },
        loadData() {
            this.getProjectId(id => {
                this.$api.schedule.projectConstructionProgress(id).then(d => {
                    let obj = d?.data || {};
                    if (obj.image) {
                        obj.images = obj.image.split(",").filter(d => d).map(f => {
                            return this.$apiPath + f;
                        });
                    } else {
                        obj.images = [];
                    }
                    this.scheduleInfo = obj;
                    this.$refs.mapModle.initImgs(obj?.images||[]);
                });
                this.projectBuildNode = [];
                this.getProjectBuildNode();
                this.getDeptWorksList();
                this.getProjectUser();
                this.getCostOut(id);
            });
        },
        getCostOut(id) {
            let dt = this.$dt(new Date())
            this.$api.costOut.selectYearAndMonth({
                projectId: id,
                year: dt.$y,
                month: dt.$M
            }).then(d => {
                d.totalMonth=d.totalMonth.toFixed(2);
                d.totalYear=d.totalYear.toFixed(2);
                this.costOut = d;
                this.elCostOut++;
            })
        },
        getProjectUser() {
            this.getProjectId(id => {
                this.$api.project.getProjectUser(id).then(d => {
                    this.projectUsers = d.data || [];
                    this.elPrjUser++;
                });
            });
        },
        getProjectBuildNode() {
            this.getProjectId(id => {
                this.$api.project.getProjectBuildNode(id).then(d => {
                    this.projectBuildNode = this.$api.buildNode.covertData(d.data || []).filter(it => it.lvl.length == 2);
                    this.maxWidth = 200 * this.projectBuildNode.length;
                    let n = 0;
                    for (let i = 0; i < this.projectBuildNode.length; i++) {
                        if (this.projectBuildNode[i].finish == "进行中") {
                            n = i;
                        }
                    }
                    this.minWidth = n * 200 + 100;
                });
                this.getDeptWorksList();
            });
        },
        init() {
            this.introduceInterval = setInterval(this.timer, 50);
            //设备概况点击事件定时器
            this.overviewInterval = setInterval(this.overviewClick, 5000);
            //重大节点预期预警
            //this.getTimeAxisData()
            //项目概况
            this.getProjectOverview(JSON.parse(localStorage.getItem("data1")).id)
            //正在发生 定时器
            this.warningInterval = setInterval(this.automaticRoll, 5000);
            //预警类型 定时器
            this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
            //造价 定时器
            this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
        },
        loadAttendanceData(){
            this.getProjectId(id => {
            let data={
                subDeptId:this.dept.id||0,
                projectId:id||0,
                attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD")
            }
            this.$api.attendance.groupByComany(data).then(d=>{                
                let tmps=d.data||[];
                const func=(ids)=>{
                    let sum=0;
                    tmps.filter(it=>ids.includes(it.companyTypeId)).map(it=>it.id).forEach(it=>{
                        sum+=it*1;
                    })
                    return sum;                    
                }
                
                this.laborPersonnelTotal = 0;
                this.laborPersonnelData = [{ text: "劳务人员", value:  func(["2","3"]) }, { text: "监理人员", value: func(["8"]) }, { text: "总包人员", value: func(["1"]) }];
                this.laborPersonnelData.forEach(it=>{
                    this.laborPersonnelTotal += it.value;
                })
                this.elDeptWorks++;
            });
        });
        },
        //查询在岗人数
        getDeptWorksList() {
            if (this.infoNav == 0) {
                //查询在岗人数
                this.$api.attendance.getDeptWorksList(this.dept?.id || 0, this.project?.id || 0).then(d => {
                    this.laborPersonnelTotal = 0;
                    this.laborPersonnelData = [{ text: "劳务人员", value: 0 }, { text: "监理人员", value: 0 }, { text: "总包人员", value: 0 }];
                    if (d.rows.length > 0 && d.rows[0] != null) {
                        this.laborPersonnelData = [];
                        this.laborPersonnelTotal += d.rows[0].servicePersonnel;
                        this.laborPersonnelData.push({ text: "劳务人员", value: d.rows[0].servicePersonnel });
                        this.laborPersonnelTotal += d.rows[0].supervisorPersonnel;
                        this.laborPersonnelData.push({ text: "监理人员", value: d.rows[0].supervisorPersonnel });
                        this.laborPersonnelTotal += d.rows[0].contractorPersonnel;
                        this.laborPersonnelData.push({ text: "总包人员", value: d.rows[0].contractorPersonnel });
                    }
                });

            } else {
                this.loadAttendanceData();
            }
        },
        //项目介绍弹窗
        projectIntroduction() {
            //this.popupShow = true
            this.$refs.prjInfoDlg.showDialog(this.prjs, this.project, this.projectUsers);
        },
        closeProjectIntroduction() {
            this.popupShow = false
        },
        doPrjRes(n, text) {
            this.prjResNav = n;
            if (n == '06') {
                this.prjResultsData = this.finishBuildNode.filter(d => d.lvl.length == 4 && d.lvl.substring(0, 2) == '06').map(it => {
                    if (it.files) {
                        it.files = JSON.parse(it.files);
                    } else {
                        it.files = [];
                    }
                    return it;
                });
            } else {
                this.prjResultsData = this.finishBuildNode.filter(d => d.lvl.length == 6 && d.lvl.substring(0, 2) == n).map(it => {
                    if (it.files) {
                        it.files = JSON.parse(it.files);
                    } else {
                        it.files = [];
                    }
                    return it;
                });
            }
        },
        //造价
        modifyLeftBtn() {
            this.direction = 'left'
            this.manufacturingCostRoll()
        },
        modifyRightBtn() {
            this.direction = 'right'
            this.manufacturingCostRoll()
        },
        manufacturingCostRoll() {
            var width = $(".project-amount").innerWidth()
            if (this.direction == 'right') {
                if (this.costIndex == 6) {
                    this.costIndex = 0
                } else {
                    this.costIndex = this.costIndex + 3
                }
            } else {
                if (this.costIndex == 0) {
                    this.costIndex = 6
                } else {
                    this.costIndex = this.costIndex - 3
                }
            }
            $("#modifyContent").animate({ scrollLeft: (width * this.costIndex) + 'px' })
            this.direction = 'right'
        },
        costMouseover() {
            clearInterval(this.costInterval);
        },
        costMouseout() {
            this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
        },



        //head选择项目返回值
        onItemData(e) {
            if (e.type == 1) {
                location.href = 'index.html'
            }
            this.getProjectOverview(e.id)
        },
        getProjectOverview(id) {
            if (id == 1) {
                this.projectOverview.build = '陕西西咸新区泾河新城城市建设投资有限公司'
                this.projectOverview.devise = '深圳市清华苑建筑与规划设计研究有限公司'
                this.projectOverview.contractor = '陕西西咸新区泾河新城城市建设投资有限公司'
                this.projectOverview.introduce = '泾河新城荟锦坊二期 EPC 工程总承包项目 ，项目位于崇文新街以南、泾河一街以东、泾河二路以北、崇文塔北路以西；项目总用地 56287 平方米(约 84.43 亩），容积率 2.89，建筑密度20%，总建筑面积约 244449.8 平方米，其中：地上建筑面积 163231.4 平方米；公共配套建筑面积约 7291 平方米，主要包括小区内配套公建建筑（商业、社区综合服务用房、公共服务设施等），其中社区综合服务用房建筑面积 4800 平方米，生活服务设施建筑面积 530 平方米，其他配套商业建筑面积合计 1870 平方米；地下建筑面积 81218.4 平方米；具体建设规模以规划部门最终确定的指标为准。具体包含建设红线范围内的设计、采购、施工；设计为总承包（主要包含但不限于初步设计（含概算编制）、施工图设计及相关专业的二次深化设计图纸、其他所有专项设计、BIM 及设计过程中各阶段设计报建/报审工作、施工过程中及后期服务工作）。施工包括依据总体安排，负责工程全过程的施工组织，按计划完成所有施工工作（含临时用电）直至竣工验收合格并整体移交，包含设备、物资的采购，负责工程保修期内的各项保修工作，负责竣工资料编制、整理、汇总等，同时承担相关协调工作。'
                this.projectOverview.engineering = '112422'
                this.projectOverview.contract = '1095'
                this.projectOverview.area = '244449.8'
                this.projectOverview.aerialView = 'images/aerial_view.png'
                this.top = 0

            } else if (id == 2) {
                this.projectOverview.build = '西安市轨道交通集团有限公司'
                this.projectOverview.devise = '中铁第一勘察设计院集团有限公司'
                this.projectOverview.contractor = '中国中铁股份有限公司'
                this.projectOverview.introduce = '西安市地铁2号线二期工程施工总承包项目2标段一工区包含南延伸段和北延伸段，线路总长6.922km，为地下线，共设4座车站，北延段北起草滩北站，止于一期工程起点北客站，主要沿尚稷路敷设，设2座车站，全长3.505km。南延段起于一期终点韦曲南站，止于常宁站，线路沿南长安街-常宁大街南北向敷设，设2座车站，全长3.417km。\n' +
                    '西安市地铁2号线二期工程施工总承包项目2标段一工区施工全线设备安装及装修、部分设备采购等工程。其中安装装修工程：包含给排水及消防工程（含水泵设备采购）、通风空调与采暖系统工程、气体灭火系统工程（含设备采购）、低压配电与照明工程(含EPS设备采购)、火灾自动报警系统与气灭控制系统工程（含设备采购）、环境与设备监控系统、门禁系统（含设备采购）、建筑装修和车站安装装修工程、站内和站外导向标识系统、线网云平台综合测试设备房安装装修。'
                this.projectOverview.engineering = '26033'
                this.projectOverview.contract = '472'
                this.projectOverview.area = '6.922'
                this.projectOverview.aerialView = 'images/aerial_view_2.png'
                this.top = 0
            } else {
                this.projectOverview.build = '苏州轨道交通有限公司'
                this.projectOverview.devise = '广州地铁设计研究院股份有限公司'
                this.projectOverview.contractor = '中铁一局集团有限公司'
                this.projectOverview.introduce = '苏州轨道交通VI-TS-13-2标范围内设有运用库、工程车库、废品暂存间、综合维修楼、门卫及消防泵房等土建工程、装饰装修工程、机电安装工程、室外管网、围墙、接触网基础、金属围蔽、道路、绿化等配套设施工程。运用库建筑高度盖下9m，盖上5.5m，混凝土框架结构形式，盖下房屋为运用库、工程车库，盖体建筑面积为83103㎡。综合维修楼地下1层，地上20层，建筑面积30327.86㎡，合计总建筑面积113430㎡。'
                this.projectOverview.engineering = '100600'
                this.projectOverview.contract = '1248'
                this.projectOverview.area = '113430'
                this.projectOverview.aerialView = 'images/aerial_view_3.png'
                this.top = 0
            }
        },
        //项目概况
        timer() {
        },
        TimerEnter() {//鼠标移入停止滚动
            clearInterval(this.introduceInterval);
        },
        TimerLeave() {//鼠标离开继续滚动
            this.introduceInterval = setInterval(this.timer, 50);
        },
        //劳务人员概况
        onWarningInfoNav(n, text) {
            this.infoNav = n
            this.staffText = text
            this.getDeptWorksList();
            if (n == 0) {
                this.surveyUrl = 'images/survey_icon_4.png'
            } else {
                this.surveyUrl = 'images/survey_icon_5.png'
            }
        },
        //设备概况点击事件定时器方法
        overviewClick() {
            if (this.overview < 2) {
                this.overview = this.overview + 1
            } else {
                this.overview = 0
            }
            if (this.overview == 0) {
                this.surveyUrlSb = 'images/survey_icon_1.png'
            } else if (this.overview == 1) {
                this.surveyUrlSb = 'images/survey_icon_2.png'
            } else {
                this.surveyUrlSb = 'images/survey_icon_3.png'
            }
        },
        //设备概况点击事件
        onClickoOverview(n) {
            this.overview = n
            if (this.overview == 0) {
                this.surveyUrlSb = 'images/survey_icon_1.png'
            } else if (this.overview == 1) {
                this.surveyUrlSb = 'images/survey_icon_2.png'
            } else {
                this.surveyUrlSb = 'images/survey_icon_3.png'
            }
        },
        //重大节点预期预警
        getTimeAxisData() {
            var timeAxisData = [
                {
                    title: '项目启动',
                    planTime: '2021-07-01',
                    actualTima: '2021-10-31',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
                {
                    title: '土地获取',
                    planTime: '2021-03-01',
                    actualTima: '2021-12-25',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
                {
                    title: '方案设计',
                    planTime: '2021-05-01',
                    actualTima: '2021-10-31',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                }, {
                    title: '报建',
                    planTime: '2021-09-15',
                    actualTima: '2022-10-31',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
                {
                    title: '招采',
                    planTime: '2021-10-15',
                    actualTima: '2021-12-25',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
                {
                    title: '施工阶段',
                    planTime: '2022-06-01',
                    actualTima: '2023-12-31',
                    expectDays: '60',
                    state: 1,     // 0 正常完成  1 预期
                },
                {
                    title: '验收阶段',
                    planTime: '2024-01-01',
                    actualTima: '2024-06-30',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
                {
                    title: '交付阶段',
                    planTime: '2024-07-01',
                    actualTima: '2024-07-31',
                    expectDays: '0',
                    state: 0,     // 0 正常完成  1 预期
                },
            ]
            var index = 0
            for (let i = 0; i < timeAxisData.length; i++) {
                if (timeAxisData[i].actualTima == '') {
                    index = i - 1
                    break
                }
            }
            this.maxWidth = timeAxisData.length * 200
            this.minWidth = this.minWidth + (index * 200)
            this.timeAxisData = timeAxisData
        },

        automaticRollType() {
            var height = $(".glr-login-number-max").innerHeight()
            if ($("#afootOverflowType").scrollTop() == height * this.warningType.length - $("#afootOverflowType").innerHeight()) {
                this.warningTypeIndex = 0
            } else {
                this.warningTypeIndex = this.warningTypeIndex + 1
            }
            $("#afootOverflowType").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
        },
        listMinMouseoverType() {
            clearInterval(this.warningTypeInterval);
        },
        listMinMouseoutType() {
            this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
        },


        automaticRoll() {
            var height = $(".afoot-con-for").innerHeight()
            if (this.forIndex == this.warningData.length) {
                this.forIndex = 0
            } else {
                this.forIndex = this.forIndex + 1
            }
            $("#afootOverflow").animate({ scrollTop: (height * this.forIndex) + 'px' })
        },
        listMinMouseover() {
            clearInterval(this.warningInterval);
        },
        listMinMouseout() {
            this.warningInterval = setInterval(this.automaticRoll, 10000);
        },
    },

};
</script>

<style lang="less" >
.proj-detail {
    .prj-process-list {
        padding: 20px
    }

    .prj-process-list .data-img {
        height: 120px;
        overflow: hidden;
        margin-top: 10px;
    }

    .prj-process-list .data-img img {
        height: 120px;
        width: 120px;
    }

    .prj-process-list .data-label {
        color: #63C8FF;
        font-size: 12px;
        line-height: 30px;
        font-weight: bold;
    }

    .prj-process-list .data-text {
        color: #fff;
        font-size: 12px;
        line-height: 24px;
    }

    .my-svg-icon {
        width: 24px;
        height: 24px;
    }

    .my-svg-icon * {
        fill: #63C8FF;
    }

    .item-label {
        color: #aaa;
        font-size: 12px;
        line-height: 24px;
    }

    .item-text {
        line-height: 40px;
    }

    .item-text .item-unit {
        color: #aaa;
        font-size: 12px;
    }

    .item-text .item-num {
        color: #fff;
        font-size: 18px;
    }

    .prj-result-table th .cell {
        color: aquamarine;
    }

    .prj-finish-node {
        .el-table__body-wrapper {
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgb(1, 169, 255);
                border-radius: 4px;
            }

            tr {
                cursor: pointer;
            }
        }
    }
   

}
.prj-detail-finish-node-pop{
.node-file-list{
        .node-file-item{
            line-height: 24px;
            cursor: pointer;
            &:hover{
                color:rgb(1, 169, 255);
            }
        }
    }
}
</style>