所有功能
fanluyan
2 years ago
parent
d798f100ee
commit
467b6c887d
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
@ -1,192 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="tags" v-if="showTags">
|
|
||||||
<ul>
|
|
||||||
<li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
|
|
||||||
<router-link :to="item.path" class="tags-li-title"> <i :class="item.icon"></i>{{ item.title }} </router-link>
|
|
||||||
<span class="tags-li-icon" @click="closeTags(index)" v-if="item.path !== '/stritl'"><i class="el-icon-close"></i></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<!-- <div class="tags-close-box">
|
|
||||||
<el-dropdown @command="handleTags">
|
|
||||||
<el-button size="mini" type="primary">
|
|
||||||
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</el-button>
|
|
||||||
<el-dropdown-menu size="small" slot="dropdown">
|
|
||||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import bus from './bus';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tagsList: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isActive(path) {
|
|
||||||
return path === this.$route.fullPath;
|
|
||||||
},
|
|
||||||
// 关闭单个标签
|
|
||||||
closeTags(index) {
|
|
||||||
const delItem = this.tagsList.splice(index, 1)[0];
|
|
||||||
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
|
|
||||||
if (item) {
|
|
||||||
delItem.path === this.$route.fullPath && this.$router.push(item.path);
|
|
||||||
} else {
|
|
||||||
this.$router.push('/');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 关闭全部标签
|
|
||||||
closeAll() {
|
|
||||||
this.tagsList = [];
|
|
||||||
this.$router.push('/');
|
|
||||||
},
|
|
||||||
// 关闭其他标签
|
|
||||||
closeOther() {
|
|
||||||
const curItem = this.tagsList.filter((item) => {
|
|
||||||
return item.path === this.$route.fullPath;
|
|
||||||
});
|
|
||||||
this.tagsList = curItem;
|
|
||||||
},
|
|
||||||
// 设置标签
|
|
||||||
setTags(route) {
|
|
||||||
const isExist = this.tagsList.some((item) => {
|
|
||||||
return item.path === route.fullPath;
|
|
||||||
});
|
|
||||||
if (!isExist) {
|
|
||||||
if (this.tagsList.length >= 8) {
|
|
||||||
this.tagsList.shift();
|
|
||||||
}
|
|
||||||
this.tagsList.push({
|
|
||||||
title: route.meta.title,
|
|
||||||
path: route.fullPath,
|
|
||||||
icon: route.meta.icon
|
|
||||||
});
|
|
||||||
// console.log(route);
|
|
||||||
}
|
|
||||||
bus.$emit('tags', this.tagsList);
|
|
||||||
},
|
|
||||||
handleTags(command) {
|
|
||||||
command === 'other' ? this.closeOther() : this.closeAll();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
showTags() {
|
|
||||||
return this.tagsList.length > 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route(newValue, oldValue) {
|
|
||||||
this.setTags(newValue);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.setTags(this.$route);
|
|
||||||
// 监听关闭当前页面的标签页
|
|
||||||
bus.$on('close_current_tags', () => {
|
|
||||||
for (let i = 0, len = this.tagsList.length; i < len; i++) {
|
|
||||||
const item = this.tagsList[i];
|
|
||||||
if (item.path === this.$route.fullPath) {
|
|
||||||
if (i < len - 1) {
|
|
||||||
this.$router.push(this.tagsList[i + 1].path);
|
|
||||||
} else if (i > 0) {
|
|
||||||
this.$router.push(this.tagsList[i - 1].path);
|
|
||||||
} else {
|
|
||||||
this.$router.push('/');
|
|
||||||
}
|
|
||||||
this.tagsList.splice(i, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.tags {
|
|
||||||
position: relative;
|
|
||||||
height: 48px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: @color-white;
|
|
||||||
padding-right: 120px;
|
|
||||||
box-shadow: 0 5px 10px @border-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags ul {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li {
|
|
||||||
float: left;
|
|
||||||
margin: 12px 8px 12px 8px;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
border: 1px solid @border-color-base;
|
|
||||||
background: @color-white;
|
|
||||||
padding: 0 5px 0 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: @color-text-regular;
|
|
||||||
-webkit-transition: all 0.3s ease-in;
|
|
||||||
-moz-transition: all 0.3s ease-in;
|
|
||||||
transition: all 0.3s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li:not(.active):hover {
|
|
||||||
background: @border-color-extra-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li.active {
|
|
||||||
color: @color-white;
|
|
||||||
}
|
|
||||||
.tags-li.active {
|
|
||||||
border: 1px solid @color-primary;
|
|
||||||
background-color: @color-primary;
|
|
||||||
}
|
|
||||||
.tags-li-title {
|
|
||||||
float: left;
|
|
||||||
max-width: 80px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-right: 5px;
|
|
||||||
color: @color-text-regular;
|
|
||||||
i {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-li.active .tags-li-title {
|
|
||||||
color: @color-white;
|
|
||||||
i {
|
|
||||||
color: @color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags-close-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-top: 1px;
|
|
||||||
text-align: center;
|
|
||||||
width: 110px;
|
|
||||||
height: 30px;
|
|
||||||
background: @color-white;
|
|
||||||
box-shadow: @box-shadow-basic;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="error-page">
|
|
||||||
<div class="error-code">4<span>0</span>3</div>
|
|
||||||
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
|
||||||
<div class="error-handle">
|
|
||||||
<router-link to="/">
|
|
||||||
<el-button type="primary" size="large">返回首页</el-button>
|
|
||||||
</router-link>
|
|
||||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
goBack(){
|
|
||||||
this.$router.go(-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.error-page{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f3f3f3;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.error-code{
|
|
||||||
line-height: 1;
|
|
||||||
font-size: 250px;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: #f02d2d;
|
|
||||||
}
|
|
||||||
.error-code span{
|
|
||||||
color: #00a854;
|
|
||||||
}
|
|
||||||
.error-desc{
|
|
||||||
font-size: 30px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
.error-handle{
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-bottom: 200px;
|
|
||||||
}
|
|
||||||
.error-btn{
|
|
||||||
margin-left: 100px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,56 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="error-page">
|
<div class="error-page">
|
||||||
<div class="error-code">4<span>0</span>4</div>
|
<div class="error-code">4<span>0</span>4</div>
|
||||||
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||||
<div class="error-handle">
|
<!-- <div class="error-handle">
|
||||||
<router-link to="/">
|
<router-link to="/">
|
||||||
<el-button type="primary" size="large">返回首页</el-button>
|
<el-button type="primary" size="large">返回首页</el-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
goBack(){
|
goBack() {
|
||||||
this.$router.go(-1);
|
this.$router.go(-1);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.error-page{
|
.error-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.error-code{
|
.error-code {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 250px;
|
font-size: 250px;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
color: #2d8cf0;
|
color: #2d8cf0;
|
||||||
}
|
}
|
||||||
.error-code span{
|
.error-code span {
|
||||||
color: #00a854;
|
color: #00a854;
|
||||||
}
|
}
|
||||||
.error-desc{
|
.error-desc {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
.error-handle{
|
.error-handle {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
padding-bottom: 200px;
|
padding-bottom: 200px;
|
||||||
}
|
}
|
||||||
.error-btn{
|
.error-btn {
|
||||||
margin-left: 100px;
|
margin-left: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,202 +1,253 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="alarmHandBox">
|
<div class="alarmHandBox">
|
||||||
<div class="alarmTop">
|
<div class="alarmTop">
|
||||||
<div class="alarmButtonGroup">
|
<div class="alarmButtonGroup">
|
||||||
<el-button type="primary">查询</el-button>
|
<el-button type="primary">查询</el-button>
|
||||||
<el-button type="primary">今日告警</el-button>
|
<el-button type="primary">今日告警</el-button>
|
||||||
<el-button type="primary">最近三日告警</el-button>
|
<el-button type="primary">最近三日告警</el-button>
|
||||||
<el-button type="primary">最近一周告警</el-button>
|
<el-button type="primary">最近一周告警</el-button>
|
||||||
<el-button type="primary">批量处理</el-button>
|
<el-button type="primary">批量处理</el-button>
|
||||||
<el-button type="primary">查看详情</el-button>
|
<el-button type="primary">查看详情</el-button>
|
||||||
<el-button type="primary">导出</el-button>
|
<el-button type="primary">导出</el-button>
|
||||||
<el-button type="primary">导出处理结果</el-button>
|
<el-button type="primary">导出处理结果</el-button>
|
||||||
<el-button type="primary">导出图片</el-button>
|
<el-button type="primary">导出图片</el-button>
|
||||||
<el-button type="primary">手动刷新</el-button>
|
<el-button type="primary">手动刷新</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alarmContain">
|
||||||
|
<div class="alarmTable">
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
tooltip-effect="dark"
|
||||||
|
style="width: 100%"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
height="calc(100% - 40px)"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column min-width="35">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column type="selection" min-width="25"> </el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="alarmTime"
|
||||||
|
label="告警时间"
|
||||||
|
min-width="135"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
:formatter="dateFormat"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="alarmLevel" label="告警级别" min-width="75">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="lineName"
|
||||||
|
label="XL"
|
||||||
|
min-width="105"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="meid"
|
||||||
|
label="GT"
|
||||||
|
min-width="115"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="orientationName"
|
||||||
|
label="监拍朝向"
|
||||||
|
min-width="95"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="companyName"
|
||||||
|
label="单位"
|
||||||
|
min-width="75"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="alarmInfo"
|
||||||
|
label="告警原因"
|
||||||
|
min-width="155"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="source"
|
||||||
|
label="分析来源"
|
||||||
|
min-width="105"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
<template>后端分析</template></el-table-column
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
prop="clearDistace"
|
||||||
|
label="净空距离"
|
||||||
|
min-width="105"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
><template>未分析</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="distanceLevel"
|
||||||
|
label="距离分级"
|
||||||
|
min-width="85"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="isRead"
|
||||||
|
label="是否已读"
|
||||||
|
min-width="95"
|
||||||
|
fixed="right"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.isRead == 0">未读</span>
|
||||||
|
<span v-if="scope.row.isRead == 1">已读</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pageNation">
|
||||||
|
<el-pagination
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="page"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout=" prev, pager, next, jumper,total"
|
||||||
|
:total="total"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
<div class="alarmContain">
|
</div>
|
||||||
<div class="alarmTable">
|
<div class="alarmPic">
|
||||||
<el-table
|
<div class="imgshow"><img :src="photoPic" /></div>
|
||||||
ref="multipleTable"
|
<div class="editorBtn">
|
||||||
:data="tableData"
|
<el-button type="primary">处理</el-button>
|
||||||
border
|
<el-button type="primary">查看操作详情</el-button>
|
||||||
tooltip-effect="dark"
|
<el-button type="primary">设置非警告区域</el-button>
|
||||||
style="width: 100%"
|
<el-button type="primary">主动拍照</el-button>
|
||||||
@selection-change="handleSelectionChange"
|
<el-button type="primary">转向GT</el-button>
|
||||||
height="calc(100% - 40px)"
|
<el-button type="primary">复制</el-button>
|
||||||
@row-click="handleRowClick"
|
<el-button type="primary">历史图</el-button>
|
||||||
>
|
|
||||||
<el-table-column min-width="35">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column type="selection" min-width="25"> </el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="alarmTime"
|
|
||||||
label="告警时间"
|
|
||||||
min-width="135"
|
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
:formatter="dateFormat"
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="alarmLevel" label="告警级别" min-width="75"> </el-table-column>
|
|
||||||
<el-table-column prop="lineName" label="XL" min-width="105" :show-overflow-tooltip="true"> </el-table-column>
|
|
||||||
<el-table-column prop="meid" label="GT" min-width="115" :show-overflow-tooltip="true"> </el-table-column>
|
|
||||||
<el-table-column prop="orientationName" label="监拍朝向" min-width="95" :show-overflow-tooltip="true">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="companyName" label="单位" min-width="75" :show-overflow-tooltip="true"> </el-table-column>
|
|
||||||
<el-table-column prop="alarmInfo" label="告警原因" min-width="155" :show-overflow-tooltip="true"> </el-table-column>
|
|
||||||
<el-table-column prop="source" label="分析来源" min-width="105" :show-overflow-tooltip="true">
|
|
||||||
<template>后端分析</template></el-table-column
|
|
||||||
>
|
|
||||||
<el-table-column prop="clearDistace" label="净空距离" min-width="105" :show-overflow-tooltip="true"
|
|
||||||
><template>未分析</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="distanceLevel" label="距离分级" min-width="85" :show-overflow-tooltip="true"> </el-table-column>
|
|
||||||
<el-table-column prop="isRead" label="是否已读" min-width="95" fixed="right">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.isRead == 0">未读</span>
|
|
||||||
<span v-if="scope.row.isRead == 1">已读</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="pageNation">
|
|
||||||
<el-pagination
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
:current-page="page"
|
|
||||||
:page-size="pageSize"
|
|
||||||
layout=" prev, pager, next, jumper,total"
|
|
||||||
:total="total"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="alarmPic">
|
|
||||||
<div class="imgshow"><img :src="photoPic" /></div>
|
|
||||||
<div class="editorBtn">
|
|
||||||
<el-button type="primary">处理</el-button>
|
|
||||||
<el-button type="primary">查看操作详情</el-button>
|
|
||||||
<el-button type="primary">设置非警告区域</el-button>
|
|
||||||
<el-button type="primary">主动拍照</el-button>
|
|
||||||
<el-button type="primary">转向GT</el-button>
|
|
||||||
<el-button type="primary">复制</el-button>
|
|
||||||
<el-button type="primary">历史图</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { list } from '@/utils/api/index';
|
//import { list } from '@/utils/api/index';
|
||||||
import moment from 'moment';
|
import moment from "moment";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
photoPic: '',
|
photoPic: "",
|
||||||
|
|
||||||
tableData: [],
|
tableData: [],
|
||||||
multipleSelection: [],
|
multipleSelection: [],
|
||||||
page: 1, // 当前页数
|
page: 1, // 当前页数
|
||||||
pageSize: 20, // 每页数量
|
pageSize: 20, // 每页数量
|
||||||
total: 0 //总条数
|
total: 0, //总条数
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
this.page = val;
|
||||||
|
this.getTableList();
|
||||||
|
},
|
||||||
|
getTableList() {
|
||||||
|
list({
|
||||||
|
companyIdSelect: "",
|
||||||
|
timeStart: "2023-03-24 00:00:00",
|
||||||
|
timeEnd: "2023-03-24 23:59:59",
|
||||||
|
status: 0,
|
||||||
|
lineId: "",
|
||||||
|
voltageCode: "",
|
||||||
|
logicTowerId: "",
|
||||||
|
alarmInfo: "",
|
||||||
|
page: this.page,
|
||||||
|
rows: this.pageSize,
|
||||||
|
sort: "alarmTime",
|
||||||
|
order: "desc",
|
||||||
|
}).then((res) => {
|
||||||
|
console.log(res.data);
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.total = res.data.total;
|
||||||
|
this.photoPic =
|
||||||
|
"http://180.166.218.222:8104/media" + res.data.rows[0].photoPath;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
console.log(`当前页: ${val}`);
|
|
||||||
this.page = val;
|
|
||||||
this.getTableList();
|
|
||||||
},
|
|
||||||
getTableList() {
|
|
||||||
list({
|
|
||||||
companyIdSelect: '',
|
|
||||||
timeStart: '2023-03-24 00:00:00',
|
|
||||||
timeEnd: '2023-03-24 23:59:59',
|
|
||||||
status: 0,
|
|
||||||
lineId: '',
|
|
||||||
voltageCode: '',
|
|
||||||
logicTowerId: '',
|
|
||||||
alarmInfo: '',
|
|
||||||
page: this.page,
|
|
||||||
rows: this.pageSize,
|
|
||||||
sort: 'alarmTime',
|
|
||||||
order: 'desc'
|
|
||||||
}).then((res) => {
|
|
||||||
console.log(res.data);
|
|
||||||
this.tableData = res.data.rows;
|
|
||||||
this.total = res.data.total;
|
|
||||||
this.photoPic = 'http://180.166.218.222:8104/media' + res.data.rows[0].photoPath;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSelectionChange(val) {
|
handleSelectionChange(val) {
|
||||||
this.multipleSelection = val;
|
this.multipleSelection = val;
|
||||||
},
|
|
||||||
handleRowClick(row) {
|
|
||||||
//this.$refs.multipleTable.toggleRowSelection(row);
|
|
||||||
console.log(row);
|
|
||||||
this.photoPic = 'http://180.166.218.222:8104/media' + row.photoPath;
|
|
||||||
},
|
|
||||||
dateFormat(row, column) {
|
|
||||||
var date = row[column.property];
|
|
||||||
if (date == undefined) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
return moment(date).format('YYYY-MM-DD HH:mm:ss');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
created() {
|
handleRowClick(row) {
|
||||||
this.getTableList();
|
//this.$refs.multipleTable.toggleRowSelection(row);
|
||||||
}
|
console.log(row);
|
||||||
|
this.photoPic = "http://180.166.218.222:8104/media" + row.photoPath;
|
||||||
|
},
|
||||||
|
dateFormat(row, column) {
|
||||||
|
var date = row[column.property];
|
||||||
|
if (date == undefined) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return moment(date).format("YYYY-MM-DD HH:mm:ss");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
//this.getTableList();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.alarmHandBox {
|
.alarmHandBox {
|
||||||
width: 100%;
|
width: calc(100% - 32px);
|
||||||
height: 100%;
|
height: calc(100% - 32px);
|
||||||
background: @color-white;
|
padding: 16px 16px;
|
||||||
.alarmTop {
|
background: #ffffff;
|
||||||
padding: 16px 8px;
|
.alarmTop {
|
||||||
|
padding: 16px 8px;
|
||||||
|
}
|
||||||
|
.alarmContain {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 72px);
|
||||||
|
padding: 0px 8px;
|
||||||
|
.alarmTable {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.alarmContain {
|
.pageNation {
|
||||||
display: flex;
|
margin-top: 8px;
|
||||||
height: calc(100% - 72px);
|
}
|
||||||
padding: 0px 8px;
|
.alarmPic {
|
||||||
.alarmTable {
|
width: 50%;
|
||||||
width: 50%;
|
height: 100%;
|
||||||
height: 100%;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.pageNation {
|
justify-content: space-between;
|
||||||
margin-top: 8px;
|
.imgshow {
|
||||||
}
|
width: 100%;
|
||||||
.alarmPic {
|
height: 90%;
|
||||||
width: 50%;
|
img {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.imgshow {
|
|
||||||
width: 100%;
|
|
||||||
height: 90%;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.editorBtn {
|
|
||||||
margin-top: 8px;
|
|
||||||
border: 1px solid @border-color-base;
|
|
||||||
padding: 2%;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.editorBtn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.editorBtn {
|
||||||
|
margin-top: 8px;
|
||||||
|
border: 1px solid @border-color-base;
|
||||||
|
padding: 2%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.editorBtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,74 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="towerSide">
|
<div class="towerSide">
|
||||||
<el-tree
|
<el-tree
|
||||||
:data="data"
|
:data="data"
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
@node-click="handleNodeClick"
|
@node-click="handleNodeClick"
|
||||||
default-expand-all
|
default-expand-all
|
||||||
highlight-current
|
highlight-current
|
||||||
node-key="id"
|
node-key="id"
|
||||||
:default-expanded-keys="expandDefault"
|
:default-expanded-keys="expandDefault"
|
||||||
></el-tree>
|
></el-tree>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import bus from '../../../../../components/common/bus';
|
import bus from "../../../../../components/common/bus";
|
||||||
import { getListCompany } from '@/utils/api/index';
|
//import { getListCompany } from '@/utils/api/index';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
expandDefault: [], //默认选中第一项
|
expandDefault: [], //默认选中第一项
|
||||||
data: [],
|
data: [],
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
children: 'children',
|
children: "children",
|
||||||
label: 'text'
|
label: "text",
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
// 为了选中第一层级下的第一个节点
|
// 为了选中第一层级下的第一个节点
|
||||||
watch: {
|
watch: {
|
||||||
expandDefault(newVal, oldVal) {
|
expandDefault(newVal, oldVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
document.querySelector('.el-tree-node__content').click();
|
document.querySelector(".el-tree-node__content").click();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
getListCompany({
|
// getListCompany({
|
||||||
companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
// companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
||||||
lineName: ''
|
// lineName: ''
|
||||||
}).then((res) => {
|
// }).then((res) => {
|
||||||
//console.log(res.data);
|
// //console.log(res.data);
|
||||||
this.expandDefault.push(res.data.$treeNodeId);
|
// this.expandDefault.push(res.data.$treeNodeId);
|
||||||
this.data = res.data;
|
// this.data = res.data;
|
||||||
});
|
// });
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleNodeClick(data) {
|
||||||
|
//console.log(data);
|
||||||
|
bus.$emit("nodeData", data);
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
handleNodeClick(data) {
|
|
||||||
//console.log(data);
|
|
||||||
bus.$emit('nodeData', data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.towerSide {
|
.towerSide {
|
||||||
width: 234px;
|
width: 234px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-right: 1px solid @border-color-base;
|
border-right: 1px solid @border-color-base;
|
||||||
// 修改选中的样式
|
// 修改选中的样式
|
||||||
.el-tree {
|
.el-tree {
|
||||||
.el-tree-node__content {
|
.el-tree-node__content {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
||||||
background-color: @color-primary;
|
|
||||||
color: @color-white;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.el-tree--highlight-current
|
||||||
|
.el-tree-node.is-current
|
||||||
|
> .el-tree-node__content {
|
||||||
|
background-color: @color-primary;
|
||||||
|
color: @color-white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="realTimeSearch">查询展示图片</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
created() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.realTimeSearch {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="userManagement">用户管理</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script></script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.userManagement {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue