更新
This commit is contained in:
26
wcs/qd/src/api/monitor/loki.js
Normal file
26
wcs/qd/src/api/monitor/loki.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getAllLabels() {
|
||||
return request({
|
||||
url: 'api/loki/labels',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAllValues(label) {
|
||||
return request({
|
||||
url: 'api/loki/values',
|
||||
method: 'post',
|
||||
data: label
|
||||
})
|
||||
}
|
||||
|
||||
export function getLogData(param) {
|
||||
return request({
|
||||
url: 'api/loki/logs',
|
||||
method: 'post',
|
||||
data: param
|
||||
})
|
||||
}
|
||||
|
||||
export default { getAllLabels, getAllValues, getLogData }
|
||||
@@ -115,6 +115,7 @@ import hailiang_threestation_smart from '@/views/acs/device/driver/hailiang_one/
|
||||
import hailiang_foldingDisc_smart from '@/views/acs/device/driver/hailiang_one/hailiang_foldingDisc_smart'
|
||||
import hailiang_elevator_wiring from '@/views/acs/device/driver/hailiang_one/hailiang_elevator_wiring'
|
||||
import hailiang_paint_line from '@/views/acs/device/driver/hailiang_one/hailiang_paint_line'
|
||||
import hailiang_stacking_station from '@/views/acs/device/driver/hailiang_one/hailiang_stacking_station'
|
||||
|
||||
export default {
|
||||
name: 'DeviceConfig',
|
||||
@@ -127,7 +128,7 @@ export default {
|
||||
hailiang_special_pick_station, hailiang_special_empty_station, hailiang_special_full_station, hailiang_special_pour_station, hailiang_special_device,
|
||||
hailiang_engraving_machine, hailiang_auto_cache_line, hailiang_cleaning_feeding_line, hailiang_cleaning_machine, hailiang_cleaning_machine_storage_station,
|
||||
hailiang_xj_plc_test, hailiang_smart_plc_test, hailiang_threestation_smart, hailiang_foldingDisc_smart, hailiang_elevator_wiring,
|
||||
hailiang_paint_line },
|
||||
hailiang_paint_line, hailiang_stacking_station },
|
||||
dicts: ['device_type'],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
|
||||
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<!--海亮包装机-->
|
||||
<div>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">设备协议:</span>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
OpcServer:
|
||||
<el-select
|
||||
v-model="opc_id"
|
||||
placeholder="无"
|
||||
clearable
|
||||
filterable
|
||||
@change="changeOpc"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dataOpcservers"
|
||||
:key="item.opc_id"
|
||||
:label="item.opc_name"
|
||||
:value="item.opc_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
PLC:
|
||||
<el-select
|
||||
v-model="plc_id"
|
||||
placeholder="无"
|
||||
clearable
|
||||
filterable
|
||||
@change="changePlc"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dataOpcPlcs"
|
||||
:key="item.plc_id"
|
||||
:label="item.plc_name"
|
||||
:value="item.plc_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">输送系统:</span>
|
||||
</div>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="电气调度号" label-width="150px">
|
||||
<el-input v-model="form.address" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">指令相关:</span>
|
||||
</div>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关联设备" prop="device_code">
|
||||
<el-select
|
||||
v-model="form.link_device_code"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deviceList"
|
||||
:key="item.device_code"
|
||||
:label="item.device_name"
|
||||
:value="item.device_code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">PLC读取字段:</span>
|
||||
</div>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||||
<el-table
|
||||
v-loading="false"
|
||||
:data="data1"
|
||||
:max-height="550"
|
||||
size="small"
|
||||
style="width: 100%;margin-bottom: 15px"
|
||||
>
|
||||
|
||||
<el-table-column prop="name" label="用途" />
|
||||
<el-table-column prop="code" label="别名要求" />
|
||||
<el-table-column prop="db" label="DB块">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="data1[scope.$index].db"
|
||||
size="mini"
|
||||
class="edit-input"
|
||||
@input="finishReadEdit(data1[scope.$index])"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dbr_value">
|
||||
<template slot="header">
|
||||
<el-link type="primary" :underline="false" @click.native="test_read1()">测试读</el-link>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="data1[scope.$index].dbr_value" size="mini" class="edit-input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span">PLC写入字段:</span>
|
||||
</div>
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
|
||||
<el-table
|
||||
v-loading="false"
|
||||
:data="data2"
|
||||
:max-height="550"
|
||||
size="small"
|
||||
style="width: 100%;margin-bottom: 15px"
|
||||
>
|
||||
|
||||
<el-table-column prop="name" label="用途" />
|
||||
<el-table-column prop="code" label="别名要求" />
|
||||
<el-table-column prop="db" label="DB块">
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model="data2[scope.$index].db"
|
||||
size="mini"
|
||||
class="edit-input"
|
||||
@input="finishWriteEdit(data2[scope.$index])"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dbw_value">
|
||||
<template slot="header">
|
||||
<el-link type="primary" :underline="false" @click.native="test_write1()">测试写</el-link>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="data2[scope.$index].dbw_value" size="mini" class="edit-input" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="role-span" />
|
||||
<el-button
|
||||
:loading="false"
|
||||
icon="el-icon-check"
|
||||
size="mini"
|
||||
style="float: right; padding: 6px 9px"
|
||||
type="primary"
|
||||
@click="doSubmit"
|
||||
>保存
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryDriverConfig,
|
||||
updateConfig,
|
||||
testRead,
|
||||
testwrite
|
||||
} from '@/api/acs/device/driverConfig'
|
||||
import { selectOpcList } from '@/api/acs/device/opc'
|
||||
import { selectPlcList } from '@/api/acs/device/opcPlc'
|
||||
import { selectListByOpcID } from '@/api/acs/device/opcPlc'
|
||||
|
||||
import crud from '@/mixins/crud'
|
||||
import deviceCrud from '@/api/acs/device/device'
|
||||
|
||||
export default {
|
||||
name: 'StandardConveyorControl',
|
||||
mixins: [crud],
|
||||
props: {
|
||||
parentForm: {
|
||||
type: Object,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device_code: '',
|
||||
device_id: '',
|
||||
plc_id: '',
|
||||
plc_code: '',
|
||||
address: '',
|
||||
opc_id: '',
|
||||
opc_code: '',
|
||||
configLoading: false,
|
||||
dataOpcservers: [],
|
||||
dataOpcPlcs: [],
|
||||
deviceList: [],
|
||||
data1: [],
|
||||
data2: [],
|
||||
form: {
|
||||
link_device_code: ''
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
// 从父表单获取设备编码
|
||||
this.device_id = this.$props.parentForm.device_id
|
||||
this.device_code = this.$props.parentForm.device_code
|
||||
queryDriverConfig(this.device_id, this.$props.parentForm.driver_code).then(data => {
|
||||
// 给表单赋值,并且属性不能为空
|
||||
if (data.form) {
|
||||
const arr = Object.keys(data.form)
|
||||
// 不为空
|
||||
if (arr.length > 0) {
|
||||
this.form = data.form
|
||||
}
|
||||
}
|
||||
|
||||
// 给表单赋值,并且属性不能为空
|
||||
if (data.parentForm) {
|
||||
const arr = Object.keys(data.parentForm)
|
||||
// 不为空
|
||||
if (arr.length > 0) {
|
||||
this.opc_code = data.parentForm.opc_code
|
||||
this.plc_code = data.parentForm.plc_code
|
||||
}
|
||||
}
|
||||
this.data1 = data.rs
|
||||
this.data2 = data.ws
|
||||
this.sliceItem()
|
||||
})
|
||||
selectPlcList().then(data => {
|
||||
this.dataOpcPlcs = data
|
||||
this.plc_id = this.$props.parentForm.opc_plc_id
|
||||
})
|
||||
selectOpcList().then(data => {
|
||||
this.dataOpcservers = data
|
||||
this.opc_id = this.$props.parentForm.opc_server_id
|
||||
})
|
||||
deviceCrud.selectDeviceList().then(data => {
|
||||
this.deviceList = data
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
finishReadEdit(data) {
|
||||
// 编辑的是code列,并且值包含mode
|
||||
if (data.code.indexOf('mode') !== -1) {
|
||||
const dbValue = data.db
|
||||
// .之前的字符串
|
||||
const beforeStr = dbValue.match(/(\S*)\./)[1]
|
||||
// .之后的字符串
|
||||
const afterStr = dbValue.match(/\.(\S*)/)[1]
|
||||
// 取最后数字
|
||||
const endNumber = afterStr.substring(1)
|
||||
// 最后为非数字
|
||||
if (isNaN(parseInt(endNumber))) {
|
||||
return
|
||||
}
|
||||
for (const val in this.data1) {
|
||||
if (this.data1[val].code.indexOf('move') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 1)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('action') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('ioaction') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 3)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('height') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 4)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('error') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 5)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('direction') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 6)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('operation_type') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 7)
|
||||
}
|
||||
if (this.data1[val].code.indexOf('task') !== -1) {
|
||||
this.data1[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 21)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
finishWriteEdit(data) {
|
||||
// 编辑的是code列,并且值包含mode
|
||||
if (data.code.indexOf('to_command') !== -1) {
|
||||
const dbValue = data.db
|
||||
// .之前的字符串
|
||||
const beforeStr = dbValue.match(/(\S*)\./)[1]
|
||||
// .之后的字符串
|
||||
const afterStr = dbValue.match(/\.(\S*)/)[1]
|
||||
// 取最后数字
|
||||
const endNumber = afterStr.substring(1)
|
||||
// 最后为非数字
|
||||
if (isNaN(parseInt(endNumber))) {
|
||||
return
|
||||
}
|
||||
for (const val in this.data2) {
|
||||
if (this.data2[val].code.indexOf('to_target') !== -1) {
|
||||
this.data2[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
|
||||
}
|
||||
if (this.data2[val].code.indexOf('to_task') !== -1) {
|
||||
this.data2[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 6)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
changeOpc(val) {
|
||||
this.dataOpcservers.forEach(item => {
|
||||
if (item.opc_id === val) {
|
||||
this.opc_code = item.opc_code
|
||||
}
|
||||
})
|
||||
|
||||
selectListByOpcID(val).then(data => {
|
||||
this.dataOpcPlcs = data
|
||||
this.plc_id = ''
|
||||
this.plc_code = ''
|
||||
if (this.dataOpcPlcs && this.dataOpcPlcs.length > 0) {
|
||||
this.plc_id = this.dataOpcPlcs[0].plc_id
|
||||
this.plc_code = this.dataOpcPlcs[0].plc_code
|
||||
}
|
||||
this.sliceItem()
|
||||
})
|
||||
},
|
||||
changePlc(val) {
|
||||
this.dataOpcPlcs.forEach(item => {
|
||||
if (item.plc_id === val) {
|
||||
this.plc_code = item.plc_code
|
||||
this.sliceItem()
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
test_read1() {
|
||||
testRead(this.data1, this.opc_id).then(data => {
|
||||
this.data1 = data
|
||||
this.notify('操作成功!', 'success')
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
test_write1() {
|
||||
testwrite(this.data2, this.opc_id).then(data => {
|
||||
this.notify('操作成功!', 'success')
|
||||
}).catch(err => {
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.configLoading = true
|
||||
// 根据驱动类型判断是否为路由设备
|
||||
const parentForm = this.parentForm
|
||||
parentForm.is_route = true
|
||||
parentForm.plc_id = this.plc_id
|
||||
parentForm.opc_id = this.opc_id
|
||||
updateConfig(parentForm, this.form, this.data1, this.data2).then(res => {
|
||||
this.notify('保存成功', 'success')
|
||||
this.configLoading = false
|
||||
}).catch(err => {
|
||||
this.configLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
sliceItem() { // 拼接DB的Item值
|
||||
this.data1.forEach(item => {
|
||||
const str = item.code
|
||||
// 是否包含.
|
||||
if (str.search('.') !== -1) {
|
||||
// 截取最后一位
|
||||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
|
||||
} else {
|
||||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
|
||||
}
|
||||
})
|
||||
this.data2.forEach(item => {
|
||||
const str = item.code
|
||||
// 是否包含.
|
||||
if (str.search('.') !== -1) {
|
||||
// 截取最后一位
|
||||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
|
||||
} else {
|
||||
item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -47,6 +47,9 @@
|
||||
<el-form-item label="规格型号">
|
||||
<el-input v-model="form.material_spec" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="托盘模板">
|
||||
<el-input v-model="form.lane_tray_template" style="width: 370px;" @input="handleEdit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号" prop="device_code">
|
||||
<el-select
|
||||
v-model="form.device_code"
|
||||
@@ -60,7 +63,7 @@
|
||||
<el-option v-for="item in deviceList" :key="item.device_code" :label="item.device_code" :value="item.device_code" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否agv搬运" prop="is_needmove">
|
||||
<el-form-item label="agv搬运" prop="is_needmove">
|
||||
<el-radio-group v-model="form.is_needmove" size="mini">
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
@@ -91,7 +94,7 @@
|
||||
<el-table-column prop="qty" label="下料数量" />
|
||||
<el-table-column prop="device_code" label="设备编号" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="material_code" label="物料编码" />
|
||||
<el-table-column prop="material_name" label="物料名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="material_name" label="物料名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="material_spec" label="规格型号" />
|
||||
<el-table-column prop="one_qty" label="每箱接料数量" />
|
||||
<el-table-column prop="is_needmove" label="是否AGV搬运">
|
||||
@@ -132,7 +135,8 @@ const defaultForm = {
|
||||
is_deleted: null,
|
||||
ext_order_id: null,
|
||||
device_code: null,
|
||||
is_needmove: '1'
|
||||
is_needmove: '1',
|
||||
lane_tray_template: null
|
||||
}
|
||||
export default {
|
||||
name: 'Produceshiftorder',
|
||||
@@ -188,6 +192,12 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 在 Input 值改变时触发
|
||||
handleEdit(e) {
|
||||
let value = e.replace(/^(0+)|[^d]+/g, '') // 以0开头或者输入非数字,会被替换成空
|
||||
value = value.replace(/(d{15})d*/, '$1') // 最多保留15位整数
|
||||
this.form.lane_tray_template = value
|
||||
},
|
||||
is_disabled(length, data) {
|
||||
if (length !== 1) {
|
||||
return true
|
||||
|
||||
458
wcs/qd/src/views/monitor/logback/index.vue
Normal file
458
wcs/qd/src/views/monitor/logback/index.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<!--工具栏-->
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="logLabel" filterable placeholder="请选择标签" size="mini" @change="getValues">
|
||||
<el-option
|
||||
v-for="item in labelOptions"
|
||||
:key="item.index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="=">
|
||||
<el-select v-model="logLabelValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
|
||||
<el-option
|
||||
v-for="item in labelValueOptions"
|
||||
:key="item.index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="方向">
|
||||
<el-radio-group v-model="direction" size="mini" @change="queryData">
|
||||
<el-radio label="backward">backward</el-radio>
|
||||
<el-radio label="forward">forward</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!showOptions" label="时间范围" style="margin-left: 10px">
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
size="mini"
|
||||
clearable
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="showOptions" label="时差" style="margin-left: 10px">
|
||||
<el-select v-model="timeZoneValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
|
||||
<el-option
|
||||
v-for="item in timeZoneOptions"
|
||||
:key="item.index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-tooltip class="item" effect="dark" content="切换查询条件" placement="top">
|
||||
<span class="el-icon-sort" @click="changeShow" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="text"
|
||||
style="width: 300px"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="条数" style="margin-left: 10px">
|
||||
<el-input-number
|
||||
v-model="limits"
|
||||
size="mini"
|
||||
controls-position="right"
|
||||
:min="100"
|
||||
:max="5000"
|
||||
:step="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="滚动步数" style="margin-left: 10px">
|
||||
<el-input-number
|
||||
v-model="scrollStep"
|
||||
size="mini"
|
||||
controls-position="right"
|
||||
:min="10"
|
||||
:max="2000"
|
||||
:step="10"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-dropdown split-button type="primary" size="mini" @click="queryData">
|
||||
查询{{ runStatu }}
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item, index) in runStatuOptions" :key="index" @click.native="startInterval(item)">{{ item.label }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin: 3px; min-height: 80vh">
|
||||
<!--数据判空-->
|
||||
<el-empty v-if="showEmpty" :description="emptyText" />
|
||||
<!--数据加载-->
|
||||
<el-card v-else shadow="hover">
|
||||
<div v-for="(log, index) in logs" :key="index">
|
||||
<div style="margin-bottom: 5px; font-size: 12px; width: 100%" v-html="log[1]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import logOperation from '@/api/monitor/loki'
|
||||
import { default as AnsiUp } from 'ansi_up'
|
||||
|
||||
let queryParam = {
|
||||
logLabel: null,
|
||||
logLabelValue: null,
|
||||
start: null,
|
||||
end: null,
|
||||
text: null,
|
||||
limits: 100,
|
||||
direction: 'backward'
|
||||
}
|
||||
export default {
|
||||
name: 'LogBack',
|
||||
data() {
|
||||
return {
|
||||
labelOptions: [], // 标签数据
|
||||
labelValueOptions: [], // 标签值
|
||||
logLabel: '',
|
||||
logLabelValue: '',
|
||||
timeRange: [],
|
||||
text: '',
|
||||
limits: 100,
|
||||
direction: 'backward',
|
||||
logData: [],
|
||||
logs: [], // 所有日志
|
||||
showEmpty: true,
|
||||
emptyText: '请选择标签',
|
||||
displayDirection: [{
|
||||
value: 'backward',
|
||||
label: '新的在前'
|
||||
}, {
|
||||
value: 'forward',
|
||||
label: '旧的在前'
|
||||
}],
|
||||
scrollStep: 10,
|
||||
runStatu: 'off',
|
||||
runStatuOptions: [{
|
||||
label: 'off',
|
||||
value: 0
|
||||
}, {
|
||||
label: '5s',
|
||||
value: 5000
|
||||
}, {
|
||||
label: '10s',
|
||||
value: 10000
|
||||
}, {
|
||||
label: '1m',
|
||||
value: 60000
|
||||
}, {
|
||||
label: '5m',
|
||||
value: 300000
|
||||
}, {
|
||||
label: '30m',
|
||||
value: 1800000
|
||||
}],
|
||||
timeZoneOptions: [{
|
||||
label: '最近5分钟',
|
||||
value: 300 * 1000
|
||||
}, {
|
||||
label: '最近15分钟',
|
||||
value: 900 * 1000
|
||||
}, {
|
||||
label: '最近30分钟',
|
||||
value: 1800 * 1000
|
||||
}, {
|
||||
label: '最近1小时',
|
||||
value: 3600 * 1000
|
||||
}, {
|
||||
label: '最近3小时',
|
||||
value: 3600 * 1000 * 3
|
||||
}, {
|
||||
label: '最近6小时',
|
||||
value: 3600 * 1000 * 6
|
||||
}, {
|
||||
label: '最近12小时',
|
||||
value: 3600 * 1000 * 12
|
||||
}, {
|
||||
label: '最近24小时',
|
||||
value: 3600 * 1000 * 24
|
||||
}, {
|
||||
label: '最近2天',
|
||||
value: 3600 * 1000 * 24 * 2
|
||||
}, {
|
||||
label: '最近7天',
|
||||
value: 3600 * 1000 * 24 * 7
|
||||
}, {
|
||||
label: '最近15天',
|
||||
value: 3600 * 1000 * 24 * 15
|
||||
}],
|
||||
timeZoneValue: '',
|
||||
showOptions: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
created() {
|
||||
this.initLabelOptions()
|
||||
},
|
||||
beforeDestroy() {
|
||||
// js提供的clearInterval方法用来清除定时器
|
||||
// console.log('定时任务销毁')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
initLabelOptions() { // 获取lables
|
||||
logOperation.getAllLabels().then(res => {
|
||||
this.labelOptions = res.data
|
||||
})
|
||||
},
|
||||
getValues() {
|
||||
this.logLabelValue = null
|
||||
logOperation.getAllValues(this.logLabel).then(res => {
|
||||
this.labelValueOptions = res.data
|
||||
})
|
||||
},
|
||||
queryData() {
|
||||
// 清空查询数据
|
||||
this.clearParam()
|
||||
if (this.logLabel !== '') { // 标签
|
||||
queryParam.logLabel = this.logLabel
|
||||
}
|
||||
if (this.logLabelValue !== '') { // 标签值
|
||||
queryParam.logLabelValue = this.logLabelValue
|
||||
}
|
||||
if (queryParam.logLabelValue === null) { // 判空
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '请选择标签',
|
||||
type: 'warning'
|
||||
})
|
||||
this.showEmpty = true
|
||||
this.emptyText = '请选择标签'
|
||||
return
|
||||
}
|
||||
if (this.timeRange.length !== 0) { // 如果是输入时间范围
|
||||
queryParam.start = (new Date(this.timeRange[0]).getTime() * 1000000).toString()
|
||||
queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
|
||||
}
|
||||
if (this.timeZoneValue) {
|
||||
// console.log('时差:', this.timeZoneValue)
|
||||
// console.log('start时间:', new Date().getTime() - this.timeZoneValue)
|
||||
// console.log('end时间:', new Date().getTime())
|
||||
const time = new Date()
|
||||
queryParam.start = ((time.getTime() - this.timeZoneValue) * 1000000).toString()
|
||||
queryParam.end = (time.getTime() * 1000000).toString()
|
||||
}
|
||||
if (this.text) {
|
||||
queryParam.text = this.text.replace(/^\s*|\s*$/g, '')
|
||||
}
|
||||
if (this.limits) {
|
||||
queryParam.limits = this.limits
|
||||
}
|
||||
queryParam.direction = this.direction
|
||||
console.log('最后参数:', queryParam)
|
||||
var ansi_up = new AnsiUp()
|
||||
logOperation.getLogData(queryParam).then(res => {
|
||||
console.log('结果', res)
|
||||
this.showEmpty = false
|
||||
if (res.data.result.length === 1) {
|
||||
this.logs = res.data.result[0].values
|
||||
for (const i in res.data.result[0].values) {
|
||||
this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
|
||||
}
|
||||
} else if (res.data.result.length > 1) {
|
||||
// 清空
|
||||
this.logs = []
|
||||
for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
|
||||
for (const values_index in res.data.result[j].values) {
|
||||
this.logs.push(res.data.result[j].values[values_index])
|
||||
}
|
||||
}
|
||||
for (const k in this.logs) {
|
||||
this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
|
||||
}
|
||||
if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱,因此对二维数组进行排序
|
||||
this.logs.sort((a, b) => b[0] - a[0])
|
||||
} else {
|
||||
this.logs.sort((a, b) => a[0] - b[0])
|
||||
}
|
||||
} else {
|
||||
this.showEmpty = true
|
||||
this.emptyText = '暂无日志信息,请选择时间段试试'
|
||||
}
|
||||
})
|
||||
},
|
||||
clearParam() {
|
||||
queryParam = {
|
||||
logLabel: null,
|
||||
logLabelValue: null,
|
||||
start: null,
|
||||
end: null,
|
||||
text: null,
|
||||
limits: 100,
|
||||
direction: 'backward'
|
||||
}
|
||||
},
|
||||
handleScroll() { // 滚动事件
|
||||
const scrollTop = document.documentElement.scrollTop// 滚动高度
|
||||
const clientHeight = document.documentElement.clientHeight// 可视高度
|
||||
const scrollHeight = document.documentElement.scrollHeight// 内容高度
|
||||
const bottomest = Math.ceil(scrollTop + clientHeight)
|
||||
if (bottomest >= scrollHeight) {
|
||||
console.log(1)
|
||||
// 加载新数据
|
||||
queryParam.limits = this.scrollStep
|
||||
queryParam.direction = this.direction
|
||||
// 获取时间差
|
||||
let zone = queryParam.end - queryParam.start
|
||||
if (this.timeRange.length) { // 如果是输入时间范围
|
||||
zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
|
||||
}
|
||||
if (this.timeZoneValue) {
|
||||
zone = this.timeZoneValue * 1000000
|
||||
}
|
||||
if (zone === 0) {
|
||||
zone = 3600 * 1000 * 6
|
||||
}
|
||||
console.log('时间差:', zone)
|
||||
if (this.direction === 'backward') { // 设置时间区间
|
||||
queryParam.start = (this.logs[this.logs.length - 1][0] - zone).toString()
|
||||
queryParam.end = this.logs[this.logs.length - 1][0]
|
||||
} else {
|
||||
queryParam.start = this.logs[this.logs.length - 1][0]
|
||||
queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat(zone.toString())).toString()
|
||||
}
|
||||
console.log('滚动的参数:', queryParam)
|
||||
var ansi_up = new AnsiUp()
|
||||
logOperation.getLogData(queryParam).then(res => {
|
||||
this.showEmpty = false
|
||||
if (res.data.result.length === 1) {
|
||||
const log = res.data.result[0].values
|
||||
for (const i in res.data.result[0].values) {
|
||||
log[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
|
||||
this.logs.push(log[i])
|
||||
}
|
||||
} else if (res.data.result.length > 1) {
|
||||
const tempArray = [] // 数据需要处理,由于是追加数组,所以需要用额外变量来存放
|
||||
// 刷新就是添加,不清空原数组
|
||||
for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
|
||||
for (const values_index in res.data.result[j].values) {
|
||||
tempArray.push(res.data.result[j].values[values_index])
|
||||
}
|
||||
}
|
||||
if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱,因此对二维数组进行排序
|
||||
tempArray.sort((a, b) => b[0] - a[0])
|
||||
} else {
|
||||
tempArray.sort((a, b) => a[0] - b[0])
|
||||
}
|
||||
for (const k in tempArray) {
|
||||
tempArray[k][1] = ansi_up.ansi_to_html(tempArray[k][1]) // 数据转换
|
||||
this.logs.push(tempArray[k]) // 追加数据
|
||||
}
|
||||
} else {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '暂无以往日志数据!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
startInterval(item) {
|
||||
this.runStatu = item.label
|
||||
console.log(item.value)
|
||||
if (item.value !== 0) {
|
||||
this.timer = setInterval(() => { // 定时刷新
|
||||
this.intervalLogs()
|
||||
}, item.value)
|
||||
} else {
|
||||
console.log('销毁了')
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
intervalLogs() { // 定时器的方法
|
||||
// 组织参数
|
||||
// 设置开始时间和结束时间
|
||||
// 开始为现在时间
|
||||
const start = new Date()
|
||||
const end = new Date()
|
||||
// 时差判断
|
||||
let zone = queryParam.end - queryParam.start
|
||||
if (this.timeRange.length) { // 如果是输入时间范围
|
||||
zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
|
||||
}
|
||||
if (this.timeZoneValue) {
|
||||
zone = this.timeZoneValue * 1000000
|
||||
}
|
||||
if (zone === 0) { // 防止空指针
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 6)
|
||||
queryParam.start = (start.getTime() * 1000000).toString()
|
||||
} else {
|
||||
queryParam.start = (start.getTime() * 1000000 - zone).toString()
|
||||
}
|
||||
queryParam.end = (end.getTime() * 1000000).toString()
|
||||
queryParam.limits = this.limits
|
||||
console.log('定时器最后参数:', queryParam)
|
||||
var ansi_up = new AnsiUp() // 后端日志格式转化
|
||||
logOperation.getLogData(queryParam).then(res => {
|
||||
console.log('res', res)
|
||||
this.showEmpty = false
|
||||
debugger
|
||||
if (res.data.result.length === 1) {
|
||||
this.logs = res.data.result[0].values
|
||||
for (const i in res.data.result[0].values) { // 格式转换
|
||||
this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
|
||||
}
|
||||
} else if (res.data.result.length > 1) {
|
||||
// 清空
|
||||
this.logs = []
|
||||
for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
|
||||
for (const values_index in res.data.result[j].values) {
|
||||
this.logs.push(res.data.result[j].values[values_index])
|
||||
}
|
||||
}
|
||||
for (const k in this.logs) {
|
||||
this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
|
||||
}
|
||||
if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱,因此对二维数组进行排序
|
||||
this.logs.sort((a, b) => b[0] - a[0])
|
||||
} else {
|
||||
this.logs.sort((a, b) => a[0] - b[0])
|
||||
}
|
||||
} else {
|
||||
this.showEmpty = true
|
||||
this.emptyText = '暂无日志信息,请选择时间段试试'
|
||||
}
|
||||
})
|
||||
},
|
||||
changeShow() {
|
||||
// 清空数据
|
||||
this.timeZoneValue = ''
|
||||
this.timeRange = []
|
||||
this.showOptions = !this.showOptions
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user