esswisdom_web/src/views/overview/index.vue

<template>
  <div>
    <div class="title">
      <el-select
        v-model="Singlevalue"
        collapse-tags
        placeholder="选择电站"
        popper-class="custom-header"
        :max-collapse-tags="1"
        class="Space_content"
        size="large"
      >
        <el-option
          v-for="(item, index) in cities"
          :key="index"
          :label="item.stationName"
          :value="item.id"
          @click="onselect(item)"
        />
        <template #prefix>
          {{ (cities.find(s => s.id === Singlevalue) || {}).stationName }}
        </template>
      </el-select>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content ep-bg-purple">
            <div class="overview_title1">
              <div class="overview_title_name">今日充电量</div>
            </div>
            <div class="overview_title">
              <div class="overview_titlename">
                {{ formatAmountkwh(multiStation.dayImportKwh) }}
                <span class="overview_unit"> {{ formatCompany(multiStation.dayImportKwh) }}</span>
              </div>
              <div class="overview_img1">
                <img src="../../assets/images/charging.png" alt="站点" />
              </div>
            </div>
            <div class="overview_line" v-if="multiStation.importKwhDiffYDay > 0">
              较昨日上升: {{ formatAmountkwh_(multiStation.importKwhDiffYDay) }}
              {{ formatCompany_(multiStation.importKwhDiffYDay) }}
            </div>
            <div class="overview_line" v-else>
              较昨日下降: {{ formatAmountkwh_(multiStation.importKwhDiffYDay) }}
              {{ formatCompany_(multiStation.importKwhDiffYDay) }}
            </div>
            <el-divider />
            <div class="overview_line">
              本月充电: {{ formatAmountkwh(multiStation.monthImportKwh) }} {{ formatCompany(multiStation.monthImportKwh) }} |
              累计充电:
              {{ formatAmountkwh(multiStation.accumulativeImportKwh) }}
              {{ formatCompany(multiStation.accumulativeImportKwh) }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content ep-bg-purple">
            <div class="overview_title1">
              <div class="overview_title_name">今日放电量</div>
            </div>
            <div class="overview_title">
              <div class="overview_titlename">
                {{ formatAmountkwh(multiStation.dayExportKwh) }}
                <span class="overview_unit"> {{ formatCompany(multiStation.dayExportKwh) }}</span>
              </div>
              <div class="overview_img2">
                <img src="../../assets/images/discharge.png" alt="站点" />
              </div>
            </div>
            <div class="overview_line" v-if="multiStation.exportKwhDiffYDay > 0">
              较昨日上升: {{ formatAmountkwh_(multiStation.exportKwhDiffYDay) }}
              {{ formatCompany_(multiStation.exportKwhDiffYDay) }}
            </div>
            <div class="overview_line" v-else>
              较昨日下降: {{ formatAmountkwh_(multiStation.exportKwhDiffYDay) }}
              {{ formatCompany_(multiStation.exportKwhDiffYDay) }}
            </div>
            <el-divider />
            <div class="overview_line">
              本月放电: {{ formatAmountkwh(multiStation.monthExportKwh) }} {{ formatCompany(multiStation.monthExportKwh) }} |
              累计放电:
              {{ formatAmountkwh(multiStation.accumulativeExportKwh) }}
              {{ formatCompany(multiStation.accumulativeExportKwh) }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content ep-bg-purple">
            <div class="overview_title1">
              <div class="overview_title_name">今日收益</div>
            </div>
            <div class="overview_title">
              <div class="overview_titlename">
                {{ formatAmount(multiStation.todayProfit) }}
                <span class="overview_unit">{{ formatAmounts(multiStation.todayProfit) }}</span>
              </div>
              <div class="overview_img3">
                <img src="../../assets/images/qian.png" alt="站点" />
              </div>
            </div>
            <div class="overview_line" v-if="multiStation.profitDiffYDay > 0">
              较昨日上升: {{ formatAmount1(multiStation.profitDiffYDay) }}
              {{ formatAmounts2(multiStation.profitDiffYDay) }}
            </div>
            <div class="overview_line" v-else>
              较昨日下降: {{ formatAmount1(multiStation.profitDiffYDay) }}
              {{ formatAmounts2(multiStation.profitDiffYDay) }}
            </div>
            <el-divider />
            <div class="overview_line">
              本月收益: {{ formatAmount(multiStation.monthProfit) }} {{ formatAmounts(multiStation.monthProfit) }} | 总收益:
              {{ formatAmount(multiStation.totalProfit) }}
              {{ formatAmounts(multiStation.totalProfit) }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content ep-bg-purple">
            <div class="overview_title1">
              <div class="overview_title_name">设备总数</div>
            </div>
            <div class="overview_title">
              <div class="overview_titlename">{{ multiStation.stationTotalCount }} <span class="overview_unit">个</span></div>
              <div class="overview_img">
                <img src="../../assets/images/gu1.png" alt="站点" />
              </div>
            </div>
            <div class="overview_line">
              在线 {{ multiStation.stationOnlineCount }} 个 \ 离线 {{ multiStation.stationOfflineCount }} 个
            </div>
            <el-divider />
            <div class="overview_line">
              装机功率: {{ formatAmountkwh(multiStation.installedPower) }} {{ formatCompany1(multiStation.installedPower) }} |
              装机容量:
              {{ formatAmountkwh(multiStation.installedCap) }}
              {{ formatCompany(multiStation.installedCap) }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <div class="grid_div grid-content ep-bg-purple">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="收益统计" name="first"></el-tab-pane>
              <el-tab-pane label="充放电统计" name="second"></el-tab-pane>
              <div class="grid_div1">
                <div ref="baroption" id="baroption"></div>
              </div>
            </el-tabs>
            <div class="grid_divright">
              <!-- <div :class="recentlytype == 7 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(7)">近7日</div>
              <div :class="recentlytype == 31 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(31)">近31日</div>
              <div :class="recentlytype == 360 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(360)">近12月</div> -->
              <el-date-picker
                v-model="value2"
                :type="timetype1"
                :shortcuts="shortcuts1"
                :format="format1"
                :value-format="format1"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-value="value2"
                :disabled-date="pickerOptions"
                size="large"
                @change="onhandleClick"
                :default-time="defaultTime2"
              />
              <el-select
                v-model="daymonthyearvalue1"
                placeholder="选择日期"
                size="large"
                style="width: 80px"
                @change="getdaymonthyear1"
              >
                <el-option v-for="item in daymonthyear1" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content ep-bg-purple">
            <div class="grid_right">
              <div>站点信息</div>
              <div class="grid_right1" @click="details()">查看详细</div>
            </div>
            <!-- <div id="gridpiechart">-||-</div> -->
            <div class="gridpiechart">
              <img class="gridpiechartimg" :src="stationinfodata.absoluteStationPicUrl" alt="" />
            </div>
            <div class="gridpiechartname">{{ stationinfodata.stationName }}</div>

            <div class="gridpiechartdiv">
              <div class="gridpiechartnameright">装机总容量</div>
              <div class="gridpiechartnameleft">{{ stationinfodata.installedCap }} kWh</div>
            </div>

            <div class="gridpiechartdiv">
              <div class="gridpiechartnameright">装机功率</div>
              <div class="gridpiechartnameleft">{{ stationinfodata.installedPower }} MW</div>
            </div>
            <div class="gridpiechartdiv">
              <div class="gridpiechartnameright">投运时间</div>
              <div class="gridpiechartnameleft">{{ stationinfodata.operationDate }}</div>
            </div>
            <div class="gridpiechartdiv">
              <div class="gridpiechartnameright">电站地址</div>
              <div class="gridpiechartnameleft">
                <el-icon><Location /></el-icon>&nbsp;{{ stationinfodata.province }}{{ stationinfodata.city }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="middle">
      <el-card style="width: 100%">
        <div class="middleleft">
          <div class="middlelefttop">
            <div>综合功率</div>

            <div class="middle_divright">
              <!-- <div :class="timedays == 7 ? 'middle_divright_1' : 'middle_divright_2'" @click="oncomprehen(7)">近7日</div>
              <div :class="timedays == 31 ? 'middle_divright_1' : 'middle_divright_2'" @click="oncomprehen(31)">近31日</div>
              <div :class="timedays == 360 ? 'middle_divright_1' : 'middle_divright_2'" @click="oncomprehen(360)">近12月</div> -->
              <el-date-picker
                v-model="timedayslist"
                :type="pickertype"
                :shortcuts="shortcuts"
                :format="format"
                :value-format="format"
                unlink-panels
                size="large"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-value="timedayslist"
                :disabled-date="pickerOptions"
                @change="onpowerblur"
              />
              <!-- <el-select
                v-model="daymonthyearvalue"
                placeholder="选择日期"
                size="large"
                style="width: 80px"
                @change="getdaymonthyear"
              >
                <el-option v-for="item in daymonthyear" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
            </div>
          </div>
          <div class="middleleftchart" ref="comprehensive"></div>
        </div>
      </el-card>
    </div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>设备列表</span>
        </div>
      </template>
      <div class="cardtable">
        <div>通讯状态:</div>
        &emsp;
        <el-select v-model="onlineStatus" placeholder="请选择" size="large" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        &emsp;
        <el-input v-model="modelinput" style="width: 240px" placeholder="设备编号" size="large" />
        &emsp;
        <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
        <el-button size="large" @click="query(1)">重置</el-button>
      </div>
      <el-table :data="tableData.records" style="width: 100%" border :scrollbar-always-on="true">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="eid" label="设备编号" width="160" :show-overflow-tooltip="true" />
        <el-table-column prop="emsDeviceId" label="设备名称" width="160" :show-overflow-tooltip="true" />
        <el-table-column prop="onlineStatus" label="在线状态" width="160">
          <template #default="scope">
            {{ scope.row.onlineStatus == 0 ? "离线" : "在线" }}
          </template>
        </el-table-column>
        <el-table-column prop="dayImportKwh" label="今日充电量(kWh)" width="160" />
        <el-table-column prop="dayExportKwh" label="今日放电量(kWh)" width="160" />
        <el-table-column prop="accumulativeImportKwh" label="总充电量(kWh)" width="160" />
        <el-table-column prop="accumulativeExportKwh" label="总放电量(kWh)" width="160" />
        <el-table-column prop="soc" label="SOC(%)" width="160" />
        <el-table-column prop="todayAlarmCount" label="运维处理(今日)" align="center" width="160">
          <template #default="scope">
            {{ scope.row.todayAlarmCount == null ? "-" : scope.row.todayAlarmCount }}
          </template>
        </el-table-column>

        <el-table-column prop="gridActivePower" label="电网有功功率(KW)" width="160" />
        <el-table-column prop="storageActivePower" label="储能有功功率(KW)" width="160" />
        <el-table-column prop="loadActivePower" label="负载有功功率(KW)" width="160" />
      </el-table>
      <div class="example_block">
        <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        <!-- <el-pagination layout="prev, pager, next" :total="tableData.total" @change="changemultiStationpagebase" /> -->
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="查看电站" width="800" :before-close="handleClose">
      <div class="dialog">
        <div :class="informationtype == 1 ? 'information' : 'more'" @click="oninformation">基础信息</div>
        <div :class="informationtype == 2 ? 'information' : 'more'" @click="onmoreinformation">更多信息</div>
      </div>
      <div v-if="informationtype == 1">
        <div class="more_img">
          <div class="more_name">电站图片：</div>
          <img class="dialogimg" :src="stationinfodata.absoluteStationPicUrl" alt="" />
        </div>
        <div class="dialog_title">
          <div class="more_name">电站名称：</div>
          <div class="more_theme">{{ stationinfodata.stationName }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">装机功率：</div>
          <div class="more_theme">{{ stationinfodata.installedPower }}MW</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">装机容量：</div>
          <div class="more_theme">{{ stationinfodata.installedCap }}kWh</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">电站地址：</div>
          <div class="more_theme">{{ stationinfodata.province }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">投运时间：</div>
          <div class="more_theme">{{ stationinfodata.operationDate }}</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">电站联系电话：</div>
          <div class="more_theme">{{ stationinfodata.contactPhone }}</div>
        </div>
      </div>
      <div v-if="informationtype == 2">
        <div class="dialog_title">
          <div class="more_name">安装图片：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">并网点信息：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">变压器信息：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">站点变压器容量：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">安装人：</div>
          <div class="more_theme">-</div>
        </div>
        <div class="dialog_title">
          <div class="more_name">安装人联系号码：</div>
          <div class="more_theme">-</div>
        </div>
      </div>
      <div class="dialog_footer">
        <el-button @click="dialogVisible = false" size="large">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import * as echarts from "echarts";
import Pagination from "@/components/ProTable/components/Pagination.vue";

import {
  getmuitiStation,
  emsSystempage,
  stationstationName,
  postsexportKwh,
  singlestationday,
  singlestationyearMonth,
  singlestationchargingMonth,
  overallEfficiencyday,
  // overallEfficiencyyearMonth,
  Stationinfo,
  singlestationdayMonth,
  postsexportKwhMonth
} from "@/api/home/Multisite";
import { Station } from "@/api/interface";
const multiStation = ref();
const activeName = ref("first");
const value2 = ref();
const tableData = ref();
const currentDate = ref();
const baroption = ref();
const modelinput = ref();
const pageable = ref({
  ps: 10,
  pn: 1,
  total: 0
});
// 选择站点
const Singlevalue = ref("");
const Singledata = ref([]);
const onselect = (val: any) => {
  activeName.value = "first";
  Singledata.value = val.id;
  getStationinfo();
  // gatsinglestationday();
  postmultiStationpagebaseInfo();
  onhandleClick();
  getsite();
};

const cities: Ref<Station.todo[]> = ref([]);

const onlineStatus = ref("");
// const recentlytype = ref(7);
const tabpropslabel = ref("收益统计");

const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "在线"
  },
  {
    value: "0",
    label: "离线"
  }
]);

const poststationstationName = async () => {
  const { data } = await stationstationName({});
  Singlevalue.value = data[0].id;
  cities.value = data;
  getsite();
  getStationinfo();
  gatsinglestationday();
  postmultiStationpagebaseInfo();
  onpowerblur();

  // oncomprehen(7);
};
// 选择站点
const getsite = async () => {
  console.log(Singlevalue.value);
  const { data } = await getmuitiStation(Singlevalue.value);
  multiStation.value = data;
};
// 站点信息 查看详细
const stationinfodata = ref();
const getStationinfo = async () => {
  const { data } = await Stationinfo({}, Singlevalue.value);
  stationinfodata.value = data;
};
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 56, 56)]; // '00:00:00', '23:56:56'
// 查询最近数据

const getdaymonthyear1 = async (value: any) => {
  daymonthyearvalue.value = value;
  if (value == 1) {
    timetype1.value = "daterange";
    format1.value = "YYYY-MM-DD";
    shortcuts1.value = [
      {
        text: "过去7天",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setDate(start.getDate() - 7);
          return [start, end];
        }
      },
      {
        text: "过去1个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setMonth(start.getMonth() - 1);
          return [start, end];
        }
      },
      {
        text: "过去3个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setMonth(start.getMonth() - 3);
          return [start, end];
        }
      }
    ];

    const today = new Date();
    const currentDate = today.toISOString().split("T")[0];
    const sevenDaysAgoDate = new Date(today);
    sevenDaysAgoDate.setDate(today.getDate() - 7);
    const sevenDaysAgo = sevenDaysAgoDate.toLocaleDateString();
    value2.value = [sevenDaysAgo, currentDate];

    // getreportpowerday();
  } else if (value == 2) {
    const today = new Date();
    const currentDate = today.toISOString().split("T")[0];
    const currentYearMonth = currentDate.slice(0, 7);

    value2.value = [currentYearMonth, currentYearMonth];
    // getreportpoweryearMonth();

    timetype1.value = "monthrange";
    format1.value = "YYYY-MM";

    shortcuts1.value = [
      {
        text: "本月",
        value: () => {
          return [new Date(), new Date()];
        }
      },
      {
        text: "过去6个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setMonth(start.getMonth() - 6);
          return [start, end];
        }
      },
      {
        text: "今年",
        value: () => {
          const end = new Date();
          const start = new Date(new Date().getFullYear(), 0);
          return [start, end];
        }
      }
    ];
  } else {
    const today = new Date();
    const currentDate = today.toISOString().split("T")[0];
    // 获取去年同月的日期
    value2.value = [currentDate.substring(0, 4), currentDate.substring(0, 4)];
    console.log(value2.value);
    timetype1.value = "yearrange";
    format1.value = "YYYY";

    shortcuts1.value = [
      {
        text: "今年",
        value: () => {
          return [new Date(), new Date()];
        }
      },
      {
        text: "过去1年",
        value: () => {
          const end = new Date();
          const start = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
          return [start, end];
        }
      },
      {
        text: "过去2年",
        value: () => {
          const start = new Date();
          const end = new Date(new Date().setFullYear(new Date().getFullYear() - 2));
          return [start, end];
        }
      }
    ];
  }
  if (tabpropslabel.value == "收益统计") {
    if (daymonthyearvalue.value == 1) {
      gatsinglestationday();
    } else if (daymonthyearvalue.value == 2) {
      getsinglestationdayMonth();
    } else {
      gatsinglestationyearMonth();
    }
  } else {
    if (daymonthyearvalue.value == 1) {
      getmultiStatiopower();
    } else if (daymonthyearvalue.value == 2) {
      getpostsexportKwhMonth();
    } else {
      getsinglestationchargingMonth();
    }
  }
};
// const recently = (val: any) => {
//   // 获取当前日期
//   recentlytype.value = val;

//   const today = new Date();
//   const currentDate = today.toLocaleDateString();

//   // 获取过去 7 天的日期
//   const sevenDaysAgoDate = new Date(today);
//   sevenDaysAgoDate.setDate(today.getDate() - 7);
//   const sevenDaysAgo = sevenDaysAgoDate.toLocaleDateString();

//   // 获取过去 31 天的日期
//   const thirtyOneDaysAgoDate = new Date(today);
//   thirtyOneDaysAgoDate.setDate(today.getDate() - 31);
//   const thirtyOneDaysAgo = thirtyOneDaysAgoDate.toLocaleDateString();

//   // 获取去年同月的日期
//   const lastYearSameMonthDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
//   const lastYearSameMonth = lastYearSameMonthDate.toLocaleDateString();

//   if (tabpropslabel.value == "收益统计") {
//     if (val == 7) {
//       value2.value = [sevenDaysAgo, currentDate];
//       gatsinglestationday();
//     } else if (val == 31) {
//       value2.value = [thirtyOneDaysAgo, currentDate];
//       gatsinglestationday();
//     } else {
//       value2.value = [lastYearSameMonth, currentDate];
//       gatsinglestationyearMonth();
//     }
//   } else {
//     if (val == 7) {
//       value2.value = [sevenDaysAgo, currentDate];
//       getmultiStatiopower();
//     } else if (val == 31) {
//       value2.value = [thirtyOneDaysAgo, currentDate];
//       getmultiStatiopower();
//     } else {
//       value2.value = [lastYearSameMonth, currentDate];
//       getsinglestationchargingMonth();
//     }
//   }
// };

// 切换收益统计与充放电统计
const handleClick = (tab: TabsPaneContext) => {
  tabpropslabel.value = tab.props.label;

  if (tabpropslabel.value == "收益统计") {
    if (daymonthyearvalue.value == 1) {
      gatsinglestationday();
    } else if (daymonthyearvalue.value == 2) {
      getsinglestationdayMonth();
    } else {
      gatsinglestationyearMonth();
    }
  } else {
    if (daymonthyearvalue.value == 1) {
      getmultiStatiopower();
    } else if (daymonthyearvalue.value == 2) {
      getpostsexportKwhMonth();
    } else {
      getsinglestationchargingMonth();
    }
  }
};
const onhandleClick = () => {
  if (tabpropslabel.value == "收益统计") {
    if (daymonthyearvalue.value == 1) {
      gatsinglestationday();
    } else if (daymonthyearvalue.value == 2) {
      getsinglestationdayMonth();
    } else {
      gatsinglestationyearMonth();
    }
  } else {
    if (daymonthyearvalue.value == 1) {
      getmultiStatiopower();
    } else if (daymonthyearvalue.value == 2) {
      getpostsexportKwhMonth();
    } else {
      getsinglestationchargingMonth();
    }
  }
};
// 收益统计----日
const gatsinglestationday = async () => {
  const { data } = await singlestationday({ startDate: value2.value[0], endDate: value2.value[1] }, Singlevalue.value);
  const dates = [["product", "收益"]];
  for (let index = 0; index < data.list.length; index++) {
    dates.push([data.list[index].ymd, data.list[index].profit.toFixed()]);
  }

  const profits = [{ type: "bar" }];

  baroptionchart(dates, profits, "收益/元");
};
// 收益统计----月
const getsinglestationdayMonth = async () => {
  const { data } = await singlestationdayMonth({ startDate: value2.value[0], endDate: value2.value[1] }, Singlevalue.value);
  const dates = [["product", "收益"]];
  for (let index = 0; index < data.list.length; index++) {
    dates.push([data.list[index].ymd, data.list[index].profit.toFixed()]);
  }

  const profits = [{ type: "bar" }];

  baroptionchart(dates, profits, "收益/元");
};
// 收益统计------年份
const gatsinglestationyearMonth = async () => {
  const { data } = await singlestationyearMonth(
    { startYearMonth: value2.value[0], endYearMonth: value2.value[1] },
    Singlevalue.value
  );
  const dates = [["product", "收益"]];

  for (let index = 0; index < data.list.length; index++) {
    dates.push([data.list[index].ymd, data.list[index].profit.toFixed()]);
  }
  const profits = [{ type: "bar" }];

  baroptionchart(dates, profits, "收益/元");
};
// 充放电统计图
const getmultiStatiopower = async () => {
  const { data } = await postsexportKwh({ startDate: value2.value[0], endDate: value2.value[1] }, Singlevalue.value);
  const dates = [["product", "充电", "放电"]];

  for (let index = 0; index < data.length; index++) {
    dates.push([data[index].ymd, data[index].chargeTotal.toString(), data[index].dischargeTotal.toString()]);
  }
  const profits = [{ type: "bar" }, { type: "bar" }];

  baroptionchart(dates, profits, "kWh");
};
// 充放电统计图
const getpostsexportKwhMonth = async () => {
  const { data } = await postsexportKwhMonth({ startDate: value2.value[0], endDate: value2.value[1] }, Singlevalue.value);
  const dates = [["product", "充电", "放电"]];

  for (let index = 0; index < data.length; index++) {
    dates.push([data[index].ymd, data[index].chargeTotal.toString(), data[index].dischargeTotal.toString()]);
  }
  const profits = [{ type: "bar" }, { type: "bar" }];

  baroptionchart(dates, profits, "kWh");
};
// 充放电统计图
const getsinglestationchargingMonth = async () => {
  const { data } = await singlestationchargingMonth({ startDate: value2.value[0], endDate: value2.value[1] }, Singlevalue.value);
  const dates = [["product", "充电", "放电"]];
  for (let index = 0; index < data.length; index++) {
    dates.push([data[index].ymd, data[index].chargeTotal.toString(), data[index].dischargeTotal.toString()]);
  }
  const profits = [{ type: "bar" }, { type: "bar" }];

  baroptionchart(dates, profits, "kWh");
};
// 收益统计
const baroptionchart = (dates: string[][], profits: { type: string }[], subtext: string | undefined) => {
  const baroptionvalue = echarts.init(baroption.value);
  window.addEventListener(
    "resize",
    () => {
      baroptionvalue.resize();
    },
    false
  );
  let option = {
    title: {
      subtext: subtext
    },
    legend: {
      right: 30
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "1%",
      right: "4%",
      bottom: "0%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLabel: {}
    },
    yAxis: {
      type: "value"
    },
    dataset: {
      source: dates
    },
    series: profits
  };

  baroptionvalue.setOption(option, true);
};
// 查询
const query = async (val: number) => {
  if (val == 0) {
    postmultiStationpagebaseInfo();
  } else {
    pageable.value.ps = 1;
    onlineStatus.value = "";
    modelinput.value = "";
    postmultiStationpagebaseInfo();
  }
};
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  postmultiStationpagebaseInfo();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  postmultiStationpagebaseInfo();
};

// 电站列表
const postmultiStationpagebaseInfo = async () => {
  const { data } = await emsSystempage(
    {
      onlineStatus: onlineStatus.value,
      keyword: modelinput.value,
      pn: pageable.value.ps,
      ps: pageable.value.pn
    },
    Singlevalue.value
  );
  tableData.value = data;
  console.log(tableData.value.total);

  pageable.value.total = tableData.value.total;
};
const dialogVisible = ref(false);
// 卡片详情对话框
const details = () => {
  dialogVisible.value = true;
};
const informationtype = ref(1);
const oninformation = () => {
  informationtype.value = 1;
};
const onmoreinformation = () => {
  informationtype.value = 2;
};
const handleClose = () => {
  dialogVisible.value = false;
};
// 综合效率---------------------------------------------------------------
const comprehensive = ref();
// const timedays = ref(7);
const timedayslist = ref();
const pickertype: Ref<any> = ref("daterange");
const daymonthyearvalue = ref(1);
const daymonthyearvalue1 = ref(1);
const timetype1: Ref<any> = ref("daterange");
const format = ref("YYYY-MM-DD");
const format1 = ref("YYYY-MM-DD");

const daymonthyear1 = ref([
  {
    value: 1,
    label: "按日"
  },
  {
    value: 2,
    label: "按月"
  },
  {
    value: 3,
    label: "按年"
  }
]);
const shortcuts = ref([
  {
    text: "过去7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "过去1个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  },
  {
    text: "过去3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    }
  }
]);
const shortcuts1 = ref([
  {
    text: "过去7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "过去1个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  },
  {
    text: "过去3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    }
  }
]);
const onpowerblur = () => {
  getdaymonthyear();
};
const getdaymonthyear = async () => {
  // daymonthyearvalue.value = value;
  getcomprehensiveefficiency();

  // if (daymonthyearvalue.value == 1) {
  //   getcomprehensiveefficiency();
  // } else if (daymonthyearvalue.value == 2) {
  // } else {
  //   getoverallEfficiencyyearMonth();
  // }
};
// const oncomprehen = (val: number) => {
//   // 获取当前日期
//   timedays.value = val;

//   const today = new Date();
//   const currentDate = today.toLocaleDateString();

//   // 获取过去 7 天的日期
//   const sevenDaysAgoDate = new Date(today);
//   sevenDaysAgoDate.setDate(today.getDate() - 7);
//   const sevenDaysAgo = sevenDaysAgoDate.toLocaleDateString();

//   // 获取过去 31 天的日期
//   const thirtyOneDaysAgoDate = new Date(today);
//   thirtyOneDaysAgoDate.setDate(today.getDate() - 31);
//   const thirtyOneDaysAgo = thirtyOneDaysAgoDate.toLocaleDateString();

//   // 获取去年同月的日期
//   const lastYearSameMonthDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
//   const lastYearSameMonth = lastYearSameMonthDate.toLocaleDateString();
//   if (val == 7) {
//     timedayslist.value = [sevenDaysAgo, currentDate];
//     getcomprehensiveefficiency();
//   } else if (val == 31) {
//     timedayslist.value = [thirtyOneDaysAgo, currentDate];
//     getcomprehensiveefficiency();
//   } else {
//     timedayslist.value = [lastYearSameMonth, currentDate];
//     getoverallEfficiencyyearMonth();
//   }
// };
const getcomprehensiveefficiency = async () => {
  const { data } = await overallEfficiencyday(
    { startDate: timedayslist.value[0], endDate: timedayslist.value[1] },
    Singlevalue.value
  );
  const dates = [["profit", "综合效率"]];

  for (let index = 0; index < data.list.length; index++) {
    dates.push([data.list[index].ymd, data.list[index].overallEfficiency.toString()]);
  }
  const profits = [
    {
      type: "line",
      showSymbol: false
    }
  ];

  getiveefficiency(data.avgEfficiency, dates, profits);
};
// const getoverallEfficiencyyearMonth = async () => {
//   const { data } = await overallEfficiencyyearMonth(
//     {
//       startYearMonth: timedayslist.value[0],
//       endYearMonth: timedayslist.value[1]
//     },
//     Singlevalue.value
//   );
//   const dates = [["profit", "综合效率"]];
//   for (let index = 0; index < data.list.length; index++) {
//     dates.push([data.list[index].ymd, data.list[index].overallEfficiency.toString()]);
//   }
//   const profits = [
//     {
//       type: "line",
//       showSymbol: false
//     }
//   ];

