638 lines
15 KiB
Vue
638 lines
15 KiB
Vue
<template>
|
|
<view class="container" :style="{ height: scrollHeight + 70 + 'px' }">
|
|
<uni-card>
|
|
<uni-forms>
|
|
<uni-forms-item label="车辆编号">
|
|
<bikeCodeScan
|
|
ref="childComponent"
|
|
@scan-change="bikeCodeScanChange"
|
|
:codeValue="ebikeInfo.bikeCode"
|
|
/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="当前坐标">
|
|
<uni-easyinput
|
|
:disabled="true"
|
|
v-model="currentCoordinates"
|
|
placeholder="获取中..."
|
|
/>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<view class="">
|
|
<view class="flex">
|
|
<view>
|
|
<uni-icons
|
|
type="location"
|
|
color="rgb(19,147,235)"
|
|
size="20"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="classwz1"> 请确定损坏车辆当前位置 </view>
|
|
</view>
|
|
<view class="classwz2">
|
|
{{ address }}
|
|
</view>
|
|
<view class="classwz3"> 拖动地图可修改位置 </view>
|
|
</view>
|
|
</uni-card>
|
|
<view v-if="ebikeInfo.latitude & ebikeInfo.longitude" class="divmap">
|
|
<map-location
|
|
height="500px"
|
|
:lng="ebikeInfo.longitude"
|
|
:lat="ebikeInfo.latitude"
|
|
@change="changePoint"
|
|
/>
|
|
</view>
|
|
<you-touchbox
|
|
initTop="500"
|
|
minTop="220"
|
|
maxTop="5"
|
|
@get-end-detail="getEndDetail"
|
|
>
|
|
<scroll-view
|
|
class="scroll-container"
|
|
:scroll-y="isScrollY"
|
|
:style="{ height: scrollHeight + 'px' }"
|
|
>
|
|
<view class="">
|
|
<view class="containerup">
|
|
<view class="titleup">
|
|
<span>请选择车辆</span>
|
|
<span class="wzgl">损坏部位</span>
|
|
</view>
|
|
</view>
|
|
<uni-grid
|
|
:column="4"
|
|
:show-border="false"
|
|
:square="false"
|
|
:highlight="true"
|
|
@change="change"
|
|
>
|
|
<uni-grid-item
|
|
v-for="(item, index) in ebikelingjian"
|
|
:index="index"
|
|
:key="index"
|
|
>
|
|
<view
|
|
class="cheliangclassbox"
|
|
:class="item.isSelect ? 'border_color_select' : ''"
|
|
>
|
|
<uni-icons
|
|
custom-prefix="iconfont"
|
|
:type="item.path"
|
|
:size="25"
|
|
color="#777"
|
|
/>
|
|
</view>
|
|
<text class="text">{{ item.name }}</text>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
<view class="padding">
|
|
<uni-easyinput
|
|
type="textarea"
|
|
v-model="bzxx"
|
|
placeholder="其它想说的"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-section title="上传图片" type="line">
|
|
<view class="example-body">
|
|
<uni-file-picker
|
|
limit="9"
|
|
@select="selectImg"
|
|
@delete="delChangeImg"
|
|
:value="fileLists"
|
|
></uni-file-picker>
|
|
</view>
|
|
</uni-section>
|
|
</scroll-view>
|
|
<!-- <view style="height: 70px;"></view> -->
|
|
</you-touchbox>
|
|
</view>
|
|
|
|
<view class="nav-panel">
|
|
<uni-goods-nav
|
|
:fill="true"
|
|
:options="[]"
|
|
:buttonGroup="navButtonGroup"
|
|
@buttonClick="navButtonClick"
|
|
/>
|
|
</view>
|
|
<uni-popup ref="popup" class="unipopup" :mask-click="false">
|
|
<view v-if="popuptextlx == 1" class="bg-white boxcenter">
|
|
<view class="textbox"> 您已有当前车辆的待维修工单，是否进行维修？ </view>
|
|
<view class="example">
|
|
<view class="buttongroup">
|
|
<button @click="closePopup" class="cu-btn lg bg-blue">
|
|
仍然上报
|
|
</button>
|
|
<button @click="gotomaintenancepage" class="cu-btn lg bg-blue">
|
|
去维修
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="popuptextlx == 2" class="bg-white boxcenter">
|
|
<view class="textbox"> 当前车辆故障如下，可选择进行维修: </view>
|
|
<view class="textlist">
|
|
<scroll-view class="scroll-container" scroll-y style="height: 170px">
|
|
<view v-for="(item, index) in gzlist" :key="index">
|
|
<view class="flex gzboxlist">
|
|
<view @click="check(item, index)">
|
|
<aip-checkbox
|
|
:key="keys"
|
|
:check="item.checked"
|
|
v-if="true"
|
|
></aip-checkbox>
|
|
</view>
|
|
<view class="item">
|
|
<view class="wz14">
|
|
{{ item.faultPart }}
|
|
</view>
|
|
<view class="wz12">
|
|
{{ item.faultDescription }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="example">
|
|
<view class="buttongroup">
|
|
<button @click="closePopup" class="cu-btn lg bg-blue">
|
|
仍然上报
|
|
</button>
|
|
<button @click="createTicket" class="cu-btn lg bg-blue">
|
|
去维修
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from "vue";
|
|
import * as api from "@/utils/api.js";
|
|
import { showModelMessage } from "@/utils/tools.js";
|
|
import config from "../../../utils/config";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
|
import mapLocation from "@/pages/map/map-location.vue";
|
|
|
|
const ebikeInfo = ref({
|
|
bikeId: "",
|
|
bikeCode: "",
|
|
ecuId: "",
|
|
ecuSn: "",
|
|
longitude: "",
|
|
latitude: "",
|
|
});
|
|
|
|
const bikeCode = ref("");
|
|
const childComponent = ref(null);
|
|
const fileLists = ref([]);
|
|
const address = ref("");
|
|
|
|
const delChangeImg = (res) => {
|
|
const fileUniqueKey = fileLists.value[res.index].fileUniqueKey;
|
|
fileLists.value.splice(res.index, 1);
|
|
api.callEbikeInfo("deletedFile?fileUniqueKey=" + fileUniqueKey, {}, "get");
|
|
};
|
|
const isScrollY = ref(false);
|
|
const getEndDetail = ({ minTop, maxTop, curTop }) => {
|
|
if (curTop == maxTop) isScrollY.value = true;
|
|
else isScrollY.value = false;
|
|
};
|
|
const selectImg = (data) => {
|
|
const file = data.tempFiles[0];
|
|
api.fileUpload(file).then((res) => {
|
|
if (res.code == 200) {
|
|
fileLists.value.push(res.data);
|
|
} else {
|
|
if (fileLists.value.length > 0) {
|
|
fileLists.value.pop();
|
|
} else {
|
|
fileLists.value = [];
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const check = (item, index) => {
|
|
item.checked = !item.checked;
|
|
keys.value = keys.value == 1 ? 0 : 1;
|
|
};
|
|
const bzxx = ref("");
|
|
const ebikelingjian = ref([
|
|
{
|
|
name: "车轮",
|
|
path: "icon-ebikechelun",
|
|
id: 1,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "挡泥板",
|
|
path: "icon-ebikedangniban",
|
|
id: 2,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "电池",
|
|
path: "icon-ebikedianchi",
|
|
id: 3,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "脚撑",
|
|
path: "icon-ebikepart",
|
|
id: 4,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "开关锁",
|
|
path: "icon-ebikekaiguansuo-guan",
|
|
id: 5,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "链条",
|
|
path: "icon-ebikeliantiao",
|
|
id: 6,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "前蹬",
|
|
path: "icon-ebikerunning-shoes",
|
|
id: 7,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "刹车",
|
|
path: "icon-ebikedolly-empty",
|
|
id: 8,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "转把",
|
|
path: "icon-ebikeziyoushihuaxue",
|
|
id: 9,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "座椅",
|
|
path: "icon-ebikezuoyi",
|
|
id: 10,
|
|
isSelect: false,
|
|
},
|
|
{
|
|
name: "其它",
|
|
path: "icon-ebikeqita",
|
|
id: 11,
|
|
isSelect: false,
|
|
},
|
|
]);
|
|
const navButtonGroup = [
|
|
{
|
|
text: "确认提交",
|
|
backgroundColor: "#0078D4",
|
|
color: "#fff",
|
|
},
|
|
];
|
|
const bikeCodeScanChange = (bikeCode) => {
|
|
ebikeInfo.value.bikeCode = bikeCode;
|
|
api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
|
|
if (res.code == 200) {
|
|
ebikeInfo.value.bikeId = res.data.bikeId;
|
|
ebikeInfo.value.ecuId = res.data.ecuId;
|
|
ebikeInfo.value.ecuSn = res.data.ecuSn;
|
|
const ecuSn = res.data.ecuSn;
|
|
const params = {
|
|
receiver: userInfo.value.staffId,
|
|
bikeCode: bikeCode,
|
|
};
|
|
api.callEbikeInfo("inspectHaveOrNotWorkOrder", params).then((res) => {
|
|
if (res.code == 200) {
|
|
popuptextlx.value = 1;
|
|
popup.value.open("center");
|
|
} else {
|
|
api
|
|
.callEbikeInfo("getFaultReportList?bikeCode=" + bikeCode, "get")
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data != null && res.data.length > 0) {
|
|
gzlist.value = res.data;
|
|
popuptextlx.value = 2;
|
|
popup.value.open("center");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//获取车辆经纬度
|
|
api
|
|
.callCoreApi(
|
|
"gps?ecuId=" + res.data.ecuId + "&bikeId=" + ebikeInfo.value.bikeId,
|
|
{},
|
|
"get"
|
|
)
|
|
.then((res) => {
|
|
api
|
|
.callCoreApi("gpsMsg" + "?ecuSn=" + ecuSn, {}, "get")
|
|
.then((res) => {
|
|
currentCoordinates.value =
|
|
res.data.longitude + "," + res.data.latitude;
|
|
ebikeInfo.value.latitude = res.data.latitude;
|
|
ebikeInfo.value.longitude = res.data.longitude;
|
|
});
|
|
});
|
|
} else {
|
|
showModelMessage("车辆信息不存在，请重新扫描或输入车辆码");
|
|
ebikeInfo.value.bikeCode = "";
|
|
ebikeInfo.value.bikeId = "";
|
|
ebikeInfo.value.ecuId = "";
|
|
ebikeInfo.value.ecuSn = "";
|
|
childComponent.value.clearValue();
|
|
}
|
|
});
|
|
};
|
|
const change = (e) => {
|
|
let { index } = e.detail;
|
|
ebikelingjian.value[index].isSelect = !ebikelingjian.value[index].isSelect;
|
|
};
|
|
const gzlist = ref([]);
|
|
const keys = ref(0);
|
|
|
|
const checkscan = () => {
|
|
if (!ebikeInfo.value.bikeCode) {
|
|
showModelMessage("请先扫车辆码或输入车辆码");
|
|
return false;
|
|
}
|
|
if (!ebikeInfo.value.bikeId) {
|
|
showModelMessage("车辆信息不存在");
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
const navButtonClick = (index, content) => {
|
|
if (!checkscan()) {
|
|
return;
|
|
}
|
|
uni.showModal({
|
|
title: "确认提交",
|
|
content: "您确定要进行提交操作吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
let faultPart = ebikelingjian.value
|
|
.map((res) => (res.isSelect ? res.name : null))
|
|
.filter((name) => name !== null);
|
|
const params = {
|
|
bikeCode: ebikeInfo.value.bikeCode,
|
|
longitude: Number(ebikeInfo.value.longitude),
|
|
latitude: Number(ebikeInfo.value.latitude),
|
|
faultPart: faultPart.join("|"), //故障部件
|
|
faultDescription: bzxx.value, //其他说明
|
|
reportUser: userInfo.value.staffId, //上报人
|
|
// "reportUserName": userInfo.value.username, //上报人
|
|
reportSource: "运维端",
|
|
reqEbikeFaultReportFileDtos: fileLists.value,
|
|
};
|
|
api.callEbikeInfo("faultReporting", params).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "提交成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
//提交成功返回我的页面
|
|
uni.switchTab({
|
|
url: "/pages/mine/mine",
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "操作失败",
|
|
icon: "error",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log("用户取消出库");
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const userInfo = ref(null);
|
|
const closePopup = () => {
|
|
popup.value.close("center");
|
|
};
|
|
const gotomaintenancepage = () => {
|
|
uni.navigateTo({
|
|
url: `/pages/devops/maintenancepage/maintenancepage?bikeCode=${ebikeInfo.value.bikeCode}`,
|
|
});
|
|
};
|
|
const createTicket = () => {
|
|
//生成工单
|
|
const faultIds = gzlist.value
|
|
.filter((item) => item.checked === true)
|
|
.map((item) => item.faultReportId);
|
|
const params = {
|
|
bikeCode: ebikeInfo.value.bikeCode,
|
|
faultIds: faultIds,
|
|
receiverId: userInfo.value.staffId,
|
|
};
|
|
api.callEbikeInfo("createWorkOrder", params).then((res) => {
|
|
if (res.code == 200) {
|
|
//工单生成成功 跳转
|
|
closePopup();
|
|
setTimeout(() => {
|
|
gotomaintenancepage();
|
|
}, 200);
|
|
}
|
|
});
|
|
};
|
|
|
|
const popuptextlx = ref(1);
|
|
const typepopup = ref("center");
|
|
const popup = ref(null);
|
|
const scrollHeight = ref(0);
|
|
const currentCoordinates = ref(null);
|
|
onLoad((options) => {
|
|
userInfo.value = uni.getStorageSync("userInfo");
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
const screenHeight = systemInfo.screenHeight;
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
|
scrollHeight.value = screenHeight - statusBarHeight - 130;
|
|
if (options.bikeCode) {
|
|
bikeCode.value = options.bikeCode;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (bikeCode.value != "") {
|
|
if (childComponent.value) {
|
|
childComponent.value.onSetValue(bikeCode.value); // 调用子组件暴露的方法来更新子组件值
|
|
}
|
|
bikeCodeScanChange(bikeCode.value);
|
|
}
|
|
uni.getLocation({
|
|
type: "wgs84", // 返回 wgs84 格式的经纬度
|
|
success: function (res) {
|
|
ebikeInfo.value.latitude = res.latitude;
|
|
ebikeInfo.value.longitude = res.longitude;
|
|
currentCoordinates.value = res.longitude + "," + res.latitude;
|
|
},
|
|
fail: function (err) {
|
|
console.log("获取位置失败：", err);
|
|
},
|
|
});
|
|
});
|
|
|
|
const changePoint = (res) => {
|
|
address.value = res.address;
|
|
currentCoordinates.value = res.location.lng + "," + res.location.lat;
|
|
ebikeInfo.value.latitude = res.location.lat;
|
|
ebikeInfo.value.longitude = res.location.lng;
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
height: 100vh;
|
|
padding: 0px 0px;
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.example {
|
|
text-align: center;
|
|
}
|
|
|
|
.titleup {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.titleup .wzgl {
|
|
color: rgb(46, 146, 255);
|
|
}
|
|
|
|
.cheliangclassbox {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: solid 2px rgb(227, 227, 227);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.border_color_select {
|
|
border: solid 2px rgb(16, 130, 255);
|
|
}
|
|
|
|
.uni-grid-item__box {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.nav-panel {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
padding-bottom: 20px;
|
|
background-color: #fff;
|
|
z-index: 105;
|
|
}
|
|
|
|
.dialog-box {
|
|
padding: 10px;
|
|
}
|
|
|
|
.boxcenter {
|
|
width: 290px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.buttongroup {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.buttongroup button {
|
|
width: 45%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.textbox {
|
|
width: 100%;
|
|
padding: 15px 5px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.textlist {
|
|
height: 180px;
|
|
}
|
|
|
|
.gzboxlist {
|
|
width: 100%;
|
|
padding: 0px;
|
|
height: 50px;
|
|
border: solid 1px rgb(229, 229, 229);
|
|
align-items: center;
|
|
margin: 6px 0px;
|
|
}
|
|
|
|
.wz14 {
|
|
font-size: 14px;
|
|
line-height: 15px;
|
|
}
|
|
|
|
.wz12 {
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
color: rgb(191, 191, 191);
|
|
}
|
|
|
|
.unipopup .uni-popup {
|
|
z-index: 199;
|
|
}
|
|
|
|
.classtb {
|
|
}
|
|
|
|
.classwz1 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
.classwz2 {
|
|
font-size: 13px;
|
|
color: #5a5a5a;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.classwz3 {
|
|
font-size: 12px;
|
|
margin-left: 20px;
|
|
color: #b8b8b8;
|
|
}
|
|
|
|
.divmap {
|
|
width: 100%;
|
|
height: 500px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.example-body {
|
|
padding: 0 25rpx;
|
|
}
|
|
</style>
|