Skip to content

Z
zhxf_vue
Commit 0c2ecc1c authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent aa70b8f2
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 1956 deletions
src/App - 副本.vue deleted 100644 → 0
View file @ aa70b8f2
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import util from '@/libs/util.js'
import util from '@/libs/util.js'
export default {
name: 'app',
data () {
return {
LogTimeout: null
}
},
mounted () {
//let token = util.cookies.get('token')
//this.initWebSocket()
// this.setTimeout()
},
destroyed: function () {
this.websocketclose()
},
methods: {
//初始化weosocket
initWebSocket () {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持WebSocket')
return false
}
// websocket地址
const wsuri = this.$http.adornUrl('').slice(5)
const webpath =
'ws:' + wsuri.substring(0, wsuri.indexOf(':')) + ':8091/websocket/1001'
this.websock = new WebSocket(webpath)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.onbeforeunload
},
//连接成功
websocketonopen () {
console.log('WebSocket连接成功')
},
//接收后端返回的数据
websocketonmessage (e) {
console.log(e + '*****')
let dataJson = e.data
console.log(dataJson + '*****')
// 在这里使用后端返回的数据，对数据进行处理渲染
},
//连接建立失败重连
websocketonerror (e) {
console.log(`连接失败的信息：`, e)
this.initWebSocket() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose (e) {
console.log('断开连接', e)
},
//设置定时器
setTimeout () {
if (this.LogTimeout) {
this.closeTimeout()
}
this.LogTimeout = setInterval(this.getDateList, 5000)
},
// 关闭定时器
closeTimeout () {
if (this.LogTimeout) {
clearInterval(this.LogTimeout)
}
},
getDateList () {
console.log('开始定时循环')
if (util.cookies.get('token') && util.cookies.get('token') != undefined) {
this.$http({
url: this.$http.adornUrlAlarm('/alarmsInfo/queryList'),
method: 'post',
params: this.$http.adornParams({
status: 1,
stationId: localStorage.getItem('stationId')
})
}).then(data => {
if (data && data.code === 0) {
this.dataList = data.list
console.log('报警弹框')
for (var i = 0; i < data.list.length; i++) {
if (i === 4) {
break
}
this.$toast({
tip: 'tip' + (i + 1),
id: data.list[i].id,
stationName: '', //站点名
tierName: data.list[i].tierName, //站层名
resourceName: data.list[i].resourceName, //资源点名
occurrenceSite: data.list[i].occurrenceSite, //发生地点
level: data.list[i].eventLevel, // 等级
times: data.list[i].occurrenceTime, //时间
type: data.list[i].eventName, // 类型
// explain: data.list[i].explain, //说明
// url: data.list[i].url, //图片地址
duration: '4900',
router: this.$router
})
}
// this.closeTimeout()
}
})
}
}
}
}
</script>
<style lang="scss">
@import "~@/assets/style/public-class.scss";
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-container
.d2-theme-container-main
.d2-theme-container-main-body
.container-component
.d2-container-full
.d2-container-full__body {
margin-bottom: 50px;
}
//-- 公共样式--//
// page页背景色
.d2-container-full__body {
background-color: #b9c9e3 !important;
}
// 状态-点
// .danger,
// .success,
// .warning {
// width: 5px;
// height: 5px;
// border-radius: 100%;
// background: #ff3723;
// display: inline-block;
// vertical-align: middle;
// }
// .success {
// background: #42cd00;
// }
// .warning {
// background: #ffa101;
// }
// 弹出框
.el-dialog__title {
line-height: 24px;
font-size: 18px;
color: #303133;
padding-left: 10px;
}
.el-dialog__header {
border-top: 3px solid #21acfc;
padding: 14px 20px 10px !important;
background-color: #edeef1;
border-bottom: 1px solid #e9e9e9;
}
// 自定义===============
// 标题加粗
.title-bold {
font-weight: bold;
font-size: 17px;
}
// 标题左侧颜色
.title-left-color {
border-left: 5px solid #21acfc;
padding-left: 10px;
}
.treeCard .el-card__header {
height: 42px;
line-height: 42px;
background: #e1edf4;
padding: 0 0 0 10px !important;
}
.tableCard .el-card__header {
height: 42px;
line-height: 42px;
background: #edeef1;
padding: 0 0 0 10px !important;
}
.tableHeader .el-table__header-wrapper {
height: 42px;
line-height: 42px;
background: #edeef1;
padding: 0 0 0 0 !important;
transform: translateY(0px);
}
.tableHeader .has-gutter {
transform: translateY(-12px);
}
// .elTree{
// background:#f4f4f4!important;
// }
// 二级菜单
.monitor_menu {
.menu_item {
width: 120px;
height: 46px;
line-height: 46px;
text-align: center;
color: #ccc;
box-shadow: 0px 0 2px #000 !important;
background-image: linear-gradient(to top, #335274, #4d759a) !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3) !important;
}
.is-active {
color: #fff !important;
background: linear-gradient(
0deg,
rgba(33, 172, 252, 1),
rgba(48, 136, 193, 1)
) !important;
}
ul {
a:nth-child(1) {
li {
border-radius: 9px 0 0 9px !important;
}
}
a:last-child {
li {
border-radius: 0 9px 9px 0 !important;
}
}
}
}
//-- 公共样式--//
</style>
src/App copy.vue deleted 100644 → 0
View file @ aa70b8f2
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
<div>
<div v-for="(item,index) in showList" :key='index' v-if="index < 4 && ishowAlarm">
<div :class="'tip'+(index+1)">
<div class="title">
<el-row :span='24'>
<el-col :sm='15' style="color:red;font-size:20px;">{{item.eventName}}
</el-col>
<el-col :sm='9' style="text-align:right;padding-right:10px;">等级：
<span class="tip_level" v-if="item.eventLevel ==1" style="color:red">特别重大</span>
<span class="tip_level" v-if="item.eventLevel ==2" style="color:red">重大</span>
<span class="tip_level" v-if="item.eventLevel ==3">一般</span>
</el-col>
</el-row>
</div>
<el-divider></el-divider>
<div class="tip_warp">
<el-row class="tip_content" type='flex' justify="space-around">
<el-col :span='15'>
<el-row :span='24'>
<el-col :span='24' style="color:red">报警地点：{{item.occurrenceSite}}
</el-col>
<el-col :span='24'>报警时间：{{item.occurrenceTime}}</el-col>
<el-col :title="item.type" :span='24'>报警类型：{{item.eventName}}
</el-col>
<el-col :title="item.resourceName+item.eventName" :span='24'>
报警说明：{{item.resourceName}}{{item.eventName}}
</el-col>
</el-row>
</el-col>
<el-col class="tip_imgwarp" :span='8'>
<img v-if="item.path" :src="urlPath + item.path" alt="">
<img v-else src="./assets/images/videoImg.png" alt="">
</el-col>
</el-row>
<el-row class="btn_warp alarms_warp" type='flex' justify="space-around">
<el-col :span='3' :offset='1'>
<el-button class="tip_btn" type="primary" size="medium" round @click="doBtn(item)">去处理
</el-button>
</el-col>
<el-col :span='4'>
<el-button class="tip_btn" type="info" size="medium" round @click="closeTip(item.id,index)">关闭
</el-button>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<dispose-info v-if='queryDetailVisible' ref='queryDetail'></dispose-info>
<el-dialog :close-on-click-modal='false' title="申请接管站点信息" :visible.sync="dialogVisible" width="30%"
class="takeover_dialog" :before-close="takeoverClose" :show-close='false'>
<div slot='title'>
<span class="title-bold">申请接管站点信息</span>
</div>
<el-form ref="takeoverForm" :model="takeoverInfo" label-width="140px" size="mini">
<el-form-item label="申请接管站点单位：">
<font>{{takeoverInfo.takeoverOrgName}}</font>
</el-form-item>
<el-form-item label="申请人：">
<font>{{takeoverInfo.applyUserName}}</font>
</el-form-item>
<el-form-item label="接管类型：">
<font>{{takeoverInfo.takeoverType ===1 ? '主动接管' : '被动接管'}}</font>
</el-form-item>
<el-form-item label="申请时间：">
<font>{{takeoverInfo.applyTime}}</font>
</el-form-item>
<el-form-item label="申请理由：">
<font>{{takeoverInfo.reason}}</font>
</el-form-item>
</el-form>
<div slot="footer" align='center'>
<el-button class="btn" type="primary" @click='disagree'>拒绝</el-button>
<el-button class="btn" type="primary" @click='agreed'>同意</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import util from '@/libs/util.js'
import DisposeInfo from '@/pages/alarms/untreated/dispose-info'
import { mapActions } from 'vuex'
import $ from 'jquery'
export default {
name: 'app',
provide() {
return {
reload: this.reload
}
},
data() {
return {
ishowAlarm: true,
dialogVisible: false,
isRouterAlive: true,
queryDetailVisible: false,
urlPath: window.CONFIG.urlPath,
tipList: [],
showList: [],
src: window.CONFIG.bimPath,
takeoverInfo: ''
}
},
components: {
DisposeInfo
},
watch: {
takeover(newValue) {
// console.log(2222, newValue)
if (newValue) {
this.takeoverInfo = newValue
this.dialogVisible = true
} else {
this.dialogVisible = false
}
}
},
computed: {
takeover() {
return this.$store.state.d2admin.takeover.takeover
}
},
mounted() {
//let token = util.cookies.get('token')
this.initWebSocket()
this.initWebSocket2()
this.getDateList()
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
},
destroyed() {
this.websocketclose()
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
},
methods: {
...mapActions('d2admin/account', ['logout']),
beforeunloadHandler(){
this._beforeUnload_time=new Date().getTime();
// return e.returnValue='ssssss'
},
unloadHandler(e){
let that=this
this._gap_time=new Date().getTime()-this._beforeUnload_time;
//判断是窗口关闭还是刷新
if(this._gap_time<=5){
//如果是登录状态，关闭窗口前
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != undefined){
// util.cookies.set('close####',that.$http.adornUrl('/sys/logout'))
if(navigator.sendBeacon){
let result= navigator.sendBeacon(that.$http.adornUrl('/sys/logout'));
if(result){
util.cookies.set('success',result)
}else{
util.cookies.set('error',result)
}
}
// $.ajax({
// type: 'POST',
// url:that.$http.adornUrl('/sys/logout'),
// async:false,
// success:function(data){
// util.cookies.set('success',data)
// localStorage.setItem('success',JSON.stringify(data))
// },
// error:function(err){
// util.cookies.set('error',err)
// localStorage.setItem('erroe',JSON.stringify(err))
// }
// })
// this.logout({
// vm: that,
// confirm: true
// })
// this.$http({
// url: this.$http.adornUrl('/sys/logout'),
// method: 'post',
// data: this.$http.adornData()
// }).then(data => {
// if (data && data.code === 0) {
// util.cookies.set('aaaaa','xxxxxxxxxx')
// }
// }).catch(()=>{
// util.cookies.set('bbbbbb','xxxxxxxxxx')
// })
}
}
},
sendMessage(code) {
setTimeout(() => {
if (!this.$refs.iframe) {
return
}
this.$refs.iframe.contentWindow.postMessage({
func: 'alarm',
data: {
code: code
}
}, this.src)
}, 1000)
},
reload() {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
},
//初始化weosocket
initWebSocket() {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持WebSocket')
return false
}
// websocket地址？
const wsuri = this.$http.adornUrl('').slice(5)
console.log('wsuriLog:' + wsuri)
let webpath = ''
//wsuri.substring(0, wsuri.indexOf(':'))
if (wsuri != null && wsuri.indexOf(':') <= -1) {
webpath = 'ws://api.crsh.cn:8091/websocket/1001'
} else {
webpath = 'ws:' + wsuri.substring(0, wsuri.indexOf(':')) + ':8091/websocket/1001'
}
console.log('webpathLog:' + webpath)
this.websock = new WebSocket(webpath)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.websocketclose
},
//连接成功
websocketonopen() {
console.log('WebSocket连接成功')
// this.send()
},
//接收后端返回的数据
websocketonmessage(e) {
console.log('takeover:', sessionStorage.getItem('takeover'))
if (sessionStorage.getItem('takeover') != undefined && sessionStorage.getItem('takeover') == 'true') {
this.ishowAlarm = false
} else {
this.ishowAlarm = true
}
// 在这里使用后端返回的数据，对数据进行处理渲染
// this.tipList = []
this.showList = []
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != undefined) {
// if (util.cookies.get('token') && util.cookies.get('token') != undefined) { //登录才能获取
// this.tipList = JSON.parse(e.data)
var alarmsInfo = JSON.parse(e.data)
//console.log(alarmsInfo, '-------')
if (alarmsInfo.status != 1) {
for (var i in this.tipList) {
if (alarmsInfo.id === this.tipList[i].id) {
this.tipList.splice(i, 1)
break
}
}
} else {
for (var index in this.tipList) {
if (alarmsInfo.id === this.tipList[index].id) {
this.tipList.splice(index, 1)
break
}
}
this.tipList.push(alarmsInfo)
this.sendMessage(alarmsInfo.resourceCode)
this.tipList.sort(this.sortBy('occurrenceTime', false)) //按发生时间降序
var alarmId = this.$store.state.d2admin.alramfj.alarmId
var num = 0
if (alarmId && alarmId.substring(0, alarmId.indexOf('-')) === alarmsInfo.id) {
num = Number(alarmId.substring(alarmId.indexOf('-') + 1)) + 1
this.$store.dispatch('d2admin/alramfj/set', alarmsInfo.id + '-' + num)
} else {
this.$store.dispatch('d2admin/alramfj/set', alarmsInfo.id + '-0')
}
// console.log(this.$store.state.d2admin.alramfj.alarmId)
// console.log(this.$store.state.d2admin.alramfj.alarmId.substring(0,this.$store.state.d2admin.alramfj.alarmId.indexOf('-')))
}
if (this.tipList.length < 4) {
this.tipList.forEach(element => {
this.showList.push(element)
})
} else if (this.tipList.length >= 4) {
for (let index = 0; index < 4; index++) {
this.showList.push(this.tipList[index])
}
}
if (this.showList) {
this.showList.sort(this.sortBy('occurrenceTime', true))
}
//console.log(this.showList, '----------')
// console.log(this.showList[0].hmdfj.path, '1----------1')
// console.log(this.showList[0].hmdfjPath, '1----------1')
// console.log(this.tipList, '+++++++++')
// console.log(this.tipList[0].hmdfj.path, '2----------2')
// console.log(this.tipList[0].hmdfjPath, '2----------2')
this.$store.dispatch('d2admin/toast/set', this.tipList.length)
}
},
//连接建立失败重连
websocketonerror(e) {
console.log(`连接失败的信息：`, e)
this.initWebSocket() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose(e) {
console.log('断开连接', e)
},
send() {
this.websock.send('1')
},
// ====================================
//初始化weosocket2
initWebSocket2() {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持WebSocket')
return false
}
// websocket地址？
const wsuri = this.$http.adornUrl('').slice(5)
console.log('wsuriLog:' + wsuri)
let webpath = ''
//wsuri.substring(0, wsuri.indexOf(':'))
if (wsuri != null && wsuri.indexOf(':') <= -1) {
webpath = 'ws://api.crsh.cn:8091/websocket/1002'
} else {
webpath = 'ws:' + wsuri.substring(0, wsuri.indexOf(':')) + ':8091/websocket/1002'
}
console.log('webpathLog:' + webpath)
this.websock2 = new WebSocket(webpath)
this.websock2.onopen = this.websocketonopen2
this.websock2.onmessage = this.websocketonmessage2
this.websock2.onerror = this.websocketonerror2
this.websock2.onclose = this.websocketclose2
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.websocketclose2
},
//连接成功
websocketonopen2() {
console.log('WebSocket连接成功2')
// this.takeoverInfo = 1
// this.send2()
},
//接收后端返回的数据
websocketonmessage2(e) {
// 在这里使用后端返回的数据，对数据进行处理渲染
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != undefined) { //登录才能获取
// this.tipList = JSON.parse(e.data)
console.log('接管数据' + e.data)
let st = e.data.split('_')[0]
let bean = JSON.parse(e.data.split('_')[1])
if (st === 'one') {
//重连查询接管信息--站点用
if (bean) {
sessionStorage.setItem('takeover', true)
} else {
sessionStorage.removeItem('takeover')
}
return
} else if (st === 'list') {
//重连查询---线路路网用
return
}
if (bean && bean.status === 1) {
// 申请接管
this.takeoverInfo = bean
this.dialogVisible = true
} else if (bean && bean.status === 5 && bean.valids === 0) {
// 提示断开接管
sessionStorage.removeItem('takeover')
this.$message.warning(bean.lineName + '放弃了对此站点的接管')
// this.dialogVisible = false
this.ishowAlarm = true
} else if (bean && bean.valids === 1 && bean.status === 2) {
console.log('同意接管1111111111')
this.ishowAlarm = false
this.$message.success('同意了接管申请')
sessionStorage.setItem('takeover', true)
this.clickClose(bean.id)
} else if (bean && bean.valids === 1 && bean.status === 3) {
this.ishowAlarm = true
this.$message.success('拒绝了接管申请')
sessionStorage.removeItem('takeover')
this.$store.dispatch('d2admin/takeover/set', true)
this.clickClose(bean.id)
} else if (bean && bean.valids === 0 && bean.status === 4) {
sessionStorage.removeItem('takeover')
this.$message.success('中断了接管')
this.ishowAlarm = true
}
this.$store.dispatch('d2admin/takeover/set', true)
// console.log(this.takeoverInfo, '-------')
}
},
//关闭连接
takeoverClose() {
//直接关闭
this.takeoverInfo = {}
this.dialogVisible = false
this.$store.dispatch('d2admin/takeover/setTakeover', null)
},
clickClose(id) {
if (id && id === this.takeoverInfo.id) {
//有id的话只关闭id跟后台传递过来id相同的弹出层，不一样不关。防止一边同意一边立马申请，申请后发的但是先到了。websocket先发但是后到
console.log('关闭的时候', this.takeoverInfo)
//只关闭id跟返回的id一样的数据
this.takeoverClose()
}
},
//连接建立失败重连
websocketonerror2(e) {
console.log(`连接失败的信息2：`, e)
this.initWebSocket2() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose2(e) {
console.log('断开连接2', e)
},
send2() {
this.websock.send('2')
},
// 同意被接管
agreed() {
let item = this.takeoverInfo
item.status = 2
// 修改表中数据
this.$http({
url: this.$http.adornUrl('/sysStationTakeover/agree'),
method: 'post',
data: item
}).then(data => {
if (data && data.code === 0) {
// this.$message.success('操作成功')
sessionStorage.setItem('takeover', true)
this.takeoverClose()
location.reload(true)
}
})
},
// 不同意
disagree() {
let item = this.takeoverInfo
item.status = 3
// 修改表中数据
this.$http({
url: this.$http.adornUrl('/sysStationTakeover/agree'),
method: 'post',
data: item
}).then(data => {
if (data && data.code === 0) {
// this.$message.success('操作成功')
sessionStorage.removeItem('takeover')
this.$store.dispatch('d2admin/takeover/set', true)
this.takeoverClose()
}
})
},
// ====================================
//登录后页面刷新的时候获取
getDateList() {
console.log('takeover:', sessionStorage.getItem('takeover'))
if (sessionStorage.getItem('takeover') != undefined && sessionStorage.getItem('takeover') == 'true') {
this.ishowAlarm = false
} else {
this.ishowAlarm = true
}
console.log('ishowAlarm:', this.ishowAlarm)
this.tipList = []
this.showList = []
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != undefined) {
this.$http({
url: this.$http.adornUrlAlarm('/alarmsInfo/queryList'),
method: 'post',
params: this.$http.adornParams({
status: 1,
stationId: localStorage.getItem('stationId')
})
}).then(data => {
if (data && data.code === 0) {
this.tipList = data.list
if (this.tipList.length < 4) {
this.tipList.forEach(element => {
this.showList.push(element)
})
} else if (this.tipList.length >= 4) {
for (let index = 0; index < 4; index++) {
this.showList.push(this.tipList[index])
}
}
if (this.showList) {
this.showList.sort(this.sortBy('occurrenceTime', true))
}
// console.log(this.tipList, '-------')
// console.log(this.showList, '-------')
//console.log(this.showList, '1----------1')
this.$store.dispatch('d2admin/toast/set', this.tipList.length)
}
})
} else {
//清空接管提示框
this.$store.dispatch('d2admin/takeover/setTakeover', null)
}
},
/**数组根据数组对象中的某个属性值进行排序的方法
* 使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
* @param attr 排序的属性 如number属性
* @param rev true表示升序排列，false降序排序
* */
sortBy: function (attr, rev) {
//第二个参数没有传递 默认升序排列
if (rev == undefined) {
rev = 1
} else {
rev = (rev) ? 1 : -1
}
return function (a, b) {
a = a[attr]
b = b[attr]
if (a < b) {
return rev * -1
}
if (a > b) {
return rev * 1
}
return 0
}
},
doBtn(item) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(item)
})
},
closeTip(id, index) {
var ruleForm = {
id: id,
status: 2,
beSend: true
}
this.$http({
url: this.$http.adornUrlAlarm(
`/alarmsInfo/update`
),
method: 'post',
data: ruleForm
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
//目前websocket未移到alarms项目，使用下列关闭
// this.tipList.splice(index, 1)
// console.log(this.showList, '-------')
this.$store.dispatch('d2admin/toast/set', this.tipList.length)
} else {
this.$message.error(data.msg)
}
})
}
}
}
</script>
<style lang="scss">
@import "~@/assets/style/public-class.scss";
// .takeover_warp {
// width: 400px;
// height: 220px;
// position: fixed;
// z-index: 100;
// bottom: 80px;
// right: 20px;
// border: 1px solid #ccc;
// background: white;
// .title {
// width: 100%;
// height: 30px;
// line-height: 30px;
// text-indent: 10px;
// border-bottom: 1px solid #ccc;
// i {
// float: right;
// line-height: 30px;
// margin-right: 5px;
// }
// }
// .info {
// width: 400px;
// text-indent: 20px;
// div {
// margin-top: 5px;
// }
// }
// .btn_group {
// text-align: center;
// margin-top: 15px;
// .btn {
// width: 100px;
// height: 30px;
// line-height: 30px;
// }
// /deep/.el-button {
// padding: 0 !important;
// }
// }
// }
.takeover_dialog {
.el-form-item--mini.el-form-item {
margin-bottom: 0 !important;
}
}
// body{
// padding-right:0 !important
// }
// openlayer 样式
.resource-container {
.ol-overviewmap {
left: 89%;
button {
display: none;
}
}
}
// -----------
.d2-layout-header-aside-group .d2-layout-header-aside-content .d2-theme-container .d2-theme-container-main .d2-theme-container-main-body .container-component .d2-container-full .d2-container-full__body {
margin-bottom: 50px;
}
//-- 公共样式--//
// page页背景色
.d2-container-full__body {
background-color: #b9c9e3 !important;
}
// 状态-点
// .danger,
// .success,
// .warning {
// width: 5px;
// height: 5px;
// border-radius: 100%;
// background: #ff3723;
// display: inline-block;
// vertical-align: middle;
// }
// .success {
// background: #42cd00;
// }
// .warning {
// background: #ffa101;
// }
// 弹出框
.el-dialog__title {
line-height: 24px;
font-size: 18px;
color: #303133;
padding-left: 10px;
}
.el-dialog__header {
border-top: 3px solid #21acfc;
padding: 14px 20px 10px !important;
background-color: #edeef1;
border-bottom: 1px solid #e9e9e9;
}
// 自定义===============
// 标题加粗
.title-bold {
font-weight: bold;
font-size: 17px;
}
// 标题左侧颜色
.title-left-color {
border-left: 5px solid #21acfc;
padding-left: 10px;
}
.treeCard .el-card__header {
height: 42px;
line-height: 42px;
background: #e1edf4;
padding: 0 0 0 10px !important;
}
.treeCard>div {
padding: 0 !important;
}
.tableCard .el-card__header {
height: 42px;
line-height: 42px;
background: #edeef1;
padding: 0 0 0 10px !important;
}
.tableHeader .el-table__header-wrapper {
height: 42px;
line-height: 42px;
background: #edeef1;
padding: 0 0 0 0 !important;
transform: translateY(0px);
}
.tableHeader .has-gutter {
transform: translateY(-12px);
}
// .elTree{
// background:#f4f4f4!important;
// }
// 二级菜单
.monitor_menu {
.menu_item {
width: 120px;
height: 46px;
line-height: 46px;
text-align: center;
color: #ccc;
box-shadow: 0px 0 2px #000 !important;
background-image: linear-gradient(to top, #335274, #4d759a) !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3) !important;
}
.is-active {
color: #fff !important;
background: linear-gradient(0deg,
rgba(33, 172, 252, 1),
rgba(48, 136, 193, 1)) !important;
}
ul {
a:nth-child(1) {
li {
border-radius: 9px 0 0 9px !important;
}
}
a:last-child {
li {
border-radius: 0 9px 9px 0 !important;
}
}
}
}
.el-table .cell {
/*display: flex;*/
/*justify-content: center;*/
}
//-- 公共样式--//
.my_checkbox {
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #32A5EA !important;
}
.el-checkbox__input.is-disabled+span.el-checkbox__label {
color: #606266;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
background-color: #FFF;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #32A5EA;
border-color: #32A5EA;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
border-color: #FFF;
}
}
.my_radio {
.el-radio__input.is-disabled+span.el-radio__label {
color: #606266;
}
.el-radio__input.is-checked+.el-radio__label {
color: #32A5EA !important;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #32A5EA;
background: #32A5EA;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
background-color: #F5F7FA;
}
.el-radio__input.is-disabled .el-radio__inner {
background-color: #FFF;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner {
border-color: #32A5EA;
background: #32A5EA;
}
}
.mycard {
/* width: 80% !important; */
margin: 0 auto !important;
}
.mywidth {
width: 100% !important;
}
.box_main {
margin-top: 10px;
padding: 10px 20px !important;
background-color: white;
.el-card {
border: 0;
box-shadow: 0 0 !important;
.el-table {
border-left: 1px solid #EBEEF5;
border-right: 1px solid #EBEEF5;
border-top: 1px solid #EBEEF5;
}
}
.el-card__body {
/*padding: 20px 10px 0 10px;*/
/*padding-bottom: 0;*/
padding: 0;
}
}
//文本域样式
.el-textarea__inner {
// font: 400 13.3333px Arial;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
}
//按钮样式
.el-button--text {
font-size: 14px !important;
font-family: Arial, Helvetica, sans-serif !important;
}
//el-step步骤样式
.is-vertical {
flex-basis: auto !important;
}
.d2-theme-container-main-body {
/*background-color: white !important;*/
}
.box_footer {
background-color: white;
}
.el-icon-back2 {
background: url(assets/images/icon/back.png) center no-repeat;
background-size: cover;
}
.el-icon-back2:before {
content: "替";
font-size: 10px;
visibility: hidden;
}
.el_container-style {
padding: 0px;
height: 77.6vh;
}
.el_header-style {
height: 42px !important;
line-height: 42px;
border: 1px solid rgba(195, 195, 195, 1);
background: #f4f4f4;
}
.el-table td div {
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.el-table td,
.el-table th {
padding: 0 !important;
line-height: 49px;
height: 49px;
}
</style>
<style lang="scss" scoped>
.tip1 {
width: 400px;
height: 220px;
position: fixed;
z-index: 100;
bottom: 80px;
right: 10px;
border: 1px solid #ccc;
background: white;
.title {
height: 40px;
line-height: 40px;
text-indent: 15px;
// color: #fff;
background: #f1f5f8;
span {
font-size: 17px;
font-weight: 400;
}
}
.tip_warp {
height: 180px;
background: #f1f5f8;
.tip_content {
padding: 10px;
color: #000000;
.tip_level {
font-size: 17px;
color: red;
}
}
.tip_imgwarp {
img {
width: 130px;
height: 85px;
}
}
.btn_warp {
padding-top: 10px;
.tip_btn {
width: 80px;
}
}
}
}
.tip2 {
width: 400px;
height: 220px;
position: fixed;
z-index: 100;
bottom: 80px;
right: 420px;
border: 1px solid #ccc;
background: white;
.title {
height: 40px;
line-height: 40px;
text-indent: 15px;
// color: #fff;
background: #f1f5f8;
span {
font-size: 17px;
font-weight: 400;
}
}
.tip_warp {
height: 180px;
background: #f1f5f8;
.tip_content {
padding: 10px;
color: #000000;
.tip_level {
font-size: 17px;
color: red;
}
}
.tip_imgwarp {
img {
width: 130px;
height: 85px;
}
}
.btn_warp {
padding-top: 10px;
.tip_btn {
width: 80px;
}
}
}
}
.tip3 {
width: 400px;
height: 220px;
position: fixed;
z-index: 100;
bottom: 80px;
right: 830px;
border: 1px solid #ccc;
background: white;
.title {
height: 40px;
line-height: 40px;
text-indent: 15px;
// color: #fff;
background: f1f5f8;
span {
font-size: 17px;
font-weight: 400;
}
}
.tip_warp {
height: 180px;
background: #f1f5f8;
.tip_content {
padding: 10px;
color: #000000;
.tip_level {
font-size: 17px;
color: red;
}
}
.tip_imgwarp {
img {
width: 130px;
height: 85px;
}
}
.btn_warp {
padding-top: 10px;
.tip_btn {
width: 80px;
}
}
}
}
.tip4 {
width: 400px;
height: 220px;
position: fixed;
z-index: 100;
bottom: 80px;
right: 1240px;
border: 1px solid #ccc;
background: white;
.title {
height: 40px;
line-height: 40px;
text-indent: 15px;
// color: #fff;
background: f1f5f8;
span {
font-size: 17px;
font-weight: 400;
}
}
.tip_warp {
height: 180px;
background: #f1f5f8;
.tip_content {
padding: 10px;
color: #000000;
.tip_level {
font-size: 17px;
color: red;
}
}
.tip_imgwarp {
img {
width: 130px;
height: 85px;
}
}
.btn_warp {
padding-top: 10px;
.tip_btn {
width: 80px;
}
}
}
}
.el-divider--horizontal {
margin: 1px 0;
padding: 1px 1px;
background: 0 0;
border-top: 1px dashed;
}
// ie 弹出层闪烁
.el-dialog__wrapper {
transition: none !important;
&.dialog-fade-enter-active {
transition: none !important;
-ms-animation: none !important;
}
&.dialog-fade-leave-active {
transition: none !important;
-ms-animation: none !important;
}
}
</style>
src/layout/header-aside/imgs/logo2x.png
View replaced file @ aa70b8f2 View file @ 0c2ecc1c
src/layout/header-aside/imgs/logo2x.png

31.2 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png

14.3 KB | W: | H:

src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
src/layout/header-aside/imgs/logo2x.png
  • 2-up
  • Swipe
  • Onion skin
src/layout/header-aside/layout copy.vue deleted 100644 → 0
View file @ aa70b8f2
<template>
<div
class="d2-layout-header-aside-group"
:style="styleLayoutMainGroup"
:class="{grayMode: grayActive}"
>
<!-- 半透明遮罩 -->
<div class="d2-layout-header-aside-mask"></div>
<!-- 主体内容 -->
<div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 -->
<div
class="d2-theme-header"
:style="{
opacity: this.searchActive ? 0.5 : 1
}"
flex-box="0"
flex
>
<div
class="logo-group"
:style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
flex-box="0"
>
<img v-if="asideCollapse" class="img-logo-only" src="./imgs/logoOnly.png" />
<img v-else class="img-logo-all" src="./imgs/logo@2x.png" @click="out" />
</div>
<d2-menu-header class="menu-header" flex-box="1" />
<!-- 顶栏右侧 -->
<div class="d2-header-right" flex-box="0">
<!-- 当前时间 -->
<div class="current-time">{{time |formatDate}}</div>
<!-- 主题 -->
<d2-header-theme />
<d2-header-user />
<div class="user-img">
<img src="./imgs/user.png" alt />
<img
src="./imgs/out.png"
alt
style="width: 30px;height: 30px;opacity: 0.5;"
@click="logOff"
/>
</div>
</div>
</div>
<!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div
flex-box="0"
ref="aside"
class="d2-theme-container-aside"
:style="{
width: asideCollapse ? asideWidthCollapse : asideWidth,
opacity: this.searchActive ? 0.5 : 1
}"
>
<d2-menu-side />
</div>
<!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex>
<!-- 内容 -->
<transition name="fade-scale">
<div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<!-- tab -->
<!-- <div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs separator-class="el-icon-arrow-right" />
</div> -->
<!-- <sys></sys> -->
<!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view />
</keep-alive>
</transition>
</div>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search'
export default {
name: 'd2-layout-header-aside',
mixins: [mixinSearch],
components: {
'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'),
'd2-tabs': () => import('./components/tabs'),
'd2-header-fullscreen': () => import('./components/header-fullscreen'),
// "d2-header-search": () => import("./components/header-search"),
'd2-header-size': () => import('./components/header-size'),
'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'),
'd2-header-error-log': () => import('./components/header-error-log')
},
data() {
return {
// [侧边栏宽度] 正常状态
asideWidth: '220px',
// [侧边栏宽度] 折叠状态
asideWidthCollapse: '65px',
time: new Date(),
timer: null
}
},
mounted() {
this.getDate()
},
filters: {
formatDate: function(value) {
let date = new Date(value)
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? '0' + MM : MM
let d = date.getDate()
d = d < 10 ? '0' + d : d
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
let h = date.getHours()
h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return `${y}年${MM}月${d}日 ${getWeek} ${h}:${m}:${s}`
}
},
computed: {
...mapState('d2admin', {
keepAlive: state => state.page.keepAlive,
grayActive: state => state.gray.active,
transitionActive: state => state.transition.active,
asideCollapse: state => state.menu.asideCollapse
}),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting'
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
...(this.themeActiveSetting.backgroundImage
? {
backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
}
: {})
}
}
},
methods: {
...mapActions('d2admin/menu', ['asideCollapseToggle']),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside() {
this.asideCollapseToggle()
},
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true
})
},
getDate() {
let _this = this
this.timer = setInterval(() => {
_this.time = new Date()
}, 1000)
},
out() {
this.$router.push('/')
}
}
}
</script>
<style lang="scss">
.current-time {
height: 70px;
line-height: 70px;
margin-right: 110px;
font-size: 12px;
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
.toggle-aside-btn {
img {
margin-top: 2px;
vertical-align: middle;
}
}
.refresh-btn {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
img {
vertical-align: middle;
}
}
.user-img {
img {
vertical-align: middle;
width: 21px;
height: 21px;
margin-right: 35px;
}
}
.drop-down img {
transform: translateX(-15px);
}
.d2-layout-header-aside-group {
// background-image: none !important;
// background-color: white !important;
}
.d2-theme-header {
height: 70px !important;
display: flex;
align-items: center;
position: relative !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
}
// 菜单
.menu-header {
width: 100%;
height: 64px;
// position: absolute;
// top: 73px;
// left: 0;
// background: rgba(255, 255, 255, 1);
}
// 头部右侧
.d2-header-right {
height: 70px !important;
line-height: 70px !important;
position: absolute;
top: 0;
right: 0;
}
//tab整体
.d2-theme-container {
transform: translateY(60px);
}
// 注册主题
@import "~@/assets/style/theme/register.scss";
// 左上角logo
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-header
.logo-group
img {
height: 36px;
vertical-align: middle;
}
.img-logo-only {
width: 36px;
height: 36px;
vertical-align: middle;
}
.img-logo-all {
width: 165px;
height: 36px;
vertical-align: middle;
}
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:hover {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .theme-tx1
// .d2-theme-header
// .el-menu
// .el-submenu.is-active
// .el-submenu__title:hover {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .theme-tx1 .d2-theme-header .el-menu .el-submenu.is-active .el-submenu__title {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item.is-active {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .el-menu-item.is-hover {
// color: #02b90d !important;
// }
.el-submenu__title {
color: #545454 !important;
}
// .theme-tx1 .d2-theme-header .el-menu .el-submenu.is-active .el-submenu__title {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-main
// .d2-theme-container-main-header
// .d2-multiple-page-control
// .el-tabs__nav
// .el-tabs__item.is-active {
// color: #02b90d;
// background-color: #fff;
// border-bottom-color: #fff;
// }
.theme-tx1
.d2-theme-container
.d2-theme-container-aside
.el-menu
.el-menu-item {
border-left: none !important;
}
// icon
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-aside
// .el-menu
// .el-menu-item.is-active
// i {
// color: #02b90d;
// }
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-aside
// .el-menu
// .el-menu-item.is-active
// i:hover {
// color: #02b90d;
// }
// .theme-tx1 .d2-theme-header .toggle-aside-btn i:hover {
// color: #02b90d;
// }
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-aside
// .el-menu
// .el-menu-item:hover
// i {
// color: #02b90d;
// }
// .theme-tx1
// .d2-theme-header
// .d2-theme-header-menu
// .d2-theme-header-menu__prev:hover,
// .theme-tx1
// .d2-theme-header
// .d2-theme-header-menu
// .d2-theme-header-menu__next:hover {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
// .theme-tx1
// .d2-theme-header
// .el-menu
// .el-submenu
// .el-submenu__title:hover
// .el-submenu__icon-arrow {
// color: #02b90d;
// }
.theme-tx1 .d2-theme-header .el-menu .el-menu-item.is-active i.fa::before {
display: none !important;
}
.fa-file-o:before {
// content: "\F016";
display: none;
}
.theme-tx1 .d2-theme-header .el-menu .el-submenu .el-submenu__title i.fa {
display: none;
}
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-aside
// .el-submenu
// .el-submenu__title:hover {
// color: #02b90d !important;
// }
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-container
.d2-theme-container-aside
.d2-layout-header-aside-menu-side {
// background: rgba(249, 249, 249, 1);
}
.theme-tx1
.d2-theme-container
.d2-theme-container-aside
.el-menu
.el-menu-item {
border-left: 3px solid rgba(249, 249, 249, 1);
}
// .theme-tx1
// .d2-theme-container
// .d2-theme-container-aside
// .el-menu
// .el-menu-item.is-active {
// border-left: 3px solid #02b90d;
// }
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:focus {
// color: #02b90d;
// background: rgba(255, 255, 255, 0.5);
// }
.theme-tx1
.d2-theme-container
.d2-theme-container-aside
.el-submenu
.el-submenu__title:hover
i {
color: #545454;
}
.theme-tx1
.d2-theme-container
.d2-theme-container-aside
.el-submenu
.el-submenu__title:hover
.el-submenu__icon-arrow {
color: #545454;
}
</style>
src/layout/header-aside/layout.vue
View file @ 0c2ecc1c
...@@ -93,6 +93,7 @@ ...@@ -93,6 +93,7 @@
<!-- 内容 --> <!-- 内容 -->
<transition name="fade-scale"> <transition name="fade-scale">
<div class="d2-theme-container-main-layer" flex="dir:top"> <div class="d2-theme-container-main-layer" flex="dir:top">
<home v-if="$route.matched[0].name == 'ol'"></home>
<sys v-if="$route.matched[0].name == 'sys'"></sys> <sys v-if="$route.matched[0].name == 'sys'"></sys>
<monitor v-if="$route.matched[0].name == 'monitor'"></monitor> <monitor v-if="$route.matched[0].name == 'monitor'"></monitor>
<access v-if="$route.matched[0].name == 'access'"></access> <access v-if="$route.matched[0].name == 'access'"></access>
...@@ -158,12 +159,13 @@ export default { ...@@ -158,12 +159,13 @@ export default {
'd2-menu-header': () => import('./components/menu-header'), 'd2-menu-header': () => import('./components/menu-header'),
'd2-header-theme': () => import('./components/header-theme'), 'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'), 'd2-header-user': () => import('./components/header-user'),
home: () => import('../../pages/ol/index.vue'),
sys: () => import('../../pages/sys/index.vue'), sys: () => import('../../pages/sys/index.vue'),
monitor: () => import('../../pages/monitor/index.vue'), monitor: () => import('../../pages/monitor/index.vue'),
patrol: () => import('../../pages/patrol/index.vue'), patrol: () => import('../../pages/patrol/index.vue'),
eq: () => import('../../pages/eq/index.vue'), eq: () => import('../../pages/eq/index.vue'),
alarms: () => import('../../pages/alarms/index.vue'), alarms: () => import('../../pages/alarms/index.vue'),
bim: () => import('./components/bim'), bim: () => import('./components/bim')
}, },
data() { data() {
return { return {
...@@ -176,7 +178,7 @@ export default { ...@@ -176,7 +178,7 @@ export default {
timer: null, timer: null,
logTimeout: null, logTimeout: null,
countNum: 0, countNum: 0,
station: '', station: ''
} }
}, },
mounted() { mounted() {
...@@ -207,7 +209,7 @@ export default { ...@@ -207,7 +209,7 @@ export default {
let getWeek = '星期' + weeks[week] let getWeek = '星期' + weeks[week]
// return `${y}/${MM}/${d} ${getWeek} ` // return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} ` return `${MM}/${d} ${getWeek} `
}, }
}, },
computed: { computed: {
...@@ -215,12 +217,12 @@ export default { ...@@ -215,12 +217,12 @@ export default {
keepAlive: (state) => state.page.keepAlive, keepAlive: (state) => state.page.keepAlive,
grayActive: (state) => state.gray.active, grayActive: (state) => state.gray.active,
transitionActive: (state) => state.transition.active, transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse, asideCollapse: (state) => state.menu.asideCollapse
}), }),
...mapState('d2admin/menu', ['header']), ...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']), ...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', { ...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting', themeActiveSetting: 'theme/activeSetting'
}), }),
/** /**
* @description 最外层容器的背景图片样式 * @description 最外层容器的背景图片样式
...@@ -233,12 +235,12 @@ export default { ...@@ -233,12 +235,12 @@ export default {
// } // }
// : {}) // : {})
} }
}, }
}, },
watch: { watch: {
size(val) { size(val) {
this.countNum = val this.countNum = val
}, }
}, },
methods: { methods: {
...mapActions('d2admin/account', ['logout']), ...mapActions('d2admin/account', ['logout']),
...@@ -248,7 +250,7 @@ export default { ...@@ -248,7 +250,7 @@ export default {
logOff() { logOff() {
this.logout({ this.logout({
vm: this, vm: this,
confirm: true, confirm: true
}) })
}, },
getDate() { getDate() {
...@@ -273,8 +275,8 @@ export default { ...@@ -273,8 +275,8 @@ export default {
if (!this.station || this.station == 'undefined') { if (!this.station || this.station == 'undefined') {
setTimeout(this.getStation, 3000) setTimeout(this.getStation, 3000)
} }
}, }
}, }
} }
</script> </script>
......
src/pages/login/login-img/logo2x.png
View replaced file @ aa70b8f2 View file @ 0c2ecc1c
src/pages/login/login-img/logo2x.png

31.2 KB | W: | H:

src/pages/login/login-img/logo2x.png

14.3 KB | W: | H:

src/pages/login/login-img/logo2x.png
src/pages/login/login-img/logo2x.png
src/pages/login/login-img/logo2x.png
src/pages/login/login-img/logo2x.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/ol/demo/index.vue
View file @ 0c2ecc1c
...@@ -120,7 +120,7 @@ export default { ...@@ -120,7 +120,7 @@ export default {
return value.slice(0, 20) + '...' return value.slice(0, 20) + '...'
} }
return value return value
}, }
}, },
data() { data() {
return { return {
...@@ -147,7 +147,7 @@ export default { ...@@ -147,7 +147,7 @@ export default {
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'name', label: 'name',
level1: 'level', level1: 'level'
}, },
nodeKey: 'id', nodeKey: 'id',
station: {}, //当前选择的站点 station: {}, //当前选择的站点
...@@ -168,7 +168,7 @@ export default { ...@@ -168,7 +168,7 @@ export default {
tierName: '', tierName: '',
resourceId: '', resourceId: '',
sId: localStorage.getItem('stationId'), sId: localStorage.getItem('stationId'),
subCode: '01', subCode: '01'
}, },
currentNode: {}, currentNode: {},
dragAble: false, dragAble: false,
...@@ -183,20 +183,20 @@ export default { ...@@ -183,20 +183,20 @@ export default {
y: 0, y: 0,
w: 0, w: 0,
h: 0, h: 0,
status: false, status: false
}, },
vectorLayer: [], vectorLayer: [],
lineVectorLayer: [], lineVectorLayer: [],
resolutions: [], resolutions: [],
code: '', code: ''
} }
}, },
components: { components: {
QueryDetail, QueryDetail,
NoQueryDetail, NoQueryDetail
}, },
computed: { computed: {
...mapState('d2admin/bjCode', ['resourceCode']), ...mapState('d2admin/bjCode', ['resourceCode'])
}, },
mounted() { mounted() {
this.code = this.resourceCode this.code = this.resourceCode
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
val.split('+')[0] val.split('+')[0]
) )
//} //}
}, }
}, },
created() { created() {
that = this that = this
...@@ -242,7 +242,7 @@ export default { ...@@ -242,7 +242,7 @@ export default {
// 投影 // 投影
code: 'xkcd-image', code: 'xkcd-image',
units: 'pixels', units: 'pixels',
extent: extent, extent: extent
}) })
if (mapList.length > 0) { if (mapList.length > 0) {
for (var i = 0; i < mapList.length; i++) { for (var i = 0; i < mapList.length; i++) {
...@@ -251,9 +251,9 @@ export default { ...@@ -251,9 +251,9 @@ export default {
source: new ImageStatic({ source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址 url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection, projection: projection,
imageExtent: extent, imageExtent: extent
}), }),
visible: false, visible: false
}) })
this.imgLayerList.push(layerItem) this.imgLayerList.push(layerItem)
...@@ -265,14 +265,14 @@ export default { ...@@ -265,14 +265,14 @@ export default {
source: new ImageStatic({ source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址 url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection, projection: projection,
imageExtent: extent, imageExtent: extent
}), })
}), })
], ],
// layers:this.controlList, // layers:this.controlList,
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识 collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识 label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
collapsed: false, //初始为展开方式 collapsed: false //初始为展开方式
}) })
this.controlList.push(controlItem) this.controlList.push(controlItem)
...@@ -302,7 +302,7 @@ export default { ...@@ -302,7 +302,7 @@ export default {
let zoomControl = new Zoom({ let zoomControl = new Zoom({
delta: 0.2, delta: 0.2,
zoomInTipLabel: '', zoomInTipLabel: '',
zoomOutTipLabel: '', zoomOutTipLabel: ''
}) })
// 大图 // 大图
this.map = new Map({ this.map = new Map({
...@@ -317,10 +317,10 @@ export default { ...@@ -317,10 +317,10 @@ export default {
maxZoom: 5.0, maxZoom: 5.0,
minZoom: 1.5, minZoom: 1.5,
// extent: [-1100, -200, 1500, 1000] //[minX, minY, maxX, maxY] 控制拖动 // extent: [-1100, -200, 1500, 1000] //[minX, minY, maxX, maxY] 控制拖动
extent: [-1100, -100, 2000, 1000], //[minX, minY, maxX, maxY] 控制拖动 extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
//   extent: extent//[minX, minY, maxX, maxY] 控制拖动 //   extent: extent//[minX, minY, maxX, maxY] 控制拖动
}), })
}) })
// 删除默认的双击事件 // 删除默认的双击事件
const dblClickInteraction = this.map const dblClickInteraction = this.map
...@@ -460,17 +460,17 @@ export default { ...@@ -460,17 +460,17 @@ export default {
anchor: [0.5, 0.5], anchor: [0.5, 0.5],
scale: zoom || 0.4, scale: zoom || 0.4,
//rotation:0 旋转度 //rotation:0 旋转度
src: require('@/assets/images/' + src), src: require('@/assets/images/' + src)
}), }),
text: new Text({ text: new Text({
text: name, // 添加文字描述 text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小 font: '14px font-size', // 设置字体大小
fill: new Fill({ fill: new Fill({
// 设置字体颜色 // 设置字体颜色
color: 'black', color: 'black'
}), }),
offsetY: 30, // 设置文字偏移量 offsetY: 30 // 设置文字偏移量
}), })
}) })
return style return style
}, },
...@@ -501,14 +501,14 @@ export default { ...@@ -501,14 +501,14 @@ export default {
this.lineVectorLayer = new OlLayerVector({ this.lineVectorLayer = new OlLayerVector({
source: new OlSourceVector({ source: new OlSourceVector({
features: [], features: []
}), }),
style: new OlStyleStyle({ style: new OlStyleStyle({
stroke: new Stroke({ stroke: new Stroke({
color: '#409EFF', color: '#409EFF',
width: 3, width: 3
}), })
}), })
}) })
this.map.addLayer(this.lineVectorLayer) this.map.addLayer(this.lineVectorLayer)
...@@ -565,15 +565,15 @@ export default { ...@@ -565,15 +565,15 @@ export default {
this.vectorLayer = new OlLayerVector({ this.vectorLayer = new OlLayerVector({
source: new OlSourceVector({ source: new OlSourceVector({
features: featuresArr.concat(LinefeaturesArr), features: featuresArr.concat(LinefeaturesArr)
}), })
}) })
this.map.addLayer(this.vectorLayer) this.map.addLayer(this.vectorLayer)
}, },
getFeature(x, y) { getFeature(x, y) {
return new OlFeature({ return new OlFeature({
type: 'icon', type: 'icon',
geometry: new OlGeomPoint([x, y]), geometry: new OlGeomPoint([x, y])
}) })
}, },
sendMessage(lineId, stationId, code, type) { sendMessage(lineId, stationId, code, type) {
...@@ -589,8 +589,8 @@ export default { ...@@ -589,8 +589,8 @@ export default {
func: 'initPlatform', func: 'initPlatform',
data: { data: {
lineId: lineId, lineId: lineId,
stationId: stationId, stationId: stationId
}, }
}, },
this.src this.src
) )
...@@ -601,8 +601,8 @@ export default { ...@@ -601,8 +601,8 @@ export default {
func: 'initHall', func: 'initHall',
data: { data: {
lineId: lineId, lineId: lineId,
stationId: stationId, stationId: stationId
}, }
}, },
this.src this.src
) )
...@@ -614,8 +614,8 @@ export default { ...@@ -614,8 +614,8 @@ export default {
data: { data: {
lineId: lineId, lineId: lineId,
stationId: stationId, stationId: stationId,
code: code, code: code
}, }
}, },
this.src this.src
) )
...@@ -634,8 +634,8 @@ export default { ...@@ -634,8 +634,8 @@ export default {
data: { data: {
lineId: lineId, lineId: lineId,
stationId: stationId, stationId: stationId,
code: code, code: code
}, }
}, },
this.src this.src
) )
...@@ -662,7 +662,7 @@ export default { ...@@ -662,7 +662,7 @@ export default {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
closeOnClickModal: false, closeOnClickModal: false
}).then(() => { }).then(() => {
//左侧tree取消收藏按钮 //左侧tree取消收藏按钮
// console.log(node) // console.log(node)
...@@ -677,8 +677,8 @@ export default { ...@@ -677,8 +677,8 @@ export default {
method: 'post', method: 'post',
data: { data: {
resourceId: node.data.id, resourceId: node.data.id,
stationId: this.checkedData.sId, stationId: this.checkedData.sId
}, }
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message.success('取消收藏成功1111') this.$message.success('取消收藏成功1111')
...@@ -707,18 +707,18 @@ export default { ...@@ -707,18 +707,18 @@ export default {
dForm = { dForm = {
resourceId: node.id, resourceId: node.id,
byx1: '1', byx1: '1',
stationId: this.checkedData.sId, stationId: this.checkedData.sId
} }
} else { } else {
dForm = { dForm = {
resourceId: node.id, resourceId: node.id,
stationId: this.checkedData.sId, stationId: this.checkedData.sId
} }
} }
this.$http({ this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'), url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post', method: 'post',
data: dForm, data: dForm
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
if (data.msg === '收藏成功') { if (data.msg === '收藏成功') {
...@@ -804,8 +804,8 @@ export default { ...@@ -804,8 +804,8 @@ export default {
method: 'post', method: 'post',
data: { data: {
stationId: this.checkedData.sId, stationId: this.checkedData.sId,
name: this.searchInput, name: this.searchInput
}, }
}) })
.then((data) => { .then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
...@@ -836,7 +836,7 @@ export default { ...@@ -836,7 +836,7 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'), url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
method: 'get', method: 'get',
params: { stationId: this.checkedData.sId }, params: { stationId: this.checkedData.sId }
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.systemList = data.list this.systemList = data.list
...@@ -847,7 +847,7 @@ export default { ...@@ -847,7 +847,7 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'), url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
method: 'get', method: 'get',
params: { stationId: this.checkedData.sId }, params: { stationId: this.checkedData.sId }
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.iconNameListBottom = JSON.parse(JSON.stringify(data.list)) this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
...@@ -899,7 +899,7 @@ export default { ...@@ -899,7 +899,7 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrl(`/liStation/getId/${id}`), url: this.$http.adornUrl(`/liStation/getId/${id}`),
method: 'get', method: 'get',
params: this.$http.adornParams(), params: this.$http.adornParams()
}) })
.then((data) => { .then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
...@@ -988,17 +988,17 @@ export default { ...@@ -988,17 +988,17 @@ export default {
addBox(obj) { addBox(obj) {
this.boxVectorLayer = new OlLayerVector({ this.boxVectorLayer = new OlLayerVector({
source: new OlSourceVector({ source: new OlSourceVector({
features: [], features: []
}), }),
style: new OlStyleStyle({ style: new OlStyleStyle({
stroke: new Stroke({ stroke: new Stroke({
color: '#409EFF', color: '#409EFF',
width: 2, width: 2
}), }),
fill: new Fill({ fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)', color: 'rgba(0, 0, 255, 0.1)'
}), })
}), })
}) })
this.map.addLayer(this.boxVectorLayer) this.map.addLayer(this.boxVectorLayer)
//创建矩形对象 //创建矩形对象
...@@ -1006,8 +1006,8 @@ export default { ...@@ -1006,8 +1006,8 @@ export default {
let end = [obj.xlongit, obj.ylat] let end = [obj.xlongit, obj.ylat]
let boxFeature = new OlFeature({ let boxFeature = new OlFeature({
geometry: new Polygon([ geometry: new Polygon([
[start, [start[0], end[1]], end, [end[0], start[1]], start], [start, [start[0], end[1]], end, [end[0], start[1]], start]
]), ])
}) })
boxFeature.setId(obj.id + 'box') boxFeature.setId(obj.id + 'box')
this.boxVectorLayer.getSource().addFeature(boxFeature) this.boxVectorLayer.getSource().addFeature(boxFeature)
...@@ -1046,7 +1046,7 @@ export default { ...@@ -1046,7 +1046,7 @@ export default {
y: 0, y: 0,
w: 0, w: 0,
h: 0, h: 0,
status: false, status: false
} }
} }
// if (this.activeName == 1) { // if (this.activeName == 1) {
...@@ -1217,7 +1217,7 @@ export default { ...@@ -1217,7 +1217,7 @@ export default {
xpoint: node.p_xpoint, xpoint: node.p_xpoint,
ypoint: node.p_ypoint, ypoint: node.p_ypoint,
xlongit: node.p_xlongit, xlongit: node.p_xlongit,
ylat: node.p_ylat, ylat: node.p_ylat
} }
this.map.removeLayer(this.boxVectorLayer) this.map.removeLayer(this.boxVectorLayer)
this.addBox(pNode) this.addBox(pNode)
...@@ -1398,8 +1398,8 @@ export default { ...@@ -1398,8 +1398,8 @@ export default {
}) })
} }
} }
}, }
}, }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/pages/ol/index.vue 0 → 100644
View file @ 0c2ecc1c
<template>
<div>
<menu-component class="monitor_menu" :menuList="list" :active="active"></menu-component>
</div>
</template>
<script>
import menuComponent from '../components/menu-component'
import { mapState } from 'vuex'
export default {
data() {
return {
list: [],
active: ''
}
},
components: {
menuComponent
},
computed: {
...mapState('d2admin/menu', [
'header'
])
},
watch: {
'$route.matched': {
handler (val) {
this.$nextTick(() => {
this.active = ''
this.active = val[1].path
})
},
immediate: true
}
},
created () {
this.header.forEach(res => {
if (res.path === '/ol') {
this.list = res.list
this.active = this.$route.path
// this.active = res.list[0].path
// this.$router.push({
// path: res.list[0].path,
// })
}
})
}
}
</script>
src/pages/ol/kanban/index.vue 0 → 100644
View file @ 0c2ecc1c
<template>
<div>
看板
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
src/router/routes.js
View file @ 0c2ecc1c
...@@ -31,10 +31,11 @@ const frameIn = [ ...@@ -31,10 +31,11 @@ const frameIn = [
path: '/ol', path: '/ol',
name: 'ol', name: 'ol',
meta, meta,
redirect: { name: 'ol-demo' }, // redirect: { name: 'ol-demo' },
component: layoutHeaderAside, component: layoutHeaderAside,
children: (pre => [ children: (pre => [
{ path: 'demo', name: `${pre}demo`, component: () => import('@/pages/ol/demo'), meta: { ...meta, title: '电子地图' } } { path: 'demo', name: `${pre}demo`, component: () => import('@/pages/ol/demo'), meta: { ...meta, title: '电子地图' } },
{ path: 'kanban', name: `${pre}kanban`, component: () => import('@/pages/ol/kanban'), meta: { ...meta, title: '数据看板' } }
])('ol-') ])('ol-')
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment