Skip to content

V
video-monitoring
Commit 5a1b6f34 authored by 拾柒's avatar 拾柒
Browse files
Options

修改页面布局

parent e96a44f1
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 93 deletions
src/assets/styles/ruoyi.scss
View file @ 5a1b6f34
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; //position: absolute;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
......
src/components/TopNav/index.vue
View file @ 5a1b6f34
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@select="handleSelect" @select="handleSelect"
> >
<template v-for="(item, index) in newTopNev"> <template v-for="(item, index) in newTopNev">
<el-menu-item class="menuStyle" style="font-size: small;background-color: #F6F6FA;border-top-right-radius: 9%;border-top-left-radius: 9%;text-align: center;margin-left: 1px" :index="item.path" :key="index" <el-menu-item class="menuStyle" style="font-size: small;background-color: #F6F6FA;border-top-right-radius: 15px;border-top-left-radius: 15px;text-align: center;margin-left: 1px" :index="item.path" :key="index"
> >
<i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i> <i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i>
{{ item.name }}</el-menu-item {{ item.name }}</el-menu-item
...@@ -49,12 +49,12 @@ export default { ...@@ -49,12 +49,12 @@ export default {
name: '首页', name: '首页',
}, },
{ {
path: '/', path: '/employee/employee',
icon: 'el-icon-user', icon: 'el-icon-user',
name: '员工信息', name: '员工信息',
}, },
{ {
path: '/monitoringPlayback/video', path: '/monitoringhistory/history',
icon: 'el-icon-view', icon: 'el-icon-view',
name: '历史记录', name: '历史记录',
} }
...@@ -220,7 +220,7 @@ export default { ...@@ -220,7 +220,7 @@ export default {
//} //}
.menuStyle{ .menuStyle{
box-shadow: 0 0 8px #D4D9E5; box-shadow: 0 0 8px #D4D9E5;
height: 30px; height: 60px;
border-bottom: transparent; border-bottom: transparent;
} }
.menuStyle:hover{ .menuStyle:hover{
...@@ -231,15 +231,15 @@ export default { ...@@ -231,15 +231,15 @@ export default {
color: transparent; color: transparent;
} }
::v-deep .el-submenu{ ::v-deep .el-submenu{
height: 30px; height: 60px;
} }
.el-menu--horizontal > .el-menu-item{ .el-menu--horizontal > .el-menu-item{
margin-top: 30px; margin-top: 19px;
height: 40px; height: 60px;
line-height: 30px; line-height: 35px;
} }
.el-menu--horizontal > .el-menu-item.is-active{ .el-menu--horizontal > .el-menu-item.is-active{
margin-top: 23px; margin-top: 12px;
} }
//.el-menu--horizontal > .el-menu-item.is-active{ //.el-menu--horizontal > .el-menu-item.is-active{
// //margin-top: 30px; // //margin-top: 30px;
...@@ -247,6 +247,8 @@ export default { ...@@ -247,6 +247,8 @@ export default {
// line-height: 30px; // line-height: 30px;
//} //}
.el-menu-item.is-active{ .el-menu-item.is-active{
font-weight: bolder;
line-height: 45px;
color: white !important; color: white !important;
background-color: #0D8EEE !important; background-color: #0D8EEE !important;
} }
......
src/router/index.js
View file @ 5a1b6f34
...@@ -68,7 +68,7 @@ export const constantRoutes = [ ...@@ -68,7 +68,7 @@ export const constantRoutes = [
children: [ children: [
{ {
path: 'index', path: 'index',
component: () => import('@/views/index'), component: () => import('@/views/video/index'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard', affix: true }
} }
...@@ -129,6 +129,20 @@ export const constantRoutes = [ ...@@ -129,6 +129,20 @@ export const constantRoutes = [
meta: { title: '历史记录', icon: 'user' } meta: { title: '历史记录', icon: 'user' }
} }
] ]
},
{
path: '/employee',
component: Layout,
hidden: false,
redirect: 'employee',
children: [
{
path: 'employee',
component: () => import('@/views/employee/index'),
name: 'employee',
meta: { title: '历史记录', icon: 'user' }
}
]
} }
] ]
......
src/views/employee/index.vue
View file @ 5a1b6f34
<template> <template>
<div class="app-container1" style="height: 100vh"> <div class="app-container">
<div style="height: 100vh"> <div style="background-color: #F6F6FA;height: 95vh;padding-left: 30px;padding-right: 30px" >
<el-row :gutter="20" style="height: 100vh"> <div>
<span style="display: flex;justify-content: flex-start;align-items: center;"><div style="border: 1px solid #116FBB;width: 2px;height: 20px;margin-right: 5px"></div><h5 style="color: #116FBB">员工信息管理</h5></span>
</div>
<el-row :gutter="20">
<!--部门数据--> <!--部门数据-->
<el-col :span="4" :xs="24" style="height: 100vh"> <el-col :span="4" :xs="24">
<div class="head-container" v-if="false"> <div class="head-container" v-if="false">
<el-input <el-input
v-model="deptName" v-model="deptName"
...@@ -31,15 +34,15 @@ ...@@ -31,15 +34,15 @@
<!--用户数据--> <!--用户数据-->
<el-col :span="24" :xs="24"> <el-col :span="24" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="用户名称" prop="userName"> <!-- <el-form-item label="用户名称" prop="userName">-->
<el-input <!-- <el-input-->
v-model="queryParams.userName" <!-- v-model="queryParams.userName"-->
placeholder="请输入用户名称" <!-- placeholder="请输入用户名称"-->
clearable <!-- clearable-->
style="width: 240px" <!-- style="width: 240px"-->
@keyup.enter.native="handleQuery" <!-- @keyup.enter.native="handleQuery"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item label="手机号码" prop="phonenumber">
<el-input <el-input
v-model="queryParams.phonenumber" v-model="queryParams.phonenumber"
...@@ -64,17 +67,17 @@ ...@@ -64,17 +67,17 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <!-- <el-form-item label="创建时间">-->
<el-date-picker <!-- <el-date-picker-->
v-model="dateRange" <!-- v-model="dateRange"-->
style="width: 240px" <!-- style="width: 240px"-->
value-format="yyyy-MM-dd" <!-- value-format="yyyy-MM-dd"-->
type="daterange" <!-- type="daterange"-->
range-separator="-" <!-- range-separator="-"-->
start-placeholder="开始日期" <!-- start-placeholder="开始日期"-->
end-placeholder="结束日期" <!-- end-placeholder="结束日期"-->
></el-date-picker> <!-- ></el-date-picker>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
...@@ -84,66 +87,60 @@ ...@@ -84,66 +87,60 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" style="background-color: #0D8EEE;color: #F6F6FA"
plain plain
icon="el-icon-plus" icon="el-icon-circle-plus-outline"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['system:user:add']" >新增人员</el-button>
>新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="success"
plain plain
icon="el-icon-edit" icon="el-icon-top-right"
size="mini" size="mini"
:disabled="single"
@click="handleUpdate" @click="handleUpdate"
v-hasPermi="['system:user:edit']" >选择全部</el-button>
>修改</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="danger"
plain plain
icon="el-icon-delete" icon="el-icon-top-left"
size="mini" size="mini"
:disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['system:user:remove']" >反向选择</el-button>
>删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="info"
plain plain
icon="el-icon-upload2" icon="el-icon-upload2"
size="mini" size="mini"
@click="handleImport" @click="handleImport"
v-hasPermi="['system:user:import']" >批量导入</el-button>
>导入</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="warning"
plain plain
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['system:user:export']" >批量导出</el-button>
>导出</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" style="min-height: 650px">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" /> <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /> <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" /> <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
...@@ -154,11 +151,6 @@ ...@@ -154,11 +151,6 @@
></el-switch> ></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
align="center" align="center"
...@@ -166,34 +158,39 @@ ...@@ -166,34 +158,39 @@
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template slot-scope="scope" v-if="scope.row.userId !== 1"> <template slot-scope="scope" v-if="scope.row.userId !== 1">
<!-- 查看-->
<el-button
size="mini"
style="border: transparent"
icon="el-icon-edit"
></el-button>
<el-button <el-button
size="mini" size="mini"
type="text" style="border: transparent"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']" ></el-button>
>修改</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" style="border: transparent"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']" ></el-button>
>删除</el-button> <!-- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">-->
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']"> <!-- <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>-->
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> <!-- <el-dropdown-menu slot="dropdown">-->
<el-dropdown-menu slot="dropdown"> <!-- <el-dropdown-item command="handleResetPwd" icon="el-icon-key"-->
<el-dropdown-item command="handleResetPwd" icon="el-icon-key" <!-- v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>-->
v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item> <!-- <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"-->
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" <!-- v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>-->
v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item> <!-- </el-dropdown-menu>-->
</el-dropdown-menu> <!-- </el-dropdown>-->
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination
style="display: flex;align-items: center;justify-content: center;"
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
...@@ -339,7 +336,6 @@ ...@@ -339,7 +336,6 @@
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
</template> </template>
...@@ -464,7 +460,7 @@ export default { ...@@ -464,7 +460,7 @@ export default {
}, },
created() { created() {
this.getList(); this.getList();
this.getDeptTree(); // this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then(response => { this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg; this.initPassword = response.msg;
}); });
...@@ -677,8 +673,3 @@ export default { ...@@ -677,8 +673,3 @@ export default {
} }
}; };
</script> </script>
<style scoped >
::v-deep .home {
height: 100%;
}
</style>
src/views/history/index.vue
View file @ 5a1b6f34
...@@ -18,13 +18,23 @@ ...@@ -18,13 +18,23 @@
placeholder="请选择监控时间"> placeholder="请选择监控时间">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<!-- <el-form-item label="监控状态" prop="monitorState">-->
<!-- <el-input-->
<!-- v-model="queryParams.monitorState"-->
<!-- placeholder="请输入监控状态"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="监控状态" prop="monitorState"> <el-form-item label="监控状态" prop="monitorState">
<el-input <el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
v-model="queryParams.monitorState" <el-option
placeholder="请输入监控状态" v-for="dict in dict.type.history_state"
clearable :key="dict.value"
@keyup.enter.native="handleQuery" :label="dict.label"
:value="dict.value"
/> />
</el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
...@@ -56,7 +66,11 @@ ...@@ -56,7 +66,11 @@
<span>{{ parseTime(scope.row.monitorTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.monitorTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="监控状态" align="center" prop="monitorState" /> <el-table-column label="监控状态" align="center" prop="monitorState">
<template slot-scope="scope">
<dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
...@@ -96,6 +110,7 @@ import {parseTime} from "../../utils/ruoyi"; ...@@ -96,6 +110,7 @@ import {parseTime} from "../../utils/ruoyi";
export default { export default {
name: "Histable", name: "Histable",
dicts: ['history_state'],
data() { data() {
return { return {
// 遮罩层 // 遮罩层
...@@ -144,6 +159,7 @@ export default { ...@@ -144,6 +159,7 @@ export default {
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); });
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
......
src/views/video/index.vue
View file @ 5a1b6f34
<template> <template>
<div class="video-now"> <div class="video-now" style="margin-top: 20px">
<!-- <div @click="setLayout('1x1')">1x1</div> <!-- <div @click="setLayout('1x1')">1x1</div>
<div @click="setLayout('2x2')">2x2</div>--> <div @click="setLayout('2x2')">2x2</div>-->
<!-- 创建一个用于显示视频的容器 --> <!-- 创建一个用于显示视频的容器 -->
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
</template> </template>
<script> <script >
import {getCameras} from "@/api/system/video"; import {getCameras} from "@/api/system/video";
import videoParams from './videoParams' import videoParams from './videoParams'
...@@ -208,16 +208,18 @@ export default { ...@@ -208,16 +208,18 @@ export default {
<style scoped> <style scoped>
.video-watch { .video-watch {
margin-top: 20px;
min-height: calc(80vh - 84px); min-height: calc(80vh - 84px);
width: 90%; width: 90%;
} }
.video-now { .video-now {
width: 95vw; width: 95vw;
height: 90vh; height: 87vh;
background: #fff; background: #fff;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
</style> </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