Merge remote-tracking branch 'origin/master'

baoshiwei

2025-04-19 5d36e1f987ef21e44ded2e8a1d06c28094ec1e76

 zhitan-vue/src/views/index.vue

@@ -1,133 +1,103 @@
<template>
  <div class="page">
    <CardHeader
      :showBtn="true"
      :active="'0'"
      :period="period"
      @handleClick="handleTimeType"
    >
      <span>
  <div class="page" style="padding-left: 8px; padding-top: 8px">
    <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType">
      <span class="card-header-title">
        全厂能耗统计
        <el-button @click="dialogVisible = true" v-if="list.length > 1">
          查看更多
        </el-button>
        <el-button @click="dialogVisible = true" v-if="list.length > 1" type="primary" size="small" class="header-more-btn"> 查看更多 </el-button>
      </span>
    </CardHeader>
    <template
      v-for="(row, rowIndex) in list"
      :key="rowIndex"
      v-loading="loading02"
    >
      <div
        class="card-list"
        v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"
      >
    <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02">
      <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0">
        <template v-for="(item, index) in row" :key="index">
          <div
            class="card-list-item"
            :style="{
              backgroundImage: 'url(' + bgList[index].bg + ')',
            }"
          >
            <div class="item-top">
              <div
                class="top-icon"
                :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }"
          <div class="card-list-item">
            <div class="item-left">
              <div class="top-icon" 
                :style="{ 
                  backgroundImage: 'url(' + bgList[index].icon + ')',
                  backgroundColor: bgList[index].iconBg,
                  width: '73px',
                  height: '73px',
                  backgroundSize: '40px'
                }" 
              />
            </div>
            <div class="item-right">
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
                </div>
                <div class="right-value">
                  <span> {{ item.count }}</span>
                  <span class="unit">{{ item.energyUnit }}</span>
                  <span>{{ item.count }}</span>
                </div>
              </div>
            </div>
            <div class="item-bottom">
              <div class="bottom-left">
                <span>
                  同比: {{ Math.abs(item.tongbi) }}
                  <el-icon
                    :color="
                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                    "
                  >
                    <Top v-if="item.tongbi > 0" />
                    <Bottom v-if="item.tongbi < 0" />
                  </el-icon>
                </span>
              </div>
              <div class="bottom-right">
                <span
                  >环比: {{ Math.abs(item.huanbi) }}
                  <el-icon
                    :color="
                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                    "
                  >
                    <Top v-if="item.huanbi > 0" />
                    <Bottom v-if="item.huanbi < 0" />
                  </el-icon>
                </span>
              <div class="item-bottom">
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi).toFixed(1) }}
                    <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
                  </span>
                </div>
                <div class="bottom-right">
                  <span>
                    环比: {{ Math.abs(item.huanbi).toFixed(1) }}
                    <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div
        class="card-list"
        v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"
      >
        <template
          v-for="(item, index) in row"
          :key="index"
          v-show="rowIndex == 0"
        >
          <div
            class="card-list-item"
          >
            <div class="item-top">
              <div
                class="top-icon"
                :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }"
      <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0">
        <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
          <div class="card-list-item">
            <div class="item-left">
              <div class="top-icon" 
                :style="{ 
                  backgroundImage: 'url(' + bgList[index].icon2 + ')',
                  backgroundColor: bgList[index].iconBg,
                  width: '73px',
                  height: '73px',
                  backgroundSize: '40px'
                }" 
              />
            </div>
            <div class="item-right">
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
                </div>
                <div class="right-value">
                  <span>{{ item.count }}</span>
                  <span class="unit">{{ item.energyUnit }}</span>
                </div>
              </div>
            </div>
            <div class="item-bottom">
              <div class="bottom-left">
                <span>
                  同比: {{ Math.abs(item.tongbi) }}
                  <el-icon
                    :color="
                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                    "
                  >
                    <Top v-if="item.tongbi > 0" />
                    <Bottom v-if="item.tongbi < 0" />
                  </el-icon>
                </span>
              </div>
              <div class="bottom-right">
                <span
                  >环比: {{ Math.abs(item.huanbi) }}
                  <el-icon
                    :color="
                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                    "
                  >
                    <Top v-if="item.huanbi > 0" />
                    <Bottom v-if="item.huanbi < 0" />
                  </el-icon>
                </span>
              <div class="item-bottom">
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi).toFixed(1) }}
                    <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
                  </span>
                </div>
                <div class="bottom-right">
                  <span>
                    环比: {{ Math.abs(item.huanbi).toFixed(1) }}
                    <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
@@ -140,17 +110,13 @@
      <el-row :gutter="9" style="margin-bottom: 27px">
        <el-col :span="12">
          <el-card>
            <CardHeader :period="period" @handleClick="handleTimeType">
              能耗趋势
            </CardHeader>
            <CardHeader :period="period" @handleClick="handleTimeType"> 能耗趋势 </CardHeader>
            <div id="Chart1" class="chart" v-loading="loading1" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <CardHeader :period="period" @handleClick="handleTimeType">
              全厂能耗占比
            </CardHeader>
            <CardHeader :period="period" @handleClick="handleTimeType"> 全厂能耗占比 </CardHeader>
            <div id="Chart2" class="chart" v-loading="loading02" />
          </el-card>
        </el-col>
@@ -158,13 +124,8 @@
      <el-row :gutter="9">
        <el-col :span="12">
          <el-card>
            <CardHeader
              :showBtn="true"
              :period="period"
              :active="'3'"
              @handleClick="handleTimeType"
            >
              厂区能耗排名TOP{{ listEnergyConsumptionRankingLength }}
            <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
              厂区能耗排名TOP{{ listEnergyConsumptionRankingLength || "" }}
            </CardHeader>
            <div class="top-header">
              <div class="header-left">
@@ -173,22 +134,12 @@
              </div>
              <div class="header-right">能耗量(tce)</div>
            </div>
            <div
              id="Chart3"
              class="chart"
              v-loading="loading3"
              style="height: 254px"
            />
            <div id="Chart3" class="chart" v-loading="loading3" style="height: 254px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <CardHeader
              :showBtn="true"
              :period="period"
              :active="'4'"
              @handleClick="handleTimeType"
            >
            <CardHeader :showBtn="true" :period="period" :active="'4'" @handleClick="handleTimeType">
              尖峰平谷占比
            </CardHeader>
            <div id="Chart4" class="chart" v-loading="loading4" />
@@ -196,80 +147,71 @@
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="dialogVisible" title="查看全厂能耗统计" width="80%" v-if='dialogVisible'>
    <el-dialog v-model="dialogVisible" title="查看全厂能耗统计" width="90%" v-if="dialogVisible">
      <template v-for="(row, rowIndex) in list" :key="rowIndex">
        <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'">
          <template v-for="(item, index) in row" :key="index">
            <div
              class="card-list-item"
              :style="{
                backgroundImage: 'url(' + bgList[index].bg + ')',
              }"
            >
              <div class="item-top">
                <div
                  class="top-icon"
            <div class="card-list-item">
              <div class="item-left">
                <div class="top-icon"
                  :style="{
                    backgroundImage: 'url(' + bgList[index].icon + ')',
                    backgroundColor: bgList[index].iconBg,
                    width: '73px',
                    height: '73px',
                    backgroundSize: '40px'
                  }"
                />
              </div>
              <div class="item-right">
                <div class="top-right">
                  <div class="right-name">
                    {{ item.energyName }}
                    <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
                  </div>
                  <div class="right-value">
                    <span> {{ item.count }}</span>
                    <span class="unit">{{ item.energyUnit }}</span>
                  </div>
                </div>
              </div>
              <div class="item-bottom">
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi) }}
                    <el-icon
                      :color="
                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                      "
                    >
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
                  </span>
                </div>
                <div class="bottom-right">
                  <span
                    >环比: {{ Math.abs(item.huanbi) }}
                    <el-icon
                      :color="
                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                      "
                    >
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
                  </span>
                <div class="item-bottom">
                  <div class="bottom-left">
                    <span>
                      同比: {{ Math.abs(item.tongbi).toFixed(1) }}
                      <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
                        <Top v-if="item.tongbi > 0" />
                        <Bottom v-if="item.tongbi < 0" />
                      </el-icon>
                    </span>
                  </div>
                  <div class="bottom-right">
                    <span>
                      环比: {{ Math.abs(item.huanbi).toFixed(1) }}
                      <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
                        <Top v-if="item.huanbi > 0" />
                        <Bottom v-if="item.huanbi < 0" />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark'">
          <template
            v-for="(item, index) in row"
            :key="index"
            v-show="rowIndex == 0"
          >
            <div
              class="card-list-item"
            >
              <div class="item-top">
                <div
                  class="top-icon"
          <template v-for="(item, index) in row" :key="index">
            <div class="card-list-item">
              <div class="item-left">
                <div class="top-icon"
                  :style="{
                    backgroundImage: 'url(' + bgList[index].icon2 + ')',
                    backgroundColor: bgList[index].iconBg,
                    width: '73px',
                    height: '73px',
                    backgroundSize: '40px'
                  }"
                />
              </div>
              <div class="item-right">
                <div class="top-right">
                  <div class="right-name">
                    {{ item.energyName }}
@@ -279,37 +221,28 @@
                    <span class="unit">{{ item.energyUnit }}</span>
                  </div>
                </div>
              </div>
              <div class="item-bottom">
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi) }}
                    <el-icon
                      :color="
                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                      "
                    >
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
                  </span>
                </div>
                <div class="bottom-right">
                  <span
                    >环比: {{ Math.abs(item.huanbi) }}
                    <el-icon
                      :color="
                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                      "
                    >
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
                  </span>
                <div class="item-bottom">
                  <div class="bottom-left">
                    <span>
                      同比: {{ Math.abs(item.tongbi).toFixed(1) }}
                      <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
                        <Top v-if="item.tongbi > 0" />
                        <Bottom v-if="item.tongbi < 0" />
                      </el-icon>
                    </span>
                  </div>
                  <div class="bottom-right">
                    <span>
                      环比: {{ Math.abs(item.huanbi).toFixed(1) }}
                      <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
                        <Top v-if="item.huanbi > 0" />
                        <Bottom v-if="item.huanbi < 0" />
                      </el-icon>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </template>
        </div>
      </template>
@@ -317,77 +250,82 @@
  </div>
</template>
<script setup name="Index">
import * as echarts from "echarts";
import CardHeader from "@/components/CardHeader/CardHeader.vue";
import * as echarts from "echarts"
import CardHeader from "@/components/CardHeader/CardHeader.vue"
import {
  listEnergyConsumptionSummation,
  listEnergyConsumptionTrend,
  listEnergyConsumptionRanking,
  listPeakValley,
} from "@/api/home";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
} from "@/api/home"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getListEnergyConsumptionSummation();
    getListEnergyConsumptionTrend();
    getListEnergyConsumptionRanking();
    getListPeakValley();
    getListEnergyConsumptionSummation()
    getListEnergyConsumptionTrend()
    getListEnergyConsumptionRanking()
    getListPeakValley()
  }
);
import index_card_1 from "@/assets/images/home/index-card-1.png";
import index_card_2 from "@/assets/images/home/index-card-2.png";
import index_card_3 from "@/assets/images/home/index-card-3.png";
import index_card_4 from "@/assets/images/home/index-card-4.png";
import index_card_5 from "@/assets/images/home/index-card-5.png";
import card_icon_1 from "@/assets/images/home/card-icon-1.png";
import card_icon_2 from "@/assets/images/home/card-icon-2.png";
import card_icon_3 from "@/assets/images/home/card-icon-3.png";
import card_icon_4 from "@/assets/images/home/card-icon-4.png";
import card_icon_5 from "@/assets/images/home/card-icon-5.png";
import card_icon2_1 from "@/assets/images/home/card-icon2-1.png";
import card_icon2_2 from "@/assets/images/home/card-icon2-2.png";
import card_icon2_3 from "@/assets/images/home/card-icon2-3.png";
import card_icon2_4 from "@/assets/images/home/card-icon2-4.png";
import card_icon2_5 from "@/assets/images/home/card-icon2-5.png";
import { fa } from "element-plus/es/locales.mjs";
)
import index_card_1 from "@/assets/images/home/index-card-1.png"
import index_card_2 from "@/assets/images/home/index-card-2.png"
import index_card_3 from "@/assets/images/home/index-card-3.png"
import index_card_4 from "@/assets/images/home/index-card-4.png"
import index_card_5 from "@/assets/images/home/index-card-5.png"
import card_icon_1 from "@/assets/images/2.png"
import card_icon_2 from "@/assets/images/3.png"
import card_icon_3 from "@/assets/images/5.png"
import card_icon_4 from "@/assets/images/6.png"
import card_icon_5 from "@/assets/images/7.png"
import card_icon2_1 from "@/assets/images/2.png"
import card_icon2_2 from "@/assets/images/3.png"
import card_icon2_3 from "@/assets/images/5.png"
import card_icon2_4 from "@/assets/images/6.png"
import card_icon2_5 from "@/assets/images/7.png"
import { fa } from "element-plus/es/locales.mjs"
const bgList = ref([
  {
    bg: index_card_1,
    icon: card_icon_1,
    icon2: card_icon2_1,
    iconBg: "#3F7EE8"
  },
  {
    bg: index_card_2,
    icon: card_icon_2,
    icon2: card_icon2_2,
    iconBg: "#FFA024"
  },
  {
    bg: index_card_3,
    icon: card_icon_3,
    icon2: card_icon2_3,
    iconBg: "#FFCC00"
  },
  {
    bg: index_card_4,
    icon: card_icon_4,
    icon2: card_icon2_4,
    iconBg: "#3CC8D9"
  },
  {
    bg: index_card_5,
    icon: card_icon_5,
    icon2: card_icon2_5,
    iconBg: "#8833FF"
  },
]);
const list = ref([[{}, {}, {}, {}, {}]]);
const listEnergyConsumptionRankingLength = ref(0);
const dialogVisible = ref(false);
const loading02 = ref(false);
const loading1 = ref(false);
const loading3 = ref(false);
const loading4 = ref(false);
])
const list = ref([[{}, {}, {}, {}, {}]])
const listEnergyConsumptionRankingLength = ref(0)
const dialogVisible = ref(false)
const loading02 = ref(false)
const loading1 = ref(false)
const loading3 = ref(false)
const loading4 = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -395,54 +333,54 @@
    dataTime: null,
    nodeName: null,
  },
});
const { queryParams } = toRefs(data);
})
const { queryParams } = toRefs(data)
function handleTimeType(item, type) {
  queryParams.value.timeType = item;
  queryParams.value.type = type;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = item
  queryParams.value.type = type
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  if (type == 0) {
    getListEnergyConsumptionSummation();
    getListEnergyConsumptionTrend();
    getListEnergyConsumptionSummation()
    getListEnergyConsumptionTrend()
  } else if (type == 3) {
    getListEnergyConsumptionRanking();
    getListEnergyConsumptionRanking()
  } else if (type == 4) {
    getListPeakValley();
    getListPeakValley()
  }
}
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
let myChart4 = null;
let myChart1 = null
let myChart2 = null
let myChart3 = null
let myChart4 = null
onMounted(() => {
  myChart1 = echarts.init(document.getElementById("Chart1"));
  myChart2 = echarts.init(document.getElementById("Chart2"));
  myChart3 = echarts.init(document.getElementById("Chart3"));
  myChart4 = echarts.init(document.getElementById("Chart4"));
});
  myChart1 = echarts.init(document.getElementById("Chart1"))
  myChart2 = echarts.init(document.getElementById("Chart2"))
  myChart3 = echarts.init(document.getElementById("Chart3"))
  myChart4 = echarts.init(document.getElementById("Chart4"))
})
// 首页-全厂能耗统计/全厂能耗占比-列表
function getListEnergyConsumptionSummation() {
  loading02.value = true;
  list.value = [];
  loading02.value = true
  list.value = []
  listEnergyConsumptionSummation(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading02.value = false;
    loading02.value = false
    if (!!res.code && res.code == 200) {
      let total = 0;
      let seriesData = [];
      let total = 0
      let seriesData = []
      if (!!res.data && res.data.length > 0) {
        res.data.map((item, index) => {
          total += Number(item.tonCount);
          item.name = item.energyName;
          item.value = Number(item.tonCount).toFixed(2);
          total += Number(item.tonCount)
          item.name = item.energyName
          item.value = Number(item.tonCount).toFixed(2)
          if (index % 5 === 0) {
            list.value.push(res.data.slice(index, index + 5));
            list.value.push(res.data.slice(index, index + 5))
          }
        });
        seriesData = res.data;
        })
        seriesData = res.data
      }
      setTimeout(() => {
        myChart2.setOption({
@@ -465,46 +403,36 @@
            right: "5%",
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 60,
            itemGap: 16,
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              rich: {
                name: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                value: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                rate: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
              },
            },
            data: seriesData,
            formatter: (name) => {
              let target, percent, energyUnit;
              let target, percent, energyUnit
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  target = seriesData[i].value;
                  energyUnit = seriesData[i].energyUnit;
                  percent =
                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                  target = seriesData[i].value
                  energyUnit = seriesData[i].energyUnit
                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                }
              }
              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`;
              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`
            },
          },
          series: [
@@ -516,8 +444,7 @@
              label: {
                show: false,
                fontSize: 11,
                color:
                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              },
              labelLine: {
                show: false,
@@ -526,44 +453,40 @@
              data: seriesData,
            },
          ],
        });
      }, 100);
        })
      }, 100)
      window.addEventListener(
        "resize",
        () => {
          myChart2.resize();
          myChart2.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
// 首页-全厂能耗趋势-列表
function getListEnergyConsumptionTrend() {
  loading1.value = true;
  loading1.value = true
  listEnergyConsumptionTrend(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading1.value = false;
    loading1.value = false
    if (!!res.code && res.code == 200) {
      let xdata = [];
      let series = [];
      let xdata = []
      let series = []
      if (!!res.data.xdata) {
        res.data.xdata.map((item) => {
          xdata.push(
            proxy
              .dayjs(item)
              .format(
                queryParams.value.timeType == "YEAR"
                  ? "MM月"
                  : queryParams.value.timeType == "MONTH"
                  ? "DD日"
                  : "HH时"
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          );
        });
          )
        })
      }
      if (!!res.data.legend && !!res.data.ydata) {
        series = res.data.legend.map((item, index) => {
@@ -573,8 +496,8 @@
            stack: "total",
            barWidth: "16",
            data: !!res.data.ydata ? res.data.ydata[index] : [],
          };
        });
          }
        })
      }
      setTimeout(() => {
        myChart1.setOption({
@@ -590,13 +513,12 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          grid: {
            top: "45",
            left: "7%",
            left: "2%",
            right: "5%",
            bottom: "10",
            containLabel: true,
@@ -609,10 +531,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -625,8 +544,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'
@@ -638,10 +556,7 @@
              type: "value",
              name: "tce",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -652,10 +567,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -665,52 +577,47 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
          ],
          series,
        });
      }, 100);
        })
      }, 100)
    }
  });
  })
  window.addEventListener(
    "resize",
    () => {
      myChart1.resize();
      myChart1.resize()
    },
    { passive: true }
  );
  )
}
// 首页-科室能耗排名TOP-列表
function getListEnergyConsumptionRanking() {
  loading3.value = true;
  loading3.value = true
  let opt = {
    index: 0,
  };
  }
  listEnergyConsumptionRanking(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading3.value = false;
    let nodeName = [];
    let energyConsumption = [];
    let maxenergyConsumption = [];
    
    loading3.value = false
    let nodeName = []
    let energyConsumption = []
    let maxenergyConsumption = []

    if (!!res.data) {
      res.data.map((item, index) => {
        nodeName.push(item.nodeName);
        energyConsumption.push(
          !!item.energyConsumption ? item.energyConsumption : 0
        );
        maxenergyConsumption[index] = res.data[0].energyConsumption;
      });
      listEnergyConsumptionRankingLength.value = res.data.length;
        nodeName.push(item.nodeName)
        energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
        maxenergyConsumption[index] = res.data[0].energyConsumption
      })
      listEnergyConsumptionRankingLength.value = res.data.length
    }
    setTimeout(() => {
      myChart3.setOption({
@@ -727,7 +634,7 @@
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
            return params[0].name + " : " + params[0].value
          },
        },
        xAxis: {
@@ -749,38 +656,17 @@
            },
            axisLabel: {
              interval: 0,
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: 14,
              formatter: function (value, index) {
                if (index == 0) {
                  return (
                    "{idx0|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx0|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else if (index == 1) {
                  return (
                    "{idx1|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx1|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else if (index == 2) {
                  return (
                    "{idx2|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx2|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else {
                  return (
                    "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
                  );
                  return "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
                }
              },
              rich: {
@@ -822,8 +708,7 @@
            axisLine: "none",
            show: true,
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: "12",
            },
            data: energyConsumption,
@@ -863,48 +748,41 @@
            data: energyConsumption,
          },
        ],
      });
    }, 100);
      })
    }, 100)
    window.addEventListener(
      "resize",
      () => {
        myChart3.resize();
        myChart3.resize()
      },
      { passive: true }
    );
  });
    )
  })
}
// 首页-尖峰平谷占比-列表
function getListPeakValley() {
  loading4.value = true;
  loading4.value = true
  listPeakValley(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading4.value = false;
    loading4.value = false
    if (!!res.code && res.code == 200) {
      let total = 0;
      let seriesData = [];
      let total = 0
      let seriesData = []
      if (!!res.data && res.data.length > 0) {
        res.data.map((item, index) => {
          total += Number(item.count);
          total += Number(item.count)
          seriesData.push({
            name: item.timeName,
            value: Number(item.count).toFixed(2),
          });
        });
          })
        })
      }
      setTimeout(() => {
        myChart4.setOption({
          color: [
            "#8B33FF",
            "#00DBFF",
            "#002ADB",
            "#5C92F7",
            "#76D2F1",
            "#8FADF9",
          ],
          color: ["#8B33FF", "#00DBFF", "#002ADB", "#5C92F7", "#76D2F1", "#8FADF9"],
          grid: {
            top: "20%",
            left: "15%",
@@ -923,45 +801,35 @@
            right: "10%",
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 50,
            itemGap: 16,
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              rich: {
                name: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                value: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                rate: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
              },
            },
            data: seriesData,
            formatter: (name) => {
              let target, percent;
              let target, percent
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  target = seriesData[i].value;
                  percent =
                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                  target = seriesData[i].value
                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                }
              }
              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`;
              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`
            },
          },
          series: [
@@ -973,8 +841,7 @@
              avoidLabelOverlap: false,
              label: {
                fontSize: 11,
                color:
                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              },
              labelLine: {
                show: true,
@@ -999,24 +866,38 @@
              data: seriesData,
            },
          ],
        });
      }, 100);
        })
      }, 100)
      window.addEventListener(
        "resize",
        () => {
          myChart4.resize();
          myChart4.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
</script>
<style scoped lang="scss">
.card-header-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  
  .header-more-btn {
    margin-left: 12px;
    padding: 4px 10px;
    font-size: 12px;
    height: 28px;
  }
}

.themeDark {
  .page {
    padding: 20px;
    background: #120f2e;
    background: #05234A;

    .card-title {
      width: 132px;
@@ -1029,65 +910,145 @@
    .card-list {
      margin-top: 14px;
      display: flex;
      // justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;

      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 15px;
      
      &:after {
        content: "";
        flex: 0 0 0;
      }
      
      .card-list-item {
        width: 19%;
        margin-right: 1%;
        height: 157px;
        background-size: 100% 100%;
        width: 0;
        flex: 1 1 320px;
        max-width: 320px;
        height: 135px;
        background: rgba(242, 246, 250, 0.1);
        box-sizing: border-box;
        padding: 25px 18px 12px 16px;
        padding: 16px;
        color: #fff;

        .item-top {
          display: flex;

        border-radius: 9px;
        box-shadow: none;
        border: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        
        &:hover {
          background: rgba(242, 246, 250, 0.15);
        }
        
        .item-left {
          margin-right: 20px;
          
          .top-icon {
            width: 69px;
            height: 69px;
            background-size: 100% 100%;
            width: 73px;
            height: 73px;
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%;
          }

        }
        
        .item-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .top-right {
            margin-left: 16px;

            display: flex;
            flex-direction: column;
            
            .right-name {
              font-weight: bold;
              font-size: 16px;
              font-family: OPPOSans-Bold;
            }

            .right-value {
              font-weight: 800;
              font-size: 25px;
              margin-top: 10px;
              font-family: OPPOSans-Medium;

              font-weight: 400;
              font-size: 14px;
              font-family: OPPOSans-Regular;
              color: rgba(255, 255, 255, 0.65);
              letter-spacing: 0.5px;
              margin-bottom: 4px;
              
              .unit {
                margin-left: 5px;
                font-size: 16px;
                color: rgba(255, 255, 255, 0.65);
                margin-left: 4px;
                font-size: 12px;
                font-weight: normal;
              }
            }
            
            .right-value {
              font-weight: 500;
              font-size: 26px;
              margin-top: 6px;
              font-family: OPPOSans-Medium;
              color: #fff;
              line-height: 1.2;
              letter-spacing: 0.5px;
            }
          }
        }

        .item-bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 18px;
          font-family: OPPOSans, OPPOSans;
          font-weight: bold;
          font-size: 14px;
          
          .item-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: normal;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.2;
            
            .bottom-left, .bottom-right {
              display: flex;
              align-items: center;
              letter-spacing: 0.3px;
              
              :deep(.el-icon) {
                margin-left: 6px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .page-main {
      margin-top: 23px;
      margin-top: 20px;
      
      .el-card {
        background-color: #0E2E5E;
        border: none;
        border-radius: 6px;
        
        :deep(.el-card__body) {
          padding: 12px;
        }
      }
    }

    .top-header {
      margin-top: 12px;
      height: 32px;
      font-family: OPPOSans, OPPOSans;
      font-weight: 500;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .header-left {
        display: flex;

        .name {
          margin-left: 7px;
          margin-right: 7px;
        }
      }
    }
  }

@@ -1097,114 +1058,183 @@
    margin-top: 10px;
  }

  .top-header {
    margin-top: 15px;
    height: 23px;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 14px;
    color: rgba(196, 213, 255, 0.6);
    border-bottom: 1px solid rgba(196, 213, 255, 0.6);
    display: flex;
    justify-content: space-between;

    .header-left {
      display: flex;

      .name {
        margin-left: 7px;
        margin-right: 7px;
      }
  :deep(.el-button--primary) {
    background-color: #1976D2;
    border-color: #1976D2;
  }
  
  :deep(.el-card__header) {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: transparent;
    color: #fff;
    
    &.is-active {
      background-color: #1976D2;
      border-color: #1976D2;
    }
  }
  
  :deep(.el-tabs--card > .el-tabs__header) {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

.themeLight {
  .page {
    padding: 20px;
    background: #f7f8fa;
    background: #fff;

    .card-title {
      width: 132px;
      height: 29px;
      font-weight: bold;
      font-size: 22px;
      color: #ffffff;
      color: #333;
    }

    .card-list {
      width: 100%;
      margin-top: 14px;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      background-image: url("@/assets/images/home/index-card-bg2.png");
      background-size: 100% 100%;
      flex-wrap: wrap;
      border-radius: 20px;

      width: 100%;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 15px;
      
      &:after {
        content: "";
        flex: 0 0 0;
      }
      
      .card-list-item {
        width: 19%;
        margin-right: 0.5%;
        height: 157px;
        background-size: 100% 100%;
        width: 0;
        flex: 1 1 320px;
        max-width: 320px;
        height: 135px;
        background: #fff;
        box-sizing: border-box;
        padding: 25px 18px 12px 16px;
        color: #fff;

        .item-top {
          display: flex;

        padding: 16px;
        color: #333;
        border-radius: 9px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: row;
        align-items: center;
        
        .item-left {
          margin-right: 20px;
          
          .top-icon {
            width: 69px;
            height: 69px;
            background-size: 100% 100%;
            width: 73px;
            height: 73px;
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%;
          }

        }
        
        .item-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .top-right {
            margin-left: 16px;

            display: flex;
            flex-direction: column;
            
            .right-name {
              font-weight: bold;
              font-size: 16px;
              font-family: OPPOSans-Bold;
            }

            .right-value {
              font-weight: 800;
              font-size: 30px;
              margin-top: 10px;
              font-family: OPPOSans-Medium;

              font-weight: 400;
              font-size: 14px;
              font-family: OPPOSans-Regular;
              color: rgba(0, 0, 0, 0.65);
              letter-spacing: 0.5px;
              margin-bottom: 4px;
              
              .unit {
                margin-left: 5px;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.65);
                margin-left: 4px;
                font-size: 12px;
                font-weight: normal;
              }
            }
            
            .right-value {
              font-weight: 500;
              font-size: 26px;
              margin-top: 6px;
              font-family: OPPOSans-Medium;
              color: #333;
              line-height: 1.2;
              letter-spacing: 0.5px;
            }
          }
          
          .item-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: normal;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.5);
            line-height: 1.2;
            
            .bottom-left, .bottom-right {
              display: flex;
              align-items: center;
              letter-spacing: 0.3px;
              
              :deep(.el-icon) {
                margin-left: 6px;
                font-size: 12px;
              }
            }
          }
        }

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

      .line {
        width: 1px;
        height: 64px;
        background-image: url("@/assets/images/home/line@2x.png");
        background-size: 100% 100%;
      }
    }

    .page-main {
      margin-top: 23px;
      margin-top: 20px;
      
      .el-card {
        background-color: #fff;
        border: none;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        
        :deep(.el-card__body) {
          padding: 12px;
        }
      }
    }

    .top-header {
      margin-top: 12px;
      height: 32px;
      font-family: OPPOSans, OPPOSans;
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .header-left {
        display: flex;

        .name {
          margin-left: 7px;
          margin-right: 7px;
        }
      }
    }
  }

@@ -1214,25 +1244,28 @@
    margin-top: 10px;
  }

  .top-header {
    margin-top: 15px;
    height: 23px;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 14px;
    color: rgba(29, 29, 29, 0.6);
    border-bottom: 1px solid rgba(196, 213, 255, 0.6);
    display: flex;
    justify-content: space-between;

    .header-left {
      display: flex;

      .name {
        margin-left: 7px;
        margin-right: 7px;
      }
  :deep(.el-button--primary) {
    background-color: #1976D2;
    border-color: #1976D2;
  }
  
  :deep(.el-card__header) {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    border-color: rgba(0, 0, 0, 0.1);
    
    &.is-active {
      background-color: #1976D2;
      border-color: #1976D2;
      color: #fff;
    }
  }
  
  :deep(.el-tabs--card > .el-tabs__header) {
    border-color: rgba(0, 0, 0, 0.1);
  }
}
</style>