Merge branch 'develop1.0' into wt_from_develop1.0

VVT789

2025-02-13 e2dced9dcd39fb53566020c53e131400daac01e6

Merge branch 'develop1.0' into wt_from_develop1.0

 zhitan-admin/src/main/java/com/zhitan/web/controller/statisticalAnalysis/EnergyConsumeDataController.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
package com.zhitan.web.controller.statisticalAnalysis;

import com.zhitan.common.annotation.Log;
import com.zhitan.common.core.domain.AjaxResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import com.zhitan.statisticalAnalysis.service.IEnergyConsumeDataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;


/**
 * @Description: èƒ½æºæ¶ˆè€—统计分析
 * @author: yxw
 * @date: 2022å¹´04月12日 14:11
 */
@Api(tags = "能耗统计分析")
@RestController
@RequestMapping("/energyTypeAnalysis")
@Slf4j
public class EnergyConsumeDataController {
    @Autowired
    private IEnergyConsumeDataService energyConsumeDataService;

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）- èŽ·å–表格列表数据
     *
     * @param pageNo   é¡µç æ•°
     * @param pageSize æ¯é¡µæ•°æ®å¤šå°‘
     * @param timeCode æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param energyType èƒ½æºç±»åž‹
     * @param modelCode æ¨¡åž‹Code
     * @return
     */
    @Log(title = "能耗统计分析-成本趋势分析（能源消耗成本）- èŽ·å–表格列表数据")
    @ApiOperation(value = "能耗统计分析-成本趋势分析（能源消耗成本）- èŽ·å–表格列表数据", notes = "能耗统计分析-成本趋势分析（能源消耗成本）- èŽ·å–表格列表数据")
    @GetMapping(value = "/listEnergyCostTrend")
    public AjaxResult listEnergyCostTrend(@RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
                                          @RequestParam(name = "pageSize", defaultValue = "10") Integer pageSize,
                                          @RequestParam(name = "timeCode") String timeCode,
                                          @RequestParam(name = "timeType") String timeType,
                                          @RequestParam(name = "energyType",required = false) String energyType,
                                          @RequestParam(name = "modelCode") String modelCode) {
        return AjaxResult.success(energyConsumeDataService.listEnergyCostTrend(pageNo, pageSize, timeCode, timeType,energyType,
                modelCode));
    }

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）
     *
     * @param timeCode æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param modelCode   æ¨¡åž‹Code
     * @param energyType èƒ½æºç±»åž‹
     * @return
     */
    @Log(title = "能耗统计分析-成本趋势分析（能源消耗成本）")
    @ApiOperation(value = "能耗统计分析-成本趋势分析（能源消耗成本）", notes = "能耗统计分析-成本趋势分析（能源消耗成本）")
    @GetMapping(value = "/listEnergyCostTrendDetail")
    public AjaxResult listEnergyCostTrendDetail(@RequestParam(name = "timeCode") String timeCode,
                                                                                @RequestParam(name = "timeType") String timeType,
                                                                                @RequestParam(name = "modelCode") String modelCode,
                                                                                @RequestParam(name = "energyType",required = false) String energyType) {
        return AjaxResult.success(energyConsumeDataService.listEnergyCostTrendDetail(timeCode, timeType, modelCode, energyType));
    }

}

 zhitan-system/src/main/java/com/zhitan/dataitem/mapper/DataItemMapper.java

@@ -123,4 +123,16 @@
     */
    List<DataItem> getDataItemHourInforByIndexIds(@Param("beginTime") Date beginTime, @Param("endTime") Date endTime,
                                                  @Param("timeType") String timeType, @Param("indexIds") List<String> indexIds);

    /**
     * æŸ¥è¯¢èƒ½æºç±»åž‹éžç”µçš„用量
     * @param beginTime
     * @param endTime
     * @param timeType æ—¶é—´ç±»åž‹
     * @param nodeId èŠ‚点Id
     * @param energyType èƒ½æºç±»åž‹
     * @return
     */
    BigDecimal getDataItemTimeRangeValueByNodeId(@Param("beginTime") Date beginTime, @Param("endTime") Date endTime,
                                            @Param("timeType") String timeType, @Param("nodeId") String nodeId, @Param("energyType") String energyType);
}

 zhitan-system/src/main/java/com/zhitan/peakvalley/mapper/PeakValleyMapper.java

@@ -38,4 +38,16 @@
    List<ElectricityDataItem> getDataStatisticsDeviationAnalysis(@Param("indexIdSet") Set<String> indexIdSet,
                                                 @Param("timeType") String timeType);

    /**
     * æŸ¥è¯¢æˆæœ¬è¶‹åŠ¿
     * @param beginTime
     * @param endTime
     * @param timeType æ—¶é—´ç±»åž‹
     * @param nodeId èŠ‚点Id
     * @param energyType èƒ½æºç±»åž‹
     * @return
     */
    List<ElectricityDataItem> getCostTrends(@Param("beginTime") Date beginTime, @Param("endTime") Date endTime,
                                                 @Param("timeType") String timeType, @Param("nodeId") String nodeId,@Param("energyType") String energyType);

}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/common/DateTimeUtil.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,750 @@
package com.zhitan.statisticalAnalysis.common;

import cn.hutool.core.date.DateTime;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.ObjectUtil;
import com.zhitan.common.constant.CommonConst;
import com.zhitan.common.constant.TimeTypeConst;
import com.zhitan.common.utils.IntegerUtil;
import com.zhitan.common.utils.StringUtil;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.time.DateUtils;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;

/**
 * @Description: æ—¶é—´å·¥å…·ç±»
 * @author: yxw
 * @date: 2022å¹´02月02日 12:23
 */
@Slf4j
public class DateTimeUtil {
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼
     */
    public static final String COMMON_PATTERN = "yyyy-MM-dd HH:mm:ss";
    /**
     * æ ¼å¼åŒ–日期到分钟
     */
    public static final String COMMON_PATTERN_END_WITH_MINUTE = "yyyy-MM-dd HH:mm";
    /**
     * æ—¥æœŸæ ¼å¼ - å°æ—¶:分钟
     */
    public static final String COMMON_PATTERN_HOUR_MINUTE = "HH:mm";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å¹´ä»½
     */
    public static final String COMMON_PATTERN_YEAR = "yyyy";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æŸä¸€å¹´,
     */
    public static final String COMMON_PATTERN_CERTAIN_YEAR = "yy";

    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æœˆä»½
     */
    public static final String COMMON_PATTERN_MONTH = "yyyyMM";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æœˆä»½
     */
    public static final String COMMON_PATTERN_TO_MONTH = "yyyy-MM";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æœˆä»½
     */
    public static final String COMMON_PATTERN_TO_MONTH_WORD = "yyyy-MM月";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æœˆä»½
     */
    public static final String COMMON_PATTERN_TO_MONTH_ZH = "yyyyå¹´MM月";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å¤©
     */
    public static final String COMMON_PATTERN_DAY = "yyyyMMdd";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å¤©
     */
    public static final String COMMON_PATTERN_TO_DAY = "yyyy-MM-dd";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å¤©
     */
    public static final String COMMON_PATTERN_TO_DAY_WORD = "yyyy-MM-dd日";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - æœˆæ—¥
     */
    public static final String COMMON_PATTERN_MONTH_DAY = "MM-dd";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å¤©æŸä¸€å¤©,
     */
    public static final String COMMON_PATTERN_DAY_OF_MONTH = "dd";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å°æ—¶
     */
    public static final String COMMON_PATTERN_HOUR = "yyyyMMddHH";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å°æ—¶
     */
    public static final String COMMON_PATTERN_TO_HOUR = "yyyy-MM-dd HH";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å°æ—¶
     */
    public static final String COMMON_PATTERN_TO_HOUR_WORD = "yyyy-MM-dd HH时";
    /**
     * æ—¥æœŸå¸¸ç”¨æ ¼å¼ - å°æ—¶
     */
    public static final String COMMON_PATTERN_TO_HOUR_TEXT = "yyyyå¹´MM月dd日 HH时";

    /**
     * èŽ·å–当前时间,时间格式：yyyy-MM-dd HH:mm:ss
     *
     * @return
     */
    public static String getNowDateTime() {
        return getNowDateTime(COMMON_PATTERN);
    }

    /**
     * èŽ·å–当前时间
     *
     * @param pattern æ—¶é—´æ ¼å¼
     * @return
     */
    public static String getNowDateTime(String pattern) {
        //设置日期格式
        SimpleDateFormat df = new SimpleDateFormat(pattern);
        String dateTime = df.format(new Date());
        return dateTime;
    }

    /**
     * èŽ·å–今年的年份值
     *
     * @return
     */
    public static String getNowYear() {
        return getNowDateTime(COMMON_PATTERN_YEAR);
    }

    /**
     * èŽ·å–今年的月份值
     *
     * @return
     */
    public static String getNowMonth() {
        return getNowDateTime(COMMON_PATTERN_MONTH);
    }

    /**
     * å­—符串转成时间类型,默认格式：yyyy-MM-dd HH:mm:ss
     *
     * @param dateTimeStr
     * @return
     */
    public static Date toDateTime(String dateTimeStr) {
        DateTime dt = null;
        try {
            dt = DateTime.of(dateTimeStr, COMMON_PATTERN);
        } catch (Exception e) {

        }
        return dt;
    }

    /**
     * å­—符串转成时间类型
     *
     * @param dateTimeStr
     * @return
     */
    public static Date toDateTime(String dateTimeStr, String pattern) {
        DateTime dt = null;
        try {
            dt = DateTime.of(dateTimeStr, pattern);
        } catch (Exception e) {

        }
        return dt;
    }

    /**
     * å­—符串转成特定格式的时间字符串类型
     *
     * @param dateTimeStr   æ—¶é—´å­—符串
     * @param sourcePattern å­—符串时间格式
     * @param toPattern     è¦è½¬æˆä»€ä¹ˆæ ¼å¼çš„时间
     * @return
     */
    public static String toDateTimeStr(String dateTimeStr, String sourcePattern, String toPattern) {
        String str = CommonConst.EMPTY;
        try {
            DateTime dt = DateTime.of(dateTimeStr, sourcePattern);
            str = getDateTime(dt, toPattern);
        } catch (Exception e) {

        }
        return str;
    }

    /**
     * æ—¶é—´è½¬æˆæŒ‡å®šçš„格式
     *
     * @param pattern æ—¶é—´æ ¼å¼
     * @return
     */
    public static String getDateTime(Date dt, String pattern) {
        //设置日期格式
        SimpleDateFormat df = new SimpleDateFormat(pattern);
        return df.format(dt);
    }

    /**
     * æ—¶é—´è½¬æˆyyyy-MM-dd HH:mm:ss格式
     *
     * @return
     */
    public static String getDateTime(Date dt) {
        if (ObjectUtil.isEmpty(dt)) {
            return CommonConst.EMPTY;
        }
        return getDateTime(dt, COMMON_PATTERN);
    }

    /**
     * èŽ·å–当前时间所属月份的最后一天
     *
     * @return
     */
    public static int getDateTimeLastDay(Date dt) {
        String month = getMonth(dt);
        String firstDate = month + "01";
        Date nextMonthFirstDate = addMonths(toDateTime(firstDate, COMMON_PATTERN_DAY), CommonConst.DIGIT_1);
        Date currentMonthLastDate = addDays(nextMonthFirstDate, CommonConst.DIGIT_MINUS_1);
        int day = IntegerUtil.toInt(getDateTime(currentMonthLastDate, COMMON_PATTERN_DAY_OF_MONTH));
        return day;
    }

    /**
     * èŽ·å–年份值
     *
     * @return
     */
    public static String getYear(Date dt) {
        return getDateTime(dt, COMMON_PATTERN_YEAR);
    }

    /**
     * èŽ·å–月份值 202202
     *
     * @return
     */
    public static String getMonth(Date dt) {
        return getDateTime(dt, COMMON_PATTERN_MONTH);
    }

    /**
     * èŽ·å–天,格式：yyyyMMdd
     *
     * @return
     */
    public static String toDay(Date dt) {
        return getDateTime(dt, COMMON_PATTERN_DAY);
    }

    /**
     * èŽ·å–小时:yyyyMMddHH
     *
     * @return
     */
    public static String toHour(Date dt) {
        return getDateTime(dt, COMMON_PATTERN_HOUR);
    }

    /**
     * è½¬æˆå­—符串类型值
     *
     * @return
     */
    public static String toString(Date dt) {
        return getDateTime(dt, COMMON_PATTERN);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”çš„å¹´æ•°
     *
     * @param dateTime
     * @param years
     * @return
     */
    public static Date addYears(Date dateTime, int years) {
        return calcDate(dateTime, years, Calendar.YEAR);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”的月数
     *
     * @param dateTime
     * @param months
     * @return
     */
    public static Date addMonths(Date dateTime, int months) {
        return calcDate(dateTime, months, Calendar.MONTH);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”的天数
     *
     * @param dateTime
     * @param days
     * @return
     */
    public static Date addDays(Date dateTime, int days) {
        return calcDate(dateTime, days, Calendar.DATE);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”的小时数
     *
     * @param dateTime
     * @param hours
     * @return
     */
    public static Date addHours(Date dateTime, int hours) {
        return calcDate(dateTime, hours, Calendar.HOUR);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”的分钟数
     *
     * @param dateTime
     * @param minutes
     * @return
     */
    public static Date addMinutes(Date dateTime, int minutes) {
        return calcDate(dateTime, minutes, Calendar.MINUTE);
    }

    /**
     * æ—¶é—´å¢žåŠ å¯¹åº”的小时数
     *
     * @param dateTime
     * @param seconds
     * @return
     */
    public static Date addSeconds(Date dateTime, int seconds) {
        return calcDate(dateTime, seconds, Calendar.SECOND);
    }

    /**
     * è®¡ç®—日期通用方法
     *
     * @param dateTime
     * @param addValue
     * @param calendarType è®¡ç®—类型：Calendar.YEAR，Calendar.MONTH,Calendar.DAY
     * @return
     */
    private static Date calcDate(Date dateTime, int addValue, int calendarType) {
        Date dt = null;
        try {
            Calendar calendar = new GregorianCalendar();
            calendar.setTime(dateTime);
            //把日期往后增加一年，整数往后推，负数往前移
            calendar.add(calendarType, addValue);
            // èŽ·å–相加或者相减之后的时间值
            Date tempDt = calendar.getTime();
            // æŠŠæ—¶é—´è½¬æˆæ‰€éœ€è¦çš„格式
            String temp = getDateTime(tempDt, COMMON_PATTERN);
            dt = toDateTime(temp);
        } catch (Exception e) {

        }
        return dt;
    }

    /**
     * èŽ·å–该时间属于当天的第几个小时
     *
     * @param dateTime
     * @return
     */
    public static int getHourOfDay(Date dateTime) {
        return getDateValue(dateTime, Calendar.HOUR_OF_DAY);
    }

    /**
     * èŽ·å–该时间属于当月的第几天
     *
     * @param dateTime
     * @return
     */
    public static int getDayOfMonth(Date dateTime) {
        return getDateValue(dateTime, Calendar.DAY_OF_MONTH);
    }

    /**
     * èŽ·å–该时间属于当周的第几天
     * ä¸€å‘¨çš„第一天是周日
     *
     * @param dateTime
     * @return
     */
    public static int getDayOfWeek(Date dateTime) {
        return getDateValue(dateTime, Calendar.DAY_OF_WEEK);
    }

    /**
     * èŽ·å–该时间属于年的第几个月
     * æœˆä»½å€¼+1是真实的当前月
     *
     * @param dateTime
     * @return å·²ç»åœ¨ç³»ç»Ÿä¸­èŽ·å–值的基础上加1了，现在是真实的当前月份值
     */
    public static int getMonthOfYear(Date dateTime) {
        return getDateValue(dateTime, Calendar.MONTH) + 1;
    }

    /**
     * èŽ·å–当天的第几个小时/当月的第几天/当年的第几个月
     *
     * @param dateTime     å¦‚果时间值为空，默认当前时间
     * @param calendarType
     * @return
     */
    private static int getDateValue(Date dateTime, int calendarType) {
        int value = 0;
        try {
            if (ObjectUtil.isEmpty(dateTime)) {
                dateTime = new Date();
            }
            Calendar calendar = new GregorianCalendar();
            calendar.setTime(dateTime);
            value = calendar.get(calendarType);
        } catch (Exception e) {

        }
        return value;
    }

    /**
     * å¯¹æ¯”time1 å’Œ time2 çš„大小
     *
     * @param time1
     * @param time2
     * @return -1:time1小于time2;0:time1等于time2;1:time1大于time2;
     */
    public static int compareDateDiff(Date time1, Date time2) {
        long diff = time1.getTime() - time2.getTime();
        int res = 0;
        if (diff > 0) {
            res = 1;
        } else if (diff < 0) {
            res = -1;
        }
        return res;
    }

    /**
     * èŽ·å–查询data_item所需要的timecode值
     *
     * @param timeType æ—¥æœŸç±»åž‹
     * @param date     æ—¶é—´
     * @return
     */
    public static String getTimeCode(String timeType, Date date) {
        String timeCode = CommonConst.EMPTY;
        if (ObjectUtil.isEmpty(date)) {
            date = new Date();
        }
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                timeCode = CommonConst.WORD_H + getDateTime(date, COMMON_PATTERN_HOUR);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                timeCode = CommonConst.WORD_D + getDateTime(date, COMMON_PATTERN_DAY);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                timeCode = CommonConst.WORD_M + getDateTime(date, COMMON_PATTERN_MONTH);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                timeCode = CommonConst.WORD_Y + getDateTime(date, COMMON_PATTERN_YEAR);
                break;
            default:
                break;
        }
        return timeCode;
    }

    /**
     * èŽ·å–查询日月年报表所需要的timecode值
     *
     * @param timeType æ—¥æœŸç±»åž‹
     * @param date     æ—¶é—´
     * @return
     */
    public static String getReportTimeCode(String timeType, Date date) {
        String timeCode = CommonConst.EMPTY;
        if (ObjectUtil.isEmpty(date)) {
            date = new Date();
        }
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                timeCode = getDateTime(date, COMMON_PATTERN_TO_HOUR);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                timeCode = getDateTime(date, COMMON_PATTERN_TO_DAY);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                timeCode = getDateTime(date, COMMON_PATTERN_TO_MONTH);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                timeCode = getDateTime(date, COMMON_PATTERN_YEAR);
                break;
            default:
                break;
        }
        return timeCode;
    }

    /**
     * èŽ·å–时间对应的环比时间
     *
     * @param timeType HOUR/DAY/MONTH/YEAR
     * @param date     æ—¶é—´å€¼
     * @return
     */
    public static Date getLoopTime(String timeType, Date date) {
        Date dt = null;
        if (ObjectUtil.isEmpty(date)) {
            date = new Date();
        }
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                dt = addHours(date, CommonConst.DIGIT_MINUS_1);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                dt = addDays(date, CommonConst.DIGIT_MINUS_1);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                dt = addMonths(date, CommonConst.DIGIT_MINUS_1);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                dt = addYears(date, CommonConst.DIGIT_MINUS_1);
                break;
            default:
                break;
        }
        return dt;
    }

    /**
     * èŽ·å–整点时间
     *
     * @param timeType HOUR/DAY/MONTH/YEAR
     * @param date     æ—¶é—´å€¼
     * @return
     */
    public static Date getHourTime(String timeType, Date date) {
        Date dt = null;
        if (ObjectUtil.isEmpty(date)) {
            date = new Date();
        }
        String tempStr = null;
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                tempStr = getDateTime(date, COMMON_PATTERN_TO_HOUR);
                dt = toDateTime(tempStr, COMMON_PATTERN_TO_HOUR);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                tempStr = getDateTime(date, COMMON_PATTERN_TO_DAY);
                dt = toDateTime(tempStr, COMMON_PATTERN_TO_DAY);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                tempStr = getDateTime(date, COMMON_PATTERN_TO_MONTH);
                dt = toDateTime(tempStr, COMMON_PATTERN_TO_MONTH);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                tempStr = getDateTime(date, COMMON_PATTERN_YEAR);
                dt = toDateTime(tempStr, COMMON_PATTERN_YEAR);
                break;
            default:
                break;
        }
        return dt;
    }

    /**
     * è®¡ç®—两个时间间隔天数（日期格式比较）
     *
     * @param beginTime
     * @param endTime
     * @return
     */
    public static int daysBetween(Date beginTime, Date endTime) {
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(beginTime);
        long beginStamp = calendar.getTimeInMillis();
        calendar.setTime(endTime);
        long endStamp = calendar.getTimeInMillis();
        long betweenDays = (endStamp - beginStamp) / (1000 * 3600 * 24);
        return Integer.parseInt(String.valueOf(betweenDays));
    }

    /**
     * è®¡ç®—两个时间间隔天数（字符串格式比较）
     *
     * @param beginTime
     * @param endTime
     * @return
     */
    public static int daysBetween(String beginTime, String endTime) {
        try {
            SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
            Date begin = format.parse(beginTime);
            Date end = format.parse(endTime);
            return daysBetween(begin, end);
        } catch (ParseException exception) {
            log.error("计算两个时间间隔天数" + exception.getMessage());
            return 0;
        }
    }

    /**
     * æ ¹æ®æ—¶é—´ç±»åž‹æŠŠå­—符串转成对应的时间
     *
     * @param timeType æ—¶é—´ç±»åž‹
     * @param time     æ—¶é—´å­—符串
     * @return
     */
    public static Date getTime(String timeType, String time) {
        Date dt = null;
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                dt = toDateTime(time, COMMON_PATTERN_TO_HOUR);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                dt = toDateTime(time, COMMON_PATTERN_TO_DAY);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                dt = toDateTime(time, COMMON_PATTERN_TO_MONTH);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                dt = toDateTime(time, COMMON_PATTERN_YEAR);
                break;
            default:
                break;
        }
        return dt;
    }

    /**
     * æ ¹æ®æ—¶é—´ç±»åž‹æŠŠè¿žç»­çš„日期字符串转成对应的时间 ï¼ˆ202303、20230303、2023030301、202303030101）
     *
     * @param timeType æ—¶é—´ç±»åž‹
     * @param time     æ—¶é—´å­—符串
     * @return
     */
    public static Date getTimeByContinuousTimeCode(String timeType, String time) {
        Date dt = null;
        timeType = StringUtil.ifEmptyOrNullReturnValue(timeType).toUpperCase();
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                dt = toDateTime(time, COMMON_PATTERN_HOUR);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                dt = toDateTime(time, COMMON_PATTERN_DAY);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                dt = toDateTime(time, COMMON_PATTERN_MONTH);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                dt = toDateTime(time, COMMON_PATTERN_YEAR);
                break;
            default:
                break;
        }
        return dt;
    }

    /**
     * æ ¹æ®æ—¶é—´ç±»åž‹è¿”回天、月、年最后的时间
     *
     * @param timeType æ—¶é—´ç±»åž‹
     * @param time     æ—¶é—´
     * @return
     */
    public static Date getEndTimeByType(String timeType, Date time) {
        Date dt = null;
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_DAY:
                dt = DateUtil.endOfDay(time);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                dt = DateUtil.endOfMonth(time);
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                dt = DateUtil.endOfYear(time);
                break;
            default:
                break;
        }
        return dt;
    }

    /**
     * æ ¹æ®å‘¨æœŸç±»åž‹å¯¹ç”Ÿäº§å‘¨æœŸè¿›è¡ŒåŠ å‡è®¡ç®—
     * å¡«æŠ¥å‘¨æœŸç±»åž‹ï¼ˆHOUR小时、DAY天、MONTH月、YEAR年）
     *
     * @param date      ç”Ÿäº§å‘¨æœŸ
     * @param cycleType ç”Ÿäº§å‘¨æœŸç±»åž‹
     * @param cycleType ç”Ÿäº§å‘¨æœŸç±»åž‹
     * @param val è®¡ç®—值
     * @return
     */
    public static Date productionCycleCal(Date date, String cycleType,int val) {
        Date momDate = date;
        switch (cycleType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                momDate = DateUtils.addHours(date, val);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                momDate = DateUtils.addDays(date, val);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                momDate = DateUtils.addMonths(date, val);
                break;
        }
        return momDate;
    }

    /**
     * æ ¹æ®å‘¨æœŸç±»åž‹å¯¹ç”Ÿäº§å‘¨æœŸè¿›è¡ŒåŠ å‡è®¡ç®— å¹¶ä¸”进位  ä¾‹å¦‚： HOUR +1进位就是 åŠ ä¸€å¤©
     * å¡«æŠ¥å‘¨æœŸç±»åž‹ï¼ˆHOUR小时、DAY天、MONTH月、YEAR年）
     *
     * @param date      ç”Ÿäº§å‘¨æœŸ
     * @param cycleType ç”Ÿäº§å‘¨æœŸç±»åž‹
     * @param val è®¡ç®—值
     * @return
     */
    public static Date productionCycleCalCarry(Date date, String cycleType,int val) {
        Date momDate = date;
        switch (cycleType) {
            case TimeTypeConst.TIME_TYPE_HOUR:
                momDate = DateUtils.addDays(date, val);
                break;
            case TimeTypeConst.TIME_TYPE_DAY:
                momDate = DateUtils.addMonths(date, val);
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                momDate = DateUtils.addYears(date, val);
                break;
        }
        return momDate;
    }
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/domain/vo/CostTrendEnergyTypeItem.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,47 @@
package com.zhitan.statisticalAnalysis.domain.vo;

import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.io.Serializable;
import java.math.BigDecimal;


/**
 * æˆæœ¬è¶‹åŠ¿-能源类型
 *
 * @Author: Zhujw
 * @Date: 2023/2/14
 */
@Data
@ApiModel(value = "成本趋势-能源类型", description = "成本趋势-能源类型")
public class CostTrendEnergyTypeItem implements Serializable {

    /**
     * èƒ½æºç±»åž‹
     */
    @ApiModelProperty(value = "能源类型")
    private String energyType;

    /**
     * èƒ½æºåç§°
     */
    @ApiModelProperty(value = "能源名称")
    private String energyName;

    /**
     * ç´¯ç§¯é‡
     */
    @ApiModelProperty(value = "累积量")
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private BigDecimal accumulation;

    /**
     * è´¹ç”¨
     */
    @ApiModelProperty(value = "费用")
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private BigDecimal cost;
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/domain/vo/EnergyConsumeTrendDetailItem.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,83 @@
package com.zhitan.statisticalAnalysis.domain.vo;

import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.math.BigDecimal;
import java.util.List;


/**
 * è´¹ç”¨åˆ†æž-成本趋势分析统计图返回值信息
 *
 * @Author: Zhujw
 * @Date: 2023/2/14
*/
@Data
@ApiModel(value = "费用分析-成本趋势分析统计图返回值信息", description = "费用分析-成本趋势分析统计图返回值信息")
public class EnergyConsumeTrendDetailItem {

    /**
     *  èƒ½æºç±»åž‹
     */
    @ApiModelProperty(value = "能源类型")
    private String energyType;

    /**
     *  èƒ½æºå•ä½
     */
    @ApiModelProperty(value = "能源单位")
    private String energyUnit;

    /**
     *  ç´¯ç§¯é‡æ ‡ç­¾
     */
    @ApiModelProperty(value = "累积量标签")
    private String accumulationLabel;

    /**
     *  è´¹ç”¨æ ‡ç­¾
     */
    @ApiModelProperty(value = "费用标签")
    private String costLabel;

    /**
     * ç´¯ç§¯é‡
     */
    @ApiModelProperty(value = "累积量")
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private BigDecimal accumulation;

    /**
     * è´¹ç”¨
     */
    @ApiModelProperty(value = "费用")
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private BigDecimal cost;

    /**
     * ç´¯ç§¯é‡key集合
     */
    @ApiModelProperty(value = "累积量key集合")
    private List<String> accumulationKeyList;

    /**
     * ç´¯ç§¯é‡value集合
     */
    @ApiModelProperty(value = "累积量value集合")
    private List<BigDecimal> accumulationValueList;

    /**
     * è´¹ç”¨key集合
     */
    @ApiModelProperty(value = "费用key集合")
    private List<String> costKeyList;

    /**
     * è´¹ç”¨value集合
     */
    @ApiModelProperty(value = "费用value集合")
    private List<BigDecimal> costValueList;
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/domain/vo/EnergyConsumeVO.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,43 @@
package com.zhitan.statisticalAnalysis.domain.vo;

import lombok.Data;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;


/**
 * èƒ½è€—实体类
 *
 * @Author: Zhujw
 * @Date: 2023/1/28
 */
@Data
public class EnergyConsumeVO implements Serializable {

    /**
     * è®¡é‡å™¨å…·id
     */
    private String deviceId;

    /**
     * èƒ½æºç±»åž‹
     */
    private String energyType;

    /**
     * æ—¶é—´ç¼–码
     */
    private Date dataTime;

    /**
     * è´¹ç”¨
     */
    private BigDecimal costValue;

    /**
     * ç´¯è®¡é‡
     */
    private BigDecimal accumulationValue;
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/domain/vo/EnergyCostTrendItem.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,51 @@
package com.zhitan.statisticalAnalysis.domain.vo;

import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.math.BigDecimal;
import java.util.List;

/**
 * æˆæœ¬è¶‹åŠ¿åˆ†æž-表格信息
 *
 * @Author: Zhujw
 * @Date: 2023/2/14
 */
@Data
@ApiModel(value = "成本趋势分析-表格信息", description = "成本趋势分析-表格信息")
public class EnergyCostTrendItem {

    /**
     * ç”¨èƒ½å•å…ƒid
     */
    @ApiModelProperty(value = "用能单元id")
    private String energyUnitId;

    /**
     * ç”¨èƒ½å•å…ƒåç§°
     */
    @ApiModelProperty(value = "用能单元名称")
    private String energyUnitName;

    /**
     * æ€»è´¹ç”¨
     */
    @ApiModelProperty(value = "总费用")
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private BigDecimal total;

    /**
     * æ—¶é—´
     */
    @ApiModelProperty(value = "时间")
    private String dateCode;

    /**
     * èƒ½æºç±»åž‹
     */
    @ApiModelProperty(value = "能源类型")
    private List<CostTrendEnergyTypeItem> itemList;
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/domain/vo/EnergyCostTrendPage.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
package com.zhitan.statisticalAnalysis.domain.vo;

import lombok.Data;

import java.util.List;

/**
 * @Description: TODO
 * @author: yxw
 * @date: 2022å¹´04月15日 10:07
 */
@Data
public class EnergyCostTrendPage {
    /**
     * æ•°æ®åˆ—表
     */
    private List<EnergyCostTrendItem> itemList;
    /**
     * è®°å½•æ€»æ•°é‡
     */
    private long total;
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/service/IEnergyConsumeDataService.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
package com.zhitan.statisticalAnalysis.service;

import com.zhitan.statisticalAnalysis.domain.vo.*;

import java.util.List;

/**
 * èƒ½æºæ¶ˆè€—统计相关查询
 */
public interface IEnergyConsumeDataService {

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）- èŽ·å–表格列表数据
     *
     * @param pageNo   é¡µç æ•°
     * @param pageSize æ¯é¡µæ•°æ®å¤šå°‘
     * @param timeCode æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param energyType èƒ½æºç±»åž‹
     * @param modelCode æ¨¡åž‹Code
     * @return
     */
    EnergyCostTrendPage listEnergyCostTrend(int pageNo, int pageSize, String timeCode, String timeType,String energyType, String modelCode);

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）
     *
     * @param timeCode æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param modelCode   æ¨¡åž‹Code
     * @param energyType èƒ½æºç±»åž‹
     * @return
     */
    List<EnergyConsumeTrendDetailItem> listEnergyCostTrendDetail(String timeCode, String timeType, String modelCode, String energyType);
}

 zhitan-system/src/main/java/com/zhitan/statisticalAnalysis/service/impl/EnergyConsumeDataServiceImpl.java

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,308 @@
package com.zhitan.statisticalAnalysis.service.impl;

import cn.hutool.core.date.DateUtil;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.zhitan.basicdata.domain.SysEnergy;
import com.zhitan.basicdata.mapper.SysEnergyMapper;
import com.zhitan.carbonemission.domain.CarbonEmission;
import com.zhitan.common.constant.CommonConst;
import com.zhitan.common.constant.TimeTypeConst;
import com.zhitan.common.utils.StringUtils;
import com.zhitan.dataitem.mapper.DataItemMapper;
import com.zhitan.model.domain.ModelNode;
import com.zhitan.model.domain.NodeIndex;
import com.zhitan.model.mapper.ModelNodeMapper;
import com.zhitan.model.mapper.NodeIndexMapper;
import com.zhitan.peakvalley.domain.ElectricityDataItem;
import com.zhitan.peakvalley.mapper.PeakValleyMapper;
import com.zhitan.statisticalAnalysis.common.DateTimeUtil;
import lombok.AllArgsConstructor;
import org.apache.commons.lang3.ObjectUtils;
import com.zhitan.statisticalAnalysis.domain.vo.*;
import com.zhitan.statisticalAnalysis.service.IEnergyConsumeDataService;
import org.springframework.stereotype.Service;

import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.SimpleDateFormat;
import java.util.*;
import java.util.stream.Collectors;

/**
 * @Description: TODO
 * @author: yxw
 * @date: 2022å¹´04月12日 14:15
 */
@Service
@AllArgsConstructor
public class EnergyConsumeDataServiceImpl implements IEnergyConsumeDataService {

    private DataItemMapper dataItemMapper;
    private ModelNodeMapper modelNodeMapper;
    private NodeIndexMapper nodeIndexMapper;
    private PeakValleyMapper peakValleyMapper;
    private SysEnergyMapper sysEnergyMapper;

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）- èŽ·å–表格列表数据
     *
     * @param pageNo     é¡µç æ•°
     * @param pageSize   æ¯é¡µæ•°æ®å¤šå°‘
     * @param timeCode   æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType   æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param energyType èƒ½æºç±»åž‹
     * @param modelCode  æ¨¡åž‹Code
     * @return
     */
    @Override
    public EnergyCostTrendPage listEnergyCostTrend(int pageNo, int pageSize, String timeCode, String timeType, String energyType,
                                                   String modelCode) {
        //能源类型信息
        SysEnergy sysEnergy = new SysEnergy();
        if (StringUtils.isNotEmpty(energyType)) {
            sysEnergy.setEnersno(energyType);
        }
        List<SysEnergy> sysEnergies = sysEnergyMapper.selectSysEnergyList(sysEnergy);
        if (sysEnergies.isEmpty()) {
            throw new RuntimeException("未查询到能源信息");
        }
        //节点信息
        List<ModelNode> modelNodes = modelNodeMapper.selectList(Wrappers.<ModelNode>lambdaQuery().eq(ModelNode::getModelCode, modelCode)
                .isNull(ModelNode::getParentId));
        if (ObjectUtils.isEmpty(modelNodes)) {
            throw new RuntimeException("未查询到节点信息");
        }
        ModelNode modelNodeInfo = modelNodes.stream().findFirst().get();
        //点位信息
        List<NodeIndex> nodeIndices = nodeIndexMapper.selectList(Wrappers.<NodeIndex>lambdaQuery()
                .eq(NodeIndex::getNodeId, modelNodeInfo.getNodeId()));
        if (nodeIndices.isEmpty()) {
            throw new RuntimeException("未查询到点位信息");
        }

        // æ€»è´¹ç”¨
        BigDecimal totalCost = BigDecimal.ZERO;
        // éåŽ†èƒ½æºç±»åž‹
        List<CostTrendEnergyTypeItem> itemList = new ArrayList<>();
        for (SysEnergy sysEnergyInfo : sysEnergies) {
            CostTrendEnergyTypeItem item = new CostTrendEnergyTypeItem();
            item.setEnergyType(sysEnergyInfo.getEnersno());
            item.setEnergyName(sysEnergyInfo.getEnername());
            // å¤„理时间
            Date bsTime = DateTimeUtil.getTime(timeType, timeCode);
            Date endTime = DateTimeUtil.getEndTimeByType(timeType, bsTime);
            totalCost = getEnergyUnitCostTrendAnalysisValueInfo(timeType, bsTime, endTime, totalCost, nodeIndices, modelNodeInfo.getNodeId(), sysEnergyInfo, item);
            itemList.add(item);
        }
        // éåŽ†ç”¨èƒ½å•å…ƒèŽ·å–表格中的数据
        List<EnergyCostTrendItem> trendItemList = new ArrayList<>();
        EnergyCostTrendItem energyCostTrendItem = new EnergyCostTrendItem();
        energyCostTrendItem.setDateCode(timeCode);
        energyCostTrendItem.setTotal(totalCost.setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP));
        energyCostTrendItem.setItemList(itemList);
        trendItemList.add(energyCostTrendItem);

        EnergyCostTrendPage energyCostTrendPage = new EnergyCostTrendPage();
        energyCostTrendPage.setTotal(1);
        energyCostTrendPage.setItemList(trendItemList);
        return energyCostTrendPage;
    }

    /**
     * èŽ·å–用能单元成本趋势分析累积量、费用信息
     *
     * @param timeType      æ—¶é—´ç±»åž‹
     * @param bsTime        å¼€å§‹æ—¶é—´
     * @param endTime       ç»“束时间
     * @param totalCost     æ€»è´¹ç”¨
     * @param nodeIndices   èŠ‚点点位集合
     * @param nodeId        èŠ‚点id
     * @param sysEnergyInfo èƒ½æºç±»åž‹ä¿¡æ¯
     * @param item          è¿”回对象
     * @return
     */
    private BigDecimal getEnergyUnitCostTrendAnalysisValueInfo(String timeType, Date bsTime, Date endTime, BigDecimal totalCost,
                                                               List<NodeIndex> nodeIndices, String nodeId, SysEnergy sysEnergyInfo,
                                                               CostTrendEnergyTypeItem item) {
        BigDecimal costValue = BigDecimal.ZERO;
        BigDecimal accumulationValue = BigDecimal.ZERO;
        switch (sysEnergyInfo.getEnersno()) {
            case "electric":
                List<ElectricityDataItem> electricityDataItems = peakValleyMapper.getDataStatistics(nodeIndices.stream().map(NodeIndex::getIndexId).collect(Collectors.toSet()), bsTime, endTime, timeType);
                costValue = electricityDataItems.stream().map(ElectricityDataItem::getCost).reduce(BigDecimal.ZERO, BigDecimal::add);
                accumulationValue = electricityDataItems.stream().map(ElectricityDataItem::getElectricity).reduce(BigDecimal.ZERO, BigDecimal::add);
                break;
            default:
                accumulationValue = dataItemMapper.getDataItemTimeRangeValueByNodeId(bsTime, endTime, timeType, nodeId, sysEnergyInfo.getEnersno());
                costValue = accumulationValue.multiply(sysEnergyInfo.getPrice());
                break;
        }
        costValue = costValue.setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP);
        totalCost = totalCost.add(costValue);
        item.setCost(costValue);
        item.setAccumulation(accumulationValue.setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP));
        return totalCost;
    }

    /**
     * æˆæœ¬è¶‹åŠ¿åˆ†æžï¼ˆèƒ½æºæ¶ˆè€—成本）
     *
     * @param timeCode   æ—¶é—´å€¼   ä¸Žæ—¶é—´ç±»åž‹å¯¹åº”：2022-03-21/2022-03/2022
     * @param timeType   æ—¶é—´ç±»åž‹ DAY/MONTH/YEAR
     * @param modelCode  æ¨¡åž‹Code
     * @param energyType èƒ½æºç±»åž‹
     * @return
     */
    @Override
    public List<EnergyConsumeTrendDetailItem> listEnergyCostTrendDetail(String timeCode, String timeType, String modelCode, String energyType) {
        //能源类型信息
        SysEnergy sysEnergy = new SysEnergy();
        if (StringUtils.isNotEmpty(energyType)) {
            sysEnergy.setEnersno(energyType);
        }
        List<SysEnergy> sysEnergies = sysEnergyMapper.selectSysEnergyList(sysEnergy);
        if (sysEnergies.isEmpty()) {
            throw new RuntimeException("未查询到能源信息");
        }

        //节点信息
        List<ModelNode> modelNodes = modelNodeMapper.selectList(Wrappers.<ModelNode>lambdaQuery().eq(ModelNode::getModelCode, modelCode)
                .isNull(ModelNode::getParentId));
        if (modelNodes.isEmpty()) {
            throw new RuntimeException("未查询到节点信息");
        }
        String nodeId = modelNodes.stream().findFirst().get().getNodeId();

        // èƒ½è€—信息
        List<EnergyConsumeTrendDetailItem> itemList = new ArrayList<>();
        List<EnergyConsumeVO> energyConsumeVOList = new ArrayList<>();
        Date startTime = DateTimeUtil.getTime(timeType, timeCode);
        Date endTime = DateTimeUtil.getEndTimeByType(timeType, startTime);
        for (SysEnergy sysEnergyInfo : sysEnergies) {
            switch (sysEnergyInfo.getEnersno()) {
                case "electric":
                    List<ElectricityDataItem> electricityDataItems = peakValleyMapper.getCostTrends(startTime, endTime, timeType, nodeId, sysEnergyInfo.getEnersno());
                    if (!electricityDataItems.isEmpty()) {
                        electricityDataItems.forEach(electricityDataItem -> {
                            EnergyConsumeVO temp = new EnergyConsumeVO();
                            temp.setDataTime(electricityDataItem.getDataTime());
                            temp.setCostValue(electricityDataItem.getCost());
                            temp.setAccumulationValue(electricityDataItem.getElectricity());
                            energyConsumeVOList.add(temp);
                        });
                    }
                    break;
                default:
                    List<CarbonEmission> dataItems = dataItemMapper.getMiddleCarbonEmission(startTime, endTime, timeType, nodeId, sysEnergyInfo.getEnersno());
                    if (!dataItems.isEmpty()) {
                        dataItems.forEach(electricityDataItem -> {
                            EnergyConsumeVO temp = new EnergyConsumeVO();
                            temp.setDataTime(electricityDataItem.getDataTime());
                            temp.setCostValue(new BigDecimal(electricityDataItem.getValue()));
                            temp.setAccumulationValue(new BigDecimal(electricityDataItem.getValue()).multiply(sysEnergyInfo.getPrice()));
                            energyConsumeVOList.add(temp);
                        });
                    }
                    break;
            }
            BigDecimal cost = energyConsumeVOList.stream().map(EnergyConsumeVO::getCostValue)
                    .reduce(BigDecimal.ZERO, BigDecimal::add).setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP);
            BigDecimal accumulation = energyConsumeVOList.stream().map(EnergyConsumeVO::getAccumulationValue)
                    .reduce(BigDecimal.ZERO, BigDecimal::add).setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP);
            // ç»„装统计图信息
            EnergyConsumeTrendDetailItem item = new EnergyConsumeTrendDetailItem();
            item.setEnergyType(sysEnergyInfo.getEnersno());
            item.setEnergyUnit(sysEnergyInfo.getMuid());
            item.setCostLabel(sysEnergyInfo.getEnername() + "è´¹");
            item.setAccumulationLabel(sysEnergyInfo.getEnername() + "用量");
            item.setCost(cost);
            item.setAccumulation(accumulation);
            // ç»„装图表信息
            getTrendAnalysisCharInfoByEnergyType(startTime, timeType, energyConsumeVOList, item);
            itemList.add(item);
        }
        return itemList;
    }

    /**
     * ç»„装成本趋势分析-统计图信息
     *
     * @param bsTime    æ—¶é—´
     * @param timeType  æ—¶é—´ç±»åž‹
     * @param dataItems èƒ½è€—
     * @param item      è¿”回对象
     */
    private void getTrendAnalysisCharInfoByEnergyType(Date bsTime, String timeType,
                                                      List<EnergyConsumeVO> dataItems, EnergyConsumeTrendDetailItem item) {
        List<String> costKeyList = new ArrayList<>();
        List<String> accumulationKeyList = new ArrayList<>();
        List<BigDecimal> costValueList = new ArrayList<>();
        List<BigDecimal> accumulationValueList = new ArrayList<>();
        Map<String, List<EnergyConsumeVO>> energyConsumeVOMap;
        //按时间类型组织返回数据
        switch (timeType) {
            case TimeTypeConst.TIME_TYPE_DAY:
                energyConsumeVOMap = dataItems.stream().collect(Collectors.groupingBy(li -> DateUtil.formatDateTime(li.getDataTime())));
                for (int i = 0; i < CommonConst.DIGIT_24; i++) {
                    String formatDate = i + CommonConst.TIME_UNIT_SHOW_HOUR;
                    costKeyList.add(formatDate);
                    accumulationKeyList.add(formatDate);
                    String key = DateUtil.formatDateTime(DateUtil.offsetHour(bsTime, i));
                    calculateCostAndAccumulation(energyConsumeVOMap, key, costValueList, accumulationValueList);
                }
                break;
            case TimeTypeConst.TIME_TYPE_MONTH:
                energyConsumeVOMap = dataItems.stream().collect(Collectors.groupingBy(li -> DateUtil.formatDate(li.getDataTime())));
                Date endTime = DateTimeUtil.getEndTimeByType(timeType, bsTime);
                while (bsTime.before(endTime)) {
                    String formatDate = DateUtil.formatDate(bsTime);
                    costKeyList.add(formatDate);
                    accumulationKeyList.add(formatDate);
                    calculateCostAndAccumulation(energyConsumeVOMap, formatDate, costValueList, accumulationValueList);
                    bsTime = DateUtil.offsetDay(bsTime, CommonConst.DIGIT_1);
                }
                break;
            case TimeTypeConst.TIME_TYPE_YEAR:
                SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM");
                energyConsumeVOMap = dataItems.stream().collect(Collectors.groupingBy(li -> formatter.format(li.getDataTime())));
                for (int i = 0; i < CommonConst.DIGIT_12; i++) {
                    Date newDate = DateUtil.offsetMonth(bsTime, i);
                    String formatDate = DateUtil.format(newDate, DateTimeUtil.COMMON_PATTERN_TO_MONTH_ZH);
                    costKeyList.add(formatDate);
                    accumulationKeyList.add(formatDate);
                    calculateCostAndAccumulation(energyConsumeVOMap, formatDate, costValueList, accumulationValueList);
                }
                break;
            default:
                break;
        }

        item.setCostKeyList(costKeyList);
        item.setCostValueList(costValueList);
        item.setAccumulationKeyList(accumulationKeyList);
        item.setAccumulationValueList(accumulationValueList);
    }

    /**
     * è®¡ç®—费用和用量
     * @param energyConsumeVOMap
     * @param formatDate
     * @param costValueList
     * @param accumulationValueList
     */
    private static void calculateCostAndAccumulation(Map<String, List<EnergyConsumeVO>> energyConsumeVOMap, String formatDate, List<BigDecimal> costValueList, List<BigDecimal> accumulationValueList) {
        List<EnergyConsumeVO> energyConsumeList = Optional.ofNullable(energyConsumeVOMap.get(formatDate))
                .orElse(Collections.emptyList());
        BigDecimal totalCost = energyConsumeList.stream()
                .map(EnergyConsumeVO::getCostValue)
                .reduce(BigDecimal.ZERO, BigDecimal::add)
                .setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP);

        BigDecimal totalAccumulation = energyConsumeList.stream()
                .map(EnergyConsumeVO::getAccumulationValue)
                .reduce(BigDecimal.ZERO, BigDecimal::add)
                .setScale(CommonConst.DIGIT_2, RoundingMode.HALF_UP);
        costValueList.add(totalCost);
        accumulationValueList.add(totalAccumulation);
    }
}

 zhitan-system/src/main/resources/mapper/dataitem/DataItemMapper.xml

@@ -215,4 +215,22 @@
        AND ( begin_time BETWEEN #{beginTime} AND #{endTime} )
        AND time_type = #{timeType}
    </select>

    <select id="getDataItemTimeRangeValueByNodeId" resultType="java.math.BigDecimal">
        SELECT
        COALESCE (SUM ( "value" ), 0)
        FROM
        "data_item" di
        JOIN energy_index ei  ON di.index_id = ei.index_id
        WHERE
        di.index_id IN ( SELECT index_id FROM node_index WHERE node_id = #{nodeId})
        <if test="energyType !='' and energyType !=null  and energyType =='allType'">
            AND ei.energy_id != ''
        </if>
        <if test="energyType !='' and energyType !=null  and energyType !='allType'">
            AND  ei.energy_id = #{energyType}
        </if>
        AND (di.data_time BETWEEN #{beginTime} AND #{endTime})
        AND di.time_type = #{timeType}
    </select>
</mapper>

 zhitan-system/src/main/resources/mapper/peakvalley/ElectricityDataItemMapper.xml

@@ -49,4 +49,30 @@

        AND time_type = #{timeType}
    </select>
    <select id="getCostTrends"
            resultType="com.zhitan.peakvalley.domain.ElectricityDataItem">
        SELECT
        di.index_code,
        di.time_code,
        di.electricity_type,
        di.data_time,
        di.electricity,
        di.cost,
        di.time_type,
        di.price,
        di.remark
        FROM
        "electricity_data_item" di
        JOIN energy_index ei  ON di.index_id = ei.index_id
        WHERE
        di.index_id IN ( SELECT index_id FROM node_index WHERE node_id = #{nodeId})
        <if test="energyType !='' and energyType !=null  and energyType =='allType'">
            AND ei.energy_id != ''
        </if>
        <if test="energyType !='' and energyType !=null  and energyType !='allType'">
            AND  ei.energy_id = #{energyType}
        </if>
        AND (di.data_time BETWEEN #{beginTime} AND #{endTime})
        AND di.time_type = #{timeType}
    </select>
</mapper>

 zhitan-vue/src/api/comprehensiveStatistics/comprehensive.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
import request from '@/utils/request'

//全厂综合能耗统计
export function getDataList(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/list',
    method: 'get',
    params: query
  })
}

//全厂综合能耗统计图
export function getlistChart(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/listChart',
    method: 'get',
    params: query
  })
}
export function exportList(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/export',
    method: 'get',
    params: query
  })
}
export function getEnergyList(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/getList',
    method: 'get',
    params: query
  })
}
//重点设备能耗排名
export function energyList(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/energyList',
    method: 'get',
    params: query
  })
}
//设备
export function getFacilityArchives() {
  return request({
    url: '/statisticalData/comprehensiveStatistics/getFacilityArchives',
    method: 'get'
  })
}
//重点设备
export function getPointFacility() {
  return request({
    url: '/statisticalData/comprehensiveStatistics/getPointFacility',
    method: 'get'
  })
}
export function getDeviceList(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/getDeviceList',
    method: 'get',
    params: query
  })
}
//获取模型下的能源品种
export function energyDevice(query) {
  return request({
    url: '/statisticalData/comprehensiveStatistics/energyDevice',
    method: 'get',
    params: query
  })
}

 zhitan-vue/src/api/comprehensiveStatistics/dailyComprehensive/dailyComprehensive.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
import request from "@/utils/request"

//查询日报表
export function getDataList(query) {
  return request({
    url: "/comprehensive/dailyComprehensive/list",
    method: "get",
    params: query,
  })
}
export function getlistChart(query) {
  return request({
    url: "/comprehensive/dailyComprehensive/listChart",
    method: "get",
    params: query,
  })
}

// å¯¼å‡ºç»¼åˆæŠ¥è¡¨
export function exportList(query) {
  return request({
    url: "/report/dailyReport/export",
    method: "get",
    params: query,
  })
}

 zhitan-vue/src/api/comprehensiveStatistics/monthlyComprehensive/monthlyComprehensive.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
import request from '@/utils/request'

//查询日报表
export function getDataList(query) {
  return request({
    url: '/comprehensive/monthlyComprehensive/list',
    method: 'get',
    params: query
  })
}
export function getlistChart(query) {
  return request({
    url: '/comprehensive/monthlyComprehensive/listChart',
    method: 'get',
    params: query
  })
}

 zhitan-vue/src/api/comprehensiveStatistics/processEnergyConsumption.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
import request from '@/utils/request'

//全厂综合能耗统计
export function getDataList(query) {
  return request({
    url: '/statisticalData/processEnergyConsumption/list',
    method: 'get',
    params: query
  })
}

//全厂综合能耗统计图
export function getlistChart(query) {
  return request({
    url: '/statisticalData/processEnergyConsumption/listChart',
    method: 'get',
    params: query
  })
}

 zhitan-vue/src/api/comprehensiveStatistics/yearComprehensive/yearComprehensive.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
import request from '@/utils/request'

//查询日报表
export function getDataList(query) {
  return request({
    url: '/comprehensive/yearComprehensive/list',
    method: 'get',
    params: query
  })
}
export function getlistChart(query) {
  return request({
    url: '/comprehensive/yearComprehensive/listChart',
    method: 'get',
    params: query
  })
}

 zhitan-vue/src/api/energyAnalysis/energyAnalysis.js

@@ -1,54 +1,62 @@
import request from '@/utils/request'
import request from "@/utils/request"

// èƒ½è€—对比分析-区域能耗分析-能耗趋势/区域能耗统计分析表-列表
// èƒ½è€—对比分析-科室能耗分析-能耗趋势/能耗统计分析表-列表
// èƒ½è€—对比分析-设备能耗分析-能耗趋势/能耗统计分析表-列表
export function listRegion(query) {
  return request({
    url: '/consumptionanalysis/getByArea',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getByArea",
    method: "get",
    params: query,
  })
}
// èƒ½è€—对比分析-科室能耗分析-能耗排名-列表
// èƒ½è€—对比分析-设备能耗分析-能耗排名-列表
export function listDepartment(query) {
  return request({
    url: '/consumptionanalysis/getByDepartment',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getByDepartment",
    method: "get",
    params: query,
  })
}
// èƒ½è€—对比分析-能耗指标考核-能耗趋势/区域能耗统计分析表
export function listIndicatorassessment(query) {
  return request({
    url: '/consumptionanalysis/getPlanAndProdCount',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getPlanAndProdCount",
    method: "get",
    params: query,
  })
}
// èƒ½è€—对比分析-综合能耗分析-综合能耗趋势/各介质能耗占比/区域能耗统计分析表-列表
export function listComprehensive(query) {
  return request({
    url: '/consumptionanalysis/getComprehensiveEnergy',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getComprehensiveEnergy",
    method: "get",
    params: query,
  })
}
// èƒ½è€—对比分析-综合能耗分析-能耗同比环比-列表
export function listYoY(query) {
  return request({
    url: '/consumptionanalysis/getYOY',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getYOY",
    method: "get",
    params: query,
  })
}
// èƒ½è€—对比分析-综合能耗分析-用能单元能耗排名-列表
export function listEnergyRanking(query) {
  return request({
    url: '/consumptionanalysis/getEnergyRanking',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getEnergyRanking",
    method: "get",
    params: query,
  })
}

// statisticsAnalysis/getFlowCharts
export function getFlowCharts(query) {
  return request({
    url: "/statisticsAnalysis/getFlowCharts",
    method: "get",
    params: query,
  })
}

 zhitan-vue/src/api/powerquality/electric-power-factor/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from "@/utils/request"
// èŽ·å–用能单元下的某个电表的功率因数数据
export function powerFactorAnalysisDetail(params) {
  return request({
    url: "/powerFactorAnalysis/detail",
    method: "get",
    params,
  })
}

 zhitan-vue/src/api/powerquality/electricThreePhase/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from "@/utils/request"

// èŽ·å–三相不平衡分析数据
export function threePhaseUnbalanceAnalysisDetail(params) {
  return request({
    url: "/threePhaseUnbalanceAnalysis/detail",
    method: "get",
    params,
  })
}

 zhitan-vue/src/api/powerquality/load-analysis/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
import request from "@/utils/request"

// èŽ·å–用能单元下的电表列表
export function listElectricityMeter(params) {
  return request({
    url: "/meter/listElectricityMeter",
    method: "get",
    params,
  })
}

// èŽ·å–用能单元下的某个电表的负荷分析数据
export function loadAnalysisDetail(params) {
  return request({
    url: "/loadAnalysis/detail",
    method: "get",
    params,
  })
}

// èŽ·å–用能单元下的电表列表-实体表
export function listElectricityDeviceMeter(params) {
  return request({
    url: "/loadAnalysis/listElectricMeter",
    method: "get",
    params,
  })
}

 zhitan-vue/src/assets/images/login-background.png

Binary files differ

 zhitan-vue/src/assets/images/login-bg.jpg

Binary files differ

 zhitan-vue/src/assets/styles/ruoyi.scss

@@ -312,6 +312,10 @@
      // tr:hover > td {
      //     background-color: #141E4A;
      // }

      .el-table-fixed-column--left {
        background-color: #110f2e !important;
      }
    }
  }

@@ -564,6 +568,19 @@
  }
  .el-tabs__item.is-active {
    color: #409EFF;
  }

  .el-descriptions__cell {
    background: transparent;
    color: #fff !important;
  }
  .el-descriptions__body {
    background-color: transparent;
    color: #fff;
  }
  .el-descriptions__label {
    color: #fff !important;
    background-color: #1a235d !important;
  }
}

@@ -858,6 +875,9 @@
      // tr:hover > td {
      //     background-color: #141E4A;
      // }
      .el-table-fixed-column--left {
        background-color: #fff;
      }
    }
  }


 zhitan-vue/src/components/Echarts/LineChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,176 @@
<template>
  <div class="chart-item">
    <div id="ChartDom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const emit = defineEmits()
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  chartType: {
    type: String,
    default: "line", // bar
  },
})

watch(
  () => props.chartData,
  (val) => {
    console.log("watch", val)
    initChart()
  }
)
watch(
  () => settingsStore.sideTheme,
  (val) => {
    initChart()
  }
)

onMounted(() => {
  initChart()
})

function initChart(value) {
  console.log("initChart", props.chartData)
  if (!props.chartData.xAxis) {
    return
  }
  const chartDom = document.getElementById("ChartDom")
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.dispose(chartDom)
  }
  const myChart = echarts.init(chartDom)
  // å¤„理多系列数据
  const series = props.chartData.series.map((item) => ({
    name: item.name,
    type: props.chartType, // æ ¹æ®ä¼ å…¥ç±»åž‹æ¸²æŸ“
    data: item.data,
    barWidth: "16",
    itemStyle: {
      borderRadius: [15, 15, 0, 0],
    },
    smooth: true, // å¯ç”¨å¹³æ»‘曲线
  }))
  let option = {
    title: {
      // text: props.chartData.title,
      left: "40",
      textStyle: {
        color: "#2979ff",
      },
    },
    color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: props.chartData.series.map((item) => item.name), // å›¾ä¾‹æ•°æ®
      icon: "rect",
      right: 40,
      itemWidth: 14,
      itemHeight: 10,
      textStyle: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
      },
    },
    grid: {
      top: "40",
      left: "40",
      right: "40",
      bottom: "20",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        },
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        fontSize: 14,
        padding: [5, 0, 0, 0],
        //   formatter: '{value} ml'
      },
      data: props.chartData.xAxis,
    },
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
          padding: [0, 0, 5, 0],
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
        },
      },
    ],
    series: series,
  }
  setTimeout(() => {
    myChart.setOption(option)
  }, 200)

  window.addEventListener(
    "resize",
    () => {
      myChart.resize()
    },
    { passive: true }
  )
}
</script>

<style lang="scss" scoped>
.chart-item {
  width: 100%;
  height: 360px !important;
  margin-top: 0px;
  padding-top: 20px;
}
</style>

 zhitan-vue/src/utils/ruoyi.js

@@ -1,5 +1,3 @@


/**
 * é€šç”¨js方法封装处理
 * Copyright (c) 2019 ruoyi
@@ -10,17 +8,20 @@
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}"
  let date
  if (typeof time === 'object') {
  if (typeof time === "object") {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    } else if (typeof time === "string") {
      time = time
        .replace(new RegExp(/-/gm), "/")
        .replace("T", " ")
        .replace(new RegExp(/\.[\d]{3}/gm), "")
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
    if (typeof time === "number" && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
@@ -32,14 +33,16 @@
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
    a: date.getDay(),
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (key === "a") {
      return ["日", "一", "二", "三", "四", "五", "六"][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
      value = "0" + value
    }
    return value || 0
  })
@@ -49,89 +52,92 @@
// è¡¨å•é‡ç½®
export function resetForm(refName) {
  if (this.$refs[refName]) {
    this.$refs[refName].resetFields();
    this.$refs[refName].resetFields()
  }
}

// æ·»åŠ æ—¥æœŸèŒƒå›´
export function addDateRange(params, dateRange, propName) {
  let search = params;
  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
  dateRange = Array.isArray(dateRange) ? dateRange : [];
  if (typeof (propName) === 'undefined') {
    search.params['beginTime'] = dateRange[0];
    search.params['endTime'] = dateRange[1];
  let search = params
  search.params =
    typeof search.params === "object" && search.params !== null && !Array.isArray(search.params) ? search.params : {}
  dateRange = Array.isArray(dateRange) ? dateRange : []
  if (typeof propName === "undefined") {
    search.params["beginTime"] = dateRange[0]
    search.params["endTime"] = dateRange[1]
  } else {
    search.params['begin' + propName] = dateRange[0];
    search.params['end' + propName] = dateRange[1];
    search.params["begin" + propName] = dateRange[0]
    search.params["end" + propName] = dateRange[1]
  }
  return search;
  return search
}

// å›žæ˜¾æ•°æ®å­—å…¸
export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return "";
    return ""
  }
  var actions = [];
  var actions = []
  Object.keys(datas).some((key) => {
    if (datas[key].value == ('' + value)) {
      actions.push(datas[key].label);
      return true;
    if (datas[key].value == "" + value) {
      actions.push(datas[key].label)
      return true
    }
  })
  if (actions.length === 0) {
    actions.push(value);
    actions.push(value)
  }
  return actions.join('');
  return actions.join("")
}

// å›žæ˜¾æ•°æ®å­—典（字符串数组）
export function selectDictLabels(datas, value, separator) {
  if (value === undefined || value.length ===0) {
    return "";
  if (value === undefined || value.length === 0) {
    return ""
  }
  if (Array.isArray(value)) {
    value = value.join(",");
    value = value.join(",")
  }
  var actions = [];
  var currentSeparator = undefined === separator ? "," : separator;
  var temp = value.split(currentSeparator);
  var actions = []
  var currentSeparator = undefined === separator ? "," : separator
  var temp = value.split(currentSeparator)
  Object.keys(value.split(currentSeparator)).some((val) => {
    var match = false;
    var match = false
    Object.keys(datas).some((key) => {
      if (datas[key].value == ('' + temp[val])) {
        actions.push(datas[key].label + currentSeparator);
        match = true;
      if (datas[key].value == "" + temp[val]) {
        actions.push(datas[key].label + currentSeparator)
        match = true
      }
    })
    if (!match) {
      actions.push(temp[val] + currentSeparator);
      actions.push(temp[val] + currentSeparator)
    }
  })
  return actions.join('').substring(0, actions.join('').length - 1);
  return actions.join("").substring(0, actions.join("").length - 1)
}

// å­—符串格式化(%s )
export function sprintf(str) {
  var args = arguments, flag = true, i = 1;
  var args = arguments,
    flag = true,
    i = 1
  str = str.replace(/%s/g, function () {
    var arg = args[i++];
    if (typeof arg === 'undefined') {
      flag = false;
      return '';
    var arg = args[i++]
    if (typeof arg === "undefined") {
      flag = false
      return ""
    }
    return arg;
  });
  return flag ? str : '';
    return arg
  })
  return flag ? str : ""
}

// è½¬æ¢å­—符串，undefined,null等转化为""
export function parseStrEmpty(str) {
  if (!str || str == "undefined" || str == "null") {
    return "";
    return ""
  }
  return str;
  return str
}

// æ•°æ®åˆå¹¶
@@ -139,16 +145,16 @@
  for (var p in target) {
    try {
      if (target[p].constructor == Object) {
        source[p] = mergeRecursive(source[p], target[p]);
        source[p] = mergeRecursive(source[p], target[p])
      } else {
        source[p] = target[p];
        source[p] = target[p]
      }
    } catch (e) {
      source[p] = target[p];
      source[p] = target[p]
    }
  }
  return source;
};
  return source
}

/**
 * æž„造树型结构数据
@@ -159,88 +165,105 @@
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };
    id: id || "id",
    parentId: parentId || "parentId",
    childrenList: children || "children",
  }

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];
  var childrenListMap = {}
  var nodeIds = {}
  var tree = []

  for (let d of data) {
    let parentId = d[config.parentId];
    let parentId = d[config.parentId]
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
      childrenListMap[parentId] = []
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
    nodeIds[d[config.id]] = d
    childrenListMap[parentId].push(d)
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    let parentId = d[config.parentId]
    if (nodeIds[parentId] == null) {
      tree.push(d);
      tree.push(d)
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
    adaptToChildrenList(t)
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
      o[config.childrenList] = childrenListMap[o[config.id]]
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
        adaptToChildrenList(c)
      }
    }
  }
  return tree;
  return tree
}

/**
* å‚数处理
* @param {*} params  å‚æ•°
*/
 * å‚数处理
 * @param {*} params  å‚æ•°
 */
export function tansParams(params) {
  let result = ''
  let result = ""
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && value !== "" && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
    const value = params[propName]
    var part = encodeURIComponent(propName) + "="
    if (value !== null && value !== "" && typeof value !== "undefined") {
      if (typeof value === "object") {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          if (value[key] !== null && value[key] !== "" && typeof value[key] !== "undefined") {
            let params = propName + "[" + key + "]"
            var subPart = encodeURIComponent(params) + "="
            result += subPart + encodeURIComponent(value[key]) + "&"
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
        result += part + encodeURIComponent(value) + "&"
      }
    }
  }
  return result
}


// è¿”回项目路径
export function getNormalPath(p) {
  if (p.length === 0 || !p || p == 'undefined') {
  if (p.length === 0 || !p || p == "undefined") {
    return p
  };
  let res = p.replace('//', '/')
  if (res[res.length - 1] === '/') {
  }
  let res = p.replace("//", "/")
  if (res[res.length - 1] === "/") {
    return res.slice(0, res.length - 1)
  }
  return res;
  return res
}

// éªŒè¯æ˜¯å¦ä¸ºblob格式
export function blobValidate(data) {
  return data.type !== 'application/json'
  return data.type !== "application/json"
}

// é€šç”¨ä¸‹è½½æ–¹æ³•
const baseURL = import.meta.env.VITE_APP_BASE_API
export function download(fileName) {
  window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true
}

// é€šç”¨ä¸‹è½½æ–¹æ³• showfileName：下载后的文件名称带扩展名;filePath:要下载文件的绝对路径,带着文件名和扩展名；deleteflage下载完成后是否删除文件
export function fileDownload(showfileName, filePath, deleteflage) {
  window.location.href =
    baseURL +
    "/common/downloadAssign?showFileName=" +
    encodeURI(showfileName) +
    "&filePath=" +
    encodeURI(filePath) +
    "&delete=" +
    deleteflage
}

 zhitan-vue/src/views/alarmmanage/energyconsumption/energyConsumption.vue

@@ -8,16 +8,28 @@
        <div class="form-card">
          <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 100%"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 100%"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :clearable="false"
              <el-date-picker
                v-model="queryParams.dataTime"
                :clearable="false"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'"
                value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -55,70 +67,69 @@
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
let { alarm_record_category } = proxy.useDict("alarm_record_category");
import * as echarts from "echarts"
import { onMounted, reactive, ref } from "vue"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
let { alarm_record_category } = proxy.useDict("alarm_record_category")
let energyTypeList = ref([])
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
  });
    energyTypeList.value = res.data
  })
}
getEnergyTypeList()
function formatterLabel(list, value) {
  console.log(list, value);
  console.log(list, value)

  let dict = list.find(item => item.enersno == value)
  return dict ? dict.enername : ''
  let dict = list.find((item) => item.enersno == value)
  return dict ? dict.enername : ""
}


let queryParams = ref({
  timeType: null,
  dataTime: null,
  nodeId: null
  nodeId: null,
})

import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage";
import { el } from 'element-plus/es/locales.mjs';
let form = ref({});
import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage"
import { el } from "element-plus/es/locales.mjs"
let form = ref({})
let currentNode = ref()

function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
function handleNodeClick(e) {
  currentNode.value = e
  queryParams.value.nodeId = e.id
  handleTimeType('YEAR')
  handleTimeType("YEAR")
  getByNodeIdFun()
}

