642 lines
22 KiB
Vue
642 lines
22 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="tabBox">
|
||
<MenuItem v-for="(item, index) in tabList" :key="index" :item="item" round="true" size="28"
|
||
:src="selectFilter == item.id ? item.active : item.src"
|
||
:nameStyle="selectFilter == item.id ? 'color:#5B96E9' : 'color:#808D97'" :imageBoxStyle="(selectFilter == item.id
|
||
? 'background:#f0f7fe;'
|
||
: 'background:#f6f7f8;') +
|
||
'height:75rpx;width:75rpx;padding: 18rpx;'
|
||
" @handleClick="handleChangeSelect(item.id)">
|
||
</MenuItem>
|
||
</view>
|
||
|
||
<view class="selectServerpartBox">
|
||
<view class="leftNameBox" @click="handleGoSelectServerPart">
|
||
{{ currentServerPart ? currentServerPart : "- 请选择服务区 -" }}
|
||
</view>
|
||
<view class="rightTimeBox">
|
||
<picker mode="date" @change="handleTimeChange">{{ selectDay }}</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 今日未巡检内容 -->
|
||
<div class="errorMessage" v-if="notInspectedName">{{
|
||
`当前服务区${notInspectedName},共${notInspectedList.length}个点位，还未进行巡检` }}</div>
|
||
|
||
<!-- 今日已巡检内容 -->
|
||
<view class="dataList">
|
||
<view class="dataItem" v-for="(item, index) in dataList" :key="index" @click="handleGoDetail(item)">
|
||
<div class="content-index">{{ index + 1 }}</div>
|
||
<view class="itemRow">
|
||
<view class="projectName">{{ item.placeName || "-" }}</view>
|
||
<view v-if="item.situation !== 0" class="stateName" :style="{
|
||
color:
|
||
item.errorStatus === 0
|
||
? 'red'
|
||
: item.errorStatus === 1
|
||
? '#3B72FF'
|
||
: item.errorStatus === 2
|
||
? '#139942'
|
||
: '',
|
||
}">
|
||
{{
|
||
item.errorStatus === 0
|
||
? "待处理"
|
||
: item.errorStatus === 1
|
||
? "处理中"
|
||
: item.errorStatus === 2
|
||
? "已处理"
|
||
: ""
|
||
}}</view>
|
||
</view>
|
||
<view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
|
||
<view class="value">{{ item.uploadResult || "-" }}</view>
|
||
</view>
|
||
<view class="itemRow">
|
||
<view class="leftName"></view>
|
||
|
||
<view class="rightName"><span :style="{
|
||
color:
|
||
item.situation === 0
|
||
? '#139942'
|
||
: item.situation === 1
|
||
? '#F75031'
|
||
: '',
|
||
}">{{
|
||
item.errorStatus === 2
|
||
? ""
|
||
: item.situation === 0
|
||
? "正常情况"
|
||
: item.situation === 1
|
||
? "急需处理"
|
||
: "-"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
<view class="itemRow">
|
||
<view class="leftName"><span class="radio" style="background: #44bea3"></span>{{ item.userName ||
|
||
"-" }}
|
||
</view>
|
||
<view class="rightName"></view>
|
||
</view>
|
||
<view class="itemRow">
|
||
<view class="leftName"><span class="radio" style="background: #398efe"></span>{{
|
||
item.createdAt
|
||
? $moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss")
|
||
: "-"
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import MenuItem from "@/components/menu/menuItem.vue";
|
||
export default {
|
||
data() {
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD')
|
||
|
||
return {
|
||
currentServerPart: "",
|
||
currentServerPartObj: {},
|
||
tabList: [
|
||
{
|
||
name: "全部",
|
||
src: "/static/images/expense/type/shenp.png",
|
||
active: "/static/images/expense/type/shenpz.png",
|
||
id: 1,
|
||
},
|
||
{
|
||
name: "正常",
|
||
src: "/static/images/expense/type/yichl.png",
|
||
active: "/static/images/expense/type/yichlz.png",
|
||
id: 2,
|
||
},
|
||
{
|
||
name: "异常",
|
||
src: "/static/images/expense/type/yifq.png",
|
||
active: "/static/images/expense/type/yifqz.png",
|
||
id: 3,
|
||
},
|
||
{
|
||
name: "待我处理",
|
||
src: "/static/images/expense/type/yichl.png",
|
||
active: "/static/images/expense/type/yichlz.png",
|
||
id: 4,
|
||
}
|
||
],
|
||
selectFilter: 1, // 选择的tab
|
||
selectDay: lastDay,// 选择的时间
|
||
PageIndex: 1, // 默认的页数
|
||
dataList: [],// 实际数据
|
||
notInspectedList: [],// 未巡检站点数据
|
||
notInspectedName: "",// 未巡检站点名称合计
|
||
useInfo: {}, // 用户详情
|
||
}
|
||
},
|
||
components: {
|
||
MenuItem,
|
||
},
|
||
onLoad() {
|
||
let userInfo = uni.getStorageSync("vuex");
|
||
userInfo = JSON.parse(userInfo);
|
||
if (userInfo) {
|
||
this.useInfo = JSON.parse(JSON.stringify(userInfo));
|
||
}
|
||
},
|
||
onShow() {
|
||
let currentServiceObj = uni.getStorageSync('currentServerPart')
|
||
console.log('currentServiceObjcurrentServiceObj', currentServiceObj);
|
||
// 判断是否需要重新请求
|
||
let isReady = true
|
||
if (currentServiceObj.label) {
|
||
if (currentServiceObj.value === this.currentServerPartObj.value) {
|
||
isReady = false
|
||
}
|
||
|
||
this.currentServerPart = currentServiceObj.label
|
||
this.currentServerPartObj = currentServiceObj
|
||
} else {
|
||
this.$util.toNextRoute("navigateTo", `/pages/mbwa/newMap`);
|
||
}
|
||
|
||
if (isReady) {
|
||
this.handleGetDataList();
|
||
this.handleGetNotInspected()
|
||
}
|
||
},
|
||
methods: {
|
||
// 改变时间
|
||
handleTimeChange(e) {
|
||
console.log('eeee', e);
|
||
let newTime = this.$util.cutDate(new Date(e.detail.value), 'YYYY-MM-DD')
|
||
console.log('newTimenewTimenewTime', newTime);
|
||
this.selectDay = newTime
|
||
|
||
this.handleGetDataList();
|
||
this.handleGetNotInspected()
|
||
},
|
||
// 跳转到选择服务区
|
||
handleGoSelectServerPart() {
|
||
this.$util.toNextRoute("navigateTo", `/pages/mbwa/newMap`);
|
||
},
|
||
// 改变tab
|
||
handleChangeSelect(value) {
|
||
this.selectFilter = value;
|
||
this.dataList = [];
|
||
this.isEnd = false;
|
||
this.PageIndex = 1;
|
||
// this.handleGetDataList();
|
||
|
||
this.handleGetDataList();
|
||
this.handleGetNotInspected()
|
||
},
|
||
// 跳转详情进行操作
|
||
handleGoDetail(obj) {
|
||
// 判断是否是异常的
|
||
if (obj.situation === 1) {
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/walkAroundManager/detail?id=${obj.id}&pageType=error`
|
||
);
|
||
} else if (obj.situation === 0) {
|
||
// 正常的 查看详情
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/walkAroundManager/detail?id=${obj.id}`
|
||
);
|
||
}
|
||
},
|
||
// 拿到滚动框里面的数据
|
||
async handleGetDataList() {
|
||
console.log("this.selectFilter", this.selectFilter);
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
});
|
||
const req = {
|
||
// startTime: this.$moment().subtract(1, 'months').format('YYYY-MM-DD'),
|
||
// endTime: this.$moment().format('YYYY-MM-DD'),
|
||
// selectFilter 3 和 4 为 异常和 待我处理 那么都会是前一天的数据 当为异常时 时间就变为 最近一个月
|
||
// 当为待我处理时 那么服务区也不传了 时间还是最近一个月
|
||
serverPartId: this.selectFilter === 4 ? '' : this.currentServerPartObj.value,
|
||
startTime: this.selectFilter === 3 || this.selectFilter === 4 ? this.$moment().subtract(1, 'months').format('YYYY-MM-DD') : this.selectDay,
|
||
endTime: this.selectFilter === 3 || this.selectFilter === 4 ? this.$moment().format('YYYY-MM-DD') : this.selectDay,
|
||
pageNum: this.PageIndex,
|
||
pageSize: 100,
|
||
extend:
|
||
this.selectFilter === 1
|
||
? null
|
||
: this.selectFilter === 2
|
||
? [
|
||
{
|
||
key: "situation",
|
||
value: 0,
|
||
},
|
||
]
|
||
: this.selectFilter === 3
|
||
? [
|
||
{
|
||
key: "situation",
|
||
value: 1,
|
||
},
|
||
]
|
||
: this.selectFilter === 4
|
||
? [
|
||
{
|
||
key: "person.STAFF_NAME",
|
||
value: this.useInfo.userData.UserName,
|
||
},
|
||
]
|
||
: null,
|
||
};
|
||
console.log("req323131", req);
|
||
|
||
const data = await this.$request.$webJavaPOST(
|
||
`questionnaire-responses/getList`,
|
||
req
|
||
);
|
||
console.log("datadatadatadata", data);
|
||
|
||
let list = data.Result_Data.List;
|
||
if (list && list.length > 0) {
|
||
if (list.length < 10) {
|
||
this.isEnd = true;
|
||
}
|
||
} else {
|
||
this.isEnd = true;
|
||
}
|
||
|
||
// this.dataList = this.dataList.concat(list);
|
||
this.dataList = list
|
||
console.log("this.dataList", this.dataList);
|
||
uni.hideLoading();
|
||
},
|
||
// 当前服务区 今日 是否还有点位未巡检
|
||
async handleGetNotInspected() {
|
||
// 拿到当前服务区下的全部点位数据
|
||
const req = {
|
||
serverPartIds: [this.currentServerPartObj.value],
|
||
status: true
|
||
}
|
||
const data = await this.$request.$webJavaPOST(
|
||
`questionnaire-templates/search/tree`,
|
||
req
|
||
);
|
||
let list = data.Result_Data.List
|
||
let pointList = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem) => {
|
||
if (subItem.children && subItem.children.length > 0) {
|
||
subItem.children.forEach((thirdItem) => {
|
||
pointList.push(thirdItem)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// pointList 就是这个服务区的全部点位数据
|
||
// 下面拿到这个服务区 今日的巡检情况
|
||
const recordReq = {
|
||
startTime: this.selectDay,
|
||
endTime: this.selectDay,
|
||
serverPartIds: [this.currentServerPartObj.value]
|
||
}
|
||
|
||
const recordData = await this.$request.$webJavaPOST(
|
||
`questionnaire-responses/tree/list`,
|
||
recordReq
|
||
);
|
||
let recordList = recordData.Result_Data.List
|
||
let recordDataList = []
|
||
// 拿到当前已经完成了的站点id
|
||
let pointDataList = []
|
||
if (recordList && recordList.length > 0) {
|
||
recordList.forEach((item) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem) => {
|
||
if (subItem.children && subItem.children.length > 0) {
|
||
subItem.children.forEach((thirdItem) => {
|
||
recordDataList.push(thirdItem)
|
||
pointDataList.push(thirdItem.template.id)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
let notInspectedList = []
|
||
let notInspectedName = ''
|
||
if (pointList && pointList.length > 0) {
|
||
pointList.forEach((item) => {
|
||
if (pointDataList.indexOf(item.id) === -1) {
|
||
notInspectedList.push(item)
|
||
if (notInspectedName) {
|
||
notInspectedName += `、${item.title}`
|
||
} else {
|
||
notInspectedName = item.title
|
||
}
|
||
}
|
||
})
|
||
}
|
||
this.notInspectedList = notInspectedList
|
||
this.notInspectedName = notInspectedName
|
||
|
||
console.log('this.notInspectedNamethis.notInspectedNamethis.notInspectedName', this.notInspectedName);
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100%;
|
||
|
||
.selectServerpartBox {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
padding: 0 24rpx;
|
||
margin-top: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.leftNameBox {
|
||
width: 50%;
|
||
padding: 16rpx 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 2rpx solid transparent;
|
||
|
||
&:hover {
|
||
background: #e8f4ff;
|
||
border-color: #ff814f;
|
||
color: #ff814f;
|
||
}
|
||
|
||
&::before {
|
||
content: '📍';
|
||
margin-right: 12rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.rightTimeBox {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 16rpx 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: 2rpx solid transparent;
|
||
|
||
&:hover {
|
||
background: #e8f4ff;
|
||
border-color: #1890ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
picker {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
&::before {
|
||
content: '📅';
|
||
margin-right: 12rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.errorMessage {
|
||
width: calc(100% - 48rpx);
|
||
margin: 24rpx 24rpx 0;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
font-size: 28rpx;
|
||
color: #ff4d4f;
|
||
background: linear-gradient(135deg, #fff2f0 0%, #ffebe8 100%);
|
||
border: 2rpx solid #ffccc7;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px 0 rgba(255, 77, 79, 0.15);
|
||
|
||
&::before {
|
||
content: '⚠️';
|
||
position: absolute;
|
||
left: 24rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 6rpx;
|
||
background: linear-gradient(180deg, #ff4d4f 0%, #ff7875 100%);
|
||
}
|
||
|
||
|
||
font-weight: 500;
|
||
padding-left: 70rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.tabBox {
|
||
position: fixed;
|
||
z-index: 99;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
box-shadow: 0 2rpx 4rpx rgba(167, 166, 166, 0.3);
|
||
|
||
.tabItem {
|
||
width: 25%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #010b18;
|
||
line-height: 40rpx;
|
||
font-style: normal;
|
||
}
|
||
|
||
.selectTab {
|
||
position: relative;
|
||
}
|
||
|
||
.selectTab::after {
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #3b72ff;
|
||
position: absolute;
|
||
bottom: -18rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.dataList {
|
||
width: 100%;
|
||
height: cac(100% - 280rpx);
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 0;
|
||
overflow-y: auto;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.dataItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
padding: 16rpx;
|
||
margin: 24rpx 0;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 0px 6rpx #e2e2e2;
|
||
position: relative;
|
||
|
||
.content-index {
|
||
width: 42rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: #fb8b56;
|
||
position: absolute;
|
||
top: 26rpx;
|
||
left: -4rpx;
|
||
box-shadow: 4rpx 4rpx 2rpx 0 rgba(238, 112, 27, 0.5);
|
||
}
|
||
|
||
.itemRow {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.projectName {
|
||
width: 60%;
|
||
font-size: 30rpx;
|
||
height: 54rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #333333;
|
||
box-sizing: border-box;
|
||
padding-left: 40rpx;
|
||
}
|
||
|
||
.leftName {
|
||
color: #686868;
|
||
font-size: 24rpx;
|
||
|
||
.radio {
|
||
display: inline-block;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 14rpx;
|
||
margin: 0 8px 0 5px;
|
||
}
|
||
}
|
||
|
||
.stateName {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.rightName {
|
||
color: #686868;
|
||
font-size: 24rpx;
|
||
|
||
.radio {
|
||
display: inline-block;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 14rpx;
|
||
margin: 0 8px 0 5px;
|
||
}
|
||
|
||
.month {
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
}
|
||
}
|
||
}
|
||
|
||
.itemCenterRow {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.value {
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #ff814fff;
|
||
width: 70%;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
/* 设置显示的行数 */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
height: 2rpx;
|
||
width: 100%;
|
||
background-color: #eee;
|
||
margin-bottom: 18rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |