546 lines
12 KiB
Vue
546 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="listPage">
|
|||
|
|
<view class="fixedheader">
|
|||
|
|
<headers :showBack="true">
|
|||
|
|
<view class="headerName">
|
|||
|
|
巡检点
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<view class="searchBox">
|
|||
|
|
<form>
|
|||
|
|
<view class="uni-form-item">
|
|||
|
|
<input class="uni-input" name="searchName" v-model="condition.search" placeholder="输入巡检点名称、所属区域、责任人" />
|
|||
|
|
<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
|
|||
|
|
</view>
|
|||
|
|
</form>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content" :style="{paddingTop: (mobileTopHeight + 100) * 1.5 + 'rpx'}">
|
|||
|
|
<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index"
|
|||
|
|
@click="goDetails(item)">
|
|||
|
|
<image class="safety_ic" src="@/static/icon/safety.png"></image>
|
|||
|
|
<view class="item_left">
|
|||
|
|
<view class="card_title">
|
|||
|
|
<text class="title">{{item.checkingPointName}}</text>
|
|||
|
|
<text class="value">（{{item.regionName}}）</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_title">
|
|||
|
|
<text class="label">巡检位置：</text>
|
|||
|
|
<text class="value">{{item.position}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_title">
|
|||
|
|
<text class="label">最低巡检时长(分钟)：</text>
|
|||
|
|
<text class="value">{{item.minInspectTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_title">
|
|||
|
|
<text class="label">创建人：</text>
|
|||
|
|
<text class="value">{{item.createUserName}}</text>
|
|||
|
|
<text class="label wrap">（{{item.createDate}}）</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_title">
|
|||
|
|
<text class="label">责任企业：</text>
|
|||
|
|
<text class="value wrap">{{item.enterpriseName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card_title">
|
|||
|
|
<view class="plan_duty">
|
|||
|
|
<image src="@/static/plan_duty.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<text class="label">责任人：</text>
|
|||
|
|
<text class="value">{{item.inspectUserNames}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item_right">
|
|||
|
|
<image :src="url_config+'image/'+item.qrCode" class="qrcode_img"></image>
|
|||
|
|
<view class="text_wrap">
|
|||
|
|
<image class="d_ic" src="@/static/icon/riLine-download-line.svg"></image>
|
|||
|
|
<view class="d_text" @click.stop="saveImage(url_config+'image/'+item.qrCode)">下载二维码</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_wrap">
|
|||
|
|
<view class="common_btn primary" @click.stop="handleEdit(item)"><image class="b_ic" src="@/static/icon/edit.svg"></image></view>
|
|||
|
|
<view class="common_btn danger" @click.stop="handleDel(item)"><image class="b_ic" src="@/static/icon/delete.svg"></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="noData" v-if="listData.length==0">
|
|||
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|||
|
|
<view>暂无数据</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<image class="add_btn" @click="handleAdd" src="@/static/addImg.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import dateTimePiccker from '@/components/dateTimePicker/index.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
dateTimePiccker
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
mobileTopHeight: 0,
|
|||
|
|
listNum: 0,
|
|||
|
|
listData: [],
|
|||
|
|
condition: {
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
projectSn: "",
|
|||
|
|
search: '', //搜索字段
|
|||
|
|
},
|
|||
|
|
teach: true,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
var that = this
|
|||
|
|
uni.getSystemInfo({
|
|||
|
|
success(res) {
|
|||
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|||
|
|
uni.setStorageSync('systemInfo',res)
|
|||
|
|
console.log(res)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
console.log('this.mobileTopHeight',this.mobileTopHeight)
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.listData = [];
|
|||
|
|
this.condition.pageNo = 1;
|
|||
|
|
this.condition.pageSize = 10;
|
|||
|
|
this.getListData()
|
|||
|
|
},
|
|||
|
|
//上拉触底时间
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.teach) {
|
|||
|
|
this.condition.pageNo = this.condition.pageNo + 1;
|
|||
|
|
// this.condition.pageNo = this.condition.pageNo;
|
|||
|
|
this.getListData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
saveImage(url) {
|
|||
|
|
let that = this;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "保存中..."
|
|||
|
|
})
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: url, //网络路径，下载下来
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: res.tempFilePath, //下载后的临时路径
|
|||
|
|
success: res => { //下载完成后在相册里压根找不到
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "保存成功！"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
fetch(url)
|
|||
|
|
.then(response => response.blob())
|
|||
|
|
.then(blob => {
|
|||
|
|
// h5
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = "二维码.png";
|
|||
|
|
link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
|
|||
|
|
link.click();
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "保存成功！"
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getListData(isSearch = false) {
|
|||
|
|
let that = this;
|
|||
|
|
let data = {
|
|||
|
|
pageNo: this.condition.pageNo,
|
|||
|
|
pageSize: this.condition.pageSize,
|
|||
|
|
projectSn: this.condition.projectSn,
|
|||
|
|
checkingPointName: this.condition.search
|
|||
|
|
};
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/checkingPoint/selectPage',
|
|||
|
|
method: 'post',
|
|||
|
|
data,
|
|||
|
|
success: res => {
|
|||
|
|
console.info(res,'res')
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
that.listNum = res.result.total
|
|||
|
|
if(isSearch) {
|
|||
|
|
that.listData = res.result.records;
|
|||
|
|
that.teach = res.result.records.length > 0 && !(res.result.records.length < that.condition.pageSize);
|
|||
|
|
} else {
|
|||
|
|
let arr = JSON.parse(JSON.stringify(that.listData));
|
|||
|
|
if (res.result.records.length > 0) {
|
|||
|
|
let newArr = arr.concat(res.result.records);
|
|||
|
|
if (res.result.records.length < that.condition.pageSize) {
|
|||
|
|
that.teach = false;
|
|||
|
|
} else {
|
|||
|
|
that.teach = true;
|
|||
|
|
}
|
|||
|
|
that.listData = newArr;
|
|||
|
|
} else {
|
|||
|
|
that.teach = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goDetails(data) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/projectEnd/InspectionRoute/inspectionPointDetail?id=${data.id}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleAdd() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/projectEnd/InspectionRoute/editInspectionPoint"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleEdit(data) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/projectEnd/InspectionRoute/editInspectionPoint?id=${data.id}`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleDel(data) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您确定要删除此项吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/checkingPoint/delete',
|
|||
|
|
method: 'get',
|
|||
|
|
data:{id: data.id},
|
|||
|
|
success: res => {
|
|||
|
|
console.info(res,'res')
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "删除成功"
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.condition.pageNo = 1
|
|||
|
|
this.getListData(true)
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//搜索
|
|||
|
|
loadData(e) {
|
|||
|
|
// this.condition.search = e.detail.value
|
|||
|
|
this.condition.pageNo = 1
|
|||
|
|
this.getListData(true)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.plan_duty {
|
|||
|
|
// background-color: #5181F6;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
// border-radius: 40rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
>image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fixedheader {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
.headerName {
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
:deep( .headerBox ){
|
|||
|
|
background-color: #5181F6;
|
|||
|
|
color: white;
|
|||
|
|
.uni-icons{
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #ccc;
|
|||
|
|
margin-top: 3%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.searchBox {
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-form-item {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
/* .search-icon{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 50rpx;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
} */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-input {
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin: 20rpx 20rpx;
|
|||
|
|
background-color: #f7f8fa;
|
|||
|
|
height: 70rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.screen {
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
color: gray;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 0px 30rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
min-height: 320rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 24rpx 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
color: rgba(51, 51, 51, 1);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: PingFangSC-Medium;
|
|||
|
|
display: flex;
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.safety_ic {
|
|||
|
|
width: 23px;
|
|||
|
|
height: 23px;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
.item_left {
|
|||
|
|
flex: 1;
|
|||
|
|
.card_title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
// white-space: nowrap;
|
|||
|
|
// overflow: hidden;
|
|||
|
|
// text-overflow: ellipsis;
|
|||
|
|
&:first-child {
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
color: rgba(81, 129, 246, 1);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.value {
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
color: rgba(16, 16, 16, 1);
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-family: SourceHanSansSC-regular;
|
|||
|
|
&.wrap {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
color: rgba(16, 16, 16, 0.43);
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-family: SourceHanSansSC-regular;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
&.wrap {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.item_right {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 160rpx;
|
|||
|
|
.text_wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
.d_ic {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
}
|
|||
|
|
.d_text {
|
|||
|
|
color: rgba(81, 129, 246, 1);
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn_wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightStatus {
|
|||
|
|
float: right;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-top: -36rpx;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_content {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: rgba(51, 51, 51, 1);
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_info {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.state {
|
|||
|
|
padding: 0px 16rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg1 {
|
|||
|
|
background-color: rgba(245, 166, 35, 1);
|
|||
|
|
box-shadow: 0px 4rpx 0px rgba(242, 76, 50, 0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg2 {
|
|||
|
|
background-color: rgba(88, 86, 214, 1);
|
|||
|
|
box-shadow: 0px 4rpx 0px rgba(87, 81, 217, 0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg3 {
|
|||
|
|
background-color: rgba(238, 94, 94, 1);
|
|||
|
|
box-shadow: 0px 4rpx 0px rgba(236, 92, 98, 0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg4 {
|
|||
|
|
background-color: rgba(76, 217, 100, 1);
|
|||
|
|
box-shadow: 0px 4rpx 0px rgba(68, 219, 94, 0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noData {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-top: 240rpx;
|
|||
|
|
color: #bed0fb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noDataImg {
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 196rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .tki-tree-cnt {
|
|||
|
|
z-index: 99999;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .tki-tree-bar {
|
|||
|
|
border-top-left-radius: 40rpx;
|
|||
|
|
border-top-right-radius: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .placeholder {
|
|||
|
|
padding-left: 80rpx;
|
|||
|
|
}
|
|||
|
|
.mini-btn{
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
.common_btn {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0 8rpx;
|
|||
|
|
&.primary {
|
|||
|
|
background: #5181F6;
|
|||
|
|
}
|
|||
|
|
&.danger {
|
|||
|
|
background: #F26161;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.b_ic {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
}
|
|||
|
|
.add_btn {
|
|||
|
|
width: 108rpx;
|
|||
|
|
height: 108rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 4rpx;
|
|||
|
|
right: 28rpx;
|
|||
|
|
}
|
|||
|
|
.qrcode_img {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|