From 4736c1c7b0e388c3c37875f38d5fca914adc5025 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期四, 08 四月 2021 11:23:54 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- /dev/null | 257 ----------------------- src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 32 +- src/components/table/components/tabHandover.vue | 7 src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 299 +++++++++++++++++++++++++++ src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue | 28 +- 5 files changed, 334 insertions(+), 289 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue deleted file mode 100644 index 3a928e9..0000000 --- a/src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue +++ /dev/null @@ -1,257 +0,0 @@ -<template> - <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"> - <div> - <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:4.8rem;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> - </div> - </div> - </div> -</template> - -<script> -import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' - -export default { - name: 'ECharts', - components: { - PublicDetailedList - }, - data () { - return { - watchData: [], - dialogVisible: false, - dataDate: [], - options: { - title: { - // text: '鎶樼嚎鍥惧爢鍙�' - }, - color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - color: '#1a4245' - } - } - }, - legend: { - x: '200px', - y: '30px', - data: [{ - name: '姘哀鍖栫墿', - textStyle: { - color: '#00d0f9' - } - }, - { - name: '浜屾哀鍖栫~', - textStyle: { - color: '#00d0f9' - } - }, - { - name: '鐑熷皹', - textStyle: { - color: '#00d0f9' - } - }, - { - name: '搴熸皵娴侀噺', - textStyle: { - color: '#00d0f9' - } - }] - // pageTextStyle: { - // color: '#fff' - // } - }, - grid: { - left: '3%', - right: '1%', - bottom: '3%', - // top: '1%', - containLabel: true - }, - toolbox: { - feature: { - saveAsImage: {} - } - }, - // 鍥炬爣缂╂斁璁剧疆 - 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 - } - }], - // x杞寸殑璁剧疆 - xAxis: { - type: 'category', - boundaryGap: false, - data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄥ叚'], - axisLabel: { // x杞村叏閮ㄦ樉绀� - rotate: 20, - interval: 0, - textStyle: { - color: '#fff' - } - }, - splitLine: { // 缃戞牸鍨傜洿绾夸负铏氱嚎 - show: true, - lineStyle: { - type: 'dashed' - } - }, - axisTick: { // x 杞村埢搴︽樉绀� - show: false - }, - axisLine: { - lineStyle: { - color: '#FFFFFF', - width: 1 // 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 - } - } - }, - // Y 杞寸殑璁剧疆 - yAxis: [{ - type: 'value', - // position: 'left', // 澶� Y 杞翠娇鐢� - // name: yname, // 鍚庢湡鍥炬爣Y杞存樉绀哄崟浣� - name: '娴撳害(mg/m鲁)', - axisLabel: { - formatter: '{value}', - textStyle: { - color: '#fff' // 鍧愭爣鐨勫瓧浣撻鑹� - } - }, - axisPointer: { - snap: true // 鑷姩鍚搁檮鏈�杩戠殑鐐� - }, - splitLine: { - show: false // y杞� 缃戞牸绾夸笉鏄剧ず - }, - axisLine: { - lineStyle: { - color: '#ffffff', // 鍧愭爣杞寸殑棰滆壊 - width: 1 - } - } - }], - series: [ - { - name: '姘哀鍖栫墿', - type: 'line', - stack: '鎬婚噺', - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - 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] - } - ] - } - } - }, - methods: { - drawChart: function () { - const myChart = this.$echarts.init(this.$refs.main) - myChart.setOption(this.options) - } - }, - mounted () { - this.$nextTick(() => { - 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"> -.Infomation { - margin-left: 10px; - height: 0.2rem; -} - -.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: 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/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue new file mode 100644 index 0000000..3c40d37 --- /dev/null +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue @@ -0,0 +1,299 @@ +<!-- 灏忔椂鏁版嵁 --> +<template> + <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:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> + </div> + </div> + </div> +</template> + +<script> +// import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' + +export default { + name: 'ECharts', + components: { + // PublicDetailedList + }, + data () { + return { + watchData: [], + dialogVisible: false, + dataDate: [], + value: '', + options: { + title: { + // text: '鎶樼嚎鍥惧爢鍙�' + }, + color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + color: '#1a4245' + } + } + }, + legend: { + x: '200px', + y: '30px', + data: [{ + name: '姘哀鍖栫墿', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '浜屾哀鍖栫~', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '鐑熷皹', + textStyle: { + color: '#00d0f9' + } + }, + { + name: '搴熸皵娴侀噺', + textStyle: { + color: '#00d0f9' + } + }] + }, + grid: { + left: '3%', + right: '1%', + bottom: '3%', + containLabel: true + }, + toolbox: { + }, + // 鍥炬爣缂╂斁璁剧疆 + 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 + } + }], + // x杞寸殑璁剧疆 + xAxis: { + type: 'category', + boundaryGap: false, + 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, + textStyle: { + color: '#fff' + } + }, + splitLine: { // 缃戞牸鍨傜洿绾夸负铏氱嚎 + show: true, + lineStyle: { + type: 'dashed' + } + }, + axisTick: { // x 杞村埢搴︽樉绀� + show: false + }, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1 // 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }, + // Y 杞寸殑璁剧疆 + yAxis: [{ + type: 'value', + // position: 'left', // 澶� Y 杞翠娇鐢� + // name: yname, // 鍚庢湡鍥炬爣Y杞存樉绀哄崟浣� + name: '娴撳害(mg/m鲁)', + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' // 鍧愭爣鐨勫瓧浣撻鑹� + } + }, + axisPointer: { + snap: true // 鑷姩鍚搁檮鏈�杩戠殑鐐� + }, + splitLine: { + show: false // y杞� 缃戞牸绾夸笉鏄剧ず + }, + axisLine: { + lineStyle: { + color: '#ffffff', // 鍧愭爣杞寸殑棰滆壊 + width: 1 + } + } + }], + series: [ + { + name: '姘哀鍖栫墿', + type: 'line', + stack: '鎬婚噺', + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + 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] + } + ] + }, + formInline: { + user: '', + region: '' + } + } + }, + methods: { + onSubmit () { + console.log('submit!') + }, + drawChart: function () { + const myChart = this.$echarts.init(this.$refs.main) + myChart.setOption(this.options) + window.onresize = function () { + var h1 = document.documentElement.clientHeight// 鑾峰彇灞忓箷鐨勯珮搴� + if (h1 > 700) { + myChart.getDom().style.height = 3 + 'rem' + myChart.getDom().style.width = 6 + 'rem' + } else { + myChart.getDom().style.height = 3 + 'rem' + myChart.getDom().style.width = 6 + 'rem' + } + myChart.resize() + } + } + }, + mounted () { + this.$nextTick(() => { + 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"> +.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 a17a64a..42ad235 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -1,30 +1,30 @@ <template> - <div class="win"> - <div class="border_corner border_corner_left_top"></div> - <div class="border_corner border_corner_right_top"></div> - <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("ECharts")'>鏃ユ暟鎹�</li> - <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> - </ul> - <component :is="currentTab" v-bind="$attrs"></component> - </div> + <div class="win"> + <div class="border_corner border_corner_left_top"></div> + <div class="border_corner border_corner_right_top"></div> + <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("EChartsHour")'>灏忔椂鏁版嵁</li> + <li @click='tabTaggle("ECharts")'>鏃ユ暟鎹�</li> + <li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li> + </ul> + <component :is="currentTab" v-bind="$attrs"></component> + </div> </template> <script> -import ECharts from './ECharts' +import EChartsHour from './EChartsHour' export default { name: 'PublicChart', components: { - ECharts + EChartsHour }, data () { return { - currentTab: 'ECharts' + currentTab: 'EChartsHour' } }, methods: { diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue index 5da2a6f..0ca567b 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicDetailedList.vue @@ -1,29 +1,31 @@ <template> <div class="PublicDetailedList"> - <el-table :data="tableData" max-height="500px"> + <el-table :data="tableData" max-height="500px" border> + <el-scrollbar style="height: 50vh"> <el-table-column prop="OnLineMonEmissPointName" label="鎺掓斁鐐�"></el-table-column> <el-table-column prop="MonTimeStr" label="鐩戞祴鏃堕棿"></el-table-column> <el-table-column label="姘哀鍖栫墿"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)"></el-table-column> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> </el-table-column> <el-table-column label="浜屾哀鍖栫~"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)"></el-table-column> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> </el-table-column> <el-table-column label="鐑熷皹"> - <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)"></el-table-column> - <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)"></el-table-column> - <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)"></el-table-column> + <el-table-column prop="MonQty" label="娴撳害(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="OrglQty" label="鎶樼畻鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="ConvertQty" label="鏍囧噯鍊�(mg/m鲁)" width="60"></el-table-column> + <el-table-column prop="EmissQty" label="鎺掓斁閲�(kg/h)" width="60"></el-table-column> </el-table-column> <el-table-column label="搴熸皵娴侀噺"> <el-table-column prop="StdValue" label="姘旈噺"></el-table-column> </el-table-column> + </el-scrollbar> </el-table> </div> </template> diff --git a/src/components/table/components/tabHandover.vue b/src/components/table/components/tabHandover.vue index ed43d60..35a1739 100644 --- a/src/components/table/components/tabHandover.vue +++ b/src/components/table/components/tabHandover.vue @@ -4,7 +4,8 @@ <waste-water></waste-water> </el-tab-pane> <el-tab-pane label="搴熸皵" name="second"> - <waste-gas></waste-gas> + <waste-water></waste-water> +<!-- <waste-gas></waste-gas>--> </el-tab-pane> <el-tab-pane label="鍥哄簾" name="third"> <solid-waste></solid-waste> @@ -17,14 +18,14 @@ <script> import WasteWater from '@components/table/components/WasteWater' -import WasteGas from '@components/table/components/WasteGas' +// import WasteGas from '@components/table/components/WasteGas' import SolidWaste from '@components/table/components/SolidWaste' import AirQuality from '@components/table/components/AirQuality' export default { name: 'tabHandover', components: { WasteWater, - WasteGas, + // WasteGas, SolidWaste, AirQuality }, -- Gitblit v1.8.0