Skip to content

html / jinmao-community-platform

Go to a project
Commit 2049ac83 by changjin
Options

完成设备管理

parent 3f19e3e7
Showing with 441 additions and 193 deletions
src/components/common/Header.vue
......@@ -36,6 +36,30 @@
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="40%">
<el-row class="searchBox">
<el-form label-width="100px">
<el-col :span="18" :offset="1">
<el-form-item label="旧密码">
<el-input v-model="data.oldPwd" placeholder="请输入旧密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="18" :offset="1">
<el-form-item label="新密码">
<el-input v-model="data.newPwd" placeholder="请输入新密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="18" :offset="1">
<el-form-item label="确认新密码">
<el-input v-model="data.newPwd1" placeholder="再次输入新密码"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer text-center">
<el-button type="primary" v-on:click="submit();">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
......@@ -44,7 +68,9 @@ export default {
userInfo: {},
curMenu: '',
sideMenu: [],
menuActive: ''
menuActive: '',
dialogVisible: false,
data: {}
}),
created () {
this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
......@@ -81,7 +107,7 @@ export default {
}).catch(() => {})
},
changePwd () {
this.dialogVisible = true
},
showAlert: function (cont) {
this.$alert(cont, '温馨提示', {
......
src/components/common/Sidebar.vue
......@@ -151,7 +151,7 @@ export default {
}
}
.menu{
margin-left: 250px;
margin-left: 260px;
position: absolute;
top: 0;}
.menu ul{
......
src/components/page/equipment/attribute.vue 0 → 100644
<template>
<div class="mainContent">
<el-button @click="goBack()" class="ml10 mt10">返回</el-button>
<div class="tabCont mt10">
<h3>监控摄像头001</h3>
<div class="table font14 mt10">
<el-row>
<el-col class="border grayBg" :span="4">设备类型</el-col>
<el-col class="border" :span="4">ddddd</el-col>
<el-col class="border grayBg" :span="4">ProductKey</el-col>
<el-col class="border" :span="4">ccccc</el-col>
<el-col class="border grayBg" :span="4">地域</el-col>
<el-col class="border" :span="4">11111</el-col>
</el-row>
<el-row>
<el-col class="border grayBg" :span="4">节点类型</el-col>
<el-col class="border" :span="4">ddddd</el-col>
<el-col class="border grayBg" :span="4">DeviceName</el-col>
<el-col class="border" :span="4">ccccc</el-col>
<el-col class="border grayBg" :span="4">认证方式</el-col>
<el-col class="border" :span="4">11111</el-col>
</el-row>
<el-row>
<el-col class="border grayBg" :span="4">备注名称</el-col>
<el-col class="border" :span="4">ddddd</el-col>
<el-col class="border grayBg" :span="4">IP地址</el-col>
<el-col class="border" :span="4">ccccc</el-col>
<el-col class="border grayBg" :span="4">固件版本</el-col>
<el-col class="border" :span="4">11111</el-col>
</el-row>
<el-row>
<el-col class="border grayBg" :span="4">创建时间</el-col>
<el-col class="border" :span="4">ddddd</el-col>
<el-col class="border grayBg" :span="4">激活时间</el-col>
<el-col class="border" :span="4">ccccc</el-col>
<el-col class="border grayBg" :span="4">最后上线时间</el-col>
<el-col class="border" :span="4">11111</el-col>
</el-row>
<el-row class="borderB">
<el-col class="border grayBg" :span="4">当前状态</el-col>
<el-col class="border" :span="4">ddddd</el-col>
<el-col class="border grayBg" :span="4">实时延迟</el-col>
<el-col class="border" :span="4">ccccc</el-col>
<el-col class="border grayBg" :span="4">设备本地日志上报</el-col>
<el-col class="border" :span="4">11111</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
loading: false,
data:{
},
size: '10',
}),
created () {
},
methods: {
goBack () {
this.$router.go(-1)
},
showAlert: function (cont) {
this.$alert(cont, '温馨提示', {
confirmButtonText: '确定'
})
}
},
}
</script>
<style scoped lang="less">
.table .border{
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
height: 40px;
line-height: 40px;
padding-left: 10px;
}
.borderB{border-bottom: 1px solid #ddd;}
.table{border-right: 1px solid #ddd;}
.grayBg{background-color: #f5f5f5;}
</style>
\ No newline at end of file
src/components/page/equipment/deviceAlert.vue
<template>
<div>
<div class="mainContent">
<div class="searchBox">
<p class="font12 ml10">当前数据已发生变化，请手动刷新</p>
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="5">
<el-form-item label="设备类型">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="设备名称">
<el-input v-model="searchForm.customerName" placeholder="请输入设备名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
<el-button type="primary" class="mt5" @click="allotBtn(0)">刷新</el-button>
</el-col>
</el-form>
</el-row>
</div>
<div class="infoBox">
<el-row>
<el-col :span="4" class="text-center rightLine">
<h4>当月报警总数</h4>
<h4 class="mt10">10000</h4>
<div class="mainContent">
<div class="searchBox">
<p class="font12 ml10">当前数据已发生变化，请手动刷新</p>
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="5">
<el-form-item label="设备类型">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>当日报警数量</h4>
<h4 class="mt10">10000</h4>
<el-col :span="5">
<el-form-item label="设备名称">
<el-input v-model="searchForm.customerName" placeholder="请输入设备名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>较上月比较</h4>
<h4 class="mt10">100%</h4>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
<el-button type="primary" class="mt5" @click="allotBtn(0)">刷新</el-button>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>较前日比较</h4>
<h4 class="mt10">20%</h4>
</el-col>
</el-row>
</div>
<div class="tabCont mt10">
<div class="title color font14"><span class="shu"></span>报警列表</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="当日报警" name="first">
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="customerName" label="设备名称"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="报警类型" ></el-table-column>
<el-table-column prop="setTime" label="报警内容" ></el-table-column>
<el-table-column prop="actualTime" label="报警时间" ></el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="历史报警" name="second">
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="9">
<el-form-item label="报警时间">
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="customerName" label="设备名称"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="报警类型" ></el-table-column>
<el-table-column prop="setTime" label="报警内容" ></el-table-column>
<el-table-column prop="actualTime" label="报警时间" ></el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-form>
</el-row>
</div>
<div class="infoBox">
<el-row>
<el-col :span="4" class="text-center rightLine">
<h4>当月报警总数</h4>
<h4 class="mt10">10000</h4>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>当日报警数量</h4>
<h4 class="mt10">10000</h4>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>较上月比较</h4>
<h4 class="mt10">100%</h4>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>较前日比较</h4>
<h4 class="mt10">20%</h4>
</el-col>
</el-row>
</div>
<div class="tabCont mt10">
<div class="title color font14"><span class="shu"></span>报警列表</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="当日报警" name="first">
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="customerName" label="设备名称"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="报警类型" ></el-table-column>
<el-table-column prop="setTime" label="报警内容" ></el-table-column>
<el-table-column prop="actualTime" label="报警时间" ></el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="历史报警" name="second">
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="9">
<el-form-item label="报警时间">
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="customerName" label="设备名称"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="报警类型" ></el-table-column>
<el-table-column prop="setTime" label="报警内容" ></el-table-column>
<el-table-column prop="actualTime" label="报警时间" ></el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
......
src/components/page/equipment/events.vue 0 → 100644
<template>
<div class="mainContent">
<div class="searchBox">
<el-row>
<el-form label-width="70px" :model="searchForm">
<el-col :span="9">
<el-form-item label="操作时间">
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
<el-button type="primary" class="mt5" @click="allotBtn(0)">刷新</el-button>
<el-button @click="goBack()" class="ml10 mt5">返回</el-button>
</el-col>
</el-form>
</el-row>
</div>
<div class="infoBox">
<el-row>
<el-col :span="4" class="text-center rightLine">
<h4>设备名称</h4>
<h5 class="mt10">门禁001</h5>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>所在位置</h4>
<h5 class="mt10">1号楼东北角</h5>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>在线状态</h4>
<h5 class="mt10 red">在线</h5>
</el-col>
</el-row>
</div>
<div class="tabCont mt10">
<div class="title color font14"><span class="shu"></span>门禁001操作记录</div>
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="操作事件"></el-table-column>
<el-table-column prop="actualTime" label="操作时间" ></el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div><br>
</div>
</div>
</template>
<script>
export default {
data: () => ({
loading: false,
searchForm:{
},
data:{
page: '1',
list:[
{
name: '监控摄像001',
id: 'MZ902',
type: '监控设备'
}
]
},
size: '10',
}),
created () {
},
methods: {
goBack () {
this.$router.go(-1)
},
handleSizeChange (val) {
this.size = val
this.getData()
},
handleCurrentChange (val) {
this.data.page = val
this.getData()
},
reset () {
this.searchForm = {}
this.getData(1)
},
showAlert: function (cont) {
this.$alert(cont, '温馨提示', {
confirmButtonText: '确定'
})
}
},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
src/components/page/equipment/list.vue
<template>
<div>
<div class="mainContent">
<div class="searchBox">
<p class="font12 ml10">当前数据已发生变化，请手动刷新</p>
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="5">
<el-form-item label="设备类型">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="设备状态">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="设备名称">
<el-input v-model="searchForm.customerName" placeholder="请输入设备名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
<el-button type="primary" class="mt5" @click="allotBtn(0)">刷新</el-button>
</el-col>
</el-form>
</el-row>
</div>
<div class="infoBox">
<el-row>
<el-col :span="4" class="text-center rightLine">
<h4>设备数量</h4>
<h4 class="mt10">10000</h4>
<div class="mainContent">
<div class="searchBox">
<p class="font12 ml10">当前数据已发生变化，请手动刷新</p>
<el-row class="mt10">
<el-form label-width="70px" :model="searchForm">
<el-col :span="5">
<el-form-item label="设备类型">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>在线设备</h4>
<h4 class="mt10">10000</h4>
<el-col :span="5">
<el-form-item label="设备状态">
<el-select v-model="searchForm.blockId" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="男" value="MAN"></el-option>
<el-option label="女" value="WOMAN"></el-option>
<el-option label="未知" value="SECRECY"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>离线设备</h4>
<h4 class="mt10">0</h4>
<el-col :span="5">
<el-form-item label="设备名称">
<el-input v-model="searchForm.customerName" placeholder="请输入设备名称"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="tabCont mt10">
<div class="title color font14"><span class="shu"></span>设备列表</div>
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="customerName" label="设备名称"></el-table-column>
<el-table-column prop="customerPhone" label="设备ID"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="是否在线" ></el-table-column>
<el-table-column prop="actualTime" label="最近上线时间" ></el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<span class="color pointer" @click="allotBtn(1,scope.row.id)">属性</span>
<span class="color ml10 pointer" @click="delBtn(1,scope.row.id)">事件</span>
</template>
</el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div><br>
</div>
<el-col :span="8" :offset="1">
<el-button type="primary" class="mt5 ml10" @click="getData()">查询</el-button>
<el-button class="mt5 ml10" @click="reset()">重置</el-button>
<el-button type="primary" class="mt5" @click="allotBtn(0)">刷新</el-button>
</el-col>
</el-form>
</el-row>
</div>
<div class="infoBox">
<el-row>
<el-col :span="4" class="text-center rightLine">
<h4>设备数量</h4>
<h4 class="mt10">10000</h4>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>在线设备</h4>
<h4 class="mt10">10000</h4>
</el-col>
<el-col :span="4" class="text-center rightLine">
<h4>离线设备</h4>
<h4 class="mt10">0</h4>
</el-col>
</el-row>
</div>
<div class="tabCont mt10">
<div class="title color font14"><span class="shu"></span>设备列表</div>
<el-table :data="data.list" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" label="设备名称"></el-table-column>
<el-table-column prop="id" label="设备ID"></el-table-column>
<el-table-column prop="allocateName" label="设备类型"></el-table-column>
<el-table-column prop="allocateTime" label="所在位置"></el-table-column>
<el-table-column prop="setTime" label="是否在线" ></el-table-column>
<el-table-column prop="actualTime" label="最近上线时间" ></el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<router-link :to="'/equipment/attribute/' + scope.row.id" class="color">属性</router-link>
<router-link :to="'/equipment/events/' + scope.row.id" class="color ml10">事件</router-link>
</template>
</el-table-column>
</el-table>
<div class="block text-right mt20" v-if="data.page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, prev, pager, next, jumper"
:total="data.count">
</el-pagination>
</div><br>
</div>
</div>
</template>
......@@ -91,7 +89,13 @@ export default {
},
data:{
page: '1',
list:[]
list:[
{
name: '监控摄像001',
id: 'MZ902',
type: '监控设备'
}
]
},
size: '10',
}),
......
src/router/index.js
......@@ -30,7 +30,36 @@ export default new Router({
pageName: '全部设备'
},
component: resolve =>
require(['../components/page/equipment/list.vue'], resolve)
require(['../components/page/index/SubContent.vue'], resolve),
children: [
{
path: '/equipment/list',
name: 'equipmentList',
meta: {
pageName: '设备列表'
},
component: resolve =>
require(['../components/page/equipment/list.vue'], resolve),
},
{
path: '/equipment/attribute/:id',
name: 'equipmentAttribute',
meta: {
pageName: '设备属性'
},
component: resolve =>
require(['../components/page/equipment/attribute.vue'], resolve),
},
{
path: '/equipment/events/:id',
name: 'equipmentEvents',
meta: {
pageName: '操作事件'
},
component: resolve =>
require(['../components/page/equipment/events.vue'], resolve),
},
]
},
{
path: '/equipment/deviceAlert',
......@@ -40,7 +69,7 @@ export default new Router({
},
component: resolve =>
require(['../components/page/equipment/deviceAlert.vue'], resolve)
},
}
]
}
]
......
static/css/index.css deleted 100755 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
static/css/main.less
......@@ -203,7 +203,7 @@ a{text-decoration: none}
.el-select .el-input.is-focus .el-input__inner,.el-input__inner:focus{
border-color: #E6B085!important;
}
.el-select-dropdown__item.selected,.el-pager li.active,.el-pager li:hover{
.el-tabs__item:hover,.el-tabs__item.is-active,.el-menu-item.is-active,.el-select-dropdown__item.selected,.el-pager li.active,.el-pager li:hover{
color: #E6B085!important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
......
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 sign in to comment