xiamen-sb-uniapp/pages/equipment-detail/equipment-detail.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="d-flex px3 py2">
            <view class="top d-flex a-center bg-color-white flex1 one-ellipsis">
                <view class="img" style="cursor:pointer">
                    <image :src="imgSrc
                            ? imgSrc
                            : $BaseTool.UserUtil.getFileUrl(infoData.qrCode)
                        " mode="widthFix"></image>
                </view>
                <view class="pl-3">
                    <view class="f-size-36 text-color-3 one-ellipsis">{{
                        infoData.name
                        }}</view>
                    <view class="d-flex f-size-28 f-weight-6 f-wrap" style="margin: 20rpx 0">
                    </view>
                    <view class="d-flex">
                        <text class="f-size-26 mr-3 state-r main-color-bg text-color-white">{{
                            statusMap[infoData.status] }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="divider"></view>
        <!-- 基本信息 -->
        <view class="mt-3 px3">
            <view class="f-size-30 f-weight-bold py2 border-bottom">基本信息</view>
            <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx; border: 1px solid #eee">
                <equipment-line title="设备编号" :content="infoData.no" />
                <!--                <equipment-line title="财务编码" :content="infoData.financingNo"/>-->
                <equipment-line title="设备类型" :content="infoData.typeName" />
                <equipment-line title="规格型号" :content="infoData.model" />
                <!-- 使用位置优先取设备位置树名称（positionName），cph 仅在报修回写后才有值，兜底兼容老数据 -->
                <equipment-line title="使用位置" :content="infoData.positionName ? infoData.positionName : (infoData.cph ? infoData.cph : '')" />
                <equipment-line title="上次保养完成时间" :content="infoData.lastMaintainFinishTime ? infoData.lastMaintainFinishTime : '暂无'" />
            </view>

            <!-- <view class="mt-3">
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">设备编号</view>
            <view class="one-ellipsis">{{ infoData.no }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">财务编码</view>
            <view>{{ infoData.financingNo }}</view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">卡片编号</view>
            <view>{{ infoData.cardNo }}</view>
          </view>
        </view>
        <view class="d-flex">
          <view class="mr-2 text-color-6">制造号（车架号）</view>
          <view>{{ infoData.zzh }}</view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">发动机型号</view>
            <view>{{ infoData.fdjxh }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">发动机号</view>
            <view>{{ infoData.fdjh }}</view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">车牌号</view>
            <view>{{ infoData.cph }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">底盘号</view>
            <view>{{ infoData.dph }}</view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">自重</view>
            <view>{{ infoData.zz }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">燃料类别</view>
            <view>{{
              $BaseTool.Object.getField(rlTypeMap, infoData.rlType)
            }}</view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">颜色</view>
            <view>{{
              $BaseTool.Object.getField(colorMap, infoData.color)
            }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">座位数</view>
            <view>{{ infoData.seatNumber }}</view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">助记码</view>
            <view>{{ infoData.zjm }}</view>
          </view>
          <view class="col2 d-flex">
            <view class="mr-2 ">状态</view>
            <view>
              <my-badge
                :text="statusMap[infoData.status]"
                :status="$DictCache.COLOR.SB_INFO_STATUS[infoData.status]"
              />
            </view>
          </view>
        </view>
        <view class="d-flex mb-2">
          <view class="col2 d-flex">
            <view class="mr-2 text-color-6">备注</view>
            <view>{{ infoData.remark }}</view>
          </view>
        </view>
      </view> -->
        </view>
        <view class="divider"></view>
        <view class="px3">
            <view class="f-size-30 f-weight-bold py2 border-bottom">常用操作</view>
            <u-grid :col="3" :border="false">
                <u-grid-item @tap="handleAdd(1)">
                    <view class="iconfont icon-baoxiu" style="color: #0f6fb9"></view>
                    <view class="grid-text">报修</view>
                </u-grid-item>
                <!--                <u-grid-item @tap="handleAdd(2)">
                    <view
                        class="iconfont icon-icon-GIS_yunhangguanli main-color-text"
                    ></view>
                    <view class="grid-text">运行填报</view>
                </u-grid-item>
                <u-grid-item @tap="handleAdd(3)">
                    <view
                        class="iconfont icon-xunjianguanli main-color-text"
                    ></view>
                    <view class="grid-text">巡检填报</view>
                </u-grid-item>-->
                <u-grid-item v-if="infoData.status != 2" @tap="handleStart()">
                    <view class="iconfont icon-start main-color-text"></view>
                    <view class="grid-text">启用</view>
                </u-grid-item>
                <!-- 近期点检日历：只看历史已完成记录，扫码免登录即可查看 -->
                <u-grid-item @tap="handleCheckCalendar">
                    <view class="iconfont icon-xunjianguanli main-color-text"></view>
                    <view class="grid-text">近期点检日历</view>
                </u-grid-item>
                <!-- 扫码进入的设备详情页隐藏停用按钮 -->
                <!--<u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">停用</view>
                </u-grid-item>-->
            </u-grid>
        </view>
        <view class="divider"></view>
        <view class="px3">
            <my-card title="设备图片" @handleLubrication="handleImg"></my-card>
        </view>
        <!-- <view class="divider"></view>
               <view class="px3">
            <my-card
                title="设备型号信息"
                @handleLubrication="handleModel"
            ></my-card>
            <my-card
                title="设备使用信息"
                @handleLubrication="handleUse"
            ></my-card>
            <my-card
                title="厂商信息"
                @handleLubrication="handleInsure"
            ></my-card>
            <my-card title="日期信息" @handleLubrication="handleDate"></my-card>
        </view>-->

        <view class="divider"></view>
        <view class="px3">
            <!-- <my-card
                icon="icon-tubiaozhizuomoban-135"
                title="今日现场保养任务"
                :tipNum="gatherTask.lubricationTask"
                @handleLubrication="handleMaintain(1)"
            ></my-card>
            <my-card
                icon="icon-tubiaozhizuomoban-135"
                title="本周保养任务"
                :tipNum="gatherTask.lubricationTaskWeek"
                @handleLubrication="handleMaintain(2)"
            ></my-card> -->
            <my-card icon="icon-tubiaozhizuomoban-135" title="本月保养任务" :tipNum="gatherTask.lubricationTaskMonth"
                @handleLubrication="handleMaintain(3)"></my-card>
            <!--            <my-card-->
            <!--                v-show="$BaseTool.UserUtil.getUserInfo() != null && ($BaseTool.UserUtil.isRepairRole() || $BaseTool.UserUtil.isManagerRole())"-->
            <!--                icon="icon-tubiaozhizuomoban-135"-->
            <!--                title="今日保养任务"-->
            <!--                :tipNum="gatherTask.lubricationTaskMyDay"-->
            <!--                @handleLubrication="handleMaintainAll(0,1)"-->
            <!--            ></my-card>-->
            <!--            <my-card-->
            <!--                v-show="$BaseTool.UserUtil.getUserInfo() != null && ($BaseTool.UserUtil.isRepairRole() || $BaseTool.UserUtil.isManagerRole())"-->
            <!--                icon="icon-tubiaozhizuomoban-135"-->
            <!--                title="本周保养任务"-->
            <!--                :tipNum="gatherTask.lubricationTaskMyDay"-->
            <!--                @handleLubrication="handleMaintainAll(0,2)"-->
            <!--            ></my-card>-->
            <!--            <my-card-->
            <!--                v-show="$BaseTool.UserUtil.getUserInfo() != null && ($BaseTool.UserUtil.isRepairRole() || $BaseTool.UserUtil.isManagerRole())"-->
            <!--                icon="icon-tubiaozhizuomoban-135"-->
            <!--                title="本月保养任务"-->
            <!--                :tipNum="gatherTask.lubricationTaskMyDay"-->
            <!--                @handleLubrication="handleMaintainAll(0,3)"-->
            <!--            ></my-card>-->
            <my-card icon="icon-weixiu" title="维修任务" :tipNum="gatherTask.repairTask"
                @handleLubrication="handleService"></my-card>
            <!--   <my-card
                     icon="icon-runhuaguanli"
                     title="点检任务"
                     @handleLubrication="handleLubrication"
                 ></my-card>
               <my-card
                    icon="icon-jiayou"
                    title="加油任务"
                    @handleLubrication="handleOiling"
                    iColor="#F1650C"
                ></my-card>-->

        </view>
    </view>
</template>

<script>
import DictCache from '@/utils/dict';

export default {
    data() {
        return {
            list: [
                {
                    name: '维修记录'
                },
                {
                    name: '运行记录'
                },
                {
                    name: '巡检记录'
                }
            ],
            current: 0,
            detailId: '',
            infoData: {},
            statusMap: {},
            rlTypeMap: null,
            colorMap: null,
            imgSrc: '',
            gatherTask: {
                checkTask: 0,
                maintainTask: 0,
                lubricationTask: 0,
                lubricationTaskWeek: 0,
                lubricationTaskMonth: 0,
                oilTask: 0,
                repairTask: 0,
                repairCheckTask: 0
            }
        };
    },
    onLoad(options) {
        // 获取词典
        this.detailId = options.detailId;
        this.$Http.getDictData().then(response => {
            uni.setStorage({
                key: DictCache.BASE_DATA_CACHE,
                data: response.data,
                success: function () { }
            });
            this.statusMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.SB_INFO_STATUS
            );
            this.rlTypeMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.RANLIAO_TYPE
            );
            this.colorMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.SB_COLOR
            );
            this.$Http
                .fetchSbInfoIgnores({
                    id: this.detailId
                })
                .then((res) => {
                    this.infoData = res.data;
                    if (this.infoData.sbFileList != null && this.infoData.sbFileList.length > 0) {
                        this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.sbFileList[0].url)
                    } else {
                        this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.qrCode)
                    }
                    uni.setNavigationBarTitle({
                        title: this.infoData.name
                    });
                });
            this.$Http.getSbTaskIgnores({
                id: this.detailId
            }).then((res) => {
                this.gatherTask = res.data;
            });
            if (this.$BaseTool.UserUtil.getUserInfo() != null && (this.$BaseTool.UserUtil.isRepairRole() || this.$BaseTool.UserUtil.isManagerRole())) {
                this.$Http.getGatherTaskRole(this.detailId).then((res) => {
                    this.gatherTask = res.data;
                });
            } else {
                this.$Http.getSbTaskIgnores({ id: this.detailId }).then((res) => {
                    this.gatherTask = res.data;
                });
            }
        });
    },
    onShow() {
    },
    methods: {
        // 文件
        handleImg() {
            uni.navigateTo({
                url:
                    '/pages/equipment-file/equipment-img?detailId=' +
                    this.detailId
            });
        },
        // 文件
        handleFile() {
            uni.navigateTo({
                url:
                    '/pages/equipment-file/equipment-file?detailId=' +
                    this.detailId
            });
        },
        // 日期
        handleDate() {
            uni.navigateTo({
                url:
                    '/pages/equipment-date/equipment-date?detailId=' +
                    this.detailId
            });
        },
        // 厂商
        handleInsure() {
            uni.navigateTo({
                url:
                    '/pages/equipment-insure/equipment-insure?detailId=' +
                    this.infoData.producerId
            });
        },
        // 设备使用信息
        handleUse() {
            uni.navigateTo({
                url:
                    '/pages/equipment-use/equipment-use?detailId=' +
                    this.detailId
            });
        },
        // 设备型号信息
        handleModel() {
            uni.navigateTo({
                url:
                    '/pages/equipment-model/equipment-model?detailId=' +
                    this.detailId
            });
        },
        // 相关任务跳转
        // 维修任务
        handleService() {
            uni.navigateTo({
                url: '/pages/service/service?sbId=' + this.detailId
            });
        },
        // 加油任务
        handleOiling() {
            uni.navigateTo({
                url: '/pages/oiling/oiling?sbId=' + this.detailId
            });
        },
        // 当日现场保养任务
        handleMaintain(searchType) {
            uni.navigateTo({
                url: '/pages/maintain/maintain?sbId=' + this.detailId + '&filter=2&searchType=' + searchType
            });
        },
        // 我的保养任务：今日
        handleMaintainMy() {
            uni.navigateTo({
                url: '/pages/maintain/maintain?sbId=' + this.detailId + '&filter=0&searchType=1'
            });
        },
        // 所有保养任务：今日
        handleMaintainAll(filter, searchType) {
            uni.navigateTo({
                url: '/pages/maintain/maintain?sbId=' + this.detailId + '&searchType=1&filter=' + filter
            });
        },
        // 点检任务
        handleLubrication(e) {
            uni.navigateTo({
                url: '/pages/check/check?sbId=' + this.infoData.id
            });
        },
        // 近期点检日历（数据源为保养任务，已完成的日期标绿打勾）
        handleCheckCalendar() {
            // 带上设备“上次保养完成时间”，当月未做保养时日历仍然能看到最近一次记录
            const last = this.infoData.lastMaintainFinishTime
                ? encodeURIComponent(this.infoData.lastMaintainFinishTime)
                : '';
            uni.navigateTo({
                url:
                    '/pages/equipment-calendar/equipment-calendar?sbId=' +
                    this.detailId +
                    '&last=' + last
            });
        },
        // 常用操作跳转（报修/运行填报/巡检填报均会提交数据，未登录先弹登录）
        handleAdd(index) {
            this.$Http.requireLogin(() => {
                if (index === 1) {
                    uni.navigateTo({
                        url:
                            '/pages/repair-add/repair-add?detailId=' +
                            this.detailId
                    });
                } else if (index === 2) {
                    uni.navigateTo({
                        url: '/pages/running/running-edit?sbId=' + this.detailId
                    });
                } else if (index === 3) {
                    uni.navigateTo({
                        url:
                            '/pages/inspection/inspection-edit?sbId=' +
                            this.detailId
                    });
                }
            }, '发起报修/填报需要先登录，是否登录？');
        },
        change(index) {
            this.current = index;
        },
        handleStart() {
            // this.infoData.status = 2;
            this.$Http.requireLogin(() => {
                uni.navigateTo({
                    url:
                        '/pages/equipment-detail/equipment-status?sbId=' +
                        this.detailId + '&sbNo=' + this.infoData.no +
                        '&sbName=' + this.infoData.name +
                        '&preStatus=' + this.infoData.status +
                        '&afterStatus=' + 2
                });
            }, '启用设备需要先登录，是否登录？');
            /* this.$Http.updateSbInfo(this.infoData).then((res) => {
                that.$refs.uToast.show({
                    title: '已启用',
                    type: 'default',
                    icon: false
                });
            }); */
        },
        handleStop() {
            this.$Http.requireLogin(() => {
                this.infoData.status = 7;
                var that = this;
                this.$Http.updateSbInfo(this.infoData).then((res) => {
                    that.$refs.uToast.show({
                        title: '已停用',
                        type: 'default',
                        icon: false
                    });
                });
            }, '停用设备需要先登录，是否登录？');
        }
    }
};
</script>

<style lang="less">
.iconfont {
    font-size: 50rpx;
}

.col2 view:first-child {
    // width: 130rpx;
}

.col2 view:last-child {
    flex: 1;
}

.top {
    .img {
        width: 168rpx;
        height: 168rpx;
        border-radius: 50%;

        image {
            width: 168rpx;
            height: 168rpx;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.d-flex.mb-2 {
    align-items: center;
}

.state-r {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.state-g {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    background-color: #e7e8f2;
    color: #949dad;
}
</style>