From 6f4d139abf9f1932833dac0dfe4caab5ab520c1a Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期五, 09 四月 2021 09:42:47 +0800
Subject: [PATCH] 弹框内容修改
---
src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 4
src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue | 3
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++++++
package.json | 2
src/api/mapApi.js | 3
src/api/mapUrl.js | 1
src/components/BaseNav/PublicBounced/PublicBounced.vue | 21 ++--
7 files changed, 215 insertions(+), 15 deletions(-)
diff --git a/package.json b/package.json
index 40e1977..aa3ea33 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.5",
- "dayjs": "^1.9.6",
+ "dayjs": "^1.10.4",
"echarts": "^4.2.1",
"element-ui": "^2.14.1",
"esri-leaflet": "^3.0.1",
diff --git a/src/api/mapApi.js b/src/api/mapApi.js
index a621754..dbe077c 100644
--- a/src/api/mapApi.js
+++ b/src/api/mapApi.js
@@ -50,5 +50,8 @@
},
getCompany (data) {
return axios.get(mapUrl.getCompany, data)
+ },
+ DataItems (data) {
+ return axios.get(mapUrl.DataItems, data)
}
}
diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js
index c2493a8..a14caf2 100644
--- a/src/api/mapUrl.js
+++ b/src/api/mapUrl.js
@@ -12,6 +12,7 @@
export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
+export const DataItems = $HOST + '/wasteWater/RTDB/DataItems'
export const getWasteWater = $HOST + '/wasteWater/getWasteWater'
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring'
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
new file mode 100644
index 0000000..3ac2e52
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -0,0 +1,196 @@
+<template>
+ <div style="width:100%;height:2rem;" ref="echarts"></div>
+</template>
+
+<script>
+
+import mapApi from '@/api/mapApi'
+import 'dayjs/locale/es'
+import dayjs from 'dayjs'
+
+export default {
+ name: 'ECharts',
+ data () {
+ return {
+ myChart: [],
+ dataDate: [],
+ value: '',
+ seriesData: [],
+ aseries: '',
+ result: [],
+ days: dayjs(new Date()).format('YYYYMMDDHHmmss')
+ }
+ },
+ methods: {
+ drawChart (result) {
+ // const result = this.result
+ this.myChart = this.$echarts.init(this.$refs.echarts)
+
+ // setInterval(function () {
+ // }, 3000)
+ const option = {
+ title: {
+ text: '鎶樼嚎鍥惧爢鍙�'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ },
+ grid: {
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {
+ show: false
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ // data: seriesData,
+ data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ },
+ series: [
+ {
+ name: '閭欢钀ラ攢',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: '鑱旂洘骞垮憡',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: '瑙嗛骞垮憡',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: '鐩存帴璁块棶',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: '鎼滅储寮曟搸',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+ }
+ this.myChart.setOption(option)
+ },
+ async echartsData () {
+ const addDays = dayjs().add(300, 'day')
+ const data = {
+ $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+ $startTime: this.dayjs,
+ $endTime: addDays,
+ $step: 15
+ }
+ const result = await mapApi.DataItems(data)
+ this.result = result.data
+ },
+ // 鏁版嵁鐨勮姹�
+ requestEcharts () {
+ setInterval(async () => {
+ const addDays = dayjs().add(300, 'day')
+ const data = {
+ $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+ $startTime: this.dayjs,
+ $endTime: addDays,
+ $step: 15
+ }
+ const result = await mapApi.DataItems(data)
+ this.result = result.data
+ for (let i = 0; i < result.length; i++) {
+ // // console.log(result[i])
+
+ const seriesData = []
+ const aseries = []
+ // let nameData = ''
+
+ seriesData.push(result[i].ReadTime)
+ aseries.push(result[i].TagValue)
+ // nameData = result[i].UnionTagCode
+ this.aseries = result[i].UnionTagCode
+ }
+ this.myChart.setOption({
+ series: [{
+ data: data
+ }]
+ })
+ }, 3000)
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.requestEcharts()
+ this.drawChart()
+ })
+ }
+}
+</script>
+
+<style scoped lang="less">
+.Infomation {
+ margin-left: 10px;
+ height: 0.2rem;
+}
+
+.el-tag {
+ height: 25px;
+ width: 140px;
+ line-height: 25px;
+ margin-right: 10px;
+ font-size: 10px;
+ background-color: rgba(0, 255, 246, 0.14);
+ color: #00d0f9;
+ border: none;
+ padding: 0 15px;
+}
+
+.form-echrts {
+ width: 100%;
+ height: 1rem;
+ border-top: 1px solid #396d83;
+ //margin: 10px 10px 10px 10px;
+ .el-dialog-div {
+ //height: 50vh!important;
+ overflow: auto;
+ //overflow: hidden;
+ }
+
+ #echarts {
+ margin: 0;
+ padding: 0;
+ //height: 3rem;
+ //border: 1px solid #396d83;
+ //margin: 10px 10px 10px 10px;
+ }
+}
+</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index 42ad235..841c17a 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -46,10 +46,10 @@
.win {
position: relative;
- margin-bottom: 13px;
+ /*margin-bottom: 13px;*/
background-color: rgba(33, 41, 69, 0.9);
border: 0.8px solid #396d83;
- height: 1.5rem;
+ /*height: 1.5rem;*/
}
.border_corner {
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
index 4c581a3..1e67f2f 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicVideo.vue
@@ -27,11 +27,12 @@
position: relative;
background-color: rgba(33, 41, 69, 0.9);
//height: 2rem;
+ width: 3rem;
}
.main {
border: 1px solid #396d83;
- padding: 5px;
+ //padding: 5px;
height: 2rem;
video {
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 5a47938..e363527 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,5 +1,6 @@
<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>
@@ -26,6 +27,8 @@
<script>
+// 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'
@@ -35,6 +38,7 @@
export default {
name: 'PublicBounced',
components: {
+ // Echarts
PublicTabs,
PublicTable,
PublicChart,
@@ -93,16 +97,10 @@
<style lang="less" scoped>
.public-bounced {
- width: 8rem;
- //height: 2.6rem;
- //width: 70vw;
- //height: 30vh;
z-index: 999;
position: absolute;
- //bottom: 2rem;
- //left: 5rem;
top: 15%;
- left: 15%;
+ left: 20%;
background-color: #002432;
border: 1px #9fc5c8 solid;
@@ -129,17 +127,18 @@
}
.public-bounced-content {
- margin: 0.2rem auto !important;
+ padding: 0.1rem;
display: flex;
//align-items: center;
- justify-content: space-around;
+ //justify-content: space-around;
.public-bounced-content-left {
- width: 4.8rem;
+ //width: 4.8rem;
}
.public-bounced-content-right {
- width: 3rem;
+ //width: 3rem;
+ margin-left: 0.1rem;
}
}
}
--
Gitblit v1.8.0