Skip to content

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

sunyu 序号凑合用了QAQ

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