Commit 4d275c0c authored by Asjoker's avatar Asjoker

feat: 所剩修改

parent dcd8109d
<template>
<div id="sylog-container" class="app-container-autoSearch">
<div style="font-weight: bold;padding-left: 20px">添加故障报告</div>
<el-form ref="queryForm" :model="queryParams" style="padding-top: 30px" :inline="true" label-width="100px">
<el-form-item label="报告名称">
<el-input />
</el-form-item>
<br/>
<el-form-item label="报告类型">
<el-select v-model="typeSelect" @change="customBtnFun">
<el-option value="1" label="日报" />
<el-option value="2" label="周报" />
<el-option value="3" label="月报" />
<el-option value="4" label="自定义" />
</el-select>
</el-form-item>
<br/>
<el-form-item label="统计表类型">
<el-input />
</el-form-item>
<br/>
<el-form-item label="统计图类型">
<el-input />
</el-form-item>
<br/>
<div style="margin: 20px 0 20px 100px;">
<el-checkbox>绘制故障趋势图</el-checkbox>
</div>
<div style="margin-left: 100px">
<el-table
v-loading="loading"
border
style="width: 800px"
:data="initialData"
height="200"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="设备范围" width="500" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button
size="small"
type="primary"
@click="addOrMulti('update')"
>
编辑
</el-button>
<el-button
size="small"
type="primary"
@click="deleteTable(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div style="width: 100%;display: block;margin-left: 10px">
<el-button style="margin: 10px 10px 0 0" @click="addOrMulti('add')">添加</el-button>
</div>
<el-divider />
<div style="width: 100%">
<el-button size="middle" type="primary" style="margin: 20px 20px 0 30px" @click="goBack">保存</el-button>
<el-button size="middle" style="margin: 20px 0 0" @click="goBack">取消</el-button>
</div>
</div>
</el-form>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="设备列表">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
@check-change="setCheckedNodes"
/>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="addEquipment(add)">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="timeOpen" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="timeOpen = false">取消</el-button>
<el-button type="primary" @click="timeOpen = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 10,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
timeOpen: false,
PasswordOpen: false,
passwordTitle: '',
dialogFlag: 'mysql',
radio: '1',
standard: '1',
type: '1',
addPassword: [
{
id: '1',
length: 1
}
],
flag: '1',
color: '#000000',
// 表单参数
form: {},
// 表单参数
isScreen: screenfull.isEnabled,
typeSelect: '1',
// 查询参数
queryParams: {
page: 1,
rows: 10,
startInput: '192.168.1.28',
endInput: '255.255.255.0',
select: '2',
logContent: ''
},
data: [
{
ipAddress: '39.100.39.54',
origin: 'agent',
port: '2198'
},
{
ipAddress: '45.100.25.54',
origin: 'agent',
port: '2022-05-17 00:59:01'
},
{
ipAddress: '22.100.1.54',
origin: 'mysql',
port: '3306'
},
{
ipAddress: '56.100.17.54',
origin: 'mysql',
port: '3306'
},
{
ipAddress: '65.100.39.54',
origin: 'oracle',
port: '1521'
},
{
ipAddress: '1.80.25.55',
origin: 'oracle',
port: '1521'
},
{
ipAddress: '39.100.39.54',
origin: 'snmp',
port: '161'
},
{
ipAddress: '45.100.25.54',
origin: 'snmp',
port: '161'
},
{
ipAddress: '45.87.77.44',
origin: 'ssh',
port: '22'
},
{
ipAddress: '9.15.76.44',
origin: 'ssh',
port: '22'
}
],
initialData: [],
addOrEdit: '1',
currentNodes: [],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
this.$refs.theTable.toggleRowSelection(this.initialData[1], true)
}, 500)
},
setCheckedNodes(node) {
console.log('setCheckedNodes', node)
this.currentNodes.push(node)
},
deleteTable(id) {
this.initialData.splice(id, 1)
},
/** 查询按钮操作 */
addEquipment() {
const flag = this.addOrEdit
console.log(this.currentNodes, 'this.currentNodes')
console.log(this.treeData, 'this.treeData')
if (flag === 'add') {
if (this.currentNodes.length > 0) {
this.initialData.push({
id: this.initialData.length,
name: this.currentNodes[0].label
})
}
this.open = false
this.currentNodes = []
} else if (flag === 'update') {
this.open = false
this.currentNodes = []
}
console.log(this.initialData, 'this.initialData')
},
/** 查询按钮操作 */
changeItsTime() {
this.timeOpen = true
},
customBtnFun(val) {
console.log('customBtnFun', val)
if (val === '4') {
this.timeOpen = true
}
},
/** 查询按钮操作 */
addOrMulti(value) {
this.addOrEdit = value
this.open = true
},
goBack() {
this.$router.go(-1)
},
/** 查询按钮操作 */
changeSenior(row) {
this.PasswordOpen = true
this.passwordTitle = row.software + '--高级'
this.dialogFlag = row.software
},
addAccount() {
this.addPassword.push({
id: this.addPassword.length,
length: this.addPassword.length + 1
})
},
deleteAccount(id) {
this.addPassword.splice(id, 1)
},
/** 查询按钮操作 */
changeSelect() {
if (this.queryParams.select === '1') {
this.queryParams.startInput = ''
this.queryParams.endInput = ''
} else if (this.queryParams.select === '2') {
this.queryParams.startInput = '192.168.1.28'
this.queryParams.endInput = '255.255.255.0'
}
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-autoSearch {
padding: 0 20px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.innerPort{
::v-deep .el-input__inner {
padding: 0 10px!important;
}
}
}
</style>
...@@ -628,7 +628,7 @@ export default { ...@@ -628,7 +628,7 @@ export default {
/** 查询按钮操作 */ /** 查询按钮操作 */
changeTime() { changeTime() {
this.$router.push({ this.$router.push({
path: '/IntegratedMonitor/reportStatistics/addStatisticReport', path: '/IntegratedMonitor/reportStatistics/addErrorReport',
type: 'add' type: 'add'
}) })
}, },
......
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
<el-input type="textarea" /> <el-input type="textarea" />
</el-form-item> </el-form-item>
<el-form-item label="设备信息"> <el-form-item label="设备信息">
<el-button @click="transferOpen = true">请选择设备信息</el-button> <el-button style="margin-bottom: 10px" @click="transferOpen = true;treeOptionFlag = false">请选择设备信息</el-button>
<el-table :data="dialogTable"> <el-table :data="dialogTable">
<el-table-column label="监测点名称" show-overflow-tooltip prop="name" /> <el-table-column label="监测点名称" show-overflow-tooltip prop="name" />
<el-table-column label="监测点类型" show-overflow-tooltip prop="type" /> <el-table-column label="监测点类型" show-overflow-tooltip prop="type" />
...@@ -297,14 +297,56 @@ ...@@ -297,14 +297,56 @@
</div> </div>
</el-dialog> </el-dialog>
<el-dialog :visible.sync="transferOpen" title="设备信息" width="600px"> <el-dialog :visible.sync="transferOpen" title="设备信息" width="800px">
<tree-transfer <!-- <tree-transfer-->
:title="['选择告警设备', '选择监测点']" <!-- :title="['选择告警设备', '选择监测点']"-->
:from_data="fromData" <!-- :from_data="fromData"-->
:to_data="toData" <!-- :to_data="toData"-->
:default-props="{ label: 'label', children: 'children' }" <!-- :default-props="{ label: 'label', children: 'children' }"-->
<!-- />-->
<el-row :gutter="20">
<el-col :span="14">
<div
style="background-color: #f2f2f2;
line-height: 20px;
font-size: 12px;
padding: 0 5px;
border-radius: 4px 4px 0 0;
border: 1px solid #d2d6de;"
>选择告警设备</div>
<div class="equipmentDiv">
<el-tree
:data="treeData"
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
@node-click="handleClickNode"
/>
</div>
</el-col>
<el-col :span="10">
<div
style="background-color: #f2f2f2;
line-height: 20px;
font-size: 12px;
padding: 0 5px;
border-radius: 4px 4px 0 0;
border: 1px solid #d2d6de;"
>选择监测点</div>
<div class="equipmentDiv">
<el-tree
ref="optionsTree"
v-show="treeOptionFlag"
:data="treeOption"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/> />
</div>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="transferOpen = false">取消</el-button> <el-button @click="transferOpen = false">取消</el-button>
...@@ -322,11 +364,9 @@ import add from '@/assets/icons/workOverviewIcons/add.png' ...@@ -322,11 +364,9 @@ import add from '@/assets/icons/workOverviewIcons/add.png'
import created from '@/assets/icons/workOverviewIcons/created.png' import created from '@/assets/icons/workOverviewIcons/created.png'
import handled from '@/assets/icons/workOverviewIcons/handled.png' import handled from '@/assets/icons/workOverviewIcons/handled.png'
import notAssigned from '@/assets/icons/workOverviewIcons/notAssigned.png' import notAssigned from '@/assets/icons/workOverviewIcons/notAssigned.png'
import treeTransfer from 'el-tree-transfer'
export default { export default {
name: 'Sylog', name: 'Sylog',
components: { treeTransfer },
data() { data() {
return { return {
myTask, myTask,
...@@ -539,18 +579,58 @@ export default { ...@@ -539,18 +579,58 @@ export default {
}] }]
}] }]
}], }],
treeOption: [{
id: '1',
pid: 0,
label: 'Ping 192.168.1.55',
children: []
}, {
id: '2',
pid: 0,
label: 'Temperature -01-Inlet Ambient-0002',
children: []
}, {
id: '3',
pid: 0,
label: 'Temperature -02-CPU 1-0003',
children: []
}, {
id: '4',
pid: 0,
label: 'Temperature -03-CPU 2-0004',
children: []
}, {
id: '5',
pid: 0,
label: 'Temperature -04-P1 DIMM 1-6-0005',
children: []
}, {
id: '6',
pid: 0,
label: 'Temperature -05-P1 DIMM 7-12-0006',
children: []
}],
// "选择监测点"显隐标记
treeOptionFlag: false,
fromData: [ fromData: [
{ {
id: '1', id: '1',
pid: 0, pid: 0,
label: '一级 1', label: '本机容器',
children: [ children: [
{ {
id: '1-1', id: '1-1',
pid: '1', pid: '1',
label: '二级 1-1', label: '虚拟化平台',
disabled: true, children: [{
children: [] id: '1-1-1',
pid: '1-1',
label: '虚拟设备'
}, {
id: '1-1-2',
pid: '1-1',
label: '虚拟路由'
}]
}, },
{ {
id: '1-2', id: '1-2',
...@@ -598,6 +678,22 @@ export default { ...@@ -598,6 +678,22 @@ export default {
} }
}, },
methods: { methods: {
handleClickNode(data) {
console.log('this is handleClickNode', data)
if (!data.children) {
this.treeOptionFlag = true
}
},
handleClickAll(data) {
this.$nextTick(() => {
this.$refs.optionsTree.setCheckedNodes(this.treeOption)
})
},
handleClickAll(data) {
this.$nextTick(() => {
this.$refs.optionsTree.setCheckedNodes(this.treeOption)
})
},
handleMyMission() { handleMyMission() {
this.$router.push({ this.$router.push({
path: '/workManagement/myMission' path: '/workManagement/myMission'
...@@ -700,6 +796,14 @@ export default { ...@@ -700,6 +796,14 @@ export default {
} }
} }
} }
.equipmentDiv{
max-height: 150px;
height: 150px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 0 0 4px 4px;
}
.colClass { .colClass {
width: 20%; width: 20%;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment