feat: 峰谷平增加时间段选择

src/views/enm_energy/electric_peak.vue

@@ -43,6 +43,19 @@
                     v-if="query.type==2"
                     class="headerSearch"
 					/>
+                    <el-date-picker
+                v-model="daterange"
+                type="datetimerange"
+                :shortcuts="shortcuts"
+                range-separator="To"
+                start-placeholder="Start date"
+                end-placeholder="End date"
+                placeholder="时间范围"
+                value-format="YYYY-MM-DD hh:mm:ss"
+                v-if="query.type==3"
+                style="margin-right: 6px"
+                @change="changeDate"
+				/>
 				<el-button
 					type="primary"
 					icon="el-icon-search"
@@ -80,6 +93,28 @@
                     </tr>
                 </tbody>
                 </table>
+                <!-- <el-table
+							v-if="query.type==3"
+							id="hourBaseTable"
+							:data="tableDatas_range"
+							style="width: 100%"
+							border
+							:height="tableHeight"
+							
+						>
+							<el-table-column
+								label="分类"
+								prop="mpoint__name"
+								fixed
+								align="center"
+							>
+							</el-table-column>
+							<el-table-column label="单位" prop="mpoint__unit" fixed align="center">
+							</el-table-column>
+							<el-table-column
+								label = "电耗" prop="total_val" fixed align="center">
+							</el-table-column>
+						</el-table> -->
             </div>
           </el-card>
           <div id="barChart" style="width: 100%; height: 400px;"></div>
@@ -99,6 +134,8 @@ import * as echarts from 'echarts';
 					start_time:'',
 					end_time:'',
                 },
+                tableDatas_range:[],
+                daterange:[],
                 headers: ['生料立磨','循环风机','高温风机','尾排风机','回转窑','水泥磨','水泥循环风机','水泥系统风机','电石渣','原料磨','煤磨','水泥粉磨','水泥包装'],
                 mpoint_name: ['原料立磨主电机','循环风机-原料磨','高温风机','尾排风机','回转窑合计','水泥高压进线','循环风机-水泥磨','系统风机','电石渣合计','原料磨合计','煤磨合计','水泥磨主电机','包装进线'],
                 tableData: [
@@ -114,9 +151,11 @@ import * as echarts from 'echarts';
                     {id:0,name:'日统计'},
                     {id:1,name:'月统计'},
                     {id:2,name:'年统计'},
+                    {id:3,name:'时间范围'},
                 ],
                 row_list : ['peak','high','low','deep','flat'],
-                row_translate: ['峰值', '高峰', '低谷', '深谷', '平谷'],
+                row_translate: ['尖峰', '高峰', '低谷', '深谷', '平谷'],
+                colors :["#EB1B1D", "#FE9900", "#0E4E51", "#2B8C05", "#A9C0A0"],// 自定义颜色
                 
             };
         },
@@ -147,12 +186,25 @@ import * as echarts from 'echarts';
 						rowspan: 1,
 						colspan: 0,
 					};
-				}
+				    }
-			}
+			    }
 		    },
-            translate(){
 
-            },
+            changeDate(){
+			let obj = {};
+			obj.type = "hour";
+			obj.start_time = this.daterange[0];
+			obj.end_time = this.daterange[1];
+			obj.mpoint__in = this.mpointList[0];
+			obj.page = 0;
+			this.$API.enm.mpointstat.groupValues.req(obj).then((res) => {
+				//处理res数组中的 total_val 字段 保留两位
+				res.forEach(item => {
+					item.total_val = Number(item.total_val).toFixed(2);
+				});
+				this.tableDatas_range = res;
+			});
+		},
             dateChange() {
                 let that = this;
                 let arr = [],
@@ -171,6 +223,9 @@ import * as echarts from 'echarts';
                     obj.days = new Date(that.query.year, that.query.month, 0).getDate(); // 获取该月的天数
                 } else if (that.query.type === 2) { // 年
                     obj.year = that.query.year;
+                } else if (that.query.type === 3) { // 时间范围
+                    obj.start_time = that.daterange[0];
+                    obj.end_time = that.daterange[1];
                 }
                 obj.page = 0;
                 obj.type = 'hour';
@@ -196,7 +251,6 @@ import * as echarts from 'echarts';
                             });
                         }); 
                         // 生成柱状图
-                    console.log('chartData',chartData);
                     that.createBarChart(chartData); 
                     })
                     .catch((error) => {
@@ -214,7 +268,7 @@ import * as echarts from 'echarts';
                 let seriesData = [];
                 let categories = this.mpoint_name;  // 横轴设备名称
                 let rowList = this.row_list;    // ['peak', 'high', 'low', 'deep', 'flat']
-                let row_translate = this.row_translate; // ['峰值', '高峰', '低谷', '深谷', '平谷']
+                let row_translate = this.row_translate; // ['尖峰', '高峰', '低谷', '深谷', '平谷']
                 // 为每个电量级别（'peak', 'high', 'low', 'deep', 'flat'）创建一个系列
                 rowList.forEach((level, index) => {
                     let data = categories.map(device => {
@@ -231,6 +285,9 @@ import * as echarts from 'echarts';
                             show: true,
                             position: 'top',
                             formatter: '{c}'  // 显示数值
+                        },
+                        itemStyle: {
+                            color: this.colors[index]  // 根据索引获取颜色
                         }
                     });
                 });