<template>
    <div class="main-index">
        
            <div class="screen-content">
                <el-row>
                    <el-col :span="6" style="position: relative;">
                        <module-one-2-1 label="集团项目总览" :key="elKey">
                            <img src="images/icon2001.png" style="position: absolute;cursor: pointer;right: 0px;top: 8px;"
                                @click="doShowDlg1">
                            <div class="survey_title">
                                <div class="survey_title_btn">
                                    <div :class="overview == 0 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                        @click="onClickoOverview(0)">项目数</div>
                                </div>
                                <div class="survey_title_btn">
                                    <div :class="overview == 1 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                        @click="onClickoOverview(1)">项目总投资</div>
                                </div>
                                <div class="survey_title_btn">
                                    <div :class="overview == 2 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                        @click="onClickoOverview(2)">项目年投资</div>
                                </div>
                            </div>
                            <project-overview-chart @clickme="doShowDlg3" :key="overview" :sp="''"
                                :maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
                                :text="overviewText" :height="230"></project-overview-chart>

                            <rank-chart :data="availabilityData" :showval="true" :height="300"
                                :width="projectCategoryWidth"></rank-chart>

                        </module-one-2-1>
                        <module-one-1-1 label="安全/质量管理">
                            <div class="warning-info-title" style="padding-left: 20px;">
                                <div :class="qualityNav == 0 ? 'active' : ''" @click="qualityNavClick(0)">安全管理</div>
                                <div :class="qualityNav == 1 ? 'active' : ''" @click="qualityNavClick(1)">质量管理</div>
                            </div>
                            <project-overview-chart :sp="'\n'" :maintitle="qualityNavTotal" :legend-opt="legendOpt2"
                                :key="elKey" :typedata="dangersDatas" :text="qualityNavTitle" :height="220"
                                style="top:0px"></project-overview-chart>
                        </module-one-1-1>
                    </el-col>
                    <el-col :span="12">
                        <module-one-2-1 class="center-image" label="集团项目区域分布">
                            <map-index></map-index>
                        </module-one-2-1>
                        <el-row>
                            <el-col :span="12" style="position: relative;">                                
                                <module-one-1-1 label="人员统计" :key="elDeptWorks">
                                    <img src="images/icon2001.png" v-if="infoNav == 1" style="position: absolute;cursor: pointer;right: 20px;top: 48px;"
                                @click="doShowAttendanceDetail">
                                    <div class="warning-info-title" style="padding-left: 20px;">
                                        <div :class="infoNav == 0 ? 'active' : ''" @click="onWarningInfoNav(0)">在岗人数</div>
                                        <div :class="infoNav == 1 ? 'active' : ''" @click="onWarningInfoNav(1)">今日出勤</div>
                                    </div>
                                    <el-row>
                                        <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>
                                </module-one-1-1>
                            </el-col>
                            <el-col :span="12" style="position: relative;">
                                <module-one-1-1 label="项目进度汇总">
                                    <img src="images/icon2001.png"
                                        style="position: absolute;cursor: pointer;right: 13px;top: 12px;"
                                        @click="doShowDlg2">
                                    <div class="warning-info-title" style="padding-left: 20px;">
                                        <div :class="prjProcessNav == 1 ? 'active' : ''" @click="doPrjProcess(1, '在建项目')">
                                            在建项目({{ getPrjCateCount(0) }})
                                        </div>
                                        <div :class="prjProcessNav == 2 ? 'active' : ''" @click="doPrjProcess(2, '拟建项目')">
                                            拟建项目({{ getPrjCateCount(1) }})
                                        </div>
                                        <div :class="prjProcessNav == 4 ? 'active' : ''" @click="doPrjProcess(4, '完成项目')">
                                            完成项目({{ getPrjCateCount(3) }})
                                        </div>
                                    </div>
                                    <el-row>
                                        <el-col :span="8">
                                            <div class="survey_content">
                                                <div class="survey_content_img">
                                                    <svg v-if="prjProcessNav == 1" class="my-svg-icon"
                                                        style="vertical-align: middle;fill: #fff;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="2883">
                                                        <path
                                                            d="M510.0032 492.9536c-12.16 0-24.3456-2.3808-35.9424-7.1168L71.7824 300.5952c-11.3408-4.6336-18.816-15.5648-19.072-27.8016s6.784-23.4496 17.92-28.544l400.1536-183.296a100.1728 100.1728 0 0 1 82.7648-0.3072l398.1056 178.8416c11.1616 5.0176 18.2784 16.1792 18.1248 28.416s-7.5776 23.2192-18.8672 27.9296l-404.3264 189.7216a94.26944 94.26944 0 0 1-36.5824 7.3984zM160.64 270.592l336.7424 158.3872a33.0496 33.0496 0 0 0 25.5232-0.1024l338.9952-162.3808-333.5424-149.8112a38.6688 38.6688 0 0 0-32 0.128L160.64 270.592z"
                                                            fill="#fff" p-id="2884"></path>
                                                        <path
                                                            d="M510.1568 722.7648c-14.4896 0-28.9536-3.3536-42.1632-10.0864L68.3264 509.0816c-8.576-4.3776-15.0784-12.2624-16.9472-21.6832a30.7072 30.7072 0 0 1 15.0272-32.8192l189.6704-106.9568c19.5584-11.0336 44.3136-4.1216 55.3472 15.4368l10.2144 18.1248-175.1808 98.7904L495.872 657.92a31.5392 31.5392 0 0 0 28.672-0.0512l354.0224-181.9136-175.9488-100.736 10.3424-18.0736c11.1616-19.4816 35.968-26.2144 55.4496-15.0784l189.7984 108.672c9.7792 5.6064 15.6928 16.1024 15.4368 27.3664s-6.656 21.4784-16.6656 26.624l-404.352 207.7696a92.53376 92.53376 0 0 1-42.4704 10.2656z"
                                                            fill="#fff" p-id="2885"></path>
                                                        <path
                                                            d="M512.2048 975.9744c-4.7872 0-9.5744-1.1264-13.952-3.3536L70.2464 754.5856c-8.576-4.3776-15.0784-12.2624-16.9472-21.7088a30.72512 30.72512 0 0 1 15.0272-32.8192l192.1536-108.3648c18.176-10.24 41.2416-3.8144 51.4816 14.3616l11.6224 20.608-175.1808 98.7904 363.7504 185.2928 368.3584-189.2608-175.9488-100.736 11.7504-20.5312c10.368-18.1248 33.4592-24.3968 51.584-14.0288l192.2816 110.08c9.7792 5.6064 15.6928 16.1024 15.4368 27.3664a30.72 30.72 0 0 1-16.6656 26.624l-432.6656 222.3104a31.0272 31.0272 0 0 1-14.08 3.4048z"
                                                            fill="#fff" p-id="2886"></path>
                                                    </svg>
                                                    <svg v-if="prjProcessNav == 2" 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="2900">
                                                        <path
                                                            d="M702.976 981.76H149.76c-57.088 0-103.424-46.336-103.424-103.424V306.688c0-57.088 46.336-103.424 103.424-103.424h553.216c57.088 0 103.424 46.336 103.424 103.424v571.648c0 57.088-46.592 103.424-103.424 103.424zM149.76 264.704c-23.04 0-41.984 18.944-41.984 41.984v571.648c0 23.04 18.944 41.984 41.984 41.984h553.216c23.04 0 41.984-18.944 41.984-41.984V306.688c0-23.04-18.944-41.984-41.984-41.984H149.76z"
                                                            fill="#040000" p-id="2901"></path>
                                                        <path
                                                            d="M873.984 890.112h-66.816c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h66.816c25.344 0 46.08-20.736 46.08-46.08V152.576c0-25.344-20.736-46.08-46.08-46.08H294.144c-25.344 0-46.08 20.736-46.08 46.08v59.136c0 16.896-13.824 30.72-30.72 30.72s-30.72-13.824-30.72-30.72V152.576c0-59.392 48.128-107.52 107.52-107.52h579.84c59.392 0 107.52 48.128 107.52 107.52v630.272c0 59.136-48.384 107.264-107.52 107.264z"
                                                            fill="#040000" p-id="2902"></path>
                                                        <path
                                                            d="M771.072 521.984H82.944c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h688.128c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM652.032 391.424H326.144c-15.616 0-28.16-12.544-28.16-28.16s12.544-28.16 28.16-28.16h325.888c15.616 0 28.16 12.544 28.16 28.16s-12.544 28.16-28.16 28.16z"
                                                            fill="#040000" p-id="2903"></path>
                                                        <path
                                                            d="M221.952 365.824m-33.792 0a33.792 33.792 0 1 0 67.584 0 33.792 33.792 0 1 0-67.584 0Z"
                                                            fill="#040000" p-id="2904"></path>
                                                    </svg>
                                                    <svg v-if="prjProcessNav == 4" 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="2641">
                                                        <path
                                                            d="M997.76 494.72l-133.12-76.8 128-72.32a32 32 0 0 0 0-55.68L704 123.52a32 32 0 0 0-32 0L512 213.76 346.88 118.4a32 32 0 0 0-32 0L26.24 284.8a32 32 0 0 0 0 55.68l133.76 76.8-128 72.32a32 32 0 0 0 0 55.68L192 635.52v114.56a32 32 0 0 0 16 27.52l288 166.4a32 32 0 0 0 32 0l288-166.4a32 32 0 1 0-32-55.68L512 880l-256-147.84v-59.52l64 39.04a32 32 0 0 0 32 0L512 620.8l166.4 96a32 32 0 0 0 32 0l106.24-64 181.12-105.6a32 32 0 0 0 0-55.68zM512 288l224 128L512 547.2l-224-128L384 362.88z m172.8-99.84l224 128-108.8 64L576 250.88z m-353.92-5.12L448 250.88l-91.52 53.12L224 380.16 106.24 312.32zM114.56 517.12l108.8-64L320 512l128 71.68-108.8 64z m579.2 135.04L576 583.68 700.16 512l99.84-57.6 117.12 67.84z"
                                                            fill="#1B213F" p-id="2642"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="survey_content_number labour-survey_content_number">
                                                <div class="survey_content_value"><span>{{ prjPrcessTotal }}</span> 个</div>
                                                <p>{{ prjPrcessText }}</p>
                                            </div>
                                        </el-col>
                                        <el-col :span="16" :key="elSumKey">
                                            <staff-survey-chart :height="220" :unit="'个'" :data="prjPrcessData"
                                                :width="140" @chart-click="planSummaryChartClick"></staff-survey-chart>
                                        </el-col>
                                    </el-row>
                                </module-one-1-1>
                            </el-col>
                        </el-row>

                    </el-col>
                    <el-col :span="6">
                        <module-one-1-1 label="集团新闻">
                            <el-carousel>
                                <el-carousel-item v-for="(item, idx) in JournalismList" :key="idx">
                                    <div style="height: 94%;text-align: center;" @click="handJournalism(item)">
                                        <img :src="$apiPath + item.mainImage + '.min.jpg'" style="width: 99%;height: 100%;">
                                    </div>
                                    <div style="text-align: center;font-size: 12px;line-height: 32px;margin-top: -32px;">
                                        {{ item.title }}
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </module-one-1-1>
                        <module-one-1-1 label="成本管理" :key="elKey">
                            <div class="glr-max cost-out" style="position: relative;">
                                <div class="glr-min">


                                    <div class="glr-title">开累产值</div>
                                    <div class="labour-education">
                                        <div style="transform: scale(0.8);margin-left:-20px">
                                            <people-number
                                                :number="numberWithCommas((sumCost.totalMonth * 1.0 || 0).toFixed(2)) || '0.00'"
                                                unit="万元"></people-number>
                                        </div>
                                        <div class="survey_content" style="position: absolute;right: 15px;top: -36px;">
                                            <div class="survey_content_img labour-education_bgd">
                                                <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="16007">
                                                    <path
                                                        d="M544.853333 545.322667v54.826666h100.053334a33.749333 33.749333 0 1 1 0 67.541334h-99.989334v91.648a33.749333 33.749333 0 0 1-67.52 0v-91.648h-98.282666a33.749333 33.749333 0 0 1 0-67.52h98.282666v-54.848h-98.282666a33.749333 33.749333 0 0 1 0-67.52h76.565333l-90.176-151.658667a33.856 33.856 0 0 1 58.133333-34.453333l88.298667 148.501333 88.362667-148.501333a33.856 33.856 0 0 1 58.069333 34.453333l-90.176 151.68h76.693333a33.749333 33.749333 0 0 1 0 67.498667H544.853333zM512 110.186667a400 400 0 0 0-284.16 117.674666A400.426667 400.426667 0 0 0 110.208 512a400 400 0 0 0 117.674667 284.16A400.426667 400.426667 0 0 0 512 913.792a400 400 0 0 0 284.16-117.674667A400.426667 400.426667 0 0 0 913.792 512a400 400 0 0 0-117.653333-284.16A400.426667 400.426667 0 0 0 512 110.208zM512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z"
                                                        fill="#8A8A8A" p-id="16008"></path>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="glr-title">年度产值</div>
                                    <div class="labour-education">
                                        <div style="transform: scale(0.8);margin-left:-20px">
                                            <people-number
                                                :number="numberWithCommas((sumCost.curYear * 1.0 || 0).toFixed(2)) || '0.00'"
                                                unit="万元"></people-number>
                                        </div>
                                    </div>

                                    <div class="glr-title">月度产值</div>
                                    <div class="labour-education">
                                        <div style="transform: scale(0.8);margin-left:-20px">
                                            <people-number
                                                :number="numberWithCommas((sumCost.curMonth * 1.0 || 0).toFixed(2)) || '0.00'"
                                                unit="万元"></people-number>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </module-one-1-1>
                        <module-one-1-1 label="项目监测预警">
                            <MonitAndWarning></MonitAndWarning>
                        </module-one-1-1>
                    </el-col>
                </el-row>
            </div>        
        <index-dlg1 ref="dlg1"></index-dlg1>
        <index-dlg2 ref="dlg2"></index-dlg2>
        <index-dlg3 ref="dlg3"></index-dlg3>
        <journalismDlg ref="journalismDlg"></journalismDlg>
        <AttendanceDetailDialog ref="attDetailDlg"></AttendanceDetailDialog>
    </div>
