qa-prevention-gwj-vue/src/layout/components/Navbar.vue

756 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<div class="right-menu-item hover-effect">
<span style="font-weight: bold">部门{{ DEPARTMENT_NAME }}</span>
</div>
<div class="right-menu-item hover-effect">
<span style="font-weight: bold">姓名{{ userForm.NAME }}</span>
</div>
<div class="right-menu-item hover-effect" @click="gotoBI()">
<svg-icon icon-class="dashboard" />
<span>可视化</span>
</div>
<div class="right-menu-item hover-effect" @click="gotoMap()">
<svg-icon icon-class="dashboard" />
<span>地图</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('prevention')">
<svg-icon icon-class="dashboard" />
<span>双重预防</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('relatedParties')">
<svg-icon icon-class="dashboard" />
<span>相关方</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('educationAndTraining')">
<svg-icon icon-class="example" />
<span>教育培训</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('highRisk')">
<svg-icon icon-class="example" />
<span>高危作业管理</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('monitor')">
<svg-icon icon-class="example" />
<span>监测预警</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('mkmj')">
<svg-icon icon-class="dashboard" />
<span>口门门禁管理</span>
</div>
<div class="right-menu-item hover-effect" @click="setShowModel('comprehensive')">
<svg-icon icon-class="example" />
<span>综合管理</span>
</div>
<!-- <template v-if="device!=='mobile'">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="Global Size" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template> -->
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="imgUrl" alt="" class="user-avatar">
<!-- <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" class="user-avatar"> -->
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeMessage">修改信息</el-dropdown-item>
<el-dropdown-item @click.native="changePhoto">修改头像</el-dropdown-item>
<!-- <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>-->
<el-dropdown-item @click.native="download">平台操作手册</el-dropdown-item>
<el-dropdown-item @click.native="APPdownload">APP操作手册</el-dropdown-item>
<el-dropdown-item divided @click.native="goOut">
<span style="display:block;">注销</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-dialog :visible.sync="dialogMessageEdit" :append-to-body="true" title="修改信息" width="750px">
<div style="padding:0 40px">
<el-form ref="userForm" :model="userForm" :rules="userFormRules" status-icon label-width="100px">
<el-form-item label="用户名" >
<el-input v-model="userForm.USERNAME" disabled placeholder="默认用户手机号码..." />
</el-form-item>
<el-form-item label="新密码:" prop="newpwd">
<el-input v-model="userForm.newpwd" type="password" maxlength="16" placeholder="请输入长度8-16位密码必须由大写字母小写字母数字特殊符号(!#@*&.)组成" auto-complete="off" />
</el-form-item>
<el-form-item label="确认密码:" prop="newpassword1">
<el-input v-model="userForm.newpassword1" type="password" maxlength="16" placeholder="请输入确认密码" auto-complete="off" />
</el-form-item>
<el-form-item label="姓名" prop="NAME">
<el-input v-model="userForm.NAME" placeholder="这里输入姓名..." />
</el-form-item>
<el-form-item label="邮箱" prop="EMAIL">
<el-input v-model="userForm.EMAIL" placeholder="这里输入邮箱..." />
</el-form-item>
<el-form-item label="备注">
<el-input :rows="3" v-model="userForm.BZ" type="textarea" placeholder="这里输入备注..." />
</el-form-item>
</el-form>
<div style="text-align: center;margin-top:30px">
<el-button type="primary" @click.native.prevent="editUser">确认修改</el-button>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogForm" :append-to-body="true" title="上传头像" width="600px">
<el-form ref="photoForm" :model="photoForm" label-width="110px" style="width: 500px;">
<el-form-item label="附件">
<el-upload
ref="upload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleChangeIMG"
:before-upload="beforeFileUpload"
:auto-upload="false"
:limit="1"
:class="{hide:hideUpload}"
action="#"
accept=".jpg,.jpeg,.png"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogForm = false">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormEdit" :append-to-body="true" title="修改密码" width="750px">
<div style="padding:0 40px">
<el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" status-icon label-width="100px">
<el-form-item label="旧密码:" prop="password">
<el-input v-model="resetForm.password" type="password" auto-complete="off" />
</el-form-item>
<el-form-item label="新密码:" prop="newpwd">
<el-input v-model="resetForm.newpwd" type="password" maxlength="16" placeholder="请输入长度8-16位密码必须由大写字母小写字母数字特殊符号(!#@*&.)组成" auto-complete="off" />
</el-form-item>
<el-form-item label="确认密码:" prop="newpassword1">
<el-input v-model="resetForm.newpassword1" type="password" maxlength="16" placeholder="请输入确认密码" auto-complete="off" />
</el-form-item>
</el-form>
<div style="text-align: center;margin-top:30px">
<el-button type="primary" @click.native.prevent="confirm"></el-button>
</div>
</div>
</el-dialog>
<audio v-if="isAlarm" v-show="false" autoplay="autoplay" loop="loop" src="/static/audio/alarm.mp3" controls="controls"/>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { Message, MessageBox } from 'element-ui'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
export default {
components: {
Breadcrumb,
Hamburger,
Screenfull,
SizeSelect
},
data() {
// eslint-disable-next-line no-unused-vars
const validatePass = (rule, value, callback) => {
if (value) {
if (value.toString().length < 8 || value.toString().length > 16) {
callback(new Error('密码长度为8-16位'))
} else {
callback()
}
} else {
callback()
}
}
const validatePass2 = (rule, value, callback) => {
if (this.userForm.newpwd != '' && value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.userForm.newpwd) {
console.info(this.userForm.newpwd)
console.info(value)
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
var hasEmail = (rule, value, callback) => {
if (value) {
requestFN(
'/user/hasEmail',
{
EMAIL: value,
USERNAME: this.userForm.USERNAME
}
).then((data) => {
if (data.result == 'success') {
callback()
} else {
callback(new Error('邮箱重复'))
}
}).catch((e) => {
})
} else {
callback()
}
}
return {
imgUrl: require('@/assets/images/user-logo.png'),
config: config,
fwebsocket: {},
alarmSocket: {},
dialogFormEdit: false,
dialogMessageEdit: false,
dialogForm: false,
isAlarm: false,
resetForm: {
newpwd: '',
newpassword1: '',
password: '',
username: ''
},
photoForm: {},
userForm: {
USERNAME: '',
NAME: '',
EMAIL: '',
newpwd: '',
newpassword1: ''
},
resetFormRules: {
password: [
{ required: true, message: '请输入旧密码', trigger: 'blur' }
],
newpwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*.{8,16}$/,
message: '请输入长度8-16位密码必须由大写字母小写字母数字特殊符号(!#@*&.)组成'
}
],
newpassword1: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
},
userFormRules: {
NAME: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
EMAIL: [
{ required: false, message: '请输入邮箱', trigger: 'blur' },
{
pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
message: '请输入正确的邮箱'
},
{ validator: hasEmail, trigger: 'blur' }
],
newpwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*.{8,16}$/,
message: '请输入长度8-16位密码必须由大写字母小写字母数字特殊符号(!#@*&.)组成'
}
],
newpassword1: [
{ required: false, validator: validatePass2, trigger: 'blur' }
]
},
roleList: [],
USER_ID: '',
ROLE_IDS: '',
DEPARTMENT_ID: '',
hideUpload: false,
dialogImageUrl: '',
dialogVisible: false,
DEPARTMENT_NAME: '',
FFILE: {}
}
},
computed: {
...mapGetters([
'sidebar',
'device'
])
},
created() {
this.getDisplsal()
this.getInfo()
this.getEditMyInfo()
},
methods: {
gotoBI() {
if (JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID === '035958e685cf4850bc40151c5e0617a6' ||
JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID === '13cf0f4ec77e4d98ae8cdd9c3386ae0c') {
this.$router.push({ name: 'monitoringCenter' })
} else {
window.location.href = this.config.weburl + 'static/bi/index.html'
}
},
setShowModel(model) {
this.$store.dispatch('permission/setShowModel', model)
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
getInfo() {
var _this = this
requestFN(
'/head/getInfo',
{}
).then((data) => {
// 加入在线列表
if (window.WebSocket) {
console.info(data.onlineAdress)
this.fwebsocket = new WebSocket(encodeURI('ws://' + data.onlineAdress)) // oladress在main.jsp页面定义
console.info('33333')
console.info(this.fwebsocket)
console.info('44444')
this.fwebsocket.onopen = () => {
if (!sessionStorage.getItem('onlineAdress')) {
this.fwebsocket.send('[join]' + data.USERNAME) // 连接成功
sessionStorage.setItem('onlineAdress', data.onlineAdress) // data.onlineAdress ==> config/sysSet.ini文件中的 onlineIp+":"+onlinePort
}
}
this.fwebsocket.onerror = function() {
// 连接失败
}
this.fwebsocket.onclose = function() {
// 连接断开
}
// 消息接收
this.fwebsocket.onmessage = function(message) {
var messageMsg = JSON.parse(message.data)
if (messageMsg.type == 'goOut') {
_this.goOut('1')
} else if (messageMsg.type == 'thegoout') {
_this.goOut('2')
}
}
console.info(data.alarmAdress)
this.alarmSocket = new WebSocket(encodeURI('ws://' + data.alarmAdress)) // oladress在main.jsp页面定义
console.info('11111')
console.info(this.alarmSocket)
console.info('22222')
this.alarmSocket.onopen = () => {
console.info('重大危险源监听连接成功')
if (!sessionStorage.getItem('alarmAdress')) {
this.alarmSocket.send('[join]' + data.USER_ID) // 连接成功
sessionStorage.setItem('alarmAdress', data.alarmAdress) // data.alarmAdress ==> config/sysSet.ini文件中的 alarmIp+":"+alarmPort
}
}
this.alarmSocket.onerror = function() {
console.info('重大危险源监听连接失败')
}
this.alarmSocket.onclose = function() {
console.info('重大危险源监听连接断开')
}
// 消息接收
this.alarmSocket.onmessage = function(message) {
let type = ''
var messageMsg = JSON.parse(message.data)
console.info(messageMsg)
if (messageMsg.USER_ID === JSON.parse(sessionStorage.getItem('user')).USER_ID) {
if (messageMsg.ALARM_LEVEL === '1') {
type = 'error'
} else if (messageMsg.ALARM_LEVEL === '2') {
type = 'warning'
} else if (messageMsg.ALARM_LEVEL === '3') {
type = 'warning'
} else if (messageMsg.ALARM_LEVEL === '4') {
type = 'info'
}
if (messageMsg.MESSAGE) {
_this.$notify({
dangerouslyUseHTMLString: true,
message: messageMsg.MESSAGE,
type: type,
showClose: true,
duration: 0,
position: 'bottom-right',
iconClass: 'el-icon-warning',
onClose: function() {
_this.isAlarm = false
}
})
_this.isAlarm = true
}
}
}
}
this.imgUrl = config.fileUrl + data.userPhoto
})
.catch((e) => {
// MessageBox.alert('登录失效,请重新登录', {
// confirmButtonText: '确定',
// callback: action => {
// sessionStorage.clear()
// location.reload()
// }
// })
})
},
// 获取最新的有效报警数据
getDisplsal() {
var _this = this
requestFN(
'/majordangersourcedisposal/findValidateData',
{
RESPONSIBLE_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID
}
).then((data) => {
data.varList.forEach((item) => {
// eslint-disable-next-line one-var
let message = '重大危险源(' + item.MAJORDANGERSOURCE_NAME + ')生成一次' + item.ALARM_TYPE_NAME + '报警【等级:', type = ''
if (item.ALARM_LEVEL === '1') {
message += '一级'
type = 'error'
} else if (item.ALARM_LEVEL === '2') {
message += '二级'
type = 'warning'
} else if (item.ALARM_LEVEL === '3') {
message += '三级'
type = 'warning'
} else if (item.ALARM_LEVEL === '4') {
message += '四级'
type = 'info'
}
message += '】,请尽快处理'
this.$notify({
dangerouslyUseHTMLString: true,
message: message,
type: type,
showClose: true,
duration: 0,
position: 'bottom-right',
iconClass: 'el-icon-warning',
onClose: function() {
_this.isAlarm = false
}
})
})
if (data.varList.length > 0) {
_this.isAlarm = true
}
}).catch((e) => {
})
},
download() {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
// '/mfolder/download?RISKWARNING_ID=' + RISKWARNING_ID,
window.location.href = config.httpurl + 'uploadFiles/file/安全生产应急综合管理平台说明书.doc'
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
APPdownload() {
this.$confirm('确定要下载此文件吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
// '/mfolder/download?RISKWARNING_ID=' + RISKWARNING_ID,
window.location.href = config.httpurl + 'uploadFiles/file/秦港-双基双控APP说明书.doc'
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
// 从修改个人资料
getEditMyInfo: function() {
requestFN(
'/user/goEditMyInfo',
{}
).then((data) => {
this.DEPARTMENT_NAME = data.deptname
this.roleList = data.roleList // 角色列表
this.USER_ID = data.pd.USER_ID // 主职角色ID
this.ROLE_IDS = data.pd.ROLE_IDS // 副职角色ID
this.DEPARTMENT_ID = data.pd.DEPARTMENT_ID
data.pd.newpwd = ''
data.pd.newpassword1 = ''
this.userForm = Object.assign({}, data.pd) // copy obj
console.log(this.userForm)
}).catch((e) => {
})
},
// 下线
goOut: function(msg) {
requestFN(
'/main/logout',
{}
).then((data) => {
// if (this.validStr(this.fwebsocket)) {
// this.fwebsocket.close()
// }
// if (this.validStr(this.alarmSocket)) {
// this.alarmSocket.close()
// }
sessionStorage.clear()
location.reload()
})
.catch((e) => {
// if (this.validStr(this.fwebsocket)) {
// this.fwebsocket.close()
// }
// if (this.validStr(this.alarmSocket)) {
// this.alarmSocket.close()
// }
sessionStorage.clear()
location.reload()
})
},
changePassword() {
this.dialogFormEdit = true
},
changeMessage() {
this.getEditMyInfo()
this.dialogMessageEdit = true
},
changePhoto() {
this.dialogForm = true
},
editUser() {
this.$refs.userForm.validate(valid => {
if (valid) {
requestFN(
'/user/editUserOwn',
{ USER_ID: this.USER_ID,
ROLE_ID: this.userForm.ROLE_ID,
ROLE_IDS: this.ROLE_IDS,
USERNAME: this.userForm.USERNAME,
// NUMBER:this.userForm.NUMBER,
PASSWORD: this.userForm.newpwd,
NAME: this.userForm.NAME,
PHONE: this.userForm.PHONE,
EMAIL: this.userForm.EMAIL,
DEPARTMENT_ID: this.DEPARTMENT_ID,
isEditUserName: this.isEditUserName,
POST_ID: this.userForm.POST_ID,
BZ: this.userForm.BZ,
OPERATIONTYPE: '1' }
).then((data) => {
Message({
message: '信息修改成功',
type: 'success',
duration: 5 * 1000
})
this.dialogMessageEdit = false
}).catch((e) => {
})
} else {
return false
}
})
},
confirm() {
this.$refs.resetForm.validate(valid => {
if (valid) {
requestFN(
'/user/editUserPwd',
this.resetForm
).then((data) => {
Message({
message: '密码修改成功',
type: 'success',
duration: 5 * 1000
})
this.dialogFormEdit = false
}).catch((e) => {
})
} else {
return false
}
})
},
handlePictureCardPreview(file, fileList) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleChangeIMG(file, fileList) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.raw.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
fileList.pop()
}
this.hideUpload = fileList.length >= 1
},
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= 1
},
// 保存
upload() {
if (this.$refs.upload.uploadFiles.length < 1) {
this.$message({
message: '请上传图片',
type: 'error'
})
return false
}
this.$refs.upload.submit()
const loading = this.$loading({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const formData = new FormData()
formData.append('FFILE', this.FFILE)
upload(
'/photo/saveNew',
formData
).then((data) => {
this.dialogForm = false
this.imgUrl = config.httpurl + data.userPhoto
loading.close()
}).catch((e) => {
loading.close()
})
},
beforeFileUpload(file) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
return false
} else {
this.FFILE = file
return false
}
},
gotoMap() {
this.$router.push('/map')
}
}
}
</script>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.breadcrumb-container {
float: left;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
line-height: 54px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 16px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>