windLifecontrolPro/src/views/home/index.vue

<template>
  <div
    class="homePage"
    :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'"
  >
    <div class="homeMain">
      <div class="leftMain">
        <div style="height: 15px"></div>
        <!-- 天气预测 -->
        <div class="weather">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <span class="headerName cur" @click="showWeaterDialog"
                >天气预测</span
              >
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div class="weatherMain">
            <div class="weatherMain_top">
              <div class="wetherImg">
                <img :src="!swichTheme ? tianqi : tianqiW" alt="" />
              </div>
              <div class="wetherMsg">
                <span class="wetherMsg_Du">{{ weatherFrom.temperature }}°</span>
                <div class="wetherMsg_Det">
                  <span style="margin-left: 5px">{{
                    weatherFrom.weather
                  }}</span>
                  <span>{{ weatherFrom.wind_direction }}</span>
                  <span>{{ weatherFrom.wind_power }}级</span>
                </div>
              </div>
            </div>
            <div class="weatherMain_bot">
              <div class="weaMain" v-for="it in weatherArr" :key="it.name">
                <img :src="it.img" alt="" />
                <p class="pOne">{{ it.value }}</p>
                <p class="pTwo">{{ it.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 实际功率 -->
        <div class="power" style="margin-top: 10px">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <div class="headerNaAll">
                <span class="headerNa">实际功率</span>
                <span class="headerNa2">单位：MW</span>
              </div>
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div class="powerMain">
            <echarts-gauge-component
              :data="powerDataHome"
              :theme="swichTheme"
            />
          </div>
        </div>
        <!-- 实时状态 -->
        <div class="comHeader" style="margin-top: 10px">
          <div class="headerLeft">
            <span class="gray"></span>
            <span class="blue"></span>
          </div>
          <div class="headerRight">
            <span class="headerName">实时状态</span>
            <span class="headerZs">
              <span class="headerZsN"></span>
            </span>
          </div>
        </div>
        <div class="emInfoBox">
          <div class="item">
            <div class="b">
              <div class="info">
                <span class="zj">总计</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.zts }}</span
                >
              </div>
              <div class="info">
                <span class="yx">运行</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.yxsum }}</span
                >
              </div>
              <div class="info">
                <span class="dj">待机</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.djsum }}</span
                >
              </div>
              <div class="info">
                <span class="xd">限电</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.xdsum }}</span
                >
              </div>
            </div>
          </div>
          <div class="item">
            <div class="b">
              <div class="info">
                <span class="gz">故障</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.jxsum }}</span
                >
              </div>
              <div class="info">
                <span class="wh">维护</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.whsum }}</span
                >
              </div>

              <div class="info">
                <span
                  class="sl"
                  :style="`color:${$store.state.theme ? '#000' : '#fff'}`"
                  >受累</span
                >
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.tjsum }}</span
                >
              </div>
              <div class="info">
                <span class="lx">离线</span>
                <span
                  :style="`color: #${$store.state.theme ? '000' : 'fff'}`"
                  >{{ ztmap.lxsum }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="map">
        <div
          class="infoBox"
          :class="mainData && mainData !== '全省数据' ? 'show' : ''"
        >
          <el-button
            style="color: #1850b3"
            icon="ArrowLeft"
            type="info"
            link
            @click="
              switchMainData({
                wpId: 'GJNY_SXGS_DBXNY_ZGS0',
                name: '全省数据',
              })
            "
          >
            全省数据
          </el-button>
          <template v-if="mainData === '获取中...'">
            <p>
              <el-icon>
                <svg
                  class="loadingIcon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 1024 1024"
                >
                  <path
                    fill="currentColor"
                    d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
                  ></path>
                </svg>
              </el-icon>
              {{ mainData }}
            </p>
          </template>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="`当前首页展示数据为 ${mainData} 数据`"
            placement="bottom"
            v-if="
              mainData && mainData !== '全省数据' && mainData !== '获取中...'
            "
          >
            <p>
              <el-icon>
                <View />
              </el-icon>
              {{ mainData }}
            </p>
          </el-tooltip>
        </div>
        <p class="dingbian">定边县</p>
        <p class="jingbian">靖边县</p>
        <div
          class="fengjiSty"
          v-for="it in fengjiArr"
          :key="it"
          :style="fengjiStyFn(it)"
          @click="switchMainData(it)"
        >
          <div class="mainSv">
            <img :src="fengji" class="fengjiImg" />
            <img :src="quan" class="quanImg" />
            <img :src="fengjiBack" class="fengjiBackImg" />
            <span class="dianSty"></span>
          </div>
          <div
            class="mainMsg"
            :class="
              it.name.indexOf('新庄') !== -1 || it.name.indexOf('吉山梁') !== -1
                ? 'mainMsgRotate'
                : ''
            "
          >
            <span>{{ it.name }}</span>
          </div>
        </div>
      </div>
      <div class="rightMain">
        <div style="height: 15px"></div>
        <!-- 电量分析 -->
        <div class="powerAnalysis" v-if="false">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <div class="headerNaAll">
                <span class="headerNa">利用小时情况</span>
                <span class="headerNa2">单位：小时</span>
              </div>
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div class="dlImgBox" v-if="true">
            <span class="label label1">{{ ylyxsList?.[0]?.wpid || "" }}</span>
            <span class="zb zb1"
              >{{ ylyxsList?.[0]?.yfdl >= 0 ? `${ylyxsList[0].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[0]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label2">{{ ylyxsList?.[1]?.wpid || "" }}</span>
            <span class="zb zb2"
              >{{ ylyxsList?.[1]?.yfdl >= 0 ? `${ylyxsList[1].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[1]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label3">{{ ylyxsList?.[2]?.wpid || "" }}</span>
            <span class="zb zb3"
              >{{ ylyxsList?.[2]?.yfdl >= 0 ? `${ylyxsList[2].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[2]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label4">{{ ylyxsList?.[3]?.wpid || "" }}</span>
            <span class="zb zb4"
              >{{ ylyxsList?.[3]?.yfdl >= 0 ? `${ylyxsList[3].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[3]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label5">{{ ylyxsList?.[4]?.wpid || "" }}</span>
            <span class="zb zb5"
              >{{ ylyxsList?.[4]?.yfdl >= 0 ? `${ylyxsList[4].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[4]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label6">{{ ylyxsList?.[5]?.wpid || "" }}</span>
            <span class="zb zb6"
              >{{ ylyxsList?.[5]?.yfdl >= 0 ? `${ylyxsList[5].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[5]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
            <span class="label label7">{{ ylyxsList?.[6]?.wpid || "" }}</span>
            <span class="zb zb7"
              >{{ ylyxsList?.[6]?.yfdl >= 0 ? `${ylyxsList[6].bzgl}` : "----"
              }}<span
                style="color: #646972; font-size: 12px"
                v-if="ylyxsList?.[6]?.yfdl >= 0"
                >&nbsp;小时</span
              >
            </span>
          </div>
          <div class="powerAnalysisMain" v-else>
            <div class="analysRadio">
              <el-radio-group v-model="powerAnalyRadio">
                <el-radio-button label="日" value="日" />
                <el-radio-button label="月" value="月" />
                <el-radio-button label="年" value="年" />
              </el-radio-group>
            </div>
            <div class="analysMain">
              <div class="analysMain_left">
                <div class="analLeftTop">
                  <img :src="dlTop1" alt="" />
                  <span>增发电量</span>
                  <span>30</span>
                </div>
                <div class="analLeftEcharts">
                  <echarts-pie
                    :data="analyPieData"
                    :index="1"
                    :theme="swichTheme"
                    :colors="['#1850B3', '#B2B8CA']"
                  />
                  <span class="echartsNum">25%</span>
                  <span class="echartsName">提升率</span>
                </div>
                <div class="analLeftBot">
                  <div class="analLeftBot_top">
                    <img :src="zengfa" class="leftImg" />
                    <div class="analyleftbottopAll">
                      <div class="analyleftbottopName">及时并网增发电量</div>
                      <div class="analyleftbottopSty">
                        <span>30</span>
                        <img :src="dlTop2" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="analLeftBot_top">
                    <img :src="zengfa" class="leftImg" />
                    <div class="analyleftbottopAll">
                      <div class="analyleftbottopName">
                        主动维护降低损失电量
                      </div>
                      <div class="analyleftbottopSty">
                        <span>30</span>
                        <img :src="dlTop2" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="analysMain_left analysMain_right">
                <div class="analLeftTop">
                  <img :src="dlBot1" alt="" />
                  <span>损失电量</span>
                  <span>30</span>
                </div>
                <div class="analLeftEcharts">
                  <echarts-pie
                    :data="analyPieData"
                    :index="2"
                    :theme="swichTheme"
                    :colors="['#F87909', '#B2B8CA']"
                  />
                  <span class="echartsNum echartsJing">25%</span>
                  <span class="echartsName">降低率</span>
                </div>
                <div class="analLeftBot">
                  <div class="analLeftBot_top">
                    <img :src="sunshi" class="leftImg" />
                    <div class="analyleftbottopAll">
                      <div class="analyleftbottopName">及时并网增发电量</div>
                      <div class="analyleftbottopSty">
                        <span class="echartsJing">30</span>
                        <img :src="dlBot2" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="analLeftBot_top">
                    <img :src="sunshi" class="leftImg" />
                    <div class="analyleftbottopAll">
                      <div class="analyleftbottopName">
                        主动维护降低损失电量
                      </div>
                      <div class="analyleftbottopSty">
                        <span class="echartsJing">30</span>
                        <img :src="dlBot2" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 预测电量 -->
        <div class="Electric">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <div class="headerNaAll">
                <span class="headerNa">预测电量</span>
                <span class="headerNa2">单位：万kWh</span>
              </div>
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div class="electricMain">
            <div
              v-for="(item, index) in dayFa"
              :key="index"
              class="electricMain_day"
            >
              <div class="powerCharts">
                <div class="powerName">
                  {{ item[0].name }}
                </div>
                <div class="powerItem">
                  <div style="width: calc(100% - 100px)">
                    <forecast-bar-component
                      :list="item"
                      height="40px"
                      width="100%"
                      :theme="swichTheme"
                    />
                  </div>
                  <div class="powerValue">
                    <span style="background-color: #ff9b23"></span>
                    <span>{{ item[0].value }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-for="(item, index) in monthFa"
              :key="index"
              class="electricMain_month"
              style="margin-top: 10px"
            >
              <div class="powerCharts">
                <div class="powerName">{{ item[0].name }}</div>
                <div class="powerItem">
                  <div style="width: calc(100% - 100px)">
                    <forecast-bar-component
                      :list="item"
                      height="40px"
                      width="calc(100% + 22px)"
                      :theme="swichTheme"
                    />
                  </div>
                  <div class="powerValue">
                    <span style="background-color: #ff9b23"></span>
                    <span>{{ item[0].value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 计划电量 -->
        <div class="powerPlan">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <div class="headerNaAll">
                <span class="headerNa cur" @click="showJhdlDialog"
                  >计划电量完成情况</span
                >
                <span class="headerNa2">单位：万kWh</span>
              </div>
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div class="powerPlanMain">
            <div class="analysRadio" v-if="false">
              <el-radio-group v-model="powerPlanRadio">
                <el-radio-button label="月" value="月" />
                <el-radio-button label="年" value="年" />
                <!-- <el-radio-button label="光" value="光" disabled />
                                <el-radio-button label="总" value="总" disabled /> -->
              </el-radio-group>
            </div>
            <div class="planMain">
              <div class="planMain_left">
                <div class="analysMain_echarts">
                  <echarts-pie-2
                    :data="powerPlanData"
                    :index="1"
                    :theme="swichTheme"
                  />
                </div>
                <div class="analysMain_Msg">
                  <div class="analysMain_Msg_top">
                    <div class="analysMain_Msg_top_flex">
                      <span>计划</span>
                      <span>{{ Math.floor(powerPlanData.yjhwc) }}</span>
                    </div>
                    <div class="analysMain_Msg_top_flex">
                      <span>实际</span>
                      <span>{{ Math.floor(powerPlanData.ysjwc) }}</span>
                    </div>
                  </div>
                  <div class="analysMain_Msg_bot">
                    <span>月计划完成率</span>
                  </div>
                </div>
              </div>
              <div class="planMain_left">
                <div class="analysMain_echarts">
                  <echarts-pie-2
                    :data="powerPlanData"
                    :index="2"
                    :theme="swichTheme"
                  />
                </div>
                <div class="analysMain_Msg">
                  <div class="analysMain_Msg_top">
                    <div class="analysMain_Msg_top_flex">
                      <span>计划</span>
                      <span>{{ Math.floor(powerPlanData.njhwc) }}</span>
                    </div>
                    <div class="analysMain_Msg_top_flex">
                      <span>实际</span>
                      <span>{{ Math.floor(powerPlanData.nsjwc) }}</span>
                    </div>
                  </div>
                  <div class="analysMain_Msg_bot">
                    <span>年计划完成率</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 利用小时情况 -->
        <div class="cChartBox">
          <div class="comHeader">
            <div class="headerLeft">
              <span class="gray"></span>
              <span class="blue"></span>
            </div>
            <div class="headerRight">
              <div class="headerNaAll">
                <span class="headerNa">利用小时情况</span>
                <span class="headerNa2">单位：小时</span>
              </div>
              <span class="headerZs">
                <span class="headerZsN"></span>
              </span>
            </div>
          </div>
          <div id="cChartDom" style="width: 100%; height: 250px"></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="hover72Power">
        <div
          id="hover72Powers"
          class="cur"
          style="width: 100%; height: 100%"
        ></div>
        <div class="hidBtn" @click="showStHourDialog"></div>
      </div>
      <div class="monthPower">
        <div
          id="monthPowers"
          class="cur"
          style="width: 100%; height: 100%"
        ></div>
        <div class="hidBtn" @click="showYfdlDialog"></div>
      </div>
    </div>
    <el-dialog
      class="currentDialog weather"
      v-model="tqycDialogShow"
      :style="`background: linear-gradient(${
        weatherObj?.dqtq?.weather === '晴'
          ? 'rgb(13, 104, 188), rgb(54, 131, 195)'
          : 'rgb(72, 86, 99), rgb(161, 184, 202)'
      })`"
      width="90%"
      :show-close="false"
      align-center
      destroy-on-close
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="weatherHeader">
          <div class="l" :id="titleId" :class="titleClass">
            <span class="city">{{ weatherObj?.dqtq?.stationName || "" }}</span>
            <span>今天：{{ weatherObj?.dqtq?.weather || "" }}</span>
            <span class="mr"
              >{{ weatherObj?.dqtq?.temperatureNight || "" }}°C~{{
                weatherObj?.dqtq?.temperatureDay || ""
              }}°C</span
            >
            <span
              >{{ weatherObj?.dqtq?.windDirection
              }}{{ weatherObj?.dqtq?.windPower }}级</span
            >
          </div>
          <div class="r">
            <span class="mr">{{ weatherObj?.dqtq?.recordDate }}</span>
            <span class="mr">{{
              getWeekDay(weatherObj?.dqtq?.recordDate || "")
            }}</span>
            <span class="mr" v-if="false"
              >农历{{ weatherObj?.dqtq?.lunar }}</span
            >
            <el-button type="info" link @click="close">
              <el-icon size="20" color="#fff"><Close /></el-icon>
            </el-button>
          </div>
        </div>
      </template>
      <div class="wBox">
        <div class="weatherInfo">
          <div class="wd">{{ weatherObj?.dqtq?.temperatureDay }}°</div>
          <div class="desc">
            <div class="item">
              <div
                style="margin-right: 4px"
                v-html="
                  getWeatherChartIcon('wd', weatherObj?.dqtq?.weather, 20)
                "
              ></div>
              <span>{{ weatherObj?.dqtq?.weather }}</span>
              <span>{{ weatherObj?.dqtq?.windDirection }}</span>
              <span>{{ weatherObj?.dqtq?.windPower }}级</span>
            </div>
            <div class="item">
              <span>湿度{{ weatherObj?.dqtq?.humidity }}%</span>
              <span>紫外线{{ weatherObj?.dqtq?.ultravoilet }}</span>
              <span>日出{{ weatherObj?.dqtq?.sunrisetime }}</span>
              <span>日落{{ weatherObj?.dqtq?.sunsettime }}</span>
            </div>
          </div>
        </div>
        <div class="ybBox">
          <div class="ycTop">
            <span class="title">
              24小时预报&nbsp;(滚轮缩放图表、拖拽移动图表预览区域)
            </span>
            <div class="tabs">
              <div
                class="item"
                :class="weatherChartActiveTab === item.id ? 'active' : ''"
                v-for="item in weatherChartTabList"
                :key="item.id"
                @click="
                  () => {
                    weatherChartActiveTab = item.id;
                    renderWeatherDialogChart(true);
                  }
                "
              >
                {{ item.label }}
              </div>
            </div>
          </div>
          <div
            id="oneDayChart"
            style="width: 100%; height: 160px; margin-top: 20px"
          ></div>
        </div>
        <div class="ybBox">
          <div class="ycTop">
            <span class="title">
              15天预报&nbsp;(滚轮缩放图表、拖拽移动图表预览区域)
            </span>
          </div>
          <div
            id="ftDayChart"
            style="width: 100%; height: 370px; margin-top: 20px"
          ></div>
        </div>
      </div>
      <div
        class="weatherSun"
        :style="
          weatherObj?.dqtq?.weather === '晴'
            ? `background:url(${weatherSun}) no-repeat;`
            : ''
        "
      ></div>
    </el-dialog>
    <el-dialog
      class="currentDialog"
      v-model="yfdlDialogShow"
      :title="`月发电量${getWpName()}`"
      width="90%"
      align-center
      destroy-on-close
    >
      <el-carousel height="750px" :autoplay="false" ref="yfdlCarouselRef">
        <el-carousel-item name="sy">
          <div id="fdlSy" style="width: 100%; height: 100%"></div>
        </el-carousel-item>
        <el-carousel-item name="by">
          <div id="fdlBy" style="width: 100%; height: 100%"></div>
        </el-carousel-item>
        <el-carousel-item name="xy">
          <div id="fdlXy" style="width: 100%; height: 100%"></div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <el-dialog
      class="currentDialog"
      v-model="jhdlDialogShow"
      :title="`计划电量完成情况${getWpName()}`"
      width="90%"
      align-center
      destroy-on-close
    >
      <el-table
        :data="jhdlTableData"
        style="width: 100%; height: 300px"
        :summary-method="sumJhdlMethod"
        show-summary
        border
        stripe
      >
        <el-table-column type="index" label="月份" align="center" />
        <el-table-column prop="fdl" label="发电量(万kWh)" align="center" />
        <el-table-column prop="jhdl" label="计划电量(万kWh)" align="center" />
        <el-table-column prop="wcl" label="完成率(%)" align="center" />
      </el-table>
      <div id="jhdlwcqk" style="width: 100%; height: 450px"></div>
    </el-dialog>
    <el-dialog
      class="currentDialog"
      v-model="stHourDialogShow"
      :title="`14天功率曲线${getWpName()}`"
      width="90%"
      align-center
      destroy-on-close
      append-to-body
    >
      <div id="stHour" style="width: 100%; height: 750px"></div>
    </el-dialog>
    <el-dialog
      class="currentDialog"
      v-model="DialogShow"
      title="Tips"
      width="90%"
      align-center
      destroy-on-close
    >
      <span>123</span>
    </el-dialog>
  </div>
</template>

<script>
import fengji from "@/assets/images/indexCom/fengji.png";
import quan from "@/assets/images/indexCom/quan.png";
import fengjiBack from "@/assets/images/indexCom/fengjiBack.png";
import tixing from "@/assets/images/indexCom/tixing.png";
import tianqi from "@/assets/menuImg/power_tqyb.png";
import tianqiW from "@/assets/images/indexCom/weatherW.png";

import dlTop1 from "@/assets/images/indexCom/dlTop1.png";
import dlTop2 from "@/assets/images/indexCom/dlTop2.png";
import dlBot1 from "@/assets/images/indexCom/dlBot1.png";
import dlBot2 from "@/assets/images/indexCom/dlBot2.png";
import zengfa from "@/assets/images/indexCom/zengfa.png";
import sunshi from "@/assets/images/indexCom/sunshi.png";

import wea1 from "@/assets/images/indexCom/wea_1.png";
import wea2 from "@/assets/images/indexCom/wea_2.png";
import wea3 from "@/assets/images/indexCom/wea_3.png";
import wea4 from "@/assets/images/indexCom/wea_4.png";
import wea5 from "@/assets/images/indexCom/wea_5.png";
import waterIcon from "@/assets/weather/icowater.png";
import weatherSun from "@/assets/weather/sun.png";
import cChart from "@/assets/images/indexCom/cChart.png";

import forecastBarComponent from "@/components/homeComponent/forecastBarComponent.vue";
import echartsGaugeComponent from "@/components/homeComponent/echartsGaugeComponent.vue";
import echartsPie from "@/components/homeComponent/echartsPie.vue";
import echartsPie2 from "@/components/homeComponent/echartsPie2.vue";

import { apiGethomeData, apiGetbulletindlData } from "@/api/gengra";

import DAYJS from "dayjs";

import jsonData from "./component/data.json";

export default {
  components: {
    forecastBarComponent,
    echartsGaugeComponent,
    echartsPie,
    echartsPie2,
  },
  data() {
    return {
      rl: 0,
      swichTheme: null,
      fengji: fengji,
      quan: quan,
      fengjiBack: fengjiBack,
      tixing: tixing,
      tianqi: tianqi,
      tianqiW: tianqiW,
      wea1: wea1,
      wea2: wea2,
      wea3: wea3,
      wea4: wea4,
      wea5: wea5,
      dlTop1: dlTop1,
      dlTop2: dlTop2,
      dlBot1: dlBot1,
      dlBot2: dlBot2,
      zengfa: zengfa,
      sunshi: sunshi,
      weatherArr: [],
      fengjiArr: [],
      dayFa: [],
      monthFa: [],
      powerDataHome: [],
      powerAnalyRadio: "日",
      analyPieData: [],
      powerPlanRadio: "月",
      powerPlanData: {},
      homeDataVo: {},
      weatherFrom: {
        temperature: "",
        weather: "",
        wind_direction: "",
        wind_power: "",
      },
      ylyxsList: [],
      mainData: "",
      wpId: "GJNY_SXGS_DBXNY_ZGS0",
      mainDataLoading: false,
      DialogShow: false,
      tqycDialogShow: false,
      weatherObj: {},
      weatherChartActiveTab: "wd",
      weatherChartTabList: [
        {
          id: "wd",
          label: "温度",
        },
        {
          id: "jsl",
          label: "降水量",
        },
        {
          id: "flfx",
          label: "风力方向",
        },
        {
          id: "kqzl",
          label: "空气质量",
        },
      ],
      waterIcon,
      weatherSun,
      dllist: {},
      yfdlDialogShow: false,
      jhdlDialogShow: false,
      jhdlTableData: [],
      stHourDialogShow: false,
      day14Data: [],
      ztmap: {},
      selectWp: {},
      timeInterval: null,
      timeDealy: 3,
      isFirstLoad: true,
      chart72Options: null,
      chartMonthOptions: null,
    };
  },

  created() {
    this.fengjiArr = [
      {
        name: "繁食沟风电场",
        left: "34%",
        top: "28%",
        wpId: "GJNY_SXGS_FSG_FDC_STA",
      },
      {
        name: "新庄风电场",
        left: "40%",
        top: "24%",
        wpId: "GJNY_SXGS_XZ_FDC_STA",
      },
      {
        name: "草山梁风电场",
        left: "63%",
        top: "33%",
        wpId: "GJNY_SXGS_CSL_FDC_STA",
      },
      {
        name: "雷家山风电场",
        left: "58%",
        top: "22%",
        wpId: "GJNY_SXGS_LJS_FDC_STA",
      },
      {
        name: "吉山梁风电场",
        left: "64%",
        top: "20%",
        wpId: "GJNY_SXGS_JSL_FDC_STA",
      },
      {
        name: "左庄风电场",
        left: "34%",
        top: "38%",
        wpId: "GJNY_SXGS_ZZ_FDC_STA",
      },
    ];
  },

  computed: {
    pageHeight() {
      return {
        height: document.documentElement.clientHeight - 50 + "px",
      };
    },
  },

  watch: {
    "$store.state.theme"(newVal, oldVal) {
      this.swichTheme = newVal;
      this.getHomeData(this.selectWp);
    },
  },

  mounted() {
    this.swichTheme = JSON.parse(window.sessionStorage.getItem("theme"));
    this.getHomeData(this.selectWp);
    this.timeInterval = setInterval(() => {
      this.getHomeData(this.selectWp);
    }, this.timeDealy * 1000);
  },

  unmounted() {
    clearInterval(this.timeInterval);
    this.timeInterval = null;
  },

  methods: {
    getWpName() {
      if (this.mainData === "获取中...") {
        return "";
      } else if (this.mainData === "") {
        return " (公司)";
      } else {
        return ` (${this.mainData})`;
      }
    },
    showWeaterDialog() {
      this.tqycDialogShow = true;
      this.renderWeatherDialogChart();
    },

    showJhdlDialog() {
      this.jhdlDialogShow = true;
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      this.$nextTick(() => {
        let xAxis = [];
        let seriesRF = [];
        let seriesSW = [];
        this.jhdlTableData?.forEach((ele) => {
          seriesRF.push(ele.fdl);
          seriesSW.push(ele.jhdl);
          xAxis.push(`${ele.sj}月`);
        });
        let series = [
          {
            name: "发电量",
            data: seriesRF,
            barGap: "0",
            type: "bar",
          },
          {
            name: "计划电量",
            data: seriesSW,
            type: "bar",
          },
        ];
        let option = {
          title: {
            text: "计划电量完成情况",
            left: "10px",
            top: "10px",
            textStyle: {
              fontSize: "16",
              fontWeight: 400,
              color: theme ? "#1850B3" : "#fff",
            },
          },
          color: ["#1C99FF", "#E57F25"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "75px",
            right: "75px",
            bottom: "20px",
            top: "70px",
            containLabel: true,
          },
          legend: {
            right: "20",
            top: "20",
            itemWidth: 5,
            itemHeight: 5,
            data: ["发电量", "计划电量"],
            textStyle: {
              color: theme ? "#1850B3" : "#fff",
            },
          },
          xAxis: [
            {
              type: "category",
              axisTick: {
                show: false,
              },
              data: xAxis,
              axisLine: {
                lineStyle: {
                  color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: this.$store.state.theme ? "#000" : "#ccc",
                  type: "dashed", // 修改为虚线
                  opacity: 0.2,
                },
              },
              name: "单位：万KWh",
              axisLine: {
                lineStyle: {
                  color: theme ? "#1850B3" : "#fff",
                },
              },
            },
          ],
          series: series,
        };
        if (!this.theme) {
          option.backgroundColor = "";
        }
        // 基于准备好的dom，初始化echarts实例
        let dom = document.getElementById("jhdlwcqk");
        dom && dom.removeAttribute("_echarts_instance_");
        let myChart = this.$echarts.init(dom);
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },

    showStHourDialog() {
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      this.stHourDialogShow = true;
      this.$nextTick(() => {
        let xAxis = [];
        let seriesSpeed = [];
        let seriesGl = [];
        let seriesSJ = [];
        let seriesYc = [];
        this.day14Data?.forEach((it) => {
          xAxis.push(DAYJS(it.time).format("MM-DD HH:mm"));
          seriesSpeed.push(it.speed);
          seriesGl.push(it.expectedpower);
          seriesSJ.push(it.power);
          seriesYc.push(it.predictedpower);
        });

        const allPowerData = seriesGl.concat(seriesSJ, seriesYc);
        const powerMin = Math.min(...allPowerData);
        const powerMax = Math.max(...allPowerData);
        const windSpeedMin = Math.min(...seriesSpeed);
        const windSpeedMax = Math.max(...seriesSpeed);
        const splitNumber = 7;

        let series = [
          {
            name: "平均风速",
            data: seriesSpeed,
            yAxisIndex: 1,
            type: "line",
            symbol: "none",
          },
          {
            name: "应发功率",
            data: seriesGl,
            type: "line",
            symbol: "none",
            yAxisIndex: 0,
          },
          {
            name: "实际功率",
            data: seriesSJ,
            type: "line",
            symbol: "none",
            yAxisIndex: 0,
          },
          {
            name: "预测功率",
            data: seriesYc,
            type: "line",
            symbol: "none",
            yAxisIndex: 0,
          },
        ];
        let option = {
          title: {
            show: false,
            text: "14天功率曲线",
            left: "10px",
            top: "20px",
            textStyle: {
              fontSize: "16",
              fontWeight: 400,
              color: theme ? "#1850B3" : "#fff",
            },
          },
          tooltip: {
            trigger: "axis",
          },
          color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
          legend: {
            right: "20",
            top: "20",
            itemWidth: 5,
            itemHeight: 5,
            data: ["平均风速", "应发功率", "实际功率", "预测功率"],
            textStyle: {
              color: theme ? "#1850B3" : "#fff",
            },
          },
          grid: {
            left: "75px",
            right: "75px",
            bottom: "20px",
            top: "70px",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
              },
            },
          },
          yAxis: [
            {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: this.$store.state.theme ? "#000" : "#ccc",
                  type: "dashed", // 修改为虚线
                  opacity: 0.2,
                },
              },
              name: "单位：MW",
              axisLine: {
                lineStyle: {
                  color: theme ? "#1850B3" : "#fff",
                },
              },
              min: powerMin,
              max: powerMax, // 动态设置最大值
              interval: parseFloat(
                ((powerMax - powerMin) / splitNumber).toFixed(4)
              ),
              splitNumber,
              axisLabel: {
                formatter(value) {
                  return parseInt(value);
                },
              },
            },
            {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: this.$store.state.theme ? "#000" : "#ccc",
                  type: "dashed", // 修改为虚线
                  opacity: 0.2,
                },
              },
              name: "单位：m/s",
              axisLine: {
                lineStyle: {
                  color: theme ? "#1850B3" : "#fff",
                },
              },
              min: windSpeedMin,
              max: windSpeedMax, // 动态设置最大值
              splitNumber,
              interval: parseFloat(
                ((windSpeedMax - windSpeedMin) / splitNumber).toFixed(4)
              ),
              axisLabel: {
                formatter(value) {
                  return parseFloat(value.toFixed(1));
                },
              },
            },
          ],
          series: series,
        };
        if (!this.theme) {
          option.backgroundColor = "";
        }
        // 基于准备好的dom，初始化echarts实例
        let dom = document.getElementById("stHour");
        dom && dom.removeAttribute("_echarts_instance_");
        let myChart = this.$echarts.init(dom);
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },

    showYfdlDialog() {
      this.yfdlDialogShow = true;
      this.renderYfdlChart();
    },

    renderYfdlChart() {
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      this.$nextTick(() => {
        const domList = ["fdlSy", "fdlBy", "fdlXy"];
        ["sqdl", "dydl", "xqlist"].forEach((chartDataKey, domKey) => {
          let xAxis = [];
          let seriesRF = [];
          let seriesSW = [];
          let seriesGW = [];
          for (let idx = 0; idx < 31; idx++) {
            const item = this.dllist?.[chartDataKey]?.[idx] || null;
            if (item) {
              seriesRF.push(item.rfdl);
              seriesSW.push(item.rswdl);
              seriesGW.push(item.rycdl);
              xAxis.push(DAYJS(item.rq).format("MM-DD"));
            }
          }
          let series = [
            {
              name: "日发电量",
              data: seriesRF,
              barGap: "1",
              type: "bar",
            },
            {
              name: "上网电量",
              data: seriesSW,
              type: "bar",
            },
            {
              name: "预测电量",
              data: seriesGW,
              type: "bar",
            },
          ];
          let option = {
            title: {
              text:
                domList[domKey] === "fdlSy"
                  ? "上月发电量"
                  : domList[domKey] === "fdlBy"
                  ? "本月发电量"
                  : "下月预测发电量",
              left: "10px",
              top: "10px",
              textStyle: {
                fontSize: "16",
                fontWeight: 400,
                color: theme ? "#1850B3" : "#fff",
              },
            },
            color: ["#7981AF", "#1C99FF", "#E57F25"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              left: "75px",
              right: "75px",
              bottom: "20px",
              top: "70px",
              containLabel: true,
            },
            legend: {
              right: "20",
              top: "20",
              itemWidth: 5,
              itemHeight: 5,
              data: ["日发电量", "上网电量", "预测电量"],
              textStyle: {
                color: theme ? "#1850B3" : "#fff",
              },
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                data: xAxis,
                axisLine: {
                  lineStyle: {
                    color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                splitNumber: 3.5,
                splitLine: {
                  lineStyle: {
                    color: this.$store.state.theme ? "#000" : "#ccc",
                    type: "dashed", // 修改为虚线
                    opacity: 0.2,
                  },
                },
                name: "单位：万KWh",
                axisLine: {
                  lineStyle: {
                    color: theme ? "#1850B3" : "#fff",
                  },
                },
              },
            ],
            series: series,
          };
          if (!this.theme) {
            option.backgroundColor = "";
          }
          // 基于准备好的dom，初始化echarts实例
          let dom = document.getElementById(domList[domKey]);
          dom && dom.removeAttribute("_echarts_instance_");
          let myChart = this.$echarts.init(dom);
          myChart.setOption(option);
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
        this.$refs.yfdlCarouselRef.setActiveItem("by");
      });
    },

    switchMainData(wp) {
      this.getHomeData(wp);
    },
    fengjiStyFn(it) {
      return `left:${it.left};top:${it.top}`;
    },
    getHomeData(wp = null) {
      let that = this;

      if (wp?.wpId && wp?.name) {
        this.selectWp = wp;
        that.mainData =
          wp.name === "全省数据"
            ? wp.name
            : that.isFirstLoad
            ? "获取中..."
            : that.mainData;
        this.wpId = wp.wpId;
      }
      // that.BASE.showLoading();
      let params = {
        wpId: this.wpId,
      };
      if (this.isFirstLoad) {
        this.initPageData(jsonData);
        this.initbulletindlData(jsonData, "json");
      }
      apiGethomeData(params)
        .then((res) => {
          that.initPageData(res);
        })
        .finally(() => {
          if (wp?.wpId && wp?.name) {
            that.wpId = wp.wpId;
            that.mainData = wp.name;
          }
          // that.BASE.closeLoading();
        });
      apiGetbulletindlData(params).then((rs) => {
        that.initbulletindlData(rs, "rel");
      });
    },

    sumJhdlMethod() {
      let fdl = 0;
      let jhdl = 0;
      this.jhdlTableData.forEach((ele) => {
        fdl += ele.fdl;
        jhdl += ele.jhdl;
      });

      return [
        "合计",
        `${fdl.toFixed(2)} 万kWh`,
        `${jhdl.toFixed(2)} 万kWh`,
        `${((fdl / jhdl) * 100).toFixed(2)} %`,
      ];
    },

    initPageData(res) {
      let that = this;
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      if (res && res.data) {
        this.rl = res.data.rl;
        if (res.data?.["dqtq"] && res.data?.["24tq"] && res.data?.["15tq"]) {
          //天气预报
          let weatherObj = {
            dqtq: res.data?.["dqtq"]?.[0] || {},
            tq24: res.data["24tq"] || [],
            tq15: res.data["15tq"] || [],
          };
          // weatherObj.dqtq.weather = "ddddddddddddd";
          this.weatherObj = weatherObj;
          that.weatherFrom = {
            temperature: weatherObj.dqtq.temperatureDay,
            weather: weatherObj.dqtq.weather,
            wind_direction: weatherObj.dqtq.windDirection,
            wind_power: weatherObj.dqtq.windPower,
          };
          this.weatherArr = [
            {
              name: "能见度",
              value: weatherObj.dqtq.visibility,
              img: wea1,
            },
            {
              name: "湿度",
              value: weatherObj.dqtq.humidity,
              img: wea2,
            },
            {
              name: "气压",
              value: weatherObj.dqtq.pressure,
              img: wea3,
            },
            {
              name: "日出时间",
              value: weatherObj.dqtq.sunrisetime,
              img: wea4,
            },
            {
              name: "日落时间",
              value: weatherObj.dqtq.sunsettime,
              img: wea5,
            },
          ];
        }
        //预测电量
        if (res.data.vo) {
          that.homeDataVo = res.data.vo;
          let it = res.data.vo;
          that.dayFa = [
            [
              {
                name: "日发电量",
                id: "day",
                value: it.rfdl,
                color: "#FF9B23",
                total: 1500,
              },
            ],
            [
              {
                name: "日预测电量",
                id: "day2",
                value: it.rycdl,
                color: "#FF9B23",
                total: 1500,
              },
            ],
          ];
          that.monthFa = [
            [
              {
                name: "月发电量",
                id: "day",
                value: it.yfdl,
                color: "#1C99FF",
                total: 45000,
              },
            ],
            [
              {
                name: "月预测电量",
                id: "day2",
                value: it.yycdl,
                color: "#1C99FF",
                total: 45000,
              },
            ],
          ];
          that.powerDataHome = [
            {
              title: "风速",
              value: it.pjfs,
              max: res.data.rl,
              unit: "MW",
            },
            {
              title: "功率",
              value: it.sfgl,
              max: res.data.rl,
              unit: "MW",
            },
            {
              title: "应发功率",
              value: it.yfgl,
              max: res.data.rl,
              unit: "MW",
            },
            {
              title: "预测功率",
              value: it.bzgl,
              max: res.data.rl,
              unit: "MW",
            },
          ];
        }
        //计划电量完成情况
        if (res.data.jhwcl) {
          that.powerPlanData = res.data.jhwcl;
        }
        if (res.data.jhdltc) {
          this.jhdlTableData = res.data.jhdltc.voList;
        }
        // 72小时功率曲线
        if (res.data["72time"] && res.data["72time"].length > 0) {
          let xAxis = [];
          let seriesSpeed = [];
          let seriesGl = [];
          let seriesSJ = [];
          let seriesYc = [];
          res.data["72time"].forEach((it) => {
            xAxis.push(DAYJS(it.time).format("MM-DD HH:mm"));
            seriesSpeed.push(it.speed);
            seriesGl.push(it.expectedpower);
            seriesSJ.push(it.power);
            seriesYc.push(it.predictedpower);
          });
          let series = [
            {
              name: "平均风速",
              data: seriesSpeed,
              yAxisIndex: 1,
              type: "line",
              symbol: "none",
            },
            {
              name: "应发功率",
              data: seriesGl,
              type: "line",
              symbol: "none",
              yAxisIndex: 0,
            },
            {
              name: "实际功率",
              data: seriesSJ,
              type: "line",
              symbol: "none",
              yAxisIndex: 0,
            },
            {
              name: "预测功率",
              data: seriesYc,
              type: "line",
              symbol: "none",
              yAxisIndex: 0,
            },
          ];

          const allPowerData = seriesGl.concat(seriesSJ, seriesYc);
          const powerMin = Math.min(...allPowerData);
          const powerMax = Math.max(...allPowerData);
          const windSpeedMin = Math.min(...seriesSpeed);
          const windSpeedMax = Math.max(...seriesSpeed);
          const splitNumber = 4;

          that.getPowerLine(
            xAxis,
            series,
            powerMin,
            powerMax,
            windSpeedMin,
            windSpeedMax,
            splitNumber
          );
        }

        this.ylyxsList = res?.data?.yllxs || [];
        this.day14Data = res?.data?.["14time"] || [];

        if (res.data.yllxs) {
          // const nameMap = {
          //   受累损失: "djssdl",
          //   维护损失: "whssdl",
          //   限电损失: "xdssdl",
          //   故障损失: "xdssdl",
          //   性能损失: "xnssdl",
          // };

          // let option = {
          //   tooltip: {
          //     show: true,
          //   },
          //   grid: {
          //     left: "0",
          //     right: "0",
          //     bottom: "0",
          //     top: "0",
          //     containLabel: true,
          //   },
          //   legend: {
          //     orient: "vertical",
          //     right: "20",
          //     top: "15",
          //     itemWidth: 5,
          //     itemHeight: 5,
          //     data: [
          //       "受累损失",
          //       "维护损失",
          //       "限电损失",
          //       "故障损失",
          //       "性能损失",
          //     ],
          //     formatter(name) {
          //       return `${name} ${res.data.wxss[nameMap[name]]} 万kW`;
          //     },
          //     textStyle: {
          //       //图例文字的样式
          //       color: theme ? "#000" : "#fff",
          //     },
          //   },
          //   series: [
          //     {
          //       name: "五项损失",
          //       type: "pie",
          //       radius: ["60%", "100%"], // 控制圆环的内外半径
          //       center: ["38%", "55%"],
          //       startAngle: 180,
          //       endAngle: 360,
          //       label: {
          //         show: false, // 不显示标签
          //       },
          //       padAngle: 2,
          //       itemStyle: {
          //         borderRadius: 0,
          //       },
          //       label: {
          //         show: true, // 显示标签
          //         position: "inside", // 标签显示在外部
          //         formatter: "{d}%", // 标签格式器，{b}是数据项名称，{c}是数值，{d}是百分比
          //       },
          //       data: [
          //         {
          //           value: res.data.wxss.djssdl,
          //           name: "受累损失",
          //           itemStyle: { color: "rgba(255,131,0, 1)" },
          //         },
          //         {
          //           value: res.data.wxss.whssdl,
          //           name: "维护损失",
          //           itemStyle: { color: "rgba(28,153,255, 1)" },
          //         },
          //         {
          //           value: res.data.wxss.xdssdl,
          //           name: "限电损失",
          //           itemStyle: { color: "rgba(86,255,245, 1)" },
          //         },
          //         {
          //           value: res.data.wxss.gzssdl,
          //           name: "故障损失",
          //           itemStyle: { color: "rgba(186,50,55, 1)" },
          //         },
          //         {
          //           value: res.data.wxss.xnssdl,
          //           name: "性能损失",
          //           itemStyle: { color: "rgba(5,187,76, 1)" },
          //         },
          //       ],
          //     },
          //     {
          //       name: "内环图",
          //       type: "pie",
          //       radius: ["50%", "66%"], // 控制圆环的内外半径
          //       center: ["38%", "55%"],
          //       startAngle: 180,
          //       endAngle: 360,
          //       label: {
          //         show: false, // 不显示标签
          //       },
          //       padAngle: 2,
          //       itemStyle: {
          //         borderRadius: 0,
          //       },
          //       tooltip: {
          //         show: false,
          //       },
          //       data: [
          //         {
          //           value: res.data.wxss.djssdl,
          //           name: "受累损失",
          //           itemStyle: { color: "rgba(255,131,0, 0.4)" },
          //         },
          //         {
          //           value: res.data.wxss.whssdl,
          //           name: "维护损失",
          //           itemStyle: { color: "rgba(28,153,255, 0.4)" },
          //         },
          //         {
          //           value: res.data.wxss.xdssdl,
          //           name: "限电损失",
          //           itemStyle: { color: "rgba(86,255,245, 0.4)" },
          //         },
          //         {
          //           value: res.data.wxss.gzssdl,
          //           name: "故障损失",
          //           itemStyle: { color: "rgba(186,50,55, 0.4)" },
          //         },
          //         {
          //           value: res.data.wxss.xnssdl,
          //           name: "性能损失",
          //           itemStyle: { color: "rgba(5,187,76, 0.4)" },
          //         },
          //       ],
          //     },
          //   ],
          //   // graphic: {
          //   //   type: "image",
          //   //   id: "myImage",
          //   //   left: "center",
          //   //   top: "center",
          //   //   z: 100,
          //   //   style: {
          //   //     image: cChart,
          //   //     width: 150,
          //   //     height: 150,
          //   //   },
          //   // },
          // };
          const nameMap = {
            繁: "",
            左: "",
            雷: "",
            吉: "",
            草: "",
            新: "",
            公: "",
          };
          let series = [
            {
              name: "日利用小时",
              data: [],
              barGap: "0",
              type: "bar",
              label: {
                show: true, // 显示标签
                position: "top", // 标签位置
                formatter: "{c}", // 使用默认的数据值作为标签内容
                color: theme ? "#1850B3" : "#fff",
              },
            },
            {
              name: "月利用小时",
              data: [],
              type: "bar",
              label: {
                show: true, // 显示标签
                position: "top", // 标签位置
                formatter: "{c}", // 使用默认的数据值作为标签内容
                color: theme ? "#000" : "#fff",
              },
            },
          ];
          let xAxis = [];
          res.data.yllxs?.forEach((ele) => {
            nameMap[ele.wpid.split("")[0]] = ele.wpid;
            xAxis.push(ele.wpid);
            series[0].data.push(ele.swdl);
            series[1].data.push(ele.bzgl);
          });
          let option = {
            animation: this.isFirstLoad,
            title: {
              text: "利用小时",
              left: "10px",
              top: "10px",
              textStyle: {
                fontSize: "16",
                fontWeight: 400,
                color: theme ? "#1850B3" : "#fff",
              },
            },
            color: ["#7981AF", "#1C99FF", "#E57F25"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              // formatter(data) {
              //   let label = `<p>${nameMap[data[0].name]}</p>`;
              //   data.forEach((ele, index) => {
              //     label += `<p>
              //                 <span style="background:${
              //                   ele.color
              //                 };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
              //                 <span>${
              //                   ele.seriesName
              //                 }:<span style="font-weight: 700;margin-left:10px">${
              //       ele.value || 0
              //     }</span></span>
              //               </p>`;
              //   });
              //   return label;
              // },
            },
            grid: {
              top: "32%",
              left: "2%",
              right: "2%",
              bottom: "5%",
              height: "90px",
              containLabel: true,
            },
            legend: {
              right: "10",
              top: "10",
              itemWidth: 5,
              itemHeight: 5,
              data: ["日利用小时", "月利用小时"],
              textStyle: {
                color: theme ? "#1850B3" : "#fff",
              },
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                data: xAxis,
                axisLine: {
                  lineStyle: {
                    color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                splitNumber: 3.5,
                splitLine: {
                  lineStyle: {
                    color: "transparent",
                  },
                },
                name: "单位：小时",
                axisLine: {
                  lineStyle: {
                    color: theme ? "#1850B3" : "#fff",
                  },
                },
              },
            ],
            series: series,
          };
          if (!this.theme) {
            option.backgroundColor = "";
          }
          // 基于准备好的dom，初始化echarts实例
          let dom = document.getElementById("cChartDom");
          dom && dom.removeAttribute("_echarts_instance_");
          let myChart = this.$echarts.init(dom);
          myChart.setOption(option);
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }

        this.ztmap = res.data.ztmap || {};
      }
      this.isFirstLoad = false;
    },
    initbulletindlData(res, type) {
      let datas = type === "json" ? res.dldata : res.data;
      if (res && datas) {
        // 月发电量
        if (datas.dydl) {
          let xAxis = [];
          let seriesRF = [];
          let seriesSW = [];
          let seriesGW = [];
          this.dllist = datas;
          datas?.dydl.forEach((it) => {
            xAxis.push(DAYJS(it.rq).format("MM-DD"));
            seriesRF.push(it.rfdl);
            seriesSW.push(it.rswdl);
            seriesGW.push(it.rycdl);
          });
          let series = [
            {
              name: "日发电量",
              data: seriesRF,
              barGap: "1",
              type: "bar",
            },
            {
              name: "上网电量",
              data: seriesSW,
              type: "bar",
            },
            {
              name: "预测电量",
              data: seriesGW,
              type: "bar",
            },
          ];
          this.getPowerBar(xAxis, series);
        }
      }
    },
    getPowerBar(xAxis, series) {
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      let myChart;
      let legendState = {};
      if (this.chartMonthOptions?.getOption) {
        legendState = this.chartMonthOptions?.getOption().legend[0].selected;
      }
      let option = {
        animation: this.isFirstLoad,
        title: {
          text: "月发电量",
          left: "5px",
          top: "5px",
          textStyle: {
            fontSize: "16",
            fontWeight: 400,
            color: theme ? "#1850B3" : "#fff",
          },
        },
        color: ["#7981AF", "#1C99FF", "#E57F25"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          height: "110px",
          containLabel: true,
        },
        legend: {
          right: "5",
          top: "5",
          itemWidth: 5,
          itemHeight: 5,
          data: ["日发电量", "上网电量", "预测电量"],
          textStyle: {
            color: theme ? "#1850B3" : "#fff",
          },
          selected: legendState,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: this.$store.state.theme ? "#000" : "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：万KWh",
            axisLine: {
              lineStyle: {
                color: theme ? "#1850B3" : "#fff",
              },
            },
          },
        ],
        series: series,
      };
      if (!this.theme) {
        option.backgroundColor = "";
      }
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById("monthPowers");
      dom && dom.removeAttribute("_echarts_instance_");
      myChart = this.$echarts.init(dom);
      this.chartMonthOptions = myChart;

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    renderWeatherDialogChart(onlyRenderOneDay = false) {
      this.$nextTick(() => {
        if (onlyRenderOneDay) {
          this.renderOneDay();
        } else {
          this.renderOneDay();
          this.renderFtDay();
        }
      });
    },

    renderOneDay() {
      const that = this;
      // 取出 24小时 数据内所有温度，用于给图表指定 MAX 与 MIN 值
      // X轴轴线刻度文字
      const oneDayXAxisData = [];
      // 图表主数据
      const oneDayChartData = [];
      // 取出每条数据内的温度描述，比如晴、阴、小雨，以便后续渲染 tooltip 内的 svg
      const oneDayTemperatureDescList = [];

      let dom = null;
      let option = null;

      dom = document.getElementById("oneDayChart");
      dom && dom.removeAttribute("_echarts_instance_");
      that.weatherObj?.tq24?.forEach((ele) => {
        oneDayXAxisData.push(
          String(DAYJS(ele.recordDate).hour()) === String(DAYJS().hour())
            ? "现在"
            : String(DAYJS(ele.recordDate).hour())
        );
        if (that.weatherChartActiveTab === "wd") {
          oneDayChartData.push(Number(ele.temperature));
          oneDayTemperatureDescList.push(ele.weather);
        } else if (that.weatherChartActiveTab === "jsl") {
          oneDayChartData.push(Number(ele.precipitation));
          oneDayTemperatureDescList.push(ele.precipitation);
        } else if (that.weatherChartActiveTab === "flfx") {
          oneDayChartData.push(Number(ele.windPower));
          oneDayTemperatureDescList.push(ele);
        } else if (that.weatherChartActiveTab === "kqzl") {
          oneDayChartData.push(Number(ele.listaqival || 0));
          oneDayTemperatureDescList.push(ele.listval || "");
        }
      });
      option = {
        title: {
          text: "",
          textStyle: {
            fontSize: "14",
            fontWeight: 400,
            color: "#fff",
          },
        },
        grid: {
          // 让图表占满容器
          top: "10px",
          left: "90px",
          right: "50px",
          bottom: "30px",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.4)",
          formatter(params) {
            const dom = `
            <div class="weaterChartToolTipBox">
              <div class="item">${that.getWeatherChartIcon(
                that.weatherChartActiveTab,
                oneDayTemperatureDescList[params[0].dataIndex]
              )}</div>
              <div class="item">${that.getWeatherChartUnit(
                oneDayTemperatureDescList[params[0].dataIndex],
                params[0].value
              )}</div>
            </div>`;
            return dom;
          },
        },
        xAxis: {
          show: true,
          type: "category",
          boundaryGap: false,
          data: oneDayXAxisData,
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          axisLabel: {
            fontSize: 14,
            color: "#fff", //
            formatter(value) {
              return value === "现在" ? value : `${value}:00`;
            },
            margin: 10,
          },
        },
        yAxis: {
          type: "value",
          min:
            Math.min(...oneDayChartData) - 1 <= 0
              ? Math.min(...oneDayChartData)
              : Math.min(...oneDayChartData) - 1,
          max: Math.max(...oneDayChartData) + 1,
          splitNumber: 1, // 控制 Y 轴的最大刻度数量
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          axisLabel: {
            fontSize: 14,
            color: "#fff", // 设置 Y 轴文字颜色为红色
            formatter: `{value} ${
              that.weatherChartActiveTab === "wd"
                ? "℃"
                : that.weatherChartActiveTab === "jsl"
                ? "mm"
                : that.weatherChartActiveTab === "flfx"
                ? "级"
                : that.weatherChartActiveTab === "kqzl"
                ? "μm"
                : ""
            }`,
            margin: 30,
          },
          splitLine: {
            show: false, // 不显示网格线
          },
        },
        series: [
          {
            data: oneDayChartData,
            symbolSize: 10,
            type: "line",
            // 设置标记点的形状为圆圈
            symbol: "circle",
            itemStyle: {
              normal: {
                // 折点区域颜色
                color: "rgba(255, 255, 255, 0.1)",
                // 折点的边线颜色
                borderColor: "#fff",
                // 折点的边线宽度
                borderWidth: 2,
              },
            },
            // 设置折线颜色
            lineStyle: {
              normal: {
                color: "#fff",
              },
            },
            areaStyle: {
              normal: {
                color: "rgba(255, 255, 255, 0.5)",
              },
            },
          },
        ],
        dataZoom: [
          {
            // 这部分是dataZoom的配置
            type: "inside", // 表示这是 inside 类型
            start: 0, // 数据窗口范围的起始百分比
            end: 100, // 数据窗口范围的结束百分比
          },
        ],
      };

      if (dom) {
        let myChart = this.$echarts.init(dom);
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },
    renderFtDay() {
      const that = this;
      let dom = null;
      let option = null;
      dom = document.getElementById("ftDayChart");
      dom && dom.removeAttribute("_echarts_instance_");

      let tqXData = [];
      let tqxNightData = [];
      let flfxXData = [];
      let rqXData = [];
      let zjXData = [];
      let dayData = [];
      let nightData = [];

      this.weatherObj?.["tq15"]?.records?.forEach((ele) => {
        const itemDate = ele.recordDate.split("-");
        tqXData.push(`${ele.weather}, ${ele.temperatureDay}℃`);
        tqxNightData.push(`${ele.weatherNight}`);
        flfxXData.push(`${ele.windDirection},${ele.windPower}级`);
        rqXData.push(`${itemDate[1]}/${itemDate[2]}`);
        zjXData.push(this.getWeekDay(ele.recordDate));
        dayData.push(ele.temperatureDay);
        nightData.push(ele.temperatureNight);
      });

      option = {
        tooltip: {
          show: false,
        },
        grid: {
          // 让图表占满容器
          top: "80px",
          left: "10px",
          right: "10px",
          bottom: "80px",
        },
        xAxis: [
          // 下方第一条 X 轴，天气
          {
            type: "category",
            position: "bottom",
            data: tqXData,
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisTick: {
              show: true, // 控制轴线是否显示
              inside: true,
              length: 99999,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.15)", // 轴线颜色
                width: 2, // 轴线宽度
                type: "solid", // 轴线类型
              },
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", //
              margin: 5,
            },
          },
          // 下方第二条 X 轴，风力风向
          {
            type: "category",
            position: "bottom",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", //
              margin: 45,
            },
            data: flfxXData,
          },
          // 上方第一条 X 轴，日期
          {
            type: "category",
            position: "top",
            data: rqXData,
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", //
              margin: 5,
            },
          },
          // 上方第二条 X 轴，周几
          {
            type: "category",
            position: "top",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", //
              margin: 45,
            },
            data: zjXData,
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            splitNumber: 2, // 控制 Y 轴的最大刻度数量
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", // 设置 Y 轴文字颜色为红色
              margin: 30,
            },
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLabel: {
              fontSize: 14,
              color: "#fff", //
            },
          },
        ],
        series: [
          {
            type: "line",
            name: "数据1",
            smooth: 0.5,
            data: dayData,
            symbolSize: 10,
            // 设置标记点的形状为圆圈
            symbol: "circle",
            itemStyle: {
              normal: {
                // 折点区域颜色
                color: "rgba(255, 255, 255, 0.1)",
                // 折点的边线颜色
                borderColor: "#fff",
                // 折点的边线宽度
                borderWidth: 2,
              },
            },
            // 设置折线颜色
            lineStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
          {
            type: "line",
            name: "数据2",
            smooth: 0.5,
            data: nightData,
            xAxisIndex: 1, // 指定使用第二个X轴
            symbolSize: 10,
            // 设置标记点的形状为圆圈
            symbol: "circle",
            itemStyle: {
              normal: {
                // 折点区域颜色
                color: "rgba(255, 255, 255, 0.1)",
                // 折点的边线颜色
                borderColor: "#fff",
                // 折点的边线宽度
                borderWidth: 2,
              },
            },
            // 设置折线颜色
            lineStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
        ],
        dataZoom: [
          {
            // 这部分是dataZoom的配置
            type: "inside", // 表示这是 inside 类型
            start: 0, // 数据窗口范围的起始百分比
            end: 60, // 数据窗口范围的结束百分比
          },
        ],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.4)",
          formatter(params) {
            tqXData[params[0].dataIndex];
            const dom = `
            <div class="weaterChartToolTipBox">
              <div class="item">白天${tqXData[params[0].dataIndex]}</div>
              <div class="item" style="margin-top: 4px">夜晚${
                tqxNightData[params[1].dataIndex]
              }, ${params[1].value}℃</div>
              <div class="item" style="margin-top: 4px">早晚温差 ${
                params[0].value - params[1].value
              }℃</div>
            </div>`;
            return dom;
          },
        },
      };

      if (dom) {
        let myChart = this.$echarts.init(dom);
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },

    getWeatherChartIcon(type, weather, iconsize) {
      let res = "";
      if (type === "wd") {
        if (weather === "晴") {
          res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
            iconsize || 30
          }px; height: ${
            iconsize || 30
          }px;"><path fill="#fff" d="M512 704a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m0-704a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 768a32 32 0 0 1 32 32v64a32 32 0 1 1-64 0v-64a32 32 0 0 1 32-32M195.2 195.2a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 1 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm543.104 543.104a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 0 1-45.248 45.248l-45.248-45.248a32 32 0 0 1 0-45.248M64 512a32 32 0 0 1 32-32h64a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32m768 0a32 32 0 0 1 32-32h64a32 32 0 1 1 0 64h-64a32 32 0 0 1-32-32M195.2 828.8a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248L240.448 828.8a32 32 0 0 1-45.248 0zm543.104-543.104a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248l-45.248 45.248a32 32 0 0 1-45.248 0"></path></svg>`;
        } else if (
          weather.indexOf("阴") !== -1 ||
          weather.indexOf("多云") !== -1
        ) {
          res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
            iconsize || 30
          }px; height: ${
            iconsize || 30
          }px;"><path fill="#fff" d="M598.4 895.872H328.192a256 256 0 0 1-34.496-510.528A352 352 0 1 1 598.4 895.872m-271.36-64h272.256a288 288 0 1 0-248.512-417.664L335.04 445.44l-34.816 3.584a192 192 0 0 0 26.88 382.848z"></path><path fill="currentColor" d="M139.84 501.888a256 256 0 1 1 417.856-277.12c-17.728 2.176-38.208 8.448-61.504 18.816A192 192 0 1 0 189.12 460.48a6003.84 6003.84 0 0 0-49.28 41.408z"></path></svg>`;
        } else if (weather.indexOf("雾") !== -1) {
          res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
            iconsize || 30
          }px; height: ${
            iconsize || 30
          }px;"><path fill="#fff" d="M737.216 357.952 704 349.824l-11.776-32a192.064 192.064 0 0 0-367.424 23.04l-8.96 39.04-39.04 8.96A192.064 192.064 0 0 0 320 768h368a207.808 207.808 0 0 0 207.808-208 208.32 208.32 0 0 0-158.592-202.048m15.168-62.208A272.32 272.32 0 0 1 959.744 560a271.808 271.808 0 0 1-271.552 272H320a256 256 0 0 1-57.536-505.536 256.128 256.128 0 0 1 489.92-30.72"></path></svg>`;
        } else if (weather.indexOf("雨") !== -1) {
          res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
            iconsize || 30
          }px; height: ${
            iconsize || 30
          }px;"><path fill="#fff" d="m739.328 291.328-35.2-6.592-12.8-33.408a192.064 192.064 0 0 0-365.952 23.232l-9.92 40.896-41.472 7.04a176.32 176.32 0 0 0-146.24 173.568c0 97.28 78.72 175.936 175.808 175.936h400a192 192 0 0 0 35.776-380.672zM959.552 480a256 256 0 0 1-256 256h-400A239.808 239.808 0 0 1 63.744 496.192a240.32 240.32 0 0 1 199.488-236.8 256.128 256.128 0 0 1 487.872-30.976A256.064 256.064 0 0 1 959.552 480M224 800a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32m192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32m192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32m192 0a32 32 0 0 1 32 32v96a32 32 0 1 1-64 0v-96a32 32 0 0 1 32-32"></path></svg>`;
        } else if (weather.indexOf("雪") !== -1) {
          res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
            iconsize || 30
          }px; height: ${
            iconsize || 30
          }px;"><path fill="#fff" d="m739.328 291.328-35.2-6.592-12.8-33.408a192.064 192.064 0 0 0-365.952 23.232l-9.92 40.896-41.472 7.04a176.32 176.32 0 0 0-146.24 173.568c0 97.28 78.72 175.936 175.808 175.936h400a192 192 0 0 0 35.776-380.672zM959.552 480a256 256 0 0 1-256 256h-400A239.808 239.808 0 0 1 63.744 496.192a240.32 240.32 0 0 1 199.488-236.8 256.128 256.128 0 0 1 487.872-30.976A256.064 256.064 0 0 1 959.552 480M288 800h64v64h-64zm192 0h64v64h-64zm-96 96h64v64h-64zm192 0h64v64h-64zm96-96h64v64h-64z"></path></svg>`;
        }
      } else if (type === "jsl") {
        res = `<div style="width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;">
                    <div style="width: 18px;
                        height: 23px;
                        background:url(${waterIcon});
                        background-position: 0px ${
                          Number(weather) === 0 ? "0" : "231"
                        }px;
                        display: block;
                        outline: none;">
                    </div>
              </div>`;
      } else if (type === "flfx") {
        const windIconMap = {
          东北风: 0,
          东风: 1,
          东南风: 2,
          南风: 3,
          西南风: 4,
          西风: 5,
          西北风: 6,
          北风: 7,
        };
        res = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: ${
          iconsize || 30
        }px; height: ${iconsize || 30}px; transform: rotate(${
          windIconMap[weather.windDirection] * 45 || 0
        }deg); transform-origin: center center;"><path fill="#fff" d="m249.6 417.088 319.744 43.072 39.168 310.272L845.12 178.88 249.6 417.088zm-129.024 47.168a32 32 0 0 1-7.68-61.44l777.792-311.04a32 32 0 0 1 41.6 41.6l-310.336 775.68a32 32 0 0 1-61.44-7.808L512 516.992l-391.424-52.736z"></path></svg>`;
      } else if (type === "kqzl") {
        res = `<div style="width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;">${weather}</div>`;
      }

      return res;
    },

    getWeatherChartUnit(weather, weatherValue) {
      let unit = "";
      const type = this.weatherChartActiveTab;
      if (type === "wd") {
        unit = `${weather} , ${weatherValue}℃`;
      } else if (type === "jsl") {
        unit = `${
          Number(weatherValue) === 0
            ? "无降水"
            : "降水量 " + weatherValue + " mm"
        }`;
      } else if (type === "flfx") {
        unit = `${weather.windDirection} , ${weather.windPower}级`;
      } else if (type === "kqzl") {
        unit = `${weatherValue}μm`;
      }
      return unit;
    },

    getPowerLine(
      xAxis,
      series,
      powerMin,
      powerMax,
      windSpeedMin,
      windSpeedMax,
      splitNumber
    ) {
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;
      let myChart;
      let legendState = {};
      if (this.chart72Options?.getOption) {
        legendState = this.chart72Options.getOption().legend[0].selected;
      }

      let option = {
        animation: this.isFirstLoad,
        title: {
          text: "72小时功率曲线",
          left: "5px",
          top: "5px",
          textStyle: {
            fontSize: "16",
            fontWeight: 400,
            color: theme ? "#1850B3" : "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
        legend: {
          right: "5",
          top: "5",
          itemWidth: 5,
          itemHeight: 5,
          data: ["平均风速", "应发功率", "实际功率", "预测功率"],
          textStyle: {
            color: theme ? "#1850B3" : "#fff",
          },
          selected: legendState,
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          height: "110px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: theme ? "#1850B3" : "#fff", // 修改为需要的颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: this.$store.state.theme ? "#000" : "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：MW",
            axisLine: {
              lineStyle: {
                color: theme ? "#1850B3" : "#fff",
              },
            },
            min: powerMin,
            max: powerMax, // 动态设置最大值
            interval: parseFloat(
              ((powerMax - powerMin) / splitNumber).toFixed(4)
            ),
            splitNumber,
            axisLabel: {
              formatter(value) {
                return parseInt(value);
              },
            },
          },
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: this.$store.state.theme ? "#000" : "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：m/s",
            axisLine: {
              lineStyle: {
                color: theme ? "#1850B3" : "#fff",
              },
            },
            min: windSpeedMin,
            max: windSpeedMax, // 动态设置最大值
            splitNumber,
            interval: parseFloat(
              ((windSpeedMax - windSpeedMin) / splitNumber).toFixed(4)
            ),
            axisLabel: {
              formatter(value) {
                return parseFloat(value.toFixed(1));
              },
            },
          },
        ],
        series: series,
      };
      if (!this.theme) {
        option.backgroundColor = "";
      }
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById("hover72Powers");
      dom && dom.removeAttribute("_echarts_instance_");

      myChart = this.$echarts.init(dom);
      this.chart72Options = myChart;

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    getWeekDay(date = "") {
      let returnValue = "";
      if (date) {
        const zjMap = {
          0: "周日",
          1: "周一",
          2: "周二",
          3: "周三",
          4: "周四",
          5: "周五",
          6: "周六",
        };
        returnValue = zjMap[DAYJS(date).day()];
      }
      return returnValue;
    },
  },
};
</script>

<style lang="less">
.currentDialog {
  &.weather {
    position: relative;
    font-family: PingFangSC-Regular;

    .weatherHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .city {
        font-size: 20px;
        margin-right: 15px;
        color: #fff;
      }

      span {
        font-size: 14px;
        color: #fff;

        &.mr {
          margin-right: 15px;
        }
      }
    }

    .el-dialog__body {
      padding: 0 !important;
      .wBox {
        width: 100%;
        height: 850px;
        color: #fff;
        margin-top: 15px;

        .weatherInfo {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .wd {
            font-size: 79px;
          }
          .desc {
            margin-left: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;

            .item {
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              font-size: 14px;

              span {
                margin-right: 10px;
              }

              &:last-child {
                margin-top: 10px;
              }
            }
          }
        }

        .ybBox {
          box-sizing: border-box;
          width: 100%;
          background: rgba(0, 0, 0, 0.1);
          padding: 22px 17px 17px 17px;
          margin-top: 10px;

          .ycTop {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
              font-size: 18px;
            }

            .tabs {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .item {
                padding: 5px 15px;
                color: rgba(255, 255, 255, 0.6);
                transition: 0.2s;
                cursor: pointer;

                &:hover {
                  color: #fff;
                }

                &.active {
                  color: #fff;
                  background: rgba(255, 255, 255, 0.3);
                  border-radius: 14px;
                  transition: 0.2s;
                }
              }
            }
          }
        }
      }
    }

    .weaterChartToolTipBox {
      border-radius: 4px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      color: #fff;

      .item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;

        &:last-child {
          margin-top: 4px;
        }
      }
    }

    .weatherSun {
      position: absolute;
      left: 160px;
      top: 0;
      width: 100%;
      height: 498px;
      animation: sunMove 1s;
      animation-fill-mode: forwards;
      pointer-events: none;
    }

    @keyframes sunMove {
      0% {
        left: 80px;
      }
      100% {
        left: 200px;
      }
    }
  }
}
</style>

<style lang="less">
.homePage {
  height: 100%;

  .cur {
    cursor: pointer;
  }

  .homeMain {
    display: flex;
    width: 100%;
    height: 74vh;

    .comHeader {
      width: 100%;
      height: 28px;
      display: flex;

      .headerLeft {
        height: 28px;
        width: 20px;
        position: relative;

        .gray {
          position: absolute;
          left: 5px;
          top: 3px;
          display: inline-block;
          width: 5px;
          height: 5px;
          background: #cbd2e2;
        }

        .blue {
          position: absolute;
          left: 5px;
          top: 20px;
          display: inline-block;
          width: 5px;
          height: 5px;
          background: #1c99ff;
          transform: rotate(45deg);
        }
      }

      .headerRight {
        width: calc(100% - 30px);
        height: 28px;
        position: relative;

        .headerName {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 28px;
          margin-left: 10px;
        }

        .headerNaAll {
          display: flex;
          justify-content: space-between;

          .headerNa {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 28px;
            margin-left: 10px;
          }

          .headerNa2 {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            line-height: 28px;
            margin-right: 8px;
          }
        }

        .headerZs {
          display: inline-block;
          position: absolute;
          right: 0;
          top: 22px;
          width: 32px;
          height: 6px;

          .headerZsN {
            position: relative;
            top: -8px;
            left: 2px;
            display: inline-block;
            width: 30px;
            height: 4px;
          }
        }
      }
    }

    .leftMain {
      width: 25%;
      height: 100%;
      margin-left: 20px;

      .weather {
        margin-bottom: 30px;

        .weatherMain {
          margin-top: 15px;

          .weatherMain_top {
            display: flex;

            .wetherImg {
              margin: 9px 0 0 25px;
            }

            .wetherMsg {
              margin-left: 21px;

              .wetherMsg_Du {
                font-family: SourceHanSansCN;
                font-weight: 400;
                font-size: 30px;
              }

              .wetherMsg_Det {
                display: flex;

                span {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  margin-right: 25px;
                }
              }
            }
          }

          .weatherMain_bot {
            display: flex;
            justify-content: space-around;
            margin-top: 18px;

            .weaMain {
              text-align: center;

              .pOne {
                font-family: SourceHanSansCN;
                font-weight: 400;
                font-size: 14px;
                line-height: 28px;
              }

              .pTwo {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
              }
            }
          }
        }
      }

      .Electric {
        margin-bottom: 30px;

        .electricMain {
          padding-top: 20px;

          .electricMain_day,
          .electricMain_month {
            .powerCharts {
              position: relative;
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              width: 100%;
              margin-top: 5px;
              margin-left: 10px;

              .powerName {
                position: absolute;
                left: 30px;
                top: -8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                line-height: 28px;
              }

              .powerItem {
                display: flex;
                width: 100%;

                .powerValue {
                  font-size: 12px;
                  font-family: Bicubik;
                  position: relative;
                  left: 3px;
                  top: 17px;

                  span:nth-child(1) {
                    width: 5px;
                    height: 5px;
                    border-radius: 5px;
                    display: inline-block;
                    margin-right: 5px;
                  }

                  span:nth-child(2) {
                    font-family: Bicubik;
                    font-weight: 400;
                    font-size: 12px;
                    position: relative;
                    top: 2px;
                  }
                }
              }
            }
          }
        }
      }

      .power {
        .powerMain {
          margin-top: 10px;
        }
      }
    }

    .map {
      width: 50%;
      height: 100%;
      position: relative;

      .infoBox {
        width: 0;
        position: absolute;
        left: 0.5%;
        top: 8%;
        transition: 0.35s;
        overflow: hidden;
        padding: 10px 0;
        border: 0;
        border-radius: 12px;
        border: 2px solid rgba(#1850b3, 0);
        box-shadow: 5px 5px 10px 0 rgba(#000, 0);

        .el-button {
          display: block;
          font-size: 18px;
          margin: 0;
        }

        p {
          font-size: 16px;
          margin-top: 12px;
          white-space: nowrap;
          color: #666;
          user-select: none;
          height: 21px;

          .loadingIcon {
            animation: loading 2.5s infinite;
            animation-timing-function: linear;
          }
        }

        &.show {
          padding: 10px;
          width: 150px;
          transition: 0.35s;
          border: 2px solid rgba(#1850b3, 0.25);
          box-shadow: 5px 5px 10px 0 rgba(#000, 0.5);
        }
      }

      @keyframes loading {
        0% {
          transform: rotate(0deg);
          transform-origin: center center;
        }
        100% {
          transform: rotate(360deg);
          transform-origin: center center;
        }
      }

      .dingbian,
      .jingbian {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        line-height: 35px;
      }

      .dingbian {
        position: absolute;
        top: 68%;
        left: 15%;
      }

      .jingbian {
        position: absolute;
        top: 30%;
        left: 67%;
      }

      .fengjiSty {
        position: absolute;
        width: 40px;
        cursor: pointer;

        .mainSv {
          position: relative;
          width: 40px;

          .quanImg {
            position: absolute;
            left: 5px;
            bottom: -2px;
          }

          .fengjiBackImg {
            position: absolute;
            bottom: -2px;
            left: -5px;
          }

          .dianSty {
            display: inline-block;
            width: 6px;
            height: 7px;
            border-radius: 50%;
            position: absolute;
            left: 3px;
          }
        }

        .mainMsg {
          width: 105px;
          height: 30px;
          background-image: url("@/assets/images/indexCom/tixing.png");
          background-repeat: no-repeat;
          position: absolute;
          bottom: -7px;
          left: -98px;

          span {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 23px;
            position: relative;
            left: 6px;
            top: 2px;
          }
        }
        .mainMsgRotate {
          transform: rotate(180deg);
          left: 22%;
          top: 97%;
          span {
            display: inline-block;
            transform: rotate(180deg);
          }
        }
      }
    }

    .rightMain {
      width: 25%;
      height: 100%;
      margin-right: 20px;

      .electricMain_day,
      .electricMain_month {
        .powerCharts {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          width: 100%;
          margin-top: 5px;
          margin-left: 10px;

          .powerName {
            position: absolute;
            left: 30px;
            top: -8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            line-height: 28px;
          }

          .powerItem {
            display: flex;
            width: 100%;

            .powerValue {
              font-size: 12px;
              font-family: Bicubik;
              position: relative;
              left: 3px;
              top: 17px;

              span:nth-child(1) {
                width: 5px;
                height: 5px;
                border-radius: 5px;
                display: inline-block;
                margin-right: 5px;
              }

              span:nth-child(2) {
                font-family: Bicubik;
                font-weight: 400;
                font-size: 12px;
                position: relative;
                top: 2px;
              }
            }
          }
        }
      }

      .analysRadio {
        margin: 16px 0 7px 20px;

        .el-radio-group {
          height: 28px;

          .el-radio-button {
            .el-radio-button__inner {
              width: 48px;
            }
          }
        }
      }

      .powerAnalysis {
        .powerAnalysisMain {
          .analysMain {
            margin-left: 20px;
            width: 100%;
            display: flex;

            .analysMain_left {
              width: 50%;

              .analLeftTop {
                display: flex;

                img {
                  width: 14px;
                  height: 14px;
                  position: relative;
                  top: 5px;
                }

                span {
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  line-height: 28px;
                  margin-left: 3px;
                }
              }

              .analLeftEcharts {
                position: relative;

                .echartsNum {
                  position: absolute;
                  top: 30%;
                  left: 38%;
                  font-family: Bicubik;
                  font-weight: 400;
                  font-size: 16px;
                }

                .echartsName {
                  position: absolute;
                  top: 50%;
                  left: 38%;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                }
              }

              .analLeftBot {
                .analLeftBot_top {
                  display: flex;

                  .leftImg {
                    width: 36px;
                    height: 36px;
                  }

                  .analyleftbottopAll {
                    margin-left: 2px;

                    .analyleftbottopName {
                      position: relative;
                      top: -5px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      line-height: 28px;
                    }

                    .analyleftbottopSty {
                      display: flex;
                      position: relative;
                      top: -13px;

                      span {
                        font-family: Bicubik;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 28px;
                      }

                      img {
                        width: 12px;
                        height: 12px;
                        position: relative;
                        top: 8px;
                        left: 8px;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .dlImgBox {
          width: 100%;
          height: 300px;
          background: url("@/assets/images/headerCom/lyxs.png") no-repeat center
            center;
          background-size: 95%;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #646972;

          .label {
            width: 100px;
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            position: absolute;
            font-size: 14px;

            &.label1 {
              left: 12.5%;
              top: 19%;
            }
            &.label2 {
              left: 6.5%;
              top: 36.5%;
            }
            &.label3 {
              left: 12.5%;
              top: 53.5%;
            }
            &.label4 {
              justify-content: flex-end;
              left: 66%;
              top: 19%;
            }
            &.label5 {
              justify-content: flex-end;
              left: 72.5%;
              top: 36.5%;
            }
            &.label6 {
              justify-content: flex-end;
              left: 66%;
              top: 54%;
            }
            &.label7 {
              justify-content: center;
              left: calc(50% - 50px);
              top: calc(50% - 10px);
            }
          }

          .zb {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            position: absolute;
            color: rgb(23, 78, 179);
            font-size: 16px;
            font-weight: 700;

            &.zb1 {
              left: 9%;
              top: 27%;
            }
            &.zb2 {
              left: 2.5%;
              top: 44%;
            }
            &.zb3 {
              left: 9%;
              top: 63%;
            }
            &.zb4 {
              left: 69.5%;
              top: 27%;
            }
            &.zb5 {
              left: 76%;
              top: 44%;
            }
            &.zb6 {
              left: 69.5%;
              top: 63%;
            }
            &.zb7 {
              left: calc(50% - 50px);
              top: calc(50% + 10px);
            }
          }
        }
      }

      .powerPlan {
        margin-top: 10px;

        .powerPlanMain {
          .planMain {
            width: 100%;
            display: flex;
            justify-content: space-around;

            .planMain_left {
              width: calc(50% - 40px);
              padding: 0 10px;

              .analysMain_echarts {
                width: 100%;
                text-align: center;
              }

              .analysMain_Msg {
                .analysMain_Msg_top {
                  display: flex;
                  justify-content: space-between;
                  width: 100%;

                  .analysMain_Msg_top_flex {
                    display: flex;
                    padding: 0 10px;
                    width: calc(100% - 20px);

                    span {
                      display: inline-block;
                    }

                    span:nth-child(1) {
                      width: 30px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      line-height: 28px;
                    }

                    span:nth-child(2) {
                      font-family: Arial;
                      font-weight: 400;
                      font-size: 14px;
                      line-height: 28px;
                    }
                  }
                }

                .analysMain_Msg_bot {
                  // opacity: 0.5;
                  text-align: center;

                  span {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 28px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 0 36px;
    width: calc(100% - 72px);
    height: 19vh;

    .hover72Power,
    .monthPower {
      width: calc(50% - 10px);
      background: rgba(41, 45, 53, 0.4);
      border-radius: 6px;
      position: relative;
      .hidBtn {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 0;
        height: 24px;
        cursor: pointer;
      }
    }

    .hover72Power {
      .hidBtn {
        width: 125px;
      }
    }

    .monthPower {
      .hidBtn {
        width: 75px;
      }
    }
  }
}

.themeDarkHome {
  background-color: #0f0f0f;
  background-image: url("@/assets/images/indexCom/backImg_B.png");
  background-repeat: no-repeat;

  .homeMain {
    .map {
      background-image: url("@/assets/images/indexCom/map_B.png");
      background-repeat: no-repeat;
      background-size: 90%;
      background-position: center;
    }

    .map {
      .dingbian,
      .jingbian {
        color: #a5abb7;
        text-shadow: 0px 1px 2px #070a11;
      }

      .fengjiSty {
        .mainSv {
          .dianSty {
            background: #31fbfd;
          }
        }
      }
    }

    .comHeader {
      .headerRight {
        background: #2d3138;

        .headerNaAll {
          .headerNa2 {
            color: #787f8f;
          }
        }

        .headerZs {
          background: #0f0f0f;

          .headerZsN {
            background: #41454c;
          }
        }
      }
    }

    .leftMain {
      .weather {
        .weatherMain {
          .weatherMain_top {
            .wetherImg {
              img {
                width: 48px;
                height: 48px;
              }
            }

            .wetherMsg {
              .wetherMsg_Du {
                color: #ffffff;
              }

              .wetherMsg_Det {
                span {
                  color: #ffffff;
                }
              }
            }
          }

          .weatherMain_bot {
            .weaMain {
              .pOne {
                color: #ffffff;
              }

              .pTwo {
                color: #8b93a6;
              }
            }
          }
        }
      }

      .Electric {
        .electricMain {
          .electricMain_day,
          .electricMain_month {
            .powerCharts {
              .powerName {
                color: #8b93a6;
              }

              .powerItem {
                .powerValue {
                  span:nth-child(1) {
                    background-color: #fff;
                  }

                  span:nth-child(2) {
                    color: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
    }

    .rightMain {
      .analysRadio {
        .el-radio-group {
          .el-radio-button {
            .el-radio-button__inner {
              color: #fff;
              border: 1px solid #3b4c6c;
              background: transparent;
            }
          }

          .is-active {
            background: linear-gradient(
              90deg,
              rgba(28, 113, 255, 0),
              rgba(28, 113, 255, 0.6)
            );
          }
        }
      }

      .powerAnalysis {
        .powerAnalysisMain {
          .analysMain {
            .analysMain_left {
              .analLeftTop {
                span {
                  color: #8b93a6;
                }
              }

              .analLeftEcharts {
                .echartsNum {
                  color: #1c99ff;
                }

                .echartsName {
                  color: #8b93a6;
                }
              }

              .analLeftBot {
                .analLeftBot_top {
                  .analyleftbottopAll {
                    .analyleftbottopName {
                      color: #8b93a6;
                    }

                    .analyleftbottopSty {
                      span {
                        color: #ffffff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .powerPlan {
        .powerPlanMain {
          .planMain {
            .planMain_left {
              .analysMain_echarts {
                border-bottom: 1px dashed #393f4d;
              }

              .analysMain_Msg {
                .analysMain_Msg_top {
                  .analysMain_Msg_top_flex {
                    span:nth-child(1) {
                      color: #8b93a6;
                    }

                    span:nth-child(2) {
                      color: #ffffff;
                    }
                  }
                }

                .analysMain_Msg_bot {
                  background: #2d3138;

                  span {
                    color: #8b93a6;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer {
    .monthPower {
      background: rgba(41, 45, 53, 0.4);
    }

    .hover72Power {
      background: rgba(41, 45, 53, 0.4);
    }
  }
}

.themeLightHome {
  background-color: #e6e8f2;
  background-image: url("@/assets/images/indexCom/backImg_W.png");
  background-repeat: no-repeat;

  .homeMain {
    .map {
      background-image: url("@/assets/images/indexCom/map_W.png");
      background-repeat: no-repeat;
      background-size: 90%;
      background-position: center;
    }

    .map {
      .dingbian,
      .jingbian {
        color: #fff;
        text-shadow: 0px 1px 2px #070a11;
      }

      .fengjiSty {
        cursor: pointer;
        .mainSv {
          .dianSty {
            background: #1850b3;
            border: 1px solid #ffffff;
          }
        }
      }
    }

    .comHeader {
      .headerRight {
        background: #1850b3;

        .headerNaAll {
          .headerNa2 {
            color: #babed3;
          }
        }

        .headerZs {
          background: #fff;

          .headerZsN {
            background: #4f70ec;
          }
        }
      }
    }

    .leftMain {
      .weather {
        .weatherMain {
          .weatherMain_top {
            .wetherMsg {
              .wetherMsg_Du {
                color: #1850b3;
              }

              .wetherMsg_Det {
                span {
                  color: #575a5f;
                }
              }
            }
          }

          .weatherMain_bot {
            .weaMain {
              .pOne {
                color: #575a5f;
              }

              .pTwo {
                color: #646972;
              }
            }
          }
        }
      }

      .Electric {
        .electricMain {
          .electricMain_day,
          .electricMain_month {
            .powerCharts {
              .powerName {
                color: #67666c;
              }

              .powerItem {
                .powerValue {
                  span:nth-child(1) {
                    background-color: #fff;
                  }

                  span:nth-child(2) {
                    color: #242426;
                  }
                }
              }
            }
          }
        }
      }
    }

    .rightMain {
      .analysRadio {
        .el-radio-group {
          .el-radio-button {
            .el-radio-button__inner {
              color: #646972;
            }
          }

          .is-active {
            .el-radio-button__inner {
              background: #1850b3 !important;
              color: #fff;
            }
          }
        }
      }

      .powerAnalysis {
        .powerAnalysisMain {
          .analysMain {
            .analysMain_left {
              .analLeftTop {
                span:nth-child(1) {
                  color: #646972;
                }

                span:nth-child(2) {
                  color: #242426;
                }
              }

              .analLeftEcharts {
                .echartsNum {
                  color: #1850b3;
                }

                .echartsJing {
                  color: #f87909;
                }

                .echartsName {
                  color: #646972;
                }
              }

              .analLeftBot {
                .analLeftBot_top {
                  .analyleftbottopAll {
                    .analyleftbottopName {
                      color: #646972;
                    }

                    .analyleftbottopSty {
                      span {
                        color: #1850b3;
                      }

                      .echartsJing {
                        color: #f87909;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .powerPlan {
        .powerPlanMain {
          .planMain {
            .planMain_left {
              .analysMain_echarts {
                border-bottom: 1px dashed #393f4d;
              }

              .analysMain_Msg {
                .analysMain_Msg_top {
                  .analysMain_Msg_top_flex {
                    span:nth-child(1) {
                      color: #646972;
                    }

                    span:nth-child(2) {
                      color: #1850b3;
                    }
                  }
                }

                .analysMain_Msg_bot {
                  background: #ccd0de;

                  span {
                    color: #646972;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer {
    .monthPower,
    .hover72Power {
      background: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
<style lang="less" scoped>
.emInfoBox {
  padding: 0 5px;
  width: calc(100% - 20px);
  border-radius: 4px;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    .b {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      width: calc(100% - 30px);
      padding: 0 15px;

      .info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;

        .zj {
          color: rgb(119, 128, 171);
        }

        .yx {
          color: rgb(29, 153, 255);
        }

        .dj {
          color: rgb(5, 187, 76);
        }

        .gz {
          color: rgb(186, 50, 55);
        }

        .wh {
          color: rgb(225, 126, 35);
        }

        .xd {
          color: rgb(197, 49, 199);
        }

        .sl {
          color: rgb(255, 255, 255);
        }

        .lx {
          color: rgb(96, 103, 105);
        }

        & span:first-child {
          margin-bottom: 4px;
        }
      }
    }

    .unit {
      font-size: 12px;
      // color: #76819b;
      color: #eee;
    }

    .genre {
      font-size: 14px;
      color: #76819b;
      margin-bottom: 4px;
    }
  }
}
.cChartBox {
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 1000;
}
</style>