派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/EChartsDateWasteWater.vue
@@ -3,9 +3,9 @@ <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">COD :<i>8.115</i> 标准 : 100</span> <span class="grid-content">氨氮 : <i>0.31</i> 标准 : 50</span> <span class="grid-content">废水流量 : <i>5191.693848</i></span> <span class="grid-content">COD :<i style="color: #e8ee0b">8.115</i> 标准 : 20</span> <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.31</i> 标准 : 5</span> <span class="grid-content">废水流量 : <i style="color: #e8ee0b">5191.693848</i></span> </div> </div> <div class="form-echrts"> @@ -26,20 +26,19 @@ </span> </div> </div> <div> 采样点数: <el-select v-model="formInline.region"> <el-option label="0" value="0"></el-option> <el-option label="25" value="25"></el-option> <el-option label="50" value="50"></el-option> <el-option label="75" value="75"></el-option> <el-option label="100" value="100"></el-option> </el-select> </div> <!-- <div>--> <!-- 采样点数:--> <!-- <el-select v-model="formInline.region">--> <!-- <el-option label="0" value="0"></el-option>--> <!-- <el-option label="25" value="25"></el-option>--> <!-- <el-option label="50" value="50"></el-option>--> <!-- <el-option label="75" value="75"></el-option>--> <!-- <el-option label="100" value="100"></el-option>--> <!-- </el-select>--> <!-- </div>--> <div class="detailbtn" @click="onSubmit">查询</div> <div class="detailbtn" @click="dialogVisible = true" >明细表</div> </div> <!-- <div style="width:5rem;height:2rem;" id="popChart" ref="main">--> <div class="boxChart" style="height: 260px"> <div style="width: 100%;height: 100%;" id="popChart" ref="main"> </div> @@ -70,8 +69,6 @@ }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, @@ -137,6 +134,9 @@ } } }, mounted () { this.onSubmit() }, methods: { onSubmit () { this.effChartShow(this.JsonDateWater.id, this.JsonDateWater.title, this.JsonDateWater.legend, this.JsonDateWater.xdata, this.JsonDateWater.ydatas, this.JsonDateWater.yname, this.JsonDateWater.id, this.JsonDateWater.datatype) src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue
@@ -3,9 +3,9 @@ <div id="Tab"> <div class="infomation"> <div> <span class="grid-content">COD :<i>6.039</i> 标准 : 100</span> <span class="grid-content">氨氮 : <i>0.38</i> 标准 : 50</span> <span class="grid-content">废水流量 : <i>254.643997</i></span> <span class="grid-content">COD : <i style="color: #e8ee0b">6.039</i> 标准 : 10</span> <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.38</i> 标准 : 5</span> <span class="grid-content">废水流量 : <i style="color: #e8ee0b">254.643997</i></span> </div> </div> <div class="form-echrts"> @@ -26,20 +26,22 @@ </span> </div> </div> <div> 采样点数: <el-select v-model="formInline.region"> <el-option label="0" value="0"></el-option> <el-option label="25" value="25"></el-option> <el-option label="50" value="50"></el-option> <el-option label="75" value="75"></el-option> <el-option label="100" value="100"></el-option> </el-select> </div> <!-- <div>--> <!-- 采样点数:--> <!-- <el-select v-model="formInline.region">--> <!-- <el-option label="0" value="0"></el-option>--> <!-- <el-option label="25" value="25"></el-option>--> <!-- <el-option label="50" value="50"></el-option>--> <!-- <el-option label="75" value="75"></el-option>--> <!-- <el-option label="100" value="100"></el-option>--> <!-- </el-select>--> <!-- </div>--> <div class="detailbtn" @click="onSubmit">查询</div> <div class="detailbtn" @click="dialogVisible = true" >明细表</div> </div> <div style="width:5rem;height:2rem;" id="echarts" ref="main"> <div class="boxChart" style="height: 260px"> <div style="width: 100%;height: 100%;" id="popChart" ref="main"> </div> </div> </div> <!-- 明细弹框 --> @@ -123,11 +125,23 @@ } } }, mounted () { this.onSubmit() }, methods: { onSubmit () { this.effChartShow(this.JsonHourWater.id, this.JsonHourWater.title, this.JsonHourWater.legend, this.JsonHourWater.xdata, this.JsonHourWater.ydatas, this.JsonHourWater.yname, this.JsonHourWater.id, this.JsonHourWater.datatype) this.effChartShow() }, effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { effChartShow: function () { // var id = this.JsonHourWater.id // var title = this.JsonHourWater.title var legend = this.JsonHourWater.legend var xdata = this.JsonHourWater.xdata var ydatas = this.JsonHourWater.ydatas var yname = this.JsonHourWater.yname // var jcdId = this.JsonHourWater.jcdID var datatype = this.JsonHourWater.datatype this.myChart = this.$echarts.init(this.$refs.main) this.myChart.clear() var dataUnit = '' @@ -146,6 +160,7 @@ ydatas[j].data[k] = it2 } } for (var i = 0; i < ydatas.length; i++) { // var zdcbcolor = ydatas[i].zdcbcolor var bz = ydatas[i].bzz @@ -175,18 +190,17 @@ }, lineStyle: { // 折线的颜色 color: ydatas[i].zxcolor, width: 4 width: 5 }, borderColor: 'black', // 折点边框的颜色 label: { // 显示值 show: false } } }, type: 'line', data: ydatas[i].data, markLine: { // 平均值 ， 和 指标上限 markLine: { // 平均值 和 指标上限 symbol: 'none', data: [{ label: { @@ -549,20 +563,20 @@ } // createDivByMouse("s",params.event); }) */ }, drawChart: function () { window.onresize = function () { var h1 = document.documentElement.clientHeight// 获取屏幕的高度 if (h1 > 700) { this.myChart.getDom().style.height = 3 + 'rem' this.myChart.getDom().style.width = 6 + 'rem' } else { this.myChart.getDom().style.height = 3 + 'rem' this.myChart.getDom().style.width = 6 + 'rem' } this.myChart.resize() } } // drawChart: function () { // window.onresize = function () { // var h1 = document.documentElement.clientHeight// 获取屏幕的高度 // if (h1 > 700) { // this.myChart.getDom().style.height = 3 + 'rem' // this.myChart.getDom().style.width = 6 + 'rem' // } else { // this.myChart.getDom().style.height = 3 + 'rem' // this.myChart.getDom().style.width = 6 + 'rem' // } // this.myChart.resize() // } // } }
@@ -3,10 +3,10 @@ <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">COD : <i>11.24385</i> 标准 : 100</span> <span class="grid-content">氮氧 :<i>0.1889014</i> 标准 : 50</span> <span class="grid-content">总磷 : <i>0.03812287</i> 标准 : 30</span> <span class="grid-content">废水流量 : <i>32.16287</i></span> <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 标准 : 50</span> <span class="grid-content">氮氧 :<i style="color: #e8ee0b">0.1889014</i> 标准 : 30</span> <span class="grid-content">总磷 : <i style="color: #e8ee0b">0.03812287</i> 标准 : 5</span> <span class="grid-content">废水流量 : <i style="color: #e8ee0b">32.16287</i></span> </div> </div> <div class="form-echrts"> @@ -29,7 +29,7 @@ </div> <div> 采样点数: <el-select v-model="formInline.region" placeholder="25"> <el-select v-model="formInline.region" placeholder="50"> <el-option label="0" value="0"></el-option> <el-option label="25" value="25"></el-option> <el-option label="50" value="50"></el-option> @@ -38,37 +38,21 @@ </el-select> </div> <div class="detailbtn" @click="onSubmit">查询</div> <div class="detailbtn" @click="dialogVisible = true" >明细表</div> </div> <div class="el-dialog-div" style="height: 260px"> <public-detailed-list v-bind="$attrs"></public-detailed-list> <div class="boxChart" style="height: 260px"> <div style="width: 100%;height: 100%;" id="popChart" ref="main"> </div> </div> <!-- 明细弹框 --> <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> </template> <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' import 'dayjs/locale/es' import dayjs from 'dayjs' export default { name: 'ECharts', components: { PublicDetailedList }, data () { return { value1: '', @@ -266,9 +250,7 @@ } }, mounted () { this.$nextTick(() => { this.onSubmit() }) this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) }, methods: { onSubmit () { @@ -616,29 +598,6 @@ </script> <style scoped lang="less"> //.animation{ // padding: 0 1rem; // overflow: hidden; // //width: 1rem; // .infomation{ // display: flex; // //margin: 0 1rem; // overflow: hidden; // animation: move 1s linear 0s infinite; // @keyframes move { // 0% { // } // 100% { // transform: translateX(-10%); // } // } // /* 鼠标经过marquee 就停止动画 */ // &:hover { // //z-index: 9999999; // animation-play-state: paused; // } // } //} .grid-content{ font-size: 8px; background-color: #2e4967; src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -62,7 +62,6 @@ timeEnd: '' }, RealTimeChart: null, info: this.series, JsonTimeCtarts: { id: 'mychart_ss ', title: '烟尘',
