维修列表和维修详情

xiebin

2022-09-30 077cfbcc593be7272af7a8fcef8dcffd828283f4

维修列表和维修详情

 api/repairsorder/repairsorder.js

New file
@@ -0,0 +1,29 @@
import http from '@/http/api.js'

export const getList = (current, size, params) => {
    return http.request({
        url: '/repairsorder/repairsorder/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}
export const getDetail = (id) => {
    return http.request({
        url: '/repairsorder/repairsorder/detail',
        method: 'get',
        params: {
            id
        }
    })
}
export const update = (row) => {
    return http.request({
        url: '/repairsorder/repairsorder/submit',
        method: 'POST',
        data: row
    })
}

 http/api.js

@@ -48,11 +48,16 @@
    }
    // 服务端返回的状态码不等于200，则reject()
    if (response.data.code !== 200) {

        return Promise.reject(response);
    }
    return response.data;
}, (response) => {
    /*  对响应错误做点什么 （statusCode !== 200）*/
    if (response.data.code == 403 || response.data.code == 401) {
        uni.navigateTo({
            url: '/pages/login/login-account'
        })
    }
    uni.showToast({
        title: response.data.msg,
        icon: 'none'

 pages.json

@@ -45,6 +45,19 @@
            "path": "pages/eventgm/eventsReported",
            "style": {
                "navigationBarTitleText": "事件上报",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/repairsorder/list",
            "style": {
                "navigationBarTitleText": "维修工单",
                "enablePullDownRefresh": false
            }

        }, {
            "path": "pages/repairsorder/detail",
            "style": {
                "navigationBarTitleText": "工单详情",
                "enablePullDownRefresh": false
            }
        }

 pages/repairsorder/detail.vue

New file
@@ -0,0 +1,335 @@
<template>
    <view class="content">
        <u-top-tips ref="uTips"></u-top-tips>
        <map id="map" style="width: 100%; height: 30vh;" scale="16" :latitude="latitude" :longitude="longitude"
            :markers="markers">
            <!-- <cover-view class="dingwBut" @click="getSelfLocation">
                <cover-image src="../../static/images/taskinfo/map/img/dingwei.png"></cover-image>
            </cover-view> -->
        </map>
        <view id="Umain" style="height: 71%;z-index: 9999;">
            <view class="once-b">
                工单信息
            </view>
            <view class="once">
                <span class="once-left">
                    工单编号
                </span>
                <span class="once-right">
                    {{repairsorderData.no}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    位置
                </span>
                <span class="once-right">
                    {{repairsorderData.location}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    内容
                </span>
                <span class="once-right">
                    {{repairsorderData.content}}
                </span>
            </view>
            <view class="once">
                <span class="once-left">
                    状态
                </span>
                <span class="once-right">
                    {{repairsorderData.state == 1?'待开始':repairsorderData.state == 2?'正在进行':repairsorderData.state == 3?'已完成':'未派单'}}
                </span>
            </view>
            <view class="once-c">
                <u-button type="success">开始任务</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getDetail
    } from "@/api/repairsorder/repairsorder"
    export default {
        data() {
            return {
                id: 0,
                repairsorderData: {},
                _mapContext: null,
                latitude: '',
                longitude: '',
                markers: null,
                //路线默认属性
                marker: {
                    iconPath: '../../static/images/map/img/dinw/dinw6.png',
                    width: 50,
                    height: 50
                },
            }
        },
        methods: {
            getSelfLocation() {
                var _that = this;
                uni.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,
                    success(res) {
                        _that.latitude = res.latitude
                        _that.longitude = res.longitude
                    }
                })
            },
            getTaskinfoDetail() {
                var _that = this
                getDetail(_that.id).then(res => {
                    _that.repairsorderData = res.data;
                    if (_that.repairsorderData.latitude && _that.repairsorderData.longitude) {
                        _that.latitude = _that.repairsorderData.latitude
                        _that.longitude = _that.repairsorderData.longitude
                        //添加定位信息 
                        _that.marker.latitude = _that.latitude
                        _that.marker.longitude = _that.longitude
                        _that.markers = [_that.marker]
                    } else {
                        _that.getSelfLocation() //没有坐标定位当前位置
                    }

                })
            }
        },
        onLoad: function(options) {
            if (options.id) {
                this.id = options.id
                this.getTaskinfoDetail()
            }
        },
        onReady() {
            console.log(this.polyline)
        }
    }
</script>

<style lang="scss">
    .content {
        // flex: 1;
        // height: 100%;
        overflow: hidden;
        // position: relative;
    }

    #Umain {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    .once {
        width: 100%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        /* margin-bottom: 10px; */
        border-bottom: 1px solid #e8e8e8;
        padding: 0 10px;
    }

    .once-left {
        width: 25%;
        text-align: justify;
        text-align-last: justify;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .once-left::after {
        content: "：";
        position: absolute;
    }

    .once-right {
        width: calc(75% - 20px);
        height: auto;
        /* border: 1px solid red; */
        box-sizing: border-box;
        word-break: break-all;
    }

    .once-right span {
        display: inline-block;
        padding: 0px 5px 1px;
        margin: 0 5px;
        background-color: #ECF5FF;
        border: 0.5px solid #e4f1ff;
        color: #429FFF;
        border-radius: 8px;
    }

    .once-c {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        background-color: #fff;
        position: absolute;
        bottom: 0;
    }

    .once-b {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-bottom: 1px solid #e8e8e8;
        /* margin-bottom: 10px; */
    }

    .submits {
        margin: 60rpx 90rpx 0;
        border: none;
        width: 572rpx;
        height: 86rpx;
        // line-height: 86rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        background-color: #103289;
        color: #ffffff;

        &::after {
            content: none;
        }

        &::before {
            content: none;
        }

        &[disabled='true'] {
            background: #e4e4e4;
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
        }
    }


    .Info2 {
        width: 100%;
        // height: 100px;
        padding: 0 10px;

        .Info3 {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }

        .Info4 {
            width: 100%;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            height: 50px;
        }

        .Info5 {
            margin-bottom: 10px !important;
            width: 70%;
        }
    }

    .notOpens {
        &::after {
            content: "";
            display: block;
            width: 20px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 10px);
            border-radius: 5px;
            transition: all 0.1s;
        }
    }

    .activeTip {
        background-color: #fff;
    }

    .isOpens {
        &::after {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 12px);
            border-radius: 5px;
            transform: rotate(30deg);
            transition: all 0.1s;
        }

        &::before {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 4px);
            border-radius: 5px;
            transform: rotate(-30deg);
            transition: all 0.1s;
        }
    }

    .dingwBut {
        width: 80upx;
        height: 80upx;
        background-color: #fff;
        border-radius: 20upx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 40upx;
        right: 40upx;
    }

    .oncePotion {
        animation: mymove 0.5s infinite;
        animation-timing-function: linear;
    }

    .dingwButtip {
        bottom: 120 upx;
        background-color: transparent;
        color: #000000;
    }

    @keyframes mymove {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(1turn);
        }
    }
