|
|
@@ -1,71 +1,26 @@
|
|
|
<template>
|
|
|
- <div style="display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;">
|
|
|
-
|
|
|
+ <div style="display: flex; flex-direction:column;height: 100vh;">
|
|
|
+
|
|
|
<!-- 导航 -->
|
|
|
<div style="padding: 10px;">
|
|
|
- <CusNavigation gobackabled title="设备日志" searchabled @onSearch="onSearch"></CusNavigation>
|
|
|
+ <CusNavigation gobackabled :title="'设备日志('+ deviceId +')'"></CusNavigation>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
- <div class="container" style="overflow-y: auto; flex-grow: 1; background-color: #F7F8FA;">
|
|
|
+
|
|
|
+ <div class="container" style="overflow-y: auto; flex-grow: 1;">
|
|
|
<van-pull-refresh style="min-height: 100%;" v-model="refreshing" @refresh="onRefresh">
|
|
|
-
|
|
|
- <van-swipe-cell style="background-color: #fff; margin-bottom: 10px;">
|
|
|
+ <van-swipe-cell v-for="item in dataList" style="background-color: #fff; margin-bottom: 10px;">
|
|
|
<van-cell clickable>
|
|
|
<div style="text-align: left;">
|
|
|
- <!-- <div>{{ device }}</div> -->
|
|
|
<!-- 第一行 -->
|
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
|
|
|
- <div style="color: #000; font-weight: bold; font-size: 1.1rem;">
|
|
|
- <span>{{ deviceId }}</span>
|
|
|
- </div>
|
|
|
- <div style="font-size: 0.9rem;">设备编号</div>
|
|
|
+ <div style="font-size: 0.9rem; color: #000; font-weight: bold;">{{ timestampToTime(item.time) }}</div>
|
|
|
</div>
|
|
|
<!-- 第二行 -->
|
|
|
- <div style="display: flex; justify-content: space-between;">
|
|
|
- <div style="font-weight: bold; font-size: 0.9rem; height: 31px;">
|
|
|
- <span>{{ device?.modifytime }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div style="display: flex; color: #aaa;">
|
|
|
- <div>
|
|
|
- <van-icon name="static/images/icon-check.png" size="1.5rem" />
|
|
|
- </div>
|
|
|
- <div style="margin-left: 3px; font-size: 1rem;">查看数据</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </van-cell>
|
|
|
- </van-swipe-cell>
|
|
|
-
|
|
|
- <van-swipe-cell v-for="item in showProperties" style="background-color: #fff; margin-bottom: 10px;">
|
|
|
- <van-cell clickable>
|
|
|
- <div style="text-align: left;">
|
|
|
- <!-- <div>{{ item }}</div> -->
|
|
|
- <!-- 第一行 -->
|
|
|
- <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
|
|
|
- <div style="color: #000; font-weight: bold; font-size: 1.1rem;">
|
|
|
- <span>{{item.value}}</span>
|
|
|
- <span v-if="item.model.type == 'enum'" style="margin-left: 5px;">
|
|
|
- <span>(</span>
|
|
|
- <span>{{ item.model.define.range[item.value] }}</span>
|
|
|
- <span>)</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div style="font-size: 0.9rem;">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- <!-- 第二行 -->
|
|
|
- <div style="display: flex; justify-content: space-between;">
|
|
|
- <div style="font-weight: bold; font-size: 0.9rem;">
|
|
|
- <span>{{ item.date }}</span>
|
|
|
- </div>
|
|
|
- <div style="display: flex; color: #000;">
|
|
|
- <div>
|
|
|
- <van-icon name="static/images/icon-check.png" size="1.5rem" />
|
|
|
- </div>
|
|
|
- <div style="margin-left: 3px; font-size: 1rem;">查看数据</div>
|
|
|
+ <div style="display: flex; align-items: flex-end;">
|
|
|
+ <div style="width: 100%; word-wrap: break-word; text-align: justify;">
|
|
|
+ <!-- <span>{{ item }}</span> -->
|
|
|
+ <van-text-ellipsis :rows="5" :content="JSON.stringify(item)" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -76,199 +31,129 @@
|
|
|
<!-- 数据提示 -->
|
|
|
<div>
|
|
|
<div v-if="refreshing"></div>
|
|
|
- <div v-else-if="showProperties.length == 0" style="text-align: center; padding: 20px; color: #ccc;">
|
|
|
+ <div v-else-if="dataList.length == 0" style="text-align: center; padding: 20px; color: #ccc;">
|
|
|
<span>暂无数据</span>
|
|
|
</div>
|
|
|
+ <div v-else-if="isLoading" style="text-align: center; padding: 20px;">
|
|
|
+ <van-loading type="spinner" color="#1989fa" />
|
|
|
+ </div>
|
|
|
+ <div v-else-if="page.pages <= page.pageNum" style="text-align: center; padding: 20px; color: #ccc;">
|
|
|
+ <span>没有更多了</span>
|
|
|
+ </div>
|
|
|
+ <div v-else style="text-align: center; padding: 20px;">
|
|
|
+ <span @click="clickLoading">点击加载</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</van-pull-refresh>
|
|
|
<!-- 返回顶部 -->
|
|
|
<van-back-top target=".container" right="5vw" bottom="80px" />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import { post_promise } from '@/network/axios';
|
|
|
-import { DeviceEntity, ProductEntity } from '@/api/model';
|
|
|
-import { CusNavigation } from '@/components'
|
|
|
-import { timestampToTime } from '@/utils'
|
|
|
-import { showToast } from 'vant';
|
|
|
-
|
|
|
-
|
|
|
-// 点击搜索
|
|
|
-const onSearch = (keyWord: string) => {
|
|
|
- console.log('jjj')
|
|
|
- console.log(keyWord)
|
|
|
- keyword.value = keyWord
|
|
|
- search();
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-const refreshing = ref(false);
|
|
|
-const onRefresh = () => {
|
|
|
- console.log('onrefresh...')
|
|
|
- console.log(refreshing.value)
|
|
|
- refreshList();
|
|
|
- refreshing.value = false
|
|
|
-};
|
|
|
-
|
|
|
-
|
|
|
-// 属性
|
|
|
-interface Property{
|
|
|
- name: string,
|
|
|
- value: string,
|
|
|
- date: string,
|
|
|
- info?: string
|
|
|
- model?: any
|
|
|
-}
|
|
|
-// 设备
|
|
|
-const device = ref<DeviceEntity>();
|
|
|
-// 产品
|
|
|
-const product = ref<ProductEntity>();
|
|
|
-// 显示属性
|
|
|
-const showProperties = ref<Property[]>([]);
|
|
|
-// 根据key获取属性
|
|
|
-const getModel = (key: any) => {
|
|
|
-
|
|
|
-const models = product.value?.model;
|
|
|
-for(let i = 0; i < models.length; i++){
|
|
|
- const model = models[i]
|
|
|
- if(key == model.title){
|
|
|
- return model;
|
|
|
- }
|
|
|
-}
|
|
|
-return undefined;
|
|
|
-}
|
|
|
-// 搜索
|
|
|
-const keyword = ref<string>('');
|
|
|
-const search = function(){
|
|
|
- // if(!keyword.value){
|
|
|
- // showProperties.value = properties.value;
|
|
|
- // return;
|
|
|
- // }
|
|
|
- console.log(product.value?.model)
|
|
|
-
|
|
|
- showProperties.value = [];
|
|
|
- const data = device.value?.data;
|
|
|
- for (const key in data) {
|
|
|
- const model = getModel(key)
|
|
|
- if (Object.prototype.hasOwnProperty.call(data, key) && model) {
|
|
|
- // console.log(key, model)
|
|
|
- const element = data[key];
|
|
|
- const property:Property = {
|
|
|
- name: model.name,
|
|
|
- value: element.value,
|
|
|
- date: timestampToTime(element.time),
|
|
|
- model: model
|
|
|
- }
|
|
|
- if(!keyword.value){
|
|
|
- showProperties.value.push(property)
|
|
|
- }else if(JSON.stringify(property).includes(keyword.value)){
|
|
|
- showProperties.value.push(property)
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // device.value!.data.forEach((item) => {
|
|
|
- // console.log(item)
|
|
|
- // if(item.name.includes(keyword.value)){
|
|
|
- // showProperties.value.push(item)
|
|
|
- // }
|
|
|
- // })
|
|
|
-}
|
|
|
-// 查询设备
|
|
|
-const refreshList = async () => {
|
|
|
-
|
|
|
- await post_promise({url: '/device/search', data: {
|
|
|
- size: 200,
|
|
|
- page: 1,
|
|
|
- sort: 'createtime',
|
|
|
- order: 'desc',
|
|
|
- keyWord: deviceId.value,
|
|
|
- }})
|
|
|
- .then((result: any) => {
|
|
|
- if(!result.data[0].data) {
|
|
|
- device.value = {
|
|
|
- data: []
|
|
|
- };
|
|
|
- return Promise.reject('ok');
|
|
|
- };
|
|
|
- device.value = result.data[0];
|
|
|
- device.value!.data = JSON.parse(result.data[0].data);
|
|
|
- console.log(device.value)
|
|
|
- return Promise.resolve(device.value)
|
|
|
+ import { onMounted, reactive, ref } from 'vue';
|
|
|
+ import { useRouter } from 'vue-router'
|
|
|
+ import { post_promise } from '@/network/axios';
|
|
|
+ import { timestampToTime } from '@/utils'
|
|
|
+ // 路由
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ // 分页
|
|
|
+ const page = reactive({
|
|
|
+ total: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pages: 0,
|
|
|
})
|
|
|
- .then((device: any) => {
|
|
|
- console.log(device.productId)
|
|
|
- if(!product.value){
|
|
|
- product.value = {
|
|
|
- id: '',
|
|
|
- name: device.productName,
|
|
|
- model: []
|
|
|
- }
|
|
|
- return post_promise({url: '/model/search', data: {
|
|
|
- size: 200,
|
|
|
- page: 1,
|
|
|
- sort: 'code',
|
|
|
- order: 'asc',
|
|
|
- productId: device.productId,
|
|
|
- }})
|
|
|
- }else{
|
|
|
- console.log('else...........')
|
|
|
- return Promise.reject('ok')
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- .then((result: any) => {
|
|
|
- console.log(result)
|
|
|
- result.data.forEach((element: any) => {
|
|
|
- element.define = JSON.parse(element.define)
|
|
|
- product.value!.model.push(element)
|
|
|
- });
|
|
|
- return post_promise({url: '/model/searchCommon', data: {
|
|
|
- size: 200,
|
|
|
- page: 1,
|
|
|
- sort: 'code',
|
|
|
- order: 'asc',
|
|
|
+ const dataList = ref<any[]>([]);
|
|
|
+ const refreshing = ref(false);
|
|
|
+ const isLoading = ref(false);
|
|
|
+ const finished = ref(false);
|
|
|
+
|
|
|
+ // 获取数据
|
|
|
+ const getData = () => {
|
|
|
+ console.log('onload.....')
|
|
|
+
|
|
|
+ post_promise({url: '/device/searchRecord', data: {
|
|
|
+ size: page.pageSize,
|
|
|
+ page: page.pageNum,
|
|
|
+ sort: "createtime",
|
|
|
+ order: "desc",
|
|
|
+ keyWord: deviceId.value,
|
|
|
+ mac: ''
|
|
|
}})
|
|
|
+ .then((result) => {
|
|
|
+ console.log(result)
|
|
|
+ // 刷新结束
|
|
|
+ isLoading.value = false;
|
|
|
+ refreshing.value = false;
|
|
|
+ // 处理成功结果
|
|
|
+ if(result.code == 0){
|
|
|
+ // 下拉刷新时清空列表
|
|
|
+ const dataArr:any[] = result.data;
|
|
|
+ const total = result.total;
|
|
|
+ const pages = Math.ceil(total / page.pageSize);
|
|
|
+ console.log(pages);
|
|
|
+ console.log(dataArr)
|
|
|
+
|
|
|
+ if(page.pageNum == 1){
|
|
|
+ dataList.value.splice(0, dataList.value.length);
|
|
|
+ }
|
|
|
+ dataList.value.push(...dataArr);
|
|
|
+ page.pages = pages
|
|
|
+ page.total = total
|
|
|
+ console.log(dataList.value, pages)
|
|
|
+ }
|
|
|
+ },(result) => {
|
|
|
+ console.log(result)
|
|
|
+ isLoading.value = false;
|
|
|
+ refreshing.value = false;
|
|
|
+ // 跳转到首页
|
|
|
+ }).catch((ex) => {
|
|
|
+ console.log(ex)
|
|
|
+ isLoading.value = false;
|
|
|
+ refreshing.value = false;
|
|
|
+ // 跳转到首页
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+ const onRefresh = () => {
|
|
|
+ console.log('onrefresh...')
|
|
|
+ console.log(refreshing.value)
|
|
|
+ page.pageNum = 1;
|
|
|
+ // 清空列表数据
|
|
|
+ finished.value = false;
|
|
|
+
|
|
|
+ // 重新加载数据
|
|
|
+ // 将 loading 设置为 true,表示处于加载状态
|
|
|
+ isLoading.value = true;
|
|
|
+ getData();
|
|
|
+ };
|
|
|
+
|
|
|
+ const deviceId = ref('');
|
|
|
+ // 生命周期
|
|
|
+ onMounted(() => {
|
|
|
+ console.log('onMounted');
|
|
|
+ deviceId.value = router.currentRoute.value.params.deviceId as string;
|
|
|
+ getData();
|
|
|
})
|
|
|
- .then((result: any) => {
|
|
|
- console.log(result)
|
|
|
- result.data.forEach((element: any) => {
|
|
|
- element.define = JSON.parse(element.define)
|
|
|
- product.value!.model.push(element)
|
|
|
- });
|
|
|
- })
|
|
|
- .catch((msg: any) => {
|
|
|
- if(msg != 'ok'){
|
|
|
- console.log(msg)
|
|
|
- showToast(msg);
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- search();
|
|
|
-
|
|
|
-}
|
|
|
|
|
|
|
|
|
+ // 点击加载
|
|
|
+ const clickLoading = () => {
|
|
|
+ console.log('clickLoading');
|
|
|
+ page.pageNum++
|
|
|
+ isLoading.value = true
|
|
|
+ getData();
|
|
|
+ }
|
|
|
|
|
|
+</script>
|
|
|
|
|
|
-const router = useRouter();
|
|
|
-const deviceId = ref('');
|
|
|
-// 生命周期
|
|
|
-onMounted(() => {
|
|
|
- console.log('deviceDetail onMounted')
|
|
|
- deviceId.value = router.currentRoute.value.params.deviceId as string;
|
|
|
- refreshList();
|
|
|
-})
|
|
|
+<style scoped>
|
|
|
|
|
|
-</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+</style>
|