esswisdom_web/src/views/system/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"
        @change="postemsDevice"
      >
        <el-option v-for="(item, index) in cities" :key="index" :label="item.stationName" :value="item.id" />
        <template #prefix>
          {{ (cities.find(s => s.id === Singlevalue) || {}).stationName }}
        </template>
      </el-select>
      <div class="title_"></div>
      <el-select
        v-model="emsDeviceId"
        collapse-tags
        placeholder="选择编号"
        popper-class="custom-header"
        :max-collapse-tags="1"
        class="Space_content"
        size="large"
        @change="getstationrealtime"
      >
        <template #prefix>
          {{ (emsDevice.find(s => s.id === emsDeviceId) || {}).id }}
        </template>
        <el-option v-for="item in emsDevice" :key="item.id" :label="item.emsDeviceId" :value="item.id" />
      </el-select>
      <div class="Equipmentright">
        <div></div>
        <div class="Equipmenttpye" v-if="realtime.onlineStatus == 1">
          <div class="equipmentborder"></div>
          在线
        </div>
        <div class="Equipmenttpyes" v-else>
          <div class="equipmentborderif"></div>
          离线
        </div>
      </div>
    </div>
    <div class="realtime">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>实时数据</span>
              </div>
            </template>
            <div class="real_time">
              <div class="real_timediv">
                <el-card>
                  <div class="real_timename">今日充电量</div>
                  <div class="real_timeunit">{{ realtime.dayImportKwh }}<span class="real_timeunitcss"> kWh</span></div>
                </el-card>
              </div>
              <div class="real_timediv">
                <el-card>
                  <div class="real_timename">今日放电量</div>
                  <div class="real_timeunit">{{ realtime.dayExportKwh }} <span class="real_timeunitcss">kWh</span></div>
                </el-card>
              </div>
              <div class="real_timediv">
                <el-card>
                  <div class="real_timename">累计充电量</div>
                  <div class="real_timeunit">{{ realtime.accumulativeImportKwh }} <span class="real_timeunitcss">kWh</span></div>
                </el-card>
              </div>
              <div class="real_timediv">
                <el-card>
                  <div class="real_timename">累计放电量</div>
                  <div class="real_timeunit">{{ realtime.accumulativeExportKwh }} <span class="real_timeunitcss">kWh</span></div>
                </el-card>
              </div>
              <div class="real_timediv">
                <el-card>
                  <div class="real_timename">电池堆SOC</div>
                  <div class="real_timeunit">{{ realtime.soc }} <span class="real_timeunitcss">%</span></div>
                </el-card>
              </div>
            </div>
            <div class="trend">
              <div class="trend_left">
                <div class="trend_leftname">运行状态</div>
                <div class="trend_leftline">
                  <img class="trend_imgdw" src="../../assets/images/dw.36d3b54f.png" alt="" />
                  <div class="trend_line1">
                    <div class="trend_linec"></div>
                  </div>
                  <div class="trend_Dots"></div>
                  <div class="trend_line1">
                    <div class="trend_line2"></div>
                  </div>
                  <img class="trend_household" src="../../assets/images/household.png" alt="" />
                </div>
                <div class="trend_between">
                  <div class="trend_middle">
                    <div class="trend_middley"></div>
                  </div>
                  <img class="trend_electricbox" src="../../assets/images/Electricbox.png" alt="" />
                </div>
              </div>
              <div class="trend_right">
                <div>功率趋势</div>
                <div>最大充电功率：107.00kW最大放电功率：80.20 kW 最大负载功率：- kW</div>
                <div class="trend_chart" ref="trendchart"></div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>告警状态</span>
              </div>
            </template>
            <div class="Boxdiv">
              <div class="Boxdiv_">
                <div class="Boxdiv_left">
                  <div class="Boxdiv_bottom">名称</div>
                </div>
                <div class="Boxdiv_right">
                  <div class="Boxdiv_bottom">状态</div>
                </div>
              </div>
              <div class="Boxdiv_" v-for="(item, index) in device" :key="index">
                <div class="Boxdiv_left">
                  <div class="Boxdiv_bottom">{{ item.deviceName }}</div>
                </div>
                <div class="Boxdiv_right">
                  <div class="Boxdiv_bottom">
                    <div v-if="item.emsCommStatus == 0" class="equipment">
                      <!-- <div class="equipmentborderif"></div> -->
                      停机
                    </div>
                    <div v-else class="equipment">
                      <!-- <div class="equipmentborder"></div> -->
                      运行
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  
      
    -->
    <div class="realoperation">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>实时运行</div>
            <div class="grid_divright">
              <div :class="timetype == 1 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(1)">实时</div>
              <div :class="timetype == 7 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(7)">近7日</div>
              <div :class="timetype == 31 ? 'grid_divright_1' : 'grid_divright_2'" @click="recently(31)">近31月</div>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-value="value2"
                :disabled-date="pickerOptions"
                @change="datepicker"
              />
            </div>
          </div>
        </template>
        <div class="realoperationdiv">
          <div class="realoperationdiv1">数据类型</div>
          <div class="realoperationdiv2">
            <div class="realopscreen1">
              <div class="realopscreen1_top">
                <el-checkbox v-model="PCS" style="font-weight: 600" label="pcs:" size="large" color="#0052d9" /><el-select
                  v-model="PCSvalue"
                  placeholder="请选择pcs"
                  size="large"
                  style="width: 360px"
                >
                  <el-option v-for="item in devicePCS" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
                </el-select>
              </div>
              <div class="realopscreen1_bottom">
                <el-checkbox v-model="PCS" style="font-weight: 600" label="有功功率" size="large" />
              </div>
            </div>
            <div class="realopscreen1">
              <div class="realopscreen1_top">
                <el-checkbox v-model="metertype" style="font-weight: 600" label="电表：" size="large" /><el-select
                  v-model="metervalue"
                  placeholder="请选择电表"
                  size="large"
                  style="width: 360px"
                >
                  <el-option v-for="item in electricMeter" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
                </el-select>
              </div>
              <div class="realopscreen1_bottom">
                <el-checkbox v-model="metertype" style="font-weight: 600" label="有功功率" size="large" />
              </div>
            </div>
            <div class="realopscreen1">
              <div class="realopscreen1_top">
                <el-checkbox v-model="Battery" style="font-weight: 600" label="电池堆：" size="large" /><el-select
                  v-model="Batteryvalue"
                  placeholder="请选择电池堆"
                  size="large"
                  style="width: 360px"
                >
                  <el-option
                    v-for="item in batteryCluster"
                    :key="item.deviceId"
                    :label="item.deviceName"
                    :value="item.deviceId"
                  />
                </el-select>
              </div>
              <div class="realopscreen1_bottom">
                <el-checkbox v-model="socvalue" style="font-weight: 600" label="soc" size="large" />
                <el-checkbox v-model="maxvoltage" style="font-weight: 600" label="单体最高电压" size="large" />
                <el-checkbox v-model="minvoltage" style="font-weight: 600" label="单体最低电压" size="large" />
              </div>
            </div>
          </div>
          <el-button type="primary" size="large" color="#0052d9" @click="getpoststationdevice">查询</el-button>
        </div>
        <div class="gcurve_title">
          <div class="gcurve_tip"></div>
          <div>尖</div>
          <div class="gcurve_peak"></div>
          <div>峰</div>
          <div class="gcurve_flat"></div>
          <div>平</div>
          <div class="gcurve_valley"></div>
          <div>谷</div>
        </div>
        <div class="gcurve_chart" ref="operatingcurve"></div>
      </el-card>
    </div>
    <div class="income">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>实时电量收益</div>
          </div>
        </template>
        <div>
          日期：
          <el-date-picker
            v-model="pickervalue"
            type="date"
            placeholder="选择时间"
            size="large"
            clearable
            :disabled-date="pickerOptions"
            @change="pickerincome"
          />&ensp;&ensp;
          <el-button type="primary" size="large" color="#0052d9" @click="gatrevenue">查询</el-button>
          <el-button size="large" @click="onreset">重置</el-button>
        </div>
        <div class="income_div">
          <div class="income_title">
            <div class="income_title1">时间</div>
            <div class="income_title2">
              <div class="income_title2_">充电量（kWh）</div>
              <div class="income_title2_1">
                <div class="income_title2_11">尖</div>
                <div class="income_title2_11">峰</div>
                <div class="income_title2_11">平</div>
                <div class="income_title2_11">谷</div>
                <div class="income_title2_11">总</div>
              </div>
            </div>
            <div class="income_title3">
              <div class="income_title2_">放电量（kWh）</div>
              <div class="income_title2_1">
                <div class="income_title2_11">尖</div>
                <div class="income_title2_11">峰</div>
                <div class="income_title2_11">平</div>
                <div class="income_title2_11">谷</div>
                <div class="income_title2_11">总</div>
              </div>
            </div>
            <div class="income_title4">当前收益（元）</div>
          </div>

          <div class="income_ul" v-for="(item, index) in incomedata.list" :key="index">
            <div class="income_ul_left">{{ item.ymdHour }}</div>
            <div class="income_li1">
              <div class="income_title2_1">
                <div class="income_title2_11">{{ item.chargeSharpKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.chargePeakKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.chargeShoulderKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.chargeValleyKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.chargeKwh.toFixed(2) }}</div>
              </div>
            </div>
            <div class="income_li2">
              <div class="income_title2_1">
                <div class="income_title2_11">{{ item.dischargeSharpKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.dischargePeakKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.dischargeShoulderKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.dischargeValleyKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ item.dischargeKwh.toFixed(2) }}</div>
              </div>
            </div>
            <div class="income_ul_right">{{ item.profit.toFixed(2) }}</div>
          </div>
          <div class="income_ul">
            <div class="income_ul_left">总计</div>
            <div class="income_li1">
              <div class="income_title2_1">
                <div class="income_title2_11">{{ incomedata.total.chargeSharpKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.chargePeakKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.chargeShoulderKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.chargeValleyKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.chargeKwh.toFixed(2) }}</div>
              </div>
            </div>
            <div class="income_li2">
              <div class="income_title2_1">
                <div class="income_title2_11">{{ incomedata.total.dischargeSharpKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.dischargePeakKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.dischargeShoulderKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.dischargeValleyKwh.toFixed(2) }}</div>
                <div class="income_title2_11">{{ incomedata.total.dischargeKwh.toFixed(2) }}</div>
              </div>
            </div>
            <div class="income_ul_right">{{ incomedata.total.profit.toFixed(2) }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { onMounted, onUnmounted, Ref, ref } from "vue";
import {
  stationstationName,
  postemsSystemsingleStation,
  poststationrealtime,
  poststationsystem,
  poststationdevice,
  postelectricityrevenue,
  poststationlist,
  stationrecord,
  stationcolor
} from "@/api/home/Multisite";
import * as echarts from "echarts";
import { Station } from "@/api/interface";
const intervalID = ref();

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

const emsDevice: Ref<any[]> = ref([]);

const emsDeviceId = ref("");
const poststationstationName = async () => {
  const { data } = await stationstationName({});
  if (data.length == 0) {
    Singlevalue.value = "";
    return;
  } else {
    Singlevalue.value = data[0].id;
  }
  cities.value = data;
  postemsDevice();
};
const postemsDevice = async () => {
  emsDevice.value = [];
  const { data } = await postemsSystemsingleStation({}, Singlevalue.value);
  if (data.length == 0) {
    emsDeviceId.value = "";
    clearInterval(intervalID.value);
    return;
  } else {
    emsDeviceId.value = data[0].id;
  }

  emsDevice.value = data;
  // 清除定时器的示例
  clearInterval(intervalID.value);
  getstationrealtime();
  intervalID.value = setInterval(function () {
    getstationrealtime();
  }, 10000);
};
const realtime: Ref<Station.realtimeinfo> = ref({
  accumulativeExportKwh: 0,
  accumulativeImportKwh: 0,
  dayExportKwh: 0,
  dayImportKwh: 0,
  lastDataTime: "",
  onlineStatus: 0,
  soc: 0
});

const getstationrealtime = async () => {
  const { data } = await poststationrealtime({}, Singlevalue.value, emsDeviceId.value);
  realtime.value = data;
  await getpoststationdevice();
  await getstationsystem();
  await getstationdevice();
  await gatrevenue();
};

// 功率趋势图
const trendchart = ref();

const getstationsystem = async () => {
  const { data } = await poststationsystem({}, Singlevalue.value, emsDeviceId.value);
  powertrend(data.gridPower, data.storedPower);
};
const powertrend = (chartDataList: any[], storedPower: any[]) => {
  const dateList = chartDataList.map(function (item) {
    return item.ts.slice(-8);
  });

  const valueList = chartDataList.map(function (item) {
    return item.totalActivePower;
  });
  const secondList = storedPower.map(function (item) {
    return item.totalActivePower;
  });
  const trendchartvalue = echarts.init(trendchart.value);
  window.addEventListener(
    "resize",
    () => {
      trendchartvalue.resize();
    },
    false
  );
  let option = {
    grid: {
      left: "2%",
      right: "4%",
      bottom: "6%",
      containLabel: true
    },
    title: [
      {
        subtext: "有功功率/kW"
      }
    ],
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      data: dateList,
      type: "category",
      axisTick: {
        show: false // 这里设置为false隐藏X轴刻度线
      }
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        type: "line",
        showSymbol: false,
        data: valueList,

        lineStyle: {
          color: "#0691D9" // 设置折线颜色为红色
        }
      },
      {
        type: "line",
        stack: "Total",
        showSymbol: false,
        data: secondList
      }
    ]
  };
  console.log(valueList.length);
  console.log(secondList.length);

  if (valueList.length === 0 && secondList.length === 0) {
    trendchartvalue.setOption(
      {
        title: {
          text: "暂无数据",
          left: "center",
          top: "center",
          textStyle: {
            fontSize: 20,
            color: "#999"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "暂无数据"
        },
        legend: {
          // 清空图例
          data: [] // 清空图例内容
        },
        series: [] // 清空系列
      },
      true
    );
  } else {
    trendchartvalue.setOption(option, true);
  }
  // trendchartvalue.setOption(option, true);
};

const device: Ref<Station.systemdevice[]> = ref([]);
const getstationdevice = async () => {
  const { data } = await poststationdevice({}, Singlevalue.value, emsDeviceId.value);
  device.value = data;
};
// 实时运行
const timetype = ref(1);
const value2 = ref();
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
// 选择实时运行
const recently = (val: any) => {
  // 获取当前日期
  timetype.value = val;

  const today = new Date();
  const currentDate = today.toISOString().split("T")[0];
  const currentHour = today.getHours();
  const currentMinute = today.getMinutes();
  // 格式化小时、分钟和秒，确保它们始终有两位数
  const formattedHour = currentHour < 10 ? "0" + currentHour : currentHour;
  const formattedMinute = currentMinute < 10 ? "0" + currentMinute : currentMinute;

  // 拼接成 HH:MM:SS 的格式
  const currentTime = `${formattedHour}:${formattedMinute}`;
  // 获取过去 7 天的日期
  const sevenDaysAgoDate = new Date(today);
  sevenDaysAgoDate.setDate(today.getDate() - 7);
  const sevenDaysAgo = sevenDaysAgoDate.toISOString().split("T")[0];

  // 获取过去 31 天的日期
  const thirtyOneDaysAgoDate = new Date(today);
  thirtyOneDaysAgoDate.setDate(today.getDate() - 31);
  const thirtyOneDaysAgo = thirtyOneDaysAgoDate.toISOString().split("T")[0];
  if (val == 1) {
    value2.value = [currentDate + " " + "00:00", currentDate + " " + currentTime];
  } else if (val == 7) {
    value2.value = [sevenDaysAgo + " " + "00:00", currentDate + " " + currentTime];
  } else if (val == 31) {
    value2.value = [thirtyOneDaysAgo + " " + "00:00", currentDate + " " + currentTime];
  }
  getpoststationdevice();
};
const datepicker = (val: any) => {
  timetype.value = 0;
  value2.value = [formatDate(val[0]), formatDate(val[1])];
  getpoststationdevice();
};
const formatDate = (dateString: string | number | Date) => {
  const date = new Date(dateString);

  // 提取年、月、日、时、分信息
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
  const day = String(date.getDate()).padStart(2, "0"); // 确保是两位数
  const hours = String(date.getHours()).padStart(2, "0"); // 确保是两位数
  const minutes = String(date.getMinutes()).padStart(2, "0"); // 确保是两位数

  // 拼接成 "YYYY-MM-DD HH:MM" 格式
  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;

  return formattedDate;
};
// 实时运行筛选
const PCS = ref(true);
const PCSvalue = ref();
// const power = ref(true);
const metertype = ref(true);
const metervalue = ref();
// const powers = ref(true);
const Battery = ref(true);
const Batteryvalue = ref();
const socvalue = ref(true);
const maxvoltage = ref(true);
const minvoltage = ref(true);
const operatingcurve = ref();
const devicePCS = ref();
const electricMeter = ref();
const batteryCluster = ref();
// const batteryStack = ref([]);
// poststationlist
const getpoststationdevice = async () => {
  const { data } = await poststationlist({}, Singlevalue.value, emsDeviceId.value);
  PCSvalue.value = data.pcs[0].deviceId;
  metervalue.value = data.electricMeter[0].deviceId;
  Batteryvalue.value = data.batteryCluster[0].deviceId;
  devicePCS.value = data.pcs;
  electricMeter.value = data.electricMeter;
  batteryCluster.value = data.batteryCluster;
  let pcsdata = {};
  let Cluster = {};
  let Meter = {};
  let gridmeter = {};
  let stationcolorlist = [];
  if (PCS.value) {
    for (let index = 0; index < data.pcs.length; index++) {
      pcsdata = await getstationrecord(data.pcs[index].deviceId, "totalAcActivePower");
    }
  }
  if (Battery.value) {
    // for (let a = 0; a < data.batteryCluster.length; a++) {
    //   let text = "";
    //   if (socvalue.value) {
    //     text = "soc";
    //   } else if (maxvoltage.value) {
    //     text = "maxCellVoltage";
    //   } else if (minvoltage.value) {
    //     text = "minCellVoltage";
    //   } else if (socvalue.value && minvoltage.value && minvoltage.value) {
    //     text = "soc,maxCellVoltage,minCellVoltage";
    //   }
    Cluster = await getstationrecord(data.batteryCluster[0].deviceId, "soc");
    Cluster = await getstationrecord(data.batteryCluster[0].deviceId, "maxCellVoltage");
    Cluster = await getstationrecord(data.batteryCluster[0].deviceId, "minCellVoltage");
    Cluster = await getstationrecord(data.batteryCluster[0].deviceId, "soc,maxCellVoltage,minCellVoltage");
    // }
  }
  if (metertype.value) {
    for (let i = 0; i < data.electricMeter.length; i++) {
      if (i == 0) {
        Meter = await getstationrecord(data.electricMeter[i].deviceId, "totalActivePower");
      } else {
        gridmeter = await getstationrecord(data.electricMeter[i].deviceId, "totalActivePower");
      }
    }
  }

  if (true) {
    const { data } = await stationcolor(
      { startDateTime: value2.value[0], endDateTime: value2.value[1] },
      Singlevalue.value,
      emsDeviceId.value
    );
    stationcolorlist = data;
  }

  await getoperatingcurve(pcsdata, Cluster, Meter, gridmeter, stationcolorlist);
  // for (let index = 0; index < data.batteryStack.length; index++) {
  //   getstationrecord(data.pcs[index].deviceId, "totalActivePower");
  // }
};
//
const getstationrecord = async (id: string, codes: string) => {
  let obj = {
    startDateTime: value2.value[0],
    endDateTime: value2.value[1],
    deviceId: id,
    fieldCodes: codes
  };
  const { data } = await stationrecord(obj, Singlevalue.value, emsDeviceId.value);

  // if (false) {
  //   getoperatingcurve(data.gridPower, data.storedPower);
  // }
  return data;
};

const getoperatingcurve = (pcsdata: any, Cluster: any, Meter: any, gridmeter: any, stationcolorlist: any[]) => {
  const dateLists = stationcolorlist.map(function (item: any) {
    if (item.periodType == 1) {
      return [
        {
          xAxis: item.startTime,
          itemStyle: {
            color: "#f9efee"
          }
        },
        {
          xAxis: item.endTime
        }
      ];
    } else if (item.periodType == 2) {
      return [
        {
          xAxis: item.startTime,
          itemStyle: {
            color: "#fdfbf9"
          }
        },
        {
          xAxis: item.endTime
        }
      ];
    } else if (item.periodType == 3) {
      return [
        {
          xAxis: item.startTime,
          itemStyle: {
            color: "#f6fcff"
          }
        },
        {
          xAxis: item.endTime
        }
      ];
    } else if (item.periodType == 4) {
      return [
        {
          xAxis: item.startTime,
          itemStyle: {
            color: "#f8fef9"
          }
        },
        {
          xAxis: item.endTime
        }
      ];
    }
  });

  const operatingcurvevalue = echarts.init(operatingcurve.value);
  window.addEventListener(
    "resize",
    () => {
      operatingcurvevalue.resize();
    },
    false
  );
  let option = {
    grid: {
      left: "2%",
      right: "4%",
      bottom: "6%",
      backgroundColor: "#222222", // 设置折线图的背景色
      containLabel: true // 是否包含坐标轴的刻度标签
    },
    legend: {
      bottom: 0
    },
    title: [],
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      data: pcsdata.ts,
      type: "category",
      axisTick: {
        show: false // 这里设置为false隐藏X轴刻度线
      }
    },
    yAxis: [
      {
        type: "value",
        name: "功率/kW",
        show: true,
        id: 0
        // interval: 50
      },
      {
        type: "value",
        name: "SOC/%",
        show: true,
        min: 0,
        max: 100,
        // interval: 10,
        id: 1,
        axisLabel: {
          formatter: "{value} %"
        }
      },
      {
        type: "value",
        name: "电压/V",
        show: true,
        min: 0,
        max: 100,
        position: "right", // 将第三个单位放在右边
        offset: 80, // 调整位置，使其与第二个单位错开
        id: 2,
        axisLabel: {
          formatter: "{value} %" // 设置轴标签格式
        }
      }
    ],
    series: [
      {
        name: pcsdata.deviceName + "_有功功率",
        type: "line",
        showSymbol: false,
        smooth: true,
        data: pcsdata.totalActivePower,

        // color: "rgba(190,233,197, 0.2)"
        markArea: {
          itemStyle: {
            normal: {
              color: "rgba(217  217 217 / 0.5)" // 默认区域的背景颜色
            },
            emphasis: {
              color: "rgba(217  217 217 / 0.5)" // 鼠标悬浮时的背景颜色
            }
          },
          data: dateLists
        }
      },
      {
        name: Meter.deviceName + "_有功功率",
        type: "line",
        showSymbol: false,
        data: Meter.totalActivePower
      },
      // {
      //   name: gridmeter.deviceName + "_有功功率",
      //   type: "line",
      //   data: gridmeter.totalActivePower
      // },

      {
        name: Cluster.deviceName + "_SOC",
        type: "line",
        showSymbol: false,
        data: Cluster.soc
      },
      {
        name: Cluster.deviceName + "_单体最高电压",
        type: "line",
        showSymbol: false,
        data: Cluster.maxCellVoltage
      },
      {
        name: Cluster.deviceName + "_单体最低电压",
        type: "line",
        showSymbol: false,
        // stack: "Total",
        data: Cluster.minCellVoltage
      }
    ]
  };
  //gridmeter
  operatingcurvevalue.setOption(option, false);
};
// 实时电量收益
const pickervalue = ref();
const incomedata = ref();
const pickerincome = async (val: any) => {
  if (val == null) {
    pickervalue.value = "";
  } else {
    pickervalue.value = formatDate(val);
  }
};
const onreset = () => {
  const current = localStorage.getItem("currentDate");
  pickervalue.value = current;
  gatrevenue();
};
const gatrevenue = async () => {
  let obj = {
    date: pickervalue.value
  };
  const { data } = await postelectricityrevenue(obj, Singlevalue.value, emsDeviceId.value);

  incomedata.value = data;
};
onUnmounted(() => {
  clearInterval(intervalID.value);
});
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    pickervalue.value = current;
  }
  // 获取过去 7 天的日期
  const today = new Date();
  const currentHour = today.getHours();
  const currentMinute = today.getMinutes();

  // 格式化小时、分钟和秒，确保它们始终有两位数
  const formattedHour = currentHour < 10 ? "0" + currentHour : currentHour;
  const formattedMinute = currentMinute < 10 ? "0" + currentMinute : currentMinute;

  // 拼接成 HH:MM:SS 的格式
  const currentTime = `${formattedHour}:${formattedMinute}`;
  value2.value = [current + " " + "00:00", current + " " + currentTime];
  poststationstationName();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>