</style>

 pages/repairsorder/list.vue

New file
@@ -0,0 +1,225 @@
<template>
    <view class="container">
        <u-top-tips ref="uTips"></u-top-tips>
        <view class="tabs">
            <u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" :is-scroll="false" swiperWidth="750"
                @change="tabsChange">
            </u-tabs-swiper>
        </view>
        <view class="swiper-item">
            <scroll-view scroll-y :style="{ height: useHeight, width: '100%' }" @scrolltolower="scrolltolower">
                <view class="onveMain">
                    <view class="once" v-for="(item, index) in repairsorderList" :key="index">
                        <view class="onve-left" @click="goToDetail(item.id)">
                            <!-- <view class="o-l-img">
                                <image src="" mode=""></image>
                            </view> -->
                            <view class="o-l-main">
                                <view class="o-l-m-up">
                                    {{item.no}}
                                </view>
                                <view class="o-l-m-center">
                                    <u-icon name="order" color="#d0d0d0" size="28"></u-icon>
                                    状态：{{item.state == 1?'待开始':item.state == 2?'正在进行':item.state == 3?'已完成':'未派单'}}
                                </view>
                                <view class="o-l-m-center">
                                    <u-icon name="volume" color="#d0d0d0" size="28"></u-icon>
                                    时间：{{item.startTime}}
                                </view>
                            </view>
                        </view>
                        <view class="onve-right">
                            <u-button class='greens' size="mini" v-if="current == 0">开始维修
                            </u-button>
                            <u-button class='greens' size="mini" v-if="current == 1">完成维修
                            </u-button>

                        </view>
                    </view>

                </view>
                <u-divider>没有更多了</u-divider>
            </scroll-view>
        </view>

    </view>
</template>

<script>
    import {
        getList
    } from "@/api/repairsorder/repairsorder";
    export default {
        data() {
            return {
                useHeight: "87vh",
                current: 0, // tabs组件的current值，表示当前活动的tab选项
                tabsList: [{
                    id: 1,
                    name: "待开始",
                }, {
                    id: 2,
                    name: "正在进行",
                }, {
                    id: 3,
                    name: "已完成",
                }],
                page: {
                    pageSize: 6,
                    currentPage: 1,
                    total: 0
                },
                query: {
                    state: 1,
                    toUserId: this.$store.state.userInfo.user_id //获取当前登录用户id
                },
                repairsorderList: null
            }
        },
        created() {
            this.getList()
        },
        methods: {
            // tabs通知swiper切换
            tabsChange(index) {
                this.current = index;
                this.query.state = this.tabsList[this.current].id;
                this.page.currentPage = 1
                this.getList();
            },
            getList() {
                // 获取任务列表API
                getList(this.page.currentPage, this.page.pageSize, this.query).then(res => {
                    const data = res.data;
                    this.page.total = data.total;
                    this.repairsorderList = data.records;
                })
            },
            // 下一页任务
            scrolltolower() {
                this.page.currentPage += 1
                // 获取任务列表API
                getList(this.page.currentPage, this.page.pageSize, this.query).then(res => {
                    const data = res.data;
                    this.page.total = data.total;
                    this.repairsorderList = this.repairsorderList.concat(data.records)
                })
            },
            // 跳转详情页
            goToDetail(id) {
                uni.navigateTo({
                    url: '/pages/repairsorder/detail?id=' + id
                })
            }

        }
    }
</script>

<style scoped lang="scss">
    page {
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .swiper-item {
        flex: 1;
    }

    .onveMain {
        width: 100%;
        height: auto;
    }

    .once {
        width: calc(100% - 10px);
        height: 100px;
        border: 1px solid #d0d0d0;
        padding: 8px;
        box-sizing: border-box;
        margin: 5px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        .onve-left {
            width: 75%;
            display: flex;
            align-items: center;
            justify-content: center;

            .o-l-img {
                width: 80px;
                height: 80px;
                background-color: #d0d0d0;
                margin-right: 5px;
                border-radius: 7px;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 7px;
                }
            }

            .o-l-main {
                width: 100%;
                height: 80px;
                display: flex;
                // align-items: center;
                justify-content: center;
                flex-direction: column;

                .o-l-m-up {
                    height: 30px;
                    font-size: 16px;
                }
            }
        }

        .onve-right {
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .o-r-down {
                margin-top: 4px;
            }
        }

    }

    .orange {
        color: #FF7B15;
    }

    .green {
        color: #00e713;
    }

    .greens {
        color: #18a655 !important;
    }

    .blues {
        color: #2680F0 !important;
    }

    .Cation {
        display: inline-block;
        position: absolute;
        left: -35px;

        &::after {
            content: "";
        }
    }

    .notCation {
        color: #18a655;
    }
</style>

 pages/taskinfo/detail.vue

@@ -4,7 +4,7 @@
        <map id="map" style="width: 100%; height: 30vh;" scale="14" :latitude="latitude" :longitude="longitude"
            :polyline="polyline">
            <!-- <cover-view class="dingwBut" @click="getSelfLocation">
                <cover-image src="../../static/images/taskinfo/map/img/dingwei.png"></cover-image>
                <cover-image src="../../static/images/map/img/dingwei.png"></cover-image>
            </cover-view> -->
        </map>
        <view id="Umain" style="height: 71%;z-index: 9999;">
@@ -53,7 +53,8 @@
            </view>
            <view class="once-c">
                <u-button v-if="taskinfoData.state == 0" type="success" @click="startTask(taskinfoData)">开始任务</u-button>
                <u-button v-if="taskinfoData.state == 1" type="success" @click="finishTask(taskinfoData)">完成任务</u-button>
                <u-button v-if="taskinfoData.state == 1" type="success" @click="finishTask(taskinfoData)">完成任务
                </u-button>
                <u-button v-if="taskinfoData.state == 1" type="error" @click="goToEventsReported">事件上报</u-button>
            </view>
        </view>
@@ -62,7 +63,8 @@

<script>
    import {
        getDetail,update
        getDetail,
        update
    } from "@/api/taskinfo/taskinfo"
    export default {
        data() {
@@ -397,6 +399,4 @@
            transform: rotate(1turn);
        }
    }
	

</style>

 static/images/map/img/dingwei.png

 static/images/map/img/dinw/dinw1.png

 static/images/map/img/dinw/dinw2.png

 static/images/map/img/dinw/dinw3.png

 static/images/map/img/dinw/dinw4.png

 static/images/map/img/dinw/dinw5.png

 static/images/map/img/dinw/dinw6.png

 static/images/map/img/dinw/location.png