function getByNodeIdFun() {
  getByNodeId(queryParams.value).then(res => {
  getByNodeId(queryParams.value).then((res) => {
    let alarmList = []
    let energyList = []
    let alarmNumberList = {
      data: [],
      xAxisData: []
      xAxisData: [],
    }
    console.log(111, res);
    console.log(111, res)
    if (res.code == 200) {
      let { data } = res
      alarmList = data.alarmProportion.map(item => {
      alarmList = data.alarmProportion.map((item) => {
        return {
          name: proxy.selectDictLabel(alarm_record_category.value, item.energyName),
          value: item.percentage
          value: item.percentage,
        }
      })
      energyList = data.energyProportion.map(item => {
      energyList = data.energyProportion.map((item) => {
        return {
          name: formatterLabel(energyTypeList.value, item.energyName),
          value: item.percentage
          value: item.percentage,
        }
      })
      for (const item of data.chartDataList) {
@@ -126,9 +137,9 @@
        alarmNumberList.data.push(item.yvalue)
      }

      pieChart('Chart1', alarmList, '报警类型占比')
      pieChart('Chart2', energyList, '能源类型占比')
      getChart('Chart3', alarmNumberList)
      pieChart("Chart1", alarmList, "报警类型占比")
      pieChart("Chart2", energyList, "能源类型占比")
      getChart("Chart3", alarmNumberList)
    }
  })
}
@@ -138,227 +149,233 @@
  getByNodeIdFun()
}
function resetQuery() {
  handleTimeType('YEAR')
  handleTimeType("YEAR")
  getByNodeIdFun()
}


function pieChart(Id, data, name) {
  let total = 0;
  let total = 0
  data.forEach(function (val, idx, arr) {
    total += val.value;
    total += val.value
  })
  const myChart = echarts.init(document.getElementById(Id));
  const myChart = echarts.init(document.getElementById(Id))
  myChart.setOption({
    color: ['#4D94FF', '#00C27C', '#F0142F', '#F2D261', '#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
    color: [
      "#4D94FF",
      "#00C27C",
      "#F0142F",
      "#F2D261",
      "#0E7CE2",
      "#FF8352",
      "#E271DE",
      "#F8456B",
      "#00FFFF",
      "#4AEAB0",
    ],
    grid: {
      top: '20%',
      left: '1%',
      right: '1%',
      bottom: '0%',
      containLabel: true
      top: "20%",
      left: "1%",
      right: "1%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      trigger: 'item'
      trigger: "item",
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      icon: 'circle',
      orient: "vertical",
      top: "center",
      icon: "circle",
      itemWidth: 14,
      itemHeight: 14,
      right: '2%',
      right: "2%",
      itemGap: 10,
      textStyle: {
        align: 'left',
        verticalAlign: 'middle',
        align: "left",
        verticalAlign: "middle",
        rich: {
          name: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
          value: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
          rate: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
        },
      },
      formatter: (name) => {
        if (data.length) {
          let target, percent;
          let target, percent
          for (let i = 0; i < data.length; i++) {
            if (data[i].name === name) {
              target = data[i].value;
              percent = ((target / total) * 100).toFixed(2);
              target = data[i].value
              percent = ((target / total) * 100).toFixed(2)
            }
          }
          return `{name|${name}  }{value| ${target}} {rate| ${percent}%}`;

          return `{name|${name}  }{value| ${target}} {rate| ${percent}%}`
        } else {
          return `{name|${name}  }{value| ${0}} {rate| ${0}%}`;

          return `{name|${name}  }{value| ${0}} {rate| ${0}%}`
        }
      },
    },
    series: [{
      name,
      type: 'pie',
      radius: ['45%', '70%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        overflow: 'none',
        formatter: '{b} {d}%  \n {c} tce',
    series: [
      {
        name,
        type: "pie",
        radius: ["45%", "70%"],
        center: ["35%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          overflow: "none",
          formatter: "{b} {d}%  \n {c} tce",
        },
        data,
      },
      data,
    }]
    ],
  })
}
function getChart(Id, dataList) {
  const myChart3 = echarts.init(document.getElementById(Id));
  myChart3.setOption(
    {

      grid: {
        left: '3%',
        right: '2%',
        bottom: '2%',
        containLabel: true
  const myChart3 = echarts.init(document.getElementById(Id))
  myChart3.setOption({
    grid: {
      left: "3%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      // boundaryGap: false,
      data: dataList.xAxisData,
      axisPointer: {
        type: "shadow",
      },
      tooltip: {
        trigger: 'axis',

      axisTick: {
        show: false,
        alignWithLabel: true,
        length: 5,
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: dataList.xAxisData,
        axisPointer: {
          type: 'shadow'
      // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
      axisTick: {
        show: false,
        length: 5,
        lineStyle: {
          color: "#ddd",
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
          length: 5
        },
        // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
        axisTick: {
          show: false,
          length: 5,
          lineStyle: {
            color: '#ddd'
          }
        },

        // åˆ†å‰²çº¿
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(220,222,226,0.4)'
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 14,
          padding: [5, 0, 0, 0],
          //   formatter: '{value} ml'
        }
      },
      yAxis: {
        type: 'value',
        name: '（次）',
        // è®¾ç½®åç§°æ ·å¼
        nameTextStyle: {
          color: ' #CEE3FF',
          fontSize: 14,
          padding: [0, 0, 5, 0],
        },
        // åæ ‡è½´åˆ»åº¦
        axisTick: {
          show: false,
          alignWithLabel: true,
          length: 5
        },
        // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
        axisTick: {
          show: false,
          length: 5,
          lineStyle: {
            color: ''
          }
        },

        // åˆ†å‰²çº¿
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(220,222,226,0.4)'
          }
      // åˆ†å‰²çº¿
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "rgba(220,222,226,0.4)",
        },

        // åæ ‡è½´åˆ»åº¦é—´éš”
        // interval: '50',
        // // åæ ‡è½´æœ€å°å€¼
        // min: 'dataMin',
        // // åæ ‡è½´æœ€å¤§å€¼
        // max: 'dataMax',
        // // åæ ‡è½´å°æ•°ç‚¹ç²¾åº¦
        // precision: 0,
        // // åæ ‡è½´åˆ»åº¦æ–‡æœ¬çš„布局朝向
        // position: 'left'
        axisLabel: {
          color: '#B2B8C2',
          fontSize: 14,
          //   formatter: '{value} ml'
        }
      },
      series: [
        {
          name: "报警次数",
          type: "bar",
          barWidth: '17',
          stack: 'number',
          data: dataList.data,
          tooltip: {
            show: false,
          }
      axisLabel: {
        color: "#999",
        fontSize: 14,
        padding: [5, 0, 0, 0],
        //   formatter: '{value} ml'
      },
    },
    yAxis: {
      type: "value",
      name: "（次）",
      // è®¾ç½®åç§°æ ·å¼
      nameTextStyle: {
        color: " #CEE3FF",
        fontSize: 14,
        padding: [0, 0, 5, 0],
      },
      // åæ ‡è½´åˆ»åº¦
      axisTick: {
        show: false,
        alignWithLabel: true,
        length: 5,
      },
      // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
      axisTick: {
        show: false,
        length: 5,
        lineStyle: {
          color: "",
        },
        {
          name: '报警次数',
          type: 'line',
          symbol: 'none', // è®¾ç½®ä¸º 'none' åŽ»æŽ‰åœ†ç‚¹
          lineStyle: {
            color: '#EE0303'
          },
          data: dataList.data,
        },
      ]
    })
      },

  window.addEventListener("resize", () => {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  }, { passive: true });
      // åˆ†å‰²çº¿
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(220,222,226,0.4)",
        },
      },

      // åæ ‡è½´åˆ»åº¦é—´éš”
      // interval: '50',
      // // åæ ‡è½´æœ€å°å€¼
      // min: 'dataMin',
      // // åæ ‡è½´æœ€å¤§å€¼
      // max: 'dataMax',
      // // åæ ‡è½´å°æ•°ç‚¹ç²¾åº¦
      // precision: 0,
      // // åæ ‡è½´åˆ»åº¦æ–‡æœ¬çš„布局朝向
      // position: 'left'
      axisLabel: {
        color: "#B2B8C2",
        fontSize: 14,
        //   formatter: '{value} ml'
      },
    },
    series: [
      {
        name: "报警次数",
        type: "bar",
        barWidth: "12",
        stack: "number",
        data: dataList.data,
        tooltip: {
          show: false,
        },
      },
      {
        name: "报警次数",
        type: "line",
        symbol: "none", // è®¾ç½®ä¸º 'none' åŽ»æŽ‰åœ†ç‚¹
        lineStyle: {
          color: "#EE0303",
        },
        data: dataList.data,
      },
    ],
  })

  window.addEventListener(
    "resize",
    () => {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
    },
    { passive: true }
  )
}




</script>

<style scoped lang="scss">
@import "@/assets/styles/page.scss";


.chart-box {
  height: calc((100vh - 410px)/2) !important;
  height: calc((100vh - 410px) / 2) !important;
}
</style>
</style>

 zhitan-vue/src/views/alarmmanage/measuremen/measuremen.vue

@@ -8,16 +8,28 @@
        <div class="form-card">
          <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 120px"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :clearable="false"
              <el-date-picker
                v-model="queryParams.dataTime"
                :clearable="false"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'"
                value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -27,8 +39,10 @@
        </div>

        <div class="mt20 mb20 text-center data-item">
          æœ¬ç”¨èƒ½å•å…ƒæŒ‡æ ‡<span>{{ dataArray.indexCount }}</span>个，
          æœ¬å¹´åº¦æŠ¥è­¦<span>{{ dataArray.yearCount }}</span>次，本月<span>{{ dataArray.monthCount }}</span>次
          æœ¬ç”¨èƒ½å•å…ƒæŒ‡æ ‡<span>{{ dataArray.indexCount }}</span
          >个， æœ¬å¹´åº¦æŠ¥è­¦<span>{{ dataArray.yearCount }}</span
          >次，本月<span>{{ dataArray.monthCount }}</span
          >次
        </div>
        <el-row :gutter="24" class="mb20">
          <el-col :span="12">
@@ -60,71 +74,70 @@
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
let { alarm_record_category } = proxy.useDict("alarm_record_category");
import * as echarts from "echarts"
import { onMounted, reactive, ref } from "vue"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
let { alarm_record_category } = proxy.useDict("alarm_record_category")
let energyTypeList = ref([])
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    queryParams.value.energyType = energyTypeList.value[0].enersno;
  });
    energyTypeList.value = res.data
    queryParams.value.energyType = energyTypeList.value[0].enersno
  })
}
getEnergyTypeList()
function formatterLabel(list, value) {
  let dict = list.find(item => item.enersno == value)
  return dict ? dict.enername : ''
  let dict = list.find((item) => item.enersno == value)
  return dict ? dict.enername : ""
}


let queryParams = ref({
  timeType: null,
  dataTime: null,
  nodeId: null
  nodeId: null,
})

import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage";
import { el } from 'element-plus/es/locales.mjs';
let form = ref({});
import { getByNodeId, getCountInfo } from "@/api/alarmManage/alarmManage"
import { el } from "element-plus/es/locales.mjs"
let form = ref({})
let currentNode = ref()

function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
function handleNodeClick(e) {
  currentNode.value = e
  queryParams.value.nodeId = e.id
  handleTimeType(period.value[0].value);
  handleTimeType(period.value[0].value)

  getByNodeIdFun()
}

function getByNodeIdFun() {
  getByNodeId(queryParams.value).then(res => {
  getByNodeId(queryParams.value).then((res) => {
    let alarmList = []
    let energyList = []
    let alarmNumberList = {
      data: [],
      xAxisData: []
      xAxisData: [],
    }
    if (res.code == 200) {
      let { data } = res
      alarmList = data.alarmProportion.map(item => {
      alarmList = data.alarmProportion.map((item) => {
        return {
          name: proxy.selectDictLabel(alarm_record_category.value, item.energyName),
          value: item.count,
          percentage: item.percentage
          percentage: item.percentage,
        }
      })
      energyList = data.energyProportion.map(item => {
      energyList = data.energyProportion.map((item) => {
        return {
          name: formatterLabel(energyTypeList.value, item.energyName),
          value: item.count,
          percentage: item.percentage
          percentage: item.percentage,
        }
      })
      for (const item of data.chartDataList) {
@@ -132,9 +145,9 @@
        alarmNumberList.data.push(item.yvalue)
      }

      pieChart('Chart1', alarmList, '报警类型占比')
      pieChart('Chart2', energyList, '能源类型占比')
      getChart('Chart3', alarmNumberList)
      pieChart("Chart1", alarmList, "报警类型占比")
      pieChart("Chart2", energyList, "能源类型占比")
      getChart("Chart3", alarmNumberList)
    }
  })
}
@@ -144,16 +157,16 @@
  getByNodeIdFun()
}
function resetQuery() {
  handleTimeType('YEAR')
  handleTimeType("YEAR")
  getByNodeIdFun()
}
let dataArray = ref({
  indexCount: 0,
  yearCount: 0,
  monthCount: 0
  monthCount: 0,
})
function getCountInfoFun() {
  getCountInfo(queryParams.value).then(res => {
  getCountInfo(queryParams.value).then((res) => {
    if (res.code == 200) {
      dataArray.value = res.data
    }
@@ -163,45 +176,56 @@
getCountInfoFun()
function pieChart(Id, data, name) {
  console.log(data)
  let total = 0;
  let total = 0
  data.forEach(function (val, idx, arr) {
    total += val.value;
    total += val.value
  })
  const myChart = echarts.init(document.getElementById(Id));
  const myChart = echarts.init(document.getElementById(Id))
  myChart.setOption({
    color: ['#4D94FF', '#00C27C', '#F0142F', '#F2D261', '#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
    color: [
      "#4D94FF",
      "#00C27C",
      "#F0142F",
      "#F2D261",
      "#0E7CE2",
      "#FF8352",
      "#E271DE",
      "#F8456B",
      "#00FFFF",
      "#4AEAB0",
    ],
    grid: {
      top: '20%',
      left: '1%',
      right: '1%',
      bottom: '0%',
      containLabel: true
      top: "20%",
      left: "1%",
      right: "1%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      trigger: 'item'
      trigger: "item",
    },
    legend: {
      orient: 'vertical',
      top: 'center',
      icon: 'circle',
      orient: "vertical",
      top: "center",
      icon: "circle",
      itemWidth: 14,
      itemHeight: 14,
      right: '2%',
      right: "2%",
      itemGap: 10,
      textStyle: {
        align: 'left',
        verticalAlign: 'middle',
        align: "left",
        verticalAlign: "middle",
        rich: {
          name: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
          value: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
          rate: {
            color: '#999',
            color: "#999",
            fontSize: 14,
          },
        },
@@ -209,167 +233,165 @@
      formatter: (name) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            return `{name|${data[i].name}  }{value| ${data[i].value}} {rate| ${data[i].percentage}%}`;
            return `{name|${data[i].name}  }{value| ${data[i].value}} {rate| ${data[i].percentage}%}`
          }
        }
      },
    },
    series: [{
      name,
      type: 'pie',
      radius: ['45%', '70%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        overflow: 'none',
        formatter: '{b} {d}%  \n {c} tce',
    series: [
      {
        name,
        type: "pie",
        radius: ["45%", "70%"],
        center: ["35%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          overflow: "none",
          formatter: "{b} {d}%  \n {c} tce",
        },
        data,
      },
      data,
    }]
    ],
  })
}
function getChart(Id, dataList) {
  const myChart3 = echarts.init(document.getElementById(Id));
  myChart3.setOption(
    {

      grid: {
        left: '3%',
        right: '2%',
        bottom: '2%',
        containLabel: true
  const myChart3 = echarts.init(document.getElementById(Id))
  myChart3.setOption({
    grid: {
      left: "3%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      // boundaryGap: false,
      data: dataList.xAxisData,
      axisPointer: {
        type: "shadow",
      },
      tooltip: {
        trigger: 'axis',

      axisTick: {
        show: false,
        alignWithLabel: true,
        length: 5,
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: dataList.xAxisData,
        axisPointer: {
          type: 'shadow'
      // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
      axisTick: {
        show: false,
        length: 5,
        lineStyle: {
          color: "#ddd",
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
          length: 5
        },
        // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
        axisTick: {
          show: false,
          length: 5,
          lineStyle: {
            color: '#ddd'
          }
        },

        // åˆ†å‰²çº¿
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(220,222,226,0.4)'
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 14,
          padding: [5, 0, 0, 0],
          //   formatter: '{value} ml'
        }
      },
      yAxis: {
        type: 'value',
        name: '（次）',
        // è®¾ç½®åç§°æ ·å¼
        nameTextStyle: {
          color: ' #CEE3FF',
          fontSize: 14,
          padding: [0, 0, 5, 0],
        },
        // åæ ‡è½´åˆ»åº¦
        axisTick: {
          show: false,
          alignWithLabel: true,
          length: 5
        },
        // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
        axisTick: {
          show: false,
          length: 5,
          lineStyle: {
            color: ''
          }
        },

        // åˆ†å‰²çº¿
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(220,222,226,0.4)'
          }
      // åˆ†å‰²çº¿
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "rgba(220,222,226,0.4)",
        },

        // åæ ‡è½´åˆ»åº¦é—´éš”
        // interval: '50',
        // // åæ ‡è½´æœ€å°å€¼
        // min: 'dataMin',
        // // åæ ‡è½´æœ€å¤§å€¼
        // max: 'dataMax',
        // // åæ ‡è½´å°æ•°ç‚¹ç²¾åº¦
        // precision: 0,
        // // åæ ‡è½´åˆ»åº¦æ–‡æœ¬çš„布局朝向
        // position: 'left'
        axisLabel: {
          color: '#B2B8C2',
          fontSize: 14,
          //   formatter: '{value} ml'
        }
      },
      series: [
        {
          name: "报警次数",
          type: "bar",
          barWidth: '17',
          stack: 'number',
          data: dataList.data,
          tooltip: {
            show: false,
          }
      axisLabel: {
        color: "#999",
        fontSize: 14,
        padding: [5, 0, 0, 0],
        //   formatter: '{value} ml'
      },
    },
    yAxis: {
      type: "value",
      name: "（次）",
      // è®¾ç½®åç§°æ ·å¼
      nameTextStyle: {
        color: " #CEE3FF",
        fontSize: 14,
        padding: [0, 0, 5, 0],
      },
      // åæ ‡è½´åˆ»åº¦
      axisTick: {
        show: false,
        alignWithLabel: true,
        length: 5,
      },
      // åæ ‡è½´åˆ»åº¦çº¿æ ·å¼
      axisTick: {
        show: false,
        length: 5,
        lineStyle: {
          color: "",
        },
        {
          name: '报警次数',
          type: 'line',
          symbol: 'none', // è®¾ç½®ä¸º 'none' åŽ»æŽ‰åœ†ç‚¹
          lineStyle: {
            color: '#EE0303'
          },
          data: dataList.data,
        },
      ]
    })
      },

  window.addEventListener("resize", () => {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  }, { passive: true });
      // åˆ†å‰²çº¿
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(220,222,226,0.4)",
        },
      },

      // åæ ‡è½´åˆ»åº¦é—´éš”
      // interval: '50',
      // // åæ ‡è½´æœ€å°å€¼
      // min: 'dataMin',
      // // åæ ‡è½´æœ€å¤§å€¼
      // max: 'dataMax',
      // // åæ ‡è½´å°æ•°ç‚¹ç²¾åº¦
      // precision: 0,
      // // åæ ‡è½´åˆ»åº¦æ–‡æœ¬çš„布局朝向
      // position: 'left'
      axisLabel: {
        color: "#B2B8C2",
        fontSize: 14,
        //   formatter: '{value} ml'
      },
    },
    series: [
      {
        name: "报警次数",
        type: "bar",
        barWidth: "12",
        stack: "number",
        data: dataList.data,
        tooltip: {
          show: false,
        },
      },
      {
        name: "报警次数",
        type: "line",
        symbol: "none", // è®¾ç½®ä¸º 'none' åŽ»æŽ‰åœ†ç‚¹
        lineStyle: {
          color: "#EE0303",
        },
        data: dataList.data,
      },
    ],
  })

  window.addEventListener(
    "resize",
    () => {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
    },
    { passive: true }
  )
}




</script>

<style scoped lang="scss">
@import "@/assets/styles/page.scss";


.chart-box {
  height: calc((100vh - 410px)/2) !important;
  height: calc((100vh - 410px) / 2) !important;
}

.data-item {
@@ -378,7 +400,7 @@
  font-weight: bold;

  span {
    color: #397AEE;
    color: #397aee;
    margin: 0 5px;
  }
}
@@ -390,10 +412,9 @@
    font-weight: bold;

    span {
      color: #397AEE;
      color: #397aee;
      margin: 0 5px;
    }
  }

}
</style>
</style>

 zhitan-vue/src/views/carbonemission/carbonEmission.vue

@@ -8,42 +8,40 @@
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 120px"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
                ? 'year'
                : queryParams.timeType == 'MONTH'
                  ? 'month'
                  : 'date'
                " :format="queryParams.timeType == 'YEAR'
                  ? 'YYYY'
                  : queryParams.timeType == 'MONTH'
                    ? 'YYYY-MM'
                    : 'YYYY-MM-DD'
                  " value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
              <el-date-picker
                v-model="queryParams.dataTime"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                æœç´¢
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                å¯¼å‡º
              </el-button>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="
            height: calc(100vh - 220px) !important;
            max-height: calc(100vh - 220px) !important;
            overflow-y: auto;
          ">
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
        >
          <div class="card-list" v-if="listTop.length > 1">
            <el-button @click="dialogVisible = true"> æŸ¥çœ‹æ›´å¤š </el-button>
          </div>
@@ -52,9 +50,12 @@
              <template v-for="(item, index) in row" :key="index">
                <div class="card-list-item">
                  <div class="item-top">
                    <div class="top-icon" :style="{
                      backgroundImage: 'url(' + bgList[index].icon + ')',
                    }" />
                    <div
                      class="top-icon"
                      :style="{
                        backgroundImage: 'url(' + bgList[index].icon + ')',
                      }"
                    />
                    <div class="top-right">
                      {{ item.allEneryType }}
                    </div>
@@ -69,12 +70,10 @@
                    <div class="bottom-left">同比</div>
                    <div class="bottom-right" :style="{ color: bgList[index].color }">
                      {{ Math.abs(item.yoyEnery) }}%
                      <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0
                        ? 'green'
                        : item.yoyEnery < 0
                          ? 'red'
                          : ''
                        ">
                      <el-icon
                        v-if="!!item.yoyEnery"
                        :color="item.yoyEnery > 0 ? 'green' : item.yoyEnery < 0 ? 'red' : ''"
                      >
                        <Top v-if="item.yoyEnery > 0" />
                        <Bottom v-if="item.yoyEnery < 0" />
                      </el-icon>
@@ -84,25 +83,23 @@
              </template>
            </div>
          </template>
          <BaseCard :title="queryParams.nodeName +
            '-碳排放量同环比(' +
            queryParams.dataTime +
            ')'
            ">
          <BaseCard :title="queryParams.nodeName + '-碳排放量同环比(' + queryParams.dataTime + ')'">
            <div class="chart-box" v-loading="loading">
              <div id="Chart1" />
            </div>
          </BaseCard>
          <BaseCard :title="queryParams.nodeName +
            '-碳排放量统计分析表(' +
            queryParams.dataTime +
            ')'
            ">
          <BaseCard :title="queryParams.nodeName + '-碳排放量统计分析表(' + queryParams.dataTime + ')'">
            <div class="table-box">
              <el-table :data="listBottom" v-loading="loading">
                <el-table-column label="时间" align="center" key="xaxis" prop="xaxis" :show-overflow-tooltip="true" />
                <el-table-column label="破排放量(tCO₂e)
                  " align="center" key="yaxis" prop="yaxis" :show-overflow-tooltip="true" />
                <el-table-column
                  label="破排放量(tCO₂e)
                  "
                  align="center"
                  key="yaxis"
                  prop="yaxis"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="同比" align="center" key="yoy" prop="yoy" :show-overflow-tooltip="true" />
                <el-table-column label="环比" align="center" key="qoq" prop="qoq" :show-overflow-tooltip="true" />
              </el-table>
@@ -117,9 +114,12 @@
          <template v-for="(item, index) in row" :key="index">
            <div class="card-list-item">
              <div class="item-top">
                <div class="top-icon" :style="{
                  backgroundImage: 'url(' + bgList[index].icon + ')',
                }" />
                <div
                  class="top-icon"
                  :style="{
                    backgroundImage: 'url(' + bgList[index].icon + ')',
                  }"
                />
                <div class="top-right">
                  {{ item.allEneryType }}
                </div>
@@ -134,12 +134,7 @@
                <div class="bottom-left">同比</div>
                <div class="bottom-right" :style="{ color: bgList[index].color }">
                  {{ Math.abs(item.yoyEnery) }}%
                  <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0
                    ? 'green'
                    : item.yoyEnery < 0
                      ? 'red'
                      : ''
                    ">
                  <el-icon v-if="!!item.yoyEnery" :color="item.yoyEnery > 0 ? 'green' : item.yoyEnery < 0 ? 'red' : ''">
                    <Top v-if="item.yoyEnery > 0" />
                    <Bottom v-if="item.yoyEnery < 0" />
                  </el-icon>
@@ -153,29 +148,26 @@
  </div>
</template>
<script setup name="carbonEmission">
import {
  listUpCarbonemission,
  listMiddleCarbonemission,
} from "@/api/carbonemission/carbonemission";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const { period } = proxy.useDict("period");
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listUpCarbonemission, listMiddleCarbonemission } from "@/api/carbonemission/carbonemission"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const loading = ref(false);
const dialogVisible = ref(false);
import icon1 from "@/assets/images/period/icon1.png";
import icon2 from "@/assets/images/period/icon2.png";
import icon3 from "@/assets/images/period/icon3.png";
import icon4 from "@/assets/images/period/icon4.png";
import icon5 from "@/assets/images/period/icon5.png";
)
const loading = ref(false)
const dialogVisible = ref(false)
import icon1 from "@/assets/images/period/icon1.png"
import icon2 from "@/assets/images/period/icon2.png"
import icon3 from "@/assets/images/period/icon3.png"
import icon4 from "@/assets/images/period/icon4.png"
import icon5 from "@/assets/images/period/icon5.png"
const bgList = ref([
  {
    icon: icon1,
@@ -197,9 +189,9 @@
    icon: icon5,
    color: "#78e801",
  },
]);
const listTop = ref([]);
const listBottom = ref([]);
])
const listTop = ref([])
const listBottom = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -208,23 +200,23 @@
    dataTime: null,
  },
  query: { ...useRoute().query },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  handleTimeType(period.value[0].value);
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value)
  handleQuery()
}
function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
// ç¢³æŽ’放管理-碳排放量核算-列表
function getList() {
  loading.value = true;
  listTop.value = [];
  loading.value = true
  listTop.value = []
  listUpCarbonemission(
    proxy.addDateRange({
      ...queryParams.value,
@@ -233,15 +225,15 @@
  ).then((res) => {
    res.data.upData.map((item, index) => {
      if (index % 5 === 0) {
        listTop.value.push(res.data.upData.slice(index, index + 5));
        listTop.value.push(res.data.upData.slice(index, index + 5))
      }
    });
  });
    })
  })
  // åœ¨åˆå§‹åŒ–之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
    echarts.dispose(document.getElementById("Chart1"));
    echarts.dispose(document.getElementById("Chart1"))
  }
  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  listMiddleCarbonemission(
    proxy.addDateRange({
      emissionType: "allType",
@@ -250,19 +242,19 @@
    })
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      loading.value = false;
      let xaxis = [];
      let yaxis = [];
      let yoy = [];
      let qoq = [];
      loading.value = false
      let xaxis = []
      let yaxis = []
      let yoy = []
      let qoq = []
      if (!!res.data) {
        res.data.map((item) => {
          xaxis.push(item.xaxis);
          yaxis.push(!!item.yaxis ? item.yaxis : 0);
          yoy.push(!!item.yoy ? item.yoy : 0);
          qoq.push(!!item.qoq ? item.qoq : 0);
        });
        listBottom.value = res.data;
          xaxis.push(item.xaxis)
          yaxis.push(!!item.yaxis ? item.yaxis : 0)
          yoy.push(!!item.yoy ? item.yoy : 0)
          qoq.push(!!item.qoq ? item.qoq : 0)
        })
        listBottom.value = res.data
      }
      setTimeout(() => {
        myChart1.setOption({
@@ -273,10 +265,7 @@
              type: "shadow",
              textStyle: {
                fontSize: 14,
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
          },
@@ -292,8 +281,7 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
@@ -304,10 +292,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -320,8 +305,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -333,10 +317,7 @@
              name: "tCO₂e",
              type: "value",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -347,10 +328,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -360,10 +338,7 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -372,10 +347,7 @@
              name: "%",
              alignTicks: true,
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -389,20 +361,14 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -411,7 +377,7 @@
            {
              name: "碳排放量",
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              itemStyle: {
                borderRadius: [15, 15, 0, 0],
              },
@@ -438,29 +404,29 @@
              data: qoq,
            },
          ],
        });
      }, 100);
        })
      }, 100)
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart1.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList();
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.timeType = null;
  queryParams.value.dataTime = null;
  handleTimeType(period.value[0].value);
  handleQuery();
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
@@ -472,7 +438,7 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/comprehensive/comps/LineChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,177 @@
<template>
  <div class="chart-box">
    <div id="ChartDom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const emit = defineEmits()
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
})

watch(
  () => props.chartData,
  (val) => {
    console.log("watch", val)
    initChart()
  }
)
watch(
  () => settingsStore.sideTheme,
  (val) => {
    initChart()
  }
)

onMounted(() => {
  initChart()
})

function initChart(value) {
  const chartDom = document.getElementById("ChartDom")
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.dispose(chartDom)
  }
  const myChart = echarts.init(chartDom)
  let option = {
    title: {
      text: props.chartData.title,
      left: "40",
      textStyle: {
        color: "#2979ff",
      },
    },
    color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      icon: "rect",
      itemWidth: 14,
      itemHeight: 10,
      textStyle: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
      },
    },
    grid: {
      top: "40",
      left: "50",
      right: "40",
      bottom: "20",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        },
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        fontSize: 14,
        padding: [5, 0, 0, 0],
        //   formatter: '{value} ml'
      },
      data: props.chartData.xData,
    },
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
          padding: [0, 0, 5, 0],
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
        },
      },
    ],
    series: [
      {
        name: props.chartData.title,
        type: "bar",
        barWidth: "16",
        // tooltip: {
        //   valueFormatter: function (value) {
        //     return value + "tce"
        //   },
        // },
        itemStyle: {
          borderRadius: [15, 15, 0, 0],
        },
        data: props.chartData.yData,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
    ],
  }
  setTimeout(() => {
    myChart.setOption(option)
  }, 200)

  window.addEventListener(
    "resize",
    () => {
      myChart.resize()
    },
    { passive: true }
  )
}
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 400px;
  border: 1px solid #eaeaea;
  margin-top: 20px;
  padding-top: 20px;
}
</style>

 zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,245 @@
<template>
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="能源类型" prop="energyType">
          <el-select v-model="queryParams.energyType" placeholder="请选择能源类型">
            <el-option
              :label="item.enername"
              :value="item.enersno"
              v-for="item in energyTypeList"
              :key="item.enersno"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="queryParams.dataTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            style="width: 100%"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="warning" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="energyList" v-loading="loading" border max-height="380px">
          <el-table-column fixed prop="indexName" label="指标名称" width="210px">
            <template #default="scope">
              <div style="width: 100%; text-align: left">
                <el-button
                  v-if="scope.row.indexId == queryParams.indexId"
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="color: #fff; background: #409eff; margin-right: 8px"
                ></el-button>
                <el-button
                  v-else
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="margin-right: 8px"
                ></el-button>
                <el-tooltip
                  v-if="scope.row.indexName.length > 9"
                  class="item"
                  effect="dark"
                  :content="scope.row.indexName"
                  placement="top-end"
                >
                  <span>
                    {{ scope.row.indexName.substr(0, 9) + "..." }}
                  </span>
                </el-tooltip>
                <span v-else>{{ scope.row.indexName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="index in 24" :key="index" :label="index - 1 + '时'" align="center" min-width="100">
            <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
          </el-table-column>
        </el-table>

        <div>
          <line-chart ref="LineChartRef" :chartData="lineChartData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getDataList,
  getlistChart,
  exportList,
} from "@/api/comprehensiveStatistics/dailyComprehensive/dailyComprehensive"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import LineChart from "../comps/LineChart.vue"
let { proxy } = getCurrentInstance()
const energyTypeList = ref()
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data
    // form.value.indexType = alarm_record_category.value[0].value
    // form.value.energyType = energyTypeList.value[0].enersno
    getList()
  })
}
getEnergyTypeList()
function numFilter(value) {
  // æˆªå–当前数据到小数点后的几位
  let realVal = ""
  if (!isNaN(value) && value !== "" && value !== null) {
    realVal = parseFloat(value).toFixed(2)
  } else {
    realVal = "--"
  }
  return realVal
}
let loading = ref(false)
let total = ref(0)
let queryParams = ref({
  indexStorageId: "",
  indexCode: "",
  pageNum: 1,
  pageSize: 10,
  dataTime: "",
})

const energyList = ref([])
const lineChartData = ref({})
function getList() {
  queryParams.value.indexCode = proxy.$route.query.modelCode
  getDataList({
    ...queryParams.value,
    timeType: "HOUR",
  }).then((response) => {
    energyList.value = response.data
    if (response.data && response.data.length !== 0) {
      selectChange(response.data[0])
    }
  })
}

const LineChartRef = ref()
function selectChange(row) {
  queryParams.value.indexId = row ? row.indexId : undefined
  queryParams.value.timeType = "HOUR"
  getlistChart(queryParams.value).then((response) => {
    let actualData = []
    let expectedData = []
    let title = ""
    response.data.forEach((item) => {
      expectedData.push(numFilter(item.value))
      actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
      title = item.indexName + "(" + (item.unitId || "") + ")"
    })

    console.log(response)
    console.log(actualData)
    console.log(expectedData)

    lineChartData.value = {
      // xData: [
      //   "0时",
      //   "1时",
      //   "2时",
      //   "3时",
      //   "4时",
      //   "5时",
      //   "6时",
      //   "7时",
      //   "8时",
      //   "9时",
      //   "10时",
      //   "11时",
      //   "12时",
      //   "13时",
      //   "14时",
      //   "15时",
      //   "16时",
      //   "17时",
      //   "18时",
      //   "19时",
      //   "20时",
      //   "21时",
      //   "22时",
      //   "23时",
      // ],
      xData: actualData,
      yData: expectedData,
      title,
    }
    // LineChartRef.value.initChart()
    // this.lineChartData.actualData = actualData;
    // this.lineChartData.expectedData = expectedData;
    // this.lineChartData.title = title;
    // this.$refs.LineChart.initChart(this.lineChartData);
    // this.$refs.BarChart.initChart(this.lineChartData);
  })
}

function getTime() {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var date = date.getDate()
  month = month < 10 ? "0" + month : month
  date = date < 10 ? "0" + date : date
  queryParams.value.dataTime = year + "-" + month + "-" + date
}
getTime()

// å¯¼å‡ºæŒ‰é’®æ“ä½œ
function handleExport() {
  exportList(queryParams.value).then((response) => {
    console.log(response)
    // download(response.msg);
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value = {
    limitName: "",
    pageNum: 1,
    pageSize: 10,
    dataTime: null,
  }
  getTime()
  getList()
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

.header-box {
  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}

:deep .el-table--fit {
  border-bottom: 1px solid #eaeaea;
}
</style>

 zhitan-vue/src/views/comprehensive/monthlyComprehensive/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
<template>
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="能源类型" prop="energyType">
          <el-select v-model="queryParams.energyType" placeholder="请选择能源类型">
            <el-option
              :label="item.enername"
              :value="item.enersno"
              v-for="item in energyTypeList"
              :key="item.enersno"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            style="width: 100%"
            v-model="queryParams.dataTime"
            type="month"
            :clearable="false"
            value-format="yyyy-MM"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="warning" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="energyList" v-loading="loading" border max-height="380px">
          <el-table-column fixed prop="indexName" label="指标名称" width="210px">
            <template #default="scope">
              <div style="width: 100%; text-align: left">
                <el-button
                  v-if="scope.row.indexId == queryParams.indexId"
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="color: #fff; background: #409eff; margin-right: 8px"
                ></el-button>
                <el-button
                  v-else
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="margin-right: 8px"
                ></el-button>
                <el-tooltip
                  v-if="scope.row.indexName.length > 9"
                  class="item"
                  effect="dark"
                  :content="scope.row.indexName"
                  placement="top-end"
                >
                  <span>
                    {{ scope.row.indexName.substr(0, 9) + "..." }}
                  </span>
                </el-tooltip>
                <span v-else>{{ scope.row.indexName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="index in 31" :key="index" :label="index + '日'" align="center" min-width="100">
            <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
          </el-table-column>
        </el-table>

        <div>
          <line-chart ref="LineChartRef" :chartData="lineChartData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getDataList, getlistChart } from "@/api/comprehensiveStatistics/monthlyComprehensive/monthlyComprehensive"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import LineChart from "../comps/LineChart.vue"
let { proxy } = getCurrentInstance()
const energyTypeList = ref()
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data
    // form.value.indexType = alarm_record_category.value[0].value
    // form.value.energyType = energyTypeList.value[0].enersno
    getList()
  })
}
getEnergyTypeList()
function numFilter(value) {
  // æˆªå–当前数据到小数点后的几位
  let realVal = ""
  if (!isNaN(value) && value !== "" && value !== null) {
    realVal = parseFloat(value).toFixed(2)
  } else {
    realVal = "--"
  }
  return realVal
}
let loading = ref(false)
let total = ref(0)
let queryParams = ref({
  indexStorageId: "",
  indexCode: "",
  pageNum: 1,
  pageSize: 10,
  dataTime: "",
  timeType: "DAY",
})

const energyList = ref([])
const lineChartData = ref({})
function getList() {
  queryParams.value.indexCode = proxy.$route.query.modelCode
  getDataList({
    ...queryParams.value,
  }).then((response) => {
    energyList.value = response.data.tabledata
    if (energyList.value && energyList.value.length !== 0) {
      selectChange(energyList.value[0])
    }
  })
}

const LineChartRef = ref()
function selectChange(row) {
  queryParams.value.indexId = row ? row.indexId : undefined
  getlistChart(queryParams.value).then((response) => {
    let actualData = []
    let expectedData = []
    let title = ""
    response.data.forEach((item) => {
      expectedData.push(numFilter(item.value))
      actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日")
      title = item.indexName + "(" + (item.unitId || "") + ")"
    })

    console.log(response)
    console.log(actualData)
    console.log(expectedData)

    lineChartData.value = {
      // xData: [
      //   "0时",
      //   "1时",
      //   "2时",
      //   "3时",
      //   "4时",
      //   "5时",
      //   "6时",
      //   "7时",
      //   "8时",
      //   "9时",
      //   "10时",
      //   "11时",
      //   "12时",
      //   "13时",
      //   "14时",
      //   "15时",
      //   "16时",
      //   "17时",
      //   "18时",
      //   "19时",
      //   "20时",
      //   "21时",
      //   "22时",
      //   "23时",
      // ],
      xData: actualData,
      yData: expectedData,
      title,
    }
    // LineChartRef.value.initChart()
    // this.lineChartData.actualData = actualData;
    // this.lineChartData.expectedData = expectedData;
    // this.lineChartData.title = title;
    // this.$refs.LineChart.initChart(this.lineChartData);
    // this.$refs.BarChart.initChart(this.lineChartData);
  })
}

function getTime() {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var date = date.getDate()
  month = month < 10 ? "0" + month : month
  date = date < 10 ? "0" + date : date
  queryParams.value.dataTime = year + "-" + month
}
getTime()

// å¯¼å‡ºæŒ‰é’®æ“ä½œ
function handleExport() {
  exportList(queryParams.value).then((response) => {
    console.log(response)
    // download(response.msg);
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value = {
    limitName: "",
    pageNum: 1,
    pageSize: 10,
    dataTime: null,
    timeType: "DAY",
  }
  getTime()
  getList()
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

.header-box {
  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}

:deep .el-table--fit {
  border-bottom: 1px solid #eaeaea;
}
</style>

 zhitan-vue/src/views/comprehensive/yearComprehensive/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,245 @@
<template>
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="能源类型" prop="energyType">
          <el-select v-model="queryParams.energyType" placeholder="请选择能源类型">
            <el-option
              :label="item.enername"
              :value="item.enersno"
              v-for="item in energyTypeList"
              :key="item.enersno"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            style="width: 100%"
            v-model="queryParams.dataTime"
            type="year"
            :clearable="false"
            value-format="YYYY"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="warning" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="energyList" v-loading="loading" border max-height="380px">
          <el-table-column fixed prop="indexName" label="指标名称" width="210px">
            <template #default="scope">
              <div style="width: 100%; text-align: left">
                <el-button
                  v-if="scope.row.indexId == queryParams.indexId"
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="color: #fff; background: #409eff; margin-right: 8px"
                ></el-button>
                <el-button
                  v-else
                  icon="search"
                  circle
                  @click="selectChange(scope.row)"
                  style="margin-right: 8px"
                ></el-button>
                <el-tooltip
                  v-if="scope.row.indexName.length > 9"
                  class="item"
                  effect="dark"
                  :content="scope.row.indexName"
                  placement="top-end"
                >
                  <span>
                    {{ scope.row.indexName.substr(0, 9) + "..." }}
                  </span>
                </el-tooltip>
                <span v-else>{{ scope.row.indexName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="index in 12" :key="index" :label="index + '月'" align="center" min-width="100">
            <template #default="scope">{{ numFilter(scope.row[`value${index - 1}`]) }}</template>
          </el-table-column>
        </el-table>

        <div>
          <line-chart ref="LineChartRef" :chartData="lineChartData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getDataList, getlistChart } from "@/api/comprehensiveStatistics/yearComprehensive/yearComprehensive"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import LineChart from "../comps/LineChart.vue"
let { proxy } = getCurrentInstance()
const energyTypeList = ref()
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data
    // form.value.indexType = alarm_record_category.value[0].value
    // form.value.energyType = energyTypeList.value[0].enersno
    getList()
  })
}
getEnergyTypeList()
function numFilter(value) {
  // æˆªå–当前数据到小数点后的几位
  let realVal = ""
  if (!isNaN(value) && value !== "" && value !== null) {
    realVal = parseFloat(value).toFixed(2)
  } else {
    realVal = "--"
  }
  return realVal
}
let loading = ref(false)
let queryParams = ref({
  indexStorageId: "",
  indexCode: "",
  pageNum: 1,
  pageSize: 10,
  dataTime: "2025-01-0",
  timeType: "MONTH",
})

const energyList = ref([])
const lineChartData = ref({})
function getList() {
  queryParams.value.indexCode = proxy.$route.query.modelCode
  getDataList({
    ...queryParams.value,
    dataTime: queryParams.value.dataTime ? queryParams.value.dataTime + "-01" : "",
  }).then((response) => {
    energyList.value = response.data
    if (response.data && response.data.length !== 0) {
      selectChange(response.data[0])
    }
  })
}

const LineChartRef = ref()
function selectChange(row) {
  queryParams.value.indexId = row ? row.indexId : undefined
  getlistChart({
    ...queryParams.value,
    dataTime: queryParams.value.dataTime ? queryParams.value.dataTime + "-01" : "",
  }).then((response) => {
    let actualData = []
    let expectedData = []
    let title = ""
    response.data.forEach((item) => {
      expectedData.push(numFilter(item.value))
      actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
      title = item.indexName + "(" + (item.unitId || "") + ")"
    })

    console.log(response)
    console.log(actualData)
    console.log(expectedData)

    lineChartData.value = {
      // xData: [
      //   "0时",
      //   "1时",
      //   "2时",
      //   "3时",
      //   "4时",
      //   "5时",
      //   "6时",
      //   "7时",
      //   "8时",
      //   "9时",
      //   "10时",
      //   "11时",
      //   "12时",
      //   "13时",
      //   "14时",
      //   "15时",
      //   "16时",
      //   "17时",
      //   "18时",
      //   "19时",
      //   "20时",
      //   "21时",
      //   "22时",
      //   "23时",
      // ],
      xData: actualData,
      yData: expectedData,
      title,
    }
    // LineChartRef.value.initChart()
    // this.lineChartData.actualData = actualData;
    // this.lineChartData.expectedData = expectedData;
    // this.lineChartData.title = title;
    // this.$refs.LineChart.initChart(this.lineChartData);
    // this.$refs.BarChart.initChart(this.lineChartData);
  })
}

function getTime() {
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var date = date.getDate()
  month = month < 10 ? "0" + month : month
  date = date < 10 ? "0" + date : date
  queryParams.value.dataTime = year + ""
}

// å¯¼å‡ºæŒ‰é’®æ“ä½œ
function handleExport() {
  exportList(queryParams.value).then((response) => {
    console.log(response)
    // download(response.msg);
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value = {
    limitName: "",
    pageNum: 1,
    pageSize: 10,
    dataTime: null,
    timeType: "MONTH",
  }
  getTime()
  getList()
}

getTime()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

.header-box {
  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}

:deep .el-table--fit {
  border-bottom: 1px solid #eaeaea;
}
</style>

 zhitan-vue/src/views/deepanalysis/deepAnalysis.vue

@@ -4,19 +4,28 @@
      <el-form :model="form" ref="queryRef" :inline="true" label-width="80px">
        <el-form-item label="能源类型" prop="energyType">
          <el-select v-model="form.energyType" placeholder="请选择能源类型">
            <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
              :key="item.enersno" />
            <el-option
              :label="item.enername"
              :value="item.enersno"
              v-for="item in energyTypeList"
              :key="item.enersno"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="期间" prop="timeType" >
        <el-form-item label="期间" prop="timeType">
          <el-select v-model="form.timeType" placeholder="期间" clearable style="width: 120px" @change="handleTimeType">
            <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间选择" prop="dataTime">
          <el-date-picker v-if="form.type == 1" v-model="form.dataTime" type="year" />
          <el-date-picker v-else-if="form.type == 2" v-model="form.dataTime" type="month" format="YYYY-MM"
            value-format="YYYY-MM" />
          <el-date-picker v-if="form.timeType == 'YEAR'" v-model="form.dataTime" type="year" />
          <el-date-picker
            v-else-if="form.timeType == 'MONTH'"
            v-model="form.dataTime"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
          <el-date-picker v-else v-model="form.dataTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
@@ -46,178 +55,245 @@
  </div>
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
import useSettingsStore from "@/store/modules/settings"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import { getFlowCharts } from "@/api/energyAnalysis/energyAnalysis"
const settingsStore = useSettingsStore()
import * as echarts from 'echarts';
import * as echarts from "echarts"
let { proxy } = getCurrentInstance()
import { onMounted } from 'vue';
const { period } = proxy.useDict("period");
import { nextTick, onMounted } from "vue"
const { period } = proxy.useDict("period")
console.log(period)
let form = ref({
  energyType: null,
  timeType: null,
  dataTime: null,
})
function handleTimeType(e) {
  form.value.timeType = e;
  form.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  form.value.timeType = e
  form.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getData()
}
const energyTypeList = ref();
const energyTypeList = ref()
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    energyTypeList.value = res.data
    form.value.energyType = energyTypeList.value[0].enersno
    handleTimeType(period.value[0].value);
  });
    handleTimeType(period.value[0].value)
  })
}
getEnergyTypeList()

function handleSelect(e) {
  console.log(e, form.value.type)
  if (form.value.type == 1) {
    form.value.time = proxy.dayjs().format('YYYY')
    form.value.time = proxy.dayjs().format("YYYY")
  } else if (form.value.type == 2) {
    form.value.time = proxy.dayjs().format('YYYY-MM')
    form.value.time = proxy.dayjs().format("YYYY-MM")
  } else {
    form.value.time = proxy.dayjs().format('YYYY-MM-DD')
    form.value.time = proxy.dayjs().format("YYYY-MM-DD")
  }
}
function handleQuery() { }
function handleQuery() {
  getData()
}

function resetQuery() {
  form.value = {
    type: 1,
    time: proxy.dayjs().format('YYYY'),
    time: proxy.dayjs().format("YYYY"),
  }
}

import icon1 from '@/assets/images/period/icon1.png'
import icon2 from '@/assets/images/period/icon2.png'
import icon3 from '@/assets/images/period/icon3.png'
import icon4 from '@/assets/images/period/icon4.png'
import icon5 from '@/assets/images/period/icon5.png'
import icon1 from "@/assets/images/period/icon1.png"
import icon2 from "@/assets/images/period/icon2.png"
import icon3 from "@/assets/images/period/icon3.png"
import icon4 from "@/assets/images/period/icon4.png"
import icon5 from "@/assets/images/period/icon5.png"
const periodList = ref([
  {
    icon: icon1,
    color: "#3371eb",
    title: "累计能耗",
    data: '1000.1 m³'
    data: "1000.1 m³",
  },
  {
    icon: icon3,
    color: "#ff6200",
    title: "分表能耗",
    data: ' 0 m³'
    data: " 0 m³",
  },
  {
    icon: icon4,
    color: "#ffce0c",
    title: "损失量",
    data: '1000.1 m³'
    data: "1000.1 m³",
  },
  {
    icon: icon5,
    color: "#78e801",
    title: "损失比例",
    data: '100.00%'
    data: "100.00%",
  },
])

watch(() => settingsStore.sideTheme, (val) => {
  getChart()
})
const flowData = ref({})
function getData() {
  getFlowCharts({
    energyType: form.value.energyType,
    nodeId: "",
    queryTime: form.value.dataTime,
    timeType: form.value.timeType,
    modelCode: proxy.$route.query.modelCode,
  }).then((res) => {
    periodList.value[0].data = res.data.totalAccumulatedAmount
    periodList.value[1].data = res.data.childNodeAccumulatedAmount
    periodList.value[2].data = res.data.difference
    periodList.value[3].data = res.data.energyLossRatio + "%"
    flowData.value = res.data.itemVOList
    nextTick(() => {
      getChart()
    })
  })
}

watch(
  () => settingsStore.sideTheme,
  (val) => {
    getChart()
  }
)

function getChart() {
  let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
  let mydata = []
  let mylinks = []
  if (flowData.value.length) {
    mylinks = flowData.value || []
    let nodes = []
    mylinks.forEach((element) => {
      nodes.push(element.source)
      nodes.push(element.target)
    })
    mydata = Array.from(new Set(nodes)).map((item) => {
      return {
        name: item,
      }
    })
  }
  console.log(mydata)
  console.log(mylinks)


  let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
  let mydata = [
    { name: 'L1', itemStyle: { color: colors[0] }, depth: 0 },
    { name: 'L1-1', itemStyle: { color: colors[0] }, depth: 0 },
    { name: 'L1-2', itemStyle: { color: colors[0] }, depth: 0 },
    { name: 'L1-3', itemStyle: { color: colors[0] }, depth: 0 },


    { name: 'L2', itemStyle: { color: colors[1] }, depth: 1 },
    { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
    { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
    { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },


    { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
    { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
    { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },


    { name: 'L4', itemStyle: { color: colors[3] }, depth: 3 },



  ];
  // mydata.reverse()
  let mylinks = [
    // L1→L4     9720
    { source: 'L1', target: 'L4', value: 9720 },
    // L2→L4     24396
    { source: 'L2', target: 'L4', value: 24396 },
    // L3→L4     1462
    { source: 'L3', target: 'L4', value: 1462 },

    // L1→L2→L3→L4     215
    { source: 'L1-1', target: 'L2-1', value: 215 },
    { source: 'L2-1', target: 'L3-1', value: 215 },
    { source: 'L3-1', target: 'L4', value: 215 },

    // L1→L2→L4     4518
    { source: 'L1-2', target: 'L2-2', value: 4518 },
    { source: 'L2-2', target: 'L4', value: 4518 },
    // L1→L3→L4     217
    { source: 'L1-3', target: 'L3-2', value: 217 },
    { source: 'L3-2', target: 'L4', value: 217 },

    // L2→L3→L4     893
    { source: 'L2-3', target: 'L3-3', value: 893 },
    { source: 'L3-3', target: 'L4', value: 893 },

  ];


  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  myChart1.setOption({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      trigger: "item",
      triggerOn: "mousemove",
    },
    series: {
      type: 'sankey',
      lineStyle: {
        opacity: 0.3,
        color: 'gradient',
        curveness: 0.7,
    // series: {
    //   type: "sankey",
    //   lineStyle: {
    //     opacity: 0.3,
    //     color: "gradient",
    //     curveness: 0.7,
    //   },
    //   // nodeAlign: 'left',
    //   nodeGap: 18,
    //   layoutIterations: 1,
    //   emphasis: {
    //     focus: "adjacency",
    //   },
    //   data: mydata,
    //   links: mylinks,
    // },
    series: [
      {
        type: "sankey",
        left: 50.0,
        top: 20.0,
        right: 100.0,
        bottom: 25.0,
        data: mydata,
        links: mylinks,
        nodeGap: 18,
        layoutIterations: 1,
        //emphasis: {
        //  focus: 'adjacency',
        //},
        nodeAlign: "left",
        lineStyle: {
          color: "source",
          curveness: 0.7,
          opacity: 0.3,
        },
        itemStyle: {
          color: "#333",
          borderColor: "#1f77b4",
        },
        // label: {
        //   color: "rgba(0,0,0,0.7)",
        //   fontSize: 10,
        // },
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: colors[0],
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
          {
            depth: 1,
            itemStyle: {
              color: colors[1],
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
          {
            depth: 2,
            itemStyle: {
              color: colors[2],
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
          {
            depth: 3,
            itemStyle: {
              color: colors[3],
            },
            lineStyle: {
              color: "source",
              opacity: 0.3,
            },
          },
        ],
      },
      // nodeAlign: 'left',
      nodeGap: 18,
      layoutIterations: 1,
      emphasis: {
        focus: 'adjacency',
      },
      data: mydata,
      links: mylinks,
    },
    ],
  })
  window.addEventListener("resize", () => {
    myChart1.resize();
  }, { passive: true });
  window.addEventListener(
    "resize",
    () => {
      myChart1.resize()
    },
    { passive: true }
  )
}
onMounted(() => {
  getChart()
  getEnergyTypeList()
})
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {

  .card-list {
    display: flex;
    justify-content: space-between;
@@ -295,7 +371,7 @@
      height: 167px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #E8E8E8;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 20px 18px 23px 16px;
@@ -337,7 +413,7 @@
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 14px;
          color: #5D5C5C;
          color: #5d5c5c;
        }

        .bottom-right {
@@ -360,4 +436,4 @@
    height: 100%;
  }
}
</style>
</style>

 zhitan-vue/src/views/index.vue

@@ -20,10 +20,11 @@
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
                </div>
                <div class="right-value">
                  <span> {{ item.count }}</span>
                  <span class="unit">{{ item.energyUnit }}</span>
                  <!-- <span class="unit">{{ item.energyUnit }}</span> -->
                </div>
              </div>
            </div>
@@ -889,18 +890,23 @@
          display: flex;

          .top-icon {
            width: 69px;
            height: 69px;
            width: 50px;
            height: 50px;
            background-size: 100% 100%;
          }

          .top-right {
            margin-left: 16px;
            margin-left: 12px;

            .right-name {
              font-weight: bold;
              font-size: 16px;
              font-family: OPPOSans-Bold;
              .unit {
                margin-left: 2px;
                font-size: 16px;
                font-weight: normal;
              }
            }

            .right-value {

 zhitan-vue/src/views/peakvalley/period/period.vue

@@ -6,11 +6,7 @@
      </div>
      <div class="page-container-right">
        <div class="form-card">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
          >
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="时间" prop="queryTime">
              <el-date-picker
                v-model="queryParams.queryTime"
@@ -22,39 +18,22 @@
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                æœç´¢
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            height: calc(100vh - 205px) !important;
            max-height: calc(100vh - 205px) !important;
            overflow-y: auto;
          "
          style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <div class="card-list">
            <div
              class="card-list-item"
              v-for="item in periodList"
              :key="item.title"
            >
            <div class="card-list-item" v-for="item in periodList" :key="item.title">
              <div class="item-top">
                <div
                  class="icon"
                  :style="{ backgroundImage: 'url(' + item.icon + ')' }"
                ></div>
                <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
                <div class="name">{{ item.title }}</div>
              </div>
              <div
                class="item-bottom"
                v-for="(node, nodeIndex) in item.data"
                :key="nodeIndex"
              >
              <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
                <div class="bottom-left">{{ node.label }}</div>
                <div class="bottom-right" :style="{ color: item.color }">
                  {{ node.value }}
@@ -62,12 +41,12 @@
              </div>
            </div>
          </div>
          <BaseCard :title="queryParams.nodeName+'-尖峰平谷电量图'">
          <BaseCard :title="queryParams.nodeName + '-尖峰平谷电量图'">
            <div class="chart-box">
              <div id="Chart1" />
            </div>
          </BaseCard>
          <BaseCard :title="queryParams.nodeName+'-尖峰平谷电费图'">
          <BaseCard :title="queryParams.nodeName + '-尖峰平谷电费图'">
            <div class="chart-box">
              <div id="Chart2" />
            </div>
@@ -78,24 +57,24 @@
  </div>
</template>
<script setup name="period">
import { listPeriod } from "@/api/peakValley/period";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listPeriod } from "@/api/peakValley/period"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const loading = ref(false);
import icon1 from "@/assets/images/period/icon1.png";
import icon2 from "@/assets/images/period/icon2.png";
import icon3 from "@/assets/images/period/icon3.png";
import icon4 from "@/assets/images/period/icon4.png";
import icon5 from "@/assets/images/period/icon5.png";
)
const loading = ref(false)
import icon1 from "@/assets/images/period/icon1.png"
import icon2 from "@/assets/images/period/icon2.png"
import icon3 from "@/assets/images/period/icon3.png"
import icon4 from "@/assets/images/period/icon4.png"
import icon5 from "@/assets/images/period/icon5.png"
const periodList = ref([
  {
    icon: icon1,
@@ -204,7 +183,7 @@
      },
    ],
  },
]);
])
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -213,121 +192,90 @@
    queryTime: null,
  },
  query: { ...useRoute().query },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM");
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM")
  handleQuery()
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷时段统计-列表
function getList() {
  loading.value = true;
  loading.value = true
  listPeriod(
    proxy.addDateRange({
      ...queryParams.value,
      ...query.value,
    })
  ).then((res) => {
    loading.value = false;
    loading.value = false
    if (!!res.code && res.code == 200) {
      if (!!res.data.totalVO) {
        periodList.value[0].data[0].value = !!res.data.totalVO
          .totalPowerConsumption
        periodList.value[0].data[0].value = !!res.data.totalVO.totalPowerConsumption
          ? res.data.totalVO.totalPowerConsumption
          : 0;
        periodList.value[0].data[1].value = !!res.data.totalVO.totalCost
          ? res.data.totalVO.totalCost
          : 0;
          : 0
        periodList.value[0].data[1].value = !!res.data.totalVO.totalCost ? res.data.totalVO.totalCost : 0

        periodList.value[1].data[0].value = !!res.data.totalVO
          .tipPowerConsumption
        periodList.value[1].data[0].value = !!res.data.totalVO.tipPowerConsumption
          ? res.data.totalVO.tipPowerConsumption
          : 0;
          : 0
        periodList.value[1].data[1].value =
          (!!res.data.totalVO.tipPowerProportion
            ? res.data.totalVO.tipPowerProportion
            : 0) + "%";
        periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost
          ? res.data.totalVO.tipPowerCost
          : 0;
          (!!res.data.totalVO.tipPowerProportion ? res.data.totalVO.tipPowerProportion : 0) + "%"
        periodList.value[1].data[2].value = !!res.data.totalVO.tipPowerCost ? res.data.totalVO.tipPowerCost : 0
        periodList.value[1].data[3].value =
          (!!res.data.totalVO.tipPowerCostProportion
            ? res.data.totalVO.tipPowerCostProportion
            : 0) + "%";
          (!!res.data.totalVO.tipPowerCostProportion ? res.data.totalVO.tipPowerCostProportion : 0) + "%"

        periodList.value[2].data[0].value = !!res.data.totalVO
          .peakPowerConsumption
        periodList.value[2].data[0].value = !!res.data.totalVO.peakPowerConsumption
          ? res.data.totalVO.peakPowerConsumption
          : 0;
          : 0
        periodList.value[2].data[1].value =
          (!!res.data.totalVO.peakPowerProportion
            ? res.data.totalVO.peakPowerProportion
            : 0) + "%";
        periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost
          ? res.data.totalVO.peakPowerCost
          : 0;
          (!!res.data.totalVO.peakPowerProportion ? res.data.totalVO.peakPowerProportion : 0) + "%"
        periodList.value[2].data[2].value = !!res.data.totalVO.peakPowerCost ? res.data.totalVO.peakPowerCost : 0
        periodList.value[2].data[3].value =
          (!!res.data.totalVO.peakPowerCostProportion
            ? res.data.totalVO.peakPowerCostProportion
            : 0) + "%";
          (!!res.data.totalVO.peakPowerCostProportion ? res.data.totalVO.peakPowerCostProportion : 0) + "%"

        periodList.value[3].data[0].value = !!res.data.totalVO
          .flatPowerConsumption
        periodList.value[3].data[0].value = !!res.data.totalVO.flatPowerConsumption
          ? res.data.totalVO.flatPowerConsumption
          : 0;
          : 0
        periodList.value[3].data[1].value =
          (!!res.data.totalVO.flatPowerProportion
            ? res.data.totalVO.flatPowerProportion
            : 0) + "%";
        periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost
          ? res.data.totalVO.flatPowerCost
          : 0;
          (!!res.data.totalVO.flatPowerProportion ? res.data.totalVO.flatPowerProportion : 0) + "%"
        periodList.value[3].data[2].value = !!res.data.totalVO.flatPowerCost ? res.data.totalVO.flatPowerCost : 0
        periodList.value[3].data[3].value =
          (!!res.data.totalVO.flatPowerCostProportion
            ? res.data.totalVO.flatPowerCostProportion
            : 0) + "%";
          (!!res.data.totalVO.flatPowerCostProportion ? res.data.totalVO.flatPowerCostProportion : 0) + "%"

        periodList.value[4].data[0].value = !!res.data.totalVO
          .troughPowerConsumption
        periodList.value[4].data[0].value = !!res.data.totalVO.troughPowerConsumption
          ? res.data.totalVO.troughPowerConsumption
          : 0;
          : 0
        periodList.value[4].data[1].value =
          (!!res.data.totalVO.troughPowerProportion
            ? res.data.totalVO.troughPowerProportion
            : 0) + "%";
        periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost
          ? res.data.totalVO.troughPowerCost
          : 0;
          (!!res.data.totalVO.troughPowerProportion ? res.data.totalVO.troughPowerProportion : 0) + "%"
        periodList.value[4].data[2].value = !!res.data.totalVO.troughPowerCost ? res.data.totalVO.troughPowerCost : 0
        periodList.value[4].data[3].value =
          (!!res.data.totalVO.troughPowerCostProportion
            ? res.data.totalVO.troughPowerCostProportion
            : 0) + "%";
          (!!res.data.totalVO.troughPowerCostProportion ? res.data.totalVO.troughPowerCostProportion : 0) + "%"
      }
      // åœ¨åˆå§‹åŒ–之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
        echarts.dispose(document.getElementById("Chart1"));
        echarts.dispose(document.getElementById("Chart1"))
      }
      if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
        echarts.dispose(document.getElementById("Chart2"));
        echarts.dispose(document.getElementById("Chart2"))
      }
      const myChart1 = echarts.init(document.getElementById("Chart1"));
      const myChart2 = echarts.init(document.getElementById("Chart2"));
      const myChart1 = echarts.init(document.getElementById("Chart1"))
      const myChart2 = echarts.init(document.getElementById("Chart2"))
      if (!!res.data.powerConsumptionList) {
        let xdata = [];
        let ytip = [];
        let ypeak = [];
        let yflat = [];
        let ytrough = [];
        let xdata = []
        let ytip = []
        let ypeak = []
        let yflat = []
        let ytrough = []
        res.data.powerConsumptionList.map((item) => {
          xdata.push(Number(item.xdata.slice(-2)) + "日");
          ytip.push(!!item.ytip ? item.ytip : 0);
          ypeak.push(!!item.ypeak ? item.ypeak : 0);
          yflat.push(!!item.yflat ? item.yflat : 0);
          ytrough.push(!!item.ytrough ? item.ytrough : 0);
        });
          xdata.push(Number(item.xdata.slice(-2)) + "日")
          ytip.push(!!item.ytip ? item.ytip : 0)
          ypeak.push(!!item.ypeak ? item.ypeak : 0)
          yflat.push(!!item.yflat ? item.yflat : 0)
          ytrough.push(!!item.ytrough ? item.ytrough : 0)
        })
        myChart1.setOption({
          color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
          tooltip: {
@@ -336,10 +284,7 @@
              type: "shadow",
              textStyle: {
                fontSize: 14,
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
          },
@@ -356,8 +301,7 @@
            itemHeight: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
@@ -365,10 +309,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -381,8 +322,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -393,8 +333,7 @@
            name: "耗电量(KWH)",
            type: "value",
            nameTextStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [0, 0, 5, 0],
            },
@@ -405,10 +344,7 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -418,8 +354,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              //   formatter: '{value} ml'
            },
@@ -429,46 +364,46 @@
              name: "尖",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ytip,
            },
            {
              name: "å³°",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ypeak,
            },
            {
              name: "å¹³",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: yflat,
            },
            {
              name: "è°·",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ytrough,
            },
          ],
        });
        })
      }
      if (!!res.data.costList) {
        let xdata = [];
        let ytip = [];
        let ypeak = [];
        let yflat = [];
        let ytrough = [];
        let xdata = []
        let ytip = []
        let ypeak = []
        let yflat = []
        let ytrough = []
        res.data.costList.map((item) => {
          xdata.push(Number(item.xdata.slice(-2)) + "日");
          ytip.push(!!item.ytip ? item.ytip : 0);
          ypeak.push(!!item.ypeak ? item.ypeak : 0);
          yflat.push(!!item.yflat ? item.yflat : 0);
          ytrough.push(!!item.ytrough ? item.ytrough : 0);
        });
          xdata.push(Number(item.xdata.slice(-2)) + "日")
          ytip.push(!!item.ytip ? item.ytip : 0)
          ypeak.push(!!item.ypeak ? item.ypeak : 0)
          yflat.push(!!item.yflat ? item.yflat : 0)
          ytrough.push(!!item.ytrough ? item.ytrough : 0)
        })
        myChart2.setOption({
          color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
          tooltip: {
@@ -477,10 +412,7 @@
              type: "shadow",
              textStyle: {
                fontSize: 14,
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
          },
@@ -497,8 +429,7 @@
            itemHeight: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
@@ -506,10 +437,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -522,8 +450,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -534,8 +461,7 @@
            name: "电费(元)",
            type: "value",
            nameTextStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [0, 0, 5, 0],
            },
@@ -546,10 +472,7 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -559,8 +482,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              //   formatter: '{value} ml'
            },
@@ -570,49 +492,53 @@
              name: "尖",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ytip,
            },
            {
              name: "å³°",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ypeak,
            },
            {
              name: "å¹³",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: yflat,
            },
            {
              name: "è°·",
              type: "bar",
              stack: "total",
              barWidth: "27",
              barWidth: "12",
              data: ytrough,
            },
          ],
        });
        })
      }
      window.addEventListener("resize", () => {
        myChart1.resize();
        myChart2.resize();
      },{passive: true});
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize()
          myChart2.resize()
        },
        { passive: true }
      )
    }
  });
  })
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷时段统计-搜索
function handleQuery() {
  getList();
  getList()
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷时段统计-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM");
  handleQuery();
  proxy.resetForm("queryRef")
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM")
  handleQuery()
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/peakvalley/timeSharing/timeSharing.vue

@@ -17,24 +17,16 @@
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                æœç´¢
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                å¯¼å‡º
              </el-button>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            height: calc(100vh - 205px) !important;
            max-height: calc(100vh - 205px) !important;
            overflow-y: auto;
          "
          style="height: calc(100vh - 205px) !important; max-height: calc(100vh - 205px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <el-row>
@@ -55,16 +47,8 @@
            <el-col :span="24">
              <BaseCard :title="queryParams.nodeName + '-峰平谷分时统计'">
                <div class="table-box">
                  <el-table
                    :data="timeSharingList"
                    style="width: 100%"
                    show-summary
                  >
                    <el-table-column
                      label="时间"
                      align="center"
                      show-overflow-tooltip
                    >
                  <el-table :data="timeSharingList" style="width: 100%" show-summary>
                    <el-table-column label="时间" align="center" show-overflow-tooltip>
                      <template #default="scope">
                        {{ proxy.dayjs(scope.row.time).format("HH时") }}
                      </template>
@@ -77,12 +61,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="sharpFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="sharpFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="å³°" align="center">
                      <el-table-column
@@ -92,12 +71,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="peakFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="peakFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="å¹³" align="center">
                      <el-table-column
@@ -107,12 +81,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="flatFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="flatFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="è°·" align="center">
                      <el-table-column
@@ -122,12 +91,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="valleyFee"
                        label="电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="valleyFee" label="电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <el-table-column label="合计" align="center">
                      <el-table-column
@@ -137,12 +101,7 @@
                        show-overflow-tooltip
                        width="120"
                      />
                      <el-table-column
                        prop="totalFee"
                        label="总电费(元)"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column prop="totalFee" label="总电费(元)" align="center" show-overflow-tooltip />
                    </el-table-column>
                    <!-- <el-table-column label="操作" align="center">
                    <template #default="scope">
@@ -159,84 +118,27 @@
        </div>
      </div>
    </div>
    <el-dialog
      v-model="timeSharingDialogTableVisible"
      title="查看分时统计详情"
      width="1300"
    >
    <el-dialog v-model="timeSharingDialogTableVisible" title="查看分时统计详情" width="1300">
      <div class="table-box">
        <el-table :data="viewTimeSharingList" style="width: 100%" height="420">
          <el-table-column
            label="时间"
            align="center"
            show-overflow-tooltip
            width="200"
          >
          <el-table-column label="时间" align="center" show-overflow-tooltip width="200">
            <template #default="scope"> {{ scope.row.time }}时 </template>
          </el-table-column>
          <el-table-column label="尖" align="center">
            <el-table-column
              prop="sharpPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="sharpFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="sharpPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="sharpFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="å³°" align="center">
            <el-table-column
              prop="peakPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="peakFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="peakPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="peakFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="å¹³" align="center">
            <el-table-column
              prop="flatPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="flatFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="flatPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="flatFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="è°·" align="center">
            <el-table-column
              prop="valleyPower"
              label="耗电量(kWh)"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="valleyFee"
              label="电费(元)"
              align="center"
              show-overflow-tooltip
              width="90"
            />
            <el-table-column prop="valleyPower" label="耗电量(kWh)" align="center" show-overflow-tooltip width="120" />
            <el-table-column prop="valleyFee" label="电费(元)" align="center" show-overflow-tooltip width="90" />
          </el-table-column>
          <el-table-column label="合计" align="center">
            <el-table-column
@@ -247,38 +149,16 @@
              width="120"
            >
              <template #default="scope">
                {{
                  scope.row.sharpPower +
                  scope.row.peakPower +
                  scope.row.flatPower +
                  scope.row.valleyPower
                }}
                {{ scope.row.sharpPower + scope.row.peakPower + scope.row.flatPower + scope.row.valleyPower }}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalCost"
              label="总电费(元)"
              align="center"
              show-overflow-tooltip
              width="100"
            >
            <el-table-column prop="totalCost" label="总电费(元)" align="center" show-overflow-tooltip width="100">
              <template #default="scope">
                {{
                  scope.row.sharpFee +
                  scope.row.peakFee +
                  scope.row.flatFee +
                  scope.row.valleyFee
                }}
                {{ scope.row.sharpFee + scope.row.peakFee + scope.row.flatFee + scope.row.valleyFee }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="nodeName"
            label="用能单元"
            align="center"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column prop="nodeName" label="用能单元" align="center" show-overflow-tooltip width="200" />
        </el-table>
      </div>
    </el-dialog>
@@ -286,23 +166,23 @@
</template>

<script setup name="timeSharing">
import { listTimeSharing } from "@/api/peakValley/timeSharing";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listTimeSharing } from "@/api/peakValley/timeSharing"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const loading = ref(false);
const timeSharingList = ref([]);
const timeSharingDialogTableVisible = ref(false);
const viewTimeSharingList = ref([]);
const nodeOptions = ref(undefined);
)
const loading = ref(false)
const timeSharingList = ref([])
const timeSharingDialogTableVisible = ref(false)
const viewTimeSharingList = ref([])
const nodeOptions = ref(undefined)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -311,52 +191,52 @@
    queryTime: null,
  },
  query: { ...useRoute().query },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** é€šè¿‡æ¡ä»¶è¿‡æ»¤èŠ‚点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  handleQuery()
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷分时统计-列表
function getList() {
  loading.value = true;
  loading.value = true
  listTimeSharing(
    proxy.addDateRange({
      ...queryParams.value,
      ...query.value,
    })
  ).then((res) => {
    loading.value = false;
    loading.value = false
    if (!!res.code && res.code == 200) {
      // åœ¨åˆå§‹åŒ–之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
        echarts.dispose(document.getElementById("Chart1"));
        echarts.dispose(document.getElementById("Chart1"))
      }
      if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
        echarts.dispose(document.getElementById("Chart2"));
        echarts.dispose(document.getElementById("Chart2"))
      }
      const myChart1 = echarts.init(document.getElementById("Chart1"));
      const myChart2 = echarts.init(document.getElementById("Chart2"));
      const myChart1 = echarts.init(document.getElementById("Chart1"))
      const myChart2 = echarts.init(document.getElementById("Chart2"))
      if (!!res.data.lineChat) {
        let xdata = [];
        let ytip = [];
        let ypeak = [];
        let yflat = [];
        let ytrough = [];
        let xdata = []
        let ytip = []
        let ypeak = []
        let yflat = []
        let ytrough = []
        res.data.lineChat.map((item) => {
          xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "时");
          ytip.push(!!item.ytip ? item.ytip : 0);
          ypeak.push(!!item.ypeak ? item.ypeak : 0);
          yflat.push(!!item.yflat ? item.yflat : 0);
          ytrough.push(!!item.ytrough ? item.ytrough : 0);
        });
          xdata.push(Number(item.xdata.slice(-8).substring(0, 2)) + "时")
          ytip.push(!!item.ytip ? item.ytip : 0)
          ypeak.push(!!item.ypeak ? item.ypeak : 0)
          yflat.push(!!item.yflat ? item.yflat : 0)
          ytrough.push(!!item.ytrough ? item.ytrough : 0)
        })
        myChart1.setOption({
          color: ["#f52528", "#ff6200", "#ffce0c", "#78e801"],
          grid: {
@@ -378,8 +258,7 @@
            itemHeight: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
            // data: ['尖', 'å³°', 'å¹³', 'è°·']
          },
@@ -388,10 +267,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -404,8 +280,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -416,8 +291,7 @@
            name: "耗电量(KWH)",
            type: "value",
            nameTextStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [0, 0, 5, 0],
            },
@@ -428,10 +302,7 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -441,8 +312,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              //   formatter: '{value} ml'
            },
