From a06efb450b0ef4ea7ae6c2e1cdf74682fc73e983 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 12 四月 2021 11:30:21 +0800
Subject: [PATCH] echarts实时数据
---
src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 6 +
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 115 +++++++++++++++++++++-------
src/components/BaseNav/PublicBounced/PublicBounced.vue | 68 ++++++++--------
3 files changed, 121 insertions(+), 68 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
index 7051034..a803441 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
+ <div style="width:5rem;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>
<script>
@@ -22,16 +22,18 @@
},
mounted () {
this.$nextTick(() => {
+ this.initEchartsData()
this.upDateEchartsData()
})
},
methods: {
- async upDateEchartsData () {
- const addDays = dayjs().add(1, 's')
+ // 鍒濆鍖栨暟鎹�
+ async initEchartsData () {
+ const endTime = dayjs().add(1, 's')
const data = {
$tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
$startTime: this.dayjs,
- $endTime: addDays,
+ $endTime: endTime,
$step: 15
}
const result = (await mapApi.DataItems(data)).data
@@ -40,13 +42,30 @@
this.xAxis.push(result[i].ReadTime)
this.seriesData.push(result[i].TagValue)
this.seriesName = result[i].UnionTagCode
- // let num = 0
- // if (result[i].UnionTagCode === 'TJIP45.lscl2tb552AI10710') {
- // num++
- // console.log(num)
- // }
}
this.upDateEchartsinit()
+ },
+ // 瀹炴椂鏁版嵁鍒锋柊
+ upDateEchartsData () {
+ // const interValHander =
+ setInterval(async () => {
+ const endTime = dayjs().add(1, 's')
+ const data = {
+ $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+ $startTime: this.dayjs,
+ $endTime: endTime,
+ $step: 15
+ }
+ const result = (await mapApi.DataItems(data)).data
+ for (var i = 0; i < result.length; i++) {
+ // console.log(result[i])
+ // this.xAxis.shift()
+ this.xAxis.push(result[i].ReadTime)
+ this.seriesData.push(result[i].TagValue)
+ this.seriesName = result[i].UnionTagCode
+ }
+ this.upDateEchartsinit()
+ }, 1500)
},
// 鍒濆鍖杄charts
upDateEchartsinit () {
@@ -58,25 +77,19 @@
{
name: this.seriesName,
type: 'line',
- data: this.seriesData,
- symbolSize: 8,
- smooth: true,
- silent: false,
- barWidth: '50%',
- animation: true
+ stack: '鎬婚噺',
+ data: this.seriesData
},
{
name: 'TJIP45.lscl2tb552AISA11201B',
type: 'line',
stack: '鎬婚噺',
- smooth: true,
- symbolSize: 8,
data: [2.20, 1.82, 1.91, 2.34, 2.90, 3.30, 3.10]
}
]
const option = {
title: {
- text: '瀹炴椂鏁版嵁',
+ // text: '瀹炴椂鏁版嵁',
target: 'blank',
left: '5%',
textStyle: {
@@ -86,13 +99,42 @@
}
},
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ color: '#1a4245'
+ }
+ }
+ // formatter: function (params) {
+ // // console.log(params)
+ // var UnionTagCode = params[0].seriesName + '<br />'
+ // for (var i = 0; i < params.length; i++) {
+ // var seriesName = params[i].seriesName
+ // // 鍊�
+ // var value = params[i].value[1]
+ //
+ // // var valueFliter = formatter(value)
+ // var valueFliter = value
+ //
+ // var maker = params[i].marker
+ // var colo = ''
+ // switch (seriesName) {
+ // case 'TJIP45.lscl2tb552AI10710':
+ // colo = '#fff21c'
+ // break
+ // default:
+ // colo = 'red'
+ // break
+ // }
+ // maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
+ // UnionTagCode += maker + seriesName + ':' + valueFliter + '<br />'
+ // }
+ // return UnionTagCode
+ // }
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ top: '20%'
},
toolbox: {
show: false,
@@ -100,14 +142,24 @@
saveAsImage: {}
}
},
- dataZoom: [
- {
- type: 'inside'
- // start: 50,
- // end: 100,
- // filterMode: 'empty'
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 100
+ }, {
+ start: 0,
+ end: 100,
+ show: false,
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
}
- ],
+ }],
legend: {
data: legendData,
textStyle: {
@@ -117,9 +169,10 @@
},
xAxis: {
type: 'category',
+ // type: 'time',
boundaryGap: false,
axisLabel: {
- rotate: 20,
+ margin: 6,
interval: 0,
textStyle: {
color: '#fff'
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index facffbb..1d29ec7 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -5,7 +5,7 @@
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<ul class="tab">
- <li @click='tabTaggle("ECharts")'>瀹炴椂鏁版嵁</li>
+ <li @click='tabTaggle("Echarts")'>瀹炴椂鏁版嵁</li>
<li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li>
<li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li>
<li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li>
@@ -26,12 +26,14 @@
<script>
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'
+import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
export default {
name: 'PublicChart',
components: {
EChartsHour,
- EChartsDate
+ EChartsDate,
+ Echarts
},
data () {
return {
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 38a75de..32b73d1 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,49 +1,49 @@
<template>
<div class="public-bounced" v-drag v-if="flag">
- <Echarts></Echarts>
- <!-- <div class="public-bounced-title">-->
- <!-- <span>{{ displayContentTitle }}</span>-->
- <!-- <i class="el-icon-circle-close" @click="closePopup"></i>-->
- <!-- </div>-->
- <!-- <div class="public-bounced-content">-->
- <!-- <div class="public-bounced-content-left">-->
- <!-- <public-tabs :displayContentTab="displayContentTab" :value="value"-->
- <!-- :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>-->
- <!-- <div class="public-bounced-content-left-bottom">-->
- <!-- <public-table v-if="value === 'gufei'"-->
- <!-- :displayContentTable="displayContentTable"></public-table>-->
- <!-- <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
- <!-- :value="value"-->
- <!-- :getQueryOnlineMonData="getQueryOnlineMonData"-->
- <!-- :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">-->
- <!-- </public-chart>-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <div class="public-bounced-content-right">-->
- <!-- <public-video></public-video>-->
- <!-- </div>-->
- <!-- </div>-->
+<!-- <Echarts></Echarts>-->
+ <div class="public-bounced-title">
+ <span>{{ displayContentTitle }}</span>
+ <i class="el-icon-circle-close" @click="closePopup"></i>
+ </div>
+ <div class="public-bounced-content">
+ <div class="public-bounced-content-left">
+ <public-tabs :displayContentTab="displayContentTab" :value="value"
+ :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>
+ <div class="public-bounced-content-left-bottom">
+ <public-table v-if="value === 'gufei'"
+ :displayContentTable="displayContentTable"></public-table>
+ <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
+ :value="value"
+ :getQueryOnlineMonData="getQueryOnlineMonData"
+ :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">
+ </public-chart>
+ </div>
+ </div>
+ <div class="public-bounced-content-right">
+ <public-video></public-video>
+ </div>
+ </div>
</div>
</template>
<script>
-import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
+// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
import '@/components/BaseNav/SolidWaste/directive/dir'
-// import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
-// import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
-// import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
-// import PublicChart from './GasComponents/PublicChart'
+import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
+import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
+import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
+import PublicChart from './GasComponents/PublicChart'
export default {
name: 'PublicBounced',
components: {
- Echarts
- // PublicTabs,
- // PublicTable,
- // PublicChart,
- // PublicVideo
+ // Echarts
+ PublicTabs,
+ PublicTable,
+ PublicChart,
+ PublicVideo
},
data () {
return {
@@ -108,8 +108,6 @@
left: 20%;
background-color: #002432;
border: 1px #9fc5c8 solid;
- width: 6rem;
- height: 3rem;
.public-bounced-title {
height: 0.1rem;
--
Gitblit v1.8.0