//   getiveefficiency(data.avgEfficiency, dates, profits);
// };
const getiveefficiency = (num: any, dates: string[][], profits: { type: string }[]) => {
  const comprehensivevalue = echarts.init(comprehensive.value);
  window.addEventListener(
    "resize",
    () => {
      comprehensivevalue.resize();
    },
    false
  );
  let option = {
    title: {
      text: `综合效率${num}%`,
      subtext: "效率/%"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      right: 30
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: "category"
    },
    yAxis: {
      type: "value"
    },
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: [0, 1],
        start: 0,
        end: 100
      },
      {
        show: true,
        xAxisIndex: [0, 1],
        type: "slider",
        bottom: 10,
        start: 0,
        end: 100
      }
    ],
    dataset: {
      source: dates
    },
    series: profits
  };

  comprehensivevalue.setOption(option, true);
};
// 综合效率---------------------------------------------------------------

// 充电量进位
const formatAmountkwh = (amount: number) => {
  if (amount == undefined) {
    return "1000";
  }
  if (amount < 1000) {
    return amount.toFixed(2);
  } else {
    return (amount / 1000).toFixed(2);
  }
};
const formatCompany1 = (amount: number) => {
  if (amount == undefined) {
    return "kW";
  }
  if (amount < 1000) {
    return "kW";
  } else {
    return "MW";
  }
};
const formatCompany = (amount: number) => {
  if (amount == undefined) {
    return "kWh";
  }
  if (amount < 1000) {
    return "kWh";
  } else {
    return "MWh";
  }
};
const formatAmountkwh_ = (amount: number) => {
  if (amount == undefined) {
    return "1000";
  }
  if (amount > 0) {
    return amount.toFixed(2);
  } else {
    return Math.abs(amount).toFixed(2);
  }
};
const formatCompany_ = (amount: number) => {
  if (amount == undefined) {
    return "kWh";
  }
  if (amount > 0) {
    return "kWh";
  } else {
    return "kWh";
  }
};
const formatAmount = (amount: number) => {
  if (amount == undefined) {
    return "1000";
  }
  if (amount < 10000) {
    return amount.toFixed(2);
  } else {
    return (amount / 10000).toFixed(2);
  }
};
const formatAmounts = (amount: number) => {
  if (amount == undefined) {
    return "元";
  }
  if (amount < 10000) {
    return "元";
  } else {
    return "万元";
  }
};
const formatAmount1 = (amount: number) => {
  if (amount == undefined) {
    return "1000";
  }
  if (amount > -10000) {
    return amount.toFixed(2);
  } else {
    return (amount / 10000).toFixed(2);
  }
};
const formatAmounts2 = (amount: number) => {
  if (amount == undefined) {
    return "元";
  }
  if (amount > -10000) {
    return "元";
  } else {
    return "万元";
  }
};
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  // 获取过去 7 天的日期
  const today = new Date();
  const sevenDaysAgoDate = new Date(today);
  sevenDaysAgoDate.setDate(today.getDate() - 7);
  const sevenDaysAgo = sevenDaysAgoDate.toLocaleDateString();
  value2.value = [sevenDaysAgo, currentDate.value];
  timedayslist.value = [sevenDaysAgo, currentDate.value];

  poststationstationName();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>