Commit 73d1c7cf authored by 李苏's avatar 李苏 💬

单组件自适应高度,其他调整

parent 95534740
......@@ -11,7 +11,6 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => {
console.log(to,'route')
// console.log(store.state.user.token)
// NProgress.start()
if (getToken()) {
......
......@@ -241,6 +241,7 @@ const permission = {
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
console.log(sidebarRoutes,'sidebarRoutes')
rewriteRoutes.push({
path: '*',
redirect: '/404',
......
<template>
<div class="min_full">
<ShowEcharts :app='this' v-if="showDialog==true&&DialogTitle!='播放控制'&&DialogTitle!='回放'" />
<Hf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='播放控制'" />
<ShowHf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='回放'" />
<div class="min_full" :style="{
height:full?'100vh':'calc(100vh - 84px)'
}" >
<ShowEcharts :app='this' v-if="showDialog==true&&DialogTitle!='播放控制'&&DialogTitle!='回放'" />
<Hf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='播放控制'" />
<ShowHf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='回放'" />
<div class="tool-bar search">
<!-- svg 工具栏-->
<el-button icon="el-icon-video-play" @click='hf' size='mini' type="primary">回放</el-button>
<span style="margin-left: 20px;">{{time}}</span>
<!-- <el-button icon="el-icon-video-play" @click='hf' size='mini' type="primary">回放</el-button> -->
<span style="margin-left: 20px;line-height: 33px;">{{time}}</span>
</div>
<div ref="svg" v-html="nowHtml" class="svgBody">
......@@ -16,32 +18,49 @@
<script>
import {
realchartDown,apiLast
realchartDown,
apiLast
} from './api.js'
import ShowEcharts from './showEcharts.vue'
import Hf from './hf.vue'
import ShowHf from './showHf.vue'
/* WS 版本*/
import WebSocketClient from 'common/src/utils/ws/ws.js';
export default {
components:{
components: {
ShowEcharts,
Hf,
ShowHf
},
mounted() {
/* 自适应*/
this.$nextTick(()=>{
if($('#scrollPane')[0]){
(this.full=false)
}else{
(this.full=true)
}
})
this.timer01 = setInterval(() => {
this.time = new Date().Format("yyyy-MM-dd hh:mm:ss")
}, 1000)
this.timer02 = setInterval(() => {
if(this.metrics.length>0){
this.apiLast()
}else{
console.log('dom未读取到数据')
}
}, 1000)
// this.timer02 = setInterval(() => {
// if(this.metrics.length>0){
// this.apiLast()
// }else{
// console.log('dom未读取到数据')
// }
// }, 1000)
this.$nextTick(() => {
const url = this.$route.meta.url
this.baseUrl = this.id = this.matchString(url)[0]
this.getSvg()
/* 新建ws通信 */
})
},
beforeDestroy() {
......@@ -49,10 +68,11 @@
},
data() {
return {
full:false,
/* 弹框相关*/
DialogTitle:'',
DialogWidth:'50vw',
showDialog:false,
DialogTitle: '',
DialogWidth: '50vw',
showDialog: false,
id: '',
baseUrl: '',
time: '',
......@@ -62,17 +82,23 @@
metrics: [],
metricName: {},
/* 确定时获取最新的播放设置参数*/
bfszParams:{}
bfszParams: {},
/* ws*/
wsclient: null
}
},
beforeDestroy() {
this.wsclient.close()
}
,
methods: {
bfsz(bfsz){
this.bfszParams=bfsz
/* 获取后进行showHf的弹框*/
this.DialogWidth='60vw'
this.DialogTitle='回放'
setTimeout(()=>{
this.showDialog=true
bfsz(bfsz) {
this.bfszParams = bfsz
/* 获取后进行showHf的弹框*/
this.DialogWidth = '60vw'
this.DialogTitle = '回放'
setTimeout(() => {
this.showDialog = true
})
......@@ -110,8 +136,28 @@
// }
// })
/* jq*/
$(this.$refs.svg).find('text[tagid]').each((i, item)=>{
/* ws 连接*/
this.wsclient = new WebSocketClient();
this.wsclient.on('open', () => {
this.wsclient.send('Hello Server!');
});
this.wsclient.on('message', (data) => {
let obj = JSON.parse(data)
let dataList = obj.data
// let dataMap = {}
dataList.forEach(item=>{
$(this.$refs.svg).find(`text[tagid=${item.code}]`).text(item.value||'null')
})
/* 赋值svg*/
});
this.wsclient.apiConnect({
bsid:'iot/tag/all'
});
$(this.$refs.svg).find('text[tagid]').each((i, item) => {
var sTitle = "";
$(item).css("cursor", "pointer");
if ($(item).find("title").length > 0) {
......@@ -134,7 +180,7 @@
$(item).unbind().bind("click", (event) => {
event.preventDefault();
// sconsole.log(sTitle)
this.showEchart($(item).attr("tagid"),sTitle)
this.showEchart($(item).attr("tagid"), sTitle)
// divElemen.show();
// showChart(divElemen,'openlist',$(item).attr("tagid"),sTitle,$(item).attr("exp"));
// this.apiLast()
......@@ -146,26 +192,26 @@
})
},
apiLast(){
apiLast() {
apiLast({
metrics:this.metrics
}, this.id,new Date().getTime()).then(res=>{
res.forEach(item=>{
$(this.$refs.svg).find(`text[tagid=${item.metric}]`).text(item.value)
metrics: this.metrics
}, this.id, new Date().getTime()).then(res => {
res.forEach(item => {
$(this.$refs.svg).find(`text[tagid=${item.metric}]`).text(item.value)
})
})
},
hf() {
this.DialogWidth='30vw'
this.DialogTitle='播放控制'
this.showDialog=true
this.DialogWidth = '30vw'
this.DialogTitle = '播放控制'
this.showDialog = true
},
showEchart(tagid,title){
this.now_tagid=tagid
this.DialogWidth='70vw'
this.DialogTitle=title
this.showDialog=true
showEchart(tagid, title) {
this.now_tagid = tagid
this.DialogWidth = '70vw'
this.DialogTitle = title
this.showDialog = true
}
}
}
......@@ -177,12 +223,10 @@
width: 100%;
overflow: auto;
}
</style>
<style>
#LOADING{
display: none!important;
#LOADING {
display: none !important;
}
</style>
......@@ -27,6 +27,7 @@
async mounted() {
this.$nextTick(()=>{
/* 开始回放请求*/
/* bfszParams 的 start end 取药切割并且使用定时器进行多次请求然后时间戳满了之后需要自动关闭定时器*/
let params={
metrics:this.app.metrics,
...this.app.bfszParams
......
<template>
<div style=" height: calc(100vh - 84px);width: 100%;">
<div style=" height: calc(100vh - 84px);width: 100%;" :style="{
height:full?'100vh':'calc(100vh - 84px)'
}" >
<!-- 上半部分,占整个高度的一半 -->
<div v-echartResize="()=>{
iotChart.resize();
......@@ -31,6 +33,15 @@
mounted() {
// 初始化echarts
this.$nextTick(() => {
if($('#scrollPane')[0]){
(this.full=false)
}else{
(this.full=true)
}
this.iotChart = this.$echarts.init(this.$refs.iotChart, 'dark')
const url = this.$route.meta.url
......@@ -49,6 +60,7 @@
},
data() {
return {
full:false,
timer: null,
iotChart: null,
id: '',
......
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