MZbigScreen/src/pages/PatrolmanStatistics.vue

<template>
    <div class="home">
        <timeing></timeing>
        <p class="backtitle">巡访员信息统计</p>
        <div class="return-btn" @click="goHome">返回首页</div>
        <div class="select-div">
            <span class="address-title">省：</span>
            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择" @change="provinceChange">
                <el-option
                        v-for="item in provinces"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled" >
                </el-option>
            </el-select>
            <span class="address-title">地市：</span>
            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择" @change="cityChange">
                <el-option
                        v-for="item in citys"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
            <span class="address-title">县(市区)：</span>
            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择" @change="areaChange">
                <el-option
                        v-for="item in areas"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
            <span v-if="!isZhankai" class="bj-zhankai" @click="zhankai"></span>
            <span v-else class="bj-shouqi" @click="guanbi"></span>
            <span class="bj-qeuren" @click="queren"></span>
            <span v-if="isZhankai" class="address-title">乡镇(街道)：</span>
            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择" @change="countyChange">
                <el-option
                        v-for="item in countys"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
            <span v-if="isZhankai" class="address-title">村(居)民委员会：</span>
            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
                <el-option
                        v-for="item in villages"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
        </div>
        <div class="header">
            <!--  图1     -->
            <div class="tu-one">
                <!--        <com1 :dataArr="dataArr1"></com1>-->
                <div class="number">{{score1}}</div>
                <div class="small-title">采集积分（分）</div>
            </div>
            <div class="tu-two">
                <div class="number">{{score2}}</div>
                <div class="small-title">累计积分（分）</div>
            </div>
            <div class="tu-three">
                <p class="title1">巡访员积分排行TOP10</p>
                <div class="scorll-div scroll">
                    <ul class="item " style="height:100%">
                        <li v-for="(item, index) in listData" :key="index">
                            <el-row
                                    style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff"
                                    type="flex"
                                    justify="center"
                                    align="middle"
                                    :class="{'sc0': index%2==0}"
                            >
                                <el-col :span="2" class="col4">
                                    <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img"
                                              :src="scrollTextisColor(index)"></el-image>
                                    <div v-else class="top10-number">{{index+1}}</div>
                                </el-col>
                                <el-col :span="5">{{item.userName}}</el-col>
                                <el-col :span="12">{{item.address}}</el-col>
                                <el-col :span="5">{{item.score}}分</el-col>
                            </el-row>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tu-four">
                <p class="title1">巡访员性别分布统计</p>
                <com1 ref="c1"></com1>
            </div>
            <div class="tu-five">
                <p class="title1">巡访员认证数据统计</p>
                <com2 ref="c2"></com2>
            </div>
            <div class="tu-six">
                <p class="title1">巡访员职务分布统计</p>
                <com3 ref="c3"></com3>
            </div>
            <div class="tu-seven">
                <p class="title1">巡访员巡访方式统计</p>
                <com4></com4>
            </div>
            <div class="tu-thirteen">
                <p class="title1">核心巡访数据统计</p>
            </div>
        </div>
        <div class="foot">
            <div class="tu-eight">
                <p class="title1">老年人健康状况</p>
                <com5 ref='c5'></com5>
            </div>
            <div class="tu-nine">
                <p class="title1">老年人精神状态</p>
                <com6 ref="c6"></com6>
            </div>
            <div class="tu-ten">
                <p class="title1">老年人安全情况</p>
                <com7 ref="c7"></com7>
            </div>
            <div class="tu-eleven">
                <p class="title1">老年人卫生环境</p>
                <com8 ref="c8"></com8>
            </div>
            <div class="tu-twelve">
                <p class="title1">老年人居住环境</p>
                <com9 ref="c9"></com9>
            </div>
        </div>

    </div>
