<template>
  <div ref="homePage" class="page">
    <!-- <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="testsx()">测试失效</el-button> -->
      
    <el-row :gutter="20" class="mgb20">

      <!--运营商-->
      <el-col :span="4">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#409EFF'}">
              <component is="Promotion" />
            </el-icon>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/operator')">
              <div class="grid-msg-num" :style="{ color: '#409EFF'}">
                {{ operatotal }}
              </div>
              <div style="font-size: 16px;">运营商</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--换电站-->
      <el-col :span="6">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#28b3a1'}">
              <component is="Flag" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('/swapstation/hdz')">
              <div class="grid-msg-num" :style="{ color: '#28b3a1'}">
                {{ hdztotal }}
              </div>
              <div style="font-size: 16px;">换电站</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/hdz',{status: 1})">
              <div class="grid-msg-num" :style="{ color: '#b5a210'}">
                {{ kyhdz }}
              </div>
              <div style="font-size: 16px;">可用换电站</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--电池总量-->
      <el-col :span="7">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#67C23A'}">
              <component is="SuccessFilled" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('/vehicle/company')">
              <div class="grid-msg-num" :style="{ color: '#67C23A'}">
                {{ rzcompany }}
              </div>
              <div style="font-size: 16px;">认证公司</div>
            </div>
            <div class="grid-msg-right" @click="toRout('/vehicle/wxuser')">
              <div class="grid-msg-num" :style="{ color: '#bc92c9'}">
                {{ rzuser }}
              </div>
              <div style="font-size: 16px;">认证用户</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/car')">
              <div class="grid-msg-num" :style="{ color: '#3aaec2'}">
                {{ rzvehicle }}
              </div>
              <div style="font-size: 16px;">认证车辆</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--机器人数量-->
      <el-col :span="7">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#E6A23C'}">
              <component is="BellFilled" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('swapstation/robot')">
              <div class="grid-msg-num" :style="{ color: '#E6A23C'}">
                {{ robottotal }}
              </div>
              <div style="font-size: 16px;">机器人总数</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('swapstation/robot')">
              <div class="grid-msg-num" :style="{ color: '#34a312'}">
                {{ kyrobot }}
              </div>
              <div style="font-size: 16px;">可用机器人</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col v-for="(item, index) in messageList" :key="index" :span="messageList.length -1 == index?4:5">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{ background: item.color }">
              <component :is="item.icon" />
            </el-icon>
            <div class="grid-msg-right">
              <div class="grid-msg-num" :style="{ color: item.color }">
                {{ item.count }}
              </div>
              <div style="font-size: 16px;">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-col> -->

    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;cursor:pointer;">
            <div style="width:31%;height: 92px;border-radius: 10px 0 0 0;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #409eff;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">电池总量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #409eff;">{{ dctotal }}</div>
            </div>
            <div style="width:31%;height: 92px;text-align: center;background: #fff;" @click="toRout('')">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #67c23a;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电电池</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #67c23a;">{{cddctotal}}</div>
            </div>
            <div style="width:31%;height: 90px;border-radius: 0 10px 0 0;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #e6a23c;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">可用电池</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #e6a23c;">{{kydctotal}}</div>
            </div>
          </div>
          <div style="display: flex;width:100%;height: 90px;border-radius: 0 0 10px 10px;margin-top: 18px;justify-content: space-between;">
            <div style="width:31%;height: 90px;border-radius: 0 0 0 10px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #20b2aa;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩总数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #20b2aa;">--</div>
            </div>
            <div style="width:31%;height: 90px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #b7a948;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩在用数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #b7a948;">--</div>
            </div>
            <div style="width:31%;height: 90px;border-radius: 0 0 10px 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #83abc3;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩可用数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #83abc3;">--</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;">
            <div style="width:31%;height: 200px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">换电订单数</div>
              <div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalOrder}}</div>
            </div>
            <div style="width:31%;height: 200px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #67c23a;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">充电订单数</div>
              <div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #67c23a;">--</div>
            </div>
            <div style="width:31%;height: 200px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #e6a23c;border-radius: 20px 20px 0 0;">收入金额{{totalmoney > 10000000?'（万元）':'（元）'}}</div>
              <div style="height: 60px;line-height: 50px;font-size: 40px;font-weight: bold;color: #e6a23c;">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="Math.trunc(totalmoney/100)+' 元'"
                  placement="top-start"
                >
                {{ jyamount }} 
                </el-tooltip>
              </div>
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #747d90;border-top: 6px solid #ebf5ff;">支出金额{{totalRefund > 10000000?'（万元）':'（元）'}}</div>
              <div style="height: 60px;line-height: 50px;font-size: 40px;font-weight: bold;color: #747d90;">{{zcamount}}</div>
              <!-- <div style="height: 75px;font-weight: bold;font-size: 18px;color: #747d90;">
                <div style="padding-bottom: 10px;">支出金额</div>
                <div style="font-size: 22px;">9999{{zcamount}}</div>
              </div> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20">
      <el-col :span="9">
        <div ref="refChart4" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
      <el-col :span="15">
        <div ref="refChart5" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="9">
        <!-- <el-table 
          style="width:100%;"
          :data="tbList"
          height="240"
          border
        >
            <el-table-column label="日期" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="同比" align="center" prop="stationName" :show-overflow-tooltip="true" />
            <el-table-column label="同比增长" align="center" prop="stationName" :show-overflow-tooltip="true" />    
            <el-table-column label="环比" align="center" prop="miniLimit" :show-overflow-tooltip="true" />
            <el-table-column label="环比增长" align="center" prop="miniLimit" :show-overflow-tooltip="true" />
          </el-table> -->
          <div style="border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;">
            <el-row style="height: 40px;padding: 0 10px;line-height: 40px;background: #20b2aa;border-radius: 10px 10px 0 0;color: #fff;">
              <el-col :span="4" style="text-align: center;">日期</el-col>
              <el-col :span="4" style="text-align: center;">订单量</el-col>
              <el-col :span="4" style="text-align: center;">同比</el-col>
              <el-col :span="4" style="text-align: center;">同比增长</el-col>
              <el-col :span="4" style="text-align: center;">环比</el-col>
              <el-col :span="4" style="text-align: center;">环比增长</el-col>
            </el-row>
            <el-row v-if="tbhbdata.month" style="padding:18px 0;">
              <el-col :span="4" style="text-align: center;">{{tbhbdata.month}}</el-col>
              <el-col :span="4" style="text-align: center;">{{tbhbdata.quantity}}</el-col>
              <el-col :span="4" style="text-align: center;">{{tbhbdata.lastMonthQuantity}}</el-col>

              <!-- <el-col v-if="jytb > 0" :span="4" style="text-align: center;color: #f89898;">+{{jytb}}</el-col>
              <el-col v-else-if="jytb == 0 "  :span="4" style="text-align: center;">{{jytb}}</el-col>
              <el-col v-else :span="4" style="text-align: center;color: #1664b5;">{{jytb}}</el-col> -->

              <template v-if="tbhbdata.lastMonthQuantity == 0">
                <el-col v-if="jytb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;text-align: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>{{jytb}}</el-col>
                <el-col v-else-if="jytb == 0 " :span="4" style="text-align: center;">{{jytb}}</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;"><el-icon color="#f89898">
                    <Bottom />
                  </el-icon>{{jytb}}</el-col>
              </template>
              
              <template v-else>
                <el-col v-if="jytb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>
                  {{parseInt((jytb/tbhbdata.lastMonthQuantity)*100+'')}}%
                </el-col>
                <el-col v-else-if="jytb == 0"  :span="4" style="text-align: center;">0%</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;">
                  <el-icon color="#f89898">
                    <Bottom />
                  </el-icon>
                  {{parseInt((jytb*-1/tbhbdata.lastMonthQuantity)*100+'')}}%
                </el-col>
              </template>

              
              <el-col :span="4" style="text-align: center;">{{tbhbdata.lastYearQuantity}}</el-col>
              <!-- <el-col v-if="jyhb > 0" :span="4" style="text-align: center;color: #f89898;">+{{jyhb}}</el-col>
              <el-col v-else-if="jyhb == 0" :span="4" style="text-align: center;">{{jyhb}}</el-col>
              <el-col v-else :span="4" style="text-align: center;color: #1664b5;">{{jyhb}}</el-col> -->


              <template v-if="tbhbdata.lastYearQuantity == 0">
                <el-col v-if="jyhb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>
                  {{jyhb}}</el-col>
                <el-col v-else-if="jyhb == 0" :span="4" style="text-align: center;">{{jyhb}}</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;text-align: center;color: #f89898;">
                  <el-icon color="#f89898">
                    <Bottom />
                  </el-icon>
                  {{jyhb}}</el-col>
              </template>
              <template v-else>
                <el-col v-if="jyhb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;color: #1664b5;"> 
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>
                  {{parseInt((jyhb/tbhbdata.lastYearQuantity)*100+'')}}%
                </el-col>
                <el-col v-else-if="jyhb == 0" :span="4" style="text-align: center;">0%</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;">
                  <el-icon color="#f89898">
                    <Bottom />
                  </el-icon>
                  {{parseInt((jyhb*-1/tbhbdata.lastYearQuantity)*100+'')}}%
                </el-col>
              </template>
            </el-row>
            
          </div>
          <div style="margin-top: 20px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;">
            <el-row style="height: 40px;padding: 0 10px;line-height: 40px;background: #e6a23c;border-radius: 10px 10px 0 0;color: #fff;">
              <el-col :span="4" style="text-align: center;">日期</el-col>
              <el-col :span="4" style="text-align: center;">交易金额</el-col>
              <el-col :span="4" style="text-align: center;">同比</el-col>
              <el-col :span="4" style="text-align: center;">同比增长</el-col>
              <el-col :span="4" style="text-align: center;">环比</el-col>
              <el-col :span="4" style="text-align: center;">环比增长</el-col>
            </el-row>
            <el-row v-if="tbhbdata.month" style="padding: 18px 0;">
              <el-col :span="4" style="text-align: center;">{{tbhbdata.month}}</el-col>
              <el-col :span="4" style="text-align: center;">{{Math.trunc(tbhbdata.tradeAmount/100)}}</el-col>
              
              <el-col :span="4" style="text-align: center;">{{Math.trunc(tbhbdata.lastMonthTradeAmount/100)}}</el-col>
              

              <!-- <el-col v-if="jetb > 0" :span="4" style="text-align: center;color: #f89898;">+{{jetb}}</el-col>
              <el-col v-else-if="jetb == 0 "  :span="4" style="text-align: center;">{{jetb}}</el-col>
              <el-col v-else :span="4" style="text-align: center;color: #1664b5;">{{jetb}}</el-col> -->

              <template v-if="tbhbdata.lastMonthTradeAmount == 0">

              <el-col v-if="jetb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;text-align: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>{{jetb}}</el-col>
                <el-col v-else-if="jetb == 0 " :span="4" style="text-align: center;">{{jetb}}</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;"><el-icon color="#f89898">
                    <Bottom />
                  </el-icon>{{jetb}}</el-col>

              </template>
              <template v-else>
              
                <el-col v-if="jetb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>
                  {{parseInt((jetb/(tbhbdata.lastMonthTradeAmount/100))*100+'')}}%
                </el-col>
                <el-col v-else-if="jetb == 0"  :span="4" style="text-align: center;">0%</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;">
                  <el-icon color="#f89898">
                    <Bottom />
                  </el-icon>
                  {{parseInt((jetb*-1/(tbhbdata.lastMonthTradeAmount/100))*100+'')}}%
                </el-col>

              </template>

              
              <el-col :span="4" style="text-align: center;">{{Math.trunc(tbhbdata.lastYearTradeAmount/100)}}</el-col>
              <!-- <el-col v-if="jehb > 0" :span="4" style="text-align: center;color: #f89898;">+{{jehb}}</el-col>
              <el-col v-else-if="jehb == 0" :span="4" style="text-align: center;">{{jehb}}</el-col>
              <el-col v-else :span="4" style="text-align: center;color: #1664b5;">{{jehb}}</el-col> -->


              <template v-if="tbhbdata.lastYearTradeAmount == 0">
                <el-col v-if="jehb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;text-align: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>{{jehb}}</el-col>
                <el-col v-else-if="jehb == 0 " :span="4" style="text-align: center;">{{jehb}}</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;"><el-icon color="#f89898">
                    <Bottom />
                  </el-icon>{{jehb*-1}}</el-col>

              </template>
              <template v-else>
                <el-col v-if="jehb > 0" :span="4" style="text-align: center;color: #f89898;">+{{parseInt((jehb/tbhbdata.lastYearTradeAmount)*100+'')}}%</el-col>
                <el-col v-else-if="jehb == 0" :span="4" style="text-align: center;">{{parseInt((jehb/tbhbdata.lastYearTradeAmount)*100+'')}}%</el-col>
                <el-col v-else :span="4" style="text-align: center;color: #1664b5;">{{parseInt((jehb/tbhbdata.lastYearTradeAmount)*100+'')}}%</el-col>

                <el-col v-if="jehb > 0" :span="4" style="display: flex;align-items: center;justify-content: center;color: #1664b5;">
                  <el-icon color="#1664b5">
                    <Top />
                  </el-icon>
                  {{parseInt((jetb/(tbhbdata.lastYearTradeAmount/100))*100+'')}}%
                </el-col>
                <el-col v-else-if="jehb == 0"  :span="4" style="text-align: center;">0%</el-col>
                <el-col v-else :span="4" style="display: flex;align-items: center;justify-content: center;color: #f89898;">
                  <el-icon color="#f89898">
                    <Bottom />
                  </el-icon>
                  {{parseInt((jetb*-1/(tbhbdata.lastYearTradeAmount/100))*100+'')}}%
                </el-col>
              </template>
              
            </el-row>
            
          </div>
      </el-col>
      <el-col :span="15">
        <div ref="refChart6" class="chart-cont2" style="height: 210px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup name="homePage">
import { nextTick, onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import * as echarts from "echarts";
import { onBeforeUnmount } from "vue";
import { watch } from "vue";
import { useElementSize } from "@vueuse/core";
import { 
  gethdztotal,
  getgyctotal,
  gethdztj,
  getjytj,
  getddtj,
  get6jytj,
  gettbhb 
} from '@/api/home'

// import { getToken,removeToken } from '@/utils/auth'
// import { checktoken } from '@/api/login'

//测试登录失效
// function testsx() {
//   checktoken({
//         token:getToken() as string
//       }).then(rps => {
//         if(rps.code != 1000){
         
//         }
//       })
// }

function glnum(n:any){
  if(n>10000000){
    return Math.round((n/1000000)*100)/100
  }
  return n/100
}


let router = useRouter()
function toRout(path:string,query:Record<string, any> = {}) {
  router.push({
    path,
    query
  })
}

//运营商总数
let operatotal = ref('')
//换电站总数
let hdztotal = ref('')
//可用换电站
let kyhdz = ref('')

//电池总量
let dctotal = ref('')
//充电电池
let cddctotal = ref('')
//可用电池
let kydctotal = ref('')

//机器人总数
let robottotal = ref('')
//可用机器人
let kyrobot = ref('')

//认证公司
let rzcompany = ref('')
//认证用户
let rzuser = ref('')
//认证车辆
let rzvehicle = ref('')

//同比
let tbList = ref<any>([])

//查询运营商 换电站 电池 机器人
gethdztotal().then(rps => {
  operatotal.value = (rps.data as any).proxyer
  hdztotal.value = (rps.data as any).totalStation
  kyhdz.value = (rps.data as any).workStation
  dctotal.value = (rps.data as any).totalDC
  cddctotal.value = (rps.data as any).chargeDC
  kydctotal.value = (rps.data as any).availableDC
  robottotal.value = (rps.data as any).totalRobot
  kyrobot.value = (rps.data as any).availableRobot
})

//查询 公司 用户 车辆
getgyctotal().then(rps => {
  rzcompany.value = (rps.data as any).conpany
  rzuser.value = (rps.data as any).totalUser
  rzvehicle.value = (rps.data as any).totalCar
})


const messageList = ref([
  {
    type: "mytask",
    name: "运营商",
    count: 0,
    color: "#409EFF",
    icon: "Promotion",
    linkUrl: "/workbench/workflow/task/myProcess",
  },
  {
    type: "todo",
    name: "换电站",
    count: 55,
    color: "#409EFF",
    icon: "Flag",
    linkUrl: "/workbench/workflow/task/todo",
  },
  {
    type: "done",
    name: "电池总量",
    count: 0,
    color: "#67C23A",
    icon: "SuccessFilled",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "conclude",
    name: "充电电池数量",
    count: 0,
    color: "#67C23A",
    icon: "Checked",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "message",
    name: "机器人数量",
    count: 0,
    color: "#E6A23C",
    icon: "BellFilled",
    linkUrl: "#",
  },
  // {
  //   type: "warninng",
  //   name: "预警信息",
  //   count: 0,
  //   color: "#F56C6C",
  //   icon: "WarningFilled",
  //   linkUrl: "#",
  // },
]);


// 图标4
const refChart4 = ref();
let myChart4: echarts.EChartsType;
const initChart4 = () => {
  if (refChart4.value) {
    //初始化echarts实例
    myChart4 = echarts.init(refChart4.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电站订单占比",
        left: "left",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      label: {
          show: true, // 显示标签
          formatter: '{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
      },
      tooltip: {
        trigger: "item",
      },
      // legend: {
      //   type: "scroll",
      //   orient: "horizontal",
      //   left: "center",
      //   bottom: 0,
      // },
      series: [
        {
          name: "数量",
          type: "pie",
          radius: ['40%','70%'],
          data: bzdata.value,
          padAngle: 2,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
          },
          itemStyle:{
            borderRadius: 3
          }
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option);
  }
};

// 图标5
const refChart5 = ref();
let myChart5: echarts.EChartsType;
const initChart5 = () => {
  if (refChart5.value) {
    //初始化echarts实例
    myChart5 = echarts.init(refChart5.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电站近半年订单统计",
        left: "center",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      // toolbox: {
      //   feature: {
      //     dataView: { title: "数据视图", show: true, readOnly: false },
      //     magicType: {
      //       title: { line: "折线图", bar: "柱状图" },
      //       show: true,
      //       type: ["line", "bar"],
      //     },
      //     restore: { title: "刷新", show: true },
      //     saveAsImage: { title: "下载", show: true },
      //   },
      // },
      legend: {
        data: [ "订单", "金额"],
        top:25
      //bottom: 0,
      },
      xAxis: [
        {
          type: "category",
          data:xdata.value, //["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "订单",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "金额",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value} 元",
          }
        },
      ],
      series: [
        {
          name: "订单",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value;
            },
          },
          data:yOrder.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          yAxisIndex:0
        },
        {
          name: "金额",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " 元";
            },
          },
          data:yMoney.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          yAxisIndex:1
        },
        // {
        //   name: "金额",
        //   type: "line",
        //   tooltip: {
        //     valueFormatter: function (value: string) {
        //       return value + " 元";
        //     },
        //   },
        //   data:yMoney.value //[5.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        // },
        // {
        //   name: "换电量",
        //   type: "line",
        //   tooltip: {
        //     valueFormatter: function (value: string) {
        //       return value + " ml";
        //     },
        //   },
        //   data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        // }
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart5.setOption(option);
  }
};

// 图标6
const refChart6 = ref()
let myChart6: echarts.EChartsType
const initChart6 = () => {
  if (refChart6.value) {
    //初始化echarts实例
    myChart6 = echarts.init(refChart6.value)
    // 指定图表的配置项和数据

    const option = {
      title: {
        text: "近半年交易统计",
        left: "center",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      legend: {
        data: [ "收入交易","余额支付交易","退款交易","收入金额","余额支付金额","退款金额"],
        top:25
      //bottom: 0,
      },
      xAxis: [
        {
          type: "category",
          data:xjydata.value,
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "交易",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "金额",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value} 元",
          }
        },
      ],
      series: [
        {
          name: "收入交易",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value;
            },
          },
          data:yjydata.value,
          yAxisIndex:0
        },
        {
          name: "余额支付交易",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value;
            },
          },
          data:walletQuantity.value,
          yAxisIndex:0
        },
        {
          name: "退款交易",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value;
            },
          },
          data:refundQuantity.value,
          yAxisIndex:0
        },
        {
          name: "收入金额",
          type: "line",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " 元";
            },
          },
          data:jyMoney.value,
          yAxisIndex:1
        },
        {
          name: "余额支付金额",
          type: "line",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " 元";
            },
          },
          data:walletMoney.value,
          yAxisIndex:1
        },
        {
          name: "退款金额",
          type: "line",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " 元";
            },
          },
          data:refundMoney.value,
          yAxisIndex:1
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart6.setOption(option);
  }
};

//重新渲染图表
const resizeChart = () => {
  // 折叠板延迟时间
  setTimeout(() => {
    myChart4?.resize()
    myChart5?.resize()
    myChart6?.resize()
  }, 400);
};

// 监听页面大小变化
const homePage = ref();
const { width: pageWidth } = useElementSize(homePage);
watch(pageWidth, () => {
  resizeChart();
});

//订单总数
let totalOrder = ref('')

//收入金额
let jyamount = ref<any>('')
let totalmoney = ref<any>('')
//支出金额
let zcamount = ref<any>('')
let totalRefund = ref<any>('')
//换电站订单占比统计
let bzdata = ref<any>([])

//6个月订单统计
let xdata = ref<any>([])
let yMoney = ref<any>([])
let yOrder = ref<any>([])

//近6个月交易统计
let xjydata = ref<any>([])
let yjydata = ref<any>([])
let jyMoney = ref<any>([])

let walletQuantity = ref<any>([])   //余额支付交易次数
let refundQuantity = ref<any>([])   //退款交易

let walletMoney = ref<any>([])      //余额支付金额
let refundMoney = ref<any>([])      //退款金额

let tbhbdata = ref<any>({})

let jytb = ref<any>('')   //订单量同比
let jyhb = ref<any>('')   //订单量环比

