v3-lab-xcx/pages_manage/plan/planList.vue

<template>
    <view id="planList">
        <view class="top-picker-max-box">
            <view class="top-picker-box">
                <picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
                    <view class="picker-view">
                        <view>{{!facultyIndex?'学院':facultyArray[facultyIndex]}}</view>
                        <img class="picker-img" src="@/images/basicsModules/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
            <view class="top-picker-box">
                <picker @change="subjectChange" :value="subjectIndex" :range="subjectArray">
                    <view class="picker-view">
                        <view>{{!subjectIndex?'分类':subjectArray[subjectIndex]}}</view>
                        <img class="picker-img" src="@/images/basicsModules/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
            <view class="top-picker-box">
                <picker @change="levelChange" :value="levelIndex" :range="levelArray">
                    <view class="picker-view">
                        <view>{{!levelIndex?'分级':levelArray[levelIndex]}}</view>
                        <img class="picker-img" src="@/images/basicsModules/icon_06.png" alt="">
                    </view>
                </picker>
            </view>
        </view>
        <view class="time-max-box">
            <view class="title-box">风险时段选择：</view>
            <view class="left-time-box">
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="startTimeChange">
                    <view class="left-time-min-box">{{startTime}}</view>
                </picker>
            </view>
            <view class="center-box">~</view>
            <view class="right-time-box">
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="endTimeChange">
                    <view class="left-time-min-box">{{endTime}}</view>
                </picker>
            </view>
        </view>
        <scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
            <view class="for-box" v-for="(item,index) in infoList" :key="index" @click="getSubByRiskPlanDetail(item)">
                <view class="title-box">
					<view :style="'background:'+item.subDiyVo.fiedColor+';'">{{item.subDiyVo.levelName}}</view>
                    <view>{{item.subDiyVo.name}}</view>
                </view>
                <view class="address-box"><span>{{item.subDiyVo.typeName}}</span>{{item.subDiyVo.deptName}}</view>
                <view class="address-box-two">
                    <img src="@/images/basicsModules/icon_14.png">
                    <view>{{item.subDiyVo.subAddrrStr}}</view>
                </view>
                <view class="plan-name-box">
                    <view class="plan-left-box">
                        <view>{{item.riskPlanAbnormalLogVo.riskPlanName}}</view>
                        <view>执行时间：{{item.riskPlanAbnormalLogVo.createTime}}</view>
                    </view>
                    <img src="@/images/basicsModules/icon_04.png">
                </view>
            </view>
            <img class="null-img" v-if="!infoList[0]" src="@/images/basicsModules/null-data-1.png">
        </scroll-view>
    </view>
</template>

<script>
    import { listDepartments,subject_class,getSubByRiskPlan,getSubByRiskPlanDetail,classifiedListAll } from '@/api/apiDemo/index.js'
    export default {
        name: "planList",
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                infoList:[],
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                },
                //院系选择器数据
                facultyList:[],
                facultyArray:[],
                facultyIndex:0,
                //学科选择器数据
                subjectList:[],
                subjectArray:[],
                subjectIndex:0,
                //级别选择器数据
                levelList:[],
                levelArray:[],
                levelIndex:0,
                //时间选择器
                startTime: "开始时间",
                startTimestamp: 0,
                endTime: "结束时间",
                endTimestamp: 0,
            }
        },
        onLoad(){
            this.listDepartments();
            this.subject_class();
        },
        onShow(){
			this.classifiedListAll();
            this.clearData();
            this.getList();
        },
        methods:{
            async getSubByRiskPlanDetail(item){
                const {data} = await getSubByRiskPlanDetail(item.riskPlanAbnormalLogVo.id);
                if(data.code == 200){
                    let obj = data.rows[0];
                    obj.subClassVO = item.subDiyVo.subClassVO;
                    obj.name = item.subDiyVo.name;
                    obj.subTypeLable = item.subDiyVo.subTypeLable;
                    obj.deptName = item.subDiyVo.deptName;
                    obj.subAddrrStr = item.subDiyVo.subAddrrStr;
                    uni.navigateTo({
                        url: '/pages_manage/workbench/plan/planInfo?item='+encodeURIComponent(JSON.stringify(obj))
                    });
                }
            },
            //去详情页
            goPlanInfo(item){
                uni.navigateTo({
                    url: '/pages_manage/workbench/plan/planInfo',//预案执行记录
                });
            },
            //滚动选择器
            facultyChange: function(e) {
                if(this.facultyArray[0]){
                    this.facultyIndex = parseInt(e.target.value);
                    console.log("e.target.value",e.target.value)
                    console.log("this.facultyIndex",this.facultyIndex)
                    this.clearData();
                    this.getList();
                }
            },
            subjectChange: function(e) {
                if(this.subjectArray[0]){
                    this.subjectIndex = parseInt(e.target.value);
                    this.clearData();
                    this.getList();
                }
            },
            levelChange: function(e) {
                if(this.levelArray[0]){
                    this.levelIndex = parseInt(e.target.value);
                    this.clearData();
                    this.getList();
                }
            },
            //时间选择器
            startTimeChange: function(e) {
                let timestamp = new Date(e.target.value).getTime();
                if(this.endTimestamp == 0){
                    this.startTime = e.target.value
                    this.startTimestamp = new Date(e.target.value).getTime();
                    this.clearData();
                    this.getList();
                }else{
                    if(timestamp<=this.endTimestamp){
                        this.startTime = e.target.value
                        this.startTimestamp = new Date(e.target.value).getTime();
                        this.clearData();
                        this.getList();
                    }else{
                        uni.showToast({
                            title: '开始时间不能大于结束时间',
                            icon:"none",
                            mask:true,
                            duration: 2000
                        });
                    }
                }
            },
            endTimeChange: function(e) {
                let timestamp = new Date(e.target.value).getTime();
                if(this.startTimestamp == 0){
                    this.endTime = e.target.value
                    this.endTimestamp = new Date(e.target.value).getTime();
                    this.clearData();
                    this.getList();
                }else{
                    if(timestamp>=this.startTimestamp){
                        this.endTime = e.target.value
                        this.endTimestamp = new Date(e.target.value).getTime();
                        this.clearData();
                        this.getList();
                    }else{
                        uni.showToast({
                            title: '结束时间不能小于开始时间',
                            icon:"none",
                            mask:true,
                            duration: 2000
                        });
                    }
                }
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            //获取院系
            async listDepartments(){
                const {data} = await listDepartments();
                if(data.code == 200){
                    let list = [];
                    for(let i=0;i<data.data.length;i++){
                        list.push(data.data[i].deptName)
                    }
                    this.facultyArray = list;
                    list.unshift('全部院系');
                    this.facultyList = data.data;
                    this.facultyList.unshift({deptName:"全部院系", deptId:""})
                }
            },
            //获取级别
            async classifiedListAll(){
                const {data} = await classifiedListAll();
                if(data.code == 200){
					let list = [];
					let nameList = ['全部'];
					list.push({
						dictLabel:"全部",
						dictValue:""
					})
					for(let i=0;i<data.data.length;i++){
						let obj = {
							dictLabel:data.data[i].classifiedName,
							dictValue:data.data[i].id
						}
						list.push(obj);
						nameList.push(data.data[i].classifiedName);
					}
					this.levelList = list;
					this.levelArray = nameList;
                }
            },
            //获取学科字典
            async subject_class(){
                const {data} = await subject_class();
                if(data.code == 200){
                    let list = [];
                    for(let i=0;i<data.data.length;i++){
                        list.push(data.data[i].dictLabel)
                    }
                    this.subjectArray = list;
                    list.unshift('全部分类');
                    this.subjectList = data.data;
                    this.subjectList.unshift({dictLabel:"全部分类", dictValue:""})
                }
            },
            //清除
            clearData(){
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                    deptId:"",
                    subDept:"",
                    typeId:"",
                    startDate:"",
                    endDate:""
                };
                if(this.facultyList[0]){
                    obj.deptId = this.facultyList[this.facultyIndex].deptId;
                }
                if(this.subjectList[0]){
                    obj.subDept = this.subjectList[this.subjectIndex].dictValue;
                }
                if(this.levelList[0]){
                    obj.typeId = this.levelList[this.levelIndex].dictValue;
                }
                if(this.startTime != '开始时间'){
                    obj.startDate = this.startTime;
                }
                if(this.endTime != '结束时间'){
                    obj.endDate = this.endTime;
                }
                const {data} = await getSubByRiskPlan(obj);
                if(data.code==200){
                    if(self.page==1){
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = data.rows;
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = data.rows;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows)
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }
            },
        },
    }
</script>

