648 lines
18 KiB
Vue
648 lines
18 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="top" :style="{ height: menu.bottom + 92 + 'px' }">
|
||
<view
|
||
class="arrowBox"
|
||
:style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }"
|
||
>
|
||
<image
|
||
@click="handleBack"
|
||
class="img"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
|
||
/>
|
||
|
||
<picker
|
||
:value="selectIndex"
|
||
:range="selectServiceList"
|
||
@change="handleChangeService"
|
||
range-key="label"
|
||
>
|
||
<view class="selectServiceBox">
|
||
<image
|
||
class="serviceIcon"
|
||
src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/serviceIcon.png"
|
||
/>
|
||
<view class="nameBox">
|
||
<span class="service">{{
|
||
selectServiceList[selectIndex].label
|
||
}}</span>
|
||
<image
|
||
class="moreIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="timeBox">
|
||
<picker
|
||
class="timeSelect"
|
||
mode="date"
|
||
:value="$moment(searchTime).format('YYYY-MM-DD')"
|
||
:start="'2025-01-01'"
|
||
@change="handleGetTime"
|
||
>
|
||
<text>{{ searchTime || "" }}</text>
|
||
</picker>
|
||
<image
|
||
class="bottomArrow"
|
||
src="https://eshangtech.com/ShopICO/yxcl/settlementApproval/bottomArrow.png"
|
||
/>
|
||
</view>
|
||
|
||
<view class="TabsBox">
|
||
<view class="tabItemList">
|
||
<view
|
||
:class="selectFilter === 4 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
@click="handleChangeSelect({ id: 4 })"
|
||
>
|
||
全部
|
||
</view>
|
||
<view
|
||
:class="selectFilter === 0 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
@click="handleChangeSelect({ id: 0 })"
|
||
>
|
||
现场
|
||
</view>
|
||
<view
|
||
:class="selectFilter === 2 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
@click="handleChangeSelect({ id: 2 })"
|
||
>
|
||
异常
|
||
</view>
|
||
<view
|
||
:class="selectFilter === 1 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
@click="handleChangeSelect({ id: 1 })"
|
||
>
|
||
待我处理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view
|
||
class="contentBox"
|
||
:scroll-y="true"
|
||
:style="{ height: `calc(100vh - ${menu.bottom + 92}px)` }"
|
||
@scrolltolower="handleScrollBottom"
|
||
refresher-enabled="true"
|
||
:refresher-triggered="isRefreshing"
|
||
@refresherrefresh="handleRefresherRefresh"
|
||
>
|
||
<view class="dataList">
|
||
<view
|
||
class="dataItem"
|
||
v-for="(item, index) in dataList"
|
||
:key="index"
|
||
@click="handleGoDetail(item)"
|
||
:style="{
|
||
boxShadow:
|
||
item.SETTLEMENT_STATE === 0 || item.SETTLEMENT_STATE === 2
|
||
? '0 0px 6rpx #f9b297'
|
||
: '',
|
||
marginTop: index === 0 ? '0px' : '',
|
||
}"
|
||
>
|
||
<div class="content-index">{{ index + 1 }}</div>
|
||
<view class="itemRow">
|
||
<view class="projectName">{{ item.template.title || "-" }}</view>
|
||
<view
|
||
class="stateName"
|
||
:style="{
|
||
color:
|
||
item.extendObj.errorStatus === 0
|
||
? 'red'
|
||
: item.extendObj.errorStatus === 1
|
||
? '#FF814FFF'
|
||
: '',
|
||
}"
|
||
>{{
|
||
item.extendObj.errorStatus === 0
|
||
? "待处理"
|
||
: item.extendObj.errorStatus === 1
|
||
? "处理中"
|
||
: item.extendObj.errorStatus === 2
|
||
? "已处理"
|
||
: "-"
|
||
}}</view
|
||
>
|
||
</view>
|
||
|
||
<view class="itemCenterRow" style="margin: 60rpx 0 20rpx">
|
||
<view class="value">{{ item.extendObj.uploadResult || "-" }}</view>
|
||
<view class="label">巡查内容</view>
|
||
</view>
|
||
|
||
<view class="itemRow">
|
||
<view
|
||
class="leftName"
|
||
:style="{
|
||
color: item.extendObj.situation === 1 ? '#FF814FFF' : '',
|
||
}"
|
||
>{{
|
||
item.extendObj.situation === 0
|
||
? "正常"
|
||
: item.extendObj.situation === 1
|
||
? "异常"
|
||
: "-"
|
||
}}</view
|
||
>
|
||
<!-- <view class="rightName">{{ $util.getMoney(item.REVENUE_AMOUNT) }}</view>-->
|
||
|
||
<view class="rightName"
|
||
>巡查时间：<span class="month">{{
|
||
item.submittedAt
|
||
? $moment(item.submittedAt).format("YYYY-MM-DD HH:mm:ss")
|
||
: "-"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
<view class="itemRow">
|
||
<view class="leftName"
|
||
><span class="radio" style="background: #44bea3"></span
|
||
>{{ item.serverPartName || "" }}</view
|
||
>
|
||
<view class="rightName"></view>
|
||
</view>
|
||
<view class="itemRow">
|
||
<view class="leftName"
|
||
><span class="radio" style="background: #398efe"></span
|
||
>{{ item.userName || "" }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="load-more" v-if="dataList && dataList.length > 0">
|
||
<text>{{
|
||
!isEnd ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
|
||
}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
let stime = this.$util.cutDate(new Date(), "YYYY-MM-DD");
|
||
return {
|
||
menu: {}, //当前的手机样式
|
||
searchTime: stime, // 查询的时间
|
||
selectIndex: 0, // 选择的服务区
|
||
selectServiceList: [], // 服务区列表
|
||
selectServerpartObj: {}, // 选择的服务区对象 label value
|
||
selectFilter: 0, // 选择的tab
|
||
dataList: [], // 下面的数据
|
||
useInfo: {}, // 用户详情
|
||
isEnd: false, // 判断是否到底了
|
||
PageIndex: 1, // 默认的页数
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
let userInfo = uni.getStorageSync("vuex");
|
||
userInfo = JSON.parse(userInfo);
|
||
if (userInfo) {
|
||
this.useInfo = JSON.parse(JSON.stringify(userInfo));
|
||
console.log("this.useInfo", this.useInfo);
|
||
}
|
||
// 拿到服务区的数据
|
||
this.handleGetServerpartList();
|
||
},
|
||
methods: {
|
||
// 跳转详情进行操作
|
||
handleGoDetail(obj) {
|
||
console.log("obj", obj);
|
||
// 判断是否是异常的
|
||
if (obj.extendObj.situation === 1) {
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/walkAroundManager/detail?id=${obj.id}&pageType=error`
|
||
);
|
||
} else if (obj.extendObj.situation === 0) {
|
||
// 正常的 查看详情
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/walkAroundManager/detail?id=${obj.id}`
|
||
);
|
||
}
|
||
},
|
||
// 滚动到底部
|
||
handleScrollBottom() {
|
||
if (!this.isEnd) {
|
||
this.PageIndex = this.PageIndex + 1;
|
||
this.handleGetDataList();
|
||
}
|
||
},
|
||
// 拿到时间
|
||
handleGetTime(e) {
|
||
console.log("e", e);
|
||
this.searchTime = e.detail.value;
|
||
this.dataList = [];
|
||
this.handleGetDataList();
|
||
},
|
||
// 修改服务区
|
||
handleChangeService(e) {
|
||
console.log("e", e);
|
||
this.selectIndex = Number(e.detail.value);
|
||
this.dataList = [];
|
||
this.handleGetDataList();
|
||
},
|
||
// 返回上一页
|
||
handleBack() {
|
||
uni.switchTab({ url: "/pages/index/index" });
|
||
},
|
||
// 改变tab
|
||
handleChangeSelect(obj) {
|
||
this.selectFilter = obj.id;
|
||
this.dataList = [];
|
||
this.handleGetDataList();
|
||
},
|
||
// 拿到滚动框里面的数据
|
||
async handleGetDataList() {
|
||
const req = {
|
||
serverPartId: this.selectServiceList[this.selectIndex].value,
|
||
startTime: `${this.searchTime} 00:00:00`,
|
||
endTime: `${this.searchTime} 23:59:59`,
|
||
extend:
|
||
this.selectFilter === 4
|
||
? undefined
|
||
: this.selectFilter === 0
|
||
? [
|
||
{
|
||
key: "situation",
|
||
value: 0,
|
||
},
|
||
]
|
||
: this.selectFilter === 2
|
||
? [
|
||
{
|
||
key: "situation",
|
||
value: 1,
|
||
},
|
||
]
|
||
: undefined,
|
||
|
||
any:
|
||
this.selectFilter === 1
|
||
? [
|
||
{
|
||
key: "userId",
|
||
value:
|
||
this.selectFilter === 1
|
||
? this.useInfo.userData.UserId
|
||
: undefined,
|
||
},
|
||
]
|
||
: undefined,
|
||
// 1 待我处理,
|
||
};
|
||
const data = await this.$request.$webNodePOST(
|
||
`questionnaire-responses/search/many`,
|
||
req
|
||
);
|
||
let list = data.data;
|
||
if (list && list.length > 0) {
|
||
if (list.length < 10) {
|
||
this.isEnd = true;
|
||
}
|
||
|
||
list.forEach((item) => {
|
||
let extendObj = {};
|
||
if (item.extend) {
|
||
extendObj = JSON.parse(item.extend);
|
||
}
|
||
item.extendObj = extendObj;
|
||
});
|
||
}
|
||
|
||
this.dataList = this.dataList.concat(list);
|
||
console.log("this.dataList", this.dataList);
|
||
},
|
||
// 拿到服务区的数据
|
||
async handleGetServerpartList() {
|
||
const req = {
|
||
UserIdEncrypted: this.useInfo.userData.UserIdEncrypted,
|
||
};
|
||
const data = await this.$request.$webGet(
|
||
"EShangApiMain/Logging/GetPassportInfoById",
|
||
req
|
||
);
|
||
console.log("Info", data);
|
||
const secondReq = {
|
||
ServerpartCodes: data.Result_Data.CityAuthority,
|
||
ServerpartType: 1000,
|
||
StatisticsType: "1000,2000",
|
||
};
|
||
const secondData = await this.$request.$webGet(
|
||
"EShangApiMain/BaseInfo/GetServerpartDDL",
|
||
secondReq
|
||
);
|
||
console.log("secondData", secondData);
|
||
secondData.Result_Data.List.unshift({
|
||
label: "蜀越公司",
|
||
value: 530,
|
||
});
|
||
this.selectServiceList = secondData.Result_Data.List;
|
||
|
||
// 拿到下面实际数据
|
||
this.handleGetDataList();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: #f5f7f9;
|
||
box-sizing: border-box;
|
||
.top {
|
||
width: 100%;
|
||
background-image: url("https://eshangtech.com/ShopICO/yxcl/settlementApproval/pageBg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
z-index: 4;
|
||
position: relative;
|
||
.arrowBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.selectServiceBox {
|
||
margin-left: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.serviceIcon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.nameBox {
|
||
font-family: "PingFangSC";
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 12rpx 34rpx 12rpx 48rpx;
|
||
display: inline-block;
|
||
border-top-right-radius: 200rpx;
|
||
border-bottom-right-radius: 200rpx;
|
||
background: #fff;
|
||
transform: translateX(-20px);
|
||
.moreIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.timeBox {
|
||
height: 28px;
|
||
margin-top: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
.timeSelect {
|
||
display: flex;
|
||
align-items: center;
|
||
.monthNumber {
|
||
font-family: "DINAlternate";
|
||
font-size: 42rpx;
|
||
font-weight: bold;
|
||
}
|
||
.monthUnit {
|
||
margin-left: 4rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #242729;
|
||
}
|
||
.year {
|
||
font-family: "DINAlternate";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786b6c;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.bottomArrow {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.TabsBox {
|
||
width: 100%;
|
||
height: 32px;
|
||
margin-top: 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
.tabItemList {
|
||
width: calc(100% - 140rpx);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 62rpx;
|
||
margin-right: 30rpx;
|
||
.tabItem {
|
||
display: inline-block;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
height: 62rpx;
|
||
color: #242729;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.selectTabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #fd7f21;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
.selectTabItem:after {
|
||
content: "";
|
||
height: 6rpx;
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: #fd7f21;
|
||
}
|
||
}
|
||
.otherItem {
|
||
width: 110rpx;
|
||
height: 62rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-left: 10rpx;
|
||
.filterIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 4rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
.otherItem:before {
|
||
content: "";
|
||
width: 1px;
|
||
height: 36rpx;
|
||
background: #e4e4e4;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f3f3f3;
|
||
.dataList {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 0;
|
||
.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: 28rpx;
|
||
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: 16px;
|
||
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;
|
||
}
|
||
.label {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.line {
|
||
height: 2rpx;
|
||
width: 100%;
|
||
background-color: #eee;
|
||
margin-bottom: 18rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
.load-more {
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
color: #9999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|