tqApp-webView/pagesSanitation/wasteTransport/wasteTransport.vue

<template>
    <view class="page-box">
        <view class="list-box">
            <u--form label-width="auto" ref="uForm" :model="form" labelAlign="right">
                <!-- <u-subsection :list="list" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection> -->
                <u-tabs :list="tablist" 
                  :itemStyle="{
                    width: '330rpx',
                    height: '80rpx'
                  }"
                  :activeStyle="{
                    color:'#4573FC'
                  }"
                  lineColor="#4573FC"
                  lineWidth="40"
                  @click="({index}) => {
                    curNow = index
                    anewQueryMyList()
                  }"
                >
                </u-tabs>
                <u-cell-group customStyle="margin-top: 2px">
                    <template>
                        <u-cell title="排班日期" :border="true" :isLink="true"
                            @click="calendarShow = true">
                            <view slot="value">
                                <u-form-item label="" prop="form.startTime">
                                    <template v-if="form.endDate">
                                        {{ form.startTime }} - {{ form.endDate }}</template>
                                    <template v-else></template>
                                </u-form-item>
                            </view>
                        </u-cell>
                    </template>

                    <template>
                        <u-cell title="执行状态" :border="true" :isLink="true"
                            @click="$refs.workStatusRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.endTime">
                                    {{ form.workStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="workStatusRef"
                            :columns="workStatusList"
                            @confirm="(data) => {
                form.workStatus = data.value
                form.workStatusName = data.label
                anewQueryMyList()
            }">
                        </tq-select>
                    </template>

                    <template v-if="curNow === 1">
                        <view class="search-box-item">
                            <u--input
                                placeholder="查询"
                                shape="circle"
                                prefixIcon="search"
                                v-model="form.param"></u--input>
                            <view class="search-box-item vehicle-model" @click="$refs.vehTypeRef.show()">
                                <view>车型</view>
                                <u-icon name="arrow-down-fill" color="rgb(60, 156, 255)" size="16"></u-icon>
                                <tq-select ref="vehTypeRef"
                                    api="dropDown"
									workTypeId="1"
                                    @confirm="(data) => {
                form.vehType = data.value
                form.vehTypeName = data.label
                anewQueryMyList()
            }"></tq-select>
                            </view>

                        </view>
                    </template>
                </u-cell-group>
            </u--form>
        </view>

        <view class="item-list-box">
            <view class="info-box" v-for="(item, index) in queryMyListdata" :key="index">
                <view class="title">{{item.scheduleDate}}</view>
                <view class="sub-title">{{item.deptName}}</view>
                <view class="item-list">
                    <view class="item">
                        <view class="label">编号</view>
                        <view class="value">{{item.code}}</view>
                    </view>
                    <view class="item">
                        <view class="label">计划名称</view>
                        <view class="value">{{item.planName}}</view>
                    </view>
                    <view class="item">
                        <view class="label">作业班次</view>
                        <view class="value">{{item.classTime}}</view>
                    </view>
                    <view class="item">
                        <view class="label">作业范围</view>
                        <view class="value">{{item.workRangeName}}</view>
                    </view>
                    <view class="item">
                        <view class="label">车辆类型</view>
                        <view class="value">{{item.vehTypeName}}</view>
                    </view>
                    <view class="item">
                        <view class="label">车牌号</view>
                        <view class="value" style="color: #4573FC;">{{item.plate}}</view>
                    </view>
                    <view class="hide-warp" v-if="item.openOther">
                      <view class="item">
                        <view class="label">姓名/电话</view>
                        <view class="value" style="color: #4573FC;">{{item.driverName}}/{{ item.driverPhone }}</view>
                      </view>
                      <view class="item">
                          <view class="label">已收取/垃圾箱总数</view>
                          <view class="value" style="color: #4573FC;">{{ item.wasteAlreadyNum }}/{{ item.wasteTotalNum }}</view>
                      </view>
                      <view class="item">
                          <view class="label">已收取/商户总数</view>
                          <view class="value">{{ item.merchantAlreadyNum }}/{{ item.merchantTotalNum }}</view>
                      </view>
                      <view class="item">
                          <view class="label">已收取/总收集站点</view>
                          <view class="value" style="color: #4573FC;">{{ item.collectionAlreadyNum }}/{{ item.collectionTotalNum }}</view>
                      </view>
                      <view class="item">
                          <view class="label">收集完成率</view>
                          <view class="value" style="color: #4573FC;">{{ item.percentage }}%</view>
                      </view>
                      <view class="item">
                          <view class="label">已完成里程/总里程数</view>
                          <view class="value" style="color: #4573FC;">{{ item.workMileage }}/{{ item.totalMileage }}</view>
                      </view>
                      <view class="item">
                          <view class="label">里程完成率</view>
                          <view class="value" style="color: #4573FC;">{{ item.mileageRatio }}%</view>
                      </view>
                      <view class="item">
                          <view class="label">状态</view>
                          <view class="value">
                              <!-- 作业状态:0.未开始 1.执行中 2.已结束 -->
                              <text style="color: #68D100;" v-if="item.workStatus === 2">{{ item.workStatusName }}</text>
                              <text style="color: #FF8000;" v-if="item.workStatus === 1">{{ item.workStatusName }}</text>
                              <text style="color: #EB4141;" v-if="item.workStatus === 0">{{ item.workStatusName }}</text>
                          </view>
                      </view>
                    </view>
                    <view @click="item.openOther = !item.openOther" class="open-warp">
                      {{ item.openOther?'收起':'展开' }}
                    </view>
                    
					<view class="item">
						
					     <view class="value" style="color: #4573FC;">
							 <view style="color: #4573FC;display: flex;" @click="goWorkDetails(item)">作业界面 <u-icon name="arrow-right-double" color="#4573FC" size="14"></u-icon></view>
						 </view>
					</view>
                </view>
                 <!-- 操作 -->
                 <view class="item-btn">
                    <view class="u-button" @click="phoneCall(item)">
                        <image class="icon" src="@/static/icon/iPhone.png" mode=""></image>
                        电话
                    </view>
                    <view class="u-button" @click="handleTask(item)" v-if="!intercomState">
                        <image class="icon" src="@/static/icon/voice.png" mode=""></image>
                        对讲
                    </view>
                    <view class="u-button intercom" @click="handleTask(item)" v-if="intercomState">
                        <image class="icon" src="@/static/icon/voice-close.png" mode=""></image>
                        挂断
                    </view>
                    <view class="u-button">
                        <image class="icon" src="@/static/icon/video.png" mode=""></image>
                        视频
                    </view>
                </view>
            </view>
            <u-loadmore :status="status" />
        </view>

        <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
            monthNum="24"
            @confirm="calendarChange" @close="calendarShow = false"></u-calendar>
            <intercom ref="intercom" @oNstate="(e)=>intercomState=e"></intercom>
    </view>
</template>
<script>
import Intercom from '@/components/Intercom'
import { collectionWorkRecord } from "@/api/system/workPlan";
export default {
    components: {
        Intercom
    },
    data() {
        return {
            intercomState:false,//对接状态
            calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
            calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
            defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
            maxDate: this.dayjs().add(365, 'day').format('YYYY-MM-DD'),
            calendarShow: false,
            curNow: 0,
            form: {
                startTime: '',//开始时间
                endDate: '', //结束时间
                workStatus: '',//部门审核状态：1.审核通过、2.审核不通过
                workStatusName: '',
                vehType: '',
                vehTypeName: '',
                param: '' //模糊搜索
            },
            // 作业状态:0.未开始 1.执行中 2.已结束
            workStatusList: [
                { label: '全部', value: '' },
                { label: '未开始', value: 0 },
                { label: '执行中', value: 1 },
                { label: '已结束', value: 2 },
            ],
            status: 'nomore', //loading nomore loadmore
            list: ['我的记录', '全部记录'],
            tablist: [
              { name: '我的记录'},
              { name: '全部记录'},
            ],
            bothSidesMap: {
                1: '是',
                0: '否'
            },
            queryMyListdata: []
        }
    },
    // 触底
    onReachBottom() {
        console.log('当前条数', this.queryMyListdata.length, '总条数', this.total)
        if (this.queryMyListdata.length >= this.total) return;
        this.pageIndex++
        this.queryMyList();
    },
    methods: {
		goWorkDetails(row) {
			const {schId} = row
			uni.navigateTo({
				url: `/pagesSanitation/workDetails/index?schId=${schId}`
			})
		},
        handleTask(item) {
		   this.$refs.intercom.toIntercom(item.deviceId);
	    },
        phoneCall({driverPhone}) {
            uni.makePhoneCall({
                phoneNumber: driverPhone //仅为示例
            });
        },
        calendarChange(e) {
            console.info('选择的时间', e)

            // 修改日期
            this.form.startTime = e[0]; // 开始时间
            this.form.endDate = e[e.length - 1]; // 结束时间
            this.defaultDate = [e[0], e[e.length - 1]]
            this.calendarShow = false;
            this.anewQueryMyList();
        },
        sectionChange(index) {
            this.curNow = index;
            this.anewQueryMyList()
        },
        anewQueryMyList() {
            this.pageIndex = 1;
            this.queryMyListdata = [];
            this.queryMyList();
        },
        async queryMyList() {
            this.loading = 'loading'
            let { startTime, endDate } = this.form
            let obj = {
                ...this.form,
				startTime: undefined,
                page: this.pageIndex,
                size: 10,
                startDate: startTime ? startTime : '',
                endDate: endDate ? endDate : '',
                queryType: this.curNow === 0 ? 1 : 0 //查询类型:0.全部记录 1.我的记录 默认为0
            }
            for (let key in obj) {
                if (obj[key] === '') delete obj[key]
            }
            if(this.curNow===0){
                delete obj.param
                delete obj.vehType
                delete obj.vehTypeName
            }

            let { data, code } = await collectionWorkRecord(obj)
            if (code == "0") {
              let list = data.list.map(item=>
                  {
                    return {
                      ...item,
                      openOther:false
                    }
                  }
                )
                this.queryMyListdata = this.queryMyListdata.concat(list)
                this.total = Number(data.total)
                this.loading = 'loadmore'
                if (this.queryMyListdata.length >= this.total) {
                    this.status = 'nomore'
                }
                console.log('数据', this.queryMyListdata)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.page-box {

    .list-box {
        border-radius: 10rpx;
        background: #fff;
        padding: 20rpx;
        position: sticky;
        box-sizing: border-box;
        // align-items: center;
        // display: flex;
        top: 0px;
        width: 100%;
        z-index: 999;

        /deep/ {
            .u-form-item__body {
                padding: 0;
            }
        }

        .search-box-item {
            display: flex;
            align-items: center;
            color: rgb(60, 156, 255);
            padding-top: 20rpx;
            padding-left: 20rpx;

            /deep/ .u-input {
                border: 0;
                background: #F2F2F2;
            }
        }

        .vehicle-model {
            padding: 0 20rpx;
        }
    }

    .item-list-box {
        padding: 24rpx;
        box-sizing: border-box;

        .info-box {
            width: 100%;

            background: #FFFFFF;
            box-shadow: 0rpx 4 8rpx 0rpx rgba(0, 117, 247, 0.16);
            border-radius: 20rpx;
            margin-bottom: 24rpx;
            padding: 32rpx 24rpx;
            box-sizing: border-box;

            .title {
                font-size: 36rpx;
                line-height: 52rpx;
                font-style: normal;
                font-weight: 500;
                height: 52rpx;
                color: #4573FC;
                padding-left: 32rpx;
            }

            .sub-title {
                margin-top: 8rpx;
                font-weight: 600;
                font-size: 28rpx;
                color: #666666;
                line-height: 44rpx;
                height: 44rpx;
                text-align: left;
                font-style: normal;
                padding-left: 32rpx;
            }

            .item-list {
                width: 100%;
                background: #F6FAFF;
                border-radius: 10rpx;
                margin-top: 20rpx;
                padding: 24rpx 32rpx;
                box-sizing: border-box;

                .item {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 16rpx;

                    .label {
                        color: #666666;
                        font-size: 28rpx;
                        flex-shrink: 0;
                        padding-right: 4rpx;
                    }

                    .value {
                        font-size: 28rpx;
                        color: #333333;
                    }
                }
            }
            .item-btn {
                display: flex;
                margin-top: 24rpx;

                .u-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 68rpx;
                    background: #4573FC;
                    border-radius: 34rpx;
                    color: #fff;
                    &:not(:last-child) {
                        margin-right: 20rpx;
                    }
                    .icon{
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 2rpx;
                    }
                }
                .intercom{
                    background: #EB4141;
                }
            }
        }
    }
    .hide-warp{
      width: 100%;
    }
    .open-warp{
      width: 100%;
      padding: 20rpx 0 10rpx;
      display: flex;
      justify-content: flex-end;
      color: #4573FC;
      font-size: 28rpx;
    }
}
</style>