Skip to content

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

修改页面布局

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