middleground_H5/pages/homePage/index.vue

155 lines
3.5 KiB
Vue
Raw Permalink Normal View History

2024-09-20 15:55:17 +08:00
<template>
<view
class="container"
:style="{ marginTop: tarbarHeight }"
style="padding-bottom: 200rpx"
>
<view v-for="(item, index) in errList" :key="index" class="planBox">
<div class="errItem" @click="logDetails(item)">
<div class="img">
<img
:src="require('@/static/images/defaultIcon.png')"
alt=""
@error="handleImageError(item)"
/>
</div>
<div class="title">
<u--text
:lines="1"
:text="item.name"
:size="14"
:align="'right'"
></u--text>
<u--text
:lines="1"
:text="item.num"
:bold="true"
:align="'right'"
:margin="'5px 0'"
:size="16"
></u--text>
</div>
</div>
</view>
<base-tarbar ref="baseTarbar" :pageTitle="'工作台'" :leftIcon="' '"></base-tarbar>
<u-empty
v-show="noData"
mode="data"
:icon="require('@/static/images/empty.png')"
>
</u-empty>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import baseTarbar from "@/components/baseTarbar/index.vue";
import { authApi } from "@/api/login";
import request from "@/utils/request";
export default {
components: {
baseTarbar,
},
onReady() {
this.$refs.baseTarbar.currentEnvironment();
if (this.$refs.baseTarbar.isOther) {
this.tarbarHeight = "88rpx";
}
},
data() {
return {
tarbarHeight: "0",
errList: [],
noData: false,
msgType: "warn",
};
},
onShow() {},
mounted() {
this.getErrorLogs();
},
methods: {
logDetails(row) {
this.$tab.navigateTo("/pages/logsError/index?appId=" + row.appId);
},
// 异常日志
async getErrorLogs() {
const res = await authApi("homeService", "app", "appErrorNum", "", {});
if (res.status === "200") {
this.errList = [];
//图片处理
this.imgHandle(res.attribute);
this.errList = res.attribute;
console.log(this.errList, "异常日志");
}
},
//图片处理
imgHandle(arr = []) {
arr.map((el) => {
return request({
url:
"kangarooDataCenterV3/entranceController/fileDownloadNew?id=" +
el.path,
method: "get",
responseType: "arraybuffer",
}).then((res) => {
let tempImgUrl =
"data:image/png/jpg;base64," +
btoa(
new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
if (el.path) {
this.$set(el, "imgUrl", tempImgUrl);
} else {
this.$set(el, "imgUrl", null);
}
});
});
},
//图片发生错误时 使用默认图片
handleImageError(row = {}) {
console.log("ksksksk");
row.imgUrl = require("@/static/images/defaultIcon.png");
},
},
};
</script>
<style scoped lang="scss">
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 创建两列,每列占 1fr */
gap: 10px; /* 可以设置列与列之间的间距 */
padding: 15px 10px;
}
.planBox {
background: #fff;
border-radius: 12px;
}
.title {
margin-left: 10px;
width: calc(100% - 58px);
}
.errItem {
padding: 10px;
display: flex;
align-items: center;
.img {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
}
</style>
<style scoped>
page {
height: 100vh;
background: #f3f4f6;
}
</style>