let jetb = ref<any>('')   //交易金额同比
let jehb = ref<any>('')   //交易金额环比


// 初始化渲染
onMounted(() => {
  nextTick(() => {

    //6个月订单统计
    getddtj().then(rps => {
      if(rps.data){
        xdata.value = (rps.data as any).map((n:any) => {
          return n.month
        })

        yOrder.value = (rps.data as any).map((n:any) => {
          return n.quantity
        })

        yMoney.value = (rps.data as any).map((n:any) => {
          return n.totalMoney
        })        

        initChart5()
      }
    })
    
    //6个月交易
    get6jytj().then(rps => {
      xjydata.value = (rps.data as any).map((n:any) => {
          return n.month
      })
      
      yjydata.value = (rps.data as any).map((n:any) => {
          return n.inQuantity
      })

      jyMoney.value = (rps.data as any).map((n:any) => {
          return Math.trunc(n.inMoney/100)
      })

      walletQuantity.value = (rps.data as any).map((n:any) => {
          return n.walletQuantity
      })

      refundQuantity.value = (rps.data as any).map((n:any) => {
          return n.refundQuantity
      })
      walletMoney.value = (rps.data as any).map((n:any) => {
          return Math.trunc(n.walletMoney/100)
      })

      refundMoney.value = (rps.data as any).map((n:any) => {
          return Math.trunc(n.walletMoney/100)
      })
      initChart6()
    }) 

    //同比 环比
    gettbhb(1).then(rps => {
      tbhbdata.value = rps.data
      
      jytb.value = tbhbdata.value.quantity - tbhbdata.value.lastMonthQuantity             //订单量同比
      jyhb.value = tbhbdata.value.quantity - tbhbdata.value.lastYearQuantity              //订单量环比


      
      jetb.value = Math.trunc((tbhbdata.value.tradeAmount - tbhbdata.value.lastMonthTradeAmount)/100)      //交易金额同比
      jehb.value =Math.trunc((tbhbdata.value.tradeAmount - tbhbdata.value.lastYearTradeAmount)/100)      //交易金额环比

    })
    //gettbhb(2).then(rps => {})

    let year = new Date().getFullYear()
    let moth:any = String((new Date().getMonth() + 1)).padStart(2,'0')
    let date = String(new Date().getDate()).padStart(2,'0')
    // if(moth < 10){
    //   moth = '0'+ moth
    // }
//订单-按换电站统计
gethdztj({
  timeBegin:`${year}-01-01 00:00:00`,	    
  timeEnd:`${year}-${moth}-${date} 23:59:59`	        
}).then(rps => {
  totalOrder.value = (rps.data as any).quantity

   bzdata.value = (rps.data as any).stationOrderDataList.map((n:any) => {
    return {
      name:n.stationName,
      value:n.quantity
    }
  })

  // let keys = Object.keys((rps.data as any).stationRatio)
  // let values = Object.values((rps.data as any).stationRatio)
  // bzdata.value = keys.map((n,i) => {
  //   return {
  //     name:n.split('---')[1],
  //     value:values[i]
  //   }
  // })
  
    // data: [
    //   { value: 1048, name: "充电订单" },
    //   { value: 735, name: "换电订单" },
    //   { value: 580, name: "认证" },
    //   { value: 484, name: "换电" },
    //   { value: 300, name: "充电" },
    // ],

    initChart4();
})



//交易
getjytj({
  timeBegin:`${year}-01-01 00:00:00`,	    
  timeEnd:`${year}-${moth}-${date} 23:59:59`	    
}).then(rps => {
  totalmoney.value = (rps.data as any).totalMoney

  jyamount.value = (rps.data as any).totalMoney

  jyamount.value = glnum(jyamount.value)

  zcamount.value = (rps.data as any).totalRefund
  
  zcamount.value = glnum(zcamount.value)

  totalRefund.value = (rps.data as any).totalRefund
})
    window.addEventListener("resize", resizeChart)
  })
})

//销毁
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart)
})

// defineExpose无需导入，直接使用
// defineExpose({ value });
</script>

<style lang="less" scoped>
@message-width: 80px;

.page {
  padding-bottom: 20px;
}

.grid-message {
  display: flex;
  align-items: center;
  height: @message-width;
  cursor: pointer;
}

.grid-msg-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  border-right:1px solid #ccc;
}

.grid-msg-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-msg-icon {
  font-size: 50px;
  width: @message-width;
  height: @message-width;
  text-align: center;
  line-height: @message-width;
  color: #fff;
}

.chart-cont {
  height: 140px;

  > h1 {
    color: #606266;
    font-weight: normal;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
  }

  > p {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 40px;
  }

  > div {
    height: 60px;
    width: 100%;

    > p {
      margin: 0;
      padding-top: 10px;
      line-height: 20px;
      font-size: 12px;
      color: #909399;
    }
  }
}

.chart-cont2 {
  height: 260px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
