jhbigscreen/src/pages/progress/indexDlg3.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="progress-dlg3" :class="'font-size-' + fontSize">
        <template slot="title">
            <div style="display: flex; align-items: center;justify-content: space-between;">
                <div style="font-size: 24px;font-weight: bold;">项目形象进度</div>
                <div>
                    <div class="head-title-select" @mouseleave="hideScreenUlSel2" v-if="localStorage2">
                        <div class="head-select">
                            <input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
                        </div>
                        <el-collapse-transition>
                            <ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
                                <li v-for="item in prjs" @click="setScreenLiSel2(item)" :title="item.projectName">{{
                                    item.projectName }}
                                </li>
                            </ul>
                        </el-collapse-transition>
                    </div>
                </div>
            </div>

        </template>
        <div class="font-size-tools">
            <i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize==2?'active':''">
                <svg class="icon  svg-icon" 
                style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                <path
                    d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                    fill="#fff" p-id="3687"></path>
                </svg>    
            </i>
            <i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize==1?'active':''">
            <svg class="icon  svg-icon" 
                style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                <path
                    d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                    fill="#fff" p-id="3687"></path>
            </svg>
            </i>
            <i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize==0?'active':''">
                <svg class="icon  svg-icon" 
                style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                <path
                    d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                    fill="#fff" p-id="3687"></path>
            </svg>
            </i>
        </div>
        <div class="modify-btn btn-left">
            <svg class="my-svg-icon-aaa" @click="modifyLeftBtn"
                style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4967">
                <path
                    d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
                    p-id="4968"></path>
            </svg>
        </div>
        <div class="modify-btn btn-right">
            <svg class="my-svg-icon-aaa" @click="modifyRightBtn"
                style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4997">
                <path
                    d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                    p-id="4998"></path>
            </svg>
        </div>
        <div style="display: block;height: 782px;">
        <div class="prj-info-list" v-if="scheduleInfo && JSON.stringify(scheduleInfo) != '{}'">
            <div class="col-1" style="width:500px;padding-top:12px;display: inline-block;margin-top: 120px;">
                <el-carousel height="500px" v-if="scheduleInfo && scheduleInfo.images && scheduleInfo.images.length > 0">
                    <el-carousel-item v-for="item in scheduleInfo.images" :key="item">
                        <div style="width: 100%;display: flex;align-items: center;justify-content: center;height: 500px;">
                            <img :src="$apiPath + item" style="width:100%">
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <div v-else style="text-align: center;margin-top: 140px;">
                    <img src="images/nodata.png" style="width: 240px;">
                    <div style="text-align: center;">暂无图片</div>
                </div>
            </div>
            <div class="col-2 scroll"
                style="flex-grow: 1;max-height: 750px;min-height:750px;overflow: auto;width: calc(100% - 504px);margin-top:8px;display: inline-flex;align-items: center;">
                <div>
                <template v-if="scheduleInfo.plannedNode">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">计划节点</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.plannedNode }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.actualNode">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">实际节点</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.actualNode }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.purchaseProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">融资、招采进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.purchaseProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.designProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">报建、设计进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.designProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.constructionProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">施工进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.constructionProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.acceptanceProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">验收进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.acceptanceProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.planForNextWeek">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">下周计划</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.planForNextWeek }}</div>
                    </div>
                </template>
                </div>
            </div>
        </div>
        <div v-else style="text-align: center;padding-top: 150px;min-height: 500px;">
            <img src="images/nodata.png" style="width: 240px;">
            <div style="text-align: center;">暂无数据</div>
        </div>
        </div>
    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
import { TimeSelect } from 'element-ui';
export default {
    components: {
        MyDialog,
    },
    name: 'JhbigscreenIndexDlg1',

    data() {
        return {
            fontSize: 0,
            dept2: '',
            show: false,
            scheduleInfo: {},
            localStorage2: {},
            showSel2: false,
            prjs: []
        };
    },

    mounted() {
        // let objs = window.jhcaches?.progressProjects
        // if (objs && objs.length > 0) {
        //     this.prjs = objs;
        //     return;
        // }
        // this.$api.project.getProgressProjects().then(d => {
        //     this.prjs = d.data || [];
        //     window.jhcaches.progressProjects = this.prjs;
        // });
    },

    methods: {
        findItem() {
            let tmps = this.prjs.filter(d => d.projectName == this.dept2);
            if (tmps.length > 0) {
                return tmps[0];
            }
            return null;
        },
        modifyLeftBtn() {
            let item = this.findItem();
            let idx = 0;
            if (item) {
                idx = this.prjs.indexOf(item);
                if (idx > 0) {
                    idx--;
                } else {
                    idx = this.prjs.length - 1;
                }


            } else {
                idx = 0;
            }
            this.setScreenLiSel2(this.prjs[idx]);
        },
        modifyRightBtn() {
            let item = this.findItem();
            let idx = 0;
            if (item) {
                idx = this.prjs.indexOf(item);
                if (idx < this.prjs.length - 2) {
                    idx++;
                } else {
                    idx = 0;
                }

            } else {
                idx = 0;
            }
            this.setScreenLiSel2(this.prjs[idx]);
        },
        showScreenUlSel2() {
            this.showSel2 = true
        },
        hideScreenUlSel2() {
            this.showSel2 = false
        },
        showDialog(scheduleInfo, prjs,dept) {
            //this.$api.project.getProgressProjects(dept.id).then(d => {   
                //this.prjs = d.data || [];
                this.prjs=(prjs||[]).filter(d=>+d.progressVisible==0);                
                this.scheduleInfo = scheduleInfo;
                this.localStorage2 = JSON.parse(localStorage.getItem("data2"))
                this.dept2 = this.localStorage2.text;
                this.show = true
            //});
        },
        setScreenLiSel2(item) {
            this.dept2 = item.projectName
            this.$api.schedule.projectConstructionProgress(item.id).then(d => {
                let obj = d?.data || {};
                if (obj.image) {
                    obj.images = obj.image.split(",").filter(d => d);
                }
                this.scheduleInfo = obj;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
<style lang="less">
.my-dialog.progress-dlg3 {
    .popup-project-introduction-min {
        transform: translateY(100px);
    }

    &.font-size-2 {
        .popup-project-introduction-details {
            .col-2 {
                font-size: 32px;
                line-height: 64px;

                .div-text {
                    line-height: 64px;
                }
            }
        }
    }

    &.font-size-1 {
        .popup-project-introduction-details {
            .col-2 {
                font-size: 24px;
                line-height: 48px;

                .div-text {
                    line-height: 48px;
                }
            }
        }
    }

    .font-size-tools {
        position: absolute;
        top: 18px;
        right: 400px;
    }

    .popup-project-introduction-details {
        padding: 0px;

        &:hover {
            .modify-btn {
                display: flex;
            }
        }

        .quality-table {
            padding: 0px;

            .prj-info-list {
                padding: 0px;
            }
        }

        .modify-btn {
            display: none;
            position: absolute;
            top: 450px;
            z-index: 100;
            cursor: pointer;
            padding: 0px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);

                svg {
                    * {
                        fill: #fff;
                    }
                }
            }

            &.btn-right {
                right: 20px;
            }

            &.btn-left {
                left: 20px;
            }
        }

        .col-2 {
            line-height: 30px;

            .div-text {
                line-height: 30px;
            }
        }
    }

    .head-title-select {
        width: 300px;
        padding-top: 0px;
    }
}</style>