</template>
<script>
    import com1 from "../components/PatrolmanStatistics/1.vue";
    import com2 from "../components/PatrolmanStatistics/2.vue";
    import com3 from "../components/PatrolmanStatistics/3.vue";
    import com4 from "../components/PatrolmanStatistics/4.vue";
    import com5 from "../components/PatrolmanStatistics/5.vue";
    import com6 from "../components/PatrolmanStatistics/6.vue";
    import com7 from "../components/PatrolmanStatistics/7.vue";
    import com8 from "../components/PatrolmanStatistics/8.vue";
    import com9 from "../components/PatrolmanStatistics/9.vue";

    import storageUtil from '../util/storageUtil'
    import { findDept, oldPersonSelectUserValue, oldPersonSelectDeptValue } from '../api'

    export default {
        name: "Home",
        components: {com1, com2, com3, com4, com5, com6, com7, com8, com9},
        data() {
            return {
                provinces: [],   // 省份
                citys: [], // 市
                areas: [],   // 县
                countys: [],  // 乡
                villages: [],  // 村
                dept1: '',
                dept2: '',
                dept3: '',
                dept4: '',
                dept5: '',
                isZhankai: false,  //是够展开和收起
                listData: [],
                score1: 0,
                score2: 0
            };
        },
        async mounted() {
            this.provinces = await this.findDept({'level': '1'});
            this.listData = await oldPersonSelectUserValue({}, 'POST');
            const result = await oldPersonSelectDeptValue({}, 'POST');
            this.score1 = result.infoValue;
            this.score2 = result.totalValue;
        },
        methods: {
            //获取地区
            async findDept(data) {
                const result = await findDept(data, 'POST');
                return result;
            },
            async provinceChange(val) {
                this.citys = await this.findDept({ fid: val });
                this.dept2 = '';
                this.dept3 = '';
                this.dept4 = '';
                this.dept5 = '';
            },
            async cityChange(val) {
                this.areas = await this.findDept({ fid: val });
                this.dept3 = '';
                this.dept4 = '';
                this.dept5 = '';
            },
            async areaChange(val) {
                this.countys = await this.findDept({ fid: val });
                this.dept4 = '';
                this.dept5 = '';
            },
            async countyChange(val) {
                this.villages = await this.findDept({ fid: val });
                this.dept5 = '';
            },
            //返回首页
            goHome() {
                storageUtil.save('dept-array', '');
                this.$router.push({ path: '/' });
            },
            zhankai() {
                console.log("111")
                this.isZhankai = !this.isZhankai
            },
            guanbi() {
                console.log("222")
                this.isZhankai = !this.isZhankai
            },
            queren() {
                let arr = new Array();
                if(this.dept1 != '') {
                    arr.push(this.dept1);
                }
                if(this.dept2 != '') {
                    arr.push(this.dept1);
                }
                if(this.dept3 != '') {
                    arr.push(this.dept1);
                }
                if(this.dept4 != '') {
                    arr.push(this.dept1);
                }
                if(this.dept5 != '') {
                    arr.push(this.dept1);
                }
                storageUtil.save('dept-array', arr);

                this.$refs.c1.draw();
                this.$refs.c2.draw();
                this.$refs.c3.draw();
                this.$refs.c5.draw();
                this.$refs.c6.draw();
                this.$refs.c7.draw();
                this.$refs.c8.draw();
                this.$refs.c9.draw();
            },
            // 滚动颜色
            scrollTextisColor: function (i) {
                if (i == 0) {
                    return require("../assets/PatrolmanStatistics/top1.png")
                } else if (i == 1) {
                    return require("../assets/PatrolmanStatistics/top2.png")
                } else if (i == 2) {
                    return require("../assets/PatrolmanStatistics/top3.png")
                }
            }
        },
        computed: {}
    };
