From 4eb0ca2b0e1e7b43a0b56fe392f632cb84966802 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期三, 07 四月 2021 18:10:24 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue | 151 ++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 138 insertions(+), 13 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue index cdad7bf..3173f9c 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue @@ -1,14 +1,74 @@ <template> - <div style="width:750px;height:260px;" id="echarts" ref="main"></div> + <div id="Tab"> + <div class="infomation"> + <el-tag>姘哀鍖栫墿 : 29.93 鏍囧噯 : 100</el-tag> + <el-tag>浜屾哀鍖栫~ : 17.34 鏍囧噯 : 50</el-tag> + <el-tag>鐑熷皹 : 6.93 鏍囧噯 : 30</el-tag> + <el-tag>搴熸皵娴侀噺 : 120343.18</el-tag> + </div> + <div class="form-echrts"> + <!-- :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName" --> + <div class="from-search"> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> +<!-- <el-form-item label="瀹℃壒浜�">--> +<!-- <el-input v-model="formInline.user" placeholder="瀹℃壒浜�"></el-input>--> +<!-- </el-form-item>--> + <div class="block"> + <el-date-picker + class="date" + v-model="value" + type="datetimerange" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡"> + </el-date-picker> + </div> + <el-form-item label="閲囨牱鐐规暟" class="text-size"> + <el-select v-model="formInline.region" placeholder="0"> + <el-option label="0" value="shanghai"></el-option> + <el-option label="25" value="beijing"></el-option> + <el-option label="50" value="beijing"></el-option> + <el-option label="75" value="beijing"></el-option> + <el-option label="100" value="beijing"></el-option> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="onSubmit">鏌ヨ</el-button> + </el-form-item> + </el-form> + <el-button size="mini" round @click="dialogVisible = true">鏄庣粏琛�</el-button> + <el-dialog :visible.sync="dialogVisible" + :append-to-body="true" + :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName" + width="68%" + center + v-dialogDrag + > + <div class="el-dialog-div" style="height: 500px"> + <public-detailed-list v-bind="$attrs"></public-detailed-list> + </div> + </el-dialog> + </div> + <div style="width:750px;height:260px;" id="echarts" ref="main"> + </div> + </div> + </div> </template> <script> +import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' export default { name: 'ECharts', - methods: { - drawChart: function () { - const myChart = this.$echarts.init(this.$refs.main) - const option = { + components: { + PublicDetailedList + }, + data () { + return { + watchData: [], + dialogVisible: false, + dataDate: [], + value: '', + options: { title: { // text: '鎶樼嚎鍥惧爢鍙�' }, @@ -88,7 +148,7 @@ xAxis: { type: 'category', boundaryGap: false, - data: ['2021.01.01', '2021.01.02', '2021.01.03', '2021.01.04', '2021.01.05', '2021.01.06', '2021.01.07'], + data: ['12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00'], axisLabel: { // x杞村叏閮ㄦ樉绀� rotate: 20, interval: 0, @@ -163,21 +223,86 @@ data: [820, 932, 901, 934, 1290, 1330, 1320] } ] + }, + formInline: { + user: '', + region: '' } - myChart.setOption(option) + } + }, + methods: { + onSubmit () { + console.log('submit!') + }, + drawChart: function () { + const myChart = this.$echarts.init(this.$refs.main) + myChart.setOption(this.options) } }, mounted () { this.drawChart() + const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) + console.log(dataWatch) + for (var i = 0; i < dataWatch.length; i++) { + this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) + } + console.log(this.dataDate) } } </script> <style scoped lang="less"> - #echarts{ - margin: 0; - padding: 0; - border: 1px solid #396d83; - margin: 10px 10px 10px 10px; - } + .infomation { + margin-left: 10px; + } + + .el-tag { + height: 25px; + 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: 100%; + border: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + .el-dialog-div { + //height: 50vh!important; + overflow: auto; + //overflow: hidden; + } + .block{ + .date{ + width: 300px; + height: 30px; + } + } + .text-size{ + display: flex; + justify-content: space-around; + } + .from-search{ + display: flex; + justify-content: space-around; + .demo-form-inline{ + display: flex; + justify-content: space-around; + } + .el-button--mini, .el-button--mini.is-round{ + height: 30px; + } + } + #echarts { + margin: 0; + padding: 0; + //border: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + } + } </style> -- Gitblit v1.8.0