@@ -451,33 +321,33 @@
            {
              name: "尖", // ytip
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ytip,
            },
            {
              name: "å³°", // ypeak
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ypeak,
            },
            {
              name: "å¹³", // yflat
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: yflat,
            },
            {
              name: "è°·", // ytrough
              type: "bar",
              barWidth: "27",
              barWidth: "12",
              stack: "total",
              data: ytrough,
            },
          ],
        });
        })
      }
      if (!!res.data.pieChat) {
        myChart2.setOption({
@@ -492,8 +362,7 @@
            itemGap: 10,
            // right: 0,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          series: [
@@ -505,70 +374,58 @@
              label: {
                overflow: "none",
                formatter: "{b} {c}%  ",
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
              data: [
                {
                  value: !!res.data.pieChat.tip
                    ? Number(res.data.pieChat.tip)
                    : 0,
                  value: !!res.data.pieChat.tip ? Number(res.data.pieChat.tip) : 0,
                  name: "尖",
                },
                {
                  value: !!res.data.pieChat.peak
                    ? Number(res.data.pieChat.peak)
                    : 0,
                  value: !!res.data.pieChat.peak ? Number(res.data.pieChat.peak) : 0,
                  name: "å³°",
                },
                {
                  value: !!res.data.pieChat.flat
                    ? Number(res.data.pieChat.flat)
                    : 0,
                  value: !!res.data.pieChat.flat ? Number(res.data.pieChat.flat) : 0,
                  name: "å¹³",
                },
                {
                  value: !!res.data.pieChat.trough
                    ? Number(res.data.pieChat.trough)
                    : 0,
                  value: !!res.data.pieChat.trough ? Number(res.data.pieChat.trough) : 0,
                  name: "è°·",
                },
              ],
            },
          ],
        });
        })
      }
      if (!!res.data.dataList) {
        timeSharingList.value = !!res.data.dataList ? res.data.dataList : [];
        timeSharingList.value = !!res.data.dataList ? res.data.dataList : []
      }
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart2.resize();
          myChart1.resize()
          myChart2.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷分时统计-查看
function handleView(row) {
  queryParams.value.key = row.timeStr;
  timeSharingDialogTableVisible.value = true;
  viewTimeSharingList.value = [row];
  queryParams.value.key = row.timeStr
  timeSharingDialogTableVisible.value = true
  viewTimeSharingList.value = [row]
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷分时统计-搜索
function handleQuery() {
  getList();
  getList()
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷分时统计-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  (queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")),
    handleQuery();
  proxy.resetForm("queryRef")
  ;(queryParams.value.queryTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")), handleQuery()
}
// å³°å¹³è°·èƒ½è€—分析-峰平谷分时统计-导出
function handleExport() {
@@ -579,7 +436,7 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}_峰平谷分时统计_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/powerquality/load/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,402 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-负荷分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="期间" prop="timeType">
                  <el-select
                    v-model="queryParams.timeType"
                    placeholder="期间"
                    clearable
                    style="width: 120px"
                    @change="handleTimeType"
                  >
                    <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="dataTime">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select v-model="queryParams.meterId" placeholder="选择电表" clearable style="width: 200px">
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>
            <div class="display-buttons">
              <div class="display-btn" @click="activeKey = 1" :class="{ 'active-display-btn': activeKey === 1 }">
                å›¾å½¢
              </div>
              <div class="display-btn" @click="activeKey = 2" :class="{ 'active-display-btn': activeKey === 2 }">
                æ•°æ®
              </div>
            </div>
            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <div style="padding: 16px">
                <el-descriptions title="" size="large" border :column="2">
                  <el-descriptions-item label="最大负荷">
                    {{ detailData.max || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="发生时间">
                    {{ detailData.maxTime || "" }}
                  </el-descriptions-item>

                  <el-descriptions-item label="最小负荷">
                    {{ detailData.min || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="发生时间">
                    {{ detailData.minTime || "--" }}
                  </el-descriptions-item>

                  <el-descriptions-item label="平均负荷">
                    {{ detailData.avg || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="负荷率">
                    {{ detailData.rate || "" }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div style="margin-top: 16px" v-show="activeKey === 2">
              <div class="" style="padding: 0 16px">
                <el-table :data="tableData" v-loading="loading" height="calc(100vh - 400px)">
                  <el-table-column label="时间" prop="timeCode" align="center" />
                  <el-table-column label="电表名称" prop="name" align="center" />
                  <el-table-column v-if="queryParams.timeType == 'DAY'" label="负荷" prop="value" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="最大负荷" prop="max" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="最小负荷" prop="min" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="平均负荷" prop="avg" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="负荷率(%)" prop="rate" align="center" />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { loadAnalysisDetail, listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeKey = ref(1)
const loading = ref(false)
const tableData = ref([])
const detailData = ref({})
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  setTimeout(() => {
    handleTimeType(period.value[0].value)
  }, 200)
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}
const LineChartRef = ref()
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  loadAnalysisDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        tableData.value = res.data.itemList
        detailData.value = res.data.detail
        let itemList = res.data.itemList
        if (queryParams.value.timeType == "DAY") {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时"
            }),
            series: [
              {
                name: "负荷值",
                data: itemList.map((item) => {
                  return item.value
                }),
              },
            ],
          }
        } else {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCodeChart
            }),
            series: [
              {
                name: "平均负荷",
                data: itemList.map((item) => {
                  return item.avg
                }),
              },
              {
                name: "最大负荷",
                data: itemList.map((item) => {
                  return item.max
                }),
              },
              {
                name: "最小负荷",
                data: itemList.map((item) => {
                  return item.min
                }),
              },
            ],
          }
        }
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/powerquality/power/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,331 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-功率因数分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="时间" prop="dataTime">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select v-model="queryParams.meterId" placeholder="选择电表" clearable style="width: 200px">
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>

            <div class="chart-box" v-loading="loading">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <div style="padding: 16px">
                <el-table :data="tableData" v-loading="loading">
                  <el-table-column label="功率因数" prop="title" align="center" />
                  <el-table-column label="最大值" prop="max" align="center" />
                  <el-table-column label="最小值" prop="min" align="center" />
                  <el-table-column label="平均值" prop="avg" align="center" />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { powerFactorAnalysisDetail } from "@/api/powerquality/electric-power-factor/api.js"
import { listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const loading = ref(false)
const tableData = ref([])
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: "DAY",
    dataTime: proxy.dayjs(new Date()).format("YYYY-MM-DD"),
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}

const LineChartRef = ref()
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  powerFactorAnalysisDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        let detailData = res.data.detail
        tableData.value = [
          {
            title: "发生值",
            max: detailData.max,
            min: detailData.min,
            avg: detailData.avg,
          },
          {
            title: "发生时间",
            max: detailData.maxTime,
            min: detailData.minTime,
            avg: "--",
          },
        ]
        detailData.value = res.data.detail
        let itemList = res.data.itemList
        lineChartData.value = {
          title: "功率因数分析",
          xAxis: itemList.map((item) => {
            return item.timeCode.slice(0, 2) + "时"
          }),
          series: [
            {
              name: "功率因数",
              data: itemList.map((item) => {
                return item.value
              }),
            },
          ],
        }
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/powerquality/threephase/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,504 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-三相不平衡分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="期间" prop="timeType">
                  <el-select
                    v-model="queryParams.timeType"
                    placeholder="期间"
                    clearable
                    style="width: 120px"
                    @change="handleTimeType"
                  >
                    <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select
                    v-model="queryParams.meterId"
                    placeholder="选择电表"
                    clearable
                    style="width: 200px"
                    @change="handleTimeType"
                  >
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>

            <div style="padding: 0 16px">
              <el-tabs v-model="activeTabKey" type="card">
                <el-tab-pane label="电压不平衡" name="1"> </el-tab-pane>
                <el-tab-pane label="电流不平衡" name="2"> </el-tab-pane>
              </el-tabs>
              <div class="display-buttons">
                <div class="display-btn" @click="switchBtnType(1)" :class="{ 'active-display-btn': activeKey === 1 }">
                  å›¾å½¢
                </div>
                <div class="display-btn" @click="switchBtnType(2)" :class="{ 'active-display-btn': activeKey === 2 }">
                  æ•°æ®
                </div>
              </div>
            </div>

            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <el-table :data="tableData1" v-loading="loading">
                <el-table-column label="类型" prop="type" align="center" />
                <el-table-column label="三项不平衡极值" prop="value" align="center" />
                <el-table-column label="发生时间" prop="time" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="A项电压(V)" prop="valueA" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="B项电压(V)" prop="valueB" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="C项电压(V)" prop="valueC" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="A项电流(A)" prop="valueA" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="B项电流(A)" prop="valueB" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="C项电流(A)" prop="valueC" align="center" />
              </el-table>
            </div>
            <div style="margin-top: 16px" v-show="activeKey === 2">
              <div class="" style="padding: 0 16px">
                <el-table :data="tableData2" v-loading="loading" height="calc(100vh - 400px)">
                  <el-table-column label="时间" prop="timeCode" align="center" />
                  <el-table-column label="电表名称" prop="name" align="center" />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="A项电压(V)"
                    prop="valueA"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="B项电压(V)"
                    prop="valueB"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="C项电压(V)"
                    prop="valueC"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="A项电流(A)"
                    prop="valueA"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="B项电流(A)"
                    prop="valueB"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="C项电流(A)"
                    prop="valueC"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType !== 'DAY'"
                    label="最大值(V)"
                    prop="max"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType !== 'DAY'"
                    label="最小值(V)"
                    prop="min"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType !== 'DAY'"
                    label="最大值(A)"
                    prop="max"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType !== 'DAY'"
                    label="最小值(A)"
                    prop="min"
                    align="center"
                  />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { threePhaseUnbalanceAnalysisDetail } from "@/api/powerquality/electricThreePhase/api.js"
import { listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeTabKey = ref("1")
const activeKey = ref(1)
const activeKeyA = ref(1)
const loading = ref(false)
const tableData1 = ref([])
const tableData2 = ref([])
const detailData = ref({})
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value)
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}

function switchBtnType(e) {
  activeKey.value = e
  if (e === 1) {
    getList()
  }
}
// åˆ—表
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
    requestType: activeTabKey.value == 1 ? 0 : 1,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  threePhaseUnbalanceAnalysisDetail(params)
    .then((res) => {
      if (!!res.code && res.code == 200) {
        // detailData.value = res.data.detail
        loading.value = false
        let itemList = res.data.itemList || []
        let detail = res.data.detail || {}
        if (detail) {
          tableData1.value = [
            {
              type: "最大值",
              value: detail.max || "--",
              time: detail.maxTime,
              valueA: detail.valueMaxA,
              valueB: detail.valueMaxB,
              valueC: detail.valueMaxC,
            },
            {
              type: "最小值",
              value: detail.min,
              time: detail.minTime,
              valueA: detail.valueMinA,
              valueB: detail.valueMinB,
              valueC: detail.valueMinC,
            },
          ]
        }

        let tableDataWithMeterList = itemList
        tableData2.value =
          tableDataWithMeterList.map((item) => {
            // item.timeCode = this.formatTime(item.timeCode)
            return item
          }) || []

        // chart
        let chartData = {}
        chartData.title = "三相不平衡分析"
        if (queryParams.value.timeType !== "DAY") {
          chartData = {
            title: "三相不平衡分析",
            xAxis: itemList.map((item) => {
              return item.timeCodeChart
            }),
            series: [
              {
                name: "最小值",
                data: itemList.map((item) => {
                  return item.min === "--" || !item.min ? null : Number(item.min)
                }),
              },
              {
                name: "最大值",
                data: itemList.map((item) => {
                  return item.max === "--" || !item.max ? null : Number(item.max)
                }),
              },
            ],
          }
        } else {
          chartData = {
            title: "三相不平衡分析",
            xAxis: itemList.map((item) => {
              return item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时"
            }),
            series: [
              {
                name: "A相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueA === "--" || !item.valueA ? null : Number(item.valueA)
                }),
              },
              {
                name: "B相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueB === "--" || !item.valueB ? null : Number(item.valueB)
                }),
              },
              {
                name: "C相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueC === "--" || !item.valueC ? null : Number(item.valueC)
                }),
              },
            ],
          }
        }
        lineChartData.value = chartData
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/realtimemonitor/realtimemonitor/components/chart-modal.vue

@@ -4,19 +4,20 @@
      <div class="page">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
          <el-form-item label="日期筛选" prop="dataTime">
            <el-date-picker v-model="queryParams.dataTime" value-format="YYYY-MM-DD 00:00:00" type="date"
              placeholder="日期筛选" style="width: 100%" />
            <el-date-picker
              v-model="queryParams.dataTime"
              value-format="YYYY-MM-DD 00:00:00"
              type="date"
              placeholder="日期筛选"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">
              æœç´¢
            </el-button>
            <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Download" @click="handleExport">
              å¯¼å‡º
            </el-button>
            <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
          </el-form-item>
        </el-form>
        <div class="chart-box" v-loading="loading">
@@ -28,173 +29,148 @@
</template>

<script setup name="chartModal">
import * as echarts from "echarts";
import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor";
const { proxy } = getCurrentInstance();
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
const dialogTableVisible = ref(false);
import * as echarts from "echarts"
import { getEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"
const { proxy } = getCurrentInstance()
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const dialogTableVisible = ref(false)
const data = reactive({
  title: null,
  queryParams: {
    tagCode: null,
    dataTime: null,
  },
});
const { queryParams, title } = toRefs(data);
const loading = ref(false);
defineExpose({ handleOpen });
})
const { queryParams, title } = toRefs(data)
const loading = ref(false)
defineExpose({ handleOpen })
function handleOpen(row) {
  title.value = row.name;
  dialogTableVisible.value = true;
  queryParams.value.nodeName = row.nodeName;
  queryParams.value.tagCode = row.indexCode;
  queryParams.value.unit = row.unit;
  queryParams.value.name = row.name;
  queryParams.value.dataTime = proxy
    .dayjs(new Date())
    .format("YYYY-MM-DD 00:00:00");
  getList();
  title.value = row.name
  dialogTableVisible.value = true
  queryParams.value.nodeName = row.nodeName
  queryParams.value.tagCode = row.indexCode
  queryParams.value.unit = row.unit
  queryParams.value.name = row.name
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00")
  getList()
}
function handleClose() {
  dialogTableVisible.value = false;
  dialogTableVisible.value = false
}
// èƒ½æºå®žæ—¶ç›‘控-能源实时监控-列表
function getList() {
  loading.value = true;
  getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then(
    (res) => {
      const myChart1 = echarts.init(document.getElementById("Chart1"));
      if (!!res.code && res.code == 200) {
        if (!!res.data) {
          let xdata = [];
          let ydata = [];
          res.data.map((item) => {
            xdata.push(proxy.dayjs(item.name).format("HH:mm"));
            ydata.push(!!item.value ? item.value : 0);
          });
          loading.value = false;
          myChart1.setOption({
            color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
            grid: {
              top: "45",
              left: "6%",
              right: "5%",
              bottom: "10",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            xAxis: {
              type: "category",
              axisLine: {
                show: true,
                lineStyle: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                },
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                fontSize: 14,
                padding: [5, 0, 0, 0],
                //   formatter: '{value} ml'
              },
              data: xdata,
            },
            yAxis: {
              type: "value",
              name:
                queryParams.value.name +
                (!!queryParams.value.unit
                  ? "(" + queryParams.value.unit + ")"
                  : ""),
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                },
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                fontSize: 14,
              },
            },
            series: [
              {
                name: title.value + "历史数据查询", // ytip
                type: "line",
                barWidth: "27",
                stack: "total",
                data: ydata,
              },
            ],
          });
        }
        window.addEventListener(
          "resize",
          () => {
            myChart1.resize();
  loading.value = true
  getEnergyRealTimeMonitor(proxy.addDateRange(queryParams.value)).then((res) => {
    const myChart1 = echarts.init(document.getElementById("Chart1"))
    if (!!res.code && res.code == 200) {
      if (!!res.data) {
        let xdata = []
        let ydata = []
        res.data.map((item) => {
          xdata.push(proxy.dayjs(item.name).format("HH:mm"))
          ydata.push(!!item.value ? item.value : 0)
        })
        loading.value = false
        myChart1.setOption({
          color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
          grid: {
            top: "45",
            left: "6%",
            right: "5%",
            bottom: "10",
            containLabel: true,
          },
          { passive: true }
        );
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
            },
            data: xdata,
          },
          yAxis: {
            type: "value",
            name: queryParams.value.name + (!!queryParams.value.unit ? "(" + queryParams.value.unit + ")" : ""),
            nameTextStyle: {
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [0, 0, 5, 0],
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
            },
          },
          series: [
            {
              name: title.value + "历史数据查询", // ytip
              type: "line",
              barWidth: "12",
              stack: "total",
              data: ydata,
            },
          ],
        })
      }
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize()
        },
        { passive: true }
      )
    }
  );
  })
}
// èƒ½æºå®žæ—¶ç›‘控-能源实时监控-搜索
function handleQuery() {
  getList();
  getList()
}
// èƒ½æºå®žæ—¶ç›‘控-能源实时监控-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  (queryParams.value.dataTime = proxy
    .dayjs(new Date())
    .format("YYYY-MM-DD 00:00:00")),
    handleNodeClick(nodeOptions.value[0]);
  proxy.resetForm("queryRef")
  ;(queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00")),
    handleNodeClick(nodeOptions.value[0])
}
// èƒ½æºå®žæ—¶ç›‘控-能源实时监控-导出
function handleExport() {
@@ -202,7 +178,7 @@
    "rtdb/realtimeTrend/export",
    queryParams.value,
    `${queryParams.value.nodeName}-${queryParams.value.name}_能源实时监控_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/svg/components/configure.vue

@@ -131,7 +131,7 @@
    form.value.svgType = "COLLECT"
    updateEquipmentfile(form.value).then((result) => {
      if (result.code === 200) {
        filePath.value = response.msg
        filePath.value = val[0].fullUrl
        tags.value = []
        getSvg()
      } else {
@@ -139,7 +139,7 @@
      }
    })
  } else {
    proxy.$modal.msgError(response.msg)
    proxy.$modal.msgError(result.msg)
  }
}