master
parent
64da919969
commit
30fa68e841
@ -1,380 +1,354 @@
|
||||
<template>
|
||||
<view class="info">
|
||||
<u-navbar
|
||||
title="工单详情"
|
||||
:autoBack="true"
|
||||
:bgColor="background"
|
||||
titleStyle="color:#fff"
|
||||
leftIconColor="#fff"
|
||||
:placeholder="true"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">工单状态:</view>
|
||||
<view class="cell-value state">
|
||||
<image
|
||||
v-if="info.case_state == 1"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_wtg@2x.png"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
<image
|
||||
v-if="info.case_state == 2"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_ytg@2x.png"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
<text :class="'caseState' + info.case_state">{{
|
||||
<view class="info">
|
||||
<u-navbar title="工单详情" :autoBack="true" :bgColor="background" titleStyle="color:#fff" leftIconColor="#fff"
|
||||
:placeholder="true">
|
||||
<view class="" slot="right" style="color: white" @click="clickForm()" v-show="info.case_state == 1">整改
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">工单状态:</view>
|
||||
<view class="cell-value state">
|
||||
<image v-if="info.case_state == 1"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_wtg@2x.png" mode="widthFix">
|
||||
</image>
|
||||
<image v-if="info.case_state == 2"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_ytg@2x.png" mode="widthFix">
|
||||
</image>
|
||||
<text :class="'caseState' + info.case_state">{{
|
||||
info.case_state == 1 ? "待处理" : "已处理"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规类型:</view>
|
||||
<view class="cell-value type">{{ iconTitle[info.eventname] }}</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">所属单位:</view>
|
||||
<view class="cell-value">盛泽</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规图片:</view>
|
||||
</view>
|
||||
<view class="canvas-box">
|
||||
<image
|
||||
:src="Image"
|
||||
mode="aspectFit"
|
||||
@click="showIamge(info.photo)"
|
||||
></image>
|
||||
<div
|
||||
class="redBorder"
|
||||
v-show="imglabel.length > 0"
|
||||
:style="{
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规类型:</view>
|
||||
<view class="cell-value type">{{ iconTitle[info.eventname] }}</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">所属单位:</view>
|
||||
<view class="cell-value">苏州城投环境科技发展有限公司</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规图片:</view>
|
||||
</view>
|
||||
<view class="canvas-box">
|
||||
<image :src="Image" mode="aspectFit" @click="showIamge(Image)"></image>
|
||||
<div class="redBorder" v-show="imglabel.length > 0" :style="{
|
||||
height: item.heightBox + 'rpx',
|
||||
width: item.widthBox + 'rpx',
|
||||
left: item.left + 'rpx',
|
||||
top: item.top + 'rpx',
|
||||
}"
|
||||
v-for="(item, i) in imglabel"
|
||||
:key="i"
|
||||
>
|
||||
<div class="kexin">
|
||||
<span>{{ item.kexin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view v-show="info.case_state == 2">
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">处理图片:</view>
|
||||
</view>
|
||||
<view class="state2-img">
|
||||
<img
|
||||
:src="info.handlephoto"
|
||||
alt=""
|
||||
@click="showIamge(info.handlephoto)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">备注:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.detail }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规时间:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.create_time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规地点:</view>
|
||||
<view class="cell-value address">
|
||||
{{ info.address }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="map-box"> -->
|
||||
<map
|
||||
id="map"
|
||||
style="width: 750rpx; height: 260px"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
subkey="TYBBZ-A2AKV-MLZPW-UFNQI-HKNVE-BEFZH"
|
||||
:markers="markers"
|
||||
></map>
|
||||
<!-- <cover-view>
|
||||
导航
|
||||
</cover-view> -->
|
||||
<!-- <view class="map_btn" @click="getLoaction()">
|
||||
<button>导航</button>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
<cover-view
|
||||
class="submit"
|
||||
@click="clickForm()"
|
||||
v-show="info.case_state == 1"
|
||||
>
|
||||
<!-- <submit title="提交整改" /> -->
|
||||
提交
|
||||
</cover-view>
|
||||
</view>
|
||||
}" v-for="(item, i) in imglabel" :key="i">
|
||||
<div class="kexin">
|
||||
<span>{{ item.kexin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view v-show="info.case_state == 2">
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">处理图片:</view>
|
||||
</view>
|
||||
<view class="state2-img">
|
||||
<image :src="baseUrl + info.handlephoto" alt="" @click="showIamge(baseUrl + info.handlephoto)"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">备注:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.detail }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规时间:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.create_time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规地点:</view>
|
||||
<view class="cell-value address">
|
||||
{{ info.address }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="map-box"> -->
|
||||
<map id="map" style="width: 750rpx; height: 260px" :latitude="latitude" :longitude="longitude"
|
||||
subkey="TYBBZ-A2AKV-MLZPW-UFNQI-HKNVE-BEFZH" :markers="markers">
|
||||
<cover-view class="map-buttom" @click="getLoaction()"> 导航 </cover-view>
|
||||
</map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCaseInfo } from "@/api/work/index.js";
|
||||
import submit from "@/components/subBottom/subBottom.vue";
|
||||
import iconTitle from "@/utils/iconType.js";
|
||||
export default {
|
||||
components: {
|
||||
submit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "#ffffff",
|
||||
backShow: true,
|
||||
background:
|
||||
"url(http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img@2x.png)",
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
scale: 7,
|
||||
height: null,
|
||||
infoId: null,
|
||||
iconTitle: iconTitle,
|
||||
info: {},
|
||||
markers: [],
|
||||
Image: "",
|
||||
imglabel: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 阅览照片
|
||||
showIamge(url) {
|
||||
let list = [];
|
||||
list[0] = url;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: list,
|
||||
});
|
||||
},
|
||||
clickForm() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/workForm/workForm?id=${this.info.id}`,
|
||||
});
|
||||
},
|
||||
//获取详情
|
||||
getInfo() {
|
||||
getCaseInfo(this.infoId).then((res) => {
|
||||
this.info = res.data;
|
||||
// console.log('数据详情', this.info)
|
||||
(this.latitude = this.info.lat),
|
||||
(this.longitude = this.info.lng),
|
||||
(this.Image = this.info.photo);
|
||||
if (this.info.zb) {
|
||||
let zb = JSON.parse(this.info.zb);
|
||||
zb.forEach((item, index) => {
|
||||
this.imglabel[index] = {
|
||||
widthBox: (item[2] - item[0]) / 2.56,
|
||||
heightBox: (item[3] - item[1]) / 2.56,
|
||||
left: item[0] / 2.56,
|
||||
top: item[1] / 2.56,
|
||||
kexin: item[4],
|
||||
};
|
||||
});
|
||||
}
|
||||
import {
|
||||
getCaseInfo
|
||||
} from "@/api/work/index.js";
|
||||
import submit from "@/components/subBottom/subBottom.vue";
|
||||
import iconTitle from "@/utils/iconType.js";
|
||||
import config from "@/config";
|
||||
export default {
|
||||
components: {
|
||||
submit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
baseUrl: config.baseUrl,
|
||||
color: "#ffffff",
|
||||
backShow: true,
|
||||
background: "url(http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img@2x.png)",
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
scale: 7,
|
||||
height: null,
|
||||
infoId: null,
|
||||
iconTitle: iconTitle,
|
||||
info: {},
|
||||
markers: [],
|
||||
Image: "",
|
||||
imglabel: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 阅览照片
|
||||
showIamge(url) {
|
||||
let list = [];
|
||||
list[0] = url;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: list,
|
||||
});
|
||||
},
|
||||
clickForm() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/workForm/workForm?id=${this.info.id}`,
|
||||
});
|
||||
},
|
||||
//获取详情
|
||||
getInfo() {
|
||||
getCaseInfo(this.infoId).then((res) => {
|
||||
this.info = res.data;
|
||||
// console.log('数据详情', this.info)
|
||||
this.latitude = this.info.lat
|
||||
this.longitude = this.info.lng
|
||||
this.Image = this.baseUrl + this.info.photo
|
||||
if (this.info.zb) {
|
||||
let zb = JSON.parse(this.info.zb);
|
||||
zb.forEach((item, index) => {
|
||||
this.imglabel[index] = {
|
||||
widthBox: (item[2] - item[0]) / 2.56,
|
||||
heightBox: (item[3] - item[1]) / 2.56,
|
||||
left: item[0] / 2.56,
|
||||
top: item[1] / 2.56,
|
||||
kexin: item[4],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
this.markers = [
|
||||
{
|
||||
id: this.info.id,
|
||||
latitude: this.info.lat,
|
||||
longitude: this.info.lng,
|
||||
width: 25,
|
||||
height: 30,
|
||||
iconPath:
|
||||
"http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/map_location@2x.png",
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
this.markers = [{
|
||||
id: this.info.id,
|
||||
latitude: this.info.lat,
|
||||
longitude: this.info.lng,
|
||||
width: 25,
|
||||
height: 30,
|
||||
iconPath: "http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/map_location@2x.png",
|
||||
}, ];
|
||||
});
|
||||
},
|
||||
|
||||
//调用导航软件服务
|
||||
getLoaction() {
|
||||
uni.openLocation({
|
||||
latitude: parseInt(this.latitude),
|
||||
longitude: parseInt(this.longitude),
|
||||
name: this.info.address,
|
||||
address: this.info.address,
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(query) {
|
||||
this.infoId = query.id;
|
||||
},
|
||||
onShow() {
|
||||
this.imglabel = [];
|
||||
this.getInfo();
|
||||
},
|
||||
};
|
||||
//调用导航软件服务
|
||||
getLoaction() {
|
||||
uni.openLocation({
|
||||
latitude: Number(this.latitude),
|
||||
longitude: Number(this.longitude),
|
||||
|
||||
name: this.info.address,
|
||||
address: this.info.address,
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(query) {
|
||||
this.infoId = query.id;
|
||||
},
|
||||
onShow() {
|
||||
this.imglabel = [];
|
||||
this.getInfo();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item-cell {
|
||||
min-height: 134rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-left: 37rpx;
|
||||
|
||||
.item-cell {
|
||||
min-height: 134rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-left: 37rpx;
|
||||
.cell-lable {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
width: 160rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.cell-lable {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
width: 160rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
.cell-value {
|
||||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #8b9097;
|
||||
box-sizing: border-box;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #8b9097;
|
||||
}
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
text {
|
||||
font-weight: 500;
|
||||
color: #f98552;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
color: #f98552;
|
||||
}
|
||||
}
|
||||
.type {
|
||||
color: #3b76ee;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #3b76ee;
|
||||
}
|
||||
.beizhu {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 10rpx;
|
||||
padding-right: 20rpx;
|
||||
line-height: 60rpx;
|
||||
min-height: 250rpx;
|
||||
}
|
||||
|
||||
.beizhu {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 10rpx;
|
||||
padding-right: 20rpx;
|
||||
line-height: 60rpx;
|
||||
min-height: 250rpx;
|
||||
}
|
||||
.address {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.state2-img {
|
||||
height: 421rpx;
|
||||
|
||||
.state2-img {
|
||||
height: 421rpx;
|
||||
image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.canvas-box {
|
||||
// margin: 20rpx 0;
|
||||
height: 421rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.canvas-box {
|
||||
// margin: 20rpx 0;
|
||||
height: 421rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.redBorder {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border: 2rpx solid red;
|
||||
|
||||
.redBorder {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border: 2rpx solid red;
|
||||
.kexin {
|
||||
position: relative;
|
||||
|
||||
.kexin {
|
||||
position: relative;
|
||||
span {
|
||||
background: black;
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
background: black;
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// map {
|
||||
// width: 750rpx !important;
|
||||
// height: 495rpx !important;
|
||||
// }
|
||||
|
||||
// map {
|
||||
// width: 750rpx !important;
|
||||
// height: 495rpx !important;
|
||||
// }
|
||||
.map_btn {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 140rpx;
|
||||
height: 68rpx;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
|
||||
.map_btn {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 140rpx;
|
||||
height: 68rpx;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
button {
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 34rpx;
|
||||
background: linear-gradient(90deg, #36b751, #36b77f);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 34rpx;
|
||||
background: linear-gradient(90deg, #36b751, #36b77f);
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-buttom {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 25rpx;
|
||||
width: 100rpx;
|
||||
height: 55rpx;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
border-radius: 17px;
|
||||
background: #5a9df0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
/* #ifdef APP-PLUS */
|
||||
line-height: 45rpx;
|
||||
/* #endif */
|
||||
|
||||
.submit {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0%;
|
||||
z-index: 1000;
|
||||
border-top: 1rpx solid #ececec;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
/* #ifdef H5 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.caseState1 {
|
||||
color: #ff4e77 !important;
|
||||
}
|
||||
.caseState1 {
|
||||
color: #ff4e77 !important;
|
||||
}
|
||||
|
||||
.caseState2 {
|
||||
color: #57b800 !important;
|
||||
}
|
||||
</style>
|
||||
.caseState2 {
|
||||
color: #57b800 !important;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 332 KiB |
Loading…
Reference in new issue