<style lang="stylus" scoped>
    #planList{
        height:100%;
        flex:1;
        display flex
        flex-direction column
        overflow: hidden
        .top-picker-max-box{
            display:flex;
            padding:0 20rpx;
            background #fff
            border-bottom:1rpx solid #E0E0E0;
            .top-picker-box{
                line-height:80rpx;
                height:80rpx;
                .picker-view{
                    display flex
                    view{
                        display:block;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        font-size:28rpx;
                    }
                    .picker-img{
                        width:24rpx;
                        height:13rpx;
                        margin-top:36rpx;
                        margin-left:13rpx;
                    }
                }
            }
            .top-picker-box:nth-child(1){
                text-align left
                width:320rpx;
                .picker-view{
                    view{
                        max-width:260rpx;
                    }
                }
            }
            .top-picker-box:nth-child(2){
                text-align left
                width:215rpx;
                .picker-view{
                    view{
                        max-width:156rpx;
                    }
                }
            }
            .top-picker-box:nth-child(3){
                text-align right
                width:195rpx;
                .picker-view{
                    view{
                        flex:1;

                    }
                }
            }
        }
        .time-max-box{
            display flex;
            height:80rpx;
            .title-box{
                width: 200rpx;
                font-size: 28rpx;
                color: #333333;
                line-height: 80rpx;
                margin:0 0 0 20rpx;
            }
            .left-time-box{
                .left-time-min-box{
                    padding:0 15rpx;
                    width:170rpx;
                    height:50rpx;
                    border:1rpx solid #ccc;
                    background #fff
                    margin:15rpx 10rpx 0 0;
                    /*text-align center*/
                    line-height:50rpx;
                    font-size:22rpx;
                    color:#999;
                }
            }
            .center-box{
                line-height 80rpx
                color:#999;
            }
            .right-time-box{
                .left-time-min-box{
                    padding:0 15rpx;
                    width:170rpx;
                    height:50rpx;
                    border:1rpx solid #ccc;
                    background #fff
                    margin:15rpx 0 0 10rpx;
                    /*text-align center*/
                    line-height:50rpx;
                    font-size:22rpx;
                    color:#999;
                }
            }
        }
        .for-max-box{
            flex:1;
            overflow-y scroll
            .for-box{
                background #fff
                margin-bottom:20rpx;
                overflow: hidden
                .title-box{
                    margin:20rpx 20rpx 0;
                    display flex
                    view:nth-child(1){
                        height:42rpx;
                        line-height:42rpx;
                        font-size:20rpx;
                        border-radius:10rpx;
                        padding:0 10rpx;
                        color:#fff;
                        margin-right:20rpx;
                    }
                    view:nth-child(2){
                        line-height:42rpx;
                        font-size:30rpx;
                        color:#333;
                        max-width:600rpx;
                        flex:1;
                    }
                    img{
                        width:12rpx;
                        height:20rpx;
                        margin-top:11rpx;
                    }
                    .colorA{
                        background:#aa2315;
                    }
                    .colorB{
                        background:#ff9b09;
                    }
                    .colorC{
                        background:#3ea3e9;
                    }
                    .colorD{
                        background:#3ea34c;
                    }

                }
                .address-box{
                    margin:20rpx 20rpx;
                    font-size:26rpx;
                    color:#999999;
                    span{
                        margin-right:60rpx;
                    }
                }
                .address-box-two{
                    display flex
                    margin:0 20rpx 20rpx 20rpx;
                    img{
                        width:28rpx;
                        height:30rpx;
                        margin-right:18rpx;
                    }
                    view{
                        line-height:30rpx;
                        font-size:24rpx;
                        color:#999999;
                    }
                }
                .plan-name-box{
                    display flex
                    border-top:1px solid #e0e0e0;
                    margin:0 20rpx;
                    .plan-left-box{
                        flex:1;
                        height:111rpx;
                        view:nth-child(1){
                            font-size:30rpx;
                            line-height:30rpx;
                            margin-top:21rpx;
                            color:#333;
                        }
                        view:nth-child(2){
                            font-size:24rpx;
                            line-height:24rpx;
                            margin-top:18rpx;
                            color:#999;
                        }
                    }
                    img{
                        width:13rpx;
                        height:24rpx;
                        margin:45rpx 0 0 0;
                    }
                }
            }
            .null-img{
                display block
                width:276rpx;
                height:321rpx;
                margin:100rpx 0 0 274rpx;
            }
        }
    }
</style>