</script>
<style scoped lang="less" type="text/css">
    .backtitle {
        background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 32px;
        font-weight: 900;
        font-weight: 900;
        position: absolute;
        left: 44%;
        top: 1%;
    }

    .select-div {
        width: 34%;
        /*height: 4%;*/
        position: absolute;
        top: 4.5%;
        left: 2%;
        z-index: 999;
        background: #01135b;
    }

    .return-btn {
        /*background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);*/
        background: url("../assets/oldStatistics/fanhuishouye.png") no-repeat;
        background-size: 100% 100%;
        width: 70px;
        line-height: 40px;
        height: 39px;
        text-align: center;
        font-weight: 900;
        position: absolute;
        right: 2%;
        top: 5%;
        padding: 0 10px;
        color: #00afde;
        z-index: 9999;
    }

    .return-btn:hover {
        cursor: pointer;
    }

    .home {
        height: 100%;
        position: fixed;
        width: 100%;
        background: url("../assets/PatrolmanStatistics/bj.png");
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        width: 100%;
        height: 67%;
        position: relative;
        top: 0;
        left: 0;
    }

    .tu-one {
        width: 18%;
        height: 17%;
        position: absolute;
        top: 15%;
        left: 2%;
        text-align: center;
    }

    .tu-two {
        width: 18%;
        height: 17%;
        position: absolute;
        top: 35%;
        left: 2%;
        text-align: center;
    }

    .tu-three {
        width: 23.3%;
        height: 37%;
        position: absolute;
        top: 15%;
        left: 21.5%;
        text-align: center;
    }

    .tu-four {
        width: 23%;
        height: 37%;
        position: absolute;
        top: 15%;
        left: 46%;
        text-align: center;
    }

    .tu-five {
        width: 26%;
        height: 36%;
        position: absolute;
        top: 55%;
        left: 2%;
        text-align: center;
    }

    .tu-six {
        width: 40%;
        height: 36%;
        position: absolute;
        top: 55%;
        left: 29%;
        text-align: center;
    }

    .tu-seven {
        width: 27%;
        height: 76%;
        position: absolute;
        top: 15%;
        left: 70.5%;
        text-align: center;
    }

    .tu-eight {
        width: 18%;
        height: 85%;
        position: absolute;
        top: 7%;
        left: 3%;
        text-align: center;
    }

    .tu-nine {
        width: 18%;
        height: 85%;
        position: absolute;
        top: 7%;
        left: 22%;
        text-align: center;
    }

    .tu-ten {
        width: 18%;
        height: 85%;
        position: absolute;
        top: 7%;
        left: 41%;
        text-align: center;
    }

    .tu-eleven {
        width: 18%;
        height: 85%;
        position: absolute;
        top: 7%;
        left: 60%;
        text-align: center;
    }

    .tu-twelve {
        width: 18%;
        height: 85%;
        position: absolute;
        top: 7%;
        left: 79%;
        text-align: center;
    }

    .tu-thirteen {
        width: 100%;
        height: 5%;
        position: absolute;
        bottom: 0%;
        left: 3%;
        text-align: center;
    }

    .number {
        font-size: 55px;
        font-weight: 400;
        color: rgba(248, 255, 63, 1);
        font-family: LCD;
        letter-spacing: 20px
    }

    .small-title {
        color: white;
    }

    .title1 {
        font-size: 16px;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

    }

    .scorll-div {
        height: 82%;
        width: 100%;
        margin-top: 4%;
        overflow-y: auto;
        overflow-x: hidden;

    }

    .top10-number {
        color: #ffd821;
    }

    .item {
        font-size: 16px;
    }

    .foot {
        width: 100%;
        height: 32%;
        position: relative;
    }

    .scroll::-webkit-scrollbar {
        background-color: #374991;
        height: 8px;
        width: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-track {
        opacity: 0;
        transition: opacity 0.12s ease-out;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: #1c95ce;
        transition: background-color 0.3s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .address-title {
        color: #00d8fe;
    }

    .input {
        width: 15.5%;
        margin-right: 1%;
    }

    .input1 {
        width: 20%;
        margin-right: 1%;
    }

    .bj-zhankai {
        display: inline-block;
        background: url("../assets/PatrolmanStatistics/zhankai.png") no-repeat;
        background-size: 90% 90%;
        width: 60px;
        height: 37px;
        margin-right: 1%;
        vertical-align: bottom;
    }

    .bj-zhankai:hover {
        cursor: pointer;
    }

    .bj-shouqi {
        display: inline-block;
        background: url("../assets/PatrolmanStatistics/shouqi.png") no-repeat;
        background-size: 90% 90%;
        width: 60px;
        height: 37px;
        margin-right: 1%;
        vertical-align: bottom;
    }

    .bj-shouqi:hover {
        cursor: pointer;
    }

    .bj-qeuren {
        display: inline-block;
        background: url("../assets/PatrolmanStatistics/queren.png") no-repeat;
        background-size: 90% 90%;
        width: 69px;
        height: 37px;
        vertical-align: bottom;
    }

    .bj-qeuren:hover {
        cursor: pointer;
    }

    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner {
        color: #00d7ff;
        text-align: center;
        background: rgba(254, 196, 0, 0);
        border-radius: 10px;
        border: 1px solid;
        border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;
        box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);

    }

    /deep/ .el-select .el-input .el-select__caret {
        color: #00d7ff;
    }

    /deep/ .el-select-dropdown__item.hover,
    /deep/ .el-select-dropdown__item:hover {
        color: #409eff;
    }
</style>