    <template>
        <div class="project-detail main-page">

            <el-col :span="6" class="h100">
                <module-one-1-1 label="项目概况">
                    <img src="images/icon2001.png" class="img-openwin" @click="showDetailDlg" />
                    <div class="glr-title prj-info-title">{{ selProject?.projectName || '' }}</div>
                    <div class="dept-info-list">
                        <el-row>
                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">建设单位</div>
                                <div v-if="deptType1 == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_3.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType1.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')">
                                            <span class="dept-leader">{{ deptType1.leader }}</span>
                                            <span class="dept-phone">{{ deptType1.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">设计单位</div>
                                <div v-if="deptType2 == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_2.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType2.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType2.leader || '') + ' ' + (deptType2.phone || '')">
                                            <span class="dept-leader">{{ deptType2.leader }}</span>
                                            <span class="dept-phone">{{ deptType2.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">总包单位</div>
                                <div v-if="deptType3.deptName == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_3.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType3.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')">
                                            <span class="dept-leader">{{ deptType3.leader }}</span>
                                            <span class="dept-phone">{{ deptType3.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">监理单位</div>
                                <div v-if="deptType4 == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_11.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType4.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType4.leader || '') + ' ' + (deptType4.phone || '')">
                                            <span class="dept-leader">{{ deptType4.leader }}</span>
                                            <span class="dept-phone">{{ deptType4.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">检测单位</div>
                                <div v-if="deptType5 == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_12.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType5.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')">
                                            <span class="dept-leader">{{ deptType5.leader }}</span>
                                            <span class="dept-phone">{{ deptType5.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>

                            <el-col :span="12" class="dept-item">
                                <div class="dept-title">勘察单位</div>
                                <div v-if="deptType6 == null" class="dept-nodata">
                                    暂无数据
                                </div>
                                <div class="dept-info" v-else>
                                    <img class="dept-img" src="images/company_10.png" />
                                    <div class="dept-row">
                                        <div class="dept-name"> {{ deptType6.deptName }}</div>
                                        <div class="dept-leader-phone"
                                            :title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')">
                                            <span class="dept-leader">{{ deptType6.leader }}</span>
                                            <span class="dept-phone">{{ deptType6.phone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </module-one-1-1>
                <module-one-1-1 label="劳务人员概况">
                    <img src="images/icon2001.png" class="img-openwin" v-if="attendanceTotal > 0"
                        @click="doShowAttendanceDetail" />
                    <div class="attendance-info warning-info">
                        <div class="attendance-info-title warning-info-title">
                            <div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">
                                在岗人员
                            </div>
                            <div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">
                                今日出勤
                            </div>
                        </div>
                        <el-row>
                            <el-col :span="8" class="attendance-tag">
                                <div class="survey_content">
                                    <div class="survey_content_img">
                                        <img
                                            :src="attendanceNav == 0 ? 'images/survey_icon_4.png' : 'images/survey_icon_5.png'" />
                                    </div>
                                </div>
                                <div class="survey_content_number labour-survey_content_number">
                                    <div class="survey_content_value">
                                        <span>{{ attendanceTotal }}</span> 人
                                    </div>
                                    <p>{{ attendanceNav == 0 ? '在岗人员' : '今日出勤' }}</p>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <staffSurveyChart :key="chartKey"
                                    :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'"
                                    :data="attendanceData" :width="140"></staffSurveyChart>
                            </el-col>
                        </el-row>
                    </div>
                </module-one-1-1>
                <module-one-1-1 label="设备概览">
                    <div class="device-info">
                        <div class="survey_title device-title">
                            <div class="survey_title_btn">
                                <div :class="deviceNav == 0 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                    @click="doDeviceNav(0)">设备数量</div>
                            </div>
                            <div class="survey_title_btn">
                                <div :class="deviceNav == 1 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                    @click="doDeviceNav(1)">绑定数量</div>
                            </div>
                            <div class="survey_title_btn">
                                <div :class="deviceNav == 2 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
                                    @click="doDeviceNav(2)">监测数量</div>
                            </div>
                        </div>
                        <div class="device-data">
                            <el-row>
                                <el-col :span="12">
                                    <div class="survey_content" style="justify-content: right;">
                                        <div class="survey_content_img">
                                            <img
                                                :src="attendanceNav == 0 ? 'images/survey_icon_4.png' : 'images/survey_icon_5.png'" />
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="survey_content_number labour-survey_content_number"
                                        style="padding-top:0px;text-align: left;margin-left: 10px;">
                                        <p>{{ deviceNav == 0 ? '设备数量' : deviceNav == 1 ? '绑定数量' : '监测数量' }}</p>
                                        <div class="survey_content_value">
                                            <span class="sp-number led-number">{{ attendanceTotal }}</span>
                                            <span class="sp-unit" style="font-style: normal;">台</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="device-data-list">
                            <div v-for="(it, idx) in deviceData" :key="idx" class="device-data-item">
                                <img src="images/legend_weiyi.png" />
                                <span>{{ it.text }}</span>
                                <span class="fblue  led-number">{{ it.value }}</span>
                            </div>
                        </div>
                    </div>
                </module-one-1-1>
            </el-col>
            <el-col :span="12" class="h100">
                <module-one-2-2 label="" class="no-title no-border">
                    <div v-autoscroll="20" style="height: 100px; overflow: hidden;" v-if="1 == 2">
                        <svg-icon icon-class="money"></svg-icon>
                        <div v-for="(it, idx) in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="idx">
                            {{ it }}
                        </div>
                    </div>
                    <div>
                    </div>
                    <div 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">
                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="money"></svg-icon>
                                                总投资
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 1000 }}</span> 万元
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="money"></svg-icon>
                                                本月完成
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 1000 }}</span> 万元
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="money"></svg-icon>
                                                本年完成
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 1000 }}</span> 万元
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="money"></svg-icon>
                                                开累完成
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 1000 }}</span> 万元
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="date"></svg-icon>
                                                计划开工日期
                                            </p>
                                            <div>
                                                <span class="led-number">{{ new Date() | toDate }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="date"></svg-icon>
                                                计划竣工日期
                                            </p>
                                            <div>
                                                <span class="led-number">{{ new Date() | toDate }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="date"></svg-icon>
                                                实际开工日期
                                            </p>
                                            <div>
                                                <span class="led-number">{{ new Date() | toDate }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="date"></svg-icon>
                                                合同工期
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 2100 }}</span> 天
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="project-amount">
                                    <div class="project-amount-bgd">
                                        <div class="project-amount-con">
                                            <p>
                                                <svg-icon icon-class="area"></svg-icon>
                                                建筑面积
                                            </p>
                                            <div>
                                                <span class="led-number">{{ 10000 }}</span> 平方米
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modify-btn">
                            <img src="images/foot_right.png" @click="modifyRightBtn" />
                        </div>
                    </div>
                    <div class="prj-img-list">
                        <el-carousel height="100%" :autoplay="false">
                            <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
                                <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </module-one-2-2>
                <module-one-1-2 label="项目节点计划预警" class="prj-plan">
                    <div class="dangerous-max" :key="chartKey">
                        <div class="dangerous-timeline-max w-scroll">
                            <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
                                <template v-if="projectBuildNode && projectBuildNode.length > 0">
                                    <div class="dangerous-timeline-con" v-for="(item, idx) in projectBuildNode"
                                        :key="idx">
                                        <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" class="h100">
                <module-one-2-1 label="" class="no-title no-border work-info">
                    <div class="analyse-map">
                        <div class="analyse-title analyse_title_blue">
                            <div class="analyse-text">安全生产</div>
                        </div>
                    </div>
                    <div class="work-days" style="display: flex;align-items: center;justify-content: center;">
                        <div style="margin-right: 10px;">第</div> <people-number :number="startDays"
                            unit=""></people-number>
                        <div style="margin-left:10px;">天</div>
                    </div>
                    <div class="analyse-map">
                        <div class="analyse-title analyse_title_blue">
                            <div class="analyse-text">环境监测</div>
                        </div>
                    </div>

                    <div v-if="weathers" class="weather-list">
                        <div v-if="weathers.length > 0" class="weather-item">
                            <span class="weather-day">今天</span>
                            <span class="weather-info">{{ weathers[0].weather }}</span>
                            <img class="weather-img" :src="weathers[0].img" />
                            <span class="weather-temp">{{ weathers[0].highTemp }} ～ {{ weathers[0].lowTemp }}</span>
                        </div>
                        <div v-if="weathers.length > 1" class="weather-item">
                            <span class="weather-day">明天</span>
                            <span class="weather-info">{{ weathers[1].weather }}</span>
                            <img class="weather-img" :src="weathers[1].img" />
                            <span class="weather-temp">{{ weathers[1].highTemp }} ～ {{ weathers[1].lowTemp }}</span>
                        </div>
                        <div v-if="weathers.length > 2" class="weather-item">
                            <span class="weather-day">后天</span>
                            <span class="weather-info">{{ weathers[2].weather }}</span>
                            <img class="weather-img" :src="weathers[2].img" />
                            <span class="weather-temp">{{ weathers[2].highTemp }} ～ {{ weathers[2].lowTemp }}</span>
                        </div>
                    </div>
                    <div class="weather-info">
                        <el-row>
                            <el-col :span="12" class="weather-info-item">
                                <div class="current-value-img">
                                    <svg-icon icon-class="pressure"></svg-icon>
                                </div>
                                <div class="wi-data">
                                    <div class="wi-label">当前气压</div>
                                    <div class="wi-data-unit">
                                        <span class="wi-txt">{{ weatherInfo.pressure }}</span>
                                        <span class="wi-unit">hPa</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" class="weather-info-item">
                                <div class="current-value-img">
                                    <svg-icon icon-class="humidity"></svg-icon>
                                </div>
                                <div class="wi-data">
                                    <div class="wi-label">当前湿度</div>
                                    <div class="wi-data-unit">
                                        <span class="wi-txt">{{ weatherInfo.humidity }}</span>
                                        <span class="wi-unit">%</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12" class="weather-info-item">
                                <div class="current-value-img">
                                    <svg-icon icon-class="precipitation"></svg-icon>
                                </div>
                                <div class="wi-data">
                                    <div class="wi-label">当前降雨量</div>
                                    <div class="wi-data-unit">
                                        <span class="wi-txt">{{ weatherInfo.precipitation }}</span>
                                        <span class="wi-unit">mm</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12" class="weather-info-item">
                                <div class="current-value-img">
                                    <svg-icon icon-class="wind"></svg-icon>
                                </div>
                                <div class="wi-data">
                                    <div class="wi-label">当前风向</div>
                                    <div class="wi-data-unit">
                                        <span class="wi-txt">{{ weatherInfo.windDirection }}{{ weatherInfo.windScale
                                            }}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>

                    </div>
                </module-one-2-1>
                <module-one-1-1 label="项目监测预警">
                    <MonitAndWarning type="detail"></MonitAndWarning>
                </module-one-1-1>
            </el-col>
            <project-info-dialog ref="infoDlg"></project-info-dialog>
            <attendanceInfoDlg ref="attDlg"></attendanceInfoDlg>
        </div>
    </template>

<script>
import projectInfoDialog from './detail/projectInfoDialog.vue';
import staffSurveyChart from '@/components/staffSurveyChart.vue';
import MonitAndWarning from './components/MonitAndWarning.vue';
import attendanceInfoDlg from './detail/attendanceInfoDlg.vue';
import testData from './test/detail'
import debounce from 'lodash.debounce'
export default {
    components: {
        projectInfoDialog,
        staffSurveyChart,
        MonitAndWarning,
        attendanceInfoDlg,
    },
    data() {
        return {
            chartKey: 0,
            dpi: '',
            selProject: null,
            prjInfo: {},
            deptType1: [],//建设单位
            deptType2: [],//设计单位
            deptType3: [],//总包单位
            deptType4: [],//监理单位
            deptType5: [],//检测单位
            deptType6: [],//勘察单位
            prjImgs: [],
            attendanceNav: 0,
            attendanceTotal: 0,
            attendanceData: [
                { text: "普通工种", value: 0, id: 0, },
                { text: "特殊工种", value: 0, id: 0, },
                { text: "管理人员", value: 0, id: 0, },
            ],
            deviceNav: 0,
            deviceData: [
                { text: '自有', value: 45 },
                { text: '租赁', value: 55 },
                { text: '分包', value: 65 },
            ],
            costIndex: 0,
            direction: "right",
            costInterval: undefined,
            cityInfo: [],
            cityId: '',
            startDays: 0,
            weathers: [],
            weatherInfo: {},
            projectBuildNode: [],
            maxWidth: 0,
            minWidth: 100,
        }
    },
    mounted() {
        window.detailApp = this;
        this.$store.dispatch('ChangeNav', 2);
        this.$bus.$on('projectChange', debounce(prj => {
            this.selProject = prj;
            this.init();
        }));
        this.selProject = this.$store.getters.selProject;
        this.init();
        this.dpi = this.$dpi();
        window.addEventListener("resize", () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi();
                this.chartKey++;
            }
        });
        this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
        this.$api.weather.getCityInfo().then(d => {
            this.cityInfo = d.data?.city || [];
        });

    },
    methods: {
        showDetailDlg() {
            this.$refs.infoDlg.showDialog({
                prjInfo: this.prjInfo,
                selProject: this.selProject
            });
        },
        init() {
            if (!this.selProject) {
                return;
            }
            this.$api.project.getProjectInfo(this.selProject.id).then(d => {
                this.prjInfo = d.data || {};
                let tmps = this.prjInfo.projectDeptsList || [];
                const func = (t) => {
                    let objs = tmps.filter(it => it.deptType == t);
                    return objs.length > 0 ? objs[0] : null;
                };
                this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
                this.deptType1 = func('建设单位');
                this.deptType2 = func('设计单位');
                this.deptType3 = { deptName: this.prjInfo.disDeptName, leader: this.prjInfo.projectPerson, phone: this.prjInfo.projectPersonPhone };
                this.deptType4 = func("监理单位");
                this.deptType5 = func("检测单位");
                this.deptType6 = func("勘察单位");
                let tmp = this.cityInfo.map(d => { d[18] = Math.abs(d[4] - this.prjInfo.latitude) + Math.abs(d[5] - this.prjInfo.longitude); return d; });
                tmp = tmp.sort((a, b) => a[18] - b[18]);
                this.cityId = tmp.length > 0 && tmp[0].length > 0 ? tmp[0][0] : "";
                if (this.prjInfo.actualOperatingTime) {
                    this.startDays = this.$dt(this.prjInfo.actualOperatingTime).diff(new Date(), "day") * -1;
                } else {
                    this.startDays = 0;
                }
                if (this.cityId) {
                    this.$api.weather.getByCity(this.cityId).then(w => {
                        this.weathers = w.data || [];
                    })
                    this.getWeatherNowInfo();
                }
            });
            this.loadAttendanceData();
            this.loadMilestoneData();
        },
        loadMilestoneData() {
            this.$api.detail.milestoneList({
                pageNum: 1,
                pageSize: 100,
                comId: this.prjInfo.comId,
                projectId: this.prjInfo.id
            }).then(d => {
                this.projectBuildNode = d;
                let itemWidth = this.$dpi() == "1K" ? 200 : this.$dpi() == "2K" ? 300 : 500;
                this.maxWidth = itemWidth * 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 * itemWidth + 100;
            })
        },
        loadAttendanceData() {
            let ajax = this.$api.detail.groupByCraftType;
            let posData = {
                comId: this.prjInfo.comId,
                projectId: this.prjInfo.id
            }
            if (this.attendanceNav == 1) {
                ajax = this.$api.detail.groupByCraftTypeByAttendance;
                //posData.createTime = this.$dt(new Date()).format("YYYY-MM-DD");
                posData.createTime = '2024-10-13';
            }
            ajax(posData).then(d => {
                this.attendanceData = (d.data || []).map(it => {
                    return {
                        text: it.createBy,
                        value: it.id || 0,
                        id: it.craftType
                    }
                });
                let count = 0;
                this.attendanceData.forEach(it => {
                    count += it.value;
                });
                this.attendanceTotal = count;
            });
        },
        getWeatherNowInfo() {
            this.$api.weather.getCityNowInfo(this.cityId).then(cn => {
                this.weatherInfo = cn?.data?.now || {};
                setTimeout(this.getWeatherNowInfo, 1000 * 60 * 5);//5分钟刷新一次
            });
        },
        doAttendanceNav(n) {
            this.attendanceNav = n;
            this.loadAttendanceData();
        },
        doShowAttendanceDetail() {
            this.$refs.attDlg.showDialog({
                prjInfo: this.prjInfo,
                attendanceData: this.attendanceData,
                type: this.attendanceNav
            }
            );
        },
        doDeviceNav(n) {
            this.deviceNav = n;
        },
        costMouseover() {
            clearInterval(this.costInterval);
        },
        costMouseout() {
            this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
        },
        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";
        },
    }
}
</script>

<style lang="less">
.project-detail {
    color: #c2d5f6;

    .dept-info-list {
        height: calc(100% - 30px);
        margin-top: 10px;

        .el-row {
            min-height: 33%;
        }

        .dept-item {
            .dept-title {
                line-height: 30px;
                font-size: 14px;
            }

            .dept-nodata {
                color: #ccc;
                font-size: 12px;
            }

            .dept-info {
                display: flex;

                .dept-img {
                    width: 42px;
                    height: 42px;
                }

                .dept-row {
                    margin-left: 8px;
                    font-size: 12px;
                    line-height: 22px;
                    display: inline-grid;
                    flex-grow: 1;
                    padding-right: 10px;

                    .dept-name {
                        color: #50a2eb;
                    }

                    .dept-leader-phone {
                        color: #ab3715;
                        cursor: pointer;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        .dept-leader {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }

    .device-info {
        .device-title {
            padding: 10px;
        }

        .device-data {
            padding: 30px 0px;

            .survey_content_value {
                .sp-number {
                    font-size: 40px;
                }

                .sp-unit {
                    font-size: 12px;
                }
            }
        }

        .device-data-list {
            display: flex;
            padding: 0px 10%;

            .device-data-item {
                display: inline-flex;
                width: 33%;
                align-items: center;
            }
        }
    }

    .modify-project-amount {
        .modify-content {
            width: 840px;

            .modify-content-overflow {
                width: 2500px;

                .project-amount {
                    .project-amount-bgd {
                        width: 256px;

                        .project-amount-con {
                            .svg-icon {
                                width: 20px;
                                height: 20px;
                                fill: #63c8ff;
                            }

                            .led-number {
                                font-size: 40px;
                            }
                        }
                    }
                }
            }
        }
    }

    .prj-img-list {
        height: calc(100% - 130px);

        .el-carousel {
            height: 100%;

            .el-carousel__arrow {
                width: 50px;
                height: 50px;
                background-color: #192c648a;

                i {
                    font-size: 20px;
                }
            }
        }
    }

    .work-days {
        margin: 20px 0px;
    }

    .weather-list {
        margin-top: 30px;

        .weather-item {
            line-height: 40px;

            .weather-day {
                display: inline-block;
                width: 30%;
            }

            .weather-temp {
                display: inline-block;
                margin-left: 30%;
            }

            .weather-img {
                width: 20px;
            }
        }
    }

    .weather-info {
        margin-top: 60px;

        .el-row {
            margin-top: 30px;
        }

        .weather-info-item {
            display: flex;
            align-items: center;

            .current-value-img {
                width: 60px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;

                .svg-icon {
                    width: 30px;
                    height: 30px;
                    fill: #63c8ff;
                }
            }

            .wi-data {
                margin-left: 10px;
                line-height: 30px;

                .wi-label {
                    font-size: 14px;
                }

                .wi-data-unit {
                    .wi-txt {
                        color: #fff;
                        font-weight: bold;
                        font-size: 16px;
                    }

                    .wi-unit {
                        margin-left: 4px;
                        font-size: 10px;
                    }
                }
            }
        }
    }

    .prj-plan {
        .dangerous-timeline-max {
            width: 850px;
            height: 230px;

            .dangerous-timeline-con {
                width: 200px;
                font-size: 14px;
            }

            .dangerous-text {
                font-size: 14px;
            }

            .dangerous-time-max {
                text-align: center;

                .dangerous-time-nav {
                    display: inline-block;
                }
            }
        }
    }

}

@media (min-width: 1921px) and (max-width: 2560px) {
    .project-detail {
        .prj-info-title {
            font-size: 24px;
        }

        .dept-info-list {
            .dept-item {
                .dept-title {
                    font-size: 18px;
                    line-height: 40px;
                }

                .dept-nodata {
                    font-size: 16px;
                }

                .dept-info {
                    .dept-img {
                        width: 60px;
                        height: 60px;
                    }

                    .dept-row {
                        font-size: 18px;
                        line-height: 32px;
                    }
                }
            }
        }

        .attendance-info-title {
            * {
                font-size: 24px;
            }

        }

        .attendance-tag {
            * {
                font-size: 24px;
            }

            padding-top:40px;

            .survey_content_img {
                background-size: 120px 80px;
                width: 120px;
                height: 120px;

                img {
                    width: 60px;
                    height: 60px;
                }
            }
        }

        .device-info {
            .device-title {
                padding: 10px;

                .survey_title_btn_min {
                    font-size: 20px;
                    height: 40px;
                    width: 150px;
                    line-height: 40px;
                }
            }

            .device-data {
                padding: 70px 0px;

                .survey_content_img {
                    width: 120px;
                    height: 120px;
                    line-height: 120px;
                    background-size: 120px 80px;

                    img {
                        width: 60px;
                        height: 60px;
                    }
                }

                .survey_content_number {
                    font-size: 20px;

                    .survey_content_value {
                        .sp-number {
                            font-size: 60px;
                        }

                        .sp-unit {
                            font-size: 20px;
                        }
                    }
                }
            }

            .device-data-list {

                .device-data-item {
                    font-size: 20px;
                }
            }
        }

        .modify-project-amount {
            .modify-btn {
                img {
                    height: 60px;
                }
            }

            .modify-content {
                width: 1110px;

                .modify-content-overflow {
                    width: 3420px;

                    .project-amount {
                        .project-amount-bgd {
                            width: 350px;
                            height: 130px;

                            .project-amount-con {
                                p {
                                    font-size: 20px;

                                    .svg-icon {
                                        width: 20px;
                                        height: 20px;
                                        fill: #63c8ff;
                                    }
                                }


                                .led-number {
                                    font-size: 50px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .prj-img-list {
            height: calc(100% - 150px);

            .el-carousel {
                height: 100%;

                .el-carousel__arrow {
                    width: 80px;
                    height: 80px;
                    background-color: #192c648a;

                    i {
                        font-size: 30px;
                    }
                }
            }
        }

        .work-info {
            .analyse-text {
                font-size: 24px;
            }

            .analyse-title {
                height: 60px;
            }

            .work-days {
                margin: 20px 0px;
                font-size: 24px;

                .people-number-con {
                    div {
                        width: 40px;
                        height: 60px;
                        line-height: 60px;
                        font-size: 40px;
                    }
                }
            }

            .weather-list {
                margin-top: 50px;

                .weather-item {
                    line-height: 60px;
                    font-size: 24px;

                    .weather-img {
                        width: 30px;
                    }
                }
            }

            .weather-info {
                margin-top: 80px;

                .el-row {
                    margin-top: 60px;
                }

                .weather-info-item {
                    .current-value-img {
                        width: 80px;
                        height: 80px;

                        .svg-icon {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    .wi-data {
                        margin-left: 10px;
                        line-height: 40px;

                        .wi-label {
                            font-size: 20px;
                        }

                        .wi-data-unit {
                            .wi-txt {
                                font-size: 24px;
                            }

                            .wi-unit {
                                margin-left: 4px;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }

        .prj-plan {
            .dangerous-timeline-max {
                width: 1160px;
                height: 340px;


                .dangerous-timeline-con {
                    width: 300px;
                    font-size: 24px;
                }

                .dangerous-text {
                    font-size: 24px;

                }

                .dangerous-time-max {
                    height: 150px;
                    line-height: 50px;

                    .project-expect-state {
                        font-size: 24px;
                        width: 160px;
                        height: 40px;
                        line-height: 40px;

                    }
                }
            }
        }
    }
}

@media (min-width: 2561px) {
    .project-detail {
        .prj-info-title {
            font-size: 32px;
        }

        .dept-info-list {
            .dept-item {
                .dept-title {
                    font-size: 24px;
                    line-height: 40px;
                }

                .dept-nodata {
                    font-size: 18px;
                }

                .dept-info {
                    .dept-img {
                        width: 100px;
                        height: 100px;
                    }

                    .dept-row {
                        font-size: 24px;
                        line-height: 32px;
                    }
                }
            }
        }

        .attendance-info-title {
            * {
                font-size: 36px;
            }

        }

        .attendance-tag {
            * {
                font-size: 36px;
            }

            padding-top:100px;

            .survey_content_img {
                background-size: 150px 100px;
                width: 150px;
                height: 150px;

                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }

        .device-info {
            .device-title {
                padding: 20px;

                .survey_title_btn_min {
                    font-size: 30px;
                    height: 60px;
                    width: 210px;
                    line-height: 60px;
                }
            }

            .device-data {
                padding: 120px 0px;

                .survey_content_img {
                    width: 180px;
                    height: 180px;
                    line-height: 180px;
                    background-size: 180px 120px;

                    img {
                        width: 90px;
                        height: 90px;
                    }
                }

                .survey_content_number {
                    font-size: 30px;

                    .survey_content_value {
                        .sp-number {
                            font-size: 90px;
                        }

                        .sp-unit {
                            font-size: 30px;
                        }
                    }
                }
            }

            .device-data-list {

                .device-data-item {
                    img {
                        width: 40px;
                        height: 40px;
                    }

                    font-size: 30px;
                }
            }
        }

        .modify-project-amount {
            .modify-btn {
                img {
                    height: 90px;
                    margin-top: 10px;
                }
            }

            .modify-content {
                width: 1680px;

                .modify-content-overflow {
                    width: 5220px;

                    .project-amount {
                        .project-amount-bgd {
                            width: 540px;
                            height: 165px;

                            .project-amount-con {
                                p {
                                    font-size: 30px;

                                    .svg-icon {
                                        width: 30px;
                                        height: 30px;
                                    }
                                }

                                div {
                                    font-size: 30px;

                                    .led-number {
                                        font-size: 70px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .prj-img-list {
            height: calc(100% - 190px);

            .el-carousel {
                height: 100%;

                .el-carousel__arrow {
                    width: 120px;
                    height: 120px;
                    background-color: #192c648a;

                    i {
                        font-size: 40px;
                    }
                }
            }
        }

        .work-info {
            .analyse-text {
                font-size: 30px;
            }

            .analyse-title {
                height: 80px;
            }

            .work-days {
                margin: 20px 0px;
                font-size: 32px;

                .people-number-con {
                    div {
                        width: 60px;
                        height: 90px;
                        line-height: 90px;
                        font-size: 50px;
                    }
                }
            }

            .weather-list {
                margin-top: 120px;

                .weather-item {
                    line-height: 100px;
                    font-size: 40px;

                    .weather-img {
                        width: 40px;
                    }
                }
            }

            .weather-info {
                margin-top: 140px;

                .el-row {
                    margin-top: 120px;
                }

                .weather-info-item {
                    .current-value-img {
                        width: 100px;
                        height: 100px;

                        .svg-icon {
                            width: 50px;
                            height: 50px;
                        }
                    }

                    .wi-data {
                        margin-left: 10px;
                        line-height: 50px;

                        .wi-label {
                            font-size: 30px;
                        }

                        .wi-data-unit {
                            .wi-txt {
                                font-size: 36px;
                            }

                            .wi-unit {
                                margin-left: 4px;
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }

        .prj-plan {
            .dangerous-timeline-max {
                width: 1790px;
                height: 570px;

                .strip-max {
                    top: 136px;
                }

                .dangerous-timeline-con {
                    width: 500px;
                    font-size: 42px;

                }

                .dangerous-text {
                    font-size: 42px;
                    height: 100px;
                    line-height: 40px;
                }

                .dangerous-time-max {
                    height: 300px;
                    line-height: 100px;

                    .project-expect-state {
                        font-size: 36px;
                        width: 240px;
                        height: 60px;
                        line-height: 60px;

                    }
                }
            }
        }
    }
}
</style>