694 lines
16 KiB
Vue
694 lines
16 KiB
Vue
<template>
|
|
<view class="addIssue">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true">
|
|
<view class="headerName">
|
|
{{policeCameraInfo.devName}}
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
|
<SwiperVideo v-show="!showDetail" ref="swiperVideoRef" @videoClick="videoClick" :height="800"
|
|
:list="videoList" mode="number" @retryVideo="onRetryClick" :autoplay="false" />
|
|
<scroll-view scroll-y="true"
|
|
:style="{height: `calc(100% - ${mobileTopHeight + 44}px - 120rpx - 52rpx)`, top: `${mobileTopHeight + 44}px`}"
|
|
v-show="showDetail" class="main-box">
|
|
<view class="box-item">
|
|
<view>设备名称:</view>
|
|
<view>{{policeCameraInfo.devName}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>设备编号:</view>
|
|
<view>{{policeCameraInfo.devSn}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>所属项目:</view>
|
|
<view>{{projectSnName}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>设备状态:</view>
|
|
<view class="state-box" :class="{ 'state-box_offline': policeCameraInfo.deviceState != 1 }">
|
|
{{policeCameraInfo.deviceState == 1 ? "在线" : "离线"}}
|
|
</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>风险状态:</view>
|
|
<view class="state-box" :class="{ 'gfx_active': workTicketInfo.riskType == 2 }">
|
|
{{workTicketInfo.riskType == 2 ? "高风险" : "一般风险"}}
|
|
</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>工作票类型:</view>
|
|
<view>{{workTicketInfo.typeName}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>工作票编号:</view>
|
|
<view>{{workTicketInfo.workTicketNumber}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>施工区域:</view>
|
|
<view>{{workTicketInfo.constructionAreaNames}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>申请单位:</view>
|
|
<view>{{workTicketInfo.applicantNames}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>作业人员:</view>
|
|
<view>{{workTicketInfo.operator}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>施工计划时间:</view>
|
|
<view>{{workTicketInfo.constructionTimeBegin}}至{{workTicketInfo.constructionTimeEnd}}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>申请时间:</view>
|
|
<view>{{workTicketInfo.applicationTime}}</view>
|
|
</view>
|
|
<!-- <view class="box-content">
|
|
<view>安全措施:</view>
|
|
<view v-if="lineHeightFlag2"
|
|
@click="workTicketInfo.expandMoreShow1 = !workTicketInfo.expandMoreShow1">
|
|
{{workTicketInfo.expandMoreShow1 ? '收起': '展开更多'}}
|
|
</view>
|
|
</view>
|
|
<view :class="{'webkit-clamp_2': lineHeightFlag2 && !workTicketInfo.expandMoreShow1}"
|
|
id="box-content_detail2" class="box-content_detail">
|
|
{{workTicketInfo.safetyMeasure}}
|
|
</view> -->
|
|
<view class="box-content">
|
|
<view>作业内容:</view>
|
|
<view v-if="lineHeightFlag1"
|
|
@click="workTicketInfo.expandMoreShow = !workTicketInfo.expandMoreShow">
|
|
{{workTicketInfo.expandMoreShow ? '收起': '展开更多'}}
|
|
</view>
|
|
</view>
|
|
<view :class="{'webkit-clamp_2': lineHeightFlag1 && !workTicketInfo.expandMoreShow}"
|
|
id="box-content_detail1" class="box-content_detail">
|
|
{{workTicketInfo.workContent}}
|
|
</view>
|
|
|
|
<!-- <view class="box-item">
|
|
<view>当前绑定监控:</view>
|
|
<view>{{ itemListDevNameUp }}</view>
|
|
</view>
|
|
<view class="box-item">
|
|
<view>施工地点:</view>
|
|
<view>{{workTicketInfo.constructionAddr}}</view>
|
|
</view> -->
|
|
|
|
<!-- 敦煌升级 -->
|
|
<!-- <view class="box-item">
|
|
<view>班组:</view>
|
|
<view>{{workTicketInfo.teamNames}}</view>
|
|
</view> -->
|
|
|
|
|
|
<view class="box-img">
|
|
<view>作业票附件:</view>
|
|
<view class="imgBox_wrap">
|
|
<view class="imgBox" v-show="workTicketAttachmentList.length>0"
|
|
v-for="(item,index) in workTicketAttachmentList" :key="index">
|
|
<image :src="url_config+'image/'+item.url" class="img"
|
|
@click="previewImage(url_config+'image/'+item.url)">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-img">
|
|
<view>其他附件:</view>
|
|
<view class="imgBox_wrap_list">
|
|
<view class="imgBox_list imgBox_list_active" @click="previewImage(url_config+'image/'+item.url)"
|
|
v-show="otherAttachmentList.length>0" v-for="(item,index) in otherAttachmentList"
|
|
:key="index">
|
|
<view>
|
|
<u-icon name="file-text"></u-icon>
|
|
<view>{{item.name}}</view>
|
|
</view>
|
|
<view @click.stop="deleteImg(item,3)">
|
|
下载
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="content-footer">
|
|
<!-- <view class="" @click="onVideoStop">
|
|
<image src="/static/stop-icon.png" mode=""></image>
|
|
</view> -->
|
|
<view :class="{'showDetail': showDetail}" @click="getDetail">
|
|
<image src="/static/detail-icon.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SwiperVideo from "@/components/u-swiper/swiper-video.vue"
|
|
export default {
|
|
components: {
|
|
SwiperVideo,
|
|
},
|
|
data() {
|
|
return {
|
|
mobileTopHeight: 0,
|
|
projectDetail: {},
|
|
userInfo: {},
|
|
list: [],
|
|
itemId: "",
|
|
policeCameraInfo: {},
|
|
workTicketInfo: {
|
|
workTicketNumber: "",
|
|
applicants: [],
|
|
applicantsName: "",
|
|
constructionAreas: [],
|
|
constructionAreasName: "",
|
|
applicationTime: "",
|
|
constructionTimeBegin: "",
|
|
constructionTimeEnd: "",
|
|
operatorsName: "",
|
|
operators: [],
|
|
workContent: "",
|
|
safetyMeasure: "",
|
|
},
|
|
workTicketAttachmentList: [],
|
|
safetyRiskAnalysisList: [],
|
|
otherAttachmentList: [],
|
|
lineHeightFlag1: false,
|
|
lineHeightFlag2: false,
|
|
showDetail: false,
|
|
itemDetailList: [],
|
|
projectList: [],
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
// this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
|
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
|
|
|
if (opts.itemId) {
|
|
this.itemId = opts.itemId;
|
|
this.getPoliceCameraItemQueryById();
|
|
}
|
|
if (opts.itemIdList) {
|
|
const itemIdList = JSON.parse(opts.itemIdList);
|
|
itemIdList.forEach(item => {
|
|
this.getPoliceCameraItemQueryById(item);
|
|
})
|
|
}
|
|
this.getSelectAllProjectInfoList();
|
|
},
|
|
mounted() {
|
|
var that = this
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|
uni.setStorageSync('systemInfo', res)
|
|
console.log(res)
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
onRetryClick(url, index) {
|
|
console.log("触发了", url, index);
|
|
const find = this.videoList[index].find(item => item.url == url);
|
|
if (find) {
|
|
console.log("触发了", find);
|
|
var that = this
|
|
var json = {
|
|
itemId: find.itemId,
|
|
streamType: find.defaultStreamType,
|
|
type: "rtsp",
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/policeCameraItem/getVideoItemInfo",
|
|
data: {
|
|
...json,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
find.url = res.result.videoInfo ? res.result.videoInfo.url : "";
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onVideoStop() {
|
|
this.$refs.swiperVideoRef.stopVideo();
|
|
},
|
|
videoClick(row) {
|
|
const find = this.itemDetailList.find(item => item.itemId == row.itemId);
|
|
this.policeCameraInfo = find ? find : {};
|
|
},
|
|
// 通过id查询视频设备详情
|
|
getPoliceCameraItemQueryById(itemId) {
|
|
let data = {
|
|
itemId: itemId ? itemId : this.itemId,
|
|
}
|
|
this.sendRequest({
|
|
url: 'xmgl/policeCameraItem/queryById',
|
|
method: 'get',
|
|
data: data,
|
|
success: res => {
|
|
uni.hideLoading()
|
|
if (res.code == 200) {
|
|
if (itemId) {
|
|
this.itemDetailList.push(res.result)
|
|
} else {
|
|
this.policeCameraInfo = res.result;
|
|
}
|
|
this.getPlayUrl(res.result);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getPlayUrl(row) {
|
|
var that = this
|
|
var json = {
|
|
itemId: row.itemId,
|
|
// itemId: "1978266066171613186",
|
|
streamType: row.defaultStreamType,
|
|
type: "rtsp",
|
|
}
|
|
// json.streamType = this.streamType;
|
|
this.sendRequest({
|
|
url: "xmgl/policeCameraItem/getVideoItemInfo",
|
|
data: {
|
|
...json,
|
|
},
|
|
method: "post",
|
|
success(res) {
|
|
that.list.push({
|
|
itemId: res.result.videoInfo ? res.result.videoInfo.itemId : "",
|
|
defaultStreamType: row.defaultStreamType ? row.defaultStreamType : "",
|
|
url: res.result.videoInfo ? res.result.videoInfo.url : "",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getDetail() {
|
|
var that = this;
|
|
this.showDetail = !this.showDetail;
|
|
if (!this.showDetail) return;
|
|
this.sendRequest({
|
|
url: 'xmgl/workTicket/queryById',
|
|
method: 'GET',
|
|
data: {
|
|
id: this.policeCameraInfo.workTicketId,
|
|
},
|
|
success: res => {
|
|
if (res.code == 200) {
|
|
that.workTicketInfo = {
|
|
...res.result,
|
|
expandMoreShow: false,
|
|
expandMoreShow1: false,
|
|
itemList: res.result.itemList ? res.result.itemList.map(item => {
|
|
return {
|
|
...item,
|
|
label: item.devName,
|
|
value: item.itemId
|
|
}
|
|
}) : [],
|
|
};
|
|
that.otherAttachmentList = res.result.otherAttachment && Array.isArray(JSON
|
|
.parse(
|
|
res.result.otherAttachment)) ? JSON.parse(res.result
|
|
.otherAttachment) : [];
|
|
that.safetyRiskAnalysisList = res.result.safetyRiskAnalysis && Array
|
|
.isArray(JSON
|
|
.parse(res.result.safetyRiskAnalysis)) ? JSON.parse(res.result
|
|
.safetyRiskAnalysis) : [];
|
|
that.workTicketAttachmentList = res.result.workTicketAttachment && Array
|
|
.isArray(
|
|
JSON.parse(res.result.workTicketAttachment)) ? JSON.parse(res
|
|
.result
|
|
.workTicketAttachment) : [];
|
|
setTimeout(() => {
|
|
that.getLineCount();
|
|
}, 500)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getLineCount() {
|
|
const that = this;
|
|
uni.createSelectorQuery().in(this).select('#box-content_detail1').boundingClientRect(rect => {
|
|
if (rect) {
|
|
let lineHeight = parseInt(rect.height / uni.upx2px(20));
|
|
if (lineHeight > 2) {
|
|
that.lineHeightFlag1 = true;
|
|
}
|
|
}
|
|
}).exec();
|
|
uni.createSelectorQuery().in(this).select('#box-content_detail2').boundingClientRect(rect => {
|
|
if (rect) {
|
|
let lineHeight = parseInt(rect.height / uni.upx2px(20));
|
|
if (lineHeight > 2) {
|
|
that.lineHeightFlag2 = true;
|
|
}
|
|
}
|
|
}).exec();
|
|
},
|
|
convertTo2DArray(arr, chunkSize = 6) {
|
|
return arr.reduce((result, item, index) => {
|
|
const chunkIndex = Math.floor(index / chunkSize);
|
|
|
|
if (!result[chunkIndex]) {
|
|
result[chunkIndex] = [];
|
|
}
|
|
|
|
result[chunkIndex].push(item);
|
|
return result;
|
|
}, []);
|
|
},
|
|
// 获取所有项目
|
|
getSelectAllProjectInfoList() {
|
|
let data = {
|
|
sn: this.userInfo.sn,
|
|
}
|
|
|
|
this.sendRequest({
|
|
url: 'xmgl/project/selectAllProjectInfoList',
|
|
method: 'post',
|
|
data: data,
|
|
success: res => {
|
|
uni.hideLoading()
|
|
if (res.code == 200) {
|
|
this.projectList = res.result;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//预览图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url]
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
itemListDevNameUp() {
|
|
return this.workTicketInfo.itemList ? this.workTicketInfo.itemList.map(item => item.devName).join('、') : ""
|
|
},
|
|
videoList() {
|
|
const resultList = this.convertTo2DArray(this.list);
|
|
return resultList;
|
|
},
|
|
projectSnName() {
|
|
const find = this.projectList.find((item) => item.projectSn == this.workTicketInfo.projectSn);
|
|
return find ? find.projectName : "";
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.showDetail {
|
|
background-color: #5190EC !important;
|
|
}
|
|
|
|
.main-box {
|
|
padding: 26rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100% - 52rpx);
|
|
background: rgba(17, 0, 0, 0.9);
|
|
z-index: 20;
|
|
|
|
.box-content_detail {
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.webkit-clamp_2 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* 限制为两行 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.box-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 26rpx;
|
|
font-size: 28rpx;
|
|
|
|
>view:last-child {
|
|
font-size: 24rpx;
|
|
color: #4D8EEC;
|
|
}
|
|
|
|
>view:first-child {
|
|
font-size: 28rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
}
|
|
|
|
.box-img {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 26rpx;
|
|
font-size: 28rpx;
|
|
|
|
>view:first-child {
|
|
width: 192rpx;
|
|
margin-right: 26rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.imgBox_wrap_list {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
|
|
.imgBox_list {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14rpx 26rpx 14rpx 40rpx;
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.u-icon {
|
|
font-size: 40rpx;
|
|
color: #B3B3B3;
|
|
}
|
|
|
|
>view:last-child {
|
|
margin-left: 14rpx;
|
|
width: 320rpx;
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
>view:last-child {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #4D8EEC;
|
|
}
|
|
}
|
|
|
|
.imgBox_list:nth-child(even) {
|
|
background-color: #FBFBFB;
|
|
}
|
|
|
|
.imgBox_list:nth-child(odd) {
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.imgBox_wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: calc(192rpx + 28rpx);
|
|
flex: 1;
|
|
|
|
>view:not(:last-child) {
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
>view {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.imgBox {
|
|
width: 164rpx;
|
|
height: 164rpx;
|
|
display: inline-flex;
|
|
position: relative;
|
|
border-radius: 8rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.box-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 26rpx;
|
|
font-size: 28rpx;
|
|
|
|
>view:first-child {
|
|
width: 192rpx;
|
|
margin-right: 26rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
>view:last-child {
|
|
flex: 1;
|
|
color: #FFFFFF;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 限制为两行 */
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.state-box {
|
|
padding: 8rpx 16rpx;
|
|
min-width: 120rpx;
|
|
color: white;
|
|
background-color: #88cf65;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
flex: initial !important;
|
|
}
|
|
|
|
.state-box_offline {
|
|
background-color: #f7f7f7;
|
|
color: #272d45 !important;
|
|
}
|
|
|
|
.gfx_active {
|
|
background-color: #ff0000;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.box-item1>view:last-child {
|
|
font-weight: 800;
|
|
font-size: 30rpx;
|
|
color: #171717;
|
|
}
|
|
|
|
/deep/ .u-input {
|
|
width: 550rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #D8DBE8;
|
|
}
|
|
|
|
.changetime {
|
|
width: 550rpx;
|
|
height: 68rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #D8DBE8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 34rpx;
|
|
font-size: 28rpx;
|
|
color: #4D4D4D;
|
|
|
|
.changetime_icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background-image: url('@/static/workTicketManage/index-icon7.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.textarea {
|
|
position: relative;
|
|
|
|
/deep/ .u-input {
|
|
height: 160rpx;
|
|
line-height: 68rpx;
|
|
}
|
|
|
|
.textarea_text {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
font-size: 22rpx;
|
|
color: #B3B3B3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding-bottom: 120rpx;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.content-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20rpx 114rpx;
|
|
|
|
>view {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #353535;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>uni-image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addIssue {
|
|
min-height: 100vh;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
/deep/ .headerBox {
|
|
background-color: #000000;
|
|
border-bottom: none;
|
|
color: white;
|
|
|
|
.uni-icons {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
.headerName {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
</style> |