barWidth

ali

2025-02-10 8b421fb49a874f54e85f9cbf51c8bfa2f90d5c4c

barWidth

 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/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">