| | |
| | | <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" v-show="this.$attrs.value === 'feiqi'"> |
| | | <ul class="tab"> |
| | | <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>实时数据</li> |
| | | <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li> |
| | | <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDate",2)'>日数据</li> |
| | | <li :class="active==3?'hover':''" @click='tabTaggle("EChartsTable",3)'>人工数据</li> |
| | | </ul> |
| | | <ul class="tab" v-show="this.$attrs.value !== 'feiqi'"> |
| | | <li :class="active==0?'hover':''" @click='tabTaggle("EChartsRealWasteWater",0)'>实时数据</li> |
| | | <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHourWasteWater",1)'>小时数据</li> |
| | | <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDateWasteWater",2)'>日数据</li> |
| | | <li :class="active==3?'hover':''" @click='tabTaggle("EChartsWasteWaterTable",3)'>人工数据</li> |
| | | </ul> |
| | | <div class="legend" > |
| | | <span >正常</span> |
| | |
| | | import EChartsDate from './echarts/EChartsDate' |
| | | import EChartsTable from './echarts/EChartsTable' |
| | | |
| | | import EChartsRealWasteWater from './echarts/EChartsRealWasteWater' |
| | | import EChartsHourWasteWater from './echarts/EChartsHourWasteWater' |
| | | import EChartsDateWasteWater from './echarts/EChartsDateWasteWater' |
| | | import EChartsWasteWaterTable from './echarts/EChartsWasteWaterTable' |
| | | |
| | | export default { |
| | | name: 'PublicChart', |
| | | components: { |
| | | EChartsHour, |
| | | EChartsDate, |
| | | ECharts, |
| | | EChartsTable, |
| | | EChartsRealWasteWater, |
| | | EChartsHourWasteWater, |
| | | EChartsDateWasteWater, |
| | | EChartsWasteWaterTable |
| | | EChartsTable |
| | | }, |
| | | data () { |
| | | return { |
| | |
| | | <div style="width:5rem;height:1.5rem;" id="echarts" 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> |
| | | <!-- <!– 明细弹框 –>--> |
| | | <!-- <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 mapApi from '@/api/mapApi' |
| | | import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' |
| | | // import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' |
| | | import dayjs from 'dayjs' |
| | | import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard' |
| | | |
| | | export default { |
| | | name: 'ECharts', |
| | | components: { |
| | | PublicDataStandard, |
| | | PublicDetailedList |
| | | PublicDataStandard |
| | | // PublicDetailedList |
| | | }, |
| | | data () { |
| | | return { |
| | |
| | | <template> |
| | | <div id="Tab"> |
| | | <public-data-standard :dataStandard = "dataStandard"></public-data-standard> |
| | | <div class="animation"> |
| | | <div class="infomation"> |
| | | <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i> 标准 : 100</span> |
| | | <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span> |
| | | <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span> |
| | | <span class="grid-content">废气流量 : <i style="color: #e8ee0b">5.23</i></span> |
| | | </div> |
| | | </div> |
| | | <div class="form-echrts"> |
| | | <div class="from-search"> |
| | | <div class="pickerMon"> |
| | |
| | | </div> |
| | | <div> |
| | | 采样点数: |
| | | <el-select v-model="formInline.region" placeholder="50" class=""> |
| | | <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> |
| | |
| | | // import mapApi from '@/api/mapApi' |
| | | import 'dayjs/locale/es' |
| | | import dayjs from 'dayjs' |
| | | import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard' |
| | | |
| | | export default { |
| | | name: 'ECharts', |
| | | components: { |
| | | PublicDataStandard |
| | | }, |
| | | data () { |
| | | return { |
| | | days: dayjs(new Date()).format('YYYYMMDDHHmmss'), |
| | |
| | | timeEnd: '' |
| | | }, |
| | | RealTimeChart: null, |
| | | dataStandard: [{ |
| | | current: { name: '氮氧化物1', val: 29.93 }, |
| | | standard: { name: '标准', val: 100 } |
| | | }, |
| | | { |
| | | current: { name: '二氧化硫', val: 17.34 }, |
| | | standard: { name: '标准', val: 50 } |
| | | }, |
| | | { |
| | | current: { name: '烟尘', val: 6.93 }, |
| | | standard: { name: '标准', val: 30 } |
| | | }, |
| | | { |
| | | current: { name: '废气流量', val: 120343.18 }, |
| | | standard: { name: '', val: null } |
| | | } |
| | | ], |
| | | JsonTimeCtarts: { |
| | | id: 'mychart_ss ', |
| | | title: '烟尘', |
| | |
| | | this.IntervalEXHRealTimeDate() |
| | | }, 15000) |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | |
| | | padding:0 10px |
| | | >i{ |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | .animation { |
| | | //width: 600px; |
| | | //height: 0.06rem; |
| | | .infomation { |
| | | padding: 5px 10px; |
| | | } |
| | | } |
| | | .form-echrts { |
| | |
| | | } |
| | | /deep/.el-input__inner{ |
| | | position: relative; |
| | | //width:140px; |
| | | width:140px; |
| | | background-color: #2e4967; |
| | | color: #fff; |
| | | font-size: 12px; |