add project
fanluyan
2 years ago
parent
83810fd674
commit
9daf7dd7ab
@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"name": "xyproject",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
|
"axios": "^1.3.4",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"echarts": "^5.4.2",
|
||||||
|
"element-ui": "^2.15.13",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"update-element-ui-theme": "^1.0.0",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-awesome-swiper": "^3.1.3",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"less": "^4.0.0",
|
||||||
|
"less-loader": "^8.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app" class="blueStyle">
|
||||||
|
<router-view> </router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app,
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*滚动条样式*/
|
||||||
|
/* 整个滚动条 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条上的滚动滑块 */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #49b1f5;
|
||||||
|
/* 关键代码 */
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
@ -0,0 +1,264 @@
|
|||||||
|
//蓝色主题
|
||||||
|
.blueStyle {
|
||||||
|
.header {
|
||||||
|
background: #20a0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
background: #20a0ff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:not(.is-disabled):focus,
|
||||||
|
.el-menu-item:not(.is-disabled):hover {
|
||||||
|
color: #20a0ff;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #20a0ff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu:focus .el-submenu__title,
|
||||||
|
.el-submenu:hover .el-submenu__title {
|
||||||
|
color: #20a0ff !important;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #20a0ff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu.is-active .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #20a0ff;
|
||||||
|
background-color: #20a0ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//红色主题
|
||||||
|
.redStyle {
|
||||||
|
.header {
|
||||||
|
background: #EE320C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
background: #EE320C;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:not(.is-disabled):focus,
|
||||||
|
.el-menu-item:not(.is-disabled):hover {
|
||||||
|
color: #EE320C;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #EE320C !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu:focus .el-submenu__title,
|
||||||
|
.el-submenu:hover .el-submenu__title {
|
||||||
|
color: #EE320C !important;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #EE320C !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu.is-active .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||||
|
color: #EE320C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||||
|
color: #EE320C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #EE320C;
|
||||||
|
background-color: #EE320C;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//绿色主题
|
||||||
|
.greenStyle {
|
||||||
|
.header {
|
||||||
|
background: #25EE28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
background: #25EE28;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:not(.is-disabled):focus,
|
||||||
|
.el-menu-item:not(.is-disabled):hover {
|
||||||
|
color: #25EE28;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #25EE28 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu:focus .el-submenu__title,
|
||||||
|
.el-submenu:hover .el-submenu__title {
|
||||||
|
color: #25EE28 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #25EE28 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu.is-active .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||||
|
color: #25EE28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||||
|
color: #25EE28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #25EE28;
|
||||||
|
background-color: #25EE28;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//橙色主题
|
||||||
|
.orangeStyle {
|
||||||
|
.header {
|
||||||
|
background: #f08200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
background: #f08200;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:not(.is-disabled):focus,
|
||||||
|
.el-menu-item:not(.is-disabled):hover {
|
||||||
|
color: #f08200;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #f08200 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu:focus .el-submenu__title,
|
||||||
|
.el-submenu:hover .el-submenu__title {
|
||||||
|
color: #f08200 !important;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #f08200 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu.is-active .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||||
|
color: #f08200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||||
|
color: #f08200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #f08200;
|
||||||
|
background-color: #f08200;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 541 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<!-- 折叠按钮 -->
|
||||||
|
<!-- <div class="collapse-btn" @click="collapseChage">
|
||||||
|
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||||
|
<i v-else class="el-icon-s-unfold"></i>
|
||||||
|
</div> -->
|
||||||
|
<div class="logo">可视化智能管控系统</div>
|
||||||
|
<v-sidebar></v-sidebar>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="header-user-con">
|
||||||
|
<el-select v-model="theme" @change="changeTheme">
|
||||||
|
<el-option label="蓝色" value="蓝色"></el-option>
|
||||||
|
<el-option label="红色" value="红色"></el-option>
|
||||||
|
<el-option label="绿色" value="绿色"></el-option>
|
||||||
|
<el-option label="橙色" value="橙色"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<!-- 全屏显示 -->
|
||||||
|
|
||||||
|
<div class="btn-fullscreen" @click="handleFullScreen">
|
||||||
|
<el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
|
||||||
|
<i class="el-icon-rank"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户头像 -->
|
||||||
|
<div class="user-avator">
|
||||||
|
<img src="../../assets/img/user.jpeg" />
|
||||||
|
</div>
|
||||||
|
<!-- 用户名下拉菜单 -->
|
||||||
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ username }}
|
||||||
|
<i class="el-icon-caret-bottom"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import bus from '../common/bus';
|
||||||
|
import updateElementUiTheme from 'update-element-ui-theme';
|
||||||
|
import vSidebar from './Sidebar.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
vSidebar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
color: '#20a0ff',
|
||||||
|
theme: '蓝色',
|
||||||
|
//collapse: false,
|
||||||
|
fullscreen: false,
|
||||||
|
name: 'xinyin'
|
||||||
|
//message: 2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
username() {
|
||||||
|
let username = localStorage.getItem('ms_username');
|
||||||
|
return username ? username : this.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//修改主题色
|
||||||
|
changeTheme() {
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
if (this.theme === '蓝色') {
|
||||||
|
this.color = '#20a0ff';
|
||||||
|
app.classList.remove('redStyle', 'greenStyle', 'orangeStyle');
|
||||||
|
app.classList.add('blueStyle');
|
||||||
|
} else if (this.theme === '红色') {
|
||||||
|
this.color = '#EE320C';
|
||||||
|
app.classList.remove('blueStyle', 'greenStyle', 'orangeStyle');
|
||||||
|
app.classList.add('redStyle');
|
||||||
|
} else if (this.theme === '绿色') {
|
||||||
|
this.color = '#25EE28';
|
||||||
|
app.classList.add('greenStyle');
|
||||||
|
} else if (this.theme === '橙色') {
|
||||||
|
this.color = '#f08200';
|
||||||
|
app.classList.remove('blueStyle', 'greenStyle', 'redStyle');
|
||||||
|
app.classList.add('orangeStyle');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
handleCommand(command) {
|
||||||
|
if (command == 'loginout') {
|
||||||
|
localStorage.removeItem('ms_username');
|
||||||
|
this.$router.push('/login');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 侧边栏折叠
|
||||||
|
// collapseChage() {
|
||||||
|
// this.collapse = !this.collapse;
|
||||||
|
// bus.$emit('collapse', this.collapse);
|
||||||
|
// this.$store.commit('changeOpen', this.collapse);
|
||||||
|
// },
|
||||||
|
// 全屏事件
|
||||||
|
handleFullScreen() {
|
||||||
|
let element = document.documentElement;
|
||||||
|
if (this.fullscreen) {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.webkitCancelFullScreen) {
|
||||||
|
document.webkitCancelFullScreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (element.requestFullscreen) {
|
||||||
|
element.requestFullscreen();
|
||||||
|
} else if (element.webkitRequestFullScreen) {
|
||||||
|
element.webkitRequestFullScreen();
|
||||||
|
} else if (element.mozRequestFullScreen) {
|
||||||
|
element.mozRequestFullScreen();
|
||||||
|
} else if (element.msRequestFullscreen) {
|
||||||
|
// IE11
|
||||||
|
element.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.fullscreen = !this.fullscreen;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$watch(
|
||||||
|
'color',
|
||||||
|
(value) => {
|
||||||
|
updateElementUiTheme({
|
||||||
|
theme: value,
|
||||||
|
themeName: '--my-theme-name'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #242f42;
|
||||||
|
.collapse-btn {
|
||||||
|
float: left;
|
||||||
|
padding: 0 21px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
float: left;
|
||||||
|
width: 250px;
|
||||||
|
line-height: 70px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
float: right;
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
|
height: 70px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btn-fullscreen {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.btn-bell,
|
||||||
|
.btn-fullscreen {
|
||||||
|
position: relative;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-bell-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -2px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f56c6c;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-bell .el-icon-bell {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.user-avator {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.user-avator img {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.el-dropdown-link {
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tags" v-if="showTags">
|
||||||
|
<ul>
|
||||||
|
<li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
|
||||||
|
<router-link :to="item.path" class="tags-li-title"> <i :class="item.icon"></i>{{ item.title }} </router-link>
|
||||||
|
<span class="tags-li-icon" @click="closeTags(index)" v-if="item.path !== '/stritl'"><i class="el-icon-close"></i></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- <div class="tags-close-box">
|
||||||
|
<el-dropdown @command="handleTags">
|
||||||
|
<el-button size="mini" type="primary">
|
||||||
|
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</el-button>
|
||||||
|
<el-dropdown-menu size="small" slot="dropdown">
|
||||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import bus from './bus';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tagsList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isActive(path) {
|
||||||
|
return path === this.$route.fullPath;
|
||||||
|
},
|
||||||
|
// 关闭单个标签
|
||||||
|
closeTags(index) {
|
||||||
|
const delItem = this.tagsList.splice(index, 1)[0];
|
||||||
|
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
|
||||||
|
if (item) {
|
||||||
|
delItem.path === this.$route.fullPath && this.$router.push(item.path);
|
||||||
|
} else {
|
||||||
|
this.$router.push('/');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 关闭全部标签
|
||||||
|
closeAll() {
|
||||||
|
this.tagsList = [];
|
||||||
|
this.$router.push('/');
|
||||||
|
},
|
||||||
|
// 关闭其他标签
|
||||||
|
closeOther() {
|
||||||
|
const curItem = this.tagsList.filter((item) => {
|
||||||
|
return item.path === this.$route.fullPath;
|
||||||
|
});
|
||||||
|
this.tagsList = curItem;
|
||||||
|
},
|
||||||
|
// 设置标签
|
||||||
|
setTags(route) {
|
||||||
|
const isExist = this.tagsList.some((item) => {
|
||||||
|
return item.path === route.fullPath;
|
||||||
|
});
|
||||||
|
if (!isExist) {
|
||||||
|
if (this.tagsList.length >= 8) {
|
||||||
|
this.tagsList.shift();
|
||||||
|
}
|
||||||
|
this.tagsList.push({
|
||||||
|
title: route.meta.title,
|
||||||
|
path: route.fullPath,
|
||||||
|
icon: route.meta.icon
|
||||||
|
});
|
||||||
|
// console.log(route);
|
||||||
|
}
|
||||||
|
bus.$emit('tags', this.tagsList);
|
||||||
|
},
|
||||||
|
handleTags(command) {
|
||||||
|
command === 'other' ? this.closeOther() : this.closeAll();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showTags() {
|
||||||
|
return this.tagsList.length > 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route(newValue, oldValue) {
|
||||||
|
this.setTags(newValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.setTags(this.$route);
|
||||||
|
// 监听关闭当前页面的标签页
|
||||||
|
bus.$on('close_current_tags', () => {
|
||||||
|
for (let i = 0, len = this.tagsList.length; i < len; i++) {
|
||||||
|
const item = this.tagsList[i];
|
||||||
|
if (item.path === this.$route.fullPath) {
|
||||||
|
if (i < len - 1) {
|
||||||
|
this.$router.push(this.tagsList[i + 1].path);
|
||||||
|
} else if (i > 0) {
|
||||||
|
this.$router.push(this.tagsList[i - 1].path);
|
||||||
|
} else {
|
||||||
|
this.$router.push('/');
|
||||||
|
}
|
||||||
|
this.tagsList.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.tags {
|
||||||
|
position: relative;
|
||||||
|
height: 48px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
padding-right: 120px;
|
||||||
|
box-shadow: 0 5px 10px #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags ul {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li {
|
||||||
|
float: left;
|
||||||
|
margin: 12px 8px 12px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 5px 0 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: all 0.3s ease-in;
|
||||||
|
-moz-transition: all 0.3s ease-in;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li:not(.active):hover {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #409eff;
|
||||||
|
background-color: #409eff;
|
||||||
|
}
|
||||||
|
.tags-li-title {
|
||||||
|
float: left;
|
||||||
|
max-width: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-right: 5px;
|
||||||
|
color: #666;
|
||||||
|
i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active .tags-li-title {
|
||||||
|
color: #fff;
|
||||||
|
i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-close-box {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
width: 110px;
|
||||||
|
height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue();
|
||||||
|
|
||||||
|
export default bus;
|
||||||
@ -0,0 +1,464 @@
|
|||||||
|
const photoVideo = [
|
||||||
|
{
|
||||||
|
"fileId": "2382c462-5850-4cc9-8413-8eb20a9c104e",
|
||||||
|
"fileName": "shxy2023013100001_20230302100015_2_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302100015_2_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 10:00:15",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "1",
|
||||||
|
"orientationName": "大号侧",
|
||||||
|
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||||
|
"saveTime": "2023-03-02 10:00:25.000099",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "6eca3e84-7988-4c83-894a-0d2fb5157e33",
|
||||||
|
"fileName": "shxy2023013100001_20230302100007_1_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302100007_1_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 10:00:07",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "2",
|
||||||
|
"orientationName": "小号侧",
|
||||||
|
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||||
|
"saveTime": "2023-03-02 10:00:18.000247",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "c9eb0ed1-731f-4543-bb87-3f67d7778796",
|
||||||
|
"fileName": "shxy2023013100001_20230302090018_2_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302090018_2_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 09:00:18",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "1",
|
||||||
|
"orientationName": "大号侧",
|
||||||
|
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||||
|
"saveTime": "2023-03-02 09:00:28.000053",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "63457b50-aa5e-4558-8849-f3576e13a6cb",
|
||||||
|
"fileName": "shxy2023013100001_20230302090010_1_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302090010_1_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 09:00:10",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "2",
|
||||||
|
"orientationName": "小号侧",
|
||||||
|
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||||
|
"saveTime": "2023-03-02 09:00:21.000113",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "3fa69fb6-332d-4935-814d-6fd9a9e03b1c",
|
||||||
|
"fileName": "shxy2023013100001_20230302080016_2_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302080016_2_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 08:00:16",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "1",
|
||||||
|
"orientationName": "大号侧",
|
||||||
|
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||||
|
"saveTime": "2023-03-02 08:00:26.000759",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "67634860-cd95-482f-857b-3d1190e37b05",
|
||||||
|
"fileName": "shxy2023013100001_20230302080008_1_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302080008_1_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 08:00:08",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "2",
|
||||||
|
"orientationName": "小号侧",
|
||||||
|
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||||
|
"saveTime": "2023-03-02 08:00:19.000241",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "f2cd8e33-4f97-43a7-b5b2-569bd6bfe9c1",
|
||||||
|
"fileName": "shxy2023013100001_20230302070016_2_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302070016_2_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 07:00:16",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "1",
|
||||||
|
"orientationName": "大号侧",
|
||||||
|
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||||
|
"saveTime": "2023-03-02 07:00:26.000512",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "3efade4a-6a35-40c3-b3f5-454feab69bea",
|
||||||
|
"fileName": "shxy2023013100001_20230302070007_1_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302070007_1_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 07:00:07",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "2",
|
||||||
|
"orientationName": "小号侧",
|
||||||
|
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||||
|
"saveTime": "2023-03-02 07:00:18.000115",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "a112b9bb-fd47-4e90-8747-01319930f171",
|
||||||
|
"fileName": "shxy2023013100001_20230302060018_2_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302060018_2_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 06:00:18",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "1",
|
||||||
|
"orientationName": "大号侧",
|
||||||
|
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||||
|
"saveTime": "2023-03-02 06:00:28.000832",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"fileId": "6a1567fa-6a21-4d4f-b0b8-49a9ea633649",
|
||||||
|
"fileName": "shxy2023013100001_20230302060009_1_255.jpg",
|
||||||
|
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302060009_1_255.jpg",
|
||||||
|
"captureTime": "2023-03-02 06:00:09",
|
||||||
|
"fileSize": null,
|
||||||
|
"fileType": 0,
|
||||||
|
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||||
|
"companyName": null,
|
||||||
|
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||||
|
"lineName": null,
|
||||||
|
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||||
|
"towerName": null,
|
||||||
|
"orientation": "2",
|
||||||
|
"orientationName": "小号侧",
|
||||||
|
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||||
|
"saveTime": "2023-03-02 06:00:21.000806",
|
||||||
|
"uploadTime": null,
|
||||||
|
"analyzeTime": null,
|
||||||
|
"status": 1,
|
||||||
|
"discernStatus": null,
|
||||||
|
"uploadSpeed": 0,
|
||||||
|
"collectConfigId": null,
|
||||||
|
"tfsTag": null,
|
||||||
|
"tfsPicName": null,
|
||||||
|
"coverPicName": "",
|
||||||
|
"camera": null,
|
||||||
|
"meid": null,
|
||||||
|
"temperature": null,
|
||||||
|
"voltage": null,
|
||||||
|
"dbmLevel": null,
|
||||||
|
"energy": null,
|
||||||
|
"netType": null,
|
||||||
|
"picGrade": null,
|
||||||
|
"channel": null,
|
||||||
|
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||||
|
"picOriginType": null,
|
||||||
|
"hisflag": null,
|
||||||
|
"timeConsuming": null,
|
||||||
|
"markAlarmType": null,
|
||||||
|
"dangerLevel": null,
|
||||||
|
"isMark": null,
|
||||||
|
"presettingNum": null,
|
||||||
|
"presettingName": null,
|
||||||
|
"alarmFilePath": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default photoVideo
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/stritl'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
|
||||||
|
meta: { title: '首页' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/stritl',
|
||||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../views/stritl/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '系统首页',
|
||||||
|
icon: 'el-icon-s-home',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/realTimeMonitor',
|
||||||
|
component: () => import(/* webpackChunkName: "icon" */ '../views/realTimeMonitor/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '实时监控',
|
||||||
|
permission: true,
|
||||||
|
icon: 'el-icon-camera',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pictureRotation',
|
||||||
|
component: () => import(/* webpackChunkName: "table" */ '../views/pictureRotation/index.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '图片轮巡',
|
||||||
|
permission: true,
|
||||||
|
icon: 'el-icon-film',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/videoMonitor',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/index.vue'),
|
||||||
|
meta: { title: '监控视频', icon: 'el-icon-video-camera', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/videoHistory',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/videoMonitor/videoHistory.vue'),
|
||||||
|
meta: { title: '视频回放', icon: 'el-icon-video-camera' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/photoAlarm',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/alarmHandling/index.vue'),
|
||||||
|
meta: { title: '告警处理', icon: 'el-icon-bell', }
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/lineInformation',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/lineInformation/index.vue'),
|
||||||
|
meta: { title: '线路信息管理', icon: '', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/groupInformation',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/groupInformation/index.vue'),
|
||||||
|
meta: { title: '分组信息管理', icon: '', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/towerInformation',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerInformation/index.vue'),
|
||||||
|
meta: { title: '杆塔信息管理', icon: '', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/towerTeam',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/userEquipment/towerTeam/index.vue'),
|
||||||
|
meta: { title: '杆塔班组用户', icon: '', }
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/deviceVisualization',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/deviceVisualization/index.vue'),
|
||||||
|
meta: { title: '装置分布可视化', icon: '', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/photographicDevice',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/photographicDevice/index.vue'),
|
||||||
|
meta: { title: '拍照装置管理', icon: '', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/SIMCard',
|
||||||
|
component: () => import(/* webpackChunkName: "tabs" */ '../views/management/monitoringEquipment/SIMCard/index.vue'),
|
||||||
|
meta: { title: 'SIM卡管理', icon: '', }
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
// 权限页面
|
||||||
|
path: '/permission',
|
||||||
|
component: () => import(/* webpackChunkName: "permission" */ '../views/Permission.vue'),
|
||||||
|
meta: { title: '权限测试', permission: true, icon: 'el-icon-setting', }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/404',
|
||||||
|
component: () => import(/* webpackChunkName: "404" */ '../views/404.vue'),
|
||||||
|
meta: { title: '404' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/403',
|
||||||
|
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'),
|
||||||
|
meta: { title: '403' }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
|
||||||
|
meta: { title: '登录' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
redirect: '/404'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
}
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error-page">
|
||||||
|
<div class="error-code">4<span>0</span>3</div>
|
||||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
||||||
|
<div class="error-handle">
|
||||||
|
<router-link to="/">
|
||||||
|
<el-button type="primary" size="large">返回首页</el-button>
|
||||||
|
</router-link>
|
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
goBack(){
|
||||||
|
this.$router.go(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.error-page{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f3f3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.error-code{
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 250px;
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #f02d2d;
|
||||||
|
}
|
||||||
|
.error-code span{
|
||||||
|
color: #00a854;
|
||||||
|
}
|
||||||
|
.error-desc{
|
||||||
|
font-size: 30px;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.error-handle{
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
}
|
||||||
|
.error-btn{
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error-page">
|
||||||
|
<div class="error-code">4<span>0</span>4</div>
|
||||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||||
|
<div class="error-handle">
|
||||||
|
<router-link to="/">
|
||||||
|
<el-button type="primary" size="large">返回首页</el-button>
|
||||||
|
</router-link>
|
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
goBack(){
|
||||||
|
this.$router.go(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.error-page{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f3f3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.error-code{
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 250px;
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
.error-code span{
|
||||||
|
color: #00a854;
|
||||||
|
}
|
||||||
|
.error-desc{
|
||||||
|
font-size: 30px;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.error-handle{
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
}
|
||||||
|
.error-btn{
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-wrap">
|
||||||
|
<div class="ms-login">
|
||||||
|
<div class="ms-title">后台管理系统</div>
|
||||||
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<el-input v-model="param.username" placeholder="username">
|
||||||
|
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input type="password" placeholder="password" v-model="param.password" @keyup.enter.native="submitForm()">
|
||||||
|
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<div class="login-btn">
|
||||||
|
<el-button type="primary" @click="submitForm()">登录</el-button>
|
||||||
|
</div>
|
||||||
|
<p class="login-tips">Tips : 用户名和密码随便填。</p>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { get1, get2 } from '@/utils/api/index';
|
||||||
|
export default {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
param: {
|
||||||
|
username: 'admin',
|
||||||
|
password: '123123'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm() {
|
||||||
|
this.$refs.login.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.$message.success('登录成功');
|
||||||
|
localStorage.setItem('ms_username', this.param.username);
|
||||||
|
this.$router.push('/');
|
||||||
|
} else {
|
||||||
|
this.$message.error('请输入账号和密码');
|
||||||
|
console.log('error submit!!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
get1().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
});
|
||||||
|
get2().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../assets/img/login-bg.jpg) no-repeat center center;
|
||||||
|
background-size: cover;
|
||||||
|
background: #324157;
|
||||||
|
}
|
||||||
|
.ms-title {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.ms-login {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 350px;
|
||||||
|
margin: -190px 0 0 -175px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ms-content {
|
||||||
|
padding: 30px 30px;
|
||||||
|
}
|
||||||
|
.login-btn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.login-btn button {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.login-tips {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="alarmHandBox">
|
||||||
|
<div class="alarmTop">
|
||||||
|
<div class="alarmButtonGroup">
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="primary">今日告警</el-button>
|
||||||
|
<el-button type="primary">最近三日告警</el-button>
|
||||||
|
<el-button type="primary">最近一周告警</el-button>
|
||||||
|
<el-button type="primary">批量处理</el-button>
|
||||||
|
<el-button type="primary">查看详情</el-button>
|
||||||
|
<el-button type="primary">导出</el-button>
|
||||||
|
<el-button type="primary">导出处理结果</el-button>
|
||||||
|
<el-button type="primary">导出图片</el-button>
|
||||||
|
<el-button type="primary">手动刷新</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alarmContain">
|
||||||
|
<div class="alarmTable">
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
height="calc(100% - 40px)"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column min-width="35">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column type="selection" min-width="25"> </el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="alarmTime"
|
||||||
|
label="告警时间"
|
||||||
|
min-width="135"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
:formatter="dateFormat"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="alarmLevel" label="告警级别" min-width="75"> </el-table-column>
|
||||||
|
<el-table-column prop="lineName" label="XL" min-width="105" :show-overflow-tooltip="true"> </el-table-column>
|
||||||
|
<el-table-column prop="meid" label="GT" min-width="115" :show-overflow-tooltip="true"> </el-table-column>
|
||||||
|
<el-table-column prop="orientationName" label="监拍朝向" min-width="95" :show-overflow-tooltip="true">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="companyName" label="单位" min-width="75" :show-overflow-tooltip="true"> </el-table-column>
|
||||||
|
<el-table-column prop="alarmInfo" label="告警原因" min-width="155" :show-overflow-tooltip="true"> </el-table-column>
|
||||||
|
<el-table-column prop="source" label="分析来源" min-width="105" :show-overflow-tooltip="true">
|
||||||
|
<template>后端分析</template></el-table-column
|
||||||
|
>
|
||||||
|
<el-table-column prop="clearDistace" label="净空距离" min-width="105" :show-overflow-tooltip="true"
|
||||||
|
><template>未分析</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="distanceLevel" label="距离分级" min-width="85" :show-overflow-tooltip="true"> </el-table-column>
|
||||||
|
<el-table-column prop="isRead" label="是否已读" min-width="95" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.isRead == 0">未读</span>
|
||||||
|
<span v-if="scope.row.isRead == 1">已读</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pageNation">
|
||||||
|
<el-pagination
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="page"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout=" prev, pager, next, jumper,total"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alarmPic">
|
||||||
|
<div class="imgshow"><img :src="photoPic" /></div>
|
||||||
|
<div class="editorBtn">
|
||||||
|
<el-button type="primary">处理</el-button>
|
||||||
|
<el-button type="primary">查看操作详情</el-button>
|
||||||
|
<el-button type="primary">设置非警告区域</el-button>
|
||||||
|
<el-button type="primary">主动拍照</el-button>
|
||||||
|
<el-button type="primary">转向GT</el-button>
|
||||||
|
<el-button type="primary">复制</el-button>
|
||||||
|
<el-button type="primary">历史图</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { list } from '@/utils/api/index';
|
||||||
|
import moment from 'moment';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
photoPic: '',
|
||||||
|
|
||||||
|
tableData: [],
|
||||||
|
multipleSelection: [],
|
||||||
|
page: 1, // 当前页数
|
||||||
|
pageSize: 20, // 每页数量
|
||||||
|
total: 0 //总条数
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
this.page = val;
|
||||||
|
this.getTableList();
|
||||||
|
},
|
||||||
|
getTableList() {
|
||||||
|
list({
|
||||||
|
companyIdSelect: '',
|
||||||
|
timeStart: '2023-03-24 00:00:00',
|
||||||
|
timeEnd: '2023-03-24 23:59:59',
|
||||||
|
status: 0,
|
||||||
|
lineId: '',
|
||||||
|
voltageCode: '',
|
||||||
|
logicTowerId: '',
|
||||||
|
alarmInfo: '',
|
||||||
|
page: this.page,
|
||||||
|
rows: this.pageSize,
|
||||||
|
sort: 'alarmTime',
|
||||||
|
order: 'desc'
|
||||||
|
}).then((res) => {
|
||||||
|
console.log(res.data);
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.photoPic = 'http://180.166.218.222:8104/media' + res.data.rows[0].photoPath;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.multipleSelection = val;
|
||||||
|
},
|
||||||
|
handleRowClick(row) {
|
||||||
|
//this.$refs.multipleTable.toggleRowSelection(row);
|
||||||
|
console.log(row);
|
||||||
|
this.photoPic = 'http://180.166.218.222:8104/media' + row.photoPath;
|
||||||
|
},
|
||||||
|
dateFormat(row, column) {
|
||||||
|
var date = row[column.property];
|
||||||
|
if (date == undefined) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return moment(date).format('YYYY-MM-DD HH:mm:ss');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTableList();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.alarmHandBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
.alarmTop {
|
||||||
|
padding: 16px 8px;
|
||||||
|
}
|
||||||
|
.alarmContain {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
padding: 0px 8px;
|
||||||
|
.alarmTable {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.pageNation {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.alarmPic {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.imgshow {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editorBtn {
|
||||||
|
margin-top: 8px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
padding: 2%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.editorBtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<div>SIM卡管理</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
<div>装置分布可视化</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<div>拍照装置管理</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<div>分组信息管理</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<div class="lineInformation">
|
||||||
|
<div class="lineBtnGroup">
|
||||||
|
<el-button type="primary">新增</el-button>
|
||||||
|
<el-button type="primary">批量添加</el-button>
|
||||||
|
<el-button type="primary">修改</el-button>
|
||||||
|
<el-button type="primary">修改公司</el-button>
|
||||||
|
<el-button type="primary">删除</el-button>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="primary">导入</el-button>
|
||||||
|
<el-button type="primary">导入模板下载</el-button>
|
||||||
|
<el-button type="primary">导出</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="searchForm">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="单位:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="DY等级:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="XL名称:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否为采集">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="PMS编号:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="lineTable">
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="tableData"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" width="55"> </el-table-column>
|
||||||
|
<el-table-column type="selection" width="55"> </el-table-column>
|
||||||
|
<el-table-column label="单位">
|
||||||
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="XL名称"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="DY等级" show-overflow-tooltip> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="起始GT"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="终止GT"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="PMS编号"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="备注"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="排序号"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formInline: {
|
||||||
|
user: '',
|
||||||
|
region: ''
|
||||||
|
},
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-08',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-06',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-07',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
multipleSelection: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit() {
|
||||||
|
console.log('submit!');
|
||||||
|
},
|
||||||
|
toggleSelection(rows) {
|
||||||
|
if (rows) {
|
||||||
|
rows.forEach((row) => {
|
||||||
|
this.$refs.multipleTable.toggleRowSelection(row);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$refs.multipleTable.clearSelection();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.multipleSelection = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.lineInformation {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
.lineBtnGroup {
|
||||||
|
padding: 16px 8px;
|
||||||
|
}
|
||||||
|
.searchForm {
|
||||||
|
padding: 0px 8px;
|
||||||
|
.el-form {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lineTable {
|
||||||
|
padding: 16px 8px 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="towerSide">
|
||||||
|
<el-tree
|
||||||
|
:data="data"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:props="defaultProps"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
default-expand-all
|
||||||
|
highlight-current
|
||||||
|
node-key="id"
|
||||||
|
:default-expanded-keys="expandDefault"
|
||||||
|
></el-tree>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import bus from '../../../../../components/common/bus';
|
||||||
|
import { getListCompany } from '@/utils/api/index';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
expandDefault: [], //默认选中第一项
|
||||||
|
data: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'text'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 为了选中第一层级下的第一个节点
|
||||||
|
watch: {
|
||||||
|
expandDefault(newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
document.querySelector('.el-tree-node__content').click();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
getListCompany({
|
||||||
|
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
||||||
|
lineName: ''
|
||||||
|
}).then((res) => {
|
||||||
|
//console.log(res.data);
|
||||||
|
this.expandDefault.push(res.data.$treeNodeId);
|
||||||
|
this.data = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleNodeClick(data) {
|
||||||
|
//console.log(data);
|
||||||
|
bus.$emit('nodeData', data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.towerSide {
|
||||||
|
width: 234px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
// 修改选中的样式
|
||||||
|
.el-tree {
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||||
|
background-color: #409eff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<div class="towerTableMian">
|
||||||
|
<div class="towerBtnGroup">
|
||||||
|
<el-button type="primary">新增</el-button>
|
||||||
|
<el-button type="primary">批量添加</el-button>
|
||||||
|
<el-button type="primary">同T添加</el-button>
|
||||||
|
<el-button type="primary">修改</el-button>
|
||||||
|
<el-button type="primary">修改XL</el-button>
|
||||||
|
<el-button type="primary">批量修改属地化</el-button>
|
||||||
|
|
||||||
|
<el-button type="primary">批量修改班组</el-button>
|
||||||
|
<el-button type="primary">删除</el-button>
|
||||||
|
<el-button type="primary">查询</el-button>
|
||||||
|
<el-button type="primary">导入</el-button>
|
||||||
|
<el-button type="primary">导入模板下载</el-button>
|
||||||
|
<el-button type="primary">导出</el-button>
|
||||||
|
<el-button type="primary">导入监拍点</el-button>
|
||||||
|
<el-button type="primary">监拍点导入模板</el-button>
|
||||||
|
<el-button type="primary">导出监拍点</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="searchForm">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="单位:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="DY等级:">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="XL名称:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否为采集">
|
||||||
|
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="PMS编号:">
|
||||||
|
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-table class="towerTable" :data="tableData" style="width: 100%" height="calc(100% - 154px)" v-loading="loading">
|
||||||
|
<el-table-column prop="company.organName" label="单位"> </el-table-column>
|
||||||
|
<el-table-column prop="line.lineName" label="XL名称"> </el-table-column>
|
||||||
|
<el-table-column prop="towerName" label="GT名称"> </el-table-column>
|
||||||
|
<el-table-column prop="date" label="排序"> </el-table-column>
|
||||||
|
<el-table-column prop="voltageLevelDict.name" label="DY等级"> </el-table-column>
|
||||||
|
<!-- <el-table-column prop="address" label="GT性质"> </el-table-column>
|
||||||
|
<el-table-column prop="date" label="GT状态"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="GT材质"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="位置描述"> </el-table-column>
|
||||||
|
<el-table-column prop="date" label="同T数量"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="责任人"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="运维班组"> </el-table-column>
|
||||||
|
<el-table-column prop="date" label="属地单位"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="PMS逻辑GT编码"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="PMS物理GT编码"> </el-table-column> -->
|
||||||
|
<!-- <el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
||||||
|
<el-button type="text" size="small">编辑</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<div class="pageNation">
|
||||||
|
<el-pagination
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="page"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout=" prev, pager, next, jumper,total"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import bus from '../../../../../components/common/bus';
|
||||||
|
import { getTowerList } from '@/utils/api/index';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [],
|
||||||
|
formInline: {
|
||||||
|
user: '',
|
||||||
|
region: ''
|
||||||
|
},
|
||||||
|
loading: true,
|
||||||
|
companyId: '',
|
||||||
|
page: 1, // 当前页数
|
||||||
|
pageSize: 20, // 每页数量
|
||||||
|
total: 0 //总条数
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.loading = true;
|
||||||
|
// getTowerList({
|
||||||
|
// organId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
||||||
|
// towerName: '',
|
||||||
|
// towerNature: '',
|
||||||
|
// towerTexture: '',
|
||||||
|
// status: '',
|
||||||
|
// cConfig: '',
|
||||||
|
// page: this.page,
|
||||||
|
// rows: this.pageSize
|
||||||
|
// }).then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// this.tableData = res.data.rows;
|
||||||
|
// this.total = res.data.total;
|
||||||
|
// this.loading = false;
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
bus.$on('nodeData', (data) => {
|
||||||
|
// console.log(data);
|
||||||
|
this.loading = true;
|
||||||
|
if (data.dataType == 'company') {
|
||||||
|
this.getLevelOne(data);
|
||||||
|
} else if (data.dataType == 'dict') {
|
||||||
|
this.getLevelTwo(data);
|
||||||
|
} else if (data.dataType == 'line') {
|
||||||
|
this.getLevelThree(data);
|
||||||
|
}
|
||||||
|
//this.getTable(data);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//一级菜单
|
||||||
|
getLevelOne(data) {
|
||||||
|
getTowerList({
|
||||||
|
organId: data.id,
|
||||||
|
towerName: '',
|
||||||
|
towerNature: '',
|
||||||
|
towerTexture: '',
|
||||||
|
status: '',
|
||||||
|
cConfig: '',
|
||||||
|
page: this.page,
|
||||||
|
rows: this.pageSize
|
||||||
|
}).then((res) => {
|
||||||
|
//console.log(res);
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//二级菜单
|
||||||
|
getLevelTwo(data) {
|
||||||
|
getTowerList({
|
||||||
|
voltageLevel: data.id,
|
||||||
|
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
||||||
|
towerName: '',
|
||||||
|
towerNature: '',
|
||||||
|
towerTexture: '',
|
||||||
|
status: '',
|
||||||
|
cConfig: '',
|
||||||
|
page: this.page,
|
||||||
|
rows: this.pageSize
|
||||||
|
}).then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//三级菜单
|
||||||
|
getLevelThree(data) {
|
||||||
|
getTowerList({
|
||||||
|
lineId: data.id,
|
||||||
|
towerName: '',
|
||||||
|
towerNature: '',
|
||||||
|
towerTexture: '',
|
||||||
|
status: '',
|
||||||
|
cConfig: '',
|
||||||
|
page: this.page,
|
||||||
|
rows: this.pageSize
|
||||||
|
}).then((res) => {
|
||||||
|
//console.log(res);
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
this.page = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.towerTableMian {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
.towerBtnGroup {
|
||||||
|
padding: 16px 8px;
|
||||||
|
}
|
||||||
|
.searchForm {
|
||||||
|
padding: 0px 8px;
|
||||||
|
.el-form {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
.el-select,
|
||||||
|
.el-input {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.towerTable {
|
||||||
|
margin-top: 12px;
|
||||||
|
//padding: 16px 8px 0 8px;
|
||||||
|
}
|
||||||
|
.pageNation {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="towerInformation">
|
||||||
|
<tower-side></tower-side>
|
||||||
|
<tower-table></tower-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import towerSide from './components/towerSide.vue';
|
||||||
|
import towerTable from './components/towerTable.vue';
|
||||||
|
export default {
|
||||||
|
components: { towerSide, towerTable }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.towerInformation {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
<div>杆塔班组用户</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<div class="monitor-container">
|
||||||
|
<!-- 左侧数据列表树 -->
|
||||||
|
<div class="sideBar">
|
||||||
|
<!-- <treeSide></treeSide> -->
|
||||||
|
<!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
|
||||||
|
<el-tree
|
||||||
|
:data="barData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:current-node-key="current_node_key"
|
||||||
|
ref="tree"
|
||||||
|
node-key="id"
|
||||||
|
highlight-current
|
||||||
|
:default-expanded-keys="defaultKey"
|
||||||
|
check-on-click-node
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
<!-- <router-view></router-view> -->
|
||||||
|
<!-- 中心内容 -->
|
||||||
|
|
||||||
|
<picturemain :photoData="photoData" v-if="showBigPic"></picturemain>
|
||||||
|
<!-- 带参数的中心内容右侧参数区 -->
|
||||||
|
<div class="picSetBox" v-else>
|
||||||
|
<div class="swiperBox">
|
||||||
|
<carouselChart></carouselChart>
|
||||||
|
</div>
|
||||||
|
<paramArea></paramArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { getHostDeviceDataByVoltage } from '@/utils/api/index';
|
||||||
|
import carouselChart from '../components/carouselChart.vue';
|
||||||
|
import treeSide from './components/treeSide.vue';
|
||||||
|
import picturemain from './picturemain.vue'; //照片展示
|
||||||
|
import paramArea from './paramArea.vue'; //右侧参数区
|
||||||
|
import testjson from '../../testjson';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
treeSide,
|
||||||
|
picturemain,
|
||||||
|
paramArea,
|
||||||
|
carouselChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
photoData: '',
|
||||||
|
childData: '',
|
||||||
|
currentNodekey: '',
|
||||||
|
showBigPic: true,
|
||||||
|
defaultKey: '',
|
||||||
|
|
||||||
|
barData: [],
|
||||||
|
defaultProps: {
|
||||||
|
//指定参数格式回显数据
|
||||||
|
children: 'children',
|
||||||
|
label: 'text'
|
||||||
|
},
|
||||||
|
current_node_key: '2e24a182-b1a5-4135-b473-b8eee2c5193e'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
var currentData = testjson.data[0].children[0].children[0];
|
||||||
|
this.handleNodeClick(currentData);
|
||||||
|
this.defaultKey = [currentData.id];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTree();
|
||||||
|
//装置数量统计
|
||||||
|
// getHostDeviceDataByVoltage().then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleNodeClick(data) {
|
||||||
|
console.log(data);
|
||||||
|
if (data.children.length === 0 && data.dataType === 'tower') {
|
||||||
|
// this.photoData = data;
|
||||||
|
this.showBigPic = false;
|
||||||
|
this.childData = data.text;
|
||||||
|
} else if (data.children.length && data.dataType === 'line') {
|
||||||
|
this.showBigPic = true;
|
||||||
|
this.photoData = data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getTree() {
|
||||||
|
this.barData = testjson.data;
|
||||||
|
console.log(this.barData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.monitor-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
.sideBar {
|
||||||
|
width: 300px;
|
||||||
|
border-right: 1px solid #e4e7ed;
|
||||||
|
overflow: auto;
|
||||||
|
.el-tree {
|
||||||
|
//background: transparent;
|
||||||
|
//color: #409eff;
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
// .is-current {
|
||||||
|
// background-color: #256eb1;
|
||||||
|
// }
|
||||||
|
// .el-tree-node__content:hover,
|
||||||
|
// .el-upload-list__item:hover {
|
||||||
|
// background-color: #256eb1;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picSetBox {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
//background: #fcc;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
.swiperBox {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
<template>
|
||||||
|
<div class="parameterArea">
|
||||||
|
<div class="timeBox"></div>
|
||||||
|
<div class="monitorItemBox">
|
||||||
|
<h3>检测项</h3>
|
||||||
|
<el-button type="primary" v-for="(item, index) in MonitorItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="monitorPointBox">
|
||||||
|
<h3>监拍点</h3>
|
||||||
|
<el-button type="primary" v-for="(item, index) in MonitorPoint" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="actionItem">
|
||||||
|
<h3>操作项</h3>
|
||||||
|
<el-button type="primary" v-for="(item, index) in actionItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="configItem">
|
||||||
|
<h3>配置项</h3>
|
||||||
|
<el-button type="primary" v-for="(item, index) in configItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//检测项
|
||||||
|
MonitorItem: [
|
||||||
|
{
|
||||||
|
name: '图片视频'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测温'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '微气象'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '倾斜监测'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '风偏监测'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '覆冰检测'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '实时视频'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '弧垂'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '电压检测'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
//监拍点
|
||||||
|
MonitorPoint: [
|
||||||
|
{
|
||||||
|
name: '小号侧'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '大号侧'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
//操作项
|
||||||
|
actionItem: [
|
||||||
|
{
|
||||||
|
name: '主动拍照'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '主动录像'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '声光报警'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '图片调阅'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '微信推送'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '历史图片'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '线缆绘制'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '清除绘制'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '主动巡检'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '指令集'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '开启雨刮'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '喊话'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '上一设备'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下一设备'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '返回'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '历史对比'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '图片标记'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '主动巡航'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
//配置项
|
||||||
|
configItem: [
|
||||||
|
{
|
||||||
|
name: '设置分组'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '隐患类型'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '地图查看'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '监拍点信息'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '告警级别'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '设备信息'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '设置漏告'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.parameterArea {
|
||||||
|
width: 300px;
|
||||||
|
padding: 16px 8px;
|
||||||
|
.monitorItemBox,
|
||||||
|
.monitorPointBox,
|
||||||
|
.actionItem,
|
||||||
|
.configItem {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
//padding-top: 16px;
|
||||||
|
position: relative;
|
||||||
|
padding: 24px 16px 16px 16px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
h3 {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
top: -14px;
|
||||||
|
left: 7px;
|
||||||
|
background: transparent;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
width: 84px;
|
||||||
|
padding: 6px 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.el-button + .el-button {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
// .el-button {
|
||||||
|
// color: #666;
|
||||||
|
// background: #256eb1;
|
||||||
|
// border-color: #256eb1;
|
||||||
|
// }
|
||||||
|
// .el-button--primary:focus,
|
||||||
|
// .el-button--primary:hover {
|
||||||
|
// background: #66b1ff;
|
||||||
|
// border-color: #66b1ff;
|
||||||
|
// color: #666;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<div class="picture" v-if="photoData">
|
||||||
|
<div class="picTop">
|
||||||
|
<h3>{{ photoData.text }}</h3>
|
||||||
|
<div class="total">
|
||||||
|
<span>监拍设备:14套 监拍点:14个 视频:0套 测温:0 套 微气象:0 套</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="picmain">
|
||||||
|
<div class="photosPic">
|
||||||
|
<div class="topTitle">
|
||||||
|
<h4>{{ photoData.children[0].text }};大号侧</h4>
|
||||||
|
<div class="iconList">
|
||||||
|
<i class="el-icon-video-camera" title="主副机"></i>
|
||||||
|
<i class="el-icon-video-camera" title="夜视"></i>
|
||||||
|
<i class="el-icon-video-camera" title="云台"></i>
|
||||||
|
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||||
|
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||||
|
<i class="el-icon-video-camera" title="测温"></i>
|
||||||
|
<i class="el-icon-video-camera" title="微气象"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="picShow">
|
||||||
|
<li v-for="(item, index) in lagrePic.slice(0, 4)" :key="index" @click="picShow(index)">
|
||||||
|
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||||
|
<span class="timeShow">{{ item.captureTime }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="photosPic">
|
||||||
|
<div class="topTitle">
|
||||||
|
<h4>{{ photoData.children[0].text }};小号测</h4>
|
||||||
|
<div class="iconList">
|
||||||
|
<i class="el-icon-video-camera" title="主副机"></i>
|
||||||
|
<i class="el-icon-video-camera" title="夜视"></i>
|
||||||
|
<i class="el-icon-video-camera" title="云台"></i>
|
||||||
|
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||||
|
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||||
|
<i class="el-icon-video-camera" title="测温"></i>
|
||||||
|
<i class="el-icon-video-camera" title="微气象"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="picShow">
|
||||||
|
<li v-for="(item, index) in smallPic.slice(0, 4)" :key="index" @click="picShow(index)">
|
||||||
|
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||||
|
<span class="timeShow">{{ item.captureTime }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage4"
|
||||||
|
:page-size="100"
|
||||||
|
layout="prev, pager, next, jumper,total"
|
||||||
|
:total="400"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import photo from '../../photo';
|
||||||
|
export default {
|
||||||
|
props: ['photoData'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataPhoto: '',
|
||||||
|
lagrePic: [],
|
||||||
|
smallPic: [],
|
||||||
|
currentPage4: 4
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getPhoto();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSizeChange(val) {
|
||||||
|
console.log(`每页 ${val} 条`);
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
},
|
||||||
|
getPhoto() {
|
||||||
|
console.log(photo);
|
||||||
|
//this.dataPhoto = photo;
|
||||||
|
photo.forEach((item) => {
|
||||||
|
console.log(item);
|
||||||
|
if (item.orientation === '1') {
|
||||||
|
this.lagrePic.push(item);
|
||||||
|
} else {
|
||||||
|
this.smallPic.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
picShow(index) {
|
||||||
|
console.log(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" >
|
||||||
|
.picture {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px;
|
||||||
|
width: 100%;
|
||||||
|
.picTop {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
.total span {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picmain {
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
.photosPic {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 0px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
.topTitle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
h4 {
|
||||||
|
padding: 0 10px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 45px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.iconList {
|
||||||
|
i {
|
||||||
|
color: #999;
|
||||||
|
margin-right: 12px;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.picShow {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 6px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 24.5%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.timeShow {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #0683cc;
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
margin-top: 16px;
|
||||||
|
// color: #999 !important;
|
||||||
|
// .el-pagination__total,
|
||||||
|
// .el-pagination__jump {
|
||||||
|
// color: #999;
|
||||||
|
// }
|
||||||
|
// .el-pagination {
|
||||||
|
// .el-pager li {
|
||||||
|
// background: transparent;
|
||||||
|
// color: #999;
|
||||||
|
// &:hover {
|
||||||
|
// background: center center no-repeat #fff;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .btn-next,
|
||||||
|
// .btn-prev {
|
||||||
|
// background: center center no-repeat transparent;
|
||||||
|
// color: #999;
|
||||||
|
// &:hover {
|
||||||
|
// background: center center no-repeat #fff;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>视频监控页面</p>
|
||||||
|
<p>Remaining time: {{ remainingTime }}</p>
|
||||||
|
<el-button @click="toggleCountdown">{{ isrRuning ? '暂停' : '开始' }}</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less">
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalTime: 15,
|
||||||
|
remainingTime: 15,
|
||||||
|
isrRuning: false,
|
||||||
|
timer: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startCountdown() {
|
||||||
|
console.log('开始倒计时');
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
if (this.remainingTime <= 0) {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
this.remainingTime = this.totalTime;
|
||||||
|
this.startCountdown();
|
||||||
|
} else {
|
||||||
|
this.remainingTime--;
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
pauseCountdown() {
|
||||||
|
console.log('暂停倒计时');
|
||||||
|
clearInterval(this.timer);
|
||||||
|
},
|
||||||
|
toggleCountdown() {
|
||||||
|
if (this.isrRuning) {
|
||||||
|
this.pauseCountdown();
|
||||||
|
} else {
|
||||||
|
this.startCountdown();
|
||||||
|
}
|
||||||
|
this.isrRuning = !this.isrRuning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="padding: 20px">
|
||||||
|
<el-card
|
||||||
|
><el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
|
||||||
|
><el-tab-pane label="用户管理" name="用户管理"
|
||||||
|
><div class="echart-top">
|
||||||
|
<div id="echart1" style="width: 100%; height: 100%"></div>
|
||||||
|
<div id="echart2" style="width: 100%; height: 100%"></div></div></el-tab-pane
|
||||||
|
><el-tab-pane label="配置管理" name="配置管理"
|
||||||
|
><div class="echart-top">
|
||||||
|
<div id="echart3" style="width: 100%; height: 100%"></div>
|
||||||
|
<div id="echart4" style="width: 100%; height: 100%"></div></div></el-tab-pane></el-tabs
|
||||||
|
></el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
data() {
|
||||||
|
return { tabName: '配置管理', myChart1: '', myChart2: '', myChart3: '', myChart4: '' };
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$store.state.collapse'(val) {
|
||||||
|
console.log(val);
|
||||||
|
setTimeout(() => {
|
||||||
|
//echarts得重绘方法
|
||||||
|
this.myChart1.resize();
|
||||||
|
this.myChart2.resize();
|
||||||
|
this.myChart3.resize();
|
||||||
|
this.myChart4.resize();
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.getEchart1();
|
||||||
|
this.getEchart2();
|
||||||
|
this.getEchart3();
|
||||||
|
this.getEchart4();
|
||||||
|
},
|
||||||
|
handleClick(value) {
|
||||||
|
console.log('value', value);
|
||||||
|
if (value.name === '用户管理') {
|
||||||
|
this.getEchart1();
|
||||||
|
this.getEchart2();
|
||||||
|
} else {
|
||||||
|
this.getEchart3();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getEchart1() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById('echart1')).dispose();
|
||||||
|
this.myChart1 = this.$echarts.init(document.getElementById('echart1'));
|
||||||
|
let option = {
|
||||||
|
legend: { top: 'bottom' },
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
mark: { show: true },
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
restore: { show: true },
|
||||||
|
saveAsImage: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '面积模式',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [50, 250],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: { borderRadius: 8 },
|
||||||
|
data: [
|
||||||
|
{ value: 40, name: 'rose 1' },
|
||||||
|
{ value: 38, name: 'rose 2' },
|
||||||
|
{ value: 32, name: 'rose 3' },
|
||||||
|
{ value: 30, name: 'rose 4' },
|
||||||
|
{ value: 28, name: 'rose 5' },
|
||||||
|
{ value: 26, name: 'rose 6' },
|
||||||
|
{ value: 22, name: 'rose 7' },
|
||||||
|
{ value: 18, name: 'rose 8' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.myChart1.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart1.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getEchart2() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById('echart2')).dispose();
|
||||||
|
this.myChart2 = this.$echarts.init(document.getElementById('echart2'));
|
||||||
|
let option = {
|
||||||
|
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
|
||||||
|
yAxis: { type: 'value' },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar',
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.myChart2.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart2.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getEchart3() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById('echart3')).dispose();
|
||||||
|
this.myChart3 = this.$echarts.init(document.getElementById('echart3'));
|
||||||
|
let option = {
|
||||||
|
xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
|
||||||
|
yAxis: { type: 'value' },
|
||||||
|
series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} }]
|
||||||
|
};
|
||||||
|
this.myChart3.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart3.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getEchart4() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$echarts.init(document.getElementById('echart4')).dispose();
|
||||||
|
this.myChart4 = this.$echarts.init(document.getElementById('echart4'));
|
||||||
|
let option = {
|
||||||
|
xAxis: {},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
[10, 40],
|
||||||
|
[50, 100],
|
||||||
|
[40, 20]
|
||||||
|
],
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.myChart4.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart4.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.echart-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue