From edbf4224c71014eacdcdcde12a9a2885ab0ffd23 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期二, 13 四月 2021 17:42:31 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue | 465 +++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 296 insertions(+), 169 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue index a9220cc..b67cfa6 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue @@ -1,12 +1,12 @@ -<!-- 鏃ユ暟鎹� --> +<!-- 搴熸按瀹炴椂鏁版嵁 --> <template> <div id="Tab"> <div class="animation"> <div class="infomation"> - <span class="grid-content">姘哀鍖栫墿 :<i>29.93</i> 鏍囧噯 : 100</span> - <span class="grid-content">浜屾哀鍖栫~ : <i>17.34</i> 鏍囧噯 : 50</span> - <span class="grid-content">鐑熷皹 : <i>6.93</i> 鏍囧噯 : 30</span> - <span class="grid-content">搴熸皵娴侀噺 : <i>120343.18</i></span> + <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">鎬荤7 : <i>0.03812287</i> 鏍囧噯 : 30</span> + <span class="grid-content">搴熸按娴侀噺 : <i>32.16287</i></span> </div> </div> <div class="form-echrts"> @@ -15,19 +15,21 @@ <div class="pickerData"> <span> 寮�濮嬫椂闂�:</span> <span class="pickerTable"> - <el-date-picker type="datetime" v-model="value1"></el-date-picker> + <el-date-picker type="datetime" v-model="formInline.timeStart"> + </el-date-picker> </span> </div> <div class="pickerData"> <span >缁撴潫鏃堕棿:</span> <span class="pickerTable"> - <el-date-picker type="datetime" v-model="value2"></el-date-picker> + <el-date-picker type="datetime" v-model="formInline.timeEnd"> + </el-date-picker> </span> </div> </div> <div> 閲囨牱鐐规暟: - <el-select v-model="formInline.region" placeholder="50"> + <el-select v-model="formInline.region" placeholder="25"> <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,7 +40,8 @@ <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="el-dialog-div" style="height: 260px"> + <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </div> <!-- 鏄庣粏寮规 --> @@ -58,6 +61,8 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' +import 'dayjs/locale/es' +import dayjs from 'dayjs' export default { name: 'ECharts', @@ -71,72 +76,206 @@ watchData: [], dialogVisible: false, myChar: null, + RealTimeChart: null, value: '', + days: dayjs(new Date()).format('YYYYMMDDHHmmss'), formInline: { - user: '', - region: '' + region: '', + timeStart: '2021-04-13 12:47:18', + timeEnd: '2021-04-13 12:52:18' }, - JsonRealWater: { - datatype: 1, - id: 'mychart1eff', - jcdID: '1020', + JsonRealWasteWater: { + id: 'mycharteff_second ', + title: 'COD', legend: [ { - name: 'COD', - icon: 'image://../assets/imgs/legend/SO2.png', - textStyle: { color: '#ccc' }, - itemWidth: 20, - itemHeight: 5 - }, - { - name: '姘ㄦ爱', icon: 'image://../assets/imgs/legend/NOX.png', - textStyle: { color: '#ccc' }, + itemHeight: 5, itemWidth: 20, - itemHeight: 5 + name: '姘ㄦ爱', + textStyle: { color: '#ccc' } }, { - name: '搴熸按娴侀噺', - icon: 'image://../assets/imgs/legend/VOCs.png', - textStyle: { color: '#ccc' }, + icon: 'image://../assets/imgs/legend/YanChen.png', + itemHeight: 5, itemWidth: 20, - itemHeight: 5 + name: '鎬荤7', + 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' } } ], - xdata: ['14鏃�', '15鏃�', '16鏃�', '17鏃�', '18鏃�', '19鏃�', '20鏃�', '21鏃�', '22鏃�', '23鏃�', '24鏃�', '25鏃�', '26鏃�', '27鏃�', '28鏃�', '29鏃�', '30鏃�', '31鏃�', '1 鏃�', '2 鏃�', '3 鏃�', '4 鏃�', '5 鏃�', '6 鏃�', '7 鏃�', '8 鏃�', '9 鏃�', '10鏃�', '11鏃�', '12鏃�'], ydatas: [ { - name: 'COD', - data: [11.626, 11.263, 13.186, 16.041, 20.021, 11.285, 19.546, 15.592, 16.603001, 23.582001, 23.325001, 21.077999, 20.959999, 18.955, 18.676001, 19.322001, 11.976, 11.92, 8.247, 6.38, 6.559, 10.25, 8.354, 7.562, 7.442, 7.543, 7.268, 6.255, 5.735, 8.115], - zdcbcolor: 'red', - zxcolor: '#fff21c', - bzz: 80 - }, - { - name: '姘ㄦ爱', - data: [0.224, 3.283, 1.715, 0.831, 4.168, 2.197, 0.451, 0.342, 0.601, 2.669, 1.503, 0.595, 0.649, 0.74, 0.631, 0.432, 0.488, 1.817, 0.579, 2.748, 0.527, 1.01, 0.441, 0.459, 0.582, 0.578, 0.575, 0.295, 0.297, 0.31], + name: '姘哀', + data: [{ name: '姘哀', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1900156] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1902795] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1892689] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1882582] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1882284] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1886617] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1873395] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1866319] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1895212] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1898232] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1880916] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1883546] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1907846] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1887416] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1873472] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1886214] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1891896] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1891176] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1890455] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1889734] }, + { name: '姘哀', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.1889014] }], zdcbcolor: 'red', zxcolor: '#00B0F0', - bzz: 25 + bzz: 3 + }, + { + name: '鎬荤7', + data: [{ name: '鎬荤7', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813388] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813333] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813278] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813223] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813168] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813113] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813057] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03813003] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812947] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812892] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812837] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812782] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812727] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812672] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812617] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812562] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812507] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812452] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812397] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812342] }, + { name: '鎬荤7', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 0.03812287] }], + zdcbcolor: 'red', + zxcolor: '#f48183', + bzz: 0.3 + }, + { + name: '鎬绘爱', + data: [{ name: '鎬绘爱', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779342] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779337] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779331] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779823] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779321] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779344] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779452] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779224] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779133] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779445] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779743] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779332] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779562] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779560] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779534] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779412] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779673] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779452] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779397] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779342] }, + { name: '鎬绘爱', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 2.779287] }], + zdcbcolor: 'red', + zxcolor: '#e0ffff', + bzz: 15 }, { name: '搴熸按娴侀噺', - data: [5697.10791, 5623.143066, 5177.564941, 5162.195801, 4633.836914, 4198.133789, 4286.970215, 4162.566895, 2561.10791, 1808.824951, 2961.506104, 2758.715088, 3373.334961, 3282.522949, 3817.322998, 3382.928955, 4747.026855, 2645.947021, 3539.041992, 2540.4729, 4657.589844, 3618.812988, 5725.787109, 6082.206055, 6345.832031, 6470.28418, 5611.5, 5599.958984, 4924.814941, 5191.693848], + data: [{ name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 31.63029] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 31.9791] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 31.92095] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.05784] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.01669] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.39344] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.66452] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.45224] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.42133] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.88445] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.36743] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.83332] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.15562] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.61560] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.89534] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.72412] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.48673] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.03452] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.93397] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.84342] }, + { name: '搴熸按娴侀噺', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 32.16287] }], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null + }, + { + name: 'COD', + data: [{ name: 'COD', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }, + { name: 'COD', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (涓浗鏍囧噯鏃堕棿)', 11.24385] }], + zdcbcolor: 'red', + zxcolor: '#fff21c', + bzz: 35 } ], - yname: '娴撳害(mg/l)' + yname: ' 娴撳害(mg/l)' } } }, + mounted () { + this.$nextTick(() => { + this.onSubmit() + }) + }, methods: { onSubmit () { - console.log('submit!') + this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) }, - DrawRealTimeDateChart: function (id, title, legend, ydatas, yname) { - this.myChart = this.echarts.init(this.$refs.main) + DrawRealTimeDateChart (id, title, legend, ydatas, yname) { + this.RealTimeChart = this.$echarts.init(this.$refs.main) var serLists = [] for (var i = 0; i < ydatas.length; i++) { // var zdcbcolor = ydatas[i].zdcbcolor @@ -253,32 +392,19 @@ var seriesName = params[i].seriesName // 鍊� var value = params[i].value[1] - var valueFliter - if (value === 'NaN') { - valueFliter = '' - } else { - // valueFliter = formatter(value) - } + var valueFliter = this.formatter(value) var maker = params[i].marker - var colo = '' - switch (seriesName) { - case 'COD': - colo = '#fff21c' - break - case '姘ㄦ爱': - colo = '#00B0F0' - break - case '鎬荤7': - colo = '#f48183' - break - case '鎬绘爱': - colo = '#e0ffff' - break - default: - colo = '#9ACD32' - break + if (seriesName === 'COD') { + 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 === '鎬荤7') { + 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:#d9f2f4;"></span>' + } else { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>' } - maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' s += maker + seriesName + ':' + valueFliter + '<br />' } return s @@ -317,6 +443,9 @@ xAxis: { // x 杞磋缃� type: 'time', boundaryGap: false, + nameTextStyle: { + fontSize: 15 + }, axisLabel: { // x杞村叏閮ㄦ樉绀� // rotate: 30, margin: 6, @@ -346,7 +475,8 @@ 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}', @@ -368,7 +498,7 @@ } }, { type: 'value', - name: dataUnit, + name: '娴侀噺(m鲁/h)', axisLabel: { formatter: '{value}', textStyle: { @@ -381,9 +511,6 @@ splitLine: { show: false }, // y杞� 缃戞牸绾夸笉鏄剧ず, - // inverse: true, - // nameLocation: 'start', - // max:500, axisLine: { lineStyle: { color: '#FFFFFF', @@ -393,8 +520,8 @@ }], series: serLists } - RealTimeChart.setOption(option) - RealTimeChart.on('legendselectchanged', function (params) { + this.RealTimeChart.setOption(option) + /* RealTimeChart.on('legendselectchanged', function (params) { // console.log(params); var StdVal = null var op = { yAxis: {} } @@ -482,7 +609,7 @@ this.myChart.getDom().style.width = 6 + 'rem' } this.myChart.resize() - } + } */ } } } @@ -512,99 +639,99 @@ // } // } //} - .grid-content { - font-size: 8px; - background-color: #2e4967; - text-align: center; - border-radius: 2px; - margin-right: 10px; - padding:0 10px +.grid-content{ + font-size: 8px; + background-color: #2e4967; + text-align: center; + border-radius: 2px; + margin-right: 10px; + padding:0 10px +} +.infomation { + padding: 5px 10px; +} + +.form-echrts { + width: 100%; + border-top: 1px solid #396d83; + //margin: 10px 10px 10px 10px; + .from-search{ + display: flex; + padding:5px; + >div{margin-left: 10px} + .pickerMon{ + display: flex; + >div:first-child { + margin-right: 10px; + } + .pickerData{ + flex: 1; + display: flex; + >span{line-height: 22px} + .pickerTable { + margin-left: 3px; + } + } + } + /deep/.el-date-editor--datetime{ + width: 100%; + } + /deep/.el-input__inner{ + position: relative; + width:140px; + background-color: #2e4967; + color: #ffffff; + font-size: 12px; + height: 24px; + padding: 0; + border-color:#00fff6; + text-align: center; + //padding-left:20px ; + //padding: 0!important; + } + /deep/.el-input__icon{ + display: block; + width: 140px; + height: 22px; + line-height: 22px; + cursor: pointer; + font-size: 0; + } + .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; + text-align: center; + padding: 0 7px; + line-height: 24px; + border-radius: 4px; + margin-right: 6px; + } + .detailbtn:hover{ + box-shadow: 0 0 0.03rem #fff700 !important; + color:#fff700 !important; + cursor: pointer; + } } -.animation { - //width: 600px; - //height: 0.06rem; - .infomation { - padding: 5px 10px; + .el-dialog-div { + //height: 50vh!important; + overflow: auto; + //overflow: hidden; + } + + #echarts { + margin: 0; + padding: 0; } } - .form-echrts { - width: 100%; - border-top: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - .from-search{ - display: flex; - padding:5px; - >div{margin-left: 10px} - .pickerMon{ - display: flex; - >div:first-child { - margin-right: 10px; - } - .pickerData{ - flex: 1; - display: flex; - >span{line-height: 22px} - .pickerTable { - margin-left: 3px; - } - } - } - /deep/.el-date-editor--datetime{ - width: 100%; - } - /deep/.el-input__inner{ - position: relative; - width:140px; - background-color: #2e4967; - color: #fff; - font-size: 12px; - height: 24px; - padding: 0; - border-color:#00fff6; - text-align: center; - //padding-left:20px ; - //padding: 0!important; - } - /deep/.el-input__icon{ - display: block; - width: 140px; - height: 22px; - line-height: 22px; - cursor: pointer; - font-size: 0; - } - .echatsInput{ - color: #00ffff; - background-color: #2e4967; - border: none; - border-radius: 6px; - width: 80px; - height: 22px; - } - input::-webkit-calendar-picker-indicator { - opacity: 100; - } - .detailbtn{ - background-color:#2e4967; - text-align: center; - padding: 0 7px; - line-height: 20px; - border-radius: 4px; - margin-right: 6px; - } - } - .el-dialog-div { - //height: 50vh!important; - overflow: auto; - //overflow: hidden; - } - - #echarts { - margin: 0; - padding: 0; - //height: 3rem; - //border: 1px solid #396d83; - //margin: 10px 10px 10px 10px; - } - } </style> -- Gitblit v1.8.0