master
fanluyan
2 years ago
parent
12c56f0402
commit
17a4f09d41
@ -1,11 +1,23 @@
|
||||
# ---> Vue
|
||||
# gitignore template for Vue.js projects
|
||||
#
|
||||
# Recommended template: Node.gitignore
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
docs/_book
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
test/
|
||||
# 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,8 @@
|
||||
module.exports = {
|
||||
// plugins: {
|
||||
// "postcss-pxtorem": {
|
||||
// rootValue: 37.5,
|
||||
// propList: ["*"],
|
||||
// },
|
||||
// },
|
||||
};
|
||||
@ -1,3 +1,24 @@
|
||||
# xy-frontend
|
||||
|
||||
可视化
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
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,61 @@
|
||||
{
|
||||
"name": "xy-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.13",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"swiper": "^10.2.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-awesome-swiper": "^5.0.1",
|
||||
"vue-lazyload": "^1.3.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-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"less": "^4.0.0",
|
||||
"less-loader": "^8.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended",
|
||||
"plugin:prettier/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,10 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
//表格样式
|
||||
.el-table {
|
||||
td.el-table__cell,
|
||||
th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
th.el-table__cell {
|
||||
background: #f8f8f8 !important;
|
||||
}
|
||||
.el-button--text {
|
||||
padding: 0px;
|
||||
}
|
||||
.el-button + .el-button,
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.deleteText {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.deleteText:focus,
|
||||
.deleteText:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
.el-table::before,
|
||||
.el-table__fixed-right::before,
|
||||
.el-table__fixed::before {
|
||||
height: 0px !important;
|
||||
}
|
||||
//分页
|
||||
.pageNation {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
//弹窗
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
.el-dialog {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
.el-button--small {
|
||||
padding: 9px 9px;
|
||||
}
|
||||
.el-button--default,
|
||||
.el-button--primary {
|
||||
width: 80px;
|
||||
}
|
||||
.el-dropdown [disabled] {
|
||||
color: #fff;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-dropdown-menu--small .el-dropdown-menu__item {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
.el-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-image-viewer__actions {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
//Brand @color
|
||||
@color-primary: #169e8c;
|
||||
@color-primary-light: mix(@color-white, @color-primary, 80%);
|
||||
@color-primary-lighter: mix(@color-white, @color-primary, 90%);
|
||||
//Functional @color
|
||||
@color-success: #67c23a;
|
||||
@color-warning: #e6a23c;
|
||||
@color-danger: #f56c6c;
|
||||
@color-info: #909399;
|
||||
@color-red: #f00;
|
||||
//Font color
|
||||
@color-text-primary: #303133;
|
||||
@color-text-regular: #606266;
|
||||
@color-text-secondary: #909399;
|
||||
@color-text-placeholder: #c0c4cc;
|
||||
//Border color
|
||||
@border-color-base: #dcdfe6;
|
||||
@border-color-light: #e4e7ed;
|
||||
@border-color-lighter: #ebeef5;
|
||||
@border-color-extra-light: #f2f6fc;
|
||||
//Background color
|
||||
@color-white: #ffffff;
|
||||
@color-black: #000000;
|
||||
@background-color-base: #f5f7fa;
|
||||
|
||||
//阴影
|
||||
@box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
//网站主题颜色
|
||||
|
||||
//欣影橙色色
|
||||
@orange-color: #f08200;
|
||||
//电网绿色
|
||||
@green-color: #00a096;
|
||||
@ -0,0 +1,47 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 表格样式*/
|
||||
.el-table-column--selection .cell {
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
/* 整个滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* 滚动条上的滚动滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc;
|
||||
/* 关键代码 */
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 32px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,61 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1690188947515') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-paizhao:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.icon-paizhao-xianxing:before {
|
||||
content: "\e8d1";
|
||||
}
|
||||
|
||||
.icon-tuiguanglishitupianjinqun:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-gongsi:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-dianli:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-dianlihangye:before {
|
||||
content: "\e791";
|
||||
}
|
||||
|
||||
.icon-shexiangtoulixian:before {
|
||||
content: "\e7b2";
|
||||
}
|
||||
|
||||
.icon-video-camera:before {
|
||||
content: "\e962";
|
||||
}
|
||||
|
||||
.icon-shexiangtou-lixian:before {
|
||||
content: "\ef1c";
|
||||
}
|
||||
|
||||
.icon-shexiangtou-zaixian:before {
|
||||
content: "\ef1d";
|
||||
}
|
||||
|
||||
.icon-shudianxianlu_2722010801:before {
|
||||
content: "\efed";
|
||||
}
|
||||
|
||||
.icon-tupian_normal:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
Binary file not shown.
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: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 635 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<v-head></v-head>
|
||||
<div class="content-box">
|
||||
<div class="content">
|
||||
<transition name="move" mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vHead from "./header.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
vHead,
|
||||
},
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.wrapper {
|
||||
min-width: 1366px;
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0;
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
//padding-bottom: 30px;
|
||||
-webkit-transition: left 0.3s ease-in-out;
|
||||
transition: left 0.3s ease-in-out;
|
||||
// background: @background-color-base;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//padding: 10px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.wrapper .header {
|
||||
// background: #000;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
line-height: 40px;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.el-menu-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-menu-item [class^="el-icon-"] {
|
||||
width: 12px;
|
||||
}
|
||||
.sidebar .el-menu--horizontal .el-menu-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
font-size: 12px;
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.sidebar .el-menu--horizontal .el-submenu .el-submenu__title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.header-user-con {
|
||||
height: 40px;
|
||||
.user-avator {
|
||||
margin-left: 4px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.user-avator {
|
||||
//display: none;
|
||||
}
|
||||
}
|
||||
.header-right {
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
.wrapper .content-box {
|
||||
top: 41px;
|
||||
//首页
|
||||
.stritleEchartsPage {
|
||||
height: 100%;
|
||||
.exportDialog {
|
||||
.el-dialog {
|
||||
margin-top: 180px !important;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.el-card .el-card__body {
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
}
|
||||
.echart-top {
|
||||
.box-card {
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.bottomM {
|
||||
p {
|
||||
padding: 1.5%;
|
||||
margin: 1.5%;
|
||||
zoom: 0.8;
|
||||
span {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartClass {
|
||||
height: calc(100% - 16px);
|
||||
zoom: 0.6;
|
||||
}
|
||||
.dateBox {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
.el-input__inner {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-input__icon {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//realMonitor实时监控
|
||||
.realMonitor {
|
||||
.monitor-container {
|
||||
.sideBar {
|
||||
width: 200px;
|
||||
.radioFilter {
|
||||
.refresh {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picSetBox {
|
||||
.swiperBox {
|
||||
.title {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
.el-breadcrumb {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.thumb-example {
|
||||
height: calc(100% - 8px);
|
||||
.picTop {
|
||||
height: 70%;
|
||||
}
|
||||
.picBottom {
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.picSetBox {
|
||||
.parameterArea {
|
||||
width: 180px;
|
||||
.setTimebtn .buttonGroup .el-button {
|
||||
width: 84px;
|
||||
}
|
||||
.setfocalLength {
|
||||
.selectChannel {
|
||||
.labelname {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.buttonGroup .el-button {
|
||||
width: 84px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 174px;
|
||||
}
|
||||
}
|
||||
.infoDialog {
|
||||
.el-dialog {
|
||||
width: 80% !important;
|
||||
margin-top: 120px !important;
|
||||
}
|
||||
}
|
||||
.setTimeDialog {
|
||||
.el-dialog {
|
||||
width: 80% !important;
|
||||
margin-top: 120px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
//realTimeSearch历史图片
|
||||
.realTimeSearch {
|
||||
height: auto;
|
||||
.searchMain {
|
||||
.searchBox {
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 188px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pictureBox {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.imgList {
|
||||
width: calc((100% - 50px) / 3);
|
||||
height: auto;
|
||||
margin: 2px;
|
||||
.bigpic {
|
||||
position: relative;
|
||||
img {
|
||||
height: 200px;
|
||||
}
|
||||
.caption {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background: #169e8ca1;
|
||||
width: calc(100% - 8px);
|
||||
padding: 4px;
|
||||
.infoTop {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.infoBottom {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//告警处理
|
||||
.alarmHandBox {
|
||||
height: auto;
|
||||
}
|
||||
.lineInformation,
|
||||
.towerinfobox,
|
||||
.camerChannel,
|
||||
.photoGraphicDevice,
|
||||
.deviceInformation,
|
||||
.deviceReport,
|
||||
.globalBox {
|
||||
height: auto;
|
||||
.el-dialog {
|
||||
width: 100% !important;
|
||||
margin-top: 140px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.setRoadDialog {
|
||||
.el-dialog {
|
||||
margin-top: 140px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
class="sidebar-el-menu"
|
||||
mode="horizontal"
|
||||
router
|
||||
>
|
||||
<template v-for="item in items">
|
||||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index" :key="item.index">
|
||||
<template slot="title">
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title">{{ item.title }}</span>
|
||||
</template>
|
||||
<template v-for="subItem in item.subs">
|
||||
<el-submenu
|
||||
v-if="subItem.subs"
|
||||
:index="subItem.index"
|
||||
:key="subItem.index"
|
||||
>
|
||||
<template slot="title">{{ subItem.title }}</template>
|
||||
<el-menu-item
|
||||
v-for="(threeItem, i) in subItem.subs"
|
||||
:key="i"
|
||||
:index="threeItem.index"
|
||||
>{{ threeItem.title }}</el-menu-item
|
||||
>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
v-else
|
||||
:index="subItem.index"
|
||||
:key="subItem.index"
|
||||
>{{ subItem.title }}</el-menu-item
|
||||
>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index" :key="item.index">
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title">{{ item.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: "/stritl",
|
||||
items: [
|
||||
{
|
||||
icon: "el-icon-s-home",
|
||||
index: "/stritl",
|
||||
title: "首页",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-camera",
|
||||
index: "/realTimeMonitor",
|
||||
title: "实时监控",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "el-icon-film",
|
||||
index: "/pictureRotation",
|
||||
title: "图片轮巡",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-bell",
|
||||
index: "/photoAlarm",
|
||||
title: "告警处理",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "el-icon-search",
|
||||
index: "/realTimeSearch",
|
||||
title: "历史图片",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-files",
|
||||
index: "/property",
|
||||
title: "资产管理",
|
||||
subs: [
|
||||
{
|
||||
index: "/lineInformation",
|
||||
title: "线路信息管理",
|
||||
},
|
||||
{
|
||||
index: "/towerInformation",
|
||||
title: "杆塔信息管理",
|
||||
},
|
||||
|
||||
{
|
||||
index: "/cameraChannel",
|
||||
title: "通道管理",
|
||||
},
|
||||
{
|
||||
index: "/photographicDevice",
|
||||
title: "拍照装置管理",
|
||||
},
|
||||
{
|
||||
index: "/devicePhotoSchedule",
|
||||
title: "拍照时间表设置",
|
||||
},
|
||||
{
|
||||
index: "/deviceReport",
|
||||
title: "装置报表",
|
||||
},
|
||||
{
|
||||
index: "/waterMark",
|
||||
title: "水印下发",
|
||||
},
|
||||
// {
|
||||
// index: "/deviceUpgrade",
|
||||
// title: "装置升级",
|
||||
// },
|
||||
// {
|
||||
// icon: "el-icon-picture-outline",
|
||||
// index: "imageSettings",
|
||||
// title: "图像采集参数设置",
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "el-icon-monitor",
|
||||
index: "/system",
|
||||
title: "系统管理",
|
||||
subs: [
|
||||
{
|
||||
index: "/userManagement",
|
||||
title: "用户管理",
|
||||
},
|
||||
{
|
||||
index: "/globalTools",
|
||||
title: "全局设置",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
items1: [
|
||||
{
|
||||
icon: "el-icon-s-home",
|
||||
index: "stritl",
|
||||
title: "首页",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-camera",
|
||||
index: "/realTimeMonitor",
|
||||
title: "实时监控",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "el-icon-film",
|
||||
index: "/pictureRotation",
|
||||
title: "图片轮巡",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-bell",
|
||||
index: "/photoAlarm",
|
||||
title: "告警处理",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "el-icon-search",
|
||||
index: "/realTimeSearch",
|
||||
title: "历史图片",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-files",
|
||||
index: "/property",
|
||||
title: "资产管理",
|
||||
subs: [
|
||||
{
|
||||
index: "/lineInformation",
|
||||
title: "线路信息管理",
|
||||
},
|
||||
{
|
||||
index: "/towerInformation",
|
||||
title: "杆塔信息管理",
|
||||
},
|
||||
|
||||
{
|
||||
index: "/cameraChannel",
|
||||
title: "通道管理",
|
||||
},
|
||||
{
|
||||
index: "/photographicDevice",
|
||||
title: "拍照装置管理",
|
||||
},
|
||||
{
|
||||
index: "/devicePhotoSchedule",
|
||||
title: "拍照时间表设置",
|
||||
},
|
||||
// {
|
||||
// index: "/deviceUpgrade",
|
||||
// title: "装置升级",
|
||||
// },
|
||||
// {
|
||||
// icon: "el-icon-picture-outline",
|
||||
// index: "imageSettings",
|
||||
// title: "图像采集参数设置",
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: "el-icon-monitor",
|
||||
index: "/system",
|
||||
title: "系统管理",
|
||||
subs: [
|
||||
{
|
||||
index: "/userManagement",
|
||||
title: "用户管理",
|
||||
},
|
||||
// {
|
||||
// index: "/globalTools",
|
||||
// title: "全局设置",
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
items2: [
|
||||
{
|
||||
icon: "el-icon-s-home",
|
||||
index: "stritl",
|
||||
title: "首页",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-camera",
|
||||
index: "/realTimeMonitor",
|
||||
title: "实时监控",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "el-icon-film",
|
||||
index: "/pictureRotation",
|
||||
title: "图片轮巡",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-bell",
|
||||
index: "photoAlarm",
|
||||
title: "告警处理",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-search",
|
||||
index: "/realTimeSearch",
|
||||
title: "历史图片",
|
||||
},
|
||||
{
|
||||
icon: "el-icon-files",
|
||||
index: "/property",
|
||||
title: "资产管理",
|
||||
subs: [
|
||||
{
|
||||
index: "/lineInformation",
|
||||
title: "线路信息管理",
|
||||
},
|
||||
{
|
||||
index: "/towerInformation",
|
||||
title: "杆塔信息管理",
|
||||
},
|
||||
|
||||
// {
|
||||
// index: "/cameraChannel",
|
||||
// title: "通道管理",
|
||||
// },
|
||||
{
|
||||
index: "/photographicDevice",
|
||||
title: "拍照装置管理",
|
||||
},
|
||||
{
|
||||
index: "/devicePhotoSchedule",
|
||||
title: "拍照时间表设置",
|
||||
},
|
||||
// {
|
||||
// index: "/deviceUpgrade",
|
||||
// title: "装置升级",
|
||||
// },
|
||||
// {
|
||||
// icon: "el-icon-picture-outline",
|
||||
// index: "imageSettings",
|
||||
// title: "图像采集参数设置",
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
role: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.setCurrentRoute();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setCurrentRoute() {
|
||||
this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setCurrentRoute();
|
||||
this.role = localStorage.getItem("role");
|
||||
console.log("用户管理");
|
||||
console.log(this.role);
|
||||
|
||||
if (this.role == 0) {
|
||||
this.items = this.items;
|
||||
} else if (this.role == 1) {
|
||||
this.items = this.items1;
|
||||
} else if (this.role == 2) {
|
||||
this.items = this.items2;
|
||||
}
|
||||
|
||||
console.log(this.items);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.sidebar {
|
||||
.el-menu--horizontal {
|
||||
background: #169e8c;
|
||||
|
||||
.el-menu-item {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.el-submenu .el-submenu__title {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.el-submenu__title {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-dropdown-menu__item,
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-menu-item i {
|
||||
color: #666;
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
i {
|
||||
color: #169e8c;
|
||||
}
|
||||
}
|
||||
.el-submenu.is-active .el-submenu__title > i {
|
||||
&:first-child {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu {
|
||||
background: #169e8c;
|
||||
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-menu-item {
|
||||
color: #fff;
|
||||
}
|
||||
.el-submenu .el-submenu__title {
|
||||
color: #fff;
|
||||
}
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #fff;
|
||||
background-color: #128071;
|
||||
border-bottom: 2px solid #128071;
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #fff !important;
|
||||
background-color: #128071;
|
||||
border-bottom: 2px solid #128071;
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item.is-active {
|
||||
border-bottom: 2px solid #128071 !important;
|
||||
color: #fff !important;
|
||||
background-color: #128071 !important;
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.el-submenu.is-active {
|
||||
.el-submenu__title {
|
||||
border-bottom: 2px solid #128071 !important;
|
||||
color: #fff !important;
|
||||
background-color: #128071;
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
border: 3px solid #169e8c !important;
|
||||
}
|
||||
.tags-li.active {
|
||||
border: 1px solid #169e8c;
|
||||
background-color: #169e8c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="logoTitle">视频监控可视化平台</div>
|
||||
<div class="menuBox">
|
||||
<vSidebar></vSidebar>
|
||||
<div class="userInfo">
|
||||
<div class="header-user-con">
|
||||
<!-- 用户头像 -->
|
||||
<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 command="changePwd"> 修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<password-dialog ref="passwordref"></password-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vSidebar from "./Sidebar.vue";
|
||||
import passwordDialog from "../components/passwordDialog.vue";
|
||||
export default {
|
||||
components: {
|
||||
vSidebar,
|
||||
passwordDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userName: localStorage.getItem("userName"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 用户名下拉菜单选择事件
|
||||
handleCommand(command) {
|
||||
switch (command) {
|
||||
case "noticeShow": //公告
|
||||
console.log(command);
|
||||
break;
|
||||
case "changePwd": //修改密码
|
||||
this.$refs.passwordref.display();
|
||||
break;
|
||||
case "loginout": //退出登录
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "退出成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$store.commit("REMOVE_INFO");
|
||||
this.$router.push("/login");
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.header {
|
||||
width: calc(100% - 32px);
|
||||
height: 56px;
|
||||
background: #169e8c;
|
||||
line-height: 56px;
|
||||
padding: 0px 16px;
|
||||
display: flex;
|
||||
.logoTitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.menuBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.userInfo {
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
.user-avator {
|
||||
margin-left: 16px;
|
||||
img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.user-name {
|
||||
margin-left: 8px;
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="psdDialog"
|
||||
title="修改密码"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="420px"
|
||||
>
|
||||
<el-form :model="psdForm" :rules="rules" ref="formInfo" label-position="left" label-width="80px">
|
||||
<el-form-item label="用户名:">
|
||||
<el-input v-model="psdForm.userName" autocomplete="off" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="原密码:">
|
||||
<el-input v-model="psdForm.originalPsd" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码:">
|
||||
<el-input v-model="psdForm.newPsd" autocomplete="off"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="密码:">
|
||||
<el-input v-model="psdForm.password" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { updateUserApi } from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
psdForm: {
|
||||
userName: localStorage.getItem('userName'),
|
||||
originalPsd: "",
|
||||
newPsd: "",
|
||||
password: "",
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
// { min: 6, max: 8, message: '请输入6-8位字符', trigger: 'blur' }
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$set(this.psdForm,'userId',localStorage.getItem('userid'))
|
||||
updateUserApi(this.psdForm)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success("修改成功,请重新登录");
|
||||
this.isShow = false
|
||||
this.$store.commit("REMOVE_INFO");
|
||||
this.$router.push("/login");
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,73 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
//import "./utils/rem"; //设置body文字大小
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
import "../src/assets/css/theme/index.css"; //l绿色主题
|
||||
import ElementUI from "element-ui";
|
||||
//样式
|
||||
import "./assets/css/reset.css"; //默认样式
|
||||
import "./assets/css/global.less"; //全局定义颜色
|
||||
import "./assets/css/element.less"; //全局定义颜色
|
||||
import "./assets/fonts/iconfont.css"; //按钮
|
||||
|
||||
//引入Echarts;
|
||||
import * as echarts from "echarts";
|
||||
Vue.prototype.$echarts = echarts;
|
||||
//引入日期// 注册全局 moment
|
||||
import moment from "moment";
|
||||
Vue.prototype.$moment = moment;
|
||||
import { message } from "@/utils/resetMessage";
|
||||
// import "element-ui/lib/theme-chalk/index.css";
|
||||
Vue.use(ElementUI, {
|
||||
size: "small",
|
||||
});
|
||||
//图片懒加载
|
||||
//引入插件
|
||||
import VueLazyload from "vue-lazyload";
|
||||
//注册插件
|
||||
Vue.use(VueLazyload, {
|
||||
error: require("./assets/img/nodatapic2.jpg"),
|
||||
});
|
||||
/* 引入公共js*/
|
||||
import common from "@/utils/common/common.js";
|
||||
Vue.prototype.common = common;
|
||||
//挂载弹出信息
|
||||
|
||||
Vue.prototype.$message = message;
|
||||
//防抖
|
||||
Vue.directive("noMoreClick", {
|
||||
inserted(el, binding) {
|
||||
el.addEventListener("click", (e) => {
|
||||
el.classList.add("is-disabled");
|
||||
el.disabled = true;
|
||||
setTimeout(() => {
|
||||
el.disabled = false;
|
||||
el.classList.remove("is-disabled");
|
||||
}, 2000); //我这里设置的是2000毫秒也就是2秒
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
//使用钩子函数对路由进行权限跳转
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = `${to.meta.title} | 视频监控可视化平台`;
|
||||
const role = localStorage.getItem("role");
|
||||
const token = localStorage.getItem("token");
|
||||
console.log(role, token);
|
||||
if (!token && to.path !== "/login") {
|
||||
//next("/login");
|
||||
next({
|
||||
path: "/login",
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
@ -0,0 +1,145 @@
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{ path: "/", redirect: "/login" },
|
||||
{
|
||||
path: "/stritl",
|
||||
component: () => import("../components/Home.vue"),
|
||||
meta: { title: "首页" },
|
||||
children: [
|
||||
{
|
||||
path: "/stritl",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "dashboard" */ "../views/homePage/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "首页",
|
||||
icon: "el-icon-s-home",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/realTimeMonitor",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "实时监控",
|
||||
permission: true,
|
||||
icon: "el-icon-camera",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/pictureRotation",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "图片轮巡",
|
||||
permission: true,
|
||||
icon: "el-icon-camera",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/realTimeSearch",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "home" */ "../views/realTimeSearch/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "历史图片",
|
||||
permission: true,
|
||||
icon: "el-icon-camera",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/photoAlarm",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
|
||||
),
|
||||
meta: {
|
||||
title: "告警处理",
|
||||
permission: true,
|
||||
icon: "el-icon-camera",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/userManagement",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
|
||||
),
|
||||
meta: { title: "用户管理", icon: "el-icon-monitor" },
|
||||
},
|
||||
{
|
||||
path: "/globalTools",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
|
||||
),
|
||||
meta: { title: "全局设置" },
|
||||
},
|
||||
{
|
||||
path: "/lineInformation",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/lineInformation/index.vue"
|
||||
),
|
||||
meta: { title: "线路信息管理", icon: "" },
|
||||
},
|
||||
{
|
||||
path: "/towerInformation",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/towerInformation/index.vue"
|
||||
),
|
||||
meta: { title: "杆塔信息管理", icon: "" },
|
||||
},
|
||||
{
|
||||
path: "/cameraChannel",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/cameraChannel/index.vue"
|
||||
),
|
||||
meta: { title: "通道管理", icon: "" },
|
||||
},
|
||||
{
|
||||
path: "/photographicDevice",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/photographicDevice/index.vue"
|
||||
),
|
||||
meta: { title: "拍照装置管理", icon: "" },
|
||||
},
|
||||
{
|
||||
path: "/devicePhotoSchedule",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "tabs" */ "../views/devicePhotoSchedule/index.vue"
|
||||
),
|
||||
meta: { title: "拍照时间表设置", icon: "" },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/login",
|
||||
component: () => import("../views/login/index.vue"),
|
||||
meta: { title: "登录" },
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -0,0 +1,79 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
//用户登录token 存储
|
||||
token: "",
|
||||
userName: "",
|
||||
userid: "",
|
||||
role: "",
|
||||
currentData: "",
|
||||
channelId: "",
|
||||
termId: "",
|
||||
protocol: "",
|
||||
cmdId: "",
|
||||
channelIdList: [],
|
||||
},
|
||||
getters: {
|
||||
token: (state) => state.token,
|
||||
userName: (state) => state.userName,
|
||||
role: (state) => state.role,
|
||||
},
|
||||
mutations: {
|
||||
//点击获取的左侧列表
|
||||
currentData(state, currentData) {
|
||||
state.currentData = currentData;
|
||||
console.log("保存起来currentData", state.currentData);
|
||||
localStorage.setItem("currentData", JSON.stringify(currentData));
|
||||
},
|
||||
|
||||
channelId(state, channelId) {
|
||||
state.channelId = channelId;
|
||||
console.log("channelId", state.channelId);
|
||||
localStorage.setItem("channelId", JSON.stringify(channelId));
|
||||
},
|
||||
termId(state, termId) {
|
||||
state.termId = termId;
|
||||
console.log("termId", state.termId);
|
||||
localStorage.setItem("termId", JSON.stringify(termId));
|
||||
},
|
||||
|
||||
protocol(state, protocol) {
|
||||
state.protocol = protocol;
|
||||
console.log("protocol", state.protocol);
|
||||
localStorage.setItem("protocol", JSON.stringify(protocol));
|
||||
},
|
||||
cmdId(state, cmdId) {
|
||||
state.cmdId = cmdId;
|
||||
console.log("protocol", state.cmdId);
|
||||
localStorage.setItem("protocol", JSON.stringify(cmdId));
|
||||
},
|
||||
channelIdList(state, channelIdList) {
|
||||
state.channelIdList = channelIdList;
|
||||
console.log("channelIdList", state.channelIdList);
|
||||
localStorage.setItem("channelIdList", JSON.stringify(channelIdList));
|
||||
},
|
||||
|
||||
SET_TOKEN(state, token) {
|
||||
state.token = token;
|
||||
localStorage.setItem("token", state.token);
|
||||
},
|
||||
SET_USERINFO(state, val) {
|
||||
state.userName = val.userName;
|
||||
state.userid = val.id;
|
||||
state.role = val.role;
|
||||
localStorage.setItem("userName", state.userName);
|
||||
localStorage.setItem("userid", state.userid);
|
||||
localStorage.setItem("role", state.role);
|
||||
},
|
||||
//退出清除locastorge
|
||||
REMOVE_INFO(state) {
|
||||
localStorage.clear();
|
||||
},
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
});
|
||||
@ -0,0 +1,660 @@
|
||||
import request from "../request";
|
||||
//获取登录
|
||||
export function loginJoggle(data) {
|
||||
return request({
|
||||
url: "/api/login",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//获取装置总数图表
|
||||
export function getTermStatistics(data) {
|
||||
return request({
|
||||
url: "/api/getTermStatistics",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
//获取一周的装置告警
|
||||
export function getWeekAlarmStatistics(data) {
|
||||
return request({
|
||||
url: "/api/getWeekAlarmStatistics",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
//获取当天告警分类统计
|
||||
export function getTodayAlarmStatistics(data) {
|
||||
return request({
|
||||
url: "/api/getTodayAlarmStatistics",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
//首页查看数据
|
||||
export function getOnlineTerminalList(data) {
|
||||
return request({
|
||||
url: "/api/getOnlineTerminalList",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
//导出数据
|
||||
export function getOnlineTerminalListExcel() {
|
||||
return request({
|
||||
url: "/api/getOnlineTerminalListExcel",
|
||||
method: "post",
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
|
||||
//修改用户
|
||||
export function updateUserApi(data) {
|
||||
return request({
|
||||
url: "/api/updateUser",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//实时监控
|
||||
//获取线路树状结构
|
||||
export function getdyTreeListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getdyTreeList",
|
||||
method: "get",
|
||||
params: data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//获取所有杆塔下的图片列表，实时监控
|
||||
|
||||
export function getTowerAndPhotoList(data) {
|
||||
return request({
|
||||
url: "/api/getTowerAndPhotoList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//获取通道
|
||||
export function getChannelByTermidJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getChannelByTermid",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//获取图片接口
|
||||
export function getTerminalPhotoListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTerminalPhotoList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//判断装置是否在线
|
||||
export function getTermStatus(data) {
|
||||
return request({
|
||||
url: "/api/getTermStatus",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//统一调用接口命令
|
||||
|
||||
export function setTermCamera(data) {
|
||||
return request({
|
||||
url: "/api/setTermCamera",
|
||||
method: "post",
|
||||
data,
|
||||
// headers: {
|
||||
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
// },
|
||||
});
|
||||
}
|
||||
//统一返回数据
|
||||
export function getTermCameraRequest(data) {
|
||||
return request({
|
||||
url: "/api/getTermCameraRequest",
|
||||
method: "post",
|
||||
data,
|
||||
// headers: {
|
||||
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
// },
|
||||
});
|
||||
}
|
||||
|
||||
//手动拍 获取装置状态
|
||||
export function getTakePicStatusJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTakePicStatus",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
|
||||
//手动拍照获取最新图片
|
||||
export function getTakePicPhotoStatusJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTakePicPhotoStatus",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
export function getDeviceList(data) {
|
||||
return request({
|
||||
url: "/api/getTerminalStatus",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//获取最新装置信息aaa
|
||||
export function getinfoStatus(data) {
|
||||
return request({
|
||||
url: "/api/getLastTermInfo",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//获取最新装置信息
|
||||
export function getNewDeviceList(data) {
|
||||
return request({
|
||||
url: "/api/getLastedTerminalStatus",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//声光报警
|
||||
export function alarmMarkJoggle(data) {
|
||||
return request({
|
||||
url: "/api/alarmMark",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取GPS位置
|
||||
export function getTermGPSJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTermGPS",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//setTermGPS 开启关闭gps
|
||||
export function setTermGPSJoggle(data) {
|
||||
return request({
|
||||
url: "/api/setTermGPS",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//获取GPS位置触发
|
||||
export function getTermGPSPosition(data) {
|
||||
return request({
|
||||
url: "/api/getTermGPSPosition",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 获取GPS位置
|
||||
|
||||
export function getTermLastGPSPosition(data) {
|
||||
return request({
|
||||
url: "/api/getTermLastGPSPosition",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//图片轮巡
|
||||
//获取图片轮巡接口
|
||||
export function getPictureList(data) {
|
||||
return request({
|
||||
url: "/api/getPhotoBanner",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//历史图片
|
||||
//获取电压-线路-杆塔等信息
|
||||
export function getSearchInfo(data) {
|
||||
return request({
|
||||
url: "/api/getLineAndGt",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//获取实时图片数据
|
||||
export function getRealtimePhoto(data) {
|
||||
return request({
|
||||
url: "/api/getPhotoList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//告警功能
|
||||
//获取告警列表
|
||||
export function getAlarmList(data) {
|
||||
return request({
|
||||
url: "/api/getTerminalAlarmList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//获取告警label
|
||||
export function getAlarmTypeList(data) {
|
||||
return request({
|
||||
url: "/api/getAlarmTypeList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//已读未读
|
||||
export function readAlarm(data) {
|
||||
return request({
|
||||
url: "/api/readAlarm",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//手动拍照
|
||||
export function takePicJoggle(data) {
|
||||
return request({
|
||||
url: "/api/takePic",
|
||||
method: "get",
|
||||
|
||||
params: data,
|
||||
// data,
|
||||
// headers: {
|
||||
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
// },
|
||||
});
|
||||
}
|
||||
|
||||
//用户管理
|
||||
//用户列表查询
|
||||
export function getUserList(data) {
|
||||
return request({
|
||||
url: "/api/userList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//新增用户
|
||||
export function addUserApi(data) {
|
||||
return request({
|
||||
url: "/api/addUser",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//删除用户
|
||||
export function delUserApi(data) {
|
||||
return request({
|
||||
url: "/api/deleteUser",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//设置告警可信度
|
||||
export function updateAlarmTypeList(data) {
|
||||
return request({
|
||||
url: "/api/updateAlarmTypeList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
} //全局设置线缆绘制
|
||||
export function getMarkEnableStatus(data) {
|
||||
return request({
|
||||
url: "/api/getMarkEnableStatus",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//全局更新设置线缆绘制
|
||||
export function updateMarkEnableStatus(data) {
|
||||
return request({
|
||||
url: "/api/updateMarkEnableStatus",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//全局设置通道
|
||||
|
||||
export function updateAlarmChannel(data) {
|
||||
return request({
|
||||
url: "/api/updateAlarmChannel",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//获取电压等级列表
|
||||
export function getdyListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getdyList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//1.线路列表信息
|
||||
export function getLineListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getLineList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//2.添加单个或者多个线路信息
|
||||
export function addLineJoggle(data) {
|
||||
return request({
|
||||
url: "/api/addLine",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//3.删除新路信息
|
||||
export function deleteLineJoggle(data) {
|
||||
return request({
|
||||
url: "/api/deleteLine",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//4.修改信息
|
||||
export function updateLineJoggle(data) {
|
||||
return request({
|
||||
url: "/api/updateLine",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//杆塔信息
|
||||
//1.获取杆塔列表
|
||||
export function getTowerListApi(data) {
|
||||
return request({
|
||||
url: "/api/getTowerList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//2.获取线路编号列表
|
||||
export function getLineListApi(data) {
|
||||
return request({
|
||||
url: "/api/getLineList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//3.新增杆塔信息
|
||||
export function addTowerApi(data) {
|
||||
return request({
|
||||
url: "/api/addTower",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//4.修改杆塔信息
|
||||
export function updateTowerApi(data) {
|
||||
return request({
|
||||
url: "/api/updateTower",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//5.删除杆塔信息
|
||||
export function delTowerApi(data) {
|
||||
return request({
|
||||
url: "/api/deleteTower",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//通道管理
|
||||
//1.获取通道列表
|
||||
export function getChannelListapi(data) {
|
||||
return request({
|
||||
url: "/api/getChannelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//2.新增通道
|
||||
export function addChannelapi(data) {
|
||||
return request({
|
||||
url: "/api/addChannelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//3.删除通道
|
||||
export function deleteChannelapi(data) {
|
||||
return request({
|
||||
url: "/api/deleteChannelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//4.修改通道
|
||||
export function updateChannelapi(data) {
|
||||
return request({
|
||||
url: "/api/updateChannelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//拍照装置管理 接口增删改查
|
||||
//获取列表
|
||||
export function getTerminalJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTerminalList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//添加设备信息
|
||||
export function addTerminalJoggle(data) {
|
||||
return request({
|
||||
url: "/api/addTerminal",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//添加设备---获取-线路-杆塔
|
||||
export function getLineAndGtInfo(data) {
|
||||
return request({
|
||||
url: "/api/getLineAndGtList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//修改设备信息
|
||||
export function updateTerminalJoggle(data) {
|
||||
return request({
|
||||
url: "/api/updateTerminal",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//删除设备信息
|
||||
export function deleteTerminalJoggle(data) {
|
||||
return request({
|
||||
url: "/api/deleteTerminal",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//导出数据
|
||||
|
||||
export function getTerminalListExcel() {
|
||||
return request({
|
||||
url: "/api/getTerminalListExcel",
|
||||
method: "post",
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
//获取所有通道列表
|
||||
|
||||
export function getAllChannelListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getAllChannelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//规约版本
|
||||
export function getProtocolList(data) {
|
||||
return request({
|
||||
url: "/api/getProtocolList",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
//获取通道的接口
|
||||
|
||||
export function getChannelListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getChannelByTermid",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//装置复位
|
||||
export function resetTerminalApi(data) {
|
||||
return request({
|
||||
url: "/api/resetTerminal",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//图像参数--获取图像分辨率
|
||||
export function getResolutionRatio(data) {
|
||||
return request({
|
||||
url: "/api/getResolutionList",
|
||||
method: "post",
|
||||
data,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
||||
},
|
||||
});
|
||||
}
|
||||
//获取设备接口
|
||||
|
||||
export function getCoordinate(data) {
|
||||
return request({
|
||||
url: "/api/getCoordinate",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//绘制坐标保存
|
||||
|
||||
export function updateCoordinate(data) {
|
||||
return request({
|
||||
url: "/api/updateCoordinate",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//拍照时间表设置
|
||||
//1.获取任务规则列表接口
|
||||
export function getScheduleRulelListJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getScheduleRulelList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//2.新增任务规则
|
||||
export function addScheduleRulel(data) {
|
||||
return request({
|
||||
url: "/api/addSchelduleRuleList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//3.删除任务规则
|
||||
export function deleteScheduleRulel(data) {
|
||||
return request({
|
||||
url: "/api/deleteSchelduleRule",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//4.修改任务规则
|
||||
export function updateScheduleRulel(data) {
|
||||
return request({
|
||||
url: "/api/updateSchelduleRule",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//5.获取所有通道
|
||||
export function getScheduleRulelAccessList(data) {
|
||||
return request({
|
||||
url: "/api/getChannelTreeList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//6.设置时间表通道
|
||||
export function setScheduleRulel(data) {
|
||||
return request({
|
||||
url: "/api/relateSchelduleRule",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//7.查询设备时间表
|
||||
export function getSchedulenr(data) {
|
||||
return request({
|
||||
url: "/api/getChannelSchelduleRule",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//根据通道编号获取设备列表
|
||||
export function getTermListByChannelJoggle(data) {
|
||||
return request({
|
||||
url: "/api/getTermListByChannel ",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="addchannelDialog"
|
||||
:title="title"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="470px"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
ref="formInfo"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
:model="formdata"
|
||||
>
|
||||
<el-form-item label="通道名称：" prop="channelname">
|
||||
<el-input v-model="formdata.channelname" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="通道编号：" prop="id" :error="errorMsg">
|
||||
<el-input-number
|
||||
v-model="formdata.id"
|
||||
:disabled="title == '修改' ? true : false"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="分辨率高：" prop="maxResolutionHeight">
|
||||
<el-input-number
|
||||
v-model="formdata.maxResolutionHeight"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="分辨率宽：" prop="maxResolutionWidth">
|
||||
<el-input-number
|
||||
v-model="formdata.maxResolutionWidth"
|
||||
></el-input-number>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="状态：" prop="status" v-if="title == '修改'">
|
||||
<el-switch
|
||||
v-model="formdata.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { addChannelapi, updateChannelapi } from "@/utils/api/index";
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
errorMsg: "",
|
||||
formdata: {},
|
||||
rules: {
|
||||
channelname: [
|
||||
{ required: true, message: "请输入名称", trigger: "blur" },
|
||||
],
|
||||
id: [{ required: true, message: "请输入通道编号", trigger: "blur" }],
|
||||
// maxResolutionHeight: [
|
||||
// { required: true, message: "请输入分辨率高", trigger: "blur" },
|
||||
// ],
|
||||
// maxResolutionWidth: [
|
||||
// { required: true, message: "请输入分辨率宽", trigger: "blur" },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//判断
|
||||
getdataform(val) {
|
||||
console.log(val);
|
||||
if (val == null) {
|
||||
return (this.formdata = {});
|
||||
}
|
||||
//this.formdata = val;
|
||||
this.formdata = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title == "新增") {
|
||||
let formArr = [];
|
||||
formArr.push(this.formdata);
|
||||
addChannelapi({ list: formArr })
|
||||
.then((res) => {
|
||||
//this.errorMsg = "";
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$parent.deviceList();
|
||||
this.isShow = false;
|
||||
} else {
|
||||
//this.errorMsg = res.msg;
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
updateChannelapi(this.formdata)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.$parent.deviceList();
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error("修改失败");
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addchannelDialog {
|
||||
.el-form-item {
|
||||
.el-input,
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="camerChannel">
|
||||
<div class="deviceBox">
|
||||
<div class="deviceBtnGroup">
|
||||
<h4>通道管理</h4>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click.native.stop="handleAdddevice()"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="deviceTable">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="deviceTableData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<!-- <el-table-column type="index" width="55"> </el-table-column>
|
||||
<el-table-column type="selection" width="55"> </el-table-column> -->
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column
|
||||
label="通道名称"
|
||||
show-overflow-tooltip
|
||||
prop="channelname"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="通道编号"
|
||||
show-overflow-tooltip
|
||||
prop="id"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="分辨率高"
|
||||
show-overflow-tooltip
|
||||
prop="maxResolutionHeight"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="分辨率宽"
|
||||
show-overflow-tooltip
|
||||
prop="maxResolutionWidth"
|
||||
></el-table-column>
|
||||
<el-table-column label="状态" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
disabled
|
||||
></el-switch> -->
|
||||
<el-tag
|
||||
:type="scope.row.status == 1 ? 'warning' : 'success'"
|
||||
effect="dark"
|
||||
>
|
||||
{{ scope.row.status == 1 ? "开启中" : "已关闭" }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.stop="handleResive(scope.row)"
|
||||
type="text"
|
||||
>修改</el-button
|
||||
>
|
||||
|
||||
<!-- <el-button type="text" class="deleteText" @click.native.stop="handleDelete(scope.row)" >删除</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增时间表 -->
|
||||
<addChannelDialog
|
||||
:title="title"
|
||||
ref="addChannelDialogref"
|
||||
></addChannelDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import addChannelDialog from "./components/addChannelDialog.vue";
|
||||
import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addChannelDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "", //弹窗标题
|
||||
deviceTableData: [],
|
||||
//multipleSelection: [], //获取当前选中
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.deviceList();
|
||||
},
|
||||
methods: {
|
||||
//获取线路列表数据
|
||||
deviceList() {
|
||||
getChannelListapi({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
})
|
||||
.then((res) => {
|
||||
this.deviceTableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//点击行选中
|
||||
handleRowClick(row, column, event) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
},
|
||||
//获取选中的行
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
|
||||
// 新建
|
||||
handleAdddevice() {
|
||||
this.title = "新增";
|
||||
this.$refs.addChannelDialogref.display();
|
||||
this.$refs.addChannelDialogref.getdataform(null);
|
||||
},
|
||||
|
||||
//修改
|
||||
handleResive(data) {
|
||||
this.title = "修改";
|
||||
this.$refs.addChannelDialogref.display();
|
||||
this.$refs.addChannelDialogref.getdataform(data);
|
||||
},
|
||||
|
||||
//删除数据
|
||||
handleDelete(data) {
|
||||
let deleteArr = [];
|
||||
deleteArr.push({
|
||||
id: data.id,
|
||||
});
|
||||
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteChannelapi({ list: deleteArr }).then((res) => {
|
||||
this.deviceList(); //刷新
|
||||
});
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.deviceList();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.deviceList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.camerChannel {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
|
||||
.deviceBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.deviceBtnGroup {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.deviceTable {
|
||||
margin-top: 16px;
|
||||
height: calc(100% - 48px);
|
||||
//background: #fcc;
|
||||
.el-tag--dark.el-tag--success {
|
||||
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
.el-tag--dark.el-tag--warning {
|
||||
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="addtowerDialogline"
|
||||
title="新增杆塔"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="420px"
|
||||
@close="handleclose"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="92px"
|
||||
ref="formLineInfo"
|
||||
:rules="rules"
|
||||
:model="formdata"
|
||||
>
|
||||
<el-form-item label="线路名称：" prop="lineId">
|
||||
<el-input
|
||||
v-model="formdata.lineId"
|
||||
autocomplete="off"
|
||||
:disabled="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔名称：" prop="towerName">
|
||||
<el-input v-model="formdata.towerName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔地址：" prop="address">
|
||||
<el-input v-model="formdata.address" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { addTowerApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
lineDialogTitle: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
formdata: {},
|
||||
dyOptions: "",
|
||||
rules: {
|
||||
towerName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入杆塔名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// address: [
|
||||
// { required: true, message: "请输入杆塔地址", trigger: "blur" },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//判断
|
||||
getdataform(val) {
|
||||
//this.formdata = val;
|
||||
this.formdata = JSON.parse(JSON.stringify(val));
|
||||
this.formdata.lineId = val.name;
|
||||
},
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formLineInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
// 走保存请求
|
||||
|
||||
addTowerApi({
|
||||
list: [
|
||||
{
|
||||
lineId: this.formdata.id,
|
||||
name: this.formdata.towerName,
|
||||
address: this.formdata.address,
|
||||
},
|
||||
],
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "新增杆塔成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$parent.lineList();
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
handleclose() {
|
||||
this.$parent.lineList();
|
||||
},
|
||||
},
|
||||
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addtowerDialogline {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="lineInformation">
|
||||
<div class="lineBox">
|
||||
<div class="lineBtnGroup">
|
||||
<h4>线路信息管理</h4>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAddLine()"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="searchBox">
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formdata.search"
|
||||
placeholder="请输入线路名称或公司名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="lineTable">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="lineTableData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
v-loading="loading"
|
||||
highlight-current-row
|
||||
:row-key="getRowKeys"
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55"> </el-table-column> -->
|
||||
<!-- <el-table-column type="index" width="55"> </el-table-column> -->
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column label="公司名称" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.bsManufacturer
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="dyLevelname"
|
||||
label="电压等级名称"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="id"
|
||||
label="线路编号"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="线路名称"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="是否启用"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status == 1 ? "已启用" : "未启用" }}</template
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.stop="handleResive(scope.row)"
|
||||
type="text"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button @click.native.stop="handleTower(scope.row)" type="text"
|
||||
>新增杆塔</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
class="deleteText"
|
||||
@click.native.stop="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增线路 -->
|
||||
<add-lineDialog
|
||||
:lineDialogTitle="lineDialogTitle"
|
||||
ref="addlineDialogref"
|
||||
></add-lineDialog>
|
||||
<!-- 新增杆塔 -->
|
||||
<add-towerDialog ref="addTowerDialogref"></add-towerDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
|
||||
import addLineDialog from "./components/addLineDialog.vue";
|
||||
import addTowerDialog from "./components/addTowerDialog.vue";
|
||||
export default {
|
||||
components: {
|
||||
addLineDialog,
|
||||
addTowerDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineDialogTitle: "", //弹窗标题
|
||||
lineTableData: [],
|
||||
//multipleSelection: [], //获取当前选中
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
loading: true,
|
||||
formdata: {
|
||||
search: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
document.onkeydown = function (e) {
|
||||
var key = window.event.keyCode;
|
||||
if (key === 13) {
|
||||
that.onSubmit(); // 触发事件
|
||||
}
|
||||
};
|
||||
// console.log(this.$route.query);
|
||||
// this.formdata.search = this.$route.query.lineName;
|
||||
// console.log(this.formdata.search);
|
||||
},
|
||||
mounted() {
|
||||
this.lineList();
|
||||
},
|
||||
methods: {
|
||||
getRowKeys(row) {
|
||||
return row.id;
|
||||
},
|
||||
//获取线路列表数据
|
||||
lineList() {
|
||||
this.loading = true;
|
||||
this.$set(this.formdata, "pageindex", this.page);
|
||||
this.$set(this.formdata, "pagesize", this.pageSize);
|
||||
getLineListJoggle(this.formdata)
|
||||
.then((res) => {
|
||||
this.lineTableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//点击行选中
|
||||
handleRowClick(row, column, event) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
},
|
||||
//获取选中的行
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.page = 1;
|
||||
this.lineList();
|
||||
},
|
||||
//重置
|
||||
onReset() {
|
||||
this.formdata = {};
|
||||
this.page = 1;
|
||||
this.pageSize = 20;
|
||||
this.lineList();
|
||||
},
|
||||
// 新建弹窗
|
||||
handleAddLine() {
|
||||
this.lineDialogTitle = "新增";
|
||||
this.$refs.addlineDialogref.display();
|
||||
this.$refs.addlineDialogref.getdataform(null);
|
||||
},
|
||||
|
||||
//handleResive 修改线路数据
|
||||
handleResive(data) {
|
||||
console.log(data);
|
||||
this.lineDialogTitle = "修改";
|
||||
this.$refs.addlineDialogref.display();
|
||||
this.$refs.addlineDialogref.getdataform(data);
|
||||
},
|
||||
//新增杆塔
|
||||
handleTower(data) {
|
||||
console.log(data);
|
||||
this.$refs.addTowerDialogref.display();
|
||||
this.$refs.addTowerDialogref.getdataform(data);
|
||||
},
|
||||
|
||||
//删除数据
|
||||
handleDelete(data) {
|
||||
let deleteArr = [];
|
||||
deleteArr.push({
|
||||
id: data.id,
|
||||
});
|
||||
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteLineJoggle({ list: deleteArr }).then((res) => {
|
||||
this.lineList(); //刷新
|
||||
});
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// this.$message({
|
||||
// duration: 1500,
|
||||
// showClose: true,
|
||||
// type: "info",
|
||||
// message: "已取消删除",
|
||||
// });
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.lineList();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.lineList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.lineInformation {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
.lineBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
.searchBox {
|
||||
margin-top: 8px;
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-form {
|
||||
.dybox {
|
||||
.el-form-item__content {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.xlbox {
|
||||
.el-form-item__content {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lineBtnGroup {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lineTable {
|
||||
//margin-top: 16px;
|
||||
height: calc(100% - 94px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="login-wrap">
|
||||
<p class="blurBox"></p>
|
||||
<div class="loginFilter">
|
||||
<div class="leftPic">
|
||||
<h3>视频监控可视化平台</h3>
|
||||
<p>Video surveillance visualization platform</p>
|
||||
</div>
|
||||
<div class="ms-login">
|
||||
<div class="ms-title">
|
||||
<h3>登录</h3>
|
||||
</div>
|
||||
<el-form
|
||||
:model="userInfo"
|
||||
:rules="rules"
|
||||
ref="loginForm"
|
||||
label-width="0px"
|
||||
class="ms-content"
|
||||
size="medium"
|
||||
>
|
||||
<el-form-item prop="userName">
|
||||
<el-input v-model="userInfo.userName" placeholder="用户名">
|
||||
<span slot="prepend" class="el-icon-user"></span>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
show-password
|
||||
v-model="userInfo.password"
|
||||
@keyup.enter.native="submitForm()"
|
||||
>
|
||||
<span slot="prepend" class="el-icon-lock"></span>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="login-btn">
|
||||
<el-button type="primary" @click="submitForm()">登录</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="webInfo">© 2023 视频监控可视化平台.All right reserved.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from "vuex";
|
||||
import { loginJoggle } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data: function () {
|
||||
return {
|
||||
userInfo: {
|
||||
userName: "",
|
||||
password: "",
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
// { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
token: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapMutations(["SET_TOKEN", "SET_USERINFO"]),
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
loginJoggle(this.userInfo)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
|
||||
this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
|
||||
this.$router.push("/stritl");
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "登录成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
this.$message.error("请输入账号和密码");
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
getLogin() {},
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/img/logo.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
.blurBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.loginFilter {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 12px 0px rgba(51, 51, 51, 0.15);
|
||||
border-radius: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%;-50%);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.leftPic {
|
||||
width: 50%;
|
||||
background: url(../../assets/img/logo.jpg);
|
||||
background-size: 120% 100%;
|
||||
position: relative;
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.ms-login {
|
||||
width: 50%;
|
||||
height: 448px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
|
||||
.ms-title {
|
||||
text-align: center;
|
||||
|
||||
padding: 40px 16px;
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.ms-content {
|
||||
padding: 40px 40px;
|
||||
.el-form-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.verifyItem {
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
text-align: center;
|
||||
button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.webInfo {
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%;-50%);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="baseInforDialog"
|
||||
title="基本信息"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="1280px"
|
||||
>
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.starttime"
|
||||
type="datetime"
|
||||
placeholder="开始日期"
|
||||
value-format="timestamp"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.endtime"
|
||||
type="datetime"
|
||||
default-time="23:59:59"
|
||||
placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
class="ml10"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="listData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column min-width="45" label="序号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="采集时间"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备名称"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备编号"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="装置名称"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="装置型号"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="装置版本号"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="生产厂家"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="生产日期"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="出厂编号"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
formdata: {},
|
||||
listData: [
|
||||
{
|
||||
name: "测试",
|
||||
},
|
||||
{
|
||||
name: "测试2",
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (this.formdata.starttime > this.formdata.endtime) {
|
||||
return this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "开始日期不能大于结束日期",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
this.getlistnr();
|
||||
},
|
||||
//获取数据
|
||||
getlistnr(val) {
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdid;
|
||||
this.loading = true;
|
||||
getLineListJoggle({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.listData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<<<<<<< HEAD
|
||||
<style lang="less">
|
||||
.baseInforDialog {
|
||||
.pageNation {
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
.el-pagination {
|
||||
padding: 0px;
|
||||
.el-select .el-input {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style lang="less" scoped></style>
|
||||
>>>>>>> hn1.0
|
||||
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="gpsSiteDialog"
|
||||
title="GPS位置数据"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="1280px"
|
||||
>
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.starttime"
|
||||
type="datetime"
|
||||
placeholder="开始日期"
|
||||
value-format="timestamp"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.endtime"
|
||||
type="datetime"
|
||||
default-time="23:59:59"
|
||||
placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
class="ml10"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="listData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column min-width="45" label="序号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="采集时间"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备名称"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备编号"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="半径"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="维度"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="经度"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
formdata: {},
|
||||
listData: [
|
||||
{
|
||||
name: "测试",
|
||||
},
|
||||
{
|
||||
name: "测试2",
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (this.formdata.starttime > this.formdata.endtime) {
|
||||
return this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "开始日期不能大于结束日期",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
this.getlistnr();
|
||||
},
|
||||
//获取数据
|
||||
getlistnr(val) {
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdid;
|
||||
this.loading = true;
|
||||
getLineListJoggle({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.listData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<<<<<<< HEAD
|
||||
<style lang="less">
|
||||
.gpsSiteDialog {
|
||||
.pageNation {
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
.el-pagination {
|
||||
padding: 0px;
|
||||
.el-select .el-input {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style lang="less" scoped></style>
|
||||
>>>>>>> hn1.0
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="runStatusDialog"
|
||||
title="装置运行状态"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="1280px"
|
||||
>
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.starttime"
|
||||
type="datetime"
|
||||
placeholder="开始日期"
|
||||
value-format="timestamp"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.endtime"
|
||||
type="datetime"
|
||||
default-time="23:59:59"
|
||||
placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
class="ml10"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="listData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column min-width="45" label="序号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="采集时间"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备名称"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备编号"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="4G信号强度"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="2G信号强度"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="剩余运行内存"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="剩余存储内存"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
formdata: {},
|
||||
listData: [
|
||||
{
|
||||
name: "测试",
|
||||
},
|
||||
{
|
||||
name: "测试2",
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (this.formdata.starttime > this.formdata.endtime) {
|
||||
return this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "开始日期不能大于结束日期",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
this.getlistnr();
|
||||
},
|
||||
//获取数据
|
||||
getlistnr(val) {
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdid;
|
||||
this.loading = true;
|
||||
getLineListJoggle({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.listData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.runStatusDialog {
|
||||
.pageNation {
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
.el-pagination {
|
||||
padding: 0px;
|
||||
.el-select .el-input {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="addtowerDialog"
|
||||
title="修改杆塔"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="470px"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
ref="formInfo"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
:model="formdata"
|
||||
>
|
||||
<el-form-item label="线路名称：" prop="lineId">
|
||||
<el-select v-model="formdata.lineId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in lineOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔名称：" prop="name">
|
||||
<el-input v-model="formdata.towerName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔地址：" prop="address">
|
||||
<el-input v-model="formdata.address" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号：" prop="order">
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="formdata.order"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListApi, addTowerApi, updateTowerApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
lineOptions: [],
|
||||
formdata: {},
|
||||
rules: {
|
||||
towerName: [
|
||||
{ required: true, message: "请输入杆塔名称", trigger: "blur" },
|
||||
],
|
||||
lineId: [
|
||||
{ required: true, message: "请选择线路编号", trigger: "blur" },
|
||||
],
|
||||
// address: [
|
||||
// { required: true, message: "请输入杆塔地址", trigger: "blur" },
|
||||
// ],
|
||||
order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getLineListdata();
|
||||
},
|
||||
methods: {
|
||||
getLineListdata() {
|
||||
getLineListApi({ pageindex: 1, pagesize: 100 })
|
||||
.then((res) => {
|
||||
this.lineOptions = res.data.list;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//判断
|
||||
getdataform(val) {
|
||||
//this.formdata = val;
|
||||
this.formdata.order = 0;
|
||||
this.formdata = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
updateTowerApi({
|
||||
id: this.formdata.towerId,
|
||||
name: this.formdata.towerName,
|
||||
address: null,
|
||||
lineId: this.formdata.lineId,
|
||||
lineName: this.formdata.lineName,
|
||||
order: this.formdata.order,
|
||||
})
|
||||
.then((res) => {
|
||||
this.isShow = false;
|
||||
//this.$message.success("修改成功");
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$parent.terminalList(); //刷新
|
||||
})
|
||||
.catch((err) => {
|
||||
//this.$message.error("修改失败");
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "修改失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addtowerDialog {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
type="card"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-tab-pane label="查询实际参数" name="1">
|
||||
<div class="captureBoxVideo">
|
||||
<div class="flexnr">
|
||||
<div class="wt80">通道:</div>
|
||||
<el-select
|
||||
v-model="selaccess"
|
||||
placeholder="请选择"
|
||||
class="mr20"
|
||||
@change="clearform"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in accesslist"
|
||||
:key="item.channelid"
|
||||
:label="
|
||||
item.alias !== null && item.alias !== ''
|
||||
? item.alias
|
||||
: item.channelname
|
||||
"
|
||||
:value="item.channelid"
|
||||
>
|
||||
{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">视频分辨率:</div>
|
||||
<el-select
|
||||
v-model="capturenr.videoFormat"
|
||||
class="wt280"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ratiolist"
|
||||
:key="item.id"
|
||||
:label="item.id + ' (' + item.name + ')'"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">预置位:</div>
|
||||
<el-input
|
||||
v-model="capturenr.preset"
|
||||
:disabled="true"
|
||||
class="wt280"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">录制时长:</div>
|
||||
<el-input
|
||||
v-model="capturenr.videoTime"
|
||||
:disabled="true"
|
||||
class="wt280"
|
||||
>
|
||||
<template slot="append">s (秒)</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- <el-button
|
||||
class="searchImage"
|
||||
:loading="searchloading"
|
||||
type="primary"
|
||||
@click="inquirebtn()"
|
||||
>查询</el-button
|
||||
> -->
|
||||
<el-button
|
||||
class="searchImage"
|
||||
:loading="searchloading"
|
||||
type="primary"
|
||||
@click="videoSearch()"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设置参数" name="2">
|
||||
<div class="captureBoxVideo">
|
||||
<el-form
|
||||
:model="setForm"
|
||||
:rules="rules"
|
||||
ref="setForm"
|
||||
label-width="120px"
|
||||
class="captureForm"
|
||||
>
|
||||
<el-form-item label="通道" prop="channelId">
|
||||
<el-select
|
||||
v-model="setForm.channelId"
|
||||
placeholder="请选择"
|
||||
class="mr20"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in accesslist"
|
||||
:key="item.channelid"
|
||||
:label="
|
||||
item.alias !== null && item.alias !== ''
|
||||
? item.alias
|
||||
: item.channelname
|
||||
"
|
||||
:value="item.channelid"
|
||||
>
|
||||
{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频分辨率" prop="videoFormat">
|
||||
<el-select
|
||||
v-model="setForm.videoFormat"
|
||||
placeholder="请选择"
|
||||
class="mr20"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ratiolist"
|
||||
:key="item.id"
|
||||
:label="item.id + ' (' + item.name + ')'"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预置位" prop="preset">
|
||||
<el-input-number
|
||||
v-model="setForm.preset"
|
||||
:min="1"
|
||||
:max="255"
|
||||
:disabled="true"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="录制时长 s(秒)" prop="videoTime">
|
||||
<el-input-number
|
||||
v-model="setForm.videoTime"
|
||||
:min="1"
|
||||
:max="100"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-button type="primary" @click="submitbtn('setForm')"
|
||||
>确认</el-button
|
||||
> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="videoSet('setForm')"
|
||||
:loading="setloading"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getChannelListJoggle,
|
||||
getVideoParamApi,
|
||||
setVideoParamApi,
|
||||
getVideoParamnrApi,
|
||||
getResolutionRatio,
|
||||
setTermCamera,
|
||||
getTermCameraRequest,
|
||||
} from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
isShow: false,
|
||||
searchloading: false,
|
||||
setloading: false,
|
||||
activeName: "1", //选项卡
|
||||
accesslist: [], //通道选择器
|
||||
ratiolist: [],
|
||||
hnratiolist: [
|
||||
{
|
||||
id: 1,
|
||||
name: "480P",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "720p",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "1080P",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "QVGA",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "VGA",
|
||||
},
|
||||
], //分辨率
|
||||
selaccess: "", //选中的通道
|
||||
capturenr: {}, //查询后的内容
|
||||
setForm: {
|
||||
preset: 255,
|
||||
}, //设置参数
|
||||
rules: {
|
||||
channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
|
||||
videoTime: [
|
||||
{ required: true, message: "请输入录制时长", trigger: "blur" },
|
||||
],
|
||||
preset: [{ required: true, message: "请输入预置位", trigger: "blur" }],
|
||||
videoFormat: [
|
||||
{ required: true, message: "请选择视频分辨率", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
timer: null,
|
||||
i: 0,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
onlinestatus: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
this.capturenr = {};
|
||||
},
|
||||
//获取设备通道
|
||||
getSingleAccess(val) {
|
||||
this.setForm = {
|
||||
preset: 255,
|
||||
};
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdId;
|
||||
this.onlinestatus = val.onlinestatus;
|
||||
getChannelListJoggle({ termid: this.seltermid })
|
||||
.then((res) => {
|
||||
this.accesslist = res.data.list;
|
||||
this.selaccess = res.data.list[0].channelid;
|
||||
this.$set(this.setForm, "channelId", res.data.list[0].channelid);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//获取分辨率
|
||||
getRatio() {
|
||||
getResolutionRatio({ type: 1 })
|
||||
.then((res) => {
|
||||
this.ratiolist = this.hnratiolist;
|
||||
this.$set(this.setForm, "videoFormat", this.ratiolist[0].id);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
|
||||
//命令调用videoSearch
|
||||
// --act=videoparams [0xD5] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --preset=[Preset No] format=[Video Format: 1 QVGA 2 VGA 3 480p 4 720P 5 1080P] time=[seconds]
|
||||
videoSearch() {
|
||||
if (this.onlinestatus == 1) {
|
||||
this.searchloading = true;
|
||||
let params = [
|
||||
{
|
||||
name: "act",
|
||||
value: "videoparams",
|
||||
},
|
||||
{
|
||||
name: "flag",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: "channel",
|
||||
value: this.selaccess,
|
||||
},
|
||||
{
|
||||
name: "preset",
|
||||
value: 255,
|
||||
},
|
||||
{
|
||||
name: "format",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "time",
|
||||
value: "",
|
||||
},
|
||||
];
|
||||
this.setTermFn(params);
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
videoSet(setForm) {
|
||||
console.log(this.setForm);
|
||||
if (this.onlinestatus == 1) {
|
||||
this.setloading = true;
|
||||
let params = [
|
||||
{
|
||||
name: "act",
|
||||
value: "videoparams",
|
||||
},
|
||||
{
|
||||
name: "flag",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "channel",
|
||||
value: this.setForm.channelId,
|
||||
},
|
||||
{
|
||||
name: "preset",
|
||||
value: 255,
|
||||
},
|
||||
{
|
||||
name: "format",
|
||||
value: this.setForm.videoFormat,
|
||||
},
|
||||
{
|
||||
name: "time",
|
||||
value: this.setForm.videoTime,
|
||||
},
|
||||
];
|
||||
this.setTermFn(params);
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
setTermFn(dataParams) {
|
||||
setTermCamera({
|
||||
termId: this.seltermid,
|
||||
list: dataParams,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.requestid = res.data.requestId;
|
||||
//this.getinfo1();
|
||||
|
||||
clearInterval(this.timer);
|
||||
this.timer = window.setInterval(() => {
|
||||
this.getinfo();
|
||||
this.i++;
|
||||
}, 1000);
|
||||
// this.timer = setInterval(() => {
|
||||
// this.getinfo();
|
||||
// this.i++;
|
||||
// }, 1000);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
getinfo() {
|
||||
getTermCameraRequest({ requestid: this.requestid })
|
||||
.then((res) => {
|
||||
if (res.data.success == 1) {
|
||||
window.clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
this.i = 0;
|
||||
console.log("终止轮询");
|
||||
// && res.data.result == 255
|
||||
this.searchloading = false;
|
||||
this.setloading = false;
|
||||
console.log(JSON.parse(res.data.data));
|
||||
this.capturenr = JSON.parse(res.data.data);
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "信息已更新",
|
||||
type: "success",
|
||||
});
|
||||
} else if (this.i > 9) {
|
||||
window.clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
this.i = 0;
|
||||
this.searchloading = false;
|
||||
this.setloading = false;
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "暂未获取到信息，请稍后再试！！",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch();
|
||||
},
|
||||
clearform() {
|
||||
console.log("清除其他数据");
|
||||
this.capturenr = {};
|
||||
this.setForm = {};
|
||||
this.searchloading = false;
|
||||
this.setloading = false;
|
||||
},
|
||||
clearData() {
|
||||
this.capturenr = {};
|
||||
this.setForm = {};
|
||||
this.searchloading = false;
|
||||
this.setloading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.captureBoxVideo {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 24px;
|
||||
.flexnr {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 18px;
|
||||
.wt80 {
|
||||
text-align: right;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0 12px 0 0;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
display: block;
|
||||
}
|
||||
.mr20 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.searchImage {
|
||||
margin-left: 110px;
|
||||
}
|
||||
.flexno {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 18px;
|
||||
.wt80 {
|
||||
text-align: right;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0 12px 0 0;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
display: block;
|
||||
}
|
||||
.wt280 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.captureForm {
|
||||
.el-form-item__content {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="workStatus"
|
||||
title="工作状态"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="1280px"
|
||||
>
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.starttime"
|
||||
type="datetime"
|
||||
placeholder="开始日期"
|
||||
value-format="timestamp"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker
|
||||
v-model="formdata.endtime"
|
||||
type="datetime"
|
||||
default-time="23:59:59"
|
||||
placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
class="ml10"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="listData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column min-width="45" label="序号">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="采集时间"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备名称"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="设备编号"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="电源电压"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="工作温度"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="电池电量"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="浮充状态"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.name == 0 ? "充电" : "放电"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="工作总时间"
|
||||
min-width="120"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="连续工作时间"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="网络连接状态"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.name == 0 ? "已连接" : "未连接"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
formdata: {},
|
||||
listData: [
|
||||
{
|
||||
name: "测试",
|
||||
},
|
||||
{
|
||||
name: "测试2",
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (this.formdata.starttime > this.formdata.endtime) {
|
||||
return this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "开始日期不能大于结束日期",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
this.getlistnr();
|
||||
},
|
||||
//获取数据
|
||||
getlistnr(val) {
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdid;
|
||||
this.loading = true;
|
||||
getLineListJoggle({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.listData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.getlistnr();
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<<<<<<< HEAD
|
||||
<style lang="less">
|
||||
.workStatus {
|
||||
.pageNation {
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
.el-pagination {
|
||||
padding: 0px;
|
||||
.el-select .el-input {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<style lang="less" scoped></style>
|
||||
>>>>>>> hn1.0
|
||||
@ -0,0 +1,702 @@
|
||||
<template>
|
||||
<div class="photoGraphicDevice">
|
||||
<div class="photoBox">
|
||||
<div class="photoGraphicBtnGroup">
|
||||
<h4>拍照装置管理</h4>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddPhoto()"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-document"
|
||||
@click="handleExport()"
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchBox">
|
||||
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||
<el-form-item label="电压等级" class="dybox">
|
||||
<el-select v-model="formdata.dyId" @change="getSearchxl">
|
||||
<el-option
|
||||
v-for="item in dyOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线路名称" class="xlbox">
|
||||
<el-select
|
||||
v-model="formdata.lineId"
|
||||
@change="getSearchgt"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in xlOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔名称">
|
||||
<el-select v-model="formdata.towerId" filterable>
|
||||
<el-option
|
||||
v-for="item in gtOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否在线" class="isonLineClass">
|
||||
<el-select v-model="formdata.isonline" filterable>
|
||||
<el-option
|
||||
v-for="item in onlineOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formdata.search"
|
||||
placeholder="请输入线路/杆塔/设备编号"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="photoGraphicTable">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="terminalTableData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
v-loading="loading"
|
||||
highlight-current-row
|
||||
:row-key="getRowKeys"
|
||||
>
|
||||
<el-table-column prop="dyName" label="电压等级" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column
|
||||
prop="lineName"
|
||||
label="线路名称"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-link @click.native.stop="handleLine(scope.row)">{{
|
||||
scope.row.lineName
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="towerName"
|
||||
label="杆塔名称"
|
||||
show-overflow-tooltip
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-link @click.native.stop="handleTower(scope.row)">{{
|
||||
scope.row.towerName
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="equipName"
|
||||
label="设备名称"
|
||||
show-overflow-tooltip
|
||||
min-width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cmdId"
|
||||
label="设备编号"
|
||||
show-overflow-tooltip
|
||||
min-width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="protocolName"
|
||||
label="规约名称"
|
||||
show-overflow-tooltip
|
||||
min-width="90"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="isonline"
|
||||
label="是否在线"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.isonline ? "在线" : "离线" }}</template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="hasPan"
|
||||
label="是否带云台"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.hasPan == 1 ? "是" : "否" }}</template
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sim" label="SIM卡号" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="netType"
|
||||
label="网络类型"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.netType == 1"> 移动</span>
|
||||
<span v-if="scope.row.netType == 2"> 联通</span>
|
||||
<span v-if="scope.row.netType == 3"> 电信</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="model" label="装置型号" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bsManufacturer"
|
||||
label="装置厂家"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="workingDate"
|
||||
label="投运日期"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.workingDate == null
|
||||
? ""
|
||||
: $moment(scope.row.workingDate).format("yy-MM-DD")
|
||||
}}</template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="装置状态"
|
||||
show-overflow-tooltip
|
||||
v-if="roleUser != 2"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status == 1 ? "运行中" : "已删除" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="340"
|
||||
v-if="roleUser != 2"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown
|
||||
class="dropgps"
|
||||
trigger="click"
|
||||
@command="
|
||||
(command) => {
|
||||
handleSearchCommand(command, scope.row);
|
||||
}
|
||||
"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
数据查询<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="info">基本信息</el-dropdown-item>
|
||||
<el-dropdown-item command="workStatus"
|
||||
>工作状态</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item command="runStatus"
|
||||
>运行状态</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button
|
||||
@click.native.stop="handleParameterSet(scope.row)"
|
||||
type="text"
|
||||
>参数配置</el-button
|
||||
>
|
||||
<el-button
|
||||
@click.native.stop="handleRevisePhoto(scope.row)"
|
||||
type="text"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
@click.native.stop="handlepicture(scope.row)"
|
||||
>图片标记</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
class="deleteText"
|
||||
@click.native.stop="handleDelete(scope.row)"
|
||||
v-if="scope.row.status == 1"
|
||||
>关闭</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
class="deleteText"
|
||||
@click.native.stop="handleDelete(scope.row)"
|
||||
v-if="scope.row.status == 0"
|
||||
>打开</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="180" v-else>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.stop="handleRevisePhoto(scope.row)"
|
||||
type="text"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
@click.native.stop="handlepicture(scope.row)"
|
||||
>图片标记</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
class="deleteText"
|
||||
@click.native.stop="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<addPhotoDialog
|
||||
:photoDialogTitle="photoDialogTitle"
|
||||
ref="addPhotoDialogref"
|
||||
></addPhotoDialog>
|
||||
|
||||
<pictureTags ref="picturetagsref"></pictureTags>
|
||||
<gps-position ref="gpsdialog_ref"></gps-position>
|
||||
<parameterSetDialog ref="parameterSetref"></parameterSetDialog>
|
||||
<baseInfor ref="baseInfor_ref"></baseInfor>
|
||||
<workStatus ref="workStatus_ref"></workStatus>
|
||||
<runStatus ref="runStatus_ref"></runStatus>
|
||||
<gpsSite ref="gpsSite_ref"></gpsSite>
|
||||
<!-- 新增线路 -->
|
||||
<add-lineDialog ref="addlineDialogref"></add-lineDialog>
|
||||
<towerDialog ref="towerDialogref"></towerDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getTerminalJoggle,
|
||||
deleteTerminalJoggle,
|
||||
getSearchInfo,
|
||||
getTerminalListExcel,
|
||||
} from "@/utils/api/index";
|
||||
import moment from "moment";
|
||||
import addPhotoDialog from "./components/addPhotoDialog.vue";
|
||||
|
||||
import pictureTags from "./components/pictureTags.vue";
|
||||
import gpsPosition from "./components/gpsPosition.vue";
|
||||
import parameterSetDialog from "./components/parameterSetDialog.vue";
|
||||
import baseInfor from "./components/baseInfor.vue";
|
||||
import workStatus from "./components/workStatus.vue";
|
||||
import runStatus from "./components/runStatus.vue";
|
||||
import gpsSite from "./components/gpsSite.vue";
|
||||
import addLineDialog from "./components/addLineDialog.vue";
|
||||
import towerDialog from "./components/towerDialog.vue";
|
||||
export default {
|
||||
components: {
|
||||
addPhotoDialog,
|
||||
pictureTags,
|
||||
gpsPosition,
|
||||
parameterSetDialog,
|
||||
baseInfor,
|
||||
workStatus,
|
||||
runStatus,
|
||||
gpsSite,
|
||||
addLineDialog,
|
||||
towerDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dyOptions: [{ id: -1, name: "全部" }], //电压数据
|
||||
xlOptions: [{ id: -1, name: "全部" }], //线路数据
|
||||
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
|
||||
onlineOptions: [
|
||||
{ id: -1, name: "全部" },
|
||||
{ id: 1, name: "在线" },
|
||||
{ id: 0, name: "离线" },
|
||||
],
|
||||
formdata: {
|
||||
dyId: -1,
|
||||
lineId: -1,
|
||||
towerId: -1,
|
||||
search: "",
|
||||
isonline: -1,
|
||||
},
|
||||
roleUser: "",
|
||||
terminalTableData: [], //表格数据
|
||||
photoDialog: false, //新增弹窗
|
||||
photoDialogTitle: "", //弹窗标题
|
||||
deleteArr: [], //删除数组
|
||||
multipleSelection: [], //当前选中数组
|
||||
formphotoInfo: {}, //弹窗传值
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
loading: true,
|
||||
|
||||
gpsOptions: [
|
||||
{
|
||||
value: "1",
|
||||
label: "GPS关闭",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "GPS开启",
|
||||
},
|
||||
],
|
||||
gpsvalue: "1",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.roleUser = localStorage.getItem("role");
|
||||
console.log(this.roleUser);
|
||||
var that = this;
|
||||
document.onkeydown = function (e) {
|
||||
var key = window.event.keyCode;
|
||||
if (key === 13) {
|
||||
that.onSubmit(); // 触发事件
|
||||
}
|
||||
};
|
||||
console.log(this.$route.query);
|
||||
this.formdata.search = this.$route.query.name;
|
||||
console.log(this.formdata.search);
|
||||
},
|
||||
mounted() {
|
||||
this.getSearchdy();
|
||||
this.terminalList();
|
||||
},
|
||||
methods: {
|
||||
getRowKeys(row) {
|
||||
return row.id;
|
||||
},
|
||||
//点击线路跳转
|
||||
handleLineLink(val) {
|
||||
console.log(val);
|
||||
this.$router.push({
|
||||
path: "/lineInformation",
|
||||
query: { lineName: val.lineName, name: val.towerName },
|
||||
});
|
||||
},
|
||||
//点击杆塔跳转
|
||||
handletowerLink(val) {
|
||||
console.log(val);
|
||||
this.$router.push({
|
||||
path: "/towerInformation",
|
||||
query: { lineName: val.lineName, name: val.towerName },
|
||||
});
|
||||
},
|
||||
//获取电压信息
|
||||
getSearchdy() {
|
||||
getSearchInfo({ type: 1 })
|
||||
.then((res) => {
|
||||
this.dyOptions = [{ id: -1, name: "全部" }];
|
||||
this.dyOptions = this.dyOptions.concat(res.data.list);
|
||||
this.formdata.dyId = this.dyOptions[0].id;
|
||||
this.getSearchxl();
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//获取线路数据
|
||||
getSearchxl() {
|
||||
getSearchInfo({ type: 2, id: this.formdata.dyId })
|
||||
.then((res) => {
|
||||
this.xlOptions = [{ id: -1, name: "全部" }];
|
||||
this.xlOptions = this.xlOptions.concat(res.data.list);
|
||||
this.formdata.lineId = this.xlOptions[0].id;
|
||||
this.getSearchgt();
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//获取杆塔数据
|
||||
getSearchgt() {
|
||||
getSearchInfo({ type: 3, id: this.formdata.lineId })
|
||||
.then((res) => {
|
||||
this.gtOptions = [{ id: -1, name: "全部" }];
|
||||
this.gtOptions = this.gtOptions.concat(res.data.list);
|
||||
this.formdata.towerId = this.gtOptions[0].id;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.page = 1;
|
||||
this.terminalList();
|
||||
},
|
||||
//重置
|
||||
onReset() {
|
||||
this.formdata = {
|
||||
isonline: -1,
|
||||
};
|
||||
|
||||
this.getSearchdy();
|
||||
this.page = 1;
|
||||
this.pageSize = 20;
|
||||
|
||||
this.terminalList();
|
||||
},
|
||||
////获取拍照装置列表数据
|
||||
terminalList() {
|
||||
this.loading = true;
|
||||
this.$set(this.formdata, "pageindex", this.page);
|
||||
this.$set(this.formdata, "pagesize", this.pageSize);
|
||||
getTerminalJoggle(this.formdata)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.terminalTableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击行选中当前行
|
||||
handleRowClick(row, column, event) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
},
|
||||
//获取选中的行
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
//时间转化
|
||||
dateFormat(row, column) {
|
||||
var date = row[column.property];
|
||||
if (date == undefined) {
|
||||
return "";
|
||||
}
|
||||
return moment(date).format("YYYY-MM-DD HH:mm:ss");
|
||||
},
|
||||
// 新建弹窗
|
||||
handleAddPhoto() {
|
||||
this.photoDialogTitle = "新增";
|
||||
this.$refs.addPhotoDialogref.display();
|
||||
this.$refs.addPhotoDialogref.getdataform(null);
|
||||
},
|
||||
//导出
|
||||
handleExport() {
|
||||
window.location.href = "/api/api/getTerminalListExcel";
|
||||
},
|
||||
handleLine(data) {
|
||||
this.$refs.addlineDialogref.display();
|
||||
this.$refs.addlineDialogref.getdataform(data);
|
||||
},
|
||||
handleTower(data) {
|
||||
this.$refs.towerDialogref.display();
|
||||
this.$refs.towerDialogref.getdataform(data);
|
||||
},
|
||||
//handleResive 修改线路数据
|
||||
handleRevisePhoto(data) {
|
||||
this.photoDialogTitle = "修改";
|
||||
this.$refs.addPhotoDialogref.display();
|
||||
this.$refs.addPhotoDialogref.getdataform(data);
|
||||
console.log(data);
|
||||
},
|
||||
|
||||
//线缆绘制
|
||||
handlepicture(data) {
|
||||
console.log(data);
|
||||
this.$refs.picturetagsref.display(data);
|
||||
},
|
||||
//数据查询
|
||||
handleSearchCommand(command, row) {
|
||||
console.log(command, row);
|
||||
switch (command) {
|
||||
case "info":
|
||||
this.$refs.baseInfor_ref.display();
|
||||
break;
|
||||
case "workStatus":
|
||||
this.$refs.workStatus_ref.display();
|
||||
break;
|
||||
case "runStatus":
|
||||
this.$refs.runStatus_ref.display();
|
||||
break;
|
||||
case "GPS":
|
||||
this.$refs.gpsSite_ref.display();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
//参数配置
|
||||
handleParameterSet(data) {
|
||||
this.$refs.parameterSetref.display(data);
|
||||
},
|
||||
|
||||
// //新建弹窗handleAddPhoto
|
||||
// handleAddPhoto() {
|
||||
// this.photoDialog = true;
|
||||
// this.photoDialogTitle = "新增";
|
||||
// },
|
||||
// //修改弹窗handleRevisePhoto
|
||||
// handleRevisePhoto(data) {
|
||||
// this.photoDialog = true;
|
||||
// this.photoDialogTitle = "修改";
|
||||
// this.formphotoInfo = Object.assign({}, data);
|
||||
// },
|
||||
|
||||
//删除数据
|
||||
handleDelete(data) {
|
||||
console.log(data);
|
||||
this.deleteArr.push({
|
||||
termid: data.id,
|
||||
});
|
||||
console.log(this.deleteArr);
|
||||
this.$confirm("确定要关闭该装置?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 行设置向后台请求删除数据
|
||||
deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
|
||||
console.log(res);
|
||||
this.terminalList(); //刷新
|
||||
});
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
type: "success",
|
||||
message: "关闭成功!",
|
||||
showClose: true,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
// this.$message({
|
||||
// duration: 1500,
|
||||
// type: "info",
|
||||
// message: "已取消删除",
|
||||
// showClose: true,
|
||||
// });
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.terminalList(); //刷新
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.terminalList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.photoGraphicDevice {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
.photoBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
.searchBox {
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-form {
|
||||
.dybox {
|
||||
.el-form-item__content {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.xlbox {
|
||||
.el-form-item__content {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
.isonLineClass {
|
||||
.el-form-item__content {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.photoGraphicBtnGroup {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.searchBox {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.photoGraphicTable {
|
||||
// margin-top: 16px;
|
||||
//margin-top: 36px;
|
||||
height: calc(100% - 94px);
|
||||
}
|
||||
.dropgps {
|
||||
color: #169e8c;
|
||||
// margin-left: 16px;
|
||||
// margin-right: 16px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
width: 80px;
|
||||
.el-input__inner {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
color: #169e8c;
|
||||
font-size: 12px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gpsdropbox {
|
||||
.el-select-dropdown__item {
|
||||
line-height: 27px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="buttonBox">
|
||||
<!-- <el-button type="primary" @click="handleDeviceInfo">声光报警 </el-button> -->
|
||||
<el-dropdown class="dropgps" trigger="click" @command="handleCommandWarn">
|
||||
<el-button type="primary">
|
||||
声光报警<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
||||
<el-dropdown-item command="open">开启</el-dropdown-item>
|
||||
<el-dropdown-item command="close">关闭</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import infoDialog from "./infoDialog.vue";
|
||||
import { getTermStatus, alarmMarkJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {
|
||||
// infoDialog,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
termId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
cmdId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
cmdId() {
|
||||
return this.$store.state.cmdId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//声光报警开启关闭
|
||||
handleCommandWarn(command) {
|
||||
switch (command) {
|
||||
case "open": //开启
|
||||
this.handleWarn(1);
|
||||
break;
|
||||
case "close": //关闭
|
||||
this.handleWarn(0);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//声光报警
|
||||
handleWarn(val) {
|
||||
console.log("声光报警");
|
||||
console.log(this.termId);
|
||||
getTermStatus({ termId: this.termId }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.isonline) {
|
||||
alarmMarkJoggle({
|
||||
cmdId: this.cmdId,
|
||||
ctrl: val,
|
||||
termId: this.termId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
if (val == 1) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "声光报警开启成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "声光报警关闭成功",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "声光报警操作失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.picdropStyle,
|
||||
.videodropStyle,
|
||||
.gpsdropStyle {
|
||||
width: 104px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="buttonBox">
|
||||
<!-- 线缆显示 -->
|
||||
<el-dropdown class="dropgps" trigger="click" @command="handleCommandLine">
|
||||
<el-button type="primary">
|
||||
线缆显示<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
||||
<el-dropdown-item command="open">开启</el-dropdown-item>
|
||||
<el-dropdown-item command="close">关闭</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
termId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
cmdId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
cmdId() {
|
||||
return this.$store.state.cmdId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//线缆显示
|
||||
handleCommandLine(command) {
|
||||
switch (command) {
|
||||
case "open": //开启
|
||||
console.log("开启");
|
||||
//console.log(this.$parent.$parent.$refs.carouselpic.a());
|
||||
this.$parent.$parent.$refs.carouselpic.openLine();
|
||||
break;
|
||||
case "close": //关闭
|
||||
console.log("关闭");
|
||||
// this.$refs.carouselpic.handelClear();
|
||||
this.$parent.$parent.$refs.carouselpic.closeLine();
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="buttonBox">
|
||||
<el-button type="primary" @click="handleDeviceInfo">装置信息 </el-button>
|
||||
<info-dialog ref="infodialog_ref"></info-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import infoDialog from "./infoDialog.vue";
|
||||
import { getTermStatus } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {
|
||||
infoDialog,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
termId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
cmdId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
cmdId() {
|
||||
return this.$store.state.cmdId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleDeviceInfo() {
|
||||
this.picLoading = true;
|
||||
getTermStatus({ termId: this.termId }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.isonline) {
|
||||
this.$refs.infodialog_ref.display(this.termId, this.cmdId);
|
||||
this.$refs.infodialog_ref.getinfo();
|
||||
} else {
|
||||
this.picLoading = false;
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="gpsbuttonBox">
|
||||
<el-button type="primary" @click="handleShowGPS">获取GPS位置 </el-button>
|
||||
<el-dropdown class="dropgps" trigger="click" @command="handleCommandGps">
|
||||
<el-button type="primary">
|
||||
GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
||||
<el-dropdown-item command="open">开启GPS</el-dropdown-item>
|
||||
<el-dropdown-item command="close">关闭GPS</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<gps-position ref="gpsdialog_ref"></gps-position>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import infoDialog from "./infoDialog.vue";
|
||||
import gpsPosition from "./gpsPosition.vue";
|
||||
import { getTermStatus, setTermGPSJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {
|
||||
gpsPosition,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
termId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
cmdId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
cmdId() {
|
||||
return this.$store.state.cmdId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//切换gps开启关闭
|
||||
handleCommandGps(command) {
|
||||
switch (command) {
|
||||
case "open": //开启
|
||||
this.changeGPS(1, this.cmdId);
|
||||
break;
|
||||
case "close": //关闭
|
||||
this.changeGPS(0, this.cmdId);
|
||||
break;
|
||||
}
|
||||
},
|
||||
changeGPS(val, cmdid) {
|
||||
console.log(val, cmdid);
|
||||
getTermStatus({ termId: this.termId }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.isonline) {
|
||||
setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (val == 0) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
message: "GPS已关闭",
|
||||
type: "warning",
|
||||
showClose: true,
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
message: "成功开启GPS",
|
||||
type: "success",
|
||||
showClose: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取GPS位置
|
||||
handleShowGPS() {
|
||||
this.$refs.gpsdialog_ref.display(this.cmdId, this.termId);
|
||||
this.$refs.gpsdialog_ref.getgpssql();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.gpsbuttonBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="morePicBox" v-if="isShow">
|
||||
<div class="headTitle">
|
||||
<div class="info">
|
||||
<p>
|
||||
{{ deviceData.linename }} - {{ deviceData.towername }} - ({{
|
||||
deviceData.alias !== null && deviceData.alias !== ""
|
||||
? deviceData.alias
|
||||
: deviceData.channnelname
|
||||
}}) -
|
||||
{{ $moment(deviceData.photoTime).format("YYYY-MM-DD") }}
|
||||
</p>
|
||||
<!-- <p class="timeinfo" v-if="item.mediatype !== null">
|
||||
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
|
||||
</p> -->
|
||||
</div>
|
||||
<div class="closeBox" @click="handleclose">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picmain" v-loading="picLoading">
|
||||
<carouselChart
|
||||
ref="carouselpic"
|
||||
:terminalPhoto="terminalPhoto"
|
||||
:photoNum="photoNum"
|
||||
v-if="terminalPhoto.length > 0"
|
||||
></carouselChart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import carouselChart from "./carouselChart.vue";
|
||||
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {
|
||||
carouselChart,
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
deviceData: "",
|
||||
terminalPhoto: [], //获取装置当前图片数据
|
||||
nopicPath: require("@/assets/img/nopic.jpg"),
|
||||
picLoading: false,
|
||||
photoNum: 10,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
display(data) {
|
||||
this.isShow = true;
|
||||
console.log(data);
|
||||
this.deviceData = data;
|
||||
if (data.photoTime == null) {
|
||||
data.photoTime = new Date().getTime();
|
||||
}
|
||||
this.getTerminalPhotoList(data.channelid, data.photoTime, data.termid);
|
||||
},
|
||||
//获取图片
|
||||
getTerminalPhotoList(channelid, date, termId) {
|
||||
this.terminalPhoto = [];
|
||||
this.picLoading = true;
|
||||
getTerminalPhotoListJoggle({
|
||||
channelid: channelid,
|
||||
time: date,
|
||||
terminalid: termId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.picLoading = false;
|
||||
if (res.data.list.length == 0) {
|
||||
this.terminalPhoto = [
|
||||
{
|
||||
path: this.nopicPath,
|
||||
termId: termId,
|
||||
mediatype: 0,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
this.terminalPhoto = res.data.list;
|
||||
}
|
||||
let newDataList = [];
|
||||
let current = 0;
|
||||
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
|
||||
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
|
||||
if (i % this.photoNum !== 0 || i === 0) {
|
||||
if (!newDataList[current]) {
|
||||
newDataList.push([this.terminalPhoto[i]]);
|
||||
} else {
|
||||
newDataList[current].push(this.terminalPhoto[i]);
|
||||
}
|
||||
} else {
|
||||
current++;
|
||||
newDataList.push([this.terminalPhoto[i]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.terminalPhoto = [...newDataList];
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
handleclose() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.morePicBox {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
//z-index: 99999;
|
||||
.headTitle {
|
||||
height: 40px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.closeBox {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.radioBox {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 68px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.picmain {
|
||||
width: 100%;
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="AreaBox">
|
||||
<div class="areaHead">{{ areaData.cmdid }}</div>
|
||||
<div class="paramsDate">
|
||||
<h3>日历快速查询</h3>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
:picker-options="pickerOptions"
|
||||
@change="changedate"
|
||||
:clearable="false"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="paramsDate">
|
||||
<h3>通道监拍点</h3>
|
||||
<!-- <el-radio-group v-model="selectChannelValue" @input="changeChannelId">
|
||||
<el-radio-button
|
||||
v-for="item in channelListOption"
|
||||
:key="item.channelid"
|
||||
:value="item.channelid"
|
||||
:label="item.channelid"
|
||||
>
|
||||
{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}</el-radio-button
|
||||
>
|
||||
</el-radio-group> -->
|
||||
<el-select
|
||||
v-model="selectChannelValue"
|
||||
placeholder="请选择通道"
|
||||
@change="changeChannelId"
|
||||
ref="multiSelect"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in channelListOption"
|
||||
:key="item.channelid"
|
||||
:label="
|
||||
item.alias !== null && item.alias !== ''
|
||||
? item.alias
|
||||
: item.channelname
|
||||
"
|
||||
:value="item.channelid"
|
||||
>
|
||||
{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="paramsDate setTimebtn">
|
||||
<h3>操作项</h3>
|
||||
<div class="buttonGroup">
|
||||
<takePicButton></takePicButton>
|
||||
<takeVideoButton></takeVideoButton>
|
||||
|
||||
<deviceInfoButton></deviceInfoButton>
|
||||
|
||||
<scheduleButton></scheduleButton>
|
||||
<alarmButton></alarmButton>
|
||||
<cableButton></cableButton>
|
||||
<gpsButton></gpsButton>
|
||||
<el-button type="primary" @click="handlehistoryPic">
|
||||
历史图片</el-button
|
||||
>
|
||||
<el-button type="primary" @click="handleParams"> 参数配置</el-button>
|
||||
<!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
|
||||
>主动拍照
|
||||
</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>
|
||||
<parameterSetDialog ref="parameterSetref"></parameterSetDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import takePicButton from "./takePicButton.vue";
|
||||
import takeVideoButton from "./takeVideoButton.vue";
|
||||
import deviceInfoButton from "./deviceInfoButton.vue";
|
||||
import scheduleButton from "./scheduleButton.vue";
|
||||
import alarmButton from "./alarmButton.vue";
|
||||
import cableButton from "./cableButton.vue";
|
||||
import gpsButton from "./gpsButton.vue";
|
||||
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
|
||||
import { getChannelByTermidJoggle } from "@/utils/api/index";
|
||||
export default {
|
||||
components: {
|
||||
takePicButton,
|
||||
takeVideoButton,
|
||||
deviceInfoButton,
|
||||
scheduleButton,
|
||||
alarmButton,
|
||||
cableButton,
|
||||
gpsButton,
|
||||
parameterSetDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectChannelValue: null, //选中的通道
|
||||
channelListOption: [], //通道数组
|
||||
dateValue: "", //选择日期
|
||||
pickerOptions: {
|
||||
disabledDate(date) {
|
||||
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
||||
},
|
||||
},
|
||||
picLoading: false, //拍照loading
|
||||
selectDyId: "", //获取当前选中的电压线路等信息
|
||||
selectLineId: "",
|
||||
selectTowerId: "",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
areaData: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
areaData() {
|
||||
return this.$store.state.currentData;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getDateTime();
|
||||
},
|
||||
methods: {
|
||||
//获取当前时间
|
||||
getDateTime() {
|
||||
console.log(new Date());
|
||||
this.dateValue = new Date().getTime();
|
||||
console.log(this.dateValue);
|
||||
},
|
||||
//选择时间
|
||||
changedate() {
|
||||
console.log(this.dateValue.getTime());
|
||||
this.$parent.getPhotoList(
|
||||
this.selectChannelValue,
|
||||
this.dateValue,
|
||||
this.areaData.id
|
||||
);
|
||||
},
|
||||
//获取通道的接口
|
||||
getChannelList() {
|
||||
console.log(this.areaData);
|
||||
getChannelByTermidJoggle({ termid: this.areaData.id })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.channelListOption = [
|
||||
{ channelname: "全部", channelid: -1, alias: null },
|
||||
];
|
||||
this.channelListOption = this.channelListOption.concat(res.data.list);
|
||||
console.log(this.channelListOption);
|
||||
|
||||
this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
|
||||
this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
|
||||
this.$store.commit("channelIdList", res.data.list); //将通道保存在vuex中
|
||||
this.$parent.getPhotoList(
|
||||
this.selectChannelValue,
|
||||
this.dateValue,
|
||||
this.areaData.id
|
||||
);
|
||||
this.selectDyId = res.data.dyId;
|
||||
this.selectLineId = res.data.lineId;
|
||||
this.selectTowerId = res.data.towerId;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//切换通道
|
||||
changeChannelId(val) {
|
||||
console.log(val);
|
||||
this.$store.commit("channelId", val); //将currentData保存在vuex中
|
||||
this.$parent.getPhotoList(val, this.dateValue, this.areaData.id);
|
||||
},
|
||||
//历史图片跳转
|
||||
handlehistoryPic() {
|
||||
console.log(this.areaData);
|
||||
console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
|
||||
// console.log(this.zzCmdid, this.selectChannelValue);
|
||||
if (typeof this.dateValue == "number") {
|
||||
this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
|
||||
} else {
|
||||
this.dateValue = this.dateValue.getTime();
|
||||
}
|
||||
this.$router.push({
|
||||
path: "/realTimeSearch",
|
||||
query: {
|
||||
dyId: this.selectDyId,
|
||||
lineId: this.selectLineId,
|
||||
towerId: this.selectTowerId,
|
||||
termId: this.areaData.id,
|
||||
cmdId: this.areaData.cmdid,
|
||||
channelId: this.selectChannelValue,
|
||||
date: this.dateValue,
|
||||
},
|
||||
});
|
||||
},
|
||||
//参数配置
|
||||
handleParams() {
|
||||
console.log(this.areaData);
|
||||
this.$refs.parameterSetref.display(this.areaData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.AreaBox {
|
||||
.areaHead {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #169e8c;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.paramsDate {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.el-radio-button {
|
||||
margin-right: 6px;
|
||||
margin-top: 6px;
|
||||
.el-radio-button__inner {
|
||||
padding: 8px 4px;
|
||||
width: 66px;
|
||||
border-left: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setTimebtn {
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-button {
|
||||
margin-bottom: 8px;
|
||||
width: 104px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="buttonBox">
|
||||
<el-button type="primary" @click="handleSetSchedule">拍照时间表 </el-button>
|
||||
<setschedule ref="setschedule_ref"></setschedule>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getTermStatus } from "@/utils/api/index";
|
||||
import setschedule from "./setschedule.vue";
|
||||
export default {
|
||||
components: { setschedule },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
cmdId() {
|
||||
return this.$store.state.cmdId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSetSchedule() {
|
||||
this.$refs.setschedule_ref.display();
|
||||
// this.$refs.setschedule_ref.getSingleAccess(
|
||||
// this.zztermId,
|
||||
// this.zzCmdid,
|
||||
// this.zzprotocol
|
||||
// );
|
||||
// this.$refs.setschedule_ref.deviceList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
|
||||
>主动拍照
|
||||
</el-button> -->
|
||||
<el-dropdown trigger="click" @command="handleCommandpic">
|
||||
<el-button type="primary" :loading="picLoading">
|
||||
主动拍照<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="picdropStyle">
|
||||
<el-dropdown-item
|
||||
:command="item.channelid"
|
||||
v-for="(item, index) in channelIdList"
|
||||
:key="index"
|
||||
>{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getTermStatus,
|
||||
setTermCamera,
|
||||
getTakePicStatusJoggle,
|
||||
getTakePicPhotoStatusJoggle,
|
||||
} from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picLoading: false,
|
||||
statusTimer: null,
|
||||
statusNum: 0,
|
||||
picPimer: null,
|
||||
picNum: 0,
|
||||
pzchannelId: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
termId: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.channelIdList);
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
|
||||
channelIdList() {
|
||||
return this.$store.state.channelIdList;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCommandpic(command) {
|
||||
console.log(command);
|
||||
this.pzchannelId = command;
|
||||
this.picLoading = true;
|
||||
getTermStatus({ termId: this.termId }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.isonline) {
|
||||
let params = [
|
||||
{
|
||||
name: "act",
|
||||
value: "capture",
|
||||
},
|
||||
{
|
||||
name: "channel",
|
||||
value: command,
|
||||
},
|
||||
{
|
||||
name: "preset",
|
||||
value: 255,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
this.setTermFn(params);
|
||||
} else {
|
||||
this.picLoading = false;
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTakePic() {},
|
||||
//下发命令
|
||||
setTermFn(val) {
|
||||
setTermCamera({
|
||||
termId: this.termId,
|
||||
list: val,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.getTakePicStatus(res.data);
|
||||
clearInterval(this.statusTimer);
|
||||
this.statusTimer = null;
|
||||
this.statusTimer = window.setInterval(() => {
|
||||
this.getTakePicStatus(res.data);
|
||||
this.statusNum++;
|
||||
}, 3000);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//查询命令是否下发成功
|
||||
getTakePicStatus(val) {
|
||||
console.log(val);
|
||||
getTakePicStatusJoggle({
|
||||
requestid: val.requestId,
|
||||
termId: this.termId,
|
||||
photoTime: new Date(val.date).getTime(),
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
//res.data 0 状态未知 1 成功 2失败
|
||||
if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
|
||||
this.clearFn();
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "下发指令超时，请重试！",
|
||||
type: "warning",
|
||||
});
|
||||
} else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
|
||||
this.clearFn();
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "下发指令成功！",
|
||||
type: "success",
|
||||
});
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picPimer = window.setInterval(() => {
|
||||
this.newPicApi(val);
|
||||
this.picNum++;
|
||||
}, 8000);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//获取最新的图片
|
||||
newPicApi(val) {
|
||||
getTakePicPhotoStatusJoggle({
|
||||
requestid: val.requestId,
|
||||
termId: this.termId,
|
||||
photoTime: new Date(val.date).getTime(),
|
||||
}).then((res) => {
|
||||
console.log(res.data);
|
||||
console.log(this.picNum);
|
||||
if (res.data == true && this.picNum < 10) {
|
||||
// console.log(this.$parent.$parent);
|
||||
this.$parent.$parent.getPhotoList(
|
||||
-1,
|
||||
new Date(val.date).getTime(),
|
||||
this.termId
|
||||
); //获取图片列表是传当前设备的 id 和termid
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "已返回最新图片！",
|
||||
type: "success",
|
||||
});
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picNum = 0;
|
||||
console.log("返回最新图片");
|
||||
} else if (res.data == false && this.picNum > 10) {
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picNum = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
clearFn() {
|
||||
clearInterval(this.statusTimer);
|
||||
this.statusTimer = null;
|
||||
this.statusNum = 0;
|
||||
this.picLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="videobtnbox">
|
||||
<!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
|
||||
>主动录像
|
||||
</el-button> -->
|
||||
<el-dropdown trigger="click" @command="handleCommandpic">
|
||||
<el-button type="primary" :loading="picLoading">
|
||||
主动录像<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="picdropStyle">
|
||||
<el-dropdown-item
|
||||
:command="item.channelid"
|
||||
v-for="(item, index) in channelIdList"
|
||||
:key="index"
|
||||
>{{
|
||||
item.alias !== null && item.alias !== ""
|
||||
? item.alias
|
||||
: item.channelname
|
||||
}}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dialog
|
||||
class="videoDialog"
|
||||
title="配置参数"
|
||||
:visible.sync="videoVisible"
|
||||
>
|
||||
<el-form :model="videoForm" label-width="94px" ref="videoRef">
|
||||
<el-form-item label="码流类型">
|
||||
<el-select v-model="videoForm.stream">
|
||||
<el-option label="主码流" value="0"></el-option>
|
||||
<el-option label="从码流" value="1"></el-option>
|
||||
<el-option label="第3码流" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="时间 s(秒)"
|
||||
prop="time"
|
||||
:rules="[
|
||||
{ required: true, message: '时间不能为空' },
|
||||
{ type: 'number', message: '时间必须为数字值' },
|
||||
]"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="videoForm.time"
|
||||
:min="1"
|
||||
:max="60"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="videoVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="anVideoFn">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getTermStatus,
|
||||
setTermCamera,
|
||||
getTakePicStatusJoggle,
|
||||
getTakePicPhotoStatusJoggle,
|
||||
} from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picLoading: false,
|
||||
statusTimer: null,
|
||||
statusNum: 0,
|
||||
picPimer: null,
|
||||
picNum: 0,
|
||||
videoVisible: false,
|
||||
pzchannelId: "",
|
||||
videoForm: {
|
||||
stream: "0",
|
||||
time: 20,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// protocol: {
|
||||
// handler(newVal, oldVal) {},
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
// termId: {
|
||||
// handler(newVal, oldVal) {},
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
// channelId: {
|
||||
// handler(newVal, oldVal) {},
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
computed: {
|
||||
termId() {
|
||||
return this.$store.state.termId;
|
||||
},
|
||||
channelIdList() {
|
||||
return this.$store.state.channelIdList;
|
||||
},
|
||||
protocol() {
|
||||
return this.$store.state.protocol;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleCommandpic(command) {
|
||||
console.log(command);
|
||||
this.pzchannelId = command;
|
||||
this.picLoading = true;
|
||||
getTermStatus({ termId: this.termId }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.isonline) {
|
||||
console.log(this.protocol);
|
||||
if (this.protocol == "65281") {
|
||||
this.videoVisible = true;
|
||||
} else {
|
||||
this.picLoading = true;
|
||||
let params = [
|
||||
{
|
||||
name: "act",
|
||||
value: "capture",
|
||||
},
|
||||
{
|
||||
name: "channel",
|
||||
value: command,
|
||||
},
|
||||
{
|
||||
name: "preset",
|
||||
value: 255,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
this.setTermFn(params);
|
||||
}
|
||||
} else {
|
||||
this.picLoading = false;
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "装置下线，发送指令失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
anVideoFn() {
|
||||
this.$refs.videoRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.videoVisible = false;
|
||||
this.picLoading = true;
|
||||
let params = [
|
||||
{
|
||||
name: "act",
|
||||
value: "capture",
|
||||
},
|
||||
{
|
||||
name: "channel",
|
||||
value: this.pzchannelId,
|
||||
},
|
||||
{
|
||||
name: "preset",
|
||||
value: 255,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "stream",
|
||||
value: this.videoForm.stream,
|
||||
},
|
||||
{
|
||||
name: "videoTime",
|
||||
value: this.videoForm.time,
|
||||
},
|
||||
];
|
||||
this.setTermFn(params);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//下发命令
|
||||
setTermFn(val) {
|
||||
setTermCamera({
|
||||
termId: this.termId,
|
||||
list: val,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.getTakePicStatus(res.data);
|
||||
clearInterval(this.statusTimer);
|
||||
this.statusTimer = null;
|
||||
this.statusTimer = window.setInterval(() => {
|
||||
this.getTakePicStatus(res.data);
|
||||
this.statusNum++;
|
||||
}, 3000);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//查询命令是否下发成功
|
||||
getTakePicStatus(val) {
|
||||
console.log(val);
|
||||
getTakePicStatusJoggle({
|
||||
requestid: val.requestId,
|
||||
termId: this.termId,
|
||||
photoTime: new Date(val.date).getTime(),
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
//res.data 0 状态未知 1 成功 2失败
|
||||
if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
|
||||
this.clearFn();
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "下发指令超时，请重试！",
|
||||
type: "warning",
|
||||
});
|
||||
} else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
|
||||
this.clearFn();
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "下发指令成功！",
|
||||
type: "success",
|
||||
});
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picPimer = window.setInterval(() => {
|
||||
this.newPicApi(val);
|
||||
this.picNum++;
|
||||
}, 8000);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//获取最新的图片
|
||||
newPicApi(val) {
|
||||
getTakePicPhotoStatusJoggle({
|
||||
requestid: val.requestId,
|
||||
termId: this.termId,
|
||||
photoTime: new Date(val.date).getTime(),
|
||||
}).then((res) => {
|
||||
console.log(res.data);
|
||||
if (res.data == true && this.picNum < 10) {
|
||||
// console.log(this.$parent.$parent);
|
||||
this.$parent.$parent.getPhotoList(
|
||||
-1,
|
||||
new Date(val.date).getTime(),
|
||||
this.termId
|
||||
); //获取图片列表是传当前设备的 id 和termid
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "已返回最新视频！",
|
||||
type: "success",
|
||||
});
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picNum = 0;
|
||||
console.log("已返回最新视频！");
|
||||
} else if (res.data == false && this.picNum > 10) {
|
||||
clearInterval(this.picPimer);
|
||||
this.picPimer = null;
|
||||
this.picNum = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
clearFn() {
|
||||
clearInterval(this.statusTimer);
|
||||
this.statusTimer = null;
|
||||
this.statusNum = 0;
|
||||
this.picLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.videobtnbox {
|
||||
.videoDialog {
|
||||
.el-dialog {
|
||||
width: 380px;
|
||||
}
|
||||
.el-input,
|
||||
.el-input-number {
|
||||
width: 214px;
|
||||
}
|
||||
.dialog-footer {
|
||||
.el-button--default,
|
||||
.el-button--primary {
|
||||
width: 80px !important;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="realTimeMonitor" v-loading="mainLoading">
|
||||
<div class="monitor-container">
|
||||
<sideBar ref="sideTree"></sideBar>
|
||||
<div class="picListBox">
|
||||
<div class="previewBox" v-if="LineFlag">
|
||||
<!-- 预览图页面 -->
|
||||
<previewContain ref="previewRef"></previewContain>
|
||||
</div>
|
||||
<div class="previewBox" v-if="towerFlag">
|
||||
<div class="swiperBox" v-loading="swiperLoading">
|
||||
<div class="title">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<carouselChart
|
||||
ref="carouselpic"
|
||||
:terminalPhoto="terminalPhoto"
|
||||
:photoNum="photoNum"
|
||||
v-if="terminalPhoto.length !== 0"
|
||||
></carouselChart>
|
||||
</div>
|
||||
<div class="parameterArea">
|
||||
<parameterArea ref="areaRef"></parameterArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
|
||||
import sideBar from "./components/siderBar";
|
||||
import previewContain from "./components/previewContain";
|
||||
import carouselChart from "./components/carouselChart";
|
||||
import parameterArea from "./components/parameterArea";
|
||||
import morePicPreveiw from "./components/morePicPreveiw";
|
||||
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
LineFlag: false, //如果是线路显示
|
||||
towerFlag: false, //如果杆塔显示
|
||||
mainLoading: false, //全局loading
|
||||
page: 1, // 当前页数
|
||||
towertitle: "", //杆塔名称
|
||||
lineLoading: false, //杆塔loading
|
||||
swiperLoading: false,
|
||||
terminalPhoto: [], //获取装置当前图片数据
|
||||
photoNum: 5,
|
||||
dateValue: "", //当前时间
|
||||
nopicPath: require("@/assets/img/nopic.jpg"),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
treeSelectData: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
sideBar,
|
||||
previewContain,
|
||||
carouselChart,
|
||||
parameterArea,
|
||||
morePicPreveiw,
|
||||
},
|
||||
computed: {
|
||||
treeSelectData() {
|
||||
return this.$store.state.currentData;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
//this.treeSelectData = currentData;
|
||||
//获取当前时间
|
||||
},
|
||||
mounted() {
|
||||
this.mainLoading = true;
|
||||
setTimeout(() => {
|
||||
this.mainLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
getCurrentData(data) {
|
||||
console.log("执行父组件", this.treeSelectData);
|
||||
if (this.treeSelectData.dyValue) {
|
||||
console.log("电压");
|
||||
this.LineFlag = true;
|
||||
this.towerFlag = false;
|
||||
this.lineLoading = true;
|
||||
this.type = 1;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.previewRef.getPicList(
|
||||
this.treeSelectData.id,
|
||||
this.type,
|
||||
this.page
|
||||
);
|
||||
});
|
||||
} else if (this.treeSelectData.bsManufacturer) {
|
||||
console.log("线路");
|
||||
this.LineFlag = true;
|
||||
this.towerFlag = false;
|
||||
this.type = 2;
|
||||
console.log(this.treeSelectData);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.previewRef.getPicList(
|
||||
this.treeSelectData.id,
|
||||
this.type,
|
||||
this.page
|
||||
);
|
||||
});
|
||||
} else {
|
||||
console.log("杆塔");
|
||||
this.LineFlag = false;
|
||||
this.towerFlag = true;
|
||||
|
||||
this.terminalPhoto = [];
|
||||
this.towertitle = this.treeSelectData.name;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.areaRef.getChannelList();
|
||||
});
|
||||
}
|
||||
},
|
||||
getPhotoList(channelId, date, termId) {
|
||||
console.log(channelId, date, termId);
|
||||
this.swiperLoading = true;
|
||||
console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
|
||||
this.terminalPhoto = [];
|
||||
getTerminalPhotoListJoggle({
|
||||
channelid: channelId,
|
||||
time: date,
|
||||
terminalid: termId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.list.length == 0) {
|
||||
this.terminalPhoto = [
|
||||
{
|
||||
path: this.nopicPath,
|
||||
termId: termId,
|
||||
mediatype: 0,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
this.terminalPhoto = res.data.list;
|
||||
}
|
||||
let newDataList = [];
|
||||
let current = 0;
|
||||
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
|
||||
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
|
||||
if (i % this.photoNum !== 0 || i === 0) {
|
||||
if (!newDataList[current]) {
|
||||
newDataList.push([this.terminalPhoto[i]]);
|
||||
} else {
|
||||
newDataList[current].push(this.terminalPhoto[i]);
|
||||
}
|
||||
} else {
|
||||
current++;
|
||||
newDataList.push([this.terminalPhoto[i]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.terminalPhoto = [...newDataList];
|
||||
this.$nextTick(() => {
|
||||
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
|
||||
});
|
||||
|
||||
this.swiperLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击图片列表执行函数
|
||||
jumpTowerPic(data) {
|
||||
console.log("我是从子组件过来的数据");
|
||||
console.log(data);
|
||||
this.$refs.morePicPreveiw_ref.display(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.realTimeMonitor {
|
||||
width: calc(100% - 0px);
|
||||
height: calc(100% - 12px);
|
||||
padding: 12px 0px 0px 0px;
|
||||
background: #ffffff;
|
||||
.monitor-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
.picListBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #dddddd;
|
||||
.previewBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.swiperBox {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.title {
|
||||
height: 32px;
|
||||
padding-left: 12px;
|
||||
line-height: 32px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
//background-color: #169e8cb0;
|
||||
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
|
||||
|
||||
.el-breadcrumb {
|
||||
line-height: 32px;
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__separator {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.parameterArea {
|
||||
width: 220px;
|
||||
padding: 0px 8px;
|
||||
border-left: 1px solid #dddddd;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="addUserDialog"
|
||||
:title="title"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="470px"
|
||||
@close="handleclose"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
ref="formInfo"
|
||||
label-width="100px"
|
||||
:rules="title == '新增' ? rules : xgrules"
|
||||
:model="formdata"
|
||||
>
|
||||
<el-form-item label="用户名：" prop="userName">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="formdata.userName"
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色：" prop="role">
|
||||
<el-select v-model="formdata.role" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleoptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码：" prop="password">
|
||||
<el-input
|
||||
placeholder="请输入密码"
|
||||
v-model="formdata.password"
|
||||
show-password
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { addUserApi, updateUserApi } from "@/utils/api/index";
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roleUser: "",
|
||||
isShow: false,
|
||||
roleoptions: [
|
||||
{
|
||||
value: 1,
|
||||
label: "管理员",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "用户",
|
||||
},
|
||||
],
|
||||
|
||||
formdata: {},
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
],
|
||||
role: [{ required: true, message: "请选择角色", trigger: "blur" }],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
// { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
xgrules: {
|
||||
userName: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
],
|
||||
role: [{ required: true, message: "请选择角色", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//判断
|
||||
getdataform(val) {
|
||||
console.log(val);
|
||||
if (val == null) {
|
||||
return (this.formdata = {
|
||||
role: 2,
|
||||
});
|
||||
}
|
||||
//this.formdata = val;
|
||||
this.formdata = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title == "新增") {
|
||||
addUserApi(this.formdata)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
updateUserApi(this.formdata)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
this.roleUser = localStorage.getItem("role");
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
handleclose() {
|
||||
this.$parent.deviceList();
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addUserDialog {
|
||||
.el-form-item {
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="globalBox">
|
||||
<div class="setBox">
|
||||
<el-card class="box-card globalDrawLine">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>线缆开启关闭</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="lineValue"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
@change="showLine"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card globalDrawLine">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>设置告警通道</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="channel" @change="handleChange">
|
||||
<el-option
|
||||
v-for="item in tdOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card globalprob">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>设置告警可信度</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in probList" :key="index" class="probBox">
|
||||
<label>{{ item.name }}</label>
|
||||
<el-input-number
|
||||
:min="0"
|
||||
:max="110"
|
||||
controls-position="right"
|
||||
v-model="item.prob"
|
||||
placeholder="请输入可信度值"
|
||||
></el-input-number>
|
||||
</div>
|
||||
<el-button class="setbtn" type="primary" @click="setProb"
|
||||
>设置</el-button
|
||||
>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getAlarmTypeList,
|
||||
updateAlarmTypeList,
|
||||
getMarkEnableStatus,
|
||||
updateMarkEnableStatus,
|
||||
updateAlarmChannel,
|
||||
} from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
lineValue: false,
|
||||
lineNum: 0,
|
||||
probList: [],
|
||||
tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
|
||||
channel: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getalarmList();
|
||||
this.getmark();
|
||||
},
|
||||
methods: {
|
||||
//获取图片绘制状态
|
||||
getmark() {
|
||||
getMarkEnableStatus()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.imgMark === 1) {
|
||||
this.lineValue = true;
|
||||
console.log("绘制开启");
|
||||
} else {
|
||||
this.lineValue = false;
|
||||
console.log("绘制关闭");
|
||||
}
|
||||
this.channel = res.data.alarmChannel;
|
||||
console.log(this.channel);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//控制线缆绘制开关
|
||||
showLine(val) {
|
||||
if (val) {
|
||||
this.lineNum = 1;
|
||||
} else {
|
||||
this.lineNum = 0;
|
||||
}
|
||||
updateMarkEnableStatus({
|
||||
status: this.lineNum,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {});
|
||||
console.log(val, this.lineNum, "开关");
|
||||
},
|
||||
//获取装置可信度值
|
||||
getalarmList() {
|
||||
getAlarmTypeList().then((res) => {
|
||||
console.log(res);
|
||||
this.probList = res.data.list;
|
||||
this.tdOptions = [{ id: -1, name: "全部", alias: null }];
|
||||
this.tdOptions = this.tdOptions.concat(res.data.channellist);
|
||||
});
|
||||
},
|
||||
setProb() {
|
||||
console.log(this.probList);
|
||||
updateAlarmTypeList({ list: this.probList })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "告警可信度设置成功",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
//获取告警通道
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
updateAlarmChannel({ channel: this.channel })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "告警通道设置成功",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.globalBox {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
.setBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
.globalDrawLine {
|
||||
width: 200px;
|
||||
height: max-content;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.globalprob {
|
||||
width: 378px;
|
||||
height: max-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.probBox {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
label {
|
||||
width: 138px;
|
||||
}
|
||||
.el-input-number--small {
|
||||
width: 200px;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.setbtn {
|
||||
margin-top: 24px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="usermanagement">
|
||||
<div class="deviceBox">
|
||||
<div class="deviceBtnGroup">
|
||||
<h4>用户管理</h4>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="deviceTable">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="deviceTableData"
|
||||
stripe
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<!-- <el-table-column type="index" width="55"> </el-table-column>
|
||||
<el-table-column type="selection" width="55"> </el-table-column> -->
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column
|
||||
label="用户名"
|
||||
show-overflow-tooltip
|
||||
prop="userName"
|
||||
></el-table-column>
|
||||
<el-table-column label="角色" show-overflow-tooltip prop="role">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.role == 1 ? "管理员" : "用户"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
show-overflow-tooltip
|
||||
prop="createTime"
|
||||
>
|
||||
<template slot-scope="scope">{{
|
||||
$moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss")
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.stop="handleResive(scope.row)"
|
||||
type="text"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
class="deleteText"
|
||||
@click.native.stop="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pageNation">
|
||||
<el-pagination
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
layout="sizes, prev, pager, next, jumper,total"
|
||||
:total="total"
|
||||
background
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增 -->
|
||||
<addUser :title="title" ref="adduserref"></addUser>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import addUser from "./components/addUser.vue";
|
||||
import { getUserList, delUserApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addUser,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "", //弹窗标题
|
||||
deviceTableData: [],
|
||||
//multipleSelection: [], //获取当前选中
|
||||
page: 1, // 当前页数
|
||||
pageSize: 20, // 每页数量
|
||||
total: 0, //总条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.deviceList();
|
||||
},
|
||||
methods: {
|
||||
//获取线路列表数据
|
||||
deviceList() {
|
||||
getUserList({
|
||||
pageindex: this.page,
|
||||
pagesize: this.pageSize,
|
||||
})
|
||||
.then((res) => {
|
||||
this.deviceTableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//点击行选中
|
||||
handleRowClick(row, column, event) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
},
|
||||
//获取选中的行
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
|
||||
// 新建
|
||||
handleAdddevice() {
|
||||
this.title = "新增";
|
||||
this.$refs.adduserref.display();
|
||||
this.$refs.adduserref.getdataform(null);
|
||||
},
|
||||
|
||||
//修改
|
||||
handleResive(data) {
|
||||
this.title = "修改";
|
||||
this.$refs.adduserref.display();
|
||||
this.$refs.adduserref.getdataform(data);
|
||||
},
|
||||
|
||||
//删除数据
|
||||
handleDelete(data) {
|
||||
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
delUserApi({ uid: data.userId }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success("删除成功");
|
||||
this.deviceList(); //刷新
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
//点击分页
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.deviceList();
|
||||
},
|
||||
//每页条数
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.deviceList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.usermanagement {
|
||||
width: calc(100% - 24px);
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px 12px;
|
||||
background: #fff;
|
||||
|
||||
.deviceBox {
|
||||
border: 1px solid #dddddd;
|
||||
height: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.deviceBtnGroup {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.deviceTable {
|
||||
margin-top: 16px;
|
||||
height: calc(100% - 48px);
|
||||
//background: #fcc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="addtowerDialog"
|
||||
:title="title"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="470px"
|
||||
>
|
||||
<el-form
|
||||
label-position="left"
|
||||
ref="formInfo"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
:model="formdata"
|
||||
>
|
||||
<el-form-item label="线路名称：" prop="lineId">
|
||||
<el-select v-model="formdata.lineId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in lineOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔名称：" prop="name">
|
||||
<el-input v-model="formdata.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="杆塔地址：" prop="address">
|
||||
<el-input v-model="formdata.address" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号：" prop="order">
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="formdata.order"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isShow = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getLineListApi, addTowerApi, updateTowerApi } from "@/utils/api/index";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
lineOptions: [],
|
||||
formdata: {},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入杆塔名称", trigger: "blur" }],
|
||||
lineId: [
|
||||
{ required: true, message: "请选择线路编号", trigger: "blur" },
|
||||
],
|
||||
// address: [
|
||||
// { required: true, message: "请输入杆塔地址", trigger: "blur" },
|
||||
// ],
|
||||
order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getLineListdata();
|
||||
},
|
||||
methods: {
|
||||
getLineListdata() {
|
||||
getLineListApi({ pageindex: 1, pagesize: 100 })
|
||||
.then((res) => {
|
||||
this.lineOptions = res.data.list;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//判断
|
||||
getdataform(val) {
|
||||
if (val == null) {
|
||||
return (this.formdata = {
|
||||
order: 0,
|
||||
});
|
||||
}
|
||||
//this.formdata = val;
|
||||
this.formdata = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
// 保存确定操作
|
||||
submitForm() {
|
||||
this.$refs.formInfo.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title == "新增") {
|
||||
let formArr = [];
|
||||
formArr.push(this.formdata);
|
||||
console.log(this.formdata);
|
||||
addTowerApi({ list: formArr })
|
||||
.then((res) => {
|
||||
this.isShow = false;
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$parent.deviceList();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "添加失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log(this.formdata);
|
||||
updateTowerApi(this.formdata)
|
||||
.then((res) => {
|
||||
this.isShow = false;
|
||||
//this.$message.success("修改成功");
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$parent.deviceList();
|
||||
})
|
||||
.catch((err) => {
|
||||
//this.$message.error("修改失败");
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "修改失败",
|
||||
type: "error",
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.addtowerDialog {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue