!62 综合能耗日月年 Merge pull request !62 from Alioo/develop_alioo

zhitan-cloud

2025-02-11 c504c2909042475731657b697076ed9ab9c25584

!62 综合能耗日月年
Merge pull request !62 from Alioo/develop_alioo

 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/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;
      }
    }
  }

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


 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,173 @@
<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()
  }
)

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/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/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)
  }
}