</template>
<script>
import '../components/module/module-one-2-1'
import '../components/background_video'
import '../components/project-overview-chart'
import '../components/rank-chart'
import '../components/staff-survey-chart'
import indexDlg1 from './index/indexDlg1'
import indexDlg2 from './index/indexDlg2'
import indexDlg3 from './index/indexDlg3'
import indexMap from './index/map.vue'
import MonitAndWarning from './components/MonitAndWarning.vue'
import journalismDlg from './dlg/journalismDlg.vue'
import debounce from 'lodash.debounce'
import AttendanceDetailDialog from './components/AttendanceDetailDialog.vue'
import mapIndex from './index/mapIndex.vue'
export default {
    name: 'App',
    components: {
        indexDlg1,
        indexDlg2,
        indexDlg3,
        indexMap,
        MonitAndWarning,
        journalismDlg,
        AttendanceDetailDialog,mapIndex
    },
    data() {
        return {
            elDeptWorks: 0,
            prj: {},
            prjs: [],
            elSumKey: 0,
            elKey: 0,
            prjInfo: {},
            loading: true,
            legendOpt1: {
                icon: "rect",
                textStyle: {
                    fontSize: 14,
                    rich: {
                        name: {
                            color: "#c3dbfd",
                            padding: [10, 5, 20, 5],
                        },
                        percent: {
                            color: "#4676FD",
                            padding: [10, 5, 20, 5],
                        },
                    },
                },
            },
            legendOpt2: {
                icon: "rect",
                orient: "horizontal",
                left: '50%',
                top: 'top',
                itemGap: 0,
                textStyle: {
                    fontSize: 14,
                    rich: {
                        name: {
                            color: "#c3dbfd",
                            padding: [5, 2, 20, 2],
                        },
                        percent: {
                            color: "#4676FD",
                            fontSize: 16,
                            padding: [0, 2, 0, 2],
                        },
                    },
                }
            },
            projectList: [
                { text: '中铁一局建安公司', id: 0, type: 1 },
                { text: '泾河新城荟锦坊二期 EPC 工程总承包项目', id: 1, type: 2 },
                { text: '西安市地铁2号线二期工程施工总承包项目2标段', id: 2, type: 2 },
                { text: '苏州桑田岛项目', id: 3, type: 2 },
            ],
            dangersDatas: [],
            //原因类型分析
            availabilityData: [],
            overviewText: '项目数量',
            overviewTotal: 100,
            //项目概况
            typeDistributionData: [
                { name: '在建项目', value: '15' },
                { name: '项目总投资', value: '515.97' },
                { name: '项目年投资', value: '134.86' }
            ],
            //质量管理
            qualityNav: 0,
            qualityNavTitle: '',
            qualityNavTotal: 0,
            //劳务人员
            infoNav: 0,
            staffText: '在岗人员',
            surveyUrl: 'images/survey_icon_4.png',
            laborPersonnelTotal: 0,
            laborPersonnelData: [
                { text: "总包人员", value: 0 },
                { text: "监理人员", value: 0 },
                { text: "劳务人员", value: 0 },
            ],
            //项目进度
            prjProcessNav: 1,
            prjPrcessText: '在建项目',
            prjPrcessTotal: 100,
            prjPrcessUrl: 'images/prj1.svg',
            prjPrcessData: [
                { text: "正常推进项目", value: 0 },
                { text: "进度滞后项目", value: 0 },
            ],
            //总投金额                
            investmentAmountData1: [
                { text: "付款金额", value: 0 },
            ],
            investmentAmountData2: [
                { text: "挂账金额", value: 0 },
            ],
            //设备概况
            overview: 0,
            overviewInterval: '',
            surveyUrlSb: 'images/survey_icon_1.png',

            //地图数据
            mapOutdata: [],
            tooltipData: [],
            //正在发生
            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',
                }
            ],

            /*warningData[i].images   图标
           *  机械  images/warning_jixie.png
           *  测斜  images/warning_cexie.png
           *  沉降  images/warning_chenjiang.png
           *  吊重  images/warning_diaozhong.png
           *  风速  images/warning_fengsu.png
           *  幅度  images/warning_fudu.png
           *  高度  images/warning_gaodu.png
           *  PM2.5  images/warning_PM2.5.png
           *  PM10  images/warning_PM10.png
           *  倾角  images/warning_qingjiao.png
           *  倾斜  images/warning_qingxie.png
           *  人员  images/warning_renyuan.png
           *  湿度  images/warning_shidu.png
           *  水位  images/warning_shuiwei.png
           *  位移  images/warning_weiyi.png
           *  温度  images/warning_wendu.png
           *  应力  images/warning_yingli.png
           *  噪音  images/warning_zaoyin.png
           *  转角  images/warning_zhuanjiao.png
           * */
            //重大节点预期预警   数据
            index: 0,
            majorInterval: undefined,
            majorWarningData: [
                {
                    projectName: '泾河新城荟锦坊二期',
                    majorNode: '当前机械已闲置10天，请尽快检查',
                    timeNode: '2022年10月15日',
                    expectDays: 5,
                    state: 1,
                },
                {
                    projectName: '西安市地铁2号线二期工程施工总承包项目2标段',
                    majorNode: '当前机械已闲置10天',
                    timeNode: '2022年10月15日',
                    expectDays: 5,
                    state: 1,
                },
                {
                    projectName: '苏州桑田岛项目',
                    majorNode: '当前机械已闲置10天',
                    timeNode: '2022年10月15日',
                    expectDays: 0,
                    state: 0,
                },
                {
                    projectName: '西安市地铁2号线二期工程施工总承包项目2标段',
                    majorNode: '当前机械已闲置10天，请尽快检查',
                    timeNode: '2022年10月15日',
                    expectDays: 0,
                    state: 0,
                },
                {
                    projectName: '苏州桑田岛项目',
                    majorNode: '当前机械已闲置10天，请尽快检查',
                    timeNode: '2022年10月15日',
                    expectDays: 0,
                    state: 0,
                },
            ],

            //head 选择项目回显
            localStorage: '',

            //正在发生
            warningInterval: undefined,
            forIndex: 0,
            projectCategory: [],
            projectCategoryWidth: 200,
            deptInfo: {},
            JournalismList: [],
            sumCost: {},
        }
    },
    created() {
        this.init()
    },
    mounted() {
        window.xapp = this;
        this.$nextTick(() => {
            this.loading = true;
        });
        this.$bus.$on("loadProjects", debounce(prjs => {
            this.prjs = prjs;
            if (this.prj.id == 0) {
                this.prjInfo = this.prjs[1];
            }
        }));
        this.$bus.$on("projectChange", debounce(res => {
            if (res.id == 0) {
                const func = () => {
                    if (this.prjs && this.prjs.length > 1) {
                        this.prjInfo = this.prjs[1];
                    } else {
                        setTimeout(func, 100);
                    }
                }
                func();
            } else {
                this.prjInfo = res;
            }
            this.prj = res;
            this.investmentAmountData1[0].value = "" + res.paidAmount * 1.0;
            this.investmentAmountData2[0].value = "" + res.onAccountAmount * 1.0;
            this.elKey++;
            this.onWarningInfoNav(0);
            this.sumCostOutByDeptId();
            
        }));
        this.$bus.$on("deptChange", debounce(dept => {
            this.deptInfo = dept;
            this.groupByProjectCategory(dept.id);
            this.onClickoOverview(0)
            this.qualityNavClick(0);
            this.onWarningInfoNav(0);
            this.sumCostOutByDeptId();
        }));
        if(this.$root.hasInitHeader){
            this.initMe();
        }
    },
    methods: {
        initMe(){
            this.prj=this.$root.project||{};
            this.deptInfo=this.$root.dept||{};
            this.prjs=this.$root.projects||[];
            let res=this.prj;
            this.investmentAmountData1[0].value = "" + res.paidAmount * 1.0;
            this.investmentAmountData2[0].value = "" + res.onAccountAmount * 1.0;
            this.elKey++;
            this.onWarningInfoNav(0);
            this.sumCostOutByDeptId();
            this.groupByProjectCategory(this.deptInfo.id);
            this.onClickoOverview(0)
            this.qualityNavClick(0);
        },
        doShowAttendanceDetail(){
            let data={
                deptId:this.deptInfo.id||0,
                projectId:this.prj.id||0,
                attendanceTime: this.$dt(new Date()).format("YYYY-MM-DD")
            }
            this.$refs.attDetailDlg.showDialog(data);
        },
        loadAttendanceData(){
            let data={
                subDeptId:this.deptInfo.id||0,
                projectId:this.prj.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++;
            });
        },
        planSummaryChartClick(p){
            let idx=0;
            if(p.event.target.parent.style && p.event.target.parent.style.text){
                if(p.event.target.parent.style.text.includes("正常推进项目")){
                    idx=2;
                }
                if(p.event.target.parent.style.text.includes("进度滞后项目")){
                    idx=1;
                }

            }else{
                idx=p.seriesIndex;
            }
            
            if(idx==1||idx==2){
                this.$refs.dlg2.showDetailDialog(this.prjProcessNav,idx,this.deptInfo);
            }
        },
        sumCostOutByDeptId() {
            let dt = this.$dt(new Date());
            let postData = {
                year: dt.$y,
                month: dt.$M + 1
            };

            if (this.prj && this.prj.id > 0) {
                postData.projectId = this.prj.id;
            } else {
                postData.id = this.deptInfo.id;
            }
            if (this.callSumCostTime) {
                if (+new Date() - this.callSumCostTime < 400) {
                    return;
                }
            }
            this.callSumCostTime = +new Date();
            this.$api.costOut.sumByDeptId(postData).then(d => {
                this.sumCost = d;
            });
        },
        qualityNavClick(n) {
            this.qualityNav = n;
            if (n == 0) {
                this.qualityNavTitle = "安全隐患总数";
                let postData = {
                    deptId: this.deptInfo?.id || 0,
                    roleType: 0
                };
                this.$api.problemmodify.safetySummary(postData).then(d => {
                    this.dangersDatas = (d || []).map(it => {
                        return {
                            text: it.problemArea,
                            prop: '0.0',
                            name: it.problemArea,
                            value: +it.roleType || 0
                        }
                    });
                    let sum = 0;
                    this.dangersDatas.forEach(it => {
                        sum += it.value * 1;
                    })
                    this.qualityNavTotal = sum;
                    this.elKey++;
                })
            } else {
                let postData = {
                    deptId: this.deptInfo?.id || 0,
                    roleType: 0
                };
                this.qualityNavTitle = "质量隐患总数";
                this.$api.problemmodify.qualitySummary(postData).then(d => {
                    this.dangersDatas = (d || []).map(it => {
                        return {
                            text: it.problemArea,
                            prop: '0.0',
                            name: it.problemArea,
                            value: +it.roleType || 0
                        }
                    });
                    let sum = 0;
                    this.dangersDatas.forEach(it => {
                        sum += it.value * 1;
                    })
                    this.qualityNavTotal = sum;
                    this.elKey++;
                })
            }
        },
        numberWithCommas(x) {
            x = x.toString();
            var pattern = /(-?\d+)(\d{3})/;
            while (pattern.test(x))
                x = x.replace(pattern, "$1,$2");
            return x;
        },
        doShowDlg3() {
            this.$refs.dlg3.showDialog()
        },
        doShowDlg1() {
            this.$refs.dlg1.showDialog()
        },
        doShowDlg2() {
            this.$refs.dlg2.showDialog(this.prjProcessNav, [this.getPrjCateCount(0), this.getPrjCateCount(1), this.getPrjCateCount(3)],this.deptInfo)
        },
        getPrjCateCount(n) {
            if (this.projectCategory.length < n + 1) {
                return 0;
            }
            let tmps = this.projectCategory[n];
            if (tmps && tmps.length > 0) {
                let sum = 0;
                tmps.forEach(d => {
                    sum += d.cnt;
                })
                return sum;
            }
            return 0;
        },
        groupByProjectCategory(deptId) {
            this.$api.project.groupByProjectCategory(deptId, datas => {
                this.projectCategory = datas;
                this.prjPrcessTotal = this.getPrjCateCount(0);
                let item = this.projectCategory.length > 0 ? this.projectCategory[0] : null;
                this.prjPrcessData[0].value = item && item.length > 0 ? item[0].cnt : 0;
                this.prjPrcessData[1].value = item && item.length > 1 ? item[1].cnt : 0;
                this.doPrjProcess(1, '在建项目');
                this.elKey++;
            });
        },
        init() {

            this.localStorage = JSON.parse(localStorage.getItem("data1"))

            //地图数据
            this.chartMap()
            //设备概况点击事件定时器
            //this.overviewInterval = setInterval(this.overviewClick, 5000);
            //重大节点预期预警
            this.majorInterval = setInterval(this.timer, 5000);
            //正在发生 定时器
            this.warningInterval = setInterval(this.automaticRoll, 5000);
            this.getJournalismList();
            setInterval(this.getDeptWorksList, 600000);
            setInterval(this.getJournalismList, 600000);
        },
        doPrjProcess(n, text) {
            this.prjProcessNav = n;
            this.prjPrcessText = text;
            n--;
            this.prjPrcessTotal = this.getPrjCateCount(n);
            let item = this.projectCategory.length > n ? this.projectCategory[n] : null;
            this.prjPrcessData[0].value = item && item.length > 0 ? item[0].cnt : 0;
            this.prjPrcessData[1].value = item && item.length > 1 ? item[1].cnt : 0;
            this.elSumKey++;
        },
        //劳务人员概况
        onWarningInfoNav(n) {
            this.infoNav = n
            this.staffText = n == 0 ? '在岗人数' : '今日出勤'
            if (n == 0) {
                this.surveyUrl = 'images/survey_icon_4.png'
            } else {
                this.surveyUrl = 'images/survey_icon_5.png'
            }            
            this.getDeptWorksList();
        },
        //查询在岗人数
        getDeptWorksList() {
            let deptId = this.deptInfo?.id || 0;
            if (this.infoNav == 0) {
                //查询在岗人数
                this.$api.attendance.getDeptWorksList(deptId, this.prj.id).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 });
                    }
                    this.elDeptWorks++;
                });
            } else {
                //查询出勤人数
                this.loadAttendanceData();                
            }
        },
        //集团新闻列表
        getJournalismList() {
            //查询出勤人数
            this.$api.journalism.getJournalismList().then(d => {
                this.JournalismList = d.rows;
            });
        },
        handJournalism(item) {
            this.$refs.journalismDlg.showDialog(item);
        },
        //设备概况点击事件定时器方法
        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.projectCategoryWidth = 290;
                this.overviewText = "项目数";
                this.surveyUrlSb = 'images/survey_icon_1.png'

            } else if (this.overview == 1) {
                this.projectCategoryWidth = 210;
                this.overviewText = "项目总投资";
                this.surveyUrlSb = 'images/survey_icon_2.png'

            } else {
                this.projectCategoryWidth = 210;
                this.overviewText = "项目年投资";
                this.surveyUrlSb = 'images/survey_icon_3.png'
            }
            let year = this.$dt(new Date()).$y;
            this.$api.project.groupByCategory(this.deptInfo.id, n, year).then(d => {
                let tmps = (d.data || []).map(it => {
                    return {
                        id: it.id,
                        name: it.projectName,
                        value: it.deptId / 10000.0
                    }
                });
                let sum = 0;
                tmps.forEach(it => {
                    sum += it.value;
                })
                this.overviewTotal = sum;
                this.typeDistributionData = tmps;
                this.elKey++;
            })
            this.$api.project.groupByLevel(this.deptInfo.id, n, year).then(d => {
                let tmps = (d.data || []).map(it => {
                    return {
                        id: it.id,
                        text: it.projectName,
                        value: it.deptId / 10000.0,
                        prop: 0,
                    }
                });
                let sum = 0;
                tmps.forEach(it => {
                    sum += it.value;
                })
                let total = 0;
                tmps.forEach((it, idx) => {
                    it.prop = sum == 0 ? 0 : (it.value * 100.0 / sum).toFixed(1)

                    if (idx < tmps.length - 1) {
                        total += it.prop * 1;
                    } else {
                        if (sum > 0) {
                            it.prop = (100 - total).toFixed(1);
                        }
                    }
                })
                this.availabilityData = tmps;
                this.elKey++;
            })

        },
        //地图数据
        chartMap() {
            var data = [
                {
                    "latitude": "34.546109",
                    "project_shorthand": "泾河新城荟锦坊二期",
                    "zc": 621,
                    "project_name": "泾河新城荟锦坊二期 EPC 工程总承包项目",
                    "zg": 610,
                    "cq": 0,
                    "project_addr": "泾河新城荟锦坊二期 EPC 工程总承包项目",
                    "glrs": 0,
                    "prop": 0.00,
                    "grrs": 621,
                    "projectId": 1,
                    "longitude": "108.913119"
                },
                {
                    "latitude": "34.379435",
                    "project_shorthand": "西安地铁2号线二期2标",
                    "zc": 450,
                    "project_name": "西安市地铁2号线二期工程施工总承包项目2标段",
                    "zg": 448,
                    "cq": 0,
                    "project_addr": "西安市地铁2号线二期工程施工总承包项目2标段",
                    "glrs": 48,
                    "prop": 0.00,
                    "grrs": 402,
                    "projectId": 2,
                    "longitude": "108.917",
                },
                {
                    "latitude": "31.282088",
                    "project_shorthand": "苏州桑田岛项目",
                    "zc": 376,
                    "project_name": "苏州桑田岛项目",
                    "zg": 376,
                    "cq": 0,
                    "project_addr": "苏州桑田岛项目",
                    "glrs": 0,
                    "prop": 0.00,
                    "grrs": 376,
                    "projectId": 3,
                    "longitude": "120.43316"
                },
            ]
            data.map(x => {
                x.value = [x.longitude, x.latitude]
                return x
            })
            this.mapOutdata = data

            var tooltipInfo = []
            for (let i = 0; i < data.length; i++) {
                var tipHtml = '<div style="width: 300px;background: url(\'images/map_popup_bgd.png\')  no-repeat center/100% 100%;font-size: 14px;">\n' +
                    '    <div style="padding: 7px 3px 10px;">\n' +
                    '        <div onclick="chartClick(' + data[i].projectId + ')" style="height: 33px;width:100%;background: url(\'images/map_popup_title.png\')  no-repeat center/100% 100%;padding-left: 5px;line-height: 33px;color: #ffffff;display: flex;justify-content: space-between;cursor: pointer">\n' +
                    '            <div>' + data[i].project_shorthand + '</div>\n' +
                    '            <div style="padding: 5px 10px"><img src="images/check_icon.png" width="10" height="20"></div>\n' +
                    '        </div>\n' +
                    '        <div  style="padding: 10px;color:#cbdaff;">\n' +
                    '            <table style="width: 100%">\n' +
                    '                <tr>\n' +
                    '                    <td style="width: 50%">\n' +
                    '                        <div style="height: 40px;line-height: 40px;"> 设备数量：<span style="color: #fff;font-size: 16px;">' + data[i].zg + '</span></div>\n' +
                    '                    </td>\n' +
                    '                    <td style="width: 50%">\n' +
                    '                        <div style="height: 40px;line-height: 40px;"> 监控数量：<span style="color: #fff;font-size: 16px;">' + data[i].cq + '</span></div>\n' +
                    '                    </td>\n' +
                    '                </tr>\n' +
                    '                <tr>\n' +
                    '                    <td style="width: 50%">\n' +
                    '                        <div style="height: 40px;line-height: 40px;"> 在岗人数：<span style="color: #fff;font-size: 16px;">' + data[i].glrs + '</span></div>\n' +
                    '                    </td>\n' +
                    '                    <td style="width: 50%">\n' +
                    '                        <div style="height: 40px;line-height: 40px;"> 今日出勤：<span style="color: #fff;font-size: 16px;">' + data[i].grrs + '</span></div>\n' +
                    '                    </td>\n' +
                    '                </tr>\n' +
                    '            </table>\n' +
                    '        </div>\n' +
                    '        <div style="padding: 0 12px;">\n' +
                    '            <div style="color: #49b3ff;background: #132c55;padding: 10px;white-space:normal">' + data[i].project_addr + '</div>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</div>'
                tooltipInfo.push(tipHtml)
            }
            this.tooltipData = tooltipInfo

        },
        //Echart 地图 点击返回值
        projectClick(id) {
            var list = this.projectList
            for (let i = 0; i < list.length; i++) {
                if (list[i].id == id) {
                    localStorage.setItem("data", JSON.stringify(list[i]))
                    location.href = 'projectOverviewProject.html'
                }
            }
        },


        towardsLeft() {
            if (this.index == 0) {
                this.$notify({
                    title: '提示',
                    message: '没有更多了！',
                    type: 'warning'
                });
            } else {
                this.index = this.index + 1
            }
        },
        towardsRight() {
            var length = this.majorWarningData.length
            if (length > 3) {
                if ((length - Math.abs(this.index)) == 3) {
                    this.$notify({
                        title: '提示',
                        message: '没有更多了！',
                        type: 'warning'
                    });
                } else {
                    this.index = this.index - 1
                }
            }
        },
        timer() {
            var length = this.majorWarningData.length
            if (length > 3) {
                if ((length - Math.abs(this.index)) == 3) {
                    this.index = 0
                } else {
                    this.index = this.index - 1
                }
            }
        },




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

        listMinMouseover() {
            clearInterval(this.warningInterval);
        },
        listMinMouseout() {
            this.warningInterval = setInterval(this.automaticRoll, 10000);
        },


    },

}
</script>

<style lang="less">
.main-index {
    .center-image .screen-one-2-1 {
        overflow: hidden;
    }

    .my-svg-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
    }

    .my-svg-icon * {
        fill: #389DE3;

    }

    .people-number-con div.is-split {
        background: none;
    }

    .labour-education .number-unit {
        position: relative;
        bottom: -8px;
    }

    .number-unit {
        word-break: keep-all;
    }

    .cost-out {
        .labour-education {
            height: 70px;

            .people-number-con {
                padding: 0px;
            }
        }
    }
}</style>
