This commit is contained in:
2022-11-30 12:51:53 +08:00
parent 3bfe8438d1
commit 22ff161288
109 changed files with 4922 additions and 2374 deletions

View 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 }

View File

@@ -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() {

View File

@@ -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>

View File

@@ -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

View 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>