420 lines
10 KiB
Vue
420 lines
10 KiB
Vue
<template>
|
||
<view class="top-level">
|
||
<view class="Page_change" :style="{ marginTop: tarbarHeight }">
|
||
<u-search
|
||
:clearabled="true"
|
||
:showAction="false"
|
||
shape="square"
|
||
v-model="pageModel.sourceData"
|
||
:placeholder="'请输入源数据'"
|
||
@change="handlerSearchEvent"
|
||
></u-search>
|
||
</view>
|
||
<view
|
||
class="listContent"
|
||
:style="{ marginTop: isOther ? '220rpx' : '142rpx' }"
|
||
>
|
||
<view
|
||
v-for="(item, index) in tableData"
|
||
:key="item.billid"
|
||
class="listData"
|
||
@click="handlerShowDetails(item, index)"
|
||
>
|
||
<view class="content">
|
||
<text>发送者应用：</text>
|
||
<view
|
||
style="width: calc(100% - 90px); display: flex; align-items: center"
|
||
>
|
||
<u--text :lines="1" :text="item.sendAppName" :size="14"></u--text>
|
||
<img
|
||
src="./push.png"
|
||
class="pushBtn"
|
||
@click.stop.prevent="pushDetails(item, index)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<text>状态：</text>
|
||
<view :style="[textColor(item.status)]" class="itemName">{{
|
||
textData(item.status)
|
||
}}</view>
|
||
</view>
|
||
<view class="content">
|
||
<text>接口名称：</text>
|
||
<u--text :lines="1" :text="item.receiveApiName" :size="14"></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>源数据：</text>
|
||
<u--text :lines="1" :text="item.sourceData" :size="14"></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>目标数据：</text>
|
||
<u--text :lines="1" :text="item.targetData" :size="14"></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>错误状态：</text>
|
||
<u--text
|
||
:lines="1"
|
||
:text="item.errorStatus === '1' ? '需要重新发送' : '不需要重新发送'"
|
||
:size="14"
|
||
></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>返回信息：</text>
|
||
<u--text :lines="1" :text="item.returnData" :size="14"></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>创建时间：</text>
|
||
<u--text :lines="1" :text="item.createTime" :size="14"></u--text>
|
||
</view>
|
||
<view class="content">
|
||
<text>备注：</text>
|
||
<u--text :lines="1" :text="item.remark" :size="14"></u--text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="noData" v-show="noData">
|
||
<u-divider text="我是有底线哒！" :hairline="true"></u-divider>
|
||
</view>
|
||
</view>
|
||
<view class="plusButton" @click="handlerAddProject">
|
||
<u-icon name="plus" :color="'#ffffff'"></u-icon
|
||
></view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-loading-page :loading="loading"></u-loading-page>
|
||
<base-tarbar ref="baseTarbar" :pageTitle="'异常信息'"></base-tarbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { authApi } from "@/api/login";
|
||
import baseTarbar from "@/components/baseTarbar/index.vue";
|
||
export default {
|
||
/**
|
||
* ┌─┐ ┌─┐
|
||
* ┌──┘ ┴───────┘ ┴──┐
|
||
* │ │
|
||
* │ ─── │
|
||
* │ ─┬┘ └┬─ │
|
||
* │ │
|
||
* │ ─┴─ │
|
||
* │ │
|
||
* └───┐ ┌───┘
|
||
* │ │
|
||
* │ │
|
||
* │ │
|
||
* │ └──────────────┐
|
||
* │ │
|
||
* │ ├─┐
|
||
* │ ┌─┘
|
||
* │ │
|
||
* └─┐ ┐ ┌───────┬──┐ ┌──┘
|
||
* │ ─┤ ─┤ │ ─┤ ─┤
|
||
* └──┴──┘ └──┴──┘
|
||
* 神兽保佑
|
||
* 代码无BUG!
|
||
*/
|
||
components: {
|
||
baseTarbar,
|
||
},
|
||
onReady() {
|
||
this.$refs.baseTarbar.currentEnvironment();
|
||
this.isOther = this.$refs.baseTarbar.isOther;
|
||
if (this.$refs.baseTarbar.isOther) {
|
||
this.tarbarHeight = "84rpx";
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isOther: false,
|
||
tarbarHeight: "0",
|
||
msgType: "warn",
|
||
timer: null,
|
||
loading: false,
|
||
noData: false,
|
||
pageModel: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
sourceData: "",
|
||
},
|
||
tableData: [],
|
||
delBillid: "",
|
||
appId: "",
|
||
};
|
||
},
|
||
computed: {
|
||
textColor() {
|
||
return (item) => {
|
||
if (item == "1") {
|
||
return { backgroundColor: "#CFCFCF", color: "#333" };
|
||
} else if (item == "2") {
|
||
return { backgroundColor: "#C6DEFF", color: "#1677FF" };
|
||
} else if (item == "3") {
|
||
return { backgroundColor: "#D0FFEF", color: "#00B578" };
|
||
} else if (item == "4") {
|
||
return { backgroundColor: "#FFE5E3", color: "#FF3B30" };
|
||
} else {
|
||
return { backgroundColor: "#CFCFCF", color: "#333" };
|
||
}
|
||
};
|
||
},
|
||
textData() {
|
||
return (item) => {
|
||
if (item == "1") {
|
||
return "待发送";
|
||
} else if (item == "2") {
|
||
return "发送中";
|
||
} else if (item == "3") {
|
||
return "发送成功";
|
||
} else if (item == "4") {
|
||
return "发送失败";
|
||
} else {
|
||
return null;
|
||
}
|
||
};
|
||
},
|
||
},
|
||
onShow() {
|
||
this.resetTable();
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.pageModel.pageNum = 1;
|
||
this.getTableData();
|
||
setTimeout(function () {
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
onLoad(option) {
|
||
//option为object类型，会序列化上个页面传递的参数
|
||
if (Object.getOwnPropertyNames(option).length != 0) {
|
||
this.appId = option.appId;
|
||
}
|
||
uni.$on("resetTable", this.resetTable);
|
||
},
|
||
onUnload() {
|
||
uni.$off("resetTable", this.resetTable);
|
||
},
|
||
methods: {
|
||
resetTable() {
|
||
this.pageModel.pageNum = 1;
|
||
this.tableData = [];
|
||
this.getTableData();
|
||
},
|
||
//表格数据
|
||
async getTableData() {
|
||
this.noData = false;
|
||
this.loading = true;
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 5000);
|
||
let param = {
|
||
...this.pageModel,
|
||
receiveApp: this.appId,
|
||
status: "4",
|
||
};
|
||
let res = await authApi(
|
||
"sysApplicationService",
|
||
"application",
|
||
"thirdInterfacequeryAppApiLog",
|
||
"",
|
||
param
|
||
);
|
||
if (this.pageModel.pageNum > 1) {
|
||
this.tableData.push(...res.attribute.list);
|
||
} else {
|
||
this.tableData = res.attribute.list;
|
||
}
|
||
if (res.attribute.list.length < 20) {
|
||
this.noData = true;
|
||
}
|
||
this.loading = false;
|
||
},
|
||
// 触底刷新事件
|
||
onReachBottom() {
|
||
if (this.noData != true) {
|
||
this.pageModel.pageNum++;
|
||
this.getTableData();
|
||
}
|
||
},
|
||
// 搜索
|
||
handlerSearchEvent() {
|
||
if (this.timer !== null) clearTimeout(this.timer);
|
||
this.timer = setTimeout(() => {
|
||
this.pageModel.pageNum = 1;
|
||
this.getTableData();
|
||
}, 100);
|
||
},
|
||
//查看
|
||
handlerShowDetails(row, index) {
|
||
let url = "/pages/logsError/show?billid=" + row.id;
|
||
this.$tab.navigateTo(url);
|
||
},
|
||
//推送
|
||
pushDetails(row, index) {
|
||
let url = "/pages/logsError/details?billid=" + row.id;
|
||
this.$tab.navigateTo(url);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.itemName {
|
||
font-size: 24rpx;
|
||
margin: 0 20rpx;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
padding: 2rpx 8rpx;
|
||
height: fit-content;
|
||
border-radius: 2px;
|
||
}
|
||
.pushBtn {
|
||
width: 19px;
|
||
height: 19px;
|
||
}
|
||
.top-level {
|
||
.listContent {
|
||
margin: 20rpx 24rpx 0 24rpx;
|
||
}
|
||
|
||
.swipe-action-item {
|
||
margin: 20rpx 0 20rpx 0;
|
||
}
|
||
.listData {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.head {
|
||
// height: 64rpx;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
justify-content: space-between;
|
||
}
|
||
.head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
padding: 10rpx 0 20rpx 0;
|
||
}
|
||
.head .itembox {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.levelbox {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 4rpx solid #3c9cff;
|
||
border-radius: 50%;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
color: #3c9cff;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
.head .itemName {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-left: 10px;
|
||
font-weight: 400;
|
||
|
||
text {
|
||
color: #fff;
|
||
padding: 4rpx 8rpx;
|
||
}
|
||
}
|
||
.state {
|
||
margin: 25rpx 0;
|
||
}
|
||
|
||
.time {
|
||
margin: 4rpx 0 0;
|
||
font-size: 28rpx;
|
||
flex-wrap: wrap;
|
||
line-height: 1.5;
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
color: #979797;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
view {
|
||
height: 60rpx;
|
||
width: 50%;
|
||
}
|
||
|
||
view:nth-child(4) {
|
||
text:nth-child(2) {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
line-height: 1.5;
|
||
font-size: 28rpx;
|
||
margin-bottom: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #979797;
|
||
}
|
||
}
|
||
}
|
||
.noData {
|
||
text-align: center;
|
||
margin: 20rpx 0 60rpx 0;
|
||
}
|
||
|
||
.Page_change {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 1;
|
||
|
||
.buttom {
|
||
justify-content: space-between;
|
||
padding-top: 30rpx;
|
||
|
||
::v-deep .u-button--circle {
|
||
width: 30%;
|
||
}
|
||
}
|
||
|
||
.input_box {
|
||
margin-top: 20rpx;
|
||
|
||
::v-deep .u-input--radius:nth-child(1) {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .subsetion.u-subsection--button {
|
||
height: 70rpx;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
::v-deep .u-subsection--button__bar {
|
||
background-color: #3c9cff;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
page {
|
||
height: 100vh;
|
||
}
|
||
</style> |