Skip to content

V
video-monitoring
Commit 8b582c80 authored by 拾柒's avatar 拾柒
Browse files
Options

Merge branch 'dev-sunyu'

parents a3e04f0b 86362e63
Hide whitespace changes
Inline Side-by-side
Showing with 637 additions and 238 deletions
src/assets/styles/index.scss
View file @ 8b582c80
......@@ -127,9 +127,9 @@ aside {
margin: 0;
//padding: 0;
overflow: hidden; /* 防止内容溢出 */
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
padding-top: 20px;
background-color: #D4D9E5;
}
......
src/components/TopNav/index.vue
View file @ 8b582c80
......@@ -6,29 +6,42 @@
@select="handleSelect"
style="margin-right: 120px"
>
<template v-for="(item, index) in newTopNev">
<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"
<template>
<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="/monitoring/video"
>
<i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i>
{{ item.name }}</el-menu-item
<i style="width: 10px;height: 10px;margin-top: -12px"></i>
首页</el-menu-item
>
<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="/employee/employee"
>
<i style="width: 10px;height: 10px;margin-top: -12px"></i>
员工信息</el-menu-item
>
<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="/monitoringhistory/history"
>
<i style="width: 10px;height: 10px;margin-top: -12px"></i>
历史记录</el-menu-item
>
</template>
<!-- 顶部菜单超出数量折叠 -->
<!-- <el-submenu :style="{'&#45;&#45;theme': theme}" index="more" v-if="topMenus.length > visibleNumber">-->
<!-- <template slot="title">更多菜单</template>-->
<!-- <template v-for="(item, index) in topMenus">-->
<!-- <el-menu-item-->
<!-- :index="item.path"-->
<!-- :key="index"-->
<!-- v-if="index >= visibleNumber">-->
<!-- <svg-icon-->
<!-- v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"-->
<!-- :icon-class="item.meta.icon"/>-->
<!-- {{ item.meta.title }}-->
<!-- </el-menu-item>-->
<!-- </template>-->
<!-- </el-submenu>-->
<!-- <el-submenu :style="{'&#45;&#45;theme': theme}" index="more" v-if="topMenus.length > visibleNumber">-->
<!-- <template slot="title">更多菜单</template>-->
<!-- <template v-for="(item, index) in topMenus">-->
<!-- <el-menu-item-->
<!-- :index="item.path"-->
<!-- :key="index"-->
<!-- v-if="index >= visibleNumber">-->
<!-- <svg-icon-->
<!-- v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"-->
<!-- :icon-class="item.meta.icon"/>-->
<!-- {{ item.meta.title }}-->
<!-- </el-menu-item>-->
<!-- </template>-->
<!-- </el-submenu>-->
</el-menu>
</template>
......
src/layout/components/Navbar.vue
View file @ 8b582c80
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" v-if = "false"/>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" v-if="false"/>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<img src="../../assets/images/titlePic.png" alt="" style="width: 200px;height: 80px;">
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu" style="margin-top: 20px">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<i class="el-icon-caret-bottom" />
<i class="el-icon-caret-bottom"/>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
......@@ -17,6 +18,32 @@
<el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item>
<!-- sunyu 新加了修改密码的弹窗,完成修改密码功能-->
<el-dropdown-item @click.native="resetPwdVisible = true">
<span>修改密码</span>
</el-dropdown-item>
<el-dialog title="修改密码" :visible.sync="resetPwdVisible" :before-close="handleClose" append-to-body="true">
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click.native="resetPwdVisible = false">取 消</el-button>
<el-button type="primary" @click.native="resetPwdVisible = false">确 定</el-button>
</span>
</el-dialog>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
......@@ -27,7 +54,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
......@@ -36,8 +63,43 @@ import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import {updateUserPwd} from "@/api/system/user";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined,
},
// 表单校验
rules: {
oldPassword: [
{required: true, message: "旧密码不能为空", trigger: "blur"}
],
newPassword: [
{required: true, message: "新密码不能为空", trigger: "blur"},
{min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"},
{pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur"}
],
confirmPassword: [
{required: true, message: "确认密码不能为空", trigger: "blur"},
{required: true, validator: equalToPassword, trigger: "blur"}
]
},
resetPwdVisible: false,
};
},
components: {
Breadcrumb,
TopNav,
......@@ -72,6 +134,29 @@ export default {
}
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
}
});
},
close() {
this.$tab.closePage();
},
handleClose(done) {
this.$confirm('确定关闭吗').then(() => {
// function(done)，done 用于关闭 Dialog
done();
console.info("点击右上角 'X' ，取消按钮或遮罩层时触发");
}).catch(() => {
console.log("点击确定时触发");
});
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
......@@ -84,7 +169,8 @@ export default {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {});
}).catch(() => {
});
}
}
}
......@@ -97,15 +183,16 @@ export default {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
justify-content: space-between;
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
......@@ -117,7 +204,7 @@ export default {
}
.topmenu-container {
margin-top:30px ;
margin-top: 30px;
//margin-left: -10px;
//height: 80px;
//position: absolute;
......
src/router/index.js
View file @ 8b582c80
......@@ -86,8 +86,11 @@ export const constantRoutes = [
name: 'Profile',
meta: { title: '个人中心', icon: 'user' }
}
]
},
{
path: '/monitoring',
component: Layout,
......@@ -144,6 +147,7 @@ export const constantRoutes = [
}
]
}
]
// 动态路由，基于用户权限动态去加载
......
src/views/employee/index.vue
View file @ 8b582c80
......@@ -43,16 +43,16 @@
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="手机号码" prop="phonenumber">
<el-form-item prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
placeholder="请输入账号/员工姓名/手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
......@@ -78,47 +78,44 @@
<!-- 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>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-col :span="2">
<el-button
style="background-color: #0D8EEE;color: #F6F6FA"
style="background-color: #0D8EEE; color: #F6F6FA"
plain
icon="el-icon-circle-plus-outline"
size="mini"
@click="handleAdd"
>新增人员</el-button>
</el-col>
<el-col :span="1.5">
<el-col :span="2">
<el-button
plain
icon="el-icon-top-right"
size="mini"
@click="handleUpdate"
@click="handleSelectAll"
>选择全部</el-button>
</el-col>
<el-col :span="1.5">
<el-col :span="2">
<el-button
plain
icon="el-icon-top-left"
size="mini"
@click="handleDelete"
@click="handleSelectReverse"
>反向选择</el-button>
</el-col>
<el-col :span="1.5">
<el-button
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>批量导入</el-button>
</el-col>
<el-col :span="1.5">
<!--
<el-col :span="1.5">
<el-button
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>批量导入</el-button>
</el-col> -->
<el-col :span="2">
<el-button
plain
icon="el-icon-download"
......@@ -126,44 +123,51 @@
@click="handleExport"
>批量导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
<el-col :span="14" class="text-right">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-col>
<el-col :span="2" class="text-right">
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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" 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">
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" style="min-height: 650px" ref="table">
<el-table-column type="selection" width="60" align="center"/>
<!-- <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />-->
<el-table-column label="序号" align="center" type="index" width="190" />
<el-table-column label="账号" align="center" key="userName" prop="userName" width="190" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="员工姓名" align="center" key="nickName" prop="nickName" width="190" 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" width="190" v-if="columns[4].visible" />
<el-table-column label="权重" align="center" key="weightNum" prop="weightNum" width="190" v-if="columns[8].visible" />
<el-table-column label="创建人" align="center" key="createBy" prop="createBy" width="190" v-if="columns[7].visible" />
<el-table-column label="创建时间" align="center" key="createTime" prop="createTime" width="190" v-if="columns[6].visible" >
<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" width="190" v-if="columns[5].visible">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
<span :class="{ 'status-enabled': scope.row.status === '0', 'status-disabled': scope.row.status === '1' }">
{{ scope.row.status === '0' ? '.已启用' : '.已禁用' }}
</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
width="192"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<!-- 查看-->
<el-button
<!-- <el-button
size="mini"
style="border: transparent"
icon="el-icon-view"
></el-button>
></el-button>-->
<el-button
size="mini"
style="border: transparent"
......@@ -200,46 +204,57 @@
</el-col>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<!--新增用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body class=".el-dialog__wrapper;">
<div class="form-header">
<h3><span class="blue-square"></span> 用户详细信息</h3>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
<el-form-item label="账号" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="10px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
<el-form-item label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
<el-form-item label="员工姓名" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
<el-form-item label="状态">
<el-select v-model="form.status" placeholder="请选择状态">
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
<el-form-item label="权重">
<el-input-number v-model="form.weightNum" controls-position="right" :min="0" ></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
......@@ -251,19 +266,8 @@
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-col>-->
<!-- </el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
......@@ -291,6 +295,140 @@
</el-select>
</el-form-item>
</el-col>
</el-row>-->
<el-row>
<el-col :span="12">
<el-form-item label="创建账号">
<el-input v-model="form.createBy" maxlength="11" ></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="创建时间" >
<el-date-picker
v-model="form.createTime"
type="datetime"
placeholder="选择日期和时间">
</el-date-picker>
</el-form-item>
</el-col>-->
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="userupdate" width="1000px" append-to-body class=".el-dialog__wrapper;">
<div class="form-header">
<h3><span class="blue-square"></span> 用户详细信息</h3>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="账号" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="10px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="员工姓名" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="状态">
<el-select v-model="form.status" placeholder="请选择状态">
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权重">
<el-input-number v-model="form.weightNum" controls-position="right" :min="0" ></el-input-number>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>-->
<!-- </el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择岗位">
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>-->
<el-row>
<el-col :span="12">
<el-form-item label="创建账号">
<el-input v-model="form.createBy" maxlength="11" :disabled="form.createBy"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="创建时间">
<el-input v-model="form.createTime" maxlength="11" :disabled="form.createTime" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
......@@ -307,7 +445,7 @@
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
......@@ -334,7 +472,7 @@
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</el-dialog>-->
</div>
</div>
</template>
......@@ -344,11 +482,14 @@ import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUs
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {update} from "script-ext-html-webpack-plugin/lib/elements";
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
components:
{ Treeselect },
data() {
return {
// 遮罩层
......@@ -363,8 +504,12 @@ export default {
showSearch: true,
// 总条数
total: 0,
//修改用户对话框
userupdate: false,
// 用户表格数据
userList: null,
// 新增 sortedData 属性
sortedData: [],
// 弹出层标题
title: "",
// 部门树选项
......@@ -375,6 +520,8 @@ export default {
deptName: undefined,
// 默认密码
initPassword: undefined,
//多选参数
selectedRowKeys: [],
// 日期范围
dateRange: [],
// 岗位选项
......@@ -382,7 +529,10 @@ export default {
// 角色选项
roleOptions: [],
// 表单参数
form: {},
form: {
createBy: '', // 创建账号
createTime: '', // 创建时间
},
defaultProps: {
children: "children",
label: "label"
......@@ -409,7 +559,10 @@ export default {
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined
deptId: undefined,
createBy: undefined,
createTime: undefined,
weightNum: undefined
},
// 列信息
columns: [
......@@ -419,16 +572,18 @@ export default {
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
{ key: 6, label: `创建时间`, visible: true },
{ key: 7, label: '创建人', visible: true },
{ key: 8, label: '权重', visible: true}
],
// 表单校验
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
{ required: true, message: "账号不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '账号长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
......@@ -452,6 +607,7 @@ export default {
}
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
......@@ -506,6 +662,7 @@ export default {
// 取消按钮
cancel() {
this.open = false;
this.userupdate = false;
this.reset();
},
// 表单重置
......@@ -521,6 +678,7 @@ export default {
sex: undefined,
status: "0",
remark: undefined,
weightNum: undefined,
postIds: [],
roleIds: []
};
......@@ -531,19 +689,51 @@ export default {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
this.selectedRowKeys = selection.map(row => row.userId );
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = selection.length > 1;
},
//全选按钮
handleSelectAll() {
if (this.userList && this.userList.length > 0) {
// 选中所有行
this.selection = this.userList;
// 触发 selection-change 事件以更新状态
this.handleSelectionChange(this.userList);
// 强制刷新表格的选中状态
this.$refs.table.toggleAllSelection(true);
} else {
console.error('DataSource is not available or empty.');
}
},
//反选按钮
handleSelectReverse() {
if (this.userList && this.userList.length > 0) {
// 获取当前选中的行
const currentSelection = this.$refs.table.selection;
// 创建一个新数组，用于存储反选后的结果
const newSelection = this.userList.filter(row => {
return !currentSelection.includes(row);
});
// 使用 toggleAllSelection 方法来选中反选后的行
this.$refs.table.toggleAllSelection(false); // 先取消选中所有行
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(newSelection, true); // 再选中需要反选的行
});
// 触发 selection-change 事件以更新状态
this.handleSelectionChange(newSelection);
} else {
console.error('DataSource is not available or empty.');
}
},
// 更多操作触发
handleCommand(command, row) {
......@@ -565,7 +755,7 @@ export default {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加用户";
this.title = "人员信息";
this.form.password = this.initPassword;
});
},
......@@ -579,8 +769,8 @@ export default {
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改用户";
this.userupdate = true;
this.title = "人员信息";
this.form.password = "";
});
},
......@@ -640,8 +830,11 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
// 获取选中的用户 ID
const userIds = this.ids;
this.download('system/user/export', {
...this.queryParams
...this.queryParams,
userIds, // 将用户 ID 传递给服务器
}, `user_${new Date().getTime()}.xlsx`)
},
/** 导入按钮操作 */
......@@ -673,3 +866,64 @@ export default {
}
};
</script>
<style>
/* styles.css 文件 */
.el-table__header-wrapper th {
padding-right: 10px !important; /* 右侧间距 */
padding-left: 10px !important; /* 左侧间距 */
}
.form-header {
text-align: left;
margin-bottom: 3px;
}
/* 为标题下方添加横线 */
.el-dialog__header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #ccc; /* 横线的颜色 */
}
.form-header h3 {
font-size: 15px;
font-weight: bold;
color: #333;
text-decoration: none;
}
.blue-square {
display: inline-block;
width: 5px;
height: 12px;
background-color: #0D8EEE; /* 蓝色 */
margin-right: 1px; /* 与文字之间的间距 */
}
.status-enabled {
color: green; /* 已启用状态的颜色 */
}
.status-disabled {
color: red; /* 已禁用状态的颜色 */
}
</style>
<!-- 按钮靠右对齐 -->
<style scoped>
/* 使用 Flexbox */
.el-dialog__wrapper {
position: absolute;
top: 20%;
transform: translateY(-10%);
}
.text-right {
text-align: right;
}
</style>
src/views/history/index.vue
View file @ 8b582c80
<template>
<div class="app-container">
<div style="background-color: white;height: 95vh;padding-left: 30px;padding-right: 30px" >
<div style="background-color: white;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;font-weight: bolder">历史记录</h5></span>
<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;font-weight: bolder">历史记录</h5></span>
</div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="监控点名称：" prop="monitoringName">
<el-input
v-model.trim="queryParams.monitoringName"
placeholder="请输入监控点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="监控时间：" prop="monitorTime">
<el-date-picker
placeholder="请选择监控时间"
value-format="yyyy-MM-dd"
v-model="queryParams.monitorTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-date-picker clearable-->
<!-- v-model="queryParams.monitorTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- 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-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
<el-option value="0">进行中</el-option>
<el-option value="1">已完成</el-option>
</el-select>
</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>
</el-form-item>
</el-form>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item prop="monitoringName">
<el-input
v-model.trim="queryParams.monitoringName"
placeholder="请输入监控点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="monitorState">
<el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
<el-option value="0">进行中</el-option>
<el-option value="1">已完成</el-option>
</el-select>
</el-form-item>
<!-- <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
<el-table :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px" >
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="100"/>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
<!-- </template>-->
<el-table-column label="监控点名称" align="center" prop="monitoringName" />
<el-table-column label="监控开始时间" align="center" prop="monitoringStarttime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringStarttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控结束时间" align="center" prop="monitoringFinallytime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringFinallytime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控时间" align="center" prop="monitorTime" width="180">
<template slot-scope="scope">
<span>{{ formatHoursAsHMS(scope.row.monitorTime) }}</span>
</template>
</el-table-column>
<el-table-column label="监控状态" align="center" prop="monitorState">
<template slot-scope="scope">
<span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{ scope.row.monitorState === '0' ? '·进行中' : '·已完成' }}</span>
<!-- <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
style="border: transparent;background-color: transparent"
size="mini"
plain
icon="el-icon-view"
class="green-icon"
@click="handleUpdate(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<el-form-item prop="monitorTime">
<el-date-picker
placeholder="请选择监控时间"
value-format="yyyy-MM-dd"
v-model="queryParams.monitorTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-date-picker clearable-->
<!-- v-model="queryParams.monitorTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- 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>-->
<div style="margin-left: 92%">
<pagination
style="display: flex;align-items: center;justify-content: center;"
<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>
</el-form-item>
</div>
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改history对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
<el-table :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" align="center" width="100" prop="id"/>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
<!-- </template>-->
<el-table-column label="监控点名称" align="center" prop="monitoringName"/>
<el-table-column label="监控开始时间" align="center" prop="monitoringStarttime" width="300">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringStarttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控结束时间" align="center" prop="monitoringFinallytime" width="500">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringFinallytime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控时间" align="center" prop="monitorTime" width="180">
<template slot-scope="scope">
<span>{{ formatHoursAsHMS(scope.row.monitorTime) }}</span>
</template>
</el-table-column>
<el-table-column label="监控状态" align="center" prop="monitorState" width="500">
<template slot-scope="scope">
<span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{
scope.row.monitorState === '0' ? '·进行中' : '·已完成'
}}</span>
<!-- <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
style="border: transparent;background-color: transparent;color: green;font-size: 20px"
size="mini"
plain
icon="el-icon-view"
class="green-icon"
@click="handleUpdate(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
style="display: flex;align-items: center;justify-content: center;"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改history对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { listHistable, getHistable, delHistable, addHistable, updateHistable } from "@/api/system/histable";
import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
import {parseTime} from "../../utils/ruoyi";
export default {
......@@ -126,6 +140,14 @@ export default {
dicts: ['history_state'],
data() {
return {
carryRowCode:{
id:"",
monitoringName:"",
monitoringStarttime: "",
monitoringFinallytime: "",
monitorState:"",
monitorTime:"",
},
// 遮罩层
loading: true,
// 选中数组
......@@ -151,12 +173,12 @@ export default {
monitoringName: null,
monitorTime: null,
monitorState: null,
id:null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
rules: {}
};
},
created() {
......@@ -219,7 +241,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.ID)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
......@@ -230,8 +252,14 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.carryRowCode=row;
// 查看详情页面(把id换成code)
this.$router.push({ path: '/monitoringPlayback/playback', query: { code: row.ID } })
this.$router.push({path: '/monitoringPlayback/playback',
query: {
carryRowCode :this.carryRowCode
}
})
},
/** 提交按钮 */
submitForm() {
......@@ -256,12 +284,13 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const IDs = row.ID || this.ids;
this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function() {
this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function () {
return delHistable(IDs);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
......@@ -276,9 +305,11 @@ export default {
.green-text {
color: #51ad51;
}
.black-text {
color: black;
}
.green-icon .el-icon-view {
color: #51ad51;
}
......
src/views/video/playback.vue
View file @ 8b582c80
<template>
<div class="playback">
<div ref="playWndBack" class="video-watch" id="playWndBack"></div>
<div>
<div style="margin-right: 30px;margin-top: 60px">
<el-form label-position="right" label-width="100px" :model="formLabelAlign">
<el-form-item label="监控点名称">
<el-input v-model="formLabelAlign.name" disabled></el-input>
<el-input v-model="carryRowCode.id" disabled></el-input>
</el-form-item>
<el-form-item label="开始时间">
<el-input v-model="formLabelAlign.startTime" disabled></el-input>
<el-input v-model="carryRowCode.monitoringStarttime" disabled></el-input>
</el-form-item>
<el-form-item label="结束时间">
<el-input v-model="formLabelAlign.endTime" disabled></el-input>
<el-input v-model="carryRowCode.monitoringFinallytime" disabled></el-input>
</el-form-item>
<el-form-item label="监控时间">
<el-input v-model="formLabelAlign.time" disabled></el-input>
<el-input v-model="carryRowCode.monitorTime" disabled></el-input>
</el-form-item>
<el-form-item label="监控状态">
<el-input v-model="formLabelAlign.flag" disabled></el-input>
<el-input v-model="carryRowCode.monitorState" disabled></el-input>
</el-form-item>
</el-form>
</div>
......@@ -27,11 +27,14 @@
<script>
import {getCameras} from "@/api/system/video";
import videoParams from "@/views/video/videoParams";
import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
export default {
name: "playback",
data() {
return {
carryRowCode:{},
oWebControl: null,
initCount: 0,
pubKey: '',
......@@ -45,6 +48,9 @@ export default {
}
};
},
created() {
this.carryRowCode = this.$route.query.carryRowCode;
},
mounted() {
this.getIndex()
},
......@@ -227,7 +233,11 @@ export default {
<style scoped>
.playback{
display: flex;
margin: 0 20px;
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
height: 1000px;
background: white;
}
.video-watch{
min-height: calc(100vh - 104px);
......
vue.config.js
View file @ 8b582c80
......@@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.10.129:8080`,
target: `http://127.0.0.1:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
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