Skip to content

V
video-monitoring
Commit 12101ec5 authored by 69237's avatar 69237
Browse files
Options

sunyu 序号凑合用了QAQ

parent 4e9dc9ee
Show whitespace changes
Inline Side-by-side
Showing with 128 additions and 175 deletions
src/components/TopNav/index.vue
View file @ 12101ec5
......@@ -6,88 +6,29 @@
@select="handleSelect"
style="margin-right: 120px"
>
<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"
<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"
>
<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"
v-if="roles[0] === 'admin'"
<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="/monitoringhistory/history"
v-if="!this.backTag"
>
<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"
v-if="this.backTag"
@click="changeBackTag()"
>
<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>
......@@ -96,35 +37,33 @@ import { constantRoutes } from "@/router";
import Menu from "@/views/system/menu/index.vue";
// 隐藏侧边栏路由
const hideList = ["/index", "/user/profile"];
const hideList = ['/index', '/user/profile'];
export default {
components: { Menu },
components: {Menu},
data() {
return {
roles: [],
backTag: false,
newTopNev: [
{
path: "/monitoring/video",
icon: "el-icon-house",
name: "首页",
path: '/monitoring/video',
icon: 'el-icon-house',
name: '首页',
},
{
path: "/employee/employee",
icon: "el-icon-user",
name: "员工信息",
path: '/employee/employee',
icon: 'el-icon-user',
name: '员工信息',
},
{
path: "/monitoringhistory/history",
icon: "el-icon-view",
name: "历史记录",
},
path: '/monitoringhistory/history',
icon: 'el-icon-view',
name: '历史记录',
}
],
// 顶部栏初始数
visibleNumber: 5,
// 当前激活菜单的 index
currentIndex: "/monitoring/video",
currentIndex: '/monitoring/video'
};
},
computed: {
......@@ -156,12 +95,11 @@ export default {
this.routers.map((router) => {
for (var item in router.children) {
if (router.children[item].parentPath === undefined) {
if (router.path === "/") {
if(router.path === "/") {
router.children[item].path = "/" + router.children[item].path;
} else {
if (!this.ishttp(router.children[item].path)) {
router.children[item].path =
router.path + "/" + router.children[item].path;
if(!this.ishttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path;
}
}
router.children[item].parentPath = router.path;
......@@ -190,29 +128,17 @@ export default {
// },
},
beforeMount() {
window.addEventListener("resize", this.setVisibleNumber);
window.addEventListener('resize', this.setVisibleNumber)
},
beforeDestroy() {
window.removeEventListener("resize", this.setVisibleNumber);
window.removeEventListener('resize', this.setVisibleNumber)
},
mounted() {
this.currentIndex = this.$route.path;
this.$store.dispatch("app/toggleSideBarHide", true);
this.currentIndex = this.$route.path
this.$store.dispatch('app/toggleSideBarHide', true);
this.setVisibleNumber();
this.roles = this.$store.getters.roles;
},
created() {
this.getinfo();
},
methods: {
changeBackTag() {
this.backTag = false;
},
getinfo() {
let self = this;
self.backTag = this.$router.params.backTag;
},
// 根据宽度计算设置显示栏数
setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3;
......@@ -220,26 +146,26 @@ export default {
},
// 菜单选择事件
handleSelect(key, keyPath) {
console.info("key", key);
console.info('key',key)
this.currentIndex = key;
const route = this.routers.find((item) => item.path === key);
const route = this.routers.find(item => item.path === key);
if (this.ishttp(key)) {
// http(s):// 路径新窗口打开
window.open(key, "_blank");
} else if (!route || !route.children) {
// 没有子路由路径内部打开
const routeMenu = this.childrenMenus.find((item) => item.path === key);
const routeMenu = this.childrenMenus.find(item => item.path === key);
if (routeMenu && routeMenu.query) {
let query = JSON.parse(routeMenu.query);
this.$router.push({ path: key, query: query });
} else {
this.$router.push({ path: key });
}
this.$store.dispatch("app/toggleSideBarHide", true);
this.$store.dispatch('app/toggleSideBarHide', true);
} else {
// 显示左侧联动菜单
this.activeRoutes(key);
this.$store.dispatch("app/toggleSideBarHide", false);
this.$store.dispatch('app/toggleSideBarHide', false);
}
},
// 当前激活的路由
......@@ -252,15 +178,15 @@ export default {
}
});
}
if (routes.length > 0) {
if(routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
} else {
this.$store.dispatch("app/toggleSideBarHide", true);
this.$store.dispatch('app/toggleSideBarHide', true);
}
},
ishttp(url) {
return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
},
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}
},
};
</script>
......@@ -294,57 +220,48 @@ export default {
// padding: 0 5px !important;
// margin: 0 10px !important;
//}
.menuStyle {
box-shadow: 0 0 8px #d4d9e5;
.menuStyle{
box-shadow: 0 0 8px #D4D9E5;
height: 60px;
border-bottom: transparent;
}
.menuStyle:hover {
color: #30b08f;
.menuStyle:hover{
color: #30B08F;
border-bottom: 0px transparent;
}
::v-deep .el-menu::before {
::v-deep .el-menu::before{
color: transparent;
}
::v-deep .el-submenu {
::v-deep .el-submenu{
height: 60px;
}
.el-menu--horizontal > .el-menu-item {
.el-menu--horizontal > .el-menu-item{
margin-top: 19px;
height: 60px;
line-height: 35px;
}
.el-menu--horizontal > .el-menu-item.is-active {
.el-menu--horizontal > .el-menu-item.is-active{
margin-top: 12px;
}
//.el-menu--horizontal > .el-menu-item.is-active{
// //margin-top: 30px;
// height: 60px;
// line-height: 30px;
//}
.el-menu-item.is-active {
.el-menu-item.is-active{
font-weight: bolder;
line-height: 45px;
color: white !important;
background-color: #0d8eee !important;
background-color: #0D8EEE !important;
}
.el-menu-item {
width: 130px;
color: #2e2e2e !important;
background-color: #f6f6fa !important;
color: #2E2E2E !important;
background-color:#F6F6FA !important;
}
.el-menu--horizontal > .el-submenu {
.el-menu--horizontal > .el-submenu{
height: 10px;
}
//.el-menu--horizontal > .el-submenu.is-active{
// height: 80px;
//}
......
src/views/history/index.vue
View file @ 12101ec5
......@@ -35,12 +35,16 @@
label-width="100px"
>
<el-form-item prop="monitoringName">
<el-input
v-model.trim="queryParams.monitoringName"
<el-select
v-model="queryParams.monitoringName"
placeholder="请输入监控点名称"
clearable
@keyup.enter.native="handleQuery"
/>
>
<el-option value="01">Camera 01</el-option>
<el-option value="02">Camera 02</el-option>
<el-option value="03">Camera 03</el-option>
<el-option value="04">Camera 04</el-option>
</el-select>
</el-form-item>
<el-form-item prop="monitorState">
......@@ -58,11 +62,8 @@
<el-date-picker
placeholder="请选择监控时间"
value-format="yyyy-MM-dd"
v-model="queryParams.monitorTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="queryParams.monitoringStarttime"
type="date"
>
</el-date-picker>
<!-- <el-date-picker clearable-->
......@@ -103,7 +104,12 @@
style="min-height: 650px"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="100" prop="id" />
<el-table-column label="序号" align="center" width="100">
<template slot-scope="scope">
<span>{{ calculateIndex(scope.$index) }}</span>
</template>
</el-table-column>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
<!-- </template>-->
......@@ -198,6 +204,10 @@
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:current-page.sync="currentPage"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@pagination="getList"
/>
......@@ -234,7 +244,6 @@ export default {
dicts: ["history_state"],
data() {
return {
backTag: true,
carryRowCode: {
id: "",
monitoringName: "",
......@@ -257,6 +266,9 @@ export default {
total: 0,
// history表格数据
histableList: [],
currentPage: 1,
pageSize: 10,
currentPageData: [],
// 弹出层标题
title: "",
// 是否显示弹出层
......@@ -265,10 +277,10 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
monitoringName: null,
monitorTime: null,
monitorState: null,
id: null,
monitoringName: undefined,
monitorTime: undefined,
monitorState: undefined,
id: undefined,
},
// 表单参数
form: {},
......@@ -278,8 +290,43 @@ export default {
},
created() {
this.getList();
this.updateCurrentPageData();
},
computed: {
startIndexOfPage() {
return (this.currentPage - 1) * this.total;
},
},
methods: {
handleSizeChange(val) {
this.total = val;
this.updateCurrentPageData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.updateCurrentPageData();
},
updateCurrentPageData() {
const startIndex = (this.currentPage - 1) * this.total;
const endIndex = startIndex + this.total;
this.currentPageData = this.histableList.slice(startIndex, endIndex);
},
calculateIndex(index) {
return this.startIndexOfPage + index + 1;
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
const maxPage = Math.ceil(this.items.length / this.total);
if (this.currentPage < maxPage) {
this.currentPage++;
}
},
formatHoursAsHMS(hours) {
// 确保小时数为整数
const intHours = Math.floor(hours);
......@@ -308,17 +355,12 @@ export default {
// 表单重置
reset() {
this.form = {
ID: null,
monitoringName: null,
monitoringStarttime: null,
monitoringFinallytime: null,
monitorTime: null,
monitorState: null,
CREATETIME: null,
CREATEBY: null,
UPDATETIME: null,
UPDATEBY: null,
delFlag: null,
ID: undefined,
monitoringName: undefined,
monitoringStarttime: undefined,
monitoringFinallytime: undefined,
monitorTime: undefined,
monitorState: undefined,
};
this.resetForm("form");
},
......@@ -346,12 +388,6 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.$router.push({
name: "back",
query: {
backTag: true,
},
});
this.carryRowCode = row;
// 查看详情页面(把id换成code)
this.$router.push({
......
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