派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/WasteWater/RealData.vue
@@ -1,13 +1,8 @@ <!-- 废水实时数据 --> <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 class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> <span class="time-select">{{ formInline.timeStart }}——{{ formInline.timeEnd }}</span> </div> <div class="form-echrts"> <div class="from-search"> @@ -15,20 +10,18 @@ <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,332 +30,342 @@ <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:1.5rem;" 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: '氮氧化物', 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)' // timeStart:, // timeEnd:'', // 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: '' // 实时数据列表 RealTimeDataList: [], bzz: null, bzzList: [] } }, 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() this.DrawEXHRealTimeDateChart() }, // 画废水折线图--实时数据 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 var bz = ydatas[i].bzz var obj // 初始化数据获取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.getDataItems(data)).data this.getRtdb15s(result) }, // echarts数据处理 getRtdb15s (res) { if (res.length > 0) { // 处理数据开始 const d = res const nameList = [] // 存放图例 // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} let data = {} // 存放data的数组 let datalist // var bzh = [] for (let i = 0; i < d.length; i++) { if (d[i].ErrorMessage != null) { continue } // 临时name数据 const nameListTemp = [ { 'TJIP45.lscl2tbAIA-10505-1': '氮氧化物', 'TJIP45.lscl2tbAIA-10505-2': '烟尘', 'TJIP45.lscl2tb552AISA11202A': '二氧化磷', 'TJIP45.lscl2tb552AISA11201B': 'ph', 'TJIP45.lscl2tb552AI10710': '二氧化碳' } ] const name = nameListTemp[0][d[i].UnionTagCode] if (nameList.length === 0) { nameList.push(name) const newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } this.RealTimeDataList.push(datalist) // console.log(this.RealTimeDataList) // bzh.push(d[i].StdValue); } else if (nameList.indexOf(name) < 0) { nameList.push(name) // bzh.push(d[i].StdValue); const 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); const newdate = new Date(d[i].ReadTime) data = { name: name, value: [newdate, d[i].TagValue] } datalist = { name: name, data: [data] } this.RealTimeDataList.push(datalist) } else { const 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) } } } } const divid = 'mycharteff_second' const title = name const lengList = [] let objTemp = [] // console.log(objTemp) for (let l = 0; l < nameList.length; l++) { let obj let iconurl if (nameList[l] === 'ph') { iconurl = 'image://../assets/imgs/legend/WenDu.png' } else if (nameList[l] === '氮氧化物') { iconurl = 'image://../assets/imgs/legend/NOX.png' } else if (nameList[l] === '烟尘') { iconurl = 'image://../assets/imgs/legend/zongdan.png' } else if (nameList[l] === '二氧化磷') { iconurl = 'image://../assets/imgs/legend/YanChen.png' } else if (nameList[l] === '二氧化碳') { iconurl = 'image://../assets/imgs/legend/VOCs.png' } if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后 // eslint-disable-next-line no-const-assign 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) } // console.log(lengList) } lengList.push(objTemp) const legend = lengList // const xdata = dateList.reverse(); const ydatas = [] for (let j = 0; j < nameList.length; j++) { let zdcbcolor, zxcolor if (nameList[j] === 'ph') { zdcbcolor = 'red' zxcolor = '#f206ff' } else if (nameList[j] === '烟尘') { zdcbcolor = 'red' zxcolor = '#e0ffff' } else if (nameList[j] === '氮氧化物') { zdcbcolor = 'red' zxcolor = '#00B0F0' } else if (nameList[j] === '二氧化碳') { zdcbcolor = 'red' zxcolor = '#9ACD32' } else if (nameList[j] === '二氧化磷') { zdcbcolor = 'red' zxcolor = '#f48183' } let ydata // 临时数据 const BBZMAPPING = [ { COD: 35, ph: 9, 总氮: 15, 总磷: 0.3, 氨氮: 3 } ] for (let m = 0; m < this.RealTimeDataList.length; m++) { let stdValue = null if (this.RealTimeDataList[m].name === nameList[j]) { // for (let p in BBZMAPPING) { // stdValue = BBZMAPPING[this.RealTimeDataList[m].name] // } BBZMAPPING.forEach((item) => { stdValue = BBZMAPPING[this.RealTimeDataList[m].name] }) ydata = { name: nameList[j], data: this.RealTimeDataList[m].data, zdcbcolor: zdcbcolor, zxcolor: zxcolor, bzz: stdValue } this.bzz = { name: nameList[j], bzhui: stdValue } this.bzzList.push(this.bzz) ydatas.push(ydata) } } } const yname = '浓度(mg/l)' this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname) // // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING) this.IntervalRealTimeDate() } }, // 获取数据用于echarts图表绘制 DrawRealTimeDateChart (id, title, legend, ydatas, yname) { this.myChart = this.$echarts.init(this.$refs.echarts) const serLists = [] let dataUnit for (let i = 0; i < ydatas.length; i++) { const zdcbcolor = ydatas[i].zdcbcolor const bz = ydatas[i].bzz let obj if (bz) { obj = { name: ydatas[i].name, @@ -372,20 +375,19 @@ 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 // } // } // if (c.value[1] > biaozhuiz) { // return zdcbcolor // } else if (c.value[1] > biaozhuiz * 0.9) { // return '#FFA500' // } // { // return '#33c95f' // } let biaozhuiz for (var i = 0; i < this.bzzList.length; i++) { if (this.bzzList[i].name === c.seriesName) { biaozhuiz = this.bzzList[i].bzhui } } if (c.value[1] > biaozhuiz) { return zdcbcolor } else if (c.value[1] > biaozhuiz * 0.9) { return '#FFA500' } else { return '#33c95f' } }, lineStyle: { // 折线的颜色 color: ydatas[i].zxcolor, @@ -451,13 +453,19 @@ if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') { obj.yAxisIndex = 1 } // 临时 const datatype = 1 if (datatype === 1) { dataUnit = '流量(m³/d)' } else { dataUnit = '流量(m³/h)' } serLists.push(obj) } var option = { const option = { /* title: { text: title, }, */ text: title, }, */ tooltip: { // 提示框 trigger: 'axis', axisPointer: { @@ -467,50 +475,54 @@ } }, formatter: function (params) { var s = params[0].name + '<br />' for (var i = 0; i < params.length; i++) { let s = params[0].name + '<br />' for (let i = 0; i < params.length; i++) { // var name = params[i].name // 图表title名称 var seriesName = params[i].seriesName const seriesName = params[i].seriesName // 值 var value = params[i].value[1] // var valueFliter = this.formatter(value) var maker = params[i].marker var colo = '' const value = params[i].value[1] // var valueFliter = formatter(value) const valueFliter = parseFloat(value).toFixed(2) let maker = params[i].marker let colo = '' switch (seriesName) { case 'COD': colo = '#fff21c' case 'ph': colo = '#f206ff' break case '氨氮': case '氮氧化物': colo = '#00B0F0' break case '总磷': colo = '#f48183' break case '总氮': case '烟尘': colo = '#e0ffff' break default: case '二氧化碳': colo = '#9ACD32' break case '二氧化磷': colo = '#f48183' break default: colo = '' break } 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 />' s += maker + seriesName + ':' + valueFliter + '<br />' } return s } }, toolbox: { // 打印等工具 toolbox: { show: false, feature: { saveAsImage: {} } }, grid: { // 网格 grid: { top: '20%', left: '7%', bottom: '15%', right: '5%' bottom: '15%' }, legend: { data: legend @@ -587,7 +599,7 @@ } }, { type: 'value', name: '流量(m³/d)', name: dataUnit, axisLabel: { formatter: '{value}', textStyle: { @@ -612,289 +624,115 @@ }], 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 } } } 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.setOption(option) }, 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) // const interValHander = setInterval(function () { // this.initEchartsData() // console.log('间隔请求数据') // }, 1500) // console.log(interValHander) } } } </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; .tab-scroll { display: flex; align-items: center; justify-content: space-between; .time-select { //margin: 0 10px; cursor: pointer; padding: 5px; border: 1px solid #2b87c8; border-radius: 4px; text-align: center; color: #fff; font-size: 11px; width: 280px; } } .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{ //justify-content: space-evenly; padding: 15px 0; > 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; margin-right: 15px; } .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 +740,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 +774,9 @@ #echarts { margin: 0; padding: 0; //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; } } </style>
