jili2-screen/src/apps/home/components/smodule/smodule50.vue

<template>
    <div class="module-main">
        <div class="module-box">
            <div v-if="type == 1" class="module-one">
                <div class="module-two">
                    <div class="addr-nums">
                        <img src="../../images/smodule/blue-map.png" alt="">
                        <div class="nums">{{count.addrCount}}</div>
                        <div class="title">地点数</div>
                    </div>
                    <div class="user-nums">
                        <img src="../../images/smodule/golden-map.png" alt="">
                        <div class="nums">{{count.userCount}}</div>
                        <div class="title">员工数</div>
                    </div>
                    <div class="plan-nums">
                        <img src="../../images/smodule/blue-map.png" alt="">
                        <div class="nums">{{count.taskCount}}</div>
                        <div class="title">计划数</div>
                    </div>
                </div>
                <div class="module-there">
                    <img src="../../images/smodule/track.png" alt="">
                </div>
                <!-- <div class="module-there-title">进入立体大屏查看任务轨迹></div> -->
            </div>
            <div v-if="type == 2" class="roadmap module-one">
                <div v-if="record" class="title">
                    <span class="name">巡检任务名称：{{record.task}}</span>
                    <span class="user">巡检人员：{{record.user}}</span>
                    <span class="location">最新位置：{{record.addr}}</span>
                </div>
                <div class="roadmap-content">
                    <template v-for="(item,index) in addrList">
                        <div v-if="index==0" :key="index" class="content-box floatLeft right">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="index%4==3 && parseInt(index/4)%2==0" :key="index" class="content-box floatLeft left bottom">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="index > 0 && index%4 == 0 && parseInt(index/4)%2==1" :key="index" class="content-box floatRight left top">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <!-- <div v-if="(index%4 == 1 || index%4 == 2) && parseInt(index/4)%2==0" :key="index" class="content-box floatLeft left right">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div class="center">
                                <div class="content-box-title">住院楼1楼左侧电梯</div>
                                <div class="content-box-time">上次时间：12:21</div>
                                <div class="content-box-nums">检查次数：4</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div> -->
                        <div v-if="(index%4 == 1 || index%4 == 2) && parseInt(index/4)%2==1" :key="index" class="content-box floatRight left right">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="(index%4==3) && (parseInt(index/4)%2==1)" :key="index" class="content-box floatRight right bottom">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="index > 0 && index%4 == 0 && parseInt(index/4)%2==0" :key="index" class="content-box floatLeft top right">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="(index+1==addrList.length) && index == 0" :key="index" class="content-box floatLeft">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="(index+1==addrList.length) && ((index%4==1||index%4==2||index%4==3) && parseInt(index/4)%2==0)" :key="index" class="content-box floatLeft left">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="(index+1==addrList.length) && ((index%4==1||index%4==2||index%4==3) && parseInt(index/4)%2==1)" :key="index" class="content-box floatRight right">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                        <div v-if="index > 3 && index%4 == 0" :key="index" class="content-box floatLeft top">
                            <div class="top">
                                <div class="one" />
                            </div>
                            <div class="left">
                                <div class="two" />
                            </div>
                            <div v-if="item.active == 0" class="center">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div v-if="item.active == 1" class="center active">
                                <div class="content-box-title">{{item.title}}</div>
                                <div class="content-box-time">上次时间：{{item.time}}</div>
                                <div class="content-box-nums">检查次数：{{item.nums}}</div>
                            </div>
                            <div class="right">
                                <div class="two" />
                            </div>
                            <div class="bottom">
                                <div class="one" />
                            </div>
                        </div>
                    </template>

                </div>
            </div>
        </div>
        <div class="module-bottom">
            <div class="data-overview" :class="[{active:active==1},{cur:cur==1}]"  @click="dataClick('0')">巡检数据总览</div>
            <div class="task-overview" :class="[{active:active==0},{cur:cur==0}]" @click="taskClick('0')">巡检任务总览</div>
        </div>
    </div>

</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import api from '../../api';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
})
export default class Echarts extends Vue {
    active = 1;

    cur = 0;

    type = 1;

    count = [];

    record = [];

    addrList = [];

    created() {
        this.getPatrolNums();
        this.getPatrolPath();
        setInterval(() => {
            this.getPatrolNums();
            this.getPatrolPath();
        }, 5000 * 60);
    }

    getPatrolNums() {
        api.getPatrolNums({ mode: 4 }).then((res) => {
            this.count = res.data;
        }).catch(() => {}).finally(() => {
        });
    }

    getPatrolPath() {
        api.getPatrolPath({ mode: 4 }).then((res) => {
            this.record = res.data.record;
            this.addrList = res.data.addrList;
        }).catch(() => {}).finally(() => {
        });
    }

    dataClick(e) {
        if (e === 1) {
            this.active = 0;
            this.cur = 1;
        } else {
            this.active = 1;
            this.cur = 0;
        }
        this.type = 1;
    }

    taskClick(e) {
        if (e === 1) {
            this.cur = 0;
            this.active = 1;
        } else {
            this.cur = 1;
            this.active = 0;
        }
        this.type = 2;
    }
}
</script>

