xuos
/
xiuos_IoT
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add log Data

This commit is contained in:
龚祖望 2022-10-26 10:52:19 +08:00
parent 1220ac9ee2
commit 2e1411009d
4 changed files with 95 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
xiuosiot-frontend/src/api/log/accessLog.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function getList(data) {
return request({
url: '/log/requestLog',
method: 'get',
data
})
}

9
xiuosiot-frontend/src/api/log/systemLog.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function getList(data) {
return request({
url: '/log/deviceLog',
method: 'get',
data
})
}

94
xiuosiot-frontend/src/views/log/accessLog/index.vue
View File

@ -12,14 +12,14 @@
</el-row> </el-row>
<div v-for="(item, index) in logList" :key="index" class="log-container"> <div v-for="(item, index) in logList" :key="index" class="log-container">
<p class="ip"><img src="@/assets/images/ip.png" width="40px">访问IP</p> <p class="ip"><img src="@/assets/images/ip.png" width="40px">访问IP</p>
<p class="ip_val">{{ item.ip }}</p> <p class="ip_val">{{ item.requestip }}</p>
<div class="line" /> <div class="line" />
<p class="content"><img src="@/assets/images/take_time.png">请求耗时</p> <p class="content"><img src="@/assets/images/take_time.png">请求耗时</p>
<p class="content_val">{{ item.requestTime }}</p> <p class="content_val">{{ item.processtime+'ms' }}</p>
<p class="content"><img src="@/assets/images/path.png">请求路径</p> <p class="content"><img src="@/assets/images/path.png">请求路径</p>
<p class="content_val">{{ item.path }}</p> <p class="content_val">{{ item.requesturl }}</p>
<p class="content"><img src="@/assets/images/timestamp.png">请求时间</p> <p class="content"><img src="@/assets/images/timestamp.png">请求时间</p>
<p class="content_val">{{ item.time }}</p> <p class="content_val">{{ item.requesttime }}</p>
<div class="footer"> <div class="footer">
<span class="usr"> <span class="usr">
<img src="@/assets/images/usr.png">{{ item.user }} <img src="@/assets/images/usr.png">{{ item.user }}
@ -40,7 +40,7 @@
<p class="ip"> <p class="ip">
<img src="@/assets/images/ip_white_border.png" width="40px">访问IP <img src="@/assets/images/ip_white_border.png" width="40px">访问IP
</p> </p>
<p class="ip_val">{{ current.ip }}</p> <p class="ip_val">{{ current.requestip }}</p>
<div class="remove_icon" @click="close">X</div> <div class="remove_icon" @click="close">X</div>
</div> </div>
<div class="dialog_content"> <div class="dialog_content">
@ -55,40 +55,40 @@
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/clip.png">URL <img src="@/assets/images/clip.png">URL
</div> </div>
<div class="item_content">XXXXXXX</div> <div class="item_content">{{ current.requesturl }}</div>
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/ip_without_border.png" src="@/assets/images/ip_without_border.png"
style="margin-right: 20px" style="margin-right: 20px"
>IP >IP
</div> </div>
<div class="item_content">XXXXX</div> <div class="item_content">{{ current.requestip }}</div>
</div> </div>
<div class="line" /> <div class="line" />
<div class="form_content"> <div class="form_content">
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/http_method.png">请求<br>方法 <img src="@/assets/images/http_method.png">请求<br>方法
</div> </div>
<div class="item_content">XXXXXXX</div> <div class="item_content">{{ current.requesttype }}</div>
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/timestamp_without_border.png" src="@/assets/images/timestamp_without_border.png"
>请求<br>时间 >请求<br>时间
</div> </div>
<div class="item_content">XXXXX</div> <div class="item_content">{{ current.requesttime }}</div>
</div> </div>
<div class="line" /> <div class="line" />
<div class="form_content"> <div class="form_content">
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/action.png">动作 <img src="@/assets/images/action.png">请求<br>参数
</div> </div>
<div class="item_content">XXXXXXX</div> <div class="item_content">{{ current.requestparam }}</div>
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/take_time_without_border.png" src="@/assets/images/take_time_without_border.png"
>请求<br>耗时 >请求<br>耗时
</div> </div>
<div class="item_content">XXXXX</div> <div class="item_content">{{ current.processtime+'ms' }}</div>
</div> </div>
<div class="line" /> <div class="line" />
</div> </div>
@ -97,29 +97,29 @@
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/class.png">类名 <img src="@/assets/images/class.png">类名
</div> </div>
<div class="item_content">XXXXXXX</div> <div class="item_content">{{ current.classname }}</div>
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/method.png" src="@/assets/images/method.png"
>方法<br>名 >方法<br>名
</div> </div>
<div class="item_content">XXXXX</div> <div class="item_content">{{ current.methodname }}</div>
</div> </div>
<div class="line" /> <div class="line" />
<div class="form_content"> <div class="form_content">
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/header.png">请求<br>头 <img src="@/assets/images/header.png">请求<br>头
</div> </div>
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> <div class="item_content">{{ current.requestheader }}</div>
</div> </div>
<div class="line" /> <div class="line" />
<div class="form_content"> <div class="form_content">
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/param.png" src="@/assets/images/param.png"
>请求<br>参数 >返回<br>结果
</div> </div>
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> <div class="item_content">{{ current.requestresult }}</div>
</div> </div>
<div class="line" /> <div class="line" />
</div> </div>
@ -130,61 +130,13 @@
</template> </template>
<script> <script>
import { getList } from '@/api/log/accessLog'
export default { export default {
data() { data() {
return { return {
date: '', date: '',
logList: [ logList: [],
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
},
{
ip: '196.105.55.103',
requestTime: '35ms',
path: '/device/select?activestatus=0',
time: '2022-11-14 0:11:54',
user: '大胜达'
}
],
visible: false, visible: false,
radio: '基本信息', radio: '基本信息',
current: {} current: {}
@ -192,8 +144,14 @@ export default {
}, },
mounted() { mounted() {
this.date = new Date().toLocaleDateString() this.date = new Date().toLocaleDateString()
this.getList()
}, },
methods: { methods: {
getList() {
getList().then(res => {
this.logList = res.data
})
},
showDetail(item) { showDetail(item) {
this.current = item this.current = item
this.visible = true this.visible = true

127
xiuosiot-frontend/src/views/log/systemLog/index.vue
View File

@ -10,19 +10,19 @@
<span class="date">{{ date }}</span> <span class="date">{{ date }}</span>
</div> </div>
</el-row> </el-row>
<div v-for="(item, index) in logList" :key="index" class="log-container" :style="{'background-image':'url('+getBgImg(item.level)+')'}"> <div v-for="(item, index) in logList" :key="index" class="log-container" :style="{'background-image':'url('+item.bgImg+')'}">
<p class="ip"><img src="@/assets/images/sysLog_type.png" width="40px">设备名称</p> <p class="ip"><img src="@/assets/images/sysLog_type.png" width="40px">设备名称</p>
<p class="ip_val">{{ item.type }}</p> <p class="ip_val">{{ item.deviceType }}</p>
<div class="line" /> <div class="line" />
<p class="content"><img src="@/assets/images/sysLog_no.png">设备序列号</p> <p class="content"><img src="@/assets/images/sysLog_no.png">设备序列号</p>
<p class="content_val">{{ item.no }}</p> <p class="content_val">{{ item.deviceNo }}</p>
<p class="content"><img src="@/assets/images/sysLog_time.png">日志时间</p> <p class="content"><img src="@/assets/images/sysLog_time.png">日志时间</p>
<p class="content_val">{{ item.time }}</p> <p class="content_val">{{ item.logTime }}</p>
<p class="content"><img src="@/assets/images/sysLog_thread.png">线程</p> <p class="content"><img src="@/assets/images/sysLog_thread.png">线程</p>
<p class="content_val">{{ item.thread }}</p> <p class="content_val">{{ item.threadNo }}</p>
<div class="footer"> <div class="footer">
<span class="usr" :style="getColor(item.level)"> <span class="usr" :style="{'color':item.color}">
{{ item.level }} {{ item.levelDesc }}
</span> </span>
<span <span
class="detail" class="detail"
@ -40,22 +40,31 @@
<p class="ip"> <p class="ip">
<img src="@/assets/images/sysLog_type_white.png" width="40px">设备名称 <img src="@/assets/images/sysLog_type_white.png" width="40px">设备名称
</p> </p>
<p class="ip_val">{{ current.type }}</p> <p class="ip_val">{{ current.deviceType }}</p>
<div class="remove_icon" @click="close">X</div> <div class="remove_icon" @click="close">X</div>
</div> </div>
<div class="dialog_content"> <div class="dialog_content">
<div class="form"> <div class="form">
<div class="form_content"> <div class="form_content">
<div class="item_title"> <div class="item_title">
<img src="@/assets/images/sysLog_link.png">链路<br>ID <img src="@/assets/images/sysLog_link.png">设备<br>序列号
</div> </div>
<div class="item_content">XXXXXXX</div> <div class="item_content">{{ current.deviceNo }}</div>
<div class="item_title"> <div class="item_title">
<img <img
src="@/assets/images/sysLog_msg.png" src="@/assets/images/sysLog_msg.png"
>消息<br>ID >线程
</div> </div>
<div class="item_content">XXXXX</div> <div class="item_content">{{ current.threadNo }}</div>
</div>
<div class="line" />
<div class="form_content">
<div class="item_title">
<img
src="@/assets/images/sysLog_content.png"
>日志<br>时间
</div>
<div class="item_content">{{ current.logTime }}</div>
</div> </div>
<div class="line" /> <div class="line" />
<div class="form_content"> <div class="form_content">
@ -64,7 +73,7 @@
src="@/assets/images/sysLog_content.png" src="@/assets/images/sysLog_content.png"
>日志<br>内容 >日志<br>内容
</div> </div>
<div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> <div class="item_content">{{ current.deviceLog }}</div>
</div> </div>
<div class="line" /> <div class="line" />
</div> </div>
@ -75,83 +84,47 @@
</template> </template>
<script> <script>
import { getList } from '@/api/log/systemLog'
export default { export default {
data() { data() {
return { return {
date: '', date: '',
logList: [ logList: [],
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Info'
},
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Warning'
},
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Error'
},
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Error'
},
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Info'
},
{
type: 'RV400-NPU16T-5G-AR100',
no: 'A000008',
thread: 'thread1',
time: '2022-11-14 0:11:54',
level: 'Info'
}
],
visible: false, visible: false,
current: {} current: {}
} }
}, },
created() {
this.getList()
},
mounted() { mounted() {
this.date = new Date().toLocaleDateString() this.date = new Date().toLocaleDateString()
}, },
methods: { methods: {
getBgImg(level) { getList() {
if (level === 'Info') { getList().then(res => {
return require('@/assets/images/systemlog_box_info.png') this.logList = res.data.map(item => {
} switch (item.logLevel) {
if (level === 'Warning') { case 0:
return require('@/assets/images/systemlog_box_warning.png') item.bgImg = require('@/assets/images/systemlog_box_info.png')
} item.color = '#FAF200'
if (level === 'Error') { item.levelDesc = 'Info'
return require('@/assets/images/systemlog_box_error.png') break
} case 1:
}, item.bgImg = require('@/assets/images/systemlog_box_warning.png')
getColor(level) { item.color = '#FFB300'
if (level === 'Info') { item.levelDesc = 'Warning'
return 'color:#FAF200' break
} case 2:
if (level === 'Warning') { item.bgImg = require('@/assets/images/systemlog_box_error.png')
return 'color:#FFB300' item.color = '#FF4E00'
} item.levelDesc = 'Error'
if (level === 'Error') { break
return 'color:#FF4E00'
} }
return item
})
})
}, },
showDetail(item) { showDetail(item) {
this.current = item this.current = item