派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/WasteWater/RealData.vue
@@ -1,34 +1,24 @@ <!-- 废水实时数据 --> <template> <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 标准 : <i style="color: #fff">50</i></span> <span class="grid-content">氮氧 :<i style="color: #e8ee0b">0.1889014</i> 标准 : <i style="color: #fff">30</i></span> <span class="grid-content">总磷 : <i style="color: #e8ee0b">0.03812287</i> 标准 : <i style="color: #fff">5</i></span> <span class="grid-content">废水流量 : <i style="color: #e8ee0b">32.16287</i></span> </div> </div> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> <div class="form-echrts"> <div class="from-search"> <div class="pickerMon"> <div class="pickerData"> <span> 开始时间:</span> <span class="pickerTable"> <el-date-picker type="datetime" v-model="formInline.timeStart"> </el-date-picker> <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker> </span> </div> <div class="pickerData"> <span >结束时间:</span> <span>结束时间:</span> <span class="pickerTable"> <el-date-picker type="datetime" v-model="formInline.timeEnd"> </el-date-picker> <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> </span> </div> </div> <div> 采样点数: <span>采样点数:</span> <el-select v-model="formInline.region" placeholder="50"> <el-option label="0" value="0"></el-option> <el-option label="25" value="25"></el-option> @@ -37,353 +27,650 @@ <el-option label="100" value="100"></el-option> </el-select> </div> <div class="detailbtn" @click="onSubmit">查询</div> <div class="detailbtn" @click="onSubmit">查询</div> </div> <div class="boxChart"> <div style="width: 5rem;height: 1.5rem;" id="popChart" ref="main"></div> </div> <div style="width:5rem;height:2rem;" ref="echarts"></div> </div> </div> </template> <script> import PublicDataStandard from '@/components/BaseNav/PublicDataStandard' import mapApi from '@/api/mapApi' import 'dayjs/locale/es' import dayjs from 'dayjs' export default { name: 'ECharts', components: { PublicDataStandard }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, RealTimeChart: null, value: '', days: dayjs(new Date()).format('YYYYMMDDHHmmss'), // tab栏传递接收数据 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: 120 }, standard: { name: '', val: null } }], // echarts的数据设置 myChart: null, // 开始 /结束 时间 和采样点值的绑定值数据 formInline: { region: '', timeStart: '2021-04-13 12:47:18', timeEnd: '2021-04-13 12:52:18' timeStart: '', timeEnd: '' }, JsonRealWasteWater: { id: 'mycharteff_second ', title: 'COD', legend: [ { icon: 'image://../assets/imgs/legend/NOX.png', itemHeight: 5, itemWidth: 20, name: '氨氮', textStyle: { color: '#ccc' } }, { icon: 'image://../assets/imgs/legend/YanChen.png', itemHeight: 5, itemWidth: 20, name: '总磷', textStyle: { color: '#ccc' } }, { icon: 'image://../assets/imgs/legend/SO2.png', itemHeight: 5, itemWidth: 20, name: '总氮', textStyle: { color: '#ccc' } }, { icon: 'image://../assets/imgs/legend/NOX.png', itemHeight: 5, itemWidth: 20, name: 'COD', textStyle: { color: '#ccc' } }, { icon: 'image://../assets/imgs/legend/VOCs.png', itemHeight: 5, itemWidth: 20, name: '废水流量', textStyle: { color: '#ccc' } } ], ydatas: [ { name: '氮氧', data: [{ name: '氮氧', value: ['2021/04/13 12:47:18', 0.1900156] }, { name: '氮氧', value: ['2021/04/13 12:47:33', 0.1902795] }, { name: '氮氧', value: ['2021/04/13 12:47:48', 0.1892689] }, { name: '氮氧', value: ['2021/04/13 12:48:03', 0.1882582] }, { name: '氮氧', value: ['2021/04/13 12:48:18', 0.1882284] }, { name: '氮氧', value: ['2021/04/13 12:48:33', 0.1886617] }, { name: '氮氧', value: ['2021/04/13 12:48:48', 0.1873395] }, { name: '氮氧', value: ['2021/04/13 12:49:03', 0.1866319] }, { name: '氮氧', value: ['2021/04/13 12:49:18', 0.1895212] }, { name: '氮氧', value: ['2021/04/13 12:49:33', 0.1898232] }, { name: '氮氧', value: ['2021/04/13 12:49:48', 0.1880916] }, { name: '氮氧', value: ['2021/04/13 12:50:03', 0.1883546] }, { name: '氮氧', value: ['2021/04/13 12:50:18', 0.1907846] }, { name: '氮氧', value: ['2021/04/13 12:50:33', 0.1887416] }, { name: '氮氧', value: ['2021/04/13 12:50:48', 0.1873472] }, { name: '氮氧', value: ['2021/04/13 12:51:03', 0.1886214] }, { name: '氮氧', value: ['2021/04/13 12:51:18', 0.1891896] }, { name: '氮氧', value: ['2021/04/13 12:51:33', 0.1891176] }, { name: '氮氧', value: ['2021/04/13 12:51:48', 0.1890455] }, { name: '氮氧', value: ['2021/04/13 12:52:03', 0.1889734] }, { name: '氮氧', value: ['2021/04/13 12:52:18', 0.1889014] }], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 3 }, { name: '总磷', data: [{ name: '总磷', value: ['2021/04/13 12:47:18', 0.03813388] }, { name: '总磷', value: ['2021/04/13 12:47:33', 0.03813333] }, { name: '总磷', value: ['2021/04/13 12:47:48', 0.03813278] }, { name: '总磷', value: ['2021/04/13 12:48:03', 0.03813223] }, { name: '总磷', value: ['2021/04/13 12:48:18', 0.03813168] }, { name: '总磷', value: ['2021/04/13 12:48:33', 0.03813113] }, { name: '总磷', value: ['2021/04/13 12:48:48', 0.03813057] }, { name: '总磷', value: ['2021/04/13 12:49:03', 0.03813003] }, { name: '总磷', value: ['2021/04/13 12:49:18', 0.03812947] }, { name: '总磷', value: ['2021/04/13 12:49:33', 0.03812892] }, { name: '总磷', value: ['2021/04/13 12:49:48', 0.03812837] }, { name: '总磷', value: ['2021/04/13 12:50:03', 0.03812782] }, { name: '总磷', value: ['2021/04/13 12:50:18', 0.03812727] }, { name: '总磷', value: ['2021/04/13 12:50:33', 0.03812672] }, { name: '总磷', value: ['2021/04/13 12:50:48', 0.03812617] }, { name: '总磷', value: ['2021/04/13 12:51:03', 0.03812562] }, { name: '总磷', value: ['2021/04/13 12:51:18', 0.03812507] }, { name: '总磷', value: ['2021/04/13 12:51:33', 0.03812452] }, { name: '总磷', value: ['2021/04/13 12:51:48', 0.03812397] }, { name: '总磷', value: ['2021/04/13 12:52:03', 0.03812342] }, { name: '总磷', value: ['2021/04/13 12:52:18', 0.03812287] }], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 0.3 }, { name: '总氮', data: [{ name: '总氮', value: ['2021/04/13 12:47:18', 2.779342] }, { name: '总氮', value: ['2021/04/13 12:47:33', 2.779337] }, { name: '总氮', value: ['2021/04/13 12:47:48', 2.779331] }, { name: '总氮', value: ['2021/04/13 12:48:03', 2.779823] }, { name: '总氮', value: ['2021/04/13 12:48:18', 2.779321] }, { name: '总氮', value: ['2021/04/13 12:48:33', 2.779344] }, { name: '总氮', value: ['2021/04/13 12:48:48', 2.779452] }, { name: '总氮', value: ['2021/04/13 12:49:03', 2.779224] }, { name: '总氮', value: ['2021/04/13 12:49:18', 2.779133] }, { name: '总氮', value: ['2021/04/13 12:49:33', 2.779445] }, { name: '总氮', value: ['2021/04/13 12:49:48', 2.779743] }, { name: '总氮', value: ['2021/04/13 12:50:03', 2.779332] }, { name: '总氮', value: ['2021/04/13 12:50:18', 2.779562] }, { name: '总氮', value: ['2021/04/13 12:50:33', 2.779560] }, { name: '总氮', value: ['2021/04/13 12:50:48', 2.779534] }, { name: '总氮', value: ['2021/04/13 12:51:03', 2.779412] }, { name: '总氮', value: ['2021/04/13 12:51:18', 2.779673] }, { name: '总氮', value: ['2021/04/13 12:51:33', 2.779452] }, { name: '总氮', value: ['2021/04/13 12:51:48', 2.779397] }, { name: '总氮', value: ['2021/04/13 12:52:03', 2.779342] }, { name: '总氮', value: ['2021/04/13 12:52:18', 2.779287] }], zdcbcolor: 'red', zxcolor: '#e0ffff', bzz: 15 }, { name: '废水流量', data: [{ name: '废水流量', value: ['2021/04/13 12:47:18', 31.63029] }, { name: '废水流量', value: ['2021/04/13 12:47:33', 31.9791] }, { name: '废水流量', value: ['2021/04/13 12:47:48', 31.92095] }, { name: '废水流量', value: ['2021/04/13 12:48:03', 32.05784] }, { name: '废水流量', value: ['2021/04/13 12:48:18', 32.01669] }, { name: '废水流量', value: ['2021/04/13 12:48:33', 32.39344] }, { name: '废水流量', value: ['2021/04/13 12:48:48', 32.66452] }, { name: '废水流量', value: ['2021/04/13 12:49:03', 32.45224] }, { name: '废水流量', value: ['2021/04/13 12:49:18', 32.42133] }, { name: '废水流量', value: ['2021/04/13 12:49:33', 32.88445] }, { name: '废水流量', value: ['2021/04/13 12:49:48', 32.36743] }, { name: '废水流量', value: ['2021/04/13 12:50:03', 32.83332] }, { name: '废水流量', value: ['2021/04/13 12:50:18', 32.15562] }, { name: '废水流量', value: ['2021/04/13 12:50:33', 32.61560] }, { name: '废水流量', value: ['2021/04/13 12:50:48', 32.89534] }, { name: '废水流量', value: ['2021/04/13 12:51:03', 32.72412] }, { name: '废水流量', value: ['2021/04/13 12:51:18', 32.48673] }, { name: '废水流量', value: ['2021/04/13 12:51:33', 32.03452] }, { name: '废水流量', value: ['2021/04/13 12:51:48', 32.93397] }, { name: '废水流量', value: ['2021/04/13 12:52:03', 32.84342] }, { name: '废水流量', value: ['2021/04/13 12:52:18', 32.16287] }], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: 'COD', data: [{ name: 'COD', value: ['2021/04/13 12:47:18', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:47:33', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:47:48', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:48:03', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:48:18', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:48:33', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:48:48', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:49:03', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:49:18', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:49:33', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:49:48', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:50:03', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:50:18', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:50:33', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:50:48', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:51:03', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:51:18', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:51:33', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:51:48', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:52:03', 11.24385] }, { name: 'COD', value: ['2021/04/13 12:52:18', 11.24385] }], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 } ], yname: ' 浓度(mg/l)' // echarts的options数据传入 echartsOptions: { legend: [], ydatas: [], yname: ' 浓度(mg/m³)' }, JSONTimeData: { id: 21, unionTagCodeList: ['TJIP45.rl3AT25035', 'TJIP45.rl3AT25033', 'TJIP45.rl3FT35032', 'TJIP45.rl3AT25034'] }, res: [{ UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.02153, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.7473, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.56014, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.59335, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.49617, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.33835, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.93116, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.831, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.67476, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.04687, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.78848, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.03456, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.81089, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.28693, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.79956, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.11547, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.72007, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.11903, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 44.28426, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 45.07601, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.81406, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.312585, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.507234, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.383248, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.385284, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.719143, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.730373, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.602137, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.459584, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.313675, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.305554, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.911544, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.744454, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.267665, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.606314, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.599967, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.939136, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.03244, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.183742, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.323384, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.403428, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.347282, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.018858, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020605, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.047671, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020306, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.054744, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.027292, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.026794, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.03381, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.041131, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.02754, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.998859, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.014368, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.019042, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.046045, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.024141, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.016951, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.01229, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.00666, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.005168, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.99309, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.983859, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.128864, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.096089, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.13711, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.191255, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.159299, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.089755, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.098142, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.084317, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.040828, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.066903, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.12027, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.075927, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.062984, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.190477, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.192902, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.061741, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 0.991724, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.006655, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.044971, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.077099, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null }, { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.131417, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }], startTime: '', endTime: '', step: '' unionTagCodeList: [] } } }, mounted () { this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss') // console.log(this.formInline.timeStart) // console.log(this.JsonRealWasteWater.ydatas[0].data[0].value[0]) }, updated () { this.DrawRealTimeDateChart() this.$nextTick(() => { this.initEchartsData() }) }, methods: { onSubmit () { this.DrawRealTimeDateChart() // 初始化数据获取echarts的options数据 async initEchartsData () { // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间 this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') const data = { $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM', $startTime: this.formInline.timeEnd, $endTime: this.formInline.timeStart, $step: 15 } const result = (await mapApi.DataItems(data)).data console.log(result) // this.hash(result) // this.hashtime(result) // this.dealwithData(result) this.DrawEXHRealTimeDateChart() this.myChart.hideLoading() }, // 画废水折线图--实时数据 DrawRealTimeDateChart () { var legend = this.JsonRealWasteWater.legend var ydatas = this.JsonRealWasteWater.ydatas var yname = this.JsonRealWasteWater.yname this.RealTimeChart = this.$echarts.init(this.$refs.main) var serLists = [] for (var i = 0; i < ydatas.length; i++) { // var zdcbcolor = ydatas[i].zdcbcolor // 数据处理 dealwithData (result) { // 处理数据开始 const d = result // const nameList = [] // 存放图例 let data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} // const datalist // 存放data的数组 // const bzh = [] for (let i = 0; i < d.length; i++) { const name = d[i].UnionTagCode const newdate = d[i].ReadTime data = { name: name, value: [newdate, d[i].TagValue] } console.log(data) // for (var k = 0; k < RealTimeDataList.length; k++) { // if (RealTimeDataList[k].name == name) { // RealTimeDataList[k].data.push(data) // } // } } }, // hash (result) { // // const hash = [] // // for (let i = 0; i < result.length; i++) { // // if (hash.indexOf(result[i].UnionTagCode) === -1) { // // hash.push(result[i].UnionTagCode) // // } // // } // // console.log(hash) // // this.JSONTimeData.unionTagCodeList = hash // // var lengList = [] // var lengList = result // var objTemp // // for (var l = 0; l < lengList.length; l++) { // var obj // var iconurl // if (lengList[l] == 'COD') { // iconurl = 'image://../assets/imgs/legend/SO2.png' // } else if (nameList[l] == '氨氮') { // iconurl = 'image://../assets/imgs/legend/NOX.png' // } else if (nameList[l] == '总磷') { // iconurl = 'image://../assets/imgs/legend/YanChen.png' // } else if (nameList[l] == '总氮') { // iconurl = 'image://../assets/imgs/legend/zongdan.png' // } else { // iconurl = 'image://../assets/imgs/legend/VOCs.png' // } // // if (nameList[l] == '废水' || nameList[l] == '废水流量') { // 将废水流量排到数组最后 // objTemp = { // name: nameList[l], // icon: iconurl, // textStyle: { // color: '#ccc' // }, // itemWidth: 20, // itemHeight: 5 // } // } else { // obj = { // name: nameList[l], // icon: iconurl, // textStyle: { // color: '#ccc' // }, // itemWidth: 20, // itemHeight: 5 // } // lengList.push(obj) // } // } // lengList.push(objTemp) // }, hashtime (result) { const hashtime = [] for (let i = 0; i < result.length; i++) { if (hashtime.indexOf(result[i].ReadTime) === -1) { hashtime.push(result[i].ReadTime) } } console.log(hashtime) }, DrawEXHRealTimeDateChart () { // 赋值的数据 // var legend = this.echartsOptions.legend // var ydatas = this.echartsOptions.ydatas const yname = this.echartsOptions.yname const ydatas = [ { name: '氮氧化物', zdcbcolor: '#00B0F0', zxcolor: '#00B0F0', bzz: 50, data: [{ name: '氮氧化物', value: ['2021/04/13 09:18:19', 39.51431] }, { name: '氮氧化物', value: ['2021/04/13 09:18:34', 38.76508] }, { name: '氮氧化物', value: ['2021/04/13 09:18:49', 37.57471] }, { name: '氮氧化物', value: ['2021/04/13 09:19:04', 36.3796] }, { name: '氮氧化物', value: ['2021/04/13 09:19:19', 36.10718] }, { name: '氮氧化物', value: ['2021/04/13 09:19:34', 35.81126] }, { name: '氮氧化物', value: ['2021/04/13 09:19:49', 35.9184] }, { name: '氮氧化物', value: ['2021/04/13 09:20:04', 36.08839] }, { name: '氮氧化物', value: ['2021/04/13 09:20:19', 36.3718] }, { name: '氮氧化物', value: ['2021/04/13 09:20:34', 36.8966] }, { name: '氮氧化物', value: ['2021/04/13 09:20:49', 37.3998] }, { name: '氮氧化物', value: ['2021/04/13 09:21:04', 37.11937] }, { name: '氮氧化物', value: ['2021/04/13 09:21:19', 36.12424] }, { name: '氮氧化物', value: ['2021/04/13 09:21:34', 34.99567] }, { name: '氮氧化物', value: ['2021/04/13 09:21:49', 34.48063] }, { name: '氮氧化物', value: ['2021/04/13 09:22:04', 34.62222] }, { name: '氮氧化物', value: ['2021/04/13 09:22:19', 34.84583] }, { name: '氮氧化物', value: ['2021/04/13 09:22:34', 35.80923] }, { name: '氮氧化物', value: ['2021/04/13 09:22:49', 35.93465] }, { name: '氮氧化物', value: ['2021/04/13 09:23:04', 35.78891] }, { name: '氮氧化物', value: ['2021/04/13 09:23:19', 35.54268] }] }, { name: '二氧化硫', data: [{ name: '二氧化硫', value: ['2021/04/13 09:18:19', 5.112573] }, { name: '二氧化硫', value: ['2021/04/13 09:18:34', 4.578955] }, { name: '二氧化硫', value: ['2021/04/13 09:18:49', 4.869465] }, { name: '二氧化硫', value: ['2021/04/13 09:19:04', 5.270735] }, { name: '二氧化硫', value: ['2021/04/13 09:19:19', 5.355475] }, { name: '二氧化硫', value: ['2021/04/13 09:19:34', 5.242907] }, { name: '二氧化硫', value: ['2021/04/13 09:19:49', 5.230558] }, { name: '二氧化硫', value: ['2021/04/13 09:20:04', 5.262951] }, { name: '二氧化硫', value: ['2021/04/13 09:20:19', 5.268744] }, { name: '二氧化硫', value: ['2021/04/13 09:20:34', 5.159671] }, { name: '二氧化硫', value: ['2021/04/13 09:20:49', 4.955352] }, { name: '二氧化硫', value: ['2021/04/13 09:21:04', 5.110546] }, { name: '二氧化硫', value: ['2021/04/13 09:21:19', 5.235723] }, { name: '二氧化硫', value: ['2021/04/13 09:21:34', 5.443502] }, { name: '二氧化硫', value: ['2021/04/13 09:21:49', 5.708939] }, { name: '二氧化硫', value: ['2021/04/13 09:22:04', 5.882327] }, { name: '二氧化硫', value: ['2021/04/13 09:22:19', 6.017494] }, { name: '二氧化硫', value: ['2021/04/13 09:22:34', 5.410021] }, { name: '二氧化硫', value: ['2021/04/13 09:22:49', 5.379694] }, { name: '二氧化硫', value: ['2021/04/13 09:23:04', 5.551433] }, { name: '二氧化硫', value: ['2021/04/13 09:23:19', 5.819743] }], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 }, { name: '废气流量', data: [{ name: '废气流量', value: ['2021/04/13 09:18:19', 5.012617] }, { name: '废气流量', value: ['2021/04/13 09:18:34', 4.992213] }, { name: '废气流量', value: ['2021/04/13 09:18:49', 5.026886] }, { name: '废气流量', value: ['2021/04/13 09:19:04', 5.052861] }, { name: '废气流量', value: ['2021/04/13 09:19:19', 5.038826] }, { name: '废气流量', value: ['2021/04/13 09:19:34', 5.062339] }, { name: '废气流量', value: ['2021/04/13 09:19:49', 5.071915] }, { name: '废气流量', value: ['2021/04/13 09:20:04', 5.053693] }, { name: '废气流量', value: ['2021/04/13 09:20:19', 5.03562] }, { name: '废气流量', value: ['2021/04/13 09:20:34', 5.043983] }, { name: '废气流量', value: ['2021/04/13 09:20:49', 5.059231] }, { name: '废气流量', value: ['2021/04/13 09:21:04', 5.042176] }, { name: '废气流量', value: ['2021/04/13 09:21:19', 5.028253] }, { name: '废气流量', value: ['2021/04/13 09:21:34', 5.024891] }, { name: '废气流量', value: ['2021/04/13 09:21:49', 5.01542] }, { name: '废气流量', value: ['2021/04/13 09:22:04', 5.025787] }, { name: '废气流量', value: ['2021/04/13 09:22:19', 5.038269] }, { name: '废气流量', value: ['2021/04/13 09:22:34', 5.01441] }, { name: '废气流量', value: ['2021/04/13 09:22:49', 5.010105] }, { name: '废气流量', value: ['2021/04/13 09:23:04', 5.012341] }, { name: '废气流量', value: ['2021/04/13 09:23:19', 4.996146] }], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: '烟尘', data: [{ name: '烟尘', value: [['2021/04/13 09:18:19', 0.8297127]] }, { name: '烟尘', value: ['2021/04/13 09:18:34', 0.8347292] }, { name: '烟尘', value: ['2021/04/13 09:18:49', 0.9218481] }, { name: '烟尘', value: ['2021/04/13 09:19:04', 0.913429] }, { name: '烟尘', value: ['2021/04/13 09:19:19', 0.9026684] }, { name: '烟尘', value: ['2021/04/13 09:19:34', 0.8060119] }, { name: '烟尘', value: ['2021/04/13 09:19:49', 0.781314] }, { name: '烟尘', value: ['2021/04/13 09:20:04', 0.8958074] }, { name: '烟尘', value: ['2021/04/13 09:20:19', 0.9093901] }, { name: '烟尘', value: ['2021/04/13 09:20:34', 0.8743498] }, { name: '烟尘', value: ['2021/04/13 09:20:49', 0.9024854] }, { name: '烟尘', value: ['2021/04/13 09:21:04', 0.9456897] }, { name: '烟尘', value: ['2021/04/13 09:21:19', 0.9747347] }, { name: '烟尘', value: ['2021/04/13 09:21:34', 0.9200308] }, { name: '烟尘', value: ['2021/04/13 09:21:49', 0.8987293] }, { name: '烟尘', value: ['2021/04/13 09:22:04', 0.8613345] }, { name: '烟尘', value: ['2021/04/13 09:22:19', 0.8747463] }, { name: '烟尘', value: ['2021/04/13 09:22:34', 0.8883187] }, { name: '烟尘', value: ['2021/04/13 09:22:49', 0.881333] }, { name: '烟尘', value: ['2021/04/13 09:23:04', 0.9142911] }, { name: '烟尘', value: ['2021/04/13 09:23:19', 0.9569058] }], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }] // const legend = [ // // data: 'legend' // { // name: '氮氧化物', // icon: 'image://../assets/imgs/legend/NOX.png', // textStyle: { color: '#ccc' }, // itemWidth: 20, // itemHeight: 15 // }, // { // icon: 'image://../assets/imgs/legend/SO2.png', // itemHeight: 5, // itemWidth: 20, // name: '二氧化硫', // textStyle: { // color: '#CCC' // } // }, // { // icon: 'image://../assets/imgs/legend/YanChen.png', // itemHeight: 5, // itemWidth: 20, // name: '烟尘', // textStyle: { color: '#ccc' } // }, // { // icon: 'image://../assets/imgs/legend/VOCs.png', // itemHeight: 5, // itemWidth: 20, // name: '废气流量', // textStyle: { color: '#ccc' } // } // ] // const iconlist = ['image://../assets/imgs/legend/NOX.png', 'image://../assets/imgs/legend/VOCs.png'] // { // icon: 'image://../assets/imgs/legend/NOX.png' // }, { // icon: 'image://../assets/imgs/legend/SO2.png' // }, { // icon: 'image://../assets/imgs/legend/YanChen.png' // }, // { // icon: 'image://../assets/imgs/legend/VOCs.png' // }] // 初始化echarts this.myChart = this.$echarts.init(this.$refs.echarts) // echarts的series数据 const serLists = [] // for (var j = 0; j < ydatas.length; j++) { // var len = ydatas[j].data.length // for (var k = 0; k < len; k++) { // var it = ydatas[j].data[k] // var it2 = parseFloat(it).toFixed(2) // ydatas[j].data[k] = it2 // } // } for (let i = 0; i < ydatas.length; i++) { var bz = ydatas[i].bzz var obj if (bz) { obj = { name: ydatas[i].name, // symbol:'circle', // 折点形状 // symbolSize: 3, //大小 smooth: true, // 直线 ，true 为曲线 smooth: true, itemStyle: { normal: { color: function (c) { // 根据value 显示不同的折点颜色 // var biaozhuiz // for (var i = 0; i < bzzList.length; i++) { // if (bzzList[i].name == c.seriesName) { // biaozhuiz = bzzList[i].bzhui // for (var i = 0; i < exhbzzList.length; i++) { // if (exhbzzList[i].name == c.seriesName) { // biaozhuiz = exhbzzList[i].bzhui // } // } // if (c.value[1] > biaozhuiz) { // return zdcbcolor // } else if (c.value[1] > biaozhuiz * 0.9) { // return '#FFA500' // } // { // } else { // return '#33c95f' // } }, @@ -396,7 +683,6 @@ show: false } } }, type: 'line', data: ydatas[i].data, @@ -416,17 +702,13 @@ type: 'dashed', width: 2 } } ] }] } } } else { obj = { name: ydatas[i].name, // symbol:'circle', // 折点形状 // symbolSize: 3, //大小 smooth: true, // 直线 ，true 为曲线 yAxisIndex: 1, smooth: true, itemStyle: { normal: { color: function (c) { // 根据value 显示不同的折点颜色 @@ -441,24 +723,18 @@ show: false } } }, type: 'line', data: ydatas[i].data } } if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') { obj.yAxisIndex = 1 } serLists.push(obj) } var option = { /* title: { text: title, }, */ tooltip: { // 提示框 const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', @@ -476,45 +752,48 @@ var value = params[i].value[1] // var valueFliter = this.formatter(value) var maker = params[i].marker var colo = '' switch (seriesName) { case 'COD': colo = '#fff21c' break case '氨氮': colo = '#00B0F0' break case '总磷': colo = '#f48183' break case '总氮': colo = '#e0ffff' break default: colo = '#9ACD32' break if (seriesName === '二氧化硫') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' } else if (seriesName === '氮氧化物') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>' } else if (seriesName === '烟尘') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>' } else if (seriesName === '温度') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>' } else { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' s += maker + seriesName + ':' + value + '<br />' } return s } }, toolbox: { // 打印等工具 toolbox: { show: false, feature: { saveAsImage: {} } }, grid: { // 网格 top: '20%', left: '7%', bottom: '15%', right: '5%' grid: { top: '20%' }, legend: { data: legend }, // legend: { // data: legend // }, legend: [ { // icon: iconlist.map(item => { // return item // }), icon: 'image://../assets/imgs/legend/VOCs.png', itemHeight: 20, itemWidth: 30, textStyle: { color: '#ccc' }, data: ydatas.map(item => { return item.name }) } ], dataZoom: [{ type: 'inside', start: 0, @@ -533,39 +812,38 @@ shadowOffsetY: 2 } }], xAxis: { // x 轴设置 xAxis: { type: 'time', boundaryGap: false, axisLabel: { // x轴全部显示 // rotate: 30, axisLabel: { margin: 6, interval: 0, textStyle: { color: '#fff' } }, splitLine: { // 网格垂直线为 虚线 splitLine: { show: true, lineStyle: { type: 'dashed' } }, axisTick: { // x 轴刻度显示 axisTick: { show: false }, axisLine: { lineStyle: { color: '#FFFFFF', width: 1// 这里是为了突出显示加上的 width: 1 } } // data: xdata }, yAxis: [{ type: 'value', name: yname, max: function (value) { return parseInt(value.max + 30) var ma = value.max > 100 ? value.max : 100 return parseInt(ma) }, axisLabel: { formatter: '{value}', @@ -578,16 +856,16 @@ }, splitLine: { show: false }, // y轴 网格线不显示, }, axisLine: { lineStyle: { color: '#FFFFFF', width: 1// 这里是为了突出显示加上的 width: 1 } } }, { type: 'value', name: '流量(m³/d)', name: '废气流量(m3/h)', axisLabel: { formatter: '{value}', textStyle: { @@ -599,302 +877,294 @@ }, splitLine: { show: false }, // y轴 网格线不显示, // inverse: true, // nameLocation: 'start', // max:500, }, axisLine: { lineStyle: { color: '#FFFFFF', width: 1// 这里是为了突出显示加上的 width: 1 } } }], series: serLists } this.RealTimeChart.setOption(option) /* RealTimeChart.on('legendselectchanged', function (params) { // console.log(params); var StdVal = null var op = { yAxis: {} } if (params.selected.COD) { if (bzzList && bzzList.length > 0) { for (let i = 0; i < bzzList.length; i++) { if (bzzList[i].name == 'COD') { StdVal = bzzList[i].bzhui } } } this.myChart.setOption(option) window.addEventListener('resize', this.myChart.resize) // 显示加载动画 this.myChart.showLoading() // this.IntervalEXHRealTimeDate() op.yAxis.max = function (value) { var ma if (value.max < StdVal) { ma = StdVal } else { ma = Math.ceil(value.max) } return ma } } else if (params.selected['总氮']) { if (bzzList && bzzList.length > 0) { for (let i = 0; i < bzzList.length; i++) { if (bzzList[i].name == '总氮') { StdVal = bzzList[i].bzhui } } } op.yAxis.max = function (value) { var ma if (value.max < StdVal) { ma = StdVal } else { ma = Math.ceil(value.max) } return ma } } else if (params.selected['氨氮']) { if (bzzList && bzzList.length > 0) { for (let i = 0; i < bzzList.length; i++) { if (bzzList[i].name == '氨氮') { StdVal = bzzList[i].bzhui } } } op.yAxis.max = function (value) { var ma if (value.max < StdVal) { ma = StdVal } else { ma = Math.ceil(value.max) } return ma } } else if (params.selected['总磷']) { if (bzzList && bzzList.length > 0) { for (let i = 0; i < bzzList.length; i++) { if (bzzList[i].name == '总磷') { StdVal = bzzList[i].bzhui } } } op.yAxis.max = function (value) { var ma if (value.max < StdVal) { ma = StdVal } else { ma = Math.ceil(value.max) } return ma } } RealTimeChart.setOption(op) }) */ // this.myChart.on('legendselectchanged', function (params) { // var StdVal = null // var op = { yAxis: {} } // var max_val_list = [] // 所有显示折线的标准值 // if (exhbzzList && exhbzzList.length > 0) { // $.each(exhbzzList, function (index, item) { // params.selected[item.name] ? max_val_list.push(item.bzhui) : '' // if (item.name === params.name) { // item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui // } // }) // } // max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序 // op.yAxis.max = function (value) { // var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) // max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值 // return ma // } // myChart.setOption(op) // }) // myChart.on('click', function (params) { // var nowDate = new Date().Format() // }) }, getRtdb15s (unionTagCodeList, startTime, endTime, step, res) { if (res.length > 0) { // 处理数据开始 var d = res var nameList = [] // 存放图例 var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} var datalist // 存放data的数组 // var bzh = [] for (var i = 0; i < d.length; i++) { if (d[i].ErrorMessage != null) { continue } // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName if (nameList.length === 0) { nameList.push(name) var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } this.RealTimeDataList.push(datalist) } else if (nameList.indexOf(name) < 0) { nameList.push(name) // bzh.push(d[i].StdValue); // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } this.RealTimeDataList.push(datalist) } else if (i === d.length - 1) { if (nameList.indexOf(name) < 0) { nameList.push(name) // bzh.push(d[i].StdValue); // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } // RealTimeDataList.push(datalist) } else { // var newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } for (var k = 0; k < this.RealTimeDataList.length; k++) { if (this.RealTimeDataList[k].name === name) { this.RealTimeDataList[k].data.push(data) } } } } else { const newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } for (let k = 0; k < this.RealTimeDataList.length; k++) { if (this.RealTimeDataList[k].name === name) { this.RealTimeDataList[k].data.push(data) } } } } // var divid = 'mycharteff_second' // var title = name var lengList = [] var objTemp for (var l = 0; l < nameList.length; l++) { var obj var iconurl if (nameList[l] === 'COD') { iconurl = 'image://../assets/imgs/legend/SO2.png' } else if (nameList[l] === '氨氮') { iconurl = 'image://../assets/imgs/legend/NOX.png' } else if (nameList[l] === '总磷') { iconurl = 'image://../assets/imgs/legend/YanChen.png' } else if (nameList[l] === '总氮') { iconurl = 'image://../assets/imgs/legend/zongdan.png' } else { iconurl = 'image://../assets/imgs/legend/VOCs.png' } if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后 objTemp = { name: nameList[l], icon: iconurl, textStyle: { color: '#ccc' }, itemWidth: 20, itemHeight: 5 } } else { obj = { name: nameList[l], icon: iconurl, textStyle: { color: '#ccc' }, itemWidth: 20, itemHeight: 5 } lengList.push(obj) } } lengList.push(objTemp) this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) } }, // 实时数据调用钩子函数 IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) { // 定时器函数 this.interValHander = setInterval(function () { // $('.RealTime').empty() this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss') this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss') this.step = '15' // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res) // PreQueryTime=endTime; this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) this.IntervalRealTimeDate(this.JSONTimeData.id, this.JSONTimeData.unionTagCodeList, this.BBZMAPPING) }, 15000) // 点击查询按钮功能 onSubmit () { this.DrawEXHRealTimeDateChart() this.myChart.hideLoading() } // getRtdbFormat (res) { // var data = res.collection.items // var dataArray = [] // for (var i = 0; i < data.length; i++) { // var dataFormat = { // UnionTagCode: data[i].data[0].value, // TagValue: parseFloat(data[i].data[1].value), // ReadTime: data[i].data[3].value, // ErrorMessage: data[i].data[5].value // } // dataArray.push(dataFormat) // } // return dataArray // }, // 1.坐标轴实现,画实时数据 // getRtdb15s (unionTagCodeList, startTime, endTime, step, res) { // if (this.res.length > 0) { // // 处理数据开始 // var d = res // var nameList = [] // 存放图例 // // var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} // var datalist // 存放data的数组 // // var bzh = [] // for (var i = 0; i < d.length; i++) { // if (d[i].ErrorMessage != null) { // continue // } // // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName // // if (nameList.length === 0) { // nameList.push(name) // // var newdate = new Date(this.res.ReadTime) // data = { // name: name, // value: [newdate, this.res.TagValue] // } // // datalist = { // name: name, // data: [data] // } // // this.EXHRealTimeDataList.push(datalist) // } else if (nameList.indexOf(name) < 0) { // nameList.push(name) // // // var newdate = new Date(d[i].ReadTime) // // data = { // name: name, // value: [newdate, d[i].TagValue] // } // datalist = { // name: name, // data: [data] // } // this.EXHRealTimeDataList.push(datalist) // } else if (i === d.length - 1) { // if (nameList.indexOf(name) < 0) { // nameList.push(name) // // // var newdate = new Date(d[i].ReadTime) // // data = { // name: name, // value: [newdate, d[i].TagValue] // } // datalist = { // name: name, // data: [data] // } // // EXHRealTimeDataList.push(datalist) // } else { // // var newdate = new Date(d[i].ReadTime) // data = { // name: name, // value: [newdate, d[i].TagValue] // } // for (var k = 0; k < this.EXHRealTimeDataList.length; k++) { // if (this.EXHRealTimeDataList[k].name === name) { // this.EXHRealTimeDataList[k].data.push(data) // } // } // } // } else { // const newdate = new Date(d[i].ReadTime) // data = { // name: name, // value: [newdate, d[i].TagValue] // } // for (let k = 0; k < this.EXHRealTimeDataList.length; k++) { // if (this.EXHRealTimeDataList[k].name === name) { // this.EXHRealTimeDataList[k].data.push(data) // } // } // } // } // // // var divid = 'mychart_ss' // // var title = name // var lengList = [] // var objTemp // // for (var l = 0; l < nameList.length; l++) { // var obj // var iconurl // if (nameList[l] === '二氧化硫') { // iconurl = 'image://../assets/imgs/legend/SO2.png' // } else if (nameList[l] === '氮氧化物') { // iconurl = 'image://../assets/imgs/legend/NOX.png' // } else if (nameList[l] === '烟尘') { // iconurl = 'image://../assets/imgs/legend/YanChen.png' // } else if (nameList[l] === '非甲烷总烃') { // iconurl = 'image://../assets/imgs/legend/grn.png' // } else if (nameList[l] === '温度') { // iconurl = 'image://../assets/imgs/legend/WenDu.png' // } else { // iconurl = 'image://../assets/imgs/legend/VOCs.png' // } // // if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后 // objTemp = { // name: nameList[l], // icon: iconurl, // textStyle: { // color: '#ccc' // }, // itemWidth: 20, // itemHeight: 5 // } // } else { // obj = { // name: nameList[l], // icon: iconurl, // textStyle: { // color: '#ccc' // }, // itemWidth: 20, // itemHeight: 5 // } // lengList.push(obj) // } // } // lengList.push(objTemp) // // this.DrawEXHRealTimeDateChart(this.echartsOptions.id, this.echartsOptions.title, this.echartsOptions.legend, this.echartsOptions.ydatas, this.echartsOptions.yname) // } // }, // 钩子调用实时 // IntervalEXHRealTimeDate () { // // 定时器函数 // this.DrawEXHRealTimeDateChart() // setInterval(function () { // // $('.RealTime').empty() // this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss') // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // this.step = '15' // // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res) // // PreQueryTime=endTime; // }, 1500) // } } } </script> <style scoped lang="less"> .grid-content{ .grid-content { font-size: 8px; background-color: #2e4967; text-align: center; border-radius: 2px; margin-right: 10px; padding:0 10px padding: 0 10px; > i { color: #ffffff; } } .infomation { padding: 5px 10px; .animation { //width: 600px; //height: 0.06rem; .infomation { padding: 5px 10px; } } .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ .from-search { display: flex; padding:5px; >div{margin-left: 10px} .pickerMon{ padding: 5px; > div { margin-left: 10px } .pickerMon { display: flex; >div:first-child { > div:first-child { margin-right: 10px; } .pickerData{ .pickerData { flex: 1; display: flex; >span{line-height: 22px} > span { line-height: 22px } .pickerTable { margin-left: 3px; } } } /deep/.el-date-editor--datetime{ /deep/ .el-date-editor--datetime { width: 100%; } /deep/.el-input__inner{ /deep/ .el-input__inner { position: relative; width:140px; width: 140px; background-color: #2e4967; color: #ffffff; color: #fff; font-size: 12px; height: 24px; padding: 0; border-color:#00fff6; border-color: #00fff6; text-align: center; z-index: 9999; //padding-left:20px ; //padding: 0!important; } /deep/.el-input__icon{ /deep/ .el-input__icon { display: block; width: 140px; height: 22px; @@ -902,32 +1172,31 @@ cursor: pointer; font-size: 0; } .echatsInput{ .echatsInput { color: #00ffff; background-color: #2e4967; border: none; border-radius: 6px; width: 80px; height: 22px; text-align: center; } input::-webkit-calendar-picker-indicator { opacity: 100; } .detailbtn{ background-color:#2e4967; .detailbtn { background-color: #2e4967; text-align: center; padding: 0 7px; line-height: 24px; line-height: 20px; border-radius: 4px; margin-right: 6px; } .detailbtn:hover{ box-shadow: 0 0 0.03rem #fff700 !important; color:#fff700 !important; cursor: pointer; } } .el-dialog-div { //height: 50vh!important; overflow: auto; @@ -937,6 +1206,9 @@ #echarts { margin: 0; padding: 0; //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } } </style>
