Skip to content

I
IT-monitor
Commit 11964546 authored by Asjoker's avatar Asjoker
Browse files
Options

feat: 资产管理-概览

parent 46fb1aac
Show whitespace changes
Inline Side-by-side
Showing with 634 additions and 36 deletions
src/views/assetManagement/assetOverView.vue
View file @ 11964546
......@@ -24,7 +24,7 @@
<span style="float: right">181个</span>
</div>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>在用</span>
<span style="float: right">22个</span>
</div>
......@@ -32,7 +32,7 @@
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>12.15%</span>
</div>
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>闲置</span>
<span style="float: right">0个</span>
</div>
......@@ -61,7 +61,7 @@
<span style="float: right">10个</span>
</div>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>已处理</span>
<span style="float: right">4个</span>
</div>
......@@ -69,7 +69,7 @@
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>40.00%</span>
</div>
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>未处理</span>
<span style="float: right">6个</span>
</div>
......@@ -98,7 +98,7 @@
<span style="float: right">3个</span>
</div>
<el-progress :percentage="66.67" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>已处理</span>
<span style="float: right">2个</span>
</div>
......@@ -106,7 +106,7 @@
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>66.67%</span>
</div>
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>未处理</span>
<span style="float: right">1个</span>
</div>
......@@ -135,7 +135,7 @@
<span style="float: right">6个</span>
</div>
<el-progress :percentage="33.33" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>已处理</span>
<span style="float: right">2个</span>
</div>
......@@ -143,7 +143,7 @@
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>33.33%</span>
</div>
<div style="width: 100%;font-size: 14px">
<div style="width: 100%;font-size: 14px;margin-bottom: 3px;">
<span>未处理</span>
<span style="float: right">4个</span>
</div>
......@@ -531,13 +531,6 @@ export default {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '161',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
......@@ -577,13 +570,6 @@ export default {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '161',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
......@@ -623,13 +609,6 @@ export default {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '161',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
......@@ -669,13 +648,6 @@ export default {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '161',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
......
src/views/workManagement/workOverView.vue 0 → 100644
View file @ 11964546
<template>
<div id="sylog-container" class="realTime-container">
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="addOpen = true">新建</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<el-row :gutter="30">
<el-col :span="4-8" class="colClass">
<el-card style="background-color: #46BE8A;height: 140px">
<el-row style="height: 100%">
<el-col :span="8">
<el-image :src="myTask" alt="" />
</el-col>
<el-col :span="16">
<div style="color:white;top: 40px;position: absolute;margin-left: 20px">
<div style="font-size: 28px;width: 100%">34</div>
<div>我的任务</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="4-8" class="colClass">
<el-card style="background-color: #C86285;height: 140px">
<el-row>
<el-col :span="8">
<el-image :src="created" alt="" />
</el-col>
<el-col :span="16">
<div style="color:white;top: 40px;position: absolute;margin-left: 20px">
<div style="font-size: 28px;width: 100%">46</div>
<div>我创建的</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="4-8" class="colClass">
<el-card style="background-color: #E29058;height: 140px">
<el-row>
<el-col :span="8">
<el-image :src="notAssigned" alt="" />
</el-col>
<el-col :span="16">
<div style="color:white;top: 40px;position: absolute;margin-left: 20px">
<div style="font-size: 28px;width: 100%">2</div>
<div>本月未分派</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="4-8" class="colClass">
<el-card style="background-color: #4A50B0;height: 140px">
<el-row>
<el-col :span="8">
<el-image :src="add" alt="" />
</el-col>
<el-col :span="16">
<div style="color:white;top: 40px;position: absolute;margin-left: 20px">
<div style="font-size: 28px;width: 100%">55</div>
<div>本月新增</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="4-8" class="colClass">
<el-card style="background-color: #3AAEDD;height: 140px">
<el-row>
<el-col :span="8">
<el-image :src="handled" alt="" />
</el-col>
<el-col :span="16">
<div style="color:white;top: 40px;position: absolute;margin-left: 20px">
<div style="font-size: 28px;width: 100%">47</div>
<div>我经办的</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="12">
<div style="padding: 10px 20px;border-top: 20px solid #F4F4F4;border-right: 20px solid #F4F4F4;">
<div>
<div style="font-weight: bold;display: inline-block">我的任务</div>
<a style="display: inline-block;float: right;color: #009FD3" @click="handleMyMission">查看更多></a>
<div v-for="item in data" :key="item.id">
<el-divider style="padding: 0 20px" />
<el-row>
<el-col :span="10">
<div>
<el-link type="primary" @click="changeTime">{{ item.title }}</el-link>
<div style="width: 100%;margin-top: 10px">{{ '管理员 创建于 ' + item.createTime }}</div>
</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div style="text-align: center">问题</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div style="text-align: center">P1</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div
v-if="item.status === '1'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #F89349;margin-top: 9px"
>已挂起</div>
<div
v-if="item.status === '2'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #75C4E0"
>处理中</div>
<div
v-if="item.status === '3'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #8FC31F"
>已完成</div>
</el-col>
<el-col :span="5" class="tableColClass" style="text-align: center">
<a style="color: #009FD3;" @click="changeTime">查看更多></a>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="padding: 10px 20px;border-top: 20px solid #F4F4F4;">
<div>
<div style="font-weight: bold;display: inline-block">我的任务</div>
<a style="display: inline-block;float: right;color: #009FD3" @click="handleMyMission">查看更多></a>
<div v-for="item in initialData" :key="item.id">
<el-divider style="padding: 0 20px" />
<el-row>
<el-col :span="10">
<div>
<el-link type="primary" @click="changeTime">{{ item.title }}</el-link>
<div style="width: 100%;margin-top: 10px">{{ '管理员 创建于 ' + item.createTime }}</div>
</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div style="text-align: center">问题</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div style="text-align: center">P1</div>
</el-col>
<el-col :span="3" class="tableColClass">
<div
v-if="item.status === '1'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #F89349;margin-top: 9px"
>已挂起</div>
<div
v-if="item.status === '2'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #75C4E0"
>处理中</div>
<div
v-if="item.status === '3'"
style="text-align: center;line-height: 28px;height: 28px;border-radius: 15px;color: #FFFFFF;background-color: #8FC31F"
>已完成</div>
</el-col>
<el-col :span="5" class="tableColClass" style="text-align: center">
<a style="color: #009FD3;" @click="changeTime">查看更多></a>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
</el-row>
<el-dialog :visible.sync="open" title="维修单详情" width="700px">
<el-button v-if="dialogFlag === '1'" style="float: right" @click="dialogFlag = '2'">记录</el-button>
<el-button v-if="dialogFlag === '2'" style="float: right" @click="dialogFlag = '1'">返回</el-button>
<el-form label-width="110px">
<div v-if="dialogFlag === '1'">
<el-form-item label="创建人：">
管理员
</el-form-item>
<el-form-item label="主题：" style="background-color: #CCCCCC">
办公室交换机B故障
</el-form-item>
<el-form-item label="创建时间：">
2022-05-11 16:43:58
</el-form-item>
<el-form-item label="当前经办人：" style="background-color: #CCCCCC">
管理员
</el-form-item>
<el-form-item label="提交时间：">
2022-05-11 17:37:01
</el-form-item>
<el-form-item label="内容描述：" style="background-color: #CCCCCC">
办公室交换机B故障
</el-form-item>
<el-form-item label="类型：">
问题
</el-form-item>
<el-form-item label="优先级：" style="background-color: #CCCCCC">
P1
</el-form-item>
<el-form-item label="来源：">
手动创建
</el-form-item>
<el-form-item label="设备信息：" style="background-color: #CCCCCC">
<div class="dialogRow">1__unknown_Vlan1 ,2__unknown_Vlan2 ,10101__ethernet-</div>
<div class="dialogRow">csmacd_GigabitEthernet0/1 ,10002__ethernet-</div>
<div class="dialogRow">,10015__ethernet-csmacd_FastEthernet0/15</div>
</el-form-item>
<el-form-item label="SLA：">
SLA级别B
</el-form-item>
</div>
<div v-if="dialogFlag === '2'">
<div>
<div class="dialogRow">管理员：转交管理员</div>
<div class="dialogRow">时间：2022-05-11 16:43:59</div>
<div class="dialogRow">备注说明：</div>
</div>
<div style="background-color: #cccccc">
<div class="dialogRow">管理员：创建工单</div>
<div class="dialogRow">时间：2022-05-11 16:43:58</div>
</div>
<div>
<div class="dialogRow">管理员：挂起</div>
<div class="dialogRow">时间：2022-05-11 17:37:01</div>
<div class="dialogRow">备注说明：asdf</div>
</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="addOpen" title="维修单详情" width="700px">
<el-form label-width="110px">
<el-form-item label="工单编号">
<el-input v-model="defaultInput" />
</el-form-item>
<el-form-item label="主题">
<el-input placeholder="请填写工单主题" />
</el-form-item>
<el-form-item label="经办人">
<el-select v-model="defaultSelect">
<el-option value="1" label="暂不指派" />
<el-option value="2" label="管理员" />
<el-option value="3" label="负责人" />
</el-select>
</el-form-item>
<el-form-item label="内容描述">
<el-input type="textarea" />
</el-form-item>
<el-form-item label="设备信息">
<el-button>请选择设备信息</el-button>
</el-form-item>
<el-form-item label="来源">
<el-select v-model="defaultSelect1">
<el-option value="1" label="自动生成" />
<el-option value="2" label="手动创建" />
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="defaultSelect2">
<el-option value="1" label="问题" />
</el-select>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="defaultSelect3">
<el-option value="1" label="P1" />
<el-option value="2" label="P2" />
<el-option value="3" label="P3" />
</el-select>
</el-form-item>
<el-form-item label="SLA">
<el-select v-model="defaultSelect4">
<el-option value="1" label="默认" />
<el-option value="2" label="SLA级别A" />
<el-option value="3" label="SLA级别B" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import myTask from '@/assets/icons/workOverviewIcons/myTask.png'
import add from '@/assets/icons/workOverviewIcons/add.png'
import created from '@/assets/icons/workOverviewIcons/created.png'
import handled from '@/assets/icons/workOverviewIcons/handled.png'
import notAssigned from '@/assets/icons/workOverviewIcons/notAssigned.png'
export default {
name: 'Sylog',
data() {
return {
myTask,
add,
created,
handled,
notAssigned,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
currentTab: '1',
data: [
{
id: 1,
title: '办公室交换机故障',
createTime: '2022-05-11 16:43:58',
status: '1'
},
{
id: 2,
title: '192.168.6.251故障',
createTime: '2022-04-20 16:20:42',
status: '1'
},
{
id: 3,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:53:07',
status: '1'
},
{
id: 4,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:52:48',
status: '1'
},
{
id: 5,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:52:03',
status: '1'
},
{
id: 6,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:51:45',
status: '1'
},
{
id: 7,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:50:56',
status: '1'
},
{
id: 8,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:50:33',
status: '1'
},
{
id: 9,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:49:55',
status: '1'
},
{
id: 10,
title: '办公室路由器故障',
createTime: '2022-04-01 16:46:58',
status: '1'
}
],
initialData: [
{
id: 1,
title: '办公室电脑故障',
createTime: '2022-05-11 16:43:58',
status: '1'
},
{
id: 7,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:50:56',
status: '1'
},
{
id: 8,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:50:33',
status: '1'
},
{
id: 9,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:49:55',
status: '1'
},
{
id: 10,
title: '办公室路由器故障',
createTime: '2022-04-01 16:46:58',
status: '1'
},
{
id: 2,
title: '192.168.6.251故障',
createTime: '2022-04-20 16:20:42',
status: '1'
},
{
id: 3,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:53:07',
status: '1'
},
{
id: 4,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:52:48',
status: '1'
},
{
id: 5,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:52:03',
status: '1'
},
{
id: 6,
title: '127.0.0.1故障',
createTime: '2022-04-02 16:51:45',
status: '1'
}
],
addOpen: false,
defaultInput: 'MX-20220526-47',
defaultSelect: '1',
defaultSelect1: '1',
defaultSelect2: '2',
defaultSelect3: '1',
defaultSelect4: '3',
dialogFlag: '1'
}
},
/** 路由离开前存储筛选条件*/
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: {
handleMyMission() {
this.$router.push({
path: '/workManagement/myMission'
})
},
handleMyCreation() {
this.$router.push({
path: '/workManagement/myCreated'
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleDelete() {
const h = this.$createElement
this.$confirm(h('p', null, [
h('span', null, '确定删除本报告吗？ '),
h('br', null),
h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
]), '', {
customClass: 'custom-confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
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>
.realTime-container{
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.colClass {
width: 20%;
}
.tableColClass {
line-height: 47px;
}
.dialogRow {
width: 100%;
margin: 10px 0;
}
.outsideClass {
display: table;
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0 20px;
margin-bottom: 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
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