<style scoped lang="scss">
    .module-one{
        width: 96.6%;
        height: 92.1%;
        background-image: url(../../images/smodule/blue-boder.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 2.1% 1.6% 3.1% 1.6%;
        padding-top: 2.7%;
    }
    .module-one .module-two{
        width: 78.8%;
        height: 36.7%;
        line-height: 36.7%;
        background-image: url(../../images/smodule/lighting.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 10.5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .module-one .module-two .addr-nums{
        width: 20.5%;
        height: auto;
        position: relative;
    }
    .module-one .module-two .addr-nums img{
        width: 100%;
    }
    .module-one .module-two .addr-nums .nums{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #02AAFA;
        position: absolute;
        top: 40%;
    }
    .module-one .module-two .addr-nums .title{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #02AAFA;
        position: absolute;
        top: 59%;
    }
    .module-one .module-two .user-nums{
        width: 23%;
        height: auto;
        position: relative;
    }
    .module-one .module-two .user-nums img{
        width: 100%;
    }
    .module-one .module-two .user-nums .nums{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 34px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #F8EA9A;
        position: absolute;
        top: 40%;
    }
    .module-one .module-two .user-nums .title{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #F8EA9A;
        position: absolute;
        top: 59%;
    }
    .module-one .module-two .plan-nums{
        width: 20.5%;
        height: auto;
        position: relative;
    }
    .module-one .module-two .plan-nums img{
        width: 100%;
    }
    .module-one .module-two .plan-nums .nums{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #02AAFA;
        position: absolute;
        top: 40%;
    }
    .module-one .module-two .plan-nums .title{
        width: 100%;
        height: 23px;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #02AAFA;
        position: absolute;
        top: 59%;
    }
    .module-there{
        width: 100%;
        height: 32.1%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 6.9%;
    }
    .module-there .img{
        width: 100%;
        height: auto;
    }
    .module-there img{
        width: 42.5%;
    }
    .module-there-title{
        width: 100%;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        margin-top: 1%;
    }
    .module-bottom{
        width: 100%;
        height: 7.7%;
        line-height: 7.7%;
        position:absolute;
        bottom: -0.9%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .module-bottom .data-overview{
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .module-bottom .active{
        width: 17%;
        height: 100% !important;
        background-image: url(../../images/smodule/checked-bright.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .module-bottom .task-overview{
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 1.6%;
    }
    .module-bottom .cur{
        width: 13.5%;
        height: 68.9%;
        background: rgba(2, 170, 250, 0);
        border: 2px solid #00A1EE;
    }
    .roadmap .title{
        width: 88%;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        padding-left: 6%;
        padding-right: 6%;
        margin-top: 6%;
    }
    .roadmap .title .name{
        text-align: left;
    }
    .roadmap .title .user{
        text-align: center;
        margin-left: 10%;
    }
    .roadmap .title .location{
        float: right;
        text-align: right;
    }
    .roadmap .roadmap-content{
        width: 88%;
        height: 82%;
        padding-left: 6%;
        padding-right: 6%;
        overflow-y:auto;
    }
    .roadmap .content-box{
        width: 25%;
        height: 190px;
        display: inline-block;
    }
    .roadmap .floatLeft{
        float: left;
    }
    .roadmap .floatRight{
        float: right;
    }
    .roadmap .roadmap-content .top .top{
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: center;
    }
    .roadmap .roadmap-content .top .top .one{
        width: 2px;
        height: 100%;
        background: #5F87FF;
    }
    .roadmap .roadmap-content .left .left{
        width: 9.4%;
        height: 70%;
        position:relative;
        display: inline-block;
        float: left;
    }
    .roadmap .roadmap-content .left .left .two{
        width: 100%;
        height: 2px;
        background: #5F87FF;
        text-align: center;
        position: absolute;
        bottom:50%;
        margin-bottom:-h/2;
    }
    .roadmap .content-box .center{
        width: 80%;
        height: 70%;
        background: rgba(67, 98, 255, 0);
        border: 1px solid #5F87FF;
        border-radius: 4px;
        display: inline-block;
        float: left;
        overflow: hidden;
    }
    .roadmap .roadmap-content .right .right{
        width: 9.4%;
        height: 70%;
        position:relative;
        display: inline-block;
        float: right;
    }
    .roadmap .roadmap-content .right .right .two{
        width: 100%;
        height: 2px;
        background: #5F87FF;
        text-align: center;
        position: absolute;
        bottom:50%;
        margin-bottom:-h/2;
    }
    .roadmap .roadmap-content .bottom .bottom{
        width: 100%;
        height: 15%;
        /* position:relative;
        display: inline-block; */
        display: flex;
        justify-content: center;
    }
    .roadmap .roadmap-content .bottom .bottom .one{
        width: 2px;
        height: 100%;
        background: #5F87FF;
        /* position: absolute;
        left:50%;
        margin-left:-h/2; */
    }
    .roadmap .roadmap-content .content-box .active{
        background: rgba(67, 98, 255, 0.3);
    }
    .roadmap .roadmap-content .content-box .center .content-box-title{
        width: 100%;
        font-size: 16px;
        margin-top: 10%;
        margin-left: 5%;
        overflow: hidden;
    }
    .roadmap .roadmap-content .content-box .center .content-box-time{
        width: 100%;
        font-size: 16px;
        margin-top: 15%;
        margin-left: 5%;
        overflow: hidden;
    }
    .roadmap .roadmap-content .content-box .center .content-box-nums{
        width: 100%;
        font-size: 16px;
        margin-top: 3%;
        margin-left: 5%;
        overflow: hidden;
    }
    .roadmap .roadmap-content .content-box .top,.bottom{
        width: 100%;
        height: 15%;
    }
    .roadmap .roadmap-content .content-box .left,.right{
        width: 9.4%;
        height: 70%;
        position:relative;
        display: inline-block;
        float: left;
    }
</style>