Skip to content

I
IT-monitor
Commit a307ce98 authored by 秦嘉's avatar 秦嘉
Browse files
Options

业务管理和门禁管理的出入记录

parent b4c2ad25
Hide whitespace changes
Inline Side-by-side
Showing with 1302 additions and 5 deletions
src/views/IntegratedMonitor/warning/warningFault.vue
View file @ a307ce98
...@@ -421,7 +421,7 @@ export default { ...@@ -421,7 +421,7 @@ export default {
}, },
closeHandleDialog() { closeHandleDialog() {
this.handleDialog = false this.handleDialog = false
}, }
// changeTime(row, column) { // changeTime(row, column) {
// const data = row[column.property] // const data = row[column.property]
// if (data === undefined) { return '' } // if (data === undefined) { return '' }
......
src/views/businessMonitoring/businessManagement.vue 0 → 100644
View file @ a307ce98
<template>
<div id="container_max" class="businessModule">
<div class="businessHead">
<span style="font-size:24px;margin-right: 10px ">业务管理</span>
<div class="businessBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="businessBody">
<el-table
:data="tableData"
row-key="id"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
style="width: 100%;padding-top: 20px"
>
<el-table-column label="名称" prop="name" show-overflow-tooltip />
<el-table-column label="类型" prop="type" show-overflow-tooltip />
<el-table-column label="操作" >
<template slot-scope="scope">
<el-link v-if="scope.row.type == '公司'" @click="openDialog1(scope.row)" >添加业务</el-link>
<el-link v-if="scope.row.type == '业务' || scope.row.type == '集群组'" @click="openDialog2(scope.row)" >添加集群</el-link>
<el-link v-if="scope.row.type == '业务' || scope.row.type == '集群组'" @click="openDialog3(scope.row)" >添加设备</el-link>
<el-link v-if="scope.row.type == '业务' || scope.row.type == '集群组'" @click="openDialog4(scope.row)" >添加监测点</el-link>
<el-link v-if="scope.row.type == '业务'" @click="openDialog5(scope.row)" >编辑</el-link>
<el-link v-if="scope.row.type == '集群组'" @click="openDialog6(scope.row)" >编辑</el-link>
<el-link v-if="scope.row.type != '公司'" @click="deleteRow(scope.row)" >移除</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="dialog1" width="50%" title="添加业务" :visible.sync="dialogOpen1">
<el-form ref="dialogForm1" label-width="auto" :model="dialogForm1">
<el-form-item label="名称：">
<el-input v-model="dialogForm1.name" />
</el-form-item>
<el-form-item label="影响级别：">
<el-select v-model="dialogForm1.value1" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select >
<span>设置影响本业务状态的监测点重要性最低级别。</span>
</el-form-item>
</el-form>
<el-collapse accordion style="margin-top: 20px">
<el-collapse-item>
<template slot="title">
<h2> 高级设置</h2>
</template>
<el-form ref="dialogForm1" label-width="auto" :model="dialogForm1">
<el-form-item label="状态改变方式：">
<el-select v-model="dialogForm1.typeChange" placeholder="请选择" style="width: 60%">
<el-option
v-for="item in typeChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="可用性：">
<sapn>按</sapn>
<el-select v-model="dialogForm1.usability" placeholder="请选择">
<el-option
v-for="item in usabilityList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span>计算</span>
</el-form-item>
<el-form-item label="繁忙度模板：">
<el-select v-model="dialogForm1.busyDegree" placeholder="请选择">
<el-option
v-for="item in busyDegreeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-link style="margin-left: 20px; color: cornflowerblue" @click="drawer = true">编辑模板</el-link>
</el-form-item>
<el-form-item label="健康度：">
<span>关键，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm1.input1"></el-input><br>
<span>重要，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm1.input2"></el-input><br>
<span>普通，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm1.input3"></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog1">确定</el-button>
<el-button @click="closeDialog1">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog2" width="50%" title="添加集群" :visible.sync="dialogOpen2">
<el-form ref="dialogForm2" label-width="auto" :model="dialogForm2">
<el-form-item label="名称：">
<el-input v-model="dialogForm2.name" />
</el-form-item>
</el-form>
<el-collapse accordion style="margin-top: 20px">
<el-collapse-item>
<template slot="title">
<h2>高级设置</h2>
</template>
<el-form ref="dialogForm1" label-width="auto" :model="dialogForm2">
<el-form-item label="危险阀值：">
<el-radio v-model="dialogForm2.radioWarning" :label="1">
任一设备状态为
<el-select v-model="dialogForm2.warningChange1" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning" :label="2" style="margin-top: 10px">
所有设备状态为
<el-select v-model="dialogForm2.warningChange2" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning" :label="3" style="margin-top: 10px">
少于
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input1"></el-input>
个正常状态设备
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning" :label="4" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input2"></el-input>
个设备状态为
<el-select v-model="dialogForm2.warningChange3" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning" :label="5" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input3"></el-input>
%设备状态为
<el-select v-model="dialogForm2.warningChange4" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
</el-form-item>
<el-form-item label="故障阀值：">
<el-radio v-model="dialogForm2.radioWarning1" :label="1">
任一设备状态为
<el-select v-model="dialogForm2.warningChange5" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning1" :label="2" style="margin-top: 10px">
所有设备状态为
<el-select v-model="dialogForm2.warningChange6" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning1" :label="3" style="margin-top: 10px">
少于
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input4"></el-input>
个正常状态设备
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning1" :label="4" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input5"></el-input>
个设备状态为
<el-select v-model="dialogForm2.warningChange7" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm2.radioWarning1" :label="5" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input6"></el-input>
%设备状态为
<el-select v-model="dialogForm2.warningChange8" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog2">确定</el-button>
<el-button @click="closeDialog2">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog3" width="50%" title="添加设备" :visible.sync="dialogOpen3">
<el-form ref="dialogForm3" label-width="auto" :model="dialogForm3">
<el-form-item label="选择管理对象：" :model="dialogForm3.selectObj">
<div class="treebody7">
<el-tree
:data="data2"
show-checkbox
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog3">确定</el-button>
<el-button @click="closeDialog3">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog4" width="70%" title="添加监测点" :visible.sync="dialogOpen4">
<el-row>
<el-col :span="12">
<el-form ref="dialogForm3" label-width="auto" :model="dialogForm4">
<el-form-item label="选择管理对象：">
<div class="treebody7">
<el-tree
:data="data3"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form>
<el-form-item label="选择监测点：" :model="dialogForm4.selectObj">
<div class="treebody7" v-if="isChooseNode">
<el-tree
:data="data4"
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog4">确定</el-button>
<el-button @click="closeDialog4">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog5" width="50%" title="修改业务" :visible.sync="dialogOpen5">
<el-form ref="dialogForm5" label-width="auto" :model="dialogForm5">
<el-form-item label="名称：">
<el-input v-model="dialogForm5.name" />
</el-form-item>
<el-form-item label="影响级别：">
<el-select v-model="dialogForm5.value1" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select >
<span>设置影响本业务状态的监测点重要性最低级别。</span>
</el-form-item>
</el-form>
<el-collapse accordion style="margin-top: 20px">
<el-collapse-item>
<template slot="title">
<h2> 高级设置</h2>
</template>
<el-form ref="dialogForm1" label-width="auto" :model="dialogForm5">
<el-form-item label="状态改变方式：">
<el-select v-model="dialogForm5.typeChange" placeholder="请选择" style="width: 60%">
<el-option
v-for="item in typeChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="可用性：">
<sapn>按</sapn>
<el-select v-model="dialogForm5.usability" placeholder="请选择">
<el-option
v-for="item in usabilityList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span>计算</span>
</el-form-item>
<el-form-item label="繁忙度模板：">
<el-select v-model="dialogForm5.busyDegree" placeholder="请选择">
<el-option
v-for="item in busyDegreeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-link style="margin-left: 20px; color: cornflowerblue" @click="drawer = true">编辑模板</el-link>
</el-form-item>
<el-form-item label="健康度：">
<span>关键，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm5.input1"></el-input><br>
<span>重要，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm5.input2"></el-input><br>
<span>普通，权重</span>
<el-input class="inputLine" style="display: inline" v-model="dialogForm5.input3"></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog5">确定</el-button>
<el-button @click="closeDialog5">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog6" width="50%" title="修改集群" :visible.sync="dialogOpen6">
<el-form ref="dialogForm6" label-width="auto" :model="dialogForm6">
<el-form-item label="名称：">
<el-input v-model="dialogForm6.name" />
</el-form-item>
</el-form>
<el-collapse accordion style="margin-top: 20px">
<el-collapse-item>
<template slot="title">
<h2>高级设置</h2>
</template>
<el-form ref="dialogForm1" label-width="auto" :model="dialogForm6">
<el-form-item label="危险阀值：">
<el-radio v-model="dialogForm6.radioWarning" :label="1">
任一设备状态为
<el-select v-model="dialogForm6.warningChange1" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning" :label="2" style="margin-top: 10px">
所有设备状态为
<el-select v-model="dialogForm6.warningChange2" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning" :label="3" style="margin-top: 10px">
少于
<el-input class="inputLine" style="display: inline" v-model="dialogForm6.input1"></el-input>
个正常状态设备
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning" :label="4" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm6.input2"></el-input>
个设备状态为
<el-select v-model="dialogForm6.warningChange3" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning" :label="5" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm6.input3"></el-input>
%设备状态为
<el-select v-model="dialogForm6.warningChange4" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
</el-form-item>
<el-form-item label="故障阀值：">
<el-radio v-model="dialogForm6.radioWarning1" :label="1">
任一设备状态为
<el-select v-model="dialogForm6.warningChange5" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning1" :label="2" style="margin-top: 10px">
所有设备状态为
<el-select v-model="dialogForm6.warningChange6" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning1" :label="3" style="margin-top: 10px">
少于
<el-input class="inputLine" style="display: inline" v-model="dialogForm6.input4"></el-input>
个正常状态设备
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning1" :label="4" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm6.input5"></el-input>
个设备状态为
<el-select v-model="dialogForm6.warningChange7" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
<br>
<el-radio v-model="dialogForm6.radioWarning1" :label="5" style="margin-top: 10px">
至少
<el-input class="inputLine" style="display: inline" v-model="dialogForm2.input6"></el-input>
%设备状态为
<el-select v-model="dialogForm2.warningChange8" placeholder="请选择">
<el-option
v-for="item in warningChangeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-radio>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog6">确定</el-button>
<el-button @click="closeDialog6">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog7" width="50%" title="编辑繁忙度模版" :visible.sync="drawer">
弹
<span slot="footer" class="dialog-footer">
弹
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'BusinessManagement',
data() {
return {
isChooseNode: false,
data2: [{
id: 1,
label: '本机容器',
children: [{
id: 2,
label: '虚拟化平台',
children: [{
id: 4,
label: '三级 1-1-1'
}, {
id: 5,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: '虚拟化设备',
children: [{
id: 6,
label: '三级级 2-1'
}, {
id: 7,
label: '三级 2-2'
}]
}]
}],
data3: [{
id: 1,
label: '本机容器',
children: [{
id: 2,
label: '虚拟化平台',
children: [{
id: 4,
label: '三级 1-1-1'
}, {
id: 5,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: '虚拟化设备',
children: [{
id: 6,
label: '三级级 2-1'
}, {
id: 7,
label: '三级 2-2'
}]
}]
}],
data4: [{ id: 1, label: '设备监测点1' }, { id: 2, label: '设备监测点1' }, { id: 3, label: '设备监测点1' }, { id: 4, label: '设备监测点1' }],
defaultProps: {
children: 'children',
label: 'label'
},
drawer: false,
tableData: [{
id: 1,
name: '业务列表',
type: '公司',
children: [{
id: 2,
name: '市场部',
type: '业务',
children: [{
id: 7,
name: '设备1',
type: ''
}, {
id: 8,
name: '设备2',
type: '集群组'
}, {
id: 9,
name: '设备3',
type: ''
}]
}, {
id: 3,
name: '开发部',
type: '业务',
children: [{
id: 7,
name: '设备1',
type: ''
}, {
id: 8,
name: '设备2',
type: ''
}, {
id: 9,
name: '设备3',
type: ''
}]
}, {
id: 4,
name: '运维部',
type: '业务',
children: [{
id: 7,
name: '设备1',
type: ''
}, {
id: 8,
name: '设备2',
type: ''
}, {
id: 9,
name: '设备3',
type: ''
}]
}, {
id: 5,
name: '测试部',
type: '业务',
children: [{
id: 7,
name: '设备1',
type: ''
}, {
id: 8,
name: '设备2',
type: ''
}, {
id: 9,
name: '设备3',
type: ''
}]
}, {
id: 6,
name: '职能部',
type: '业务',
children: [{
id: 7,
name: '设备1',
type: ''
}, {
id: 8,
name: '设备2',
type: ''
}, {
id: 9,
name: '设备3',
type: ''
}]
}]
}],
options1: [{
value: 1,
label: '普通'
}, {
value: 2,
label: '重要'
}, {
value: 3,
label: '关键'
}],
typeChangeList: [{ value: 1, label: '监测点状态改变' }, { value: 2, label: '监测点告警' }],
usabilityList: [{ value: 1, label: '12小时' }, { value: 2, label: '24小时' }],
busyDegreeList: [{ value: 1, label: '默认繁忙度计算模板' }, { value: 2, label: '1' }],
dialogOpen1: false,
dialogOpen2: false,
dialogOpen3: false,
dialogOpen4: false,
dialogOpen5: false,
dialogOpen6: false,
dialogForm1: {
name: '',
typeChange: 1,
usability: 1,
busyDegree: 1,
value1: 1,
input1: '',
input2: '',
input3: ''
},
dialogForm2: {
name: '',
radioWarning: 1,
radioWarning1: 1,
warningChange1: 1,
warningChange2: 1,
warningChange3: 1,
warningChange4: 1,
warningChange5: 1,
warningChange6: 1,
warningChange7: 1,
warningChange8: 1,
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: ''
},
dialogForm3: {
selectObj: []
},
dialogForm4: {
selectObj: []
},
dialogForm5: {
name: '',
typeChange: 1,
usability: 1,
busyDegree: 1,
value1: 1,
input1: '',
input2: '',
input3: ''
},
dialogForm6: {
name: '',
radioWarning: 1,
radioWarning1: 1,
warningChange1: 1,
warningChange2: 1,
warningChange3: 1,
warningChange4: 1,
warningChange5: 1,
warningChange6: 1,
warningChange7: 1,
warningChange8: 1,
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: ''
},
warningChangeList: [{ value: 1, label: '危险或故障' }, { value: 2, label: '危险' }]
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
refresh() {
window.location.reload() // 刷新页面
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
openDialog1() {
this.dialogOpen1 = true
},
openDialog2() {
this.dialogOpen2 = true
},
openDialog3() {
this.dialogOpen3 = true
},
openDialog4() {
this.dialogOpen4 = true
},
openDialog5() {
this.dialogOpen5 = true
},
openDialog6() {
this.dialogOpen6 = true
},
closeDialog1() {
this.dialogOpen1 = false
},
closeDialog2() {
this.dialogOpen2 = false
},
closeDialog3() {
this.dialogOpen3 = false
},
closeDialog4() {
this.dialogOpen4 = false
this.isChooseNode = false
},
handleNodeClick(data) {
if (data.children == null) {
this.isChooseNode = true
}
console.log(data)
},
closeDialog5() {
this.dialogOpen5 = false
},
closeDialog6() {
this.dialogOpen6 = false
}
}
}
</script>
<style lang="scss">
.businessModule {
.businessHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.businessBtns {
float: right;
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.businessBody {
padding: 15px;
}
.inputLine {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 30%;
}
}
.treebody7{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
overflow-y: scroll;
height: 250px;
}
}
</style>
src/views/movingRingMonitoring/accessControl/accessRecord.vue
View file @ a307ce98
<!--出入记录--> <!--出入记录-->
<template> <template>
<div id="container_max" class="accessModule">
<div class="accessHead">
<span style="font-size:24px;margin-right: 10px ">门禁出入记录</span>
</div>
<div class="accessBody">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker
v-model="dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
<el-input
placeholder="请输入人员名称"
prefix-icon="el-icon-search"
v-model="inputPersonName"
style="width: 20%">
</el-input>
<el-button @click="exportAccess" style="float: right">导出</el-button>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="序号" prop="idNum" show-overflow-tooltip />
<el-table-column label="人员姓名" prop="personName" show-overflow-tooltip />
<el-table-column label="通行标识" prop="trafficSigns" show-overflow-tooltip />
<el-table-column label="出/入" prop="outOrIn" show-overflow-tooltip />
<el-table-column label="门禁名称" prop="accessControlName" show-overflow-tooltip />\
<el-table-column label="采集时间" prop="takeTime" show-overflow-tooltip />\
<el-table-column label="备注" prop="remarks" show-overflow-tooltip />\
</el-table>
<el-pagination
align='center'
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</div>
</template> </template>
<script> <script>
import moment from 'moment'
export default { export default {
name: 'AccessRecord' name: 'AccessRecord',
data() {
return {
tableData: [{
idNum: '1',
personName: '张三',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '2',
personName: '李四',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '3',
personName: '王二',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '4',
personName: '张三',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '5',
personName: '王二',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '6',
personName: '李四',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '7',
personName: '李四',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '8',
personName: '王二',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '9',
personName: '张三',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}, {
idNum: '10',
personName: '张三',
trafficSigns: '',
outOrIn: '',
accessControlName: '',
takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
remarks: ''
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10, // 每页的数据条数
dateTime: '',
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '昨天',
onClick(picker) {
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
picker.$emit('pick', [start, start])
}
}]
},
options: [{
value: 1,
label: '全部门禁'
}, {
value: 2,
label: '南大门'
}, {
value: 3,
label: '北大门'
}, {
value: 4,
label: '东大门'
}, {
value: 5,
label: '西大门'
}],
value: 1,
inputPersonName: ''
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
exportAccess() {
this.$confirm('是否导出数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
}
}
} }
</script> </script>
<style scoped> <style lang="scss">
.accessModule {
.accessHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
}
.accessBody {
padding: 15px;
}
}
</style> </style>
src/views/movingRingMonitoring/accessControl/dataSourceConfiguration.vue 0 → 100644
View file @ a307ce98
<template>
<div id="container_max" class="accessModule">
<div class="accessHead">
<span style="font-size:24px;margin-right: 10px ">数据源配置</span>
</div>
<div class="accessBody">
<el-input
placeholder="数据源名称"
prefix-icon="el-icon-search"
v-model="inputDataName"
style="width: 20%">
</el-input>
<span style="margin-left: 20px">状态：</span>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button @click="addDataSource" style="margin-left: 300px" type="success">添加数据源</el-button>
<el-button @click="allStart" style="" type="success">批量启用</el-button>
<el-button @click="allEnd" style="" type="warning">批量停用</el-button>
<el-button @click="allDelete" style="" type="warning">批量删除</el-button>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="序号" prop="idNum" show-overflow-tooltip />
<el-table-column label="数据源名称" prop="dataName" show-overflow-tooltip />
<el-table-column label="品牌" prop="brand" show-overflow-tooltip />
<el-table-column label="门禁数量" prop="accessNum" show-overflow-tooltip />
<el-table-column label="状态" width="55" prop="type" show-overflow-tooltip />\
<el-table-column label="备注描述" prop="remarks" show-overflow-tooltip />\
<el-table-column label="操作">
<template slot-scope="scope">
<el-link style="color: forestgreen" @click="stopRow(scope.row)">停用</el-link>
<el-link style="color: forestgreen" @click="updateRow(scope.row)">编辑</el-link>
<el-link style="color: forestgreen" @click="deleteRow(scope.row)">删除</el-link>
<el-link style="color: forestgreen" @click="queryAccess(scope.row)">查看门禁</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
align='center'
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'DataSourceConfiguration',
data() {
return {
inputDataName: '',
options: [
{
value: 1,
label: '全部'
},
{
value: 2,
label: '启用'
},
{
value: 3,
label: '停用'
}
],
value: 1,
tableData: [
{
idNum: '1',
dataName: '3546.sdf',
brand: '测试品牌1',
accessNum: '22',
type: '启用',
remarks: ''
}, {
idNum: '2',
dataName: '54.fs',
brand: '测试品牌2',
accessNum: '34',
type: '停用',
remarks: ''
}, {
idNum: '3',
dataName: '23.dsa',
brand: '测试品牌3',
accessNum: '1',
type: '启用',
remarks: ''
}, {
idNum: '4',
dataName: '23.33.sss',
brand: '测试品牌4',
accessNum: '3',
type: '启用',
remarks: ''
}, {
idNum: '5',
dataName: 'z.ss.233',
brand: '测试品牌5',
accessNum: '54',
type: '停用',
remarks: ''
}, {
idNum: '6',
dataName: '33.33',
brand: '测试品牌6',
accessNum: '2',
type: '停用',
remarks: ''
}, {
idNum: '7',
dataName: '22.22',
brand: '测试品牌7',
accessNum: '32',
type: '停用',
remarks: ''
}, {
idNum: '8',
dataName: '1111',
brand: '测试品牌8',
accessNum: '22',
type: '停用',
remarks: ''
}
],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10 // 每页的数据条数
}
},
methods: {
addDataSource() {},
allStart() {
this.$confirm('是否启用？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
allEnd() {
this.$confirm('是否停用?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
allDelete() {
this.$confirm('此操作将删除数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
updateRow() {},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
stopRow() {
this.$confirm('是否停用?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
queryAccess() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
}
}
}
</script>
<style lang="scss">
.accessModule {
.accessHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
}
.accessBody {
padding: 